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

白色主题

Browse Source
This commit is contained in:
limqhz
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
miniprogram_npm/tdesign-miniprogram/steps/README.en-US.md
View File

@@ -5,14 +5,14 @@
name | type | default | description | required
-- | -- | -- | -- | --
current | String / Number | 0 | \- | N
current | String / Number | - | \- | N
default-current | String / Number | undefined | uncontrolled property | N
current-status | String | process | options：default/process/finish/error | N
custom-style `v0.25.0` | String | - | \- | N
external-classes | Array | - | `['t-class']` | N
layout | String | horizontal | options：horizontal/vertical | N
readonly | Boolean | false | \- | N
separator | String | line | options：line/dashed/arrow | N
style | String | - | \- | N
theme | String | default | options：default/dot | N
### Steps Events
@@ -26,9 +26,9 @@ change | `({current: string \| number, previous: string \| number})` | \-
name | type | default | description | required
-- | -- | -- | -- | --
content | String / Slot | '' | \- | N
custom-style | String | - | \- | N
external-classes | Array | - | `['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
icon | String / Slot | - | \- | N
status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
sub-step-items | Array | [] | Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
style | String | - | \- | N
sub-step-items | Array | [] | Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
title | String / Slot | '' | \- | N

14
miniprogram_npm/tdesign-miniprogram/steps/README.md
View File

@@ -13,7 +13,7 @@ isComponent: true
```json
"usingComponents": {
"t-steps": "tdesign-miniprogram/steps/steps",
"t-step-item": "tdesign-miniprogram/steps/step-item",
"t-step-item": "tdesign-miniprogram/step-item/step-item",
}
```
@@ -59,14 +59,14 @@ isComponent: true
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
current | String / Number | 0 | 当前步骤，即整个步骤条进度，格式为`1`、`1-0`或`1-1`。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。若当前步骤条存在子步骤条，则会根据子步骤条重新判断当前步骤状态（子步骤条中存在error，则当前步骤error，子步骤条中存在process，当前步骤process，若最后一个子步骤条finish，当前步骤finish，优先级为`finish>error>process`）。注意：如果每个步骤条单独设置了status，则步骤条为设定的status，若传入`status:''`,将默认为未开始状态,传入的status优先级最高。 | N
current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成 | N
default-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
custom-style | String | - | `v0.25.0`。自定义组件样式 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class']` | N
layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
readonly | Boolean | false | 只读状态 | N
separator | String | line | 【讨论中】步骤条分割符。可选项：line/dashed/arrow | N
separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
style | String | - | 自定义组件样式 | N
theme | String | default | 步骤条风格。可选项：default/dot | N
### Steps Events
@@ -80,9 +80,9 @@ change | `({current: string \| number, previous: string \| number})` | 当前步
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
content | String / Slot | '' | 步骤描述 | N
custom-style | String | - | 自定义组件样式 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | 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 | [] | `0.31.0`移除。子步骤条，仅支持 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/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
style | String | - | 自定义组件样式 | N
sub-step-items | Array | [] | 子步骤条，仅支持 layout = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
title | String / Slot | '' | 标题 | N

9
miniprogram_npm/tdesign-miniprogram/steps/props.js
View File

@@ -5,16 +5,11 @@ const props = {
},
defaultCurrent: {
type: null,
value: 0,
},
currentStatus: {
type: String,
value: 'process',
},
customStyle: {
type: String,
value: '',
},
externalClasses: {
type: Array,
},
@@ -30,6 +25,10 @@ const props = {
type: String,
value: 'line',
},
style: {
type: String,
value: '',
},
theme: {
type: String,
value: 'default',

3
miniprogram_npm/tdesign-miniprogram/steps/step-item-props.d.ts vendored
View File

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

29
miniprogram_npm/tdesign-miniprogram/steps/step-item-props.js
View File

@@ -1,29 +0,0 @@
const props = {
content: {
type: String,
value: '',
},
customStyle: {
type: String,
value: '',
},
externalClasses: {
type: Array,
},
icon: {
type: String,
},
status: {
type: String,
value: 'default',
},
subStepItems: {
type: Array,
value: [],
},
title: {
type: String,
value: '',
},
};
export default props;

22
miniprogram_npm/tdesign-miniprogram/steps/step-item.d.ts vendored
View File

@@ -1,22 +0,0 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class StepItem extends SuperComponent {
options: {
multipleSlots: boolean;
};
relations: RelationsOptions;
externalClasses: string[];
properties: import("./type").TdStepItemProps;
data: {
classPrefix: string;
prefix: string;
index: number;
isDot: boolean;
curStatus: string;
layout: string;
isLastChild: boolean;
};
methods: {
updateStatus(current: any, currentStatus: any, index: any, theme: any, layout: any, steps: any): void;
onTap(): void;
};
}

69
miniprogram_npm/tdesign-miniprogram/steps/step-item.js
View File

@@ -1,69 +0,0 @@
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 './step-item-props';
const { prefix } = config;
const name = `${prefix}-steps-item`;
let StepItem = class StepItem extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.relations = {
'./steps': {
type: 'ancestor',
},
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-title`,
`${prefix}-class-description`,
`${prefix}-class-extra`,
];
this.properties = props;
this.data = {
classPrefix: name,
prefix,
index: 0,
isDot: false,
curStatus: '',
layout: 'vertical',
isLastChild: false,
};
this.methods = {
updateStatus(current, currentStatus, index, theme, layout, steps) {
let curStatus = this.data.status;
if (curStatus === 'default') {
if (index < Number(current)) {
curStatus = 'finish';
}
else if (index === Number(current)) {
curStatus = currentStatus;
}
}
this.setData({
curStatus,
index,
isDot: theme === 'dot',
layout,
theme,
isLastChild: steps.length - 1 === index,
});
},
onTap() {
this.$parent.handleClick(this.data.index);
},
};
}
};
StepItem = __decorate([
wxComponent()
], StepItem);
export default StepItem;

6
miniprogram_npm/tdesign-miniprogram/steps/step-item.json
View File

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

39
miniprogram_npm/tdesign-miniprogram/steps/step-item.wxml
View File

@@ -1,39 +0,0 @@
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{customStyle}}"
class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} {{prefix}}-class"
bind:tap="onTap"
>
<!-- icon -->
<view class="{{_.cls(classPrefix + '__anchor', [layout])}}">
<view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
<view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
<slot name="icon" />
<t-icon name="{{icon}}" size="22" />
</view>
<view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
<t-icon wx:if="{{curStatus == 'finish'}}" name="check" />
<t-icon wx:elif="{{curStatus == 'error'}}" name="close" />
<block wx:else>{{index + 1}}</block>
</view>
</view>
<!-- content -->
<view class="{{_.cls(classPrefix + '__content', [layout, ['last', isLastChild]])}} {{prefix}}-class-content">
<view class="{{_.cls(classPrefix + '__title', [curStatus, layout])}} {{prefix}}-class-title">
{{ title }}
<slot name="title" />
<slot wx:if="{{layout === 'vertical'}}" name="title-right" />
</view>
<view class="{{_.cls(classPrefix + '__description', [layout])}} {{prefix}}-class-description">
{{ content }}
<slot name="content" />
</view>
<view class="{{_.cls(classPrefix + '__extra', [layout])}} {{prefix}}-class-extra">
<slot name="extra" />
</view>
</view>
<view wx:if="{{!isLastChild}}" class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme])}}" />
</view>

211
miniprogram_npm/tdesign-miniprogram/steps/step-item.wxss
View File

@@ -1,211 +0,0 @@
.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-steps-item {
flex: 1;
vertical-align: top;
position: relative;
display: flex;
}
.t-steps-item__circle--default {
color: var(--td-step-item-default-circle-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
background-color: var(--td-step-item-default-circle-bg, var(--td-gray-color-1, #f3f3f3));
}
.t-steps-item__title--default {
color: var(--td-step-item-default-title-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
}
.t-steps-item__icon--default {
color: var(--td-step-item-default-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
}
.t-steps-item__dot--default {
border-color: var(--td-step-item-default-dot-border-color, var(--td-gray-color-5, #c5c5c5));
}
.t-steps-item__circle--process {
color: var(--td-step-item-process-circle-color, var(--td-white-color-1, #fff));
background-color: var(--td-step-item-process-circle-bg, var(--td-primary-color, #0052d9));
}
.t-steps-item__title--process {
color: var(--td-step-item-process-title-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__icon--process {
color: var(--td-step-item-process-icon-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__dot--process {
border-color: var(--td-step-item-process-dot-border-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__circle--finish {
color: var(--td-step-item-finish-circle-color, var(--td-primary-color, #0052d9));
background-color: var(--td-step-item-finish-circle-bg, var(--td-primary-color-1, #ecf2fe));
}
.t-steps-item__title--finish {
color: var(--td-step-item-finish-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
}
.t-steps-item__icon--finish {
color: var(--td-step-item-finish-icon-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__dot--finish {
border-color: var(--td-step-item-finish-dot-border-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__circle--error {
color: var(--td-step-item-error-circle-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
background-color: var(--td-step-item-error-circle-bg, var(--td-error-color-1, #fdecee));
}
.t-steps-item__title--error {
color: var(--td-step-item-error-title-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-steps-item__icon--error {
color: var(--td-step-item-error-icon-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-steps-item__dot--error {
border-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-steps-item--horizontal {
flex-direction: column;
justify-content: center;
align-items: center;
}
.t-steps-item__anchor {
display: flex;
align-items: center;
justify-content: center;
}
.t-steps-item__anchor--vertical {
width: var(--td-step-item-circle-size, 44rpx);
height: var(--td-step-item-circle-size, 44rpx);
}
.t-steps-item__circle {
display: flex;
justify-content: center;
align-items: center;
width: var(--td-step-item-circle-size, 44rpx);
height: var(--td-step-item-circle-size, 44rpx);
text-align: center;
border-radius: 50%;
font-size: var(--td-step-item-circle-font-size, 28rpx);
}
.t-steps-item__icon {
z-index: 1;
vertical-align: top;
font-size: var(--td-font-size-base, 28rpx);
position: relative;
}
.t-steps-item__icon--finsh,
.t-steps-item__icon--process {
color: var(--td-primary-color, #0052d9);
}
.t-steps-item__dot {
width: var(--td-step-item-dot-size, 16rpx);
height: var(--td-step-item-dot-size, 16rpx);
border-radius: 50%;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
}
.t-steps-item__dot--finish {
background-color: var(--td-step-item-process-dot-border-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__dot--error {
background-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-steps-item__content {
text-align: center;
}
.t-steps-item__content--horizontal {
max-width: 80px;
margin-top: 16rpx;
}
.t-steps-item__content--vertical {
margin-left: 16rpx;
flex: 1;
padding-bottom: 32rpx;
}
.t-steps-item__content--vertical.t-steps-item__content--last {
padding-bottom: 0;
}
.t-steps-item__title {
position: relative;
line-height: var(--td-step-item-circle-size, 44rpx);
font-size: var(--td-font-size-base, 28rpx);
}
.t-steps-item__title--process {
font-weight: 600;
}
.t-steps-item__title--vertical {
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8rpx;
}
.t-steps-item__description {
color: var(--td-step-item-descrition-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
line-height: 40rpx;
font-size: var(--td-font-size-s, 24rpx);
}
.t-steps-item__description--vertical {
text-align: left;
}
.t-steps-item__extra:not(:empty) {
margin-top: 16rpx;
}
.t-steps-item__line {
background-color: var(--td-step-item-line-color, var(--td-gray-color-4, #dcdcdc));
content: '';
display: block;
position: absolute;
}
.t-steps-item__line--horizontal {
height: 1px;
transform: translateY(-50%);
width: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
top: calc(var(--td-step-item-circle-size, 44rpx) / 2 + 1px);
left: calc(50% + var(--td-step-item-circle-size, 44rpx) / 2 + 16rpx);
}
.t-steps-item__line--horizontal.t-steps-item__line--dot {
top: calc(var(--td-step-item-dot-size, 16rpx) / 2);
}
.t-steps-item__line--finish {
background-color: var(--td-step-item-finish-line-color, var(--td-primary-color, #0052d9));
}
.t-steps-item__line--vertical {
height: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
width: 1px;
transform: translateX(-50%);
left: calc(var(--td-step-item-circle-size, 44rpx) / 2);
top: calc(var(--td-step-item-circle-size, 44rpx) + 16rpx);
}
.t-steps-item__line--vertical.t-steps-item__line--dot {
top: var(--td-step-item-circle-size, 44rpx);
height: calc(100% - var(--td-step-item-circle-size, 44rpx));
}
:host {
flex: 1;
vertical-align: top;
position: relative;
align-self: flex-start;
width: inherit;
}

4
miniprogram_npm/tdesign-miniprogram/steps/steps.js
View File

@@ -13,8 +13,8 @@ let Steps = class Steps extends SuperComponent {
constructor() {
super(...arguments);
this.relations = {
'./step-item': {
type: 'descendant',
'../step-item/step-item': {
type: 'child',
linked(child) {
this.updateChildren();
const { readonly } = this.data;

2
miniprogram_npm/tdesign-miniprogram/steps/steps.json
View File

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

2
miniprogram_npm/tdesign-miniprogram/steps/steps.wxml
View File

@@ -1,5 +1,5 @@
<wxs src="../common/utils.wxs" module="_" />
<view style="{{customStyle}}" class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} {{prefix}}-class">
<view style="{{style}}" class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} {{prefix}}-class">
<slot />
</view>

43
miniprogram_npm/tdesign-miniprogram/steps/type.d.ts vendored
View File

@@ -11,10 +11,6 @@ export interface TdStepsProps {
type: StringConstructor;
value?: 'default' | 'process' | 'finish' | 'error';
};
customStyle?: {
type: StringConstructor;
value?: string;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class'];
@@ -31,43 +27,12 @@ export interface TdStepsProps {
type: StringConstructor;
value?: 'line' | 'dashed' | 'arrow';
};
style?: {
type: StringConstructor;
value?: string;
};
theme?: {
type: StringConstructor;
value?: 'default' | 'dot';
};
}
export interface TdStepItemProps {
content?: {
type: StringConstructor;
value?: string;
};
customStyle?: {
type: StringConstructor;
value?: string;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra'];
};
icon?: {
type: StringConstructor;
value?: string;
};
status?: {
type: StringConstructor;
value?: StepStatus;
};
subStepItems?: {
type: ArrayConstructor;
value?: SubStepItem[];
};
title?: {
type: StringConstructor;
value?: string;
};
}
export declare type StepStatus = 'default' | 'process' | 'finish' | 'error';
export interface SubStepItem {
status: StepStatus;
title: string;
}