New Huajishe Check ChaoXing
This commit is contained in:
e2hang
28
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.d.ts
vendored
Normal file
28
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.d.ts
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
import type { TdCollapsePanelProps } from './type';
|
||||
export interface CollapsePanelProps extends TdCollapsePanelProps {
|
||||
}
|
||||
export default class CollapsePanel extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
properties: TdCollapsePanelProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
expanded: boolean;
|
||||
classPrefix: string;
|
||||
classBasePrefix: string;
|
||||
ultimateExpandIcon: boolean;
|
||||
ultimateDisabled: boolean;
|
||||
};
|
||||
observers: {
|
||||
disabled(v: any): void;
|
||||
};
|
||||
methods: {
|
||||
updateExpanded(activeValues?: any[]): void;
|
||||
updateStyle(expanded: boolean): Promise<void>;
|
||||
onClick(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
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 './props';
|
||||
import { getRect } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-collapse-panel`;
|
||||
let CollapsePanel = class CollapsePanel extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.relations = {
|
||||
'../collapse/collapse': {
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
const { value, expandIcon, disabled } = target.properties;
|
||||
this.setData({
|
||||
ultimateExpandIcon: this.properties.expandIcon == null ? expandIcon : this.properties.expandIcon,
|
||||
ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
|
||||
});
|
||||
this.updateExpanded(value);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
expanded: false,
|
||||
classPrefix: name,
|
||||
classBasePrefix: prefix,
|
||||
ultimateExpandIcon: false,
|
||||
ultimateDisabled: false,
|
||||
};
|
||||
this.observers = {
|
||||
disabled(v) {
|
||||
this.setData({ ultimateDisabled: !!v });
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateExpanded(activeValues = []) {
|
||||
if (!this.$parent) {
|
||||
return;
|
||||
}
|
||||
const { value } = this.properties;
|
||||
const { defaultExpandAll } = this.$parent.data;
|
||||
const expanded = defaultExpandAll ? !this.data.expanded : activeValues.includes(value);
|
||||
if (expanded === this.properties.expanded)
|
||||
return;
|
||||
this.setData({ expanded });
|
||||
this.updateStyle(expanded);
|
||||
},
|
||||
updateStyle(expanded) {
|
||||
return getRect(this, `.${name}__content`)
|
||||
.then((rect) => rect.height)
|
||||
.then((height) => {
|
||||
const animation = wx.createAnimation({
|
||||
duration: 0,
|
||||
timingFunction: 'ease-in-out',
|
||||
});
|
||||
if (expanded) {
|
||||
animation.height(height).top(0).step({ duration: 300 }).height('auto').step();
|
||||
}
|
||||
else {
|
||||
animation.height(height).top(1).step({ duration: 1 }).height(0).step({ duration: 300 });
|
||||
}
|
||||
this.setData({ animation: animation.export() });
|
||||
});
|
||||
},
|
||||
onClick() {
|
||||
const { ultimateDisabled } = this.data;
|
||||
const { value } = this.properties;
|
||||
if (ultimateDisabled)
|
||||
return;
|
||||
if (this.$parent.data.defaultExpandAll) {
|
||||
this.updateExpanded();
|
||||
}
|
||||
else {
|
||||
this.$parent.switch(value);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
CollapsePanel = __decorate([
|
||||
wxComponent()
|
||||
], CollapsePanel);
|
||||
export default CollapsePanel;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-cell": "../cell/cell"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
class="class {{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class"
|
||||
>
|
||||
<view
|
||||
class="{{classPrefix}}__title"
|
||||
aria-role="button"
|
||||
aria-expanded="{{expanded}}"
|
||||
aria-disabled="{{ultimateDisabled}}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<t-cell
|
||||
title="{{header}}"
|
||||
note="{{headerRightContent}}"
|
||||
bordered
|
||||
left-icon="{{headerLeftIcon}}"
|
||||
right-icon="{{ ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : '' }}"
|
||||
t-class="{{_.cls(classPrefix + '__header', [placement, ['expanded', expanded]])}} {{prefix}}-class-header"
|
||||
t-class-title="class-title {{ultimateDisabled ? 'class-title--disabled' : ''}}"
|
||||
t-class-note="class-note {{ultimateDisabled ? 'class-note--disabled' : ''}}"
|
||||
t-class-right-icon="class-right-icon {{classPrefix}}__arrow--{{placement}} {{ultimateDisabled ? 'class-right-icon--disabled' : ''}}"
|
||||
t-class-hover="class-header-hover"
|
||||
>
|
||||
<slot name="header-left-icon" slot="left-icon" />
|
||||
<slot name="header" slot="title" />
|
||||
<slot name="header-right-content" slot="note" />
|
||||
<slot name="expand-icon" slot="right-icon" />
|
||||
</t-cell>
|
||||
</view>
|
||||
<view class="{{classPrefix}}__wrapper" animation="{{animation}}" aria-hidden="{{expanded ? '' : true}}">
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__content', [['disabled', ultimateDisabled], ['expanded', expanded], placement])}} {{prefix}}-class-content"
|
||||
>
|
||||
{{content}}
|
||||
<slot />
|
||||
<slot name="content" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,191 @@
|
||||
.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-collapse-panel {
|
||||
background-color: var(--td-collapse-panel-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-collapse-panel--disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.t-collapse-panel--disabled .t-collapse-panel__content,
|
||||
.t-collapse-panel--disabled .t-collapse-panel__header {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.t-collapse-panel--top {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.t-collapse-panel__header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: var(--td-collapse-horizontal-padding, 32rpx);
|
||||
height: var(--td-collapse-header-height, auto);
|
||||
color: var(--td-collapse-header-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-collapse-panel__header--top {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__header--top::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__header--top::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__header--bottom {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__header--bottom::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__header--bottom::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__header::after {
|
||||
left: 32rpx;
|
||||
}
|
||||
.t-collapse-panel__header-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.t-collapse-panel__header-icon {
|
||||
height: 100%;
|
||||
padding-left: 8px;
|
||||
width: 44px;
|
||||
padding-right: 8px;
|
||||
color: var(--td-collapse-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
}
|
||||
.t-collapse-panel__extra {
|
||||
font-size: var(--td-collapse-extra-font-size, var(--td-font-size-m, 32rpx));
|
||||
}
|
||||
.t-collapse-panel__body {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__body::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__body::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__wrapper {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-collapse-panel__content {
|
||||
color: var(--td-collapse-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
font-size: var(--td-collapse-content-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding: var(--td-collapse-content-padding, 32rpx);
|
||||
line-height: var(--td-collapse-content-line-height, 1.5);
|
||||
}
|
||||
.t-collapse-panel__content--disabled {
|
||||
color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--bottom {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--bottom::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--top {
|
||||
position: relative;
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--top::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
right: unset;
|
||||
background-color: var(--td-collapse-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-collapse-panel__content--expanded.t-collapse-panel__content--top::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-collapse-panel__arrow--top {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.class-title {
|
||||
font-size: var(--td-collapse-title-font-size, var(--td-font-size-m, 32rpx));
|
||||
}
|
||||
.class-title--disabled {
|
||||
color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.class-note--disabled {
|
||||
color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
.class-right-icon--disabled {
|
||||
color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdCollapsePanelProps } from './type';
|
||||
declare const props: TdCollapsePanelProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,33 @@
|
||||
const props = {
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
disabled: {
|
||||
type: null,
|
||||
value: undefined,
|
||||
},
|
||||
expandIcon: {
|
||||
type: null,
|
||||
value: undefined,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
headerLeftIcon: {
|
||||
type: String,
|
||||
},
|
||||
headerRightContent: {
|
||||
type: String,
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
value: 'bottom',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
38
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.d.ts
vendored
Normal file
38
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.d.ts
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
export interface TdCollapsePanelProps {
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
expandIcon?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-header', 't-class-content'];
|
||||
};
|
||||
header?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
headerLeftIcon?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
headerRightContent?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
placement?: {
|
||||
type: StringConstructor;
|
||||
value?: 'bottom' | 'top';
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user