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

17
miniprogram_npm/tdesign-miniprogram/picker/README.en-US.md
View File

@@ -1,7 +1,6 @@
:: BASE_DOC ::
## API
### Picker Props
name | type | default | description | required
@@ -10,7 +9,7 @@ auto-close | Boolean | true | \- | N
cancel-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps` | N
columns | Array / Function | [] | required。Typescript：`Array<PickerColumn> \| ((item: Array<PickerValue>) => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | Y
confirm-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
custom-style `v0.25.0` | String | - | \- | N
custom-style | String | - | `0.25.0` | N
footer | Slot | - | \- | N
header | Boolean / Slot | true | \- | N
render-label | String / Function | - | Typescript：`(item: PickerColumnItem) => string` | N
@@ -24,6 +23,14 @@ visible | Boolean | false | \- | N
name | params | description
-- | -- | --
cancel | - | \-
change | `(detail: { value: Array<PickerValue>; columns: Array<{ column: number; index: number }> })` | \-
confirm | `(value: Array<PickerValue>, context: {index: number[] })` | \-
pick | `(value: Array<PickerValue>,context: PickerContext)` | \-
change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | \-
### PickerItem Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | String | - | `0.25.0` | N
format | Function | - | Typescript：`(option: PickerItemOption) => string` | N
options | Array | [] | Typescript：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N

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

@@ -13,7 +13,7 @@ isComponent: true
```json
"usingComponents": {
"t-picker": "tdesign-miniprogram/picker/picker",
"t-picker-item": "tdesign-miniprogram/picker/picker-item",
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
}
```
@@ -47,7 +47,7 @@ auto-close | Boolean | true | 自动关闭；在确认、取消、点击遮罩
cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N
columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`Array<PickerColumn> \| ((item: Array<PickerValue>) => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | Y
confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
custom-style | String | - | `0.25.0`。自定义组件样式 | N
footer | Slot | - | 底部内容 | N
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
render-label | String / Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
@@ -61,14 +61,14 @@ visible | Boolean | false | 是否显示 | N
名称 | 参数 | 描述
-- | -- | --
cancel | - | 点击取消按钮时触发
change | `(detail: { value: Array<PickerValue>; columns: Array<{ column: number; label: string; index: number }> })` | 选中变化时候触发
confirm | `(detail: { value: Array<PickerValue>; columns: Array<{ column: number; label: string; index: number }> })` | 选中变化时候触发
pick | `(detail: { value: Array<PickerValue>; label: string; index: number; column: number;})` | 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标
change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 选中变化时候触发，即确认变化时触发
confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 点击确认按钮时触发
pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标
### PickerItem Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
custom-style | String | - | `0.25.0`。自定义组件样式 | N
format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption) => string` | N
options | Array | [] | 数据源。TS 类型：`Array<PickerItemOption>` `interface PickerItemOption { label: string; value: string | number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N

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

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

14
miniprogram_npm/tdesign-miniprogram/picker/picker-item-props.js
View File

@@ -1,14 +0,0 @@
const props = {
customStyle: {
type: String,
value: '',
},
format: {
type: null,
},
options: {
type: Array,
value: [],
},
};
export default props;

25
miniprogram_npm/tdesign-miniprogram/picker/picker-item.d.ts vendored
View File

@@ -1,25 +0,0 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class PickerItem extends SuperComponent {
relations: RelationsOptions;
properties: import("./type").TdPickerItemProps;
observers: {
options(this: PickerItem): void;
};
data: {
classPrefix: string;
offset: number;
duration: number;
value: string;
curIndex: number;
};
methods: {
onTouchStart(event: any): void;
onTouchMove(event: any): void;
onTouchEnd(): void;
update(): void;
resetOrigin(): void;
getCount(): any;
};
calculateViewDeltaY(touchDeltaY: number): number;
created(): void;
}

117
miniprogram_npm/tdesign-miniprogram/picker/picker-item.js
View File

@@ -1,117 +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 { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './picker-item-props';
const { prefix } = config;
const name = `${prefix}-picker-item`;
const itemHeight = 80;
const DefaultDuration = 240;
const { windowWidth } = wx.getSystemInfoSync();
const rpx2px = (rpx) => Math.floor((windowWidth * rpx) / 750);
const range = function (num, min, max) {
return Math.min(Math.max(num, min), max);
};
let PickerItem = class PickerItem extends SuperComponent {
constructor() {
super(...arguments);
this.relations = {
'./picker': {
type: 'parent',
linked(parent) {
this.parent = parent;
},
},
};
this.properties = props;
this.observers = {
options() {
this.update();
},
};
this.data = {
classPrefix: name,
offset: 0,
duration: 0,
value: '',
curIndex: 0,
};
this.methods = {
onTouchStart(event) {
this.StartY = event.touches[0].clientY;
this.StartOffset = this.data.offset;
this.setData({ duration: 0 });
},
onTouchMove(event) {
const { StartY, StartOffset, itemHeight } = this;
const touchDeltaY = event.touches[0].clientY - StartY;
const deltaY = this.calculateViewDeltaY(touchDeltaY);
this.setData({
offset: range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0),
duration: DefaultDuration,
});
},
onTouchEnd() {
const { offset } = this.data;
const { options } = this.properties;
if (offset === this.StartOffset) {
return;
}
const index = range(Math.round(-offset / this.itemHeight), 0, this.getCount() - 1);
this.setData({
curIndex: index,
offset: -index * this.itemHeight,
});
if (index === this._selectedIndex) {
return;
}
wx.nextTick(() => {
var _a, _b, _c;
this._selectedIndex = index;
this._selectedValue = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.value;
this._selectedLabel = (_b = options[index]) === null || _b === void 0 ? void 0 : _b.label;
(_c = this.parent) === null || _c === void 0 ? void 0 : _c.triggerColumnChange({
index,
column: this.columnIndex || 0,
});
});
},
update() {
var _a, _b;
const { options, value } = this.data;
const index = options.findIndex((item) => item.value === value);
const selectedIndex = index > 0 ? index : 0;
this.setData({
offset: -selectedIndex * this.itemHeight,
curIndex: selectedIndex,
});
this._selectedIndex = selectedIndex;
this._selectedValue = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
this._selectedLabel = (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label;
},
resetOrigin() {
this.update();
},
getCount() {
var _a, _b;
return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
},
};
}
calculateViewDeltaY(touchDeltaY) {
return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;
}
created() {
this.StartY = 0;
this.StartOffset = 0;
this.itemHeight = rpx2px(itemHeight);
}
};
PickerItem = __decorate([
wxComponent()
], PickerItem);
export default PickerItem;

4
miniprogram_npm/tdesign-miniprogram/picker/picker-item.json
View File

@@ -1,4 +0,0 @@
{
"component": true,
"usingComponents": {}
}

24
miniprogram_npm/tdesign-miniprogram/picker/picker-item.wxml
View File

@@ -1,24 +0,0 @@
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{ customStyle }}"
class="{{_.cls(classPrefix + '__group', [['narrow', siblingCount > 4], ['roomy', siblingCount <= 2]])}}"
bind:touchstart="onTouchStart"
catch:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:touchcancel="onTouchEnd"
>
<view
class="{{classPrefix}}__wrapper"
style="transition: transform {{ duration }}ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, {{ offset }}px, 0)"
>
<view
class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
wx:for="{{options}}"
wx:key="index"
wx:for-item="option"
data-index="{{ index }}"
>
{{option.label}}
</view>
</view>
</view>

58
miniprogram_npm/tdesign-miniprogram/picker/picker-item.wxss
View File

@@ -1,58 +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);
}
:host {
display: flex;
}
.t-picker-item__group {
height: var(--td-picker-group-height, 400rpx);
overflow: hidden;
flex: 1;
z-index: 1;
padding: 0 40rpx;
}
.t-picker-item__group--roomy {
padding: 0 64rpx;
}
.t-picker-item__group--narrow {
padding: 0 16rpx;
}
.t-picker-item__wrapper {
padding: 144rpx 0;
}
.t-picker-item__item {
display: flex;
align-items: center;
justify-content: center;
height: var(--td-picker-item-height, 80rpx);
line-height: var(--td-picker-item-height, 80rpx);
color: var(--td-picker-item-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
}
.t-picker-item__item--active {
color: var(--td-picker-item-active-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
font-weight: 600;
}

2
miniprogram_npm/tdesign-miniprogram/picker/picker.js
View File

@@ -18,7 +18,7 @@ let Picker = class Picker extends SuperComponent {
multipleSlots: true,
};
this.relations = {
'./picker-item': {
'../picker-item/picker-item': {
type: 'child',
linked() {
this.updateChildren();

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

@@ -1,7 +1,7 @@
<wxs src="../common/utils.wxs" module="_" />
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
<view slot="content" style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
<view slot="content" style="{{ style }}" class="{{classPrefix}} {{prefix}}-class">
<view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
<view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
>{{cancelBtn}}</view

4
miniprogram_npm/tdesign-miniprogram/picker/picker.wxss
View File

@@ -34,7 +34,6 @@
border-top-right-radius: var(--td-picker-border-radius, 24rpx);
}
.t-picker__toolbar {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
@@ -69,10 +68,11 @@
color: var(--td-picker-confirm-color, var(--td-primary-color, #0052d9));
}
.t-picker__main {
background-color: #fff;
position: relative;
display: flex;
justify-content: center;
padding-left: 64rpx;
padding-right: 64rpx;
}
.t-picker__mask {
position: absolute;

6
miniprogram_npm/tdesign-miniprogram/picker/props.js
View File

@@ -15,14 +15,10 @@ const props = {
type: null,
value: true,
},
customStyle: {
style: {
type: String,
value: '',
},
footer: {
type: Boolean,
value: true,
},
header: {
type: Boolean,
value: true,

20
miniprogram_npm/tdesign-miniprogram/picker/type.d.ts vendored
View File

@@ -16,14 +16,10 @@ export interface TdPickerProps {
type: null;
value?: boolean | string | ButtonProps;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};
footer?: {
type: BooleanConstructor;
value?: boolean;
};
header?: {
type: BooleanConstructor;
value?: boolean;
@@ -49,20 +45,6 @@ export interface TdPickerProps {
value?: boolean;
};
}
export interface TdPickerItemProps {
customStyle?: {
type: StringConstructor;
value?: string;
};
format?: {
type: null;
value?: (option: PickerColumnItem) => string;
};
options?: {
type: ArrayConstructor;
value?: Array<PickerColumnItem>;
};
}
export declare type PickerColumn = PickerColumnItem[];
export interface PickerColumnItem {
label: string;