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

6
miniprogram_npm/tdesign-miniprogram/dropdown-menu/README.en-US.md
View File

@@ -22,11 +22,11 @@ external-classes | Array | - | `['t-class','t-class-content', 't-class-column',
keys | Object | - | Typescript：`KeysType` | N
label | String | - | \- | N
multiple | Boolean | false | \- | N
options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-menu/type.ts) | N
options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
options-columns | String / Number | 1 | \- | N
options-layout | String | columns | `deprecated` | N
value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-menu/type.ts) | N
default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-menu/type.ts) | N
value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
### DropdownItem Events

16
miniprogram_npm/tdesign-miniprogram/dropdown-menu/README.md
View File

@@ -23,7 +23,7 @@ isComponent: true
```json
"usingComponents": {
"t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
"t-dropdown-item": "tdesign-miniprogram/dropdown-menu/dropdown-item"
"t-dropdown-item": "tdesign-miniprogram/dropdown-item/dropdown-item"
}
```
@@ -53,14 +53,6 @@ external-classes | Array | - | 组件类名，分别用于设置 组件外层类
show-overlay | Boolean | true | 是否显示遮罩层 | N
z-index | Number | 11600 | 菜单栏 z-index 层级 | N
### DropdownMenu Function
方法名 | 说明 | 参数 | 返回值
--|--|--|--
toggle | 切换下拉菜单的展示状态，传入索引值则切换对应菜单，不传值则关闭当前菜单 | index?: number | `void`
> 通过 `this.selectComponent` 获取组件示例，调用即可
### DropdownItem Props
名称 | 类型 | 默认值 | 说明 | 必传
@@ -71,11 +63,11 @@ external-classes | Array | - | 组件类名，分别用于设置 组件外层类
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
label | String | - | 标题 | N
multiple | Boolean | false | 是否多选 | N
options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-menu/type.ts) | N
options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
options-columns | String / Number | 1 | 选项分栏（1-3） | N
options-layout | String | columns | 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 | N
value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-menu/type.ts) | N
default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-menu/type.ts) | N
value | String / Number / Array | undefined | 选中值。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dropdown-item/type.ts) | N
### DropdownItem Events

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

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

45
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item-props.js
View File

@@ -1,45 +0,0 @@
const props = {
customStyle: {
type: String,
value: '',
},
disabled: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
keys: {
type: Object,
},
label: {
type: String,
value: '',
},
multiple: {
type: Boolean,
value: false,
},
options: {
type: Array,
value: [],
},
optionsColumns: {
type: null,
value: 1,
},
optionsLayout: {
type: String,
value: 'columns',
},
value: {
type: null,
value: undefined,
},
defaultValue: {
type: null,
value: undefined,
},
};
export default props;

89
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.d.ts vendored
View File

@@ -1,89 +0,0 @@
import { RelationsOptions, SuperComponent } from '../common/src/index';
import type { TdDropdownItemProps } from './type';
export interface DropdownItemProps extends TdDropdownItemProps {
}
export default class DropdownMenuItem extends SuperComponent {
externalClasses: string[];
properties: {
customStyle?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ["t-class", "t-class-content", "t-class-column", "t-class-column-item", "t-class-column-item-label", "t-class-footer"];
};
keys?: {
type: ObjectConstructor;
value?: import("../common/common").KeysType;
};
label?: {
type: StringConstructor;
value?: string;
};
multiple?: {
type: BooleanConstructor;
value?: boolean;
};
options?: {
type: ArrayConstructor;
value?: import("./type").DropdownOption[];
};
optionsColumns?: {
type: null;
value?: string | number;
};
optionsLayout?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: import("./type").DropdownValue;
};
defaultValue?: {
type: null;
value?: import("./type").DropdownValue;
};
};
data: {
prefix: string;
classPrefix: string;
show: boolean;
top: number;
maskHeight: number;
initValue: any;
hasChanged: boolean;
duration: string | number;
zIndex: number;
overlay: boolean;
labelAlias: string;
valueAlias: string;
};
parent: any;
relations: RelationsOptions;
controlledProps: {
key: string;
event: string;
}[];
observers: {
keys(obj: any): void;
value(v: any): void;
label(): void;
show(visible: any): void;
};
methods: {
closeDropdown(): void;
getParentBottom(parent: any, cb: any): void;
handleTreeClick(e: any): void;
handleRadioChange(e: any): void;
handleMaskClick(): void;
handleReset(): void;
handleConfirm(): void;
onLeaved(): void;
};
}

149
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.js
View File

@@ -1,149 +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 './dropdown-item-props';
import menuProps from './props';
const { prefix } = config;
const name = `${prefix}-dropdown-item`;
let DropdownMenuItem = class DropdownMenuItem extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-column`,
`${prefix}-class-column-item`,
`${prefix}-class-column-item-label`,
`${prefix}-class-footer`,
];
this.properties = Object.assign({}, props);
this.data = {
prefix,
classPrefix: name,
show: false,
top: 0,
maskHeight: 0,
initValue: null,
hasChanged: false,
duration: menuProps.duration.value,
zIndex: menuProps.zIndex.value,
overlay: menuProps.showOverlay.value,
labelAlias: 'label',
valueAlias: 'value',
};
this.parent = null;
this.relations = {
'./dropdown-menu': {
type: 'parent',
linked(target) {
const { zIndex, duration, showOverlay } = target.properties;
this.parent = target;
this.setData({
zIndex,
duration,
showOverlay,
});
},
},
};
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
keys(obj) {
this.setData({
labelAlias: obj.label || 'label',
valueAlias: obj.value || 'value',
});
},
value(v) {
const { options, labelAlias, valueAlias } = this.data;
if (this.data.multiple) {
if (!Array.isArray(v))
throw TypeError('应传入数组类型的 value');
}
const target = options.find((item) => item[valueAlias] === v);
if (target) {
this.setData({
label: target[labelAlias],
});
}
},
label() {
var _a;
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.getAllItems();
},
show(visible) {
if (visible) {
this.getParentBottom(this.parent, () => {
this.setData({ wrapperVisible: true });
});
}
},
};
this.methods = {
closeDropdown() {
var _a;
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.setData({
activeIdx: -1,
});
this.setData({
show: false,
});
},
getParentBottom(parent, cb) {
const query = wx.createSelectorQuery().in(parent);
query
.select(`#${prefix}-bar`)
.boundingClientRect((res) => {
this.setData({
top: res.bottom,
maskHeight: res.top,
}, cb);
})
.exec();
},
handleTreeClick(e) {
const { level, value: itemValue } = e.currentTarget.dataset;
const { value } = this.data;
value[level] = itemValue;
this._trigger('change', { value });
},
handleRadioChange(e) {
const { value } = e.detail;
this._trigger('change', { value });
if (!this.data.multiple) {
this.closeDropdown();
}
},
handleMaskClick() {
var _a;
if ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.properties.closeOnClickOverlay) {
this.closeDropdown();
}
},
handleReset() {
this._trigger('change', { value: [] });
},
handleConfirm() {
this._trigger('confirm', { value: this.data.value });
this.closeDropdown();
},
onLeaved() {
this.setData({ wrapperVisible: false });
},
};
}
};
DropdownMenuItem = __decorate([
wxComponent()
], DropdownMenuItem);
export default DropdownMenuItem;

11
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.json
View File

@@ -1,11 +0,0 @@
{
"component": true,
"usingComponents": {
"t-button": "../button/button",
"t-radio": "../radio/radio",
"t-radio-group": "../radio-group/radio-group",
"t-checkbox": "../checkbox/checkbox",
"t-checkbox-group": "../checkbox-group/checkbox-group",
"t-popup": "../popup/popup"
}
}

86
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.wxml
View File

@@ -1,86 +0,0 @@
<wxs module="this" src="./util.wxs" />
<wxs module="_" src="../common/utils.wxs" />
<view
wx:if="{{wrapperVisible}}"
class="{{classPrefix}} {{prefix}}-class"
style="{{this.getDropdownItemStyles(top, zIndex, customStyle)}}"
>
<t-popup
visible="{{show}}"
z-index="{{zIndex + 1}}"
duration="{{duration}}"
show-overlay="{{showOverlay}}"
custom-style="position: absolute;"
overlayProps="{{ { customStyle: 'position: absolute' } }}"
bind:leaved="onLeaved"
bind:visible-change="handleMaskClick"
class="{{classPrefix}}__popup-host"
t-class-content="{{classPrefix}}__content {{prefix}}-class-content"
>
<view class="{{classPrefix}}__body">
<!-- 单选列表 -->
<t-radio-group
wx:if="{{!multiple}}"
class="{{classPrefix}}__radio {{prefix}}-class-column"
t-class="{{classPrefix}}__radio-group"
value="{{value}}"
bind:change="handleRadioChange"
>
<t-radio
wx:for="{{options}}"
wx:key="index"
tabindex="0"
class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
icon="line"
align="right"
t-class="radio"
t-class-label="{{prefix}}-class-column-item-label"
value="{{item[valueAlias]}}"
label="{{item[labelAlias]}}"
disabled="{{item.disabled}}"
></t-radio>
</t-radio-group>
<!-- 多选列表 -->
<t-checkbox-group
wx:else
class="{{classPrefix}}__checkbox {{prefix}}-class-column"
t-class="{{classPrefix}}__checkbox-group"
custom-style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
value="{{value}}"
bind:change="handleRadioChange"
>
<block wx:for="{{options}}" wx:key="index">
<t-checkbox
tabindex="0"
class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
theme="tag"
value="{{item[valueAlias]}}"
label="{{item[labelAlias]}}"
disabled="{{item.disabled}}"
></t-checkbox>
</block>
</t-checkbox-group>
<slot />
</view>
<view class="{{classPrefix}}__footer {{prefix}}-class-footer" wx:if="{{multiple}}">
<t-button
block
class="{{classPrefix}}__footer-btn {{classPrefix}}__reset-btn"
theme="light"
disabled="{{value.length == 0}}"
bindtap="handleReset"
>重置</t-button
>
<t-button
block
class="{{classPrefix}}__footer-btn {{classPrefix}}__confirm-btn"
theme="primary"
disabled="{{value.length == 0}}"
bindtap="handleConfirm"
>确定</t-button
>
</view>
</t-popup>
</view>

110
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-item.wxss
View File

@@ -1,110 +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);
}
/** dropdown-item */
.t-dropdown-item {
position: fixed;
right: 0;
left: 0;
top: 0;
overflow: hidden;
bottom: 0;
/** 树形结构 */
}
.t-dropdown-item__content {
display: flex;
flex-direction: column;
z-index: 11600;
overflow: hidden;
}
.t-dropdown-item__popup-host {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
.t-dropdown-item__body {
flex: 1;
background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-block, #fff));
overflow: auto;
max-height: var(--td-dropdown-body-max-height, 560rpx);
}
.t-dropdown-item__body--tree {
display: flex;
overflow: hidden;
}
.t-dropdown-item__body--multi {
padding-top: var(--td-spacer, 16rpx);
padding-bottom: var(--td-spacer, 16rpx);
overflow-y: auto;
}
.t-dropdown-item__footer {
display: flex;
background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-block, #fff));
position: relative;
padding: 32rpx;
}
.t-dropdown-item__footer::before {
z-index: 1;
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
top: 0;
border-top: 1px solid var(--td-border-level-1-color, #e6e6e6);
transform: scaleY(0.5);
}
.t-dropdown-item__footer-btn {
flex: 1;
}
.t-dropdown-item__footer-btn + .t-dropdown-item__footer-btn {
margin-left: 32rpx;
}
.t-dropdown-item__radio,
.t-dropdown-item__checkbox {
width: 100%;
overflow: scroll;
}
.t-dropdown-item__checkbox-group {
display: grid;
padding: 32rpx;
grid-gap: 24rpx;
}
.t-dropdown-item__tree-item {
height: var(--td-tree-item-height, 96rpx);
line-height: var(--td-tree-item-height, 96rpx);
font-size: var(--td-tree-item-font-size, 32rpx);
padding-left: 32rpx;
}
.t-dropdown-item__tree-item--active {
color: var(--td-tree-item-active-color, var(--td-primary-color, #0052d9));
}

2
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.js
View File

@@ -23,7 +23,7 @@ let DropdownMenu = class DropdownMenu extends SuperComponent {
bottom: 0,
};
this.relations = {
'./dropdown-item': {
'../dropdown-item/dropdown-item': {
type: 'child',
},
};

5
miniprogram_npm/tdesign-miniprogram/dropdown-menu/dropdown-menu.wxml
View File

@@ -1,6 +1,6 @@
<wxs src="../common/utils.wxs" module="_" />
<view style="{{ customStyle }}" class="{{ classPrefix }} {{prefix}}-class" id="t-bar">
<view style="{{ style }}" class="{{ classPrefix }} {{prefix}}-class" id="t-bar">
<view
wx:for="{{menus}}"
wx:key="index"
@@ -15,8 +15,7 @@
<view class="{{classPrefix}}__title {{prefix}}-class-label">{{item.label}}</view>
<t-icon
name="caret-down-small"
t-class="{{prefix}}-class-icon"
class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}}"
t-class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}} {{prefix}}-class-icon"
aria-hidden="{{true}}"
/>
</view>

2
miniprogram_npm/tdesign-miniprogram/dropdown-menu/index.d.ts vendored
View File

@@ -1,5 +1,3 @@
export * from './type';
export * from './props';
export * from './dropdown-item-props';
export * from './dropdown-menu';
export * from './dropdown-item';

2
miniprogram_npm/tdesign-miniprogram/dropdown-menu/index.js
View File

@@ -1,5 +1,3 @@
export * from './type';
export * from './props';
export * from './dropdown-item-props';
export * from './dropdown-menu';
export * from './dropdown-item';

2
miniprogram_npm/tdesign-miniprogram/dropdown-menu/props.js
View File

@@ -3,7 +3,7 @@ const props = {
type: Boolean,
value: true,
},
customStyle: {
style: {
type: String,
value: '',
},

62
miniprogram_npm/tdesign-miniprogram/dropdown-menu/type.d.ts vendored
View File

@@ -1,10 +1,9 @@
import { KeysType } from '../common/common';
export interface TdDropdownMenuProps {
closeOnClickOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};
@@ -25,62 +24,3 @@ export interface TdDropdownMenuProps {
value?: number;
};
}
export interface TdDropdownItemProps {
customStyle?: {
type: StringConstructor;
value?: string;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: [
't-class',
't-class-content',
't-class-column',
't-class-column-item',
't-class-column-item-label',
't-class-footer'
];
};
keys?: {
type: ObjectConstructor;
value?: KeysType;
};
label?: {
type: StringConstructor;
value?: string;
};
multiple?: {
type: BooleanConstructor;
value?: boolean;
};
options?: {
type: ArrayConstructor;
value?: Array<DropdownOption>;
};
optionsColumns?: {
type: null;
value?: string | number;
};
optionsLayout?: {
type: StringConstructor;
value?: string;
};
value?: {
type: null;
value?: DropdownValue;
};
defaultValue?: {
type: null;
value?: DropdownValue;
};
}
export interface DropdownOption {
label: string;
disabled: boolean;
value: DropdownValue;
}
export declare type DropdownValue = string | number | Array<DropdownValue>;

16
miniprogram_npm/tdesign-miniprogram/dropdown-menu/util.wxs
View File

@@ -1,16 +0,0 @@
var getTreeClass = function (level) {
if (level === 0) return 'leaf';
if (level === 1) return 'parent';
return 'ancestor';
};
var getDropdownItemStyles = function (top, zIndex, customStyle) {
var topStyle = top ? 'top:' + top + 'px;' : '';
var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
return topStyle + zIndexStyle + customStyle;
};
module.exports = {
getTreeClass: getTreeClass,
getDropdownItemStyles: getDropdownItemStyles,
};