limqsh/quinn-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

注册流程

Browse Source
This commit is contained in:
limqhz
2022-12-16 17:32:49 +08:00
parent b746aaaa83
commit eb5c301d00
57 changed files with 1839 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/dialog/README.md
View File

@@ -12,7 +12,7 @@ isComponent: true
```json
"usingComponents": {
"t-dialog": "tdesign-miniprogram/dialog/dialog"
"t-dialog": "/components/dialog/dialog"
}
```
@@ -46,9 +46,9 @@ isComponent: true
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
actions | Array / Slot | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
actions | Array / Slot | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts) | N
button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts) | N
close-on-overlay-click | Boolean | true | 点击蒙层时是否触发关闭事件 | N
confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 | N
content | String / Slot | - | 内容 | N
@@ -65,7 +65,7 @@ z-index | Number | 11500 | 组件层级，样式默认为 11500 | N
名称 | 参数 | 描述
-- | -- | --
cancel | - | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' | 'overlay'`<br/>
close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' | 'overlay'`<br/>
overlay-click | - | 如果蒙层存在，点击蒙层时触发
confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发
action | `(index: number)` | 操作列表的点击时间，`index` 代表操作列表的顺序

40
components/result/README.md Normal file
View File

@@ -0,0 +1,40 @@
---
title: Result 结果
description: 反馈结果状态。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%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-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-25%25-red" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-result": "/components/result/result"
}
```
## 代码演示
### 结果状态
{{ theme }}
### 自定义结果
{{ custom }}
## API
### Result Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | ------------- | ------ | ------ | ---- |
| title | String / Slot | - | 标题 | N |
| description | String / Slot | - | 描述文字 | N |
| external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-image', 't-class-title', 't-class-description']` | N |
| icon | String | - | 图标名称 | N |
| image | String / Slot | - | 图片地址 | N |
| theme | String | default| 内置主题。可选项：default/success/warning/error | N |

3
components/result/index.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
export * from './type';
export * from './props';
export * from './result';

3
components/result/index.js Normal file
View File

@@ -0,0 +1,3 @@
export * from './type';
export * from './props';
export * from './result';

3
components/result/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdResultProps } from './type';
declare const props: TdResultProps;
export default props;

24
components/result/props.js Normal file
View File

@@ -0,0 +1,24 @@
const props = {
description: {
type: String,
},
externalClasses: {
type: Array,
},
icon: {
type: String,
value: '',
},
image: {
type: String,
},
title: {
type: String,
value: '',
},
theme: {
type: String,
value: 'default',
},
};
export default props;

18
components/result/result.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
import { SuperComponent } from '../common/src/index';
export default class extends SuperComponent {
options: {
multipleSlots: boolean;
};
externalClasses: string[];
properties: import("./type").TdResultProps;
data: {
prefix: string;
classPrefix: string;
};
lifetimes: {
ready(): void;
};
methods: {
setIcon(): void;
};
}

58
components/result/result.js Normal file
View File

@@ -0,0 +1,58 @@
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 { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import config from '../common/config';
const { prefix } = config;
const name = `${prefix}-result`;
let default_1 = class extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-image`,
`${prefix}-class-title`,
`${prefix}-class-description`,
];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
};
this.lifetimes = {
ready() {
this.setIcon();
},
};
this.methods = {
setIcon() {
const { icon, theme } = this.properties;
if (icon) {
this.setData({
iconName: icon !== 'null' ? `${icon}` : '',
});
}
else {
const themeResult = {
default: 'error-circle',
success: 'check-circle',
warning: 'error-circle',
error: 'close-circle',
};
this.setData({ iconName: themeResult[theme] });
}
},
};
}
};
default_1 = __decorate([
wxComponent()
], default_1);
export default default_1;

7
components/result/result.json Normal file
View File

@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"t-icon": "../icon/icon",
"t-image": "../image/image"
}
}

16
components/result/result.wxml Normal file
View File

@@ -0,0 +1,16 @@
<view class="{{classPrefix}} {{classPrefix}}--theme-{{theme}} {{prefix}}-class">
<view class="{{classPrefix}}__thumb">
<t-image wx:if="{{image}}" t-class="{{prefix}}-class-image" src="{{image}}" mode="aspectFit" />
<t-icon wx:elif="{{ iconName }}" size="160rpx" name="{{ iconName }}" />
<slot wx:else name="image" class="{{prefix}}-class-image" />
</view>
<view class="{{classPrefix}}__title {{prefix}}-class-title">
<view wx:if="{{title}}"> {{title}} </view>
<slot wx:else name="title" />
</view>
<view class="{{classPrefix}}__description {{prefix}}-class-description">
<view wx:if="{{description}}"> {{description}} </view>
<slot wx:else name="description" />
</view>
</view>

65
components/result/result.wxss Normal file
View File

@@ -0,0 +1,65 @@
.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);
}
.t-result {
display: flex;
flex-direction: column;
align-items: center;
}
.t-result__title {
line-height: 56rpx;
font-size: 40rpx;
font-weight: 700;
color: rgba(0, 0, 0, 0.9);
}
.t-result__icon {
font-size: 80px;
}
.t-result__thumb + .t-result__title:not(:empty) {
margin-top: 16rpx;
}
.t-result__description {
text-align: center;
color: rgba(0, 0, 0, 0.6);
font-size: 28rpx;
line-height: 44rpx;
}
.t-result__title + .t-result__description:not(:empty) {
margin-top: 24rpx;
}
.t-result--theme-default {
color: #0052d9;
}
.t-result--theme-success {
color: #00a870;
}
.t-result--theme-warning {
color: #ed7b2f;
}
.t-result--theme-error {
color: #e34d59;
}

30
components/result/type.d.ts vendored Normal file
View File

@@ -0,0 +1,30 @@
export interface TdResultProps {
description?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-description', 't-class-image'];
required?: boolean;
};
icon?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
image?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
title?: {
type: StringConstructor;
value?: string;
};
theme?: {
type: StringConstructor;
value?: 'default' | 'success' | 'warning' | 'error';
};
}

1
components/result/type.js Normal file
View File

@@ -0,0 +1 @@
export {};

8
components/steps/README.md
View File

@@ -12,8 +12,8 @@ isComponent: true
```json
"usingComponents": {
"t-steps": "tdesign-miniprogram/steps/steps",
"t-step-item": "tdesign-miniprogram/steps/step-item",
"t-steps": "/components/steps/steps",
"t-step-item": "/components/steps/step-item",
}
```
@@ -74,6 +74,6 @@ change | `({current: string | number, previous: string | number})` | 当前步
content | String / Slot | '' | 步骤描述 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-inner', 't-class-content', 't-class-title', 't-class-description', 't-class-extra', 't-class-sub', 't-class-sub-dot', 't-class-sub-content']` | N
icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
sub-step-items | Array | [] | 子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/steps/type.ts) | N
sub-step-items | Array | [] | 子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/steps/type.ts) | N
title | String / Slot | '' | 标题 | N

93
components/tag/README.md Normal file
View File

@@ -0,0 +1,93 @@
---
title: Tag 标签
description: 用于表明主体的类目，属性或状态。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%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-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-tag": "/components/tag/tag",
"t-check-tag": "/components/tag/check-tag"
}
```
## 代码演示
### 类型
#### 展示型标签
{{ theme }}
#### 带图标标签
{{ iconDemo }}
#### 圆角标签
{{ shape }}
#### 可关闭标签
{{ closable }}
#### 超长省略文本标签
{{ ellipsis }}
## 状态
#### 标签状态
{{ checkable }}
#### 标签规格
{{ size }}
## API
### Tag Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | --------------- | ------- | -------------------------------------------------------------------------------------------- | ------- |
| closable | Boolean | false | 标签是否可关闭 | N |
| disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N |
| external-classes | Array | - | 组件类名，用于设置 组件外层元素元素类名。`['t-class']` | N |
| icon | String | - | 标签中的图标，可自定义图标呈现 | N |
| max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80。TS 类型：`CSSProperties['maxWidth'] | number` | N |
| shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N |
| size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N |
| theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N |
| variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N |
### Tag Events
| 名称 | 参数 | 描述 |
| ----- | ---- | ------------------------------------ |
| click | - | 点击时触发 |
| close | - | 如果关闭按钮存在，点击关闭按钮时触发 |
### CheckTag Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| -------- | ---------------------- | --------- | --------------------------------------------------------------------- | ---- |
| checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N |
| closable | String / Boolean | false | 是否可以关闭 | N |
| content | String / Number / Slot | - | 组件子元素 | N |
| disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N |
| icon | String / Slot | - | 标签图标 | N |
| shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N |
| size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N |
### CheckTag Events
| 名称 | 参数 | 描述 |
| ------ | -------------------- | -------------- |
| change | `(checked: boolean)` | 组件子元素 |
| close | - | 如果关闭按钮存在，点击关闭按钮时触发 |

3
components/tag/check-tag-props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdCheckTagProps } from './type';
declare const props: TdCheckTagProps;
export default props;

34
components/tag/check-tag-props.js Normal file
View File

@@ -0,0 +1,34 @@
const props = {
checked: {
type: Boolean,
value: undefined,
},
defaultChecked: {
type: null,
value: undefined,
},
closable: {
type: Boolean,
value: false,
},
content: {
type: String,
optionalTypes: [Number],
},
disabled: {
type: Boolean,
value: false,
},
icon: {
type: String,
},
shape: {
type: String,
value: 'square',
},
size: {
type: String,
value: 'medium',
},
};
export default props;

27
components/tag/check-tag.d.ts vendored Normal file
View File

@@ -0,0 +1,27 @@
import { SuperComponent } from '../common/src/index';
export default class CheckTag extends SuperComponent {
data: {
prefix: string;
classPrefix: string;
className: string;
};
properties: import("./type").TdCheckTagProps;
controlledProps: {
key: string;
event: string;
}[];
options: {
multipleSlots: boolean;
};
lifetimes: {
attached(): void;
};
observers: {
'size, shape, closable, disabled, checked'(): void;
};
methods: {
setClass(): void;
handleClose(e: WechatMiniprogram.BaseEvent): void;
handleChange(): void;
};
}

81
components/tag/check-tag.js Normal file
View File

@@ -0,0 +1,81 @@
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 { wxComponent, SuperComponent } from '../common/src/index';
import config from '../common/config';
import props from './check-tag-props';
import { classNames } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-tag`;
let CheckTag = class CheckTag extends SuperComponent {
constructor() {
super(...arguments);
this.data = {
prefix,
classPrefix: name,
className: '',
};
this.properties = props;
this.controlledProps = [
{
key: 'checked',
event: 'change',
},
];
this.options = {
multipleSlots: true,
};
this.lifetimes = {
attached() {
this.setClass();
},
};
this.observers = {
'size, shape, closable, disabled, checked'() {
this.setClass();
},
};
this.methods = {
setClass() {
const { prefix, classPrefix } = this.data;
const { size, shape, closable, disabled, checked, defaultChecked } = this.properties;
const isChecked = checked || defaultChecked;
const tagClass = [
classPrefix,
`${classPrefix}--checkable`,
closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
isChecked ? `${classPrefix}--checked ${prefix}-is-checked` : '',
`${classPrefix}--size-${size || 'medium'}`,
`${classPrefix}--shape-${shape || 'square'}`,
];
const className = classNames(tagClass);
this.setData({
className,
});
},
handleClose(e) {
if (this.data.disabled)
return;
this.triggerEvent('close', e);
},
handleChange() {
if (this.data.disabled)
return;
const { checked, defaultChecked } = this.properties;
const isChecked = checked || defaultChecked;
this.setData({
checked: !isChecked,
});
this._trigger('change', { checked: !isChecked });
},
};
}
};
CheckTag = __decorate([
wxComponent()
], CheckTag);
export default CheckTag;

6
components/tag/check-tag.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-icon": ".././icon/icon"
}
}

16
components/tag/check-tag.wxml Normal file
View File

@@ -0,0 +1,16 @@
<view class="{{className}}" bind:tap="handleChange">
<view class="{{classPrefix}}__icon">
<t-icon wx:if="{{icon}}" name="{{icon}}" t-class="{{prefix}}-icon" />
<slot wx:else name="icon" />
</view>
<view class="{{classPrefix}}__text">
<slot />
</view>
<t-icon
wx:if="{{ closable }}"
class="{{classPrefix}}__icon-close"
t-class="{{prefix}}-icon"
bind:tap="handleClose"
name="close"
/>
</view>

233
components/tag/check-tag.wxss Normal file
View File

@@ -0,0 +1,233 @@
.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);
}
.t-tag {
display: inline-flex;
align-items: center;
border: 2rpx solid transparent;
box-sizing: border-box;
border-radius: 8rpx;
font-size: 24rpx;
user-select: none;
vertical-align: middle;
}
.t-tag__text {
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-tag__icon,
.t-tag__icon-close {
display: flex;
align-items: center;
}
.t-tag__icon:not(:empty) + .t-tag__text:not(:empty),
.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) {
margin-left: 8rpx;
}
.t-tag.t-tag--size-small {
height: 44rpx;
line-height: 44rpx;
padding: 0 11rpx;
font-size: 20rpx;
}
.t-tag.t-tag--size-small .t-icon,
.t-tag.t-tag--size-small .t-icon-close {
font-size: 24rpx;
}
.t-tag.t-tag--size-medium {
height: 48rpx;
line-height: 48rpx;
padding: 0 15rpx;
font-size: 24rpx;
}
.t-tag.t-tag--size-medium .t-icon,
.t-tag.t-tag--size-medium .t-icon-close {
font-size: 28rpx;
}
.t-tag.t-tag--size-large {
height: 60rpx;
line-height: 60rpx;
padding: 0 23rpx;
font-size: 28rpx;
}
.t-tag.t-tag--size-large .t-icon,
.t-tag.t-tag--size-large .t-icon-close {
font-size: 36rpx;
}
.t-tag.t-tag--shape-square {
border-radius: 8rpx;
}
.t-tag.t-tag--shape-round {
border-radius: 999px;
}
.t-tag.t-tag--shape-mark {
border-radius: 0 999px 999px 0;
}
.t-tag--variant-dark.t-tag--theme-primary {
background-color: #0052d9;
border-color: #0052d9;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-success {
background-color: #00a870;
border-color: #00a870;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-warning {
background-color: #ed7b2f;
border-color: #ed7b2f;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-default {
background-color: #e7e7e7;
border-color: #e7e7e7;
color: rgba(0, 0, 0, 0.9);
}
.t-tag--variant-dark.t-tag--theme-danger {
background-color: #e34d59;
border-color: #e34d59;
color: #ffffff;
}
.t-tag--variant-light.t-tag--theme-primary {
background-color: #e6eefb;
border-color: #e6eefb;
color: #0052d9;
}
.t-tag--variant-light.t-tag--theme-success {
background-color: #e6f6f1;
border-color: #e6f6f1;
color: #00a870;
}
.t-tag--variant-light.t-tag--theme-warning {
background-color: #fdf2ea;
border-color: #fdf2ea;
color: #ed7b2f;
}
.t-tag--variant-light.t-tag--theme-default {
background-color: rgba(28, 28, 28, 0.91);
border-color: rgba(28, 28, 28, 0.91);
color: #e7e7e7;
}
.t-tag--variant-light.t-tag--theme-danger {
background-color: #fcedee;
border-color: #fcedee;
color: #e34d59;
}
.t-tag--variant-light.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #f3f3f3;
background-color: #f3f3f3;
}
.t-tag--variant-outline.t-tag--theme-primary {
background-color: #ffffff;
border-color: #0052d9;
color: #0052d9;
}
.t-tag--variant-outline.t-tag--theme-success {
background-color: #ffffff;
border-color: #00a870;
color: #00a870;
}
.t-tag--variant-outline.t-tag--theme-warning {
background-color: #ffffff;
border-color: #ed7b2f;
color: #ed7b2f;
}
.t-tag--variant-outline.t-tag--theme-default {
background-color: rgba(0, 0, 0, 0.9);
border-color: #e7e7e7;
color: #e7e7e7;
}
.t-tag--variant-outline.t-tag--theme-danger {
background-color: #ffffff;
border-color: #e34d59;
color: #e34d59;
}
.t-tag--variant-outline.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #dcdcdc;
background-color: #fff;
}
.t-tag--variant-light-outline.t-tag--theme-primary {
background-color: #e6eefb;
border-color: #0052d9;
color: #0052d9;
}
.t-tag--variant-light-outline.t-tag--theme-success {
background-color: #e6f6f1;
border-color: #00a870;
color: #00a870;
}
.t-tag--variant-light-outline.t-tag--theme-warning {
background-color: #fdf2ea;
border-color: #ed7b2f;
color: #ed7b2f;
}
.t-tag--variant-light-outline.t-tag--theme-default {
background-color: rgba(28, 28, 28, 0.91);
border-color: #e7e7e7;
color: #e7e7e7;
}
.t-tag--variant-light-outline.t-tag--theme-danger {
background-color: #fcedee;
border-color: #e34d59;
color: #e34d59;
}
.t-tag--variant-light-outline.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #dcdcdc;
background-color: #f3f3f3;
}
.t-tag.t-tag--checkable {
cursor: pointer;
color: rgba(0, 0, 0, 0.9);
background-color: #e7e7e7;
border-color: #e7e7e7;
}
.t-tag.t-tag--checkable.t-tag--checked {
color: #fff;
background-color: #0052d9;
border-color: #0052d9;
}
.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled {
color: #fff;
background-color: #bbd3fb;
}
.t-tag.t-tag--checkable.t-tag--disabled {
cursor: not-allowed;
color: rgba(0, 0, 0, 0.26);
background-color: #e7e7e7;
border-color: #e7e7e7;
}
.t-tag.t-tag--closable.t-tag--disabled {
cursor: not-allowed;
color: rgba(0, 0, 0, 0.26);
background-color: #e7e7e7;
border-color: #e7e7e7;
}

233
components/tag/common/base.wxss Normal file
View File

@@ -0,0 +1,233 @@
.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);
}
.t-tag {
display: inline-flex;
align-items: center;
border: 2rpx solid transparent;
box-sizing: border-box;
border-radius: 8rpx;
font-size: 24rpx;
user-select: none;
vertical-align: middle;
}
.t-tag__text {
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-tag__icon,
.t-tag__icon-close {
display: flex;
align-items: center;
}
.t-tag__icon:not(:empty) + .t-tag__text:not(:empty),
.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) {
margin-left: 8rpx;
}
.t-tag.t-tag--size-small {
height: 44rpx;
line-height: 44rpx;
padding: 0 11rpx;
font-size: 20rpx;
}
.t-tag.t-tag--size-small .t-icon,
.t-tag.t-tag--size-small .t-icon-close {
font-size: 24rpx;
}
.t-tag.t-tag--size-medium {
height: 48rpx;
line-height: 48rpx;
padding: 0 15rpx;
font-size: 24rpx;
}
.t-tag.t-tag--size-medium .t-icon,
.t-tag.t-tag--size-medium .t-icon-close {
font-size: 28rpx;
}
.t-tag.t-tag--size-large {
height: 60rpx;
line-height: 60rpx;
padding: 0 23rpx;
font-size: 28rpx;
}
.t-tag.t-tag--size-large .t-icon,
.t-tag.t-tag--size-large .t-icon-close {
font-size: 36rpx;
}
.t-tag.t-tag--shape-square {
border-radius: 8rpx;
}
.t-tag.t-tag--shape-round {
border-radius: 999px;
}
.t-tag.t-tag--shape-mark {
border-radius: 0 999px 999px 0;
}
.t-tag--variant-dark.t-tag--theme-primary {
background-color: #0052d9;
border-color: #0052d9;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-success {
background-color: #00a870;
border-color: #00a870;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-warning {
background-color: #ed7b2f;
border-color: #ed7b2f;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-default {
background-color: #e7e7e7;
border-color: #e7e7e7;
color: rgba(0, 0, 0, 0.9);
}
.t-tag--variant-dark.t-tag--theme-danger {
background-color: #e34d59;
border-color: #e34d59;
color: #ffffff;
}
.t-tag--variant-light.t-tag--theme-primary {
background-color: #e6eefb;
border-color: #e6eefb;
color: #0052d9;
}
.t-tag--variant-light.t-tag--theme-success {
background-color: #e6f6f1;
border-color: #e6f6f1;
color: #00a870;
}
.t-tag--variant-light.t-tag--theme-warning {
background-color: #fdf2ea;
border-color: #fdf2ea;
color: #ed7b2f;
}
.t-tag--variant-light.t-tag--theme-default {
background-color: rgba(28, 28, 28, 0.91);
border-color: rgba(28, 28, 28, 0.91);
color: #e7e7e7;
}
.t-tag--variant-light.t-tag--theme-danger {
background-color: #fcedee;
border-color: #fcedee;
color: #e34d59;
}
.t-tag--variant-light.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #f3f3f3;
background-color: #f3f3f3;
}
.t-tag--variant-outline.t-tag--theme-primary {
background-color: #ffffff;
border-color: #0052d9;
color: #0052d9;
}
.t-tag--variant-outline.t-tag--theme-success {
background-color: #ffffff;
border-color: #00a870;
color: #00a870;
}
.t-tag--variant-outline.t-tag--theme-warning {
background-color: #ffffff;
border-color: #ed7b2f;
color: #ed7b2f;
}
.t-tag--variant-outline.t-tag--theme-default {
background-color: rgba(0, 0, 0, 0.9);
border-color: #e7e7e7;
color: #e7e7e7;
}
.t-tag--variant-outline.t-tag--theme-danger {
background-color: #ffffff;
border-color: #e34d59;
color: #e34d59;
}
.t-tag--variant-outline.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #dcdcdc;
background-color: #fff;
}
.t-tag--variant-light-outline.t-tag--theme-primary {
background-color: #e6eefb;
border-color: #0052d9;
color: #0052d9;
}
.t-tag--variant-light-outline.t-tag--theme-success {
background-color: #e6f6f1;
border-color: #00a870;
color: #00a870;
}
.t-tag--variant-light-outline.t-tag--theme-warning {
background-color: #fdf2ea;
border-color: #ed7b2f;
color: #ed7b2f;
}
.t-tag--variant-light-outline.t-tag--theme-default {
background-color: rgba(28, 28, 28, 0.91);
border-color: #e7e7e7;
color: #e7e7e7;
}
.t-tag--variant-light-outline.t-tag--theme-danger {
background-color: #fcedee;
border-color: #e34d59;
color: #e34d59;
}
.t-tag--variant-light-outline.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #dcdcdc;
background-color: #f3f3f3;
}
.t-tag.t-tag--checkable {
cursor: pointer;
color: rgba(0, 0, 0, 0.9);
background-color: #e7e7e7;
border-color: #e7e7e7;
}
.t-tag.t-tag--checkable.t-tag--checked {
color: #fff;
background-color: #0052d9;
border-color: #0052d9;
}
.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled {
color: #fff;
background-color: #bbd3fb;
}
.t-tag.t-tag--checkable.t-tag--disabled {
cursor: not-allowed;
color: rgba(0, 0, 0, 0.26);
background-color: #e7e7e7;
border-color: #e7e7e7;
}
.t-tag.t-tag--closable.t-tag--disabled {
cursor: not-allowed;
color: rgba(0, 0, 0, 0.26);
background-color: #e7e7e7;
border-color: #e7e7e7;
}

3
components/tag/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdTagProps } from './type';
declare const props: TdTagProps;
export default props;

38
components/tag/props.js Normal file
View File

@@ -0,0 +1,38 @@
const props = {
closable: {
type: Boolean,
value: false,
},
disabled: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
icon: {
type: String,
value: '',
},
maxWidth: {
type: String,
optionalTypes: [Number],
},
shape: {
type: String,
value: 'square',
},
size: {
type: String,
value: 'medium',
},
theme: {
type: String,
value: 'default',
},
variant: {
type: String,
value: 'dark',
},
};
export default props;

27
components/tag/tag.d.ts vendored Normal file
View File

@@ -0,0 +1,27 @@
import { SuperComponent } from '../common/src/index';
export default class Tag extends SuperComponent {
data: {
prefix: string;
classPrefix: string;
className: string;
tagStyle: string;
};
properties: import("./type").TdTagProps;
externalClasses: string[];
options: {
multipleSlots: boolean;
};
lifetimes: {
attached(): void;
};
observers: {
'size, shape, theme, variant, closable, disabled'(): void;
maxWidth(): void;
};
methods: {
setClass(): void;
setTagStyle(): string;
handleClick(e: WechatMiniprogram.BaseEvent): void;
handleClose(e: WechatMiniprogram.BaseEvent): void;
};
}

83
components/tag/tag.js Normal file
View File

@@ -0,0 +1,83 @@
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 { wxComponent, SuperComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { classNames, isNumber } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-tag`;
let Tag = class Tag extends SuperComponent {
constructor() {
super(...arguments);
this.data = {
prefix,
classPrefix: name,
className: '',
tagStyle: '',
};
this.properties = props;
this.externalClasses = [`${prefix}-class`];
this.options = {
multipleSlots: true,
};
this.lifetimes = {
attached() {
this.setClass();
this.setTagStyle();
},
};
this.observers = {
'size, shape, theme, variant, closable, disabled'() {
this.setClass();
},
maxWidth() {
this.setTagStyle();
},
};
this.methods = {
setClass() {
const { prefix, classPrefix } = this.data;
const { size, shape, theme, variant, closable, disabled } = this.properties;
const tagClass = [
classPrefix,
`${classPrefix}--theme-${theme || 'default'}`,
`${classPrefix}--variant-${variant || 'dark'}`,
closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
`${classPrefix}--size-${size || 'medium'}`,
`${classPrefix}--shape-${shape || 'square'}`,
];
const className = classNames(tagClass);
this.setData({
className,
});
},
setTagStyle() {
const { maxWidth } = this.properties;
if (!maxWidth) {
return '';
}
const width = isNumber(maxWidth) ? `${maxWidth}px` : maxWidth;
this.setData({ tagStyle: `max-width:${width};` });
},
handleClick(e) {
if (this.data.disabled)
return;
this.triggerEvent('click', e);
},
handleClose(e) {
if (this.data.disabled)
return;
this.triggerEvent('close', e);
},
};
}
};
Tag = __decorate([
wxComponent()
], Tag);
export default Tag;

6
components/tag/tag.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"t-icon": ".././icon/icon"
}
}

16
components/tag/tag.wxml Normal file
View File

@@ -0,0 +1,16 @@
<view class="{{className}} {{prefix}}-class" style="{{tagStyle}}" bind:tap="handleClick">
<view class="{{classPrefix}}__icon">
<t-icon wx:if="{{icon}}" name="{{icon}}" t-class="{{prefix}}-icon" />
<slot wx:else name="icon" />
</view>
<view class="{{classPrefix}}__text">
<slot />
</view>
<t-icon
wx:if="{{ closable }}"
class="{{classPrefix}}__icon-close"
t-class="{{prefix}}-icon"
bind:tap="handleClose"
name="close"
/>
</view>

233
components/tag/tag.wxss Normal file
View File

@@ -0,0 +1,233 @@
.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);
}
.t-tag {
display: inline-flex;
align-items: center;
border: 2rpx solid transparent;
box-sizing: border-box;
border-radius: 8rpx;
font-size: 24rpx;
user-select: none;
vertical-align: middle;
}
.t-tag__text {
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-tag__icon,
.t-tag__icon-close {
display: flex;
align-items: center;
}
.t-tag__icon:not(:empty) + .t-tag__text:not(:empty),
.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) {
margin-left: 8rpx;
}
.t-tag.t-tag--size-small {
height: 44rpx;
line-height: 44rpx;
padding: 0 11rpx;
font-size: 20rpx;
}
.t-tag.t-tag--size-small .t-icon,
.t-tag.t-tag--size-small .t-icon-close {
font-size: 24rpx;
}
.t-tag.t-tag--size-medium {
height: 48rpx;
line-height: 48rpx;
padding: 0 15rpx;
font-size: 24rpx;
}
.t-tag.t-tag--size-medium .t-icon,
.t-tag.t-tag--size-medium .t-icon-close {
font-size: 28rpx;
}
.t-tag.t-tag--size-large {
height: 60rpx;
line-height: 60rpx;
padding: 0 23rpx;
font-size: 28rpx;
}
.t-tag.t-tag--size-large .t-icon,
.t-tag.t-tag--size-large .t-icon-close {
font-size: 36rpx;
}
.t-tag.t-tag--shape-square {
border-radius: 8rpx;
}
.t-tag.t-tag--shape-round {
border-radius: 999px;
}
.t-tag.t-tag--shape-mark {
border-radius: 0 999px 999px 0;
}
.t-tag--variant-dark.t-tag--theme-primary {
background-color: #0052d9;
border-color: #0052d9;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-success {
background-color: #00a870;
border-color: #00a870;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-warning {
background-color: #ed7b2f;
border-color: #ed7b2f;
color: #ffffff;
}
.t-tag--variant-dark.t-tag--theme-default {
background-color: #e7e7e7;
border-color: #e7e7e7;
color: rgba(0, 0, 0, 0.9);
}
.t-tag--variant-dark.t-tag--theme-danger {
background-color: #e34d59;
border-color: #e34d59;
color: #ffffff;
}
.t-tag--variant-light.t-tag--theme-primary {
background-color: #e6eefb;
border-color: #e6eefb;
color: #0052d9;
}
.t-tag--variant-light.t-tag--theme-success {
background-color: #e6f6f1;
border-color: #e6f6f1;
color: #00a870;
}
.t-tag--variant-light.t-tag--theme-warning {
background-color: #fdf2ea;
border-color: #fdf2ea;
color: #ed7b2f;
}
.t-tag--variant-light.t-tag--theme-default {
background-color: rgba(28, 28, 28, 0.91);
border-color: rgba(28, 28, 28, 0.91);
color: #e7e7e7;
}
.t-tag--variant-light.t-tag--theme-danger {
background-color: #fcedee;
border-color: #fcedee;
color: #e34d59;
}
.t-tag--variant-light.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #f3f3f3;
background-color: #f3f3f3;
}
.t-tag--variant-outline.t-tag--theme-primary {
background-color: #ffffff;
border-color: #0052d9;
color: #0052d9;
}
.t-tag--variant-outline.t-tag--theme-success {
background-color: #ffffff;
border-color: #00a870;
color: #00a870;
}
.t-tag--variant-outline.t-tag--theme-warning {
background-color: #ffffff;
border-color: #ed7b2f;
color: #ed7b2f;
}
.t-tag--variant-outline.t-tag--theme-default {
background-color: rgba(0, 0, 0, 0.9);
border-color: #e7e7e7;
color: #e7e7e7;
}
.t-tag--variant-outline.t-tag--theme-danger {
background-color: #ffffff;
border-color: #e34d59;
color: #e34d59;
}
.t-tag--variant-outline.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #dcdcdc;
background-color: #fff;
}
.t-tag--variant-light-outline.t-tag--theme-primary {
background-color: #e6eefb;
border-color: #0052d9;
color: #0052d9;
}
.t-tag--variant-light-outline.t-tag--theme-success {
background-color: #e6f6f1;
border-color: #00a870;
color: #00a870;
}
.t-tag--variant-light-outline.t-tag--theme-warning {
background-color: #fdf2ea;
border-color: #ed7b2f;
color: #ed7b2f;
}
.t-tag--variant-light-outline.t-tag--theme-default {
background-color: rgba(28, 28, 28, 0.91);
border-color: #e7e7e7;
color: #e7e7e7;
}
.t-tag--variant-light-outline.t-tag--theme-danger {
background-color: #fcedee;
border-color: #e34d59;
color: #e34d59;
}
.t-tag--variant-light-outline.t-tag--theme-default {
color: rgba(0, 0, 0, 0.9);
border-color: #dcdcdc;
background-color: #f3f3f3;
}
.t-tag.t-tag--checkable {
cursor: pointer;
color: rgba(0, 0, 0, 0.9);
background-color: #e7e7e7;
border-color: #e7e7e7;
}
.t-tag.t-tag--checkable.t-tag--checked {
color: #fff;
background-color: #0052d9;
border-color: #0052d9;
}
.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled {
color: #fff;
background-color: #bbd3fb;
}
.t-tag.t-tag--checkable.t-tag--disabled {
cursor: not-allowed;
color: rgba(0, 0, 0, 0.26);
background-color: #e7e7e7;
border-color: #e7e7e7;
}
.t-tag.t-tag--closable.t-tag--disabled {
cursor: not-allowed;
color: rgba(0, 0, 0, 0.26);
background-color: #e7e7e7;
border-color: #e7e7e7;
}

92
components/tag/type.d.ts vendored Normal file
View File

@@ -0,0 +1,92 @@
import { SizeEnum } from '../common/common';
export interface TdTagProps {
closable?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class'];
required?: boolean;
};
icon?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
maxWidth?: {
type: StringConstructor;
optionalTypes: Array<NumberConstructor>;
value?: string | number;
required?: boolean;
};
shape?: {
type: StringConstructor;
value?: 'square' | 'round' | 'mark';
required?: boolean;
};
size?: {
type: StringConstructor;
value?: SizeEnum;
required?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'default' | 'primary' | 'warning' | 'danger' | 'success';
required?: boolean;
};
variant?: {
type: StringConstructor;
value?: 'dark' | 'light' | 'outline' | 'light-outline';
required?: boolean;
};
}
export interface TdCheckTagProps {
checked?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
defaultChecked?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
closable?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
content?: {
type: StringConstructor;
optionalTypes: Array<NumberConstructor>;
value?: string | number;
required?: boolean;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
icon?: {
type: StringConstructor;
value?: string;
required?: boolean;
};
shape?: {
type: StringConstructor;
value?: 'square' | 'round' | 'mark';
required?: boolean;
};
size?: {
type: StringConstructor;
value?: SizeEnum;
required?: boolean;
};
}

1
components/tag/type.js Normal file
View File

@@ -0,0 +1 @@
export {};