gdxz/miniprogram-doctor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.22

Browse Source
This commit is contained in:
zoujiandong
2024-01-22 08:55:30 +08:00
parent 22f3da6c33
commit 2bd2fd31ac
3460 changed files with 136738 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/miniprogram_npm/tdesign-miniprogram/radio/README.en-US.md
+50
View File
@@ -0,0 +1,50 @@
:: BASE_DOC ::
## API
### Radio Props
name | type | default | description | required
-- | -- | -- | -- | --
align | String | left | options：left/right | N
allow-uncheck | Boolean | false | \- | N
block | Boolean | true | \- | N
checked | Boolean | false | \- | N
default-checked | Boolean | undefined | uncontrolled property | N
content | String / Slot | - | \- | N
content-disabled | Boolean | false | \- | N
custom-style `v0.25.0` | String | - | \- | N
disabled | Boolean | undefined | \- | N
external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| Array<string>` | N
label | String / Slot | - | \- | N
max-content-row | Number | 5 | \- | N
max-label-row | Number | 3 | \- | N
name | String | - | \- | N
value | String / Number / Boolean | false | Typescript：`T` | N
### Radio Events
name | params | description
-- | -- | --
change | `(checked: boolean)` | \-
### RadioGroup Props
name | type | default | description | required
-- | -- | -- | -- | --
align | String | left | options：left/right | N
borderless | Boolean | false | \- | N
custom-style `v0.25.0` | String | - | \- | N
disabled | Boolean | undefined | \- | N
icon | String / Array | 'circle' | Typescript：`'circle' | 'line' | Array<string>` | N
keys | Object | - | Typescript：`KeysType` | N
name | String | - | \- | N
options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
value | String / Number / Boolean | - | Typescript：`T` | N
default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` | N
### RadioGroup Events
name | params | description
-- | -- | --
change | `(value: T)` | \-
user/miniprogram_npm/tdesign-miniprogram/radio/README.md
+97
View File
@@ -0,0 +1,97 @@
---
title: Radio 单选框
description: 用于在预设的一组选项中执行单项选择，并呈现选择结果。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-98%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-radio": "tdesign-miniprogram/radio/radio",
"t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
}
```
## 代码演示
### 纵向单选框
{{ base }}
### 横向单选框
{{ horizontal }}
### 单选框状态
{{ status }}
### 勾选样式
{{ theme }}
### 勾选显示位置
{{ align }}
### 非通栏单选样式
{{ card }}
### 特殊样式
{{ special }}
## API
### Radio Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
align | String | left | 复选框和内容相对位置。可选项：left/right | N
allow-uncheck | Boolean | false | 【开发中】是否允许取消选中 | N
block | Boolean | true | 是否为块级元素 | N
checked | Boolean | false | 是否选中 | N
default-checked | Boolean | undefined | 是否选中。非受控属性 | N
content | String / Slot | - | 单选内容 | N
content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
disabled | Boolean | undefined | 是否为禁用态 | N
external-classes | Array | - | 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标。TS 类型：`'circle' | 'line' ｜ 'dot' | Array<string>` | N
label | String / Slot | - | 主文案 | N
max-content-row | Number | 5 | 内容最大行数限制 | N
max-label-row | Number | 3 | 主文案最大行数限制 | N
name | String | - | HTML 元素原生属性 | N
value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`RadioValue` `type RadioValue = string | number | boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
### Radio Events
名称 | 参数 | 描述
-- | -- | --
change | `(checked: boolean)` | 值变化时触发
### RadioGroup Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
align | String | null | 复选框和内容相对位置；仅在使用 options 时生效。可选项：left/right | N
borderless | Boolean | false | 是否开启无边框模式 | N
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
disabled | Boolean | undefined | 是否禁用全部子单选框 | N
icon | String / Array | 'fill-circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标；仅在使用 options 时生效。TS 类型：`'fill-circle' | 'stroke-line' | Array<string>` | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
name | String | - | HTML 元素原生属性 | N
options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
value | String / Number / Boolean | false | 选中的值。TS 类型：`RadioValue` | N
default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`RadioValue` | N
### RadioGroup Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: RadioValue)` | 选中值发生变化时触发
user/miniprogram_npm/tdesign-miniprogram/radio/props.d.ts
Vendored
+3
View File
@@ -0,0 +1,3 @@
import { TdRadioProps } from './type';
declare const props: TdRadioProps;
export default props;
user/miniprogram_npm/tdesign-miniprogram/radio/props.js
+64
View File
@@ -0,0 +1,64 @@
const props = {
align: {
type: String,
value: 'left',
},
allowUncheck: {
type: Boolean,
value: false,
},
block: {
type: Boolean,
value: true,
},
checked: {
type: Boolean,
value: null,
},
defaultChecked: {
type: Boolean,
value: false,
},
content: {
type: String,
},
contentDisabled: {
type: Boolean,
value: false,
},
customStyle: {
type: String,
value: '',
},
disabled: {
type: Boolean,
value: undefined,
},
externalClasses: {
type: Array,
},
icon: {
type: null,
value: 'circle',
},
label: {
type: String,
},
maxContentRow: {
type: Number,
value: 5,
},
maxLabelRow: {
type: Number,
value: 3,
},
name: {
type: String,
value: '',
},
value: {
type: null,
value: false,
},
};
export default props;
user/miniprogram_npm/tdesign-miniprogram/radio/radio.d.ts
Vendored
+101
View File
@@ -0,0 +1,101 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Radio extends SuperComponent {
externalClasses: string[];
behaviors: string[];
parent: any;
relations: RelationsOptions;
options: {
multipleSlots: boolean;
};
lifetimes: {
attached(): void;
};
properties: {
borderless: {
type: BooleanConstructor;
value: boolean;
};
align?: {
type: StringConstructor;
value?: "left" | "right";
};
allowUncheck?: {
type: BooleanConstructor;
value?: boolean;
};
block?: {
type: BooleanConstructor;
value?: boolean;
};
checked?: {
type: BooleanConstructor;
value?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
};
content?: {
type: StringConstructor;
value?: string;
};
contentDisabled?: {
type: BooleanConstructor;
value?: boolean;
};
customStyle?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"];
};
icon?: {
type: null;
value?: string[] | "circle" | "line";
};
label?: {
type: StringConstructor;
value?: string;
};
maxContentRow?: {
type: NumberConstructor;
value?: number;
};
maxLabelRow?: {
type: NumberConstructor;
value?: number;
};
name?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: import("./type").RadioValue;
};
};
controlledProps: {
key: string;
event: string;
}[];
data: {
prefix: string;
classPrefix: string;
customIcon: boolean;
slotIcon: boolean;
optionLinked: boolean;
iconVal: any[];
};
methods: {
handleTap(e: any): void;
doChange(): void;
initStatus(): void;
setDisabled(disabled: Boolean): void;
};
}
user/miniprogram_npm/tdesign-miniprogram/radio/radio.js
+107
View File
@@ -0,0 +1,107 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import config from '../common/config';
import { SuperComponent, wxComponent } from '../common/src/index';
import Props from './props';
const { prefix } = config;
const name = `${prefix}-radio`;
const iconDefault = {
'fill-circle': ['check-circle-filled', 'circle'],
'stroke-line': ['check', ''],
};
let Radio = class Radio extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-label`,
`${prefix}-class-icon`,
`${prefix}-class-content`,
`${prefix}-class-border`,
];
this.behaviors = ['wx://form-field'];
this.parent = null;
this.relations = {
'../radio-group/radio-group': {
type: 'ancestor',
linked(parent) {
this.parent = parent;
if (parent.data.align) {
this.setData({ align: parent.data.align });
}
if (parent.data.borderless) {
this.setData({ borderless: true });
}
},
},
};
this.options = {
multipleSlots: true,
};
this.lifetimes = {
attached() {
this.initStatus();
},
};
this.properties = Object.assign(Object.assign({}, Props), { borderless: {
type: Boolean,
value: false,
} });
this.controlledProps = [
{
key: 'checked',
event: 'change',
},
];
this.data = {
prefix,
classPrefix: name,
customIcon: false,
slotIcon: false,
optionLinked: false,
iconVal: [],
};
this.methods = {
handleTap(e) {
if (this.data.disabled)
return;
const { target } = e.currentTarget.dataset;
if (target === 'text' && this.data.contentDisabled)
return;
this.doChange();
},
doChange() {
const { value, checked } = this.data;
if (this.$parent) {
this.$parent.updateValue(value);
}
else {
this._trigger('change', { checked: !checked });
}
},
initStatus() {
var _a;
const { icon } = this.data;
const isIdArr = Array.isArray(((_a = this.parent) === null || _a === void 0 ? void 0 : _a.icon) || icon);
this.setData({
customIcon: isIdArr,
slotIcon: icon === 'slot',
iconVal: !isIdArr ? iconDefault[icon] : this.data.icon,
});
},
setDisabled(disabled) {
this.setData({
disabled: this.data.disabled || disabled,
});
},
};
}
};
Radio = __decorate([
wxComponent()
], Radio);
export default Radio;
user/miniprogram_npm/tdesign-miniprogram/radio/radio.json
+7
View File
@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-cell": "../cell/cell",
"t-icon": "../icon/icon"
}
}
user/miniprogram_npm/tdesign-miniprogram/radio/radio.wxml
+57
View File
@@ -0,0 +1,57 @@
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{ customStyle }}"
class="{{_.cls(classPrefix, [align, ['block', block]])}} {{prefix}}-class"
disabled="{{disabled}}"
aria-role="radio"
aria-checked="{{checked}}"
aria-label="{{label + content}}"
aria-disabled="{{disabled}}"
tabindex="{{tabindex}}"
bind:tap="handleTap"
>
<view
class="{{_.cls(classPrefix + '__icon', [align, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
>
<slot name="icon" wx:if="{{slotIcon}}" />
<view wx:elif="{{customIcon}}" class="{{classPrefix}}__image">
<image src="{{checked ? iconVal[0] : iconVal[1]}}" class="{{classPrefix}}-icon__image" webp />
</view>
<block wx:else>
<t-icon
wx:if="{{checked && (icon == 'circle' || icon == 'line')}}"
name="{{icon == 'circle' ? 'check-circle-filled' : 'check'}}"
class="{{classPrefix}}__icon-wrap"
/>
<view
wx:if="{{checked && icon == 'dot'}}"
class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', disabled]])}}"
/>
<view
wx:if="{{!checked && (icon == 'circle' || icon == 'dot')}}"
class="{{_.cls(classPrefix + '__icon-circle', [['disabled', disabled]])}}"
></view>
<!-- line && unchecked 为空 需要展位元素 -->
<view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
</block>
</view>
<view class="{{classPrefix}}__content" data-target="text" catch:tap="handleTap">
<view
class="{{classPrefix}}__title {{disabled ? classPrefix + '__title--disabled' : ''}} {{prefix}}-class-label"
style="-webkit-line-clamp:{{maxLabelRow}}"
>
{{label}}
<slot />
</view>
<view
class="{{classPrefix}}__description {{disabled ? classPrefix + '__description--disabled' : ''}} {{prefix}}-class-content "
style="-webkit-line-clamp:{{maxContentRow}}"
>{{content}}</view
>
</view>
<view wx:if="{{!borderless}}" class="{{_.cls(classPrefix + '__border', [align])}} {{prefix}}-class-border" />
</view>
user/miniprogram_npm/tdesign-miniprogram/radio/radio.wxss
+193
View File
@@ -0,0 +1,193 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.limit-title-row {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-radio {
display: inline-flex;
vertical-align: middle;
font-size: var(--td-radio-font-size, 32rpx);
background: var(--td-radio-bg-color, var(--td-bg-color-block, #fff));
position: relative;
}
.t-radio:focus {
outline: 0;
}
.t-radio--block {
display: flex;
padding: var(--td-radio-vertical-padding, 32rpx);
}
.t-radio--right {
flex-direction: row-reverse;
}
.t-radio__icon {
position: relative;
width: var(--td-radio-icon-size, 48rpx);
height: var(--td-radio-icon-size, 48rpx);
font-size: var(--td-radio-icon-size, 48rpx);
color: var(--td-radio-icon-color, var(--td-gray-color-4, #dcdcdc));
overflow: hidden;
}
.t-radio__icon:empty {
display: none;
}
.t-radio__icon--left {
margin-right: 16rpx;
}
.t-radio__icon--checked {
color: var(--td-radio-icon-checked-color, var(--td-primary-color, #0052d9));
}
.t-radio__icon--disabled {
cursor: not-allowed;
color: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-radio__icon-circle {
width: 84rpx;
height: 84rpx;
border: 3px solid var(--td-radio-icon-color, var(--td-gray-color-4, #dcdcdc));
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
}
.t-radio__icon-circle--disabled {
background: var(--td-radio-icon-disabled-bg-color, var(--td-gray-color-2, #eeeeee));
}
.t-radio__icon-line:before,
.t-radio__icon-line:after {
content: '';
display: block;
position: absolute;
width: 5rpx;
border-radius: 2rpx;
background: var(--td-radio-icon-checked-color, var(--td-primary-color, #0052d9));
transform-origin: top center;
}
.t-radio__icon-line:before {
height: 16rpx;
left: 8rpx;
top: 22rpx;
transform: rotate(-45deg);
}
.t-radio__icon-line::after {
height: 26rpx;
right: 8rpx;
top: 14rpx;
transform: rotate(45deg);
}
.t-radio__icon-line--disabled::before,
.t-radio__icon-line--disabled::after {
background: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-radio__icon-dot {
width: 84rpx;
height: 84rpx;
border: 3px solid var(--td-radio-icon-checked-color, var(--td-primary-color, #0052d9));
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.t-radio__icon-dot:after {
content: '';
display: block;
width: 48rpx;
height: 48rpx;
background: var(--td-radio-icon-checked-color, var(--td-primary-color, #0052d9));
border-radius: 50%;
}
.t-radio__icon-dot--disabled {
border-color: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-radio__icon-dot--disabled::after {
background: var(--td-radio-icon-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-radio__image {
line-height: var(--td-radio-icon-size, 48rpx);
}
.t-radio-icon__image {
height: var(--td-radio-icon-size, 48rpx);
width: var(--td-radio-icon-size, 48rpx);
vertical-align: sub;
}
.t-radio__content {
flex: 1;
}
.t-radio__content:empty {
display: none;
}
.t-radio__title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--td-radio-label-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
line-height: var(--td-radio-label-line-height, 48rpx);
}
.t-radio__title--disabled {
cursor: not-allowed;
color: var(--td-radio-label-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-radio__description {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--td-radio-content-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
font-size: 28rpx;
line-height: var(--td-radio-content-line-height, 44rpx);
}
.t-radio__description--disabled {
cursor: not-allowed;
color: var(--td-radio-content-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-radio__description:empty {
display: none;
}
.t-radio__title + .t-radio__description {
margin-top: 8rpx;
}
.t-radio__border {
position: absolute;
bottom: 0;
height: 1px;
background: var(--td-radio-border-color, var(--td-gray-color-3, #e7e7e7));
left: 96rpx;
right: 0;
transform: scaleY(0.5);
}
.t-radio__border--right {
left: 32rpx;
}
user/miniprogram_npm/tdesign-miniprogram/radio/type.d.ts
Vendored
+67
View File
@@ -0,0 +1,67 @@
export interface TdRadioProps<T = RadioValue> {
align?: {
type: StringConstructor;
value?: 'left' | 'right';
};
allowUncheck?: {
type: BooleanConstructor;
value?: boolean;
};
block?: {
type: BooleanConstructor;
value?: boolean;
};
checked?: {
type: BooleanConstructor;
value?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
};
content?: {
type: StringConstructor;
value?: string;
};
contentDisabled?: {
type: BooleanConstructor;
value?: boolean;
};
customStyle?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
};
icon?: {
type: null;
value?: 'circle' | 'line' | Array<string>;
};
label?: {
type: StringConstructor;
value?: string;
};
maxContentRow?: {
type: NumberConstructor;
value?: number;
};
maxLabelRow?: {
type: NumberConstructor;
value?: number;
};
name?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: T;
};
}
export declare type RadioValue = string | number | boolean;
user/miniprogram_npm/tdesign-miniprogram/radio/type.js
+1
View File
@@ -0,0 +1 @@
export {};