白色主题

miniprogram_npm/tdesign-miniprogram/collapse/README.en-US.md

@@ -1,12 +1,11 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Collapse Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-custom-style `v0.25.0` | String | - | \- | N
+custom-style | String | - | `0.25.0` | N
 default-expand-all | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 expand-icon | Boolean / Slot | true | \- | N
@@ -26,10 +25,11 @@ change | `(value: CollapseValue)` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 content | String / Slot | - | \- | N
-custom-style `v0.25.0` | String | - | \- | N
+custom-style | String | - | `0.25.0` | N
 disabled | Boolean | undefined | \- | N
 expand-icon | Boolean / Slot | undefined | \- | N
 external-classes | Array | - | `['t-class', 't-class-header', 't-class-content']` | N
 header | String / Slot | - | \- | N
 header-right-content | String / Slot | - | \- | N
+placement | String | bottom | `0.34.0`。options：bottom/top | N
 value | String / Number | - | \- | N

miniprogram_npm/tdesign-miniprogram/collapse/README.md

@@ -21,7 +21,7 @@ isComponent: true
 ```json
 "usingComponents": {
   "t-collapse": "tdesign-miniprogram/collapse/collapse",
-  "t-collapse-panel": "tdesign-miniprogram/collapse/collapse-panel"
+  "t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
 }
 ```
 
@@ -53,12 +53,12 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
 default-expand-all | Boolean | false | 默认是否展开全部 | N
 disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
 expand-icon | Boolean / Slot | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 | N
 expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N
-style | String | - | 自定义组件样式 | N
-theme | String | default | 折叠面板风格。可选项：card | N
+theme | String | default | 折叠面板风格。可选项：default/card | N
 value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
 default-value | Array | undefined | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
 
@@ -73,10 +73,11 @@ change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 content | String / Slot | - | 折叠面板内容 | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
 disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
 expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N
 external-classes | Array | - | 组件类名，用于组件外层元素、标题、内容。`['t-class', 't-class-header', 't-class-content']` | N
 header | String / Slot | - | 面板头内容 | N
 header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N
-style | String | - | 自定义组件样式 | N
+placement | String | bottom | `0.34.0`。选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel-props.d.ts

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

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel-props.js

@@ -1,30 +0,0 @@
-const props = {
-    content: {
-        type: String,
-    },
-    customStyle: {
-        type: String,
-        value: '',
-    },
-    disabled: {
-        type: Boolean,
-        value: null,
-    },
-    expandIcon: {
-        type: Boolean,
-        value: true,
-    },
-    externalClasses: {
-        type: Array,
-    },
-    header: {
-        type: String,
-    },
-    headerRightContent: {
-        type: String,
-    },
-    value: {
-        type: null,
-    },
-};
-export default props;

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel.d.ts

@@ -1,29 +0,0 @@
-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;
-        contentHeight: number;
-        expanded: boolean;
-        classPrefix: string;
-        classBasePrefix: string;
-        ultimateExpandIcon: boolean;
-        ultimateDisabled: boolean;
-    };
-    methods: {
-        set(data: Record<string, object | any>): Promise<unknown>;
-        updateExpanded(activeValues: any): Promise<void>;
-        getRect(selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
-        updateStyle(expanded: boolean): any;
-        onClick(): void;
-        onTransitionEnd(): void;
-    };
-}

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel.js

@@ -1,116 +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 './collapse-panel-props';
-const { prefix } = config;
-const name = `${prefix}-collapse-panel`;
-const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
-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': {
-                type: 'ancestor',
-                linked(target) {
-                    this.parent = target;
-                    const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties;
-                    const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value;
-                    this.setData({
-                        ultimateExpandIcon: expandIcon || this.properties.expandIcon,
-                        ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
-                    });
-                    this.updateExpanded(activeValues);
-                },
-            },
-        };
-        this.properties = props;
-        this.data = {
-            prefix,
-            contentHeight: 0,
-            expanded: false,
-            classPrefix: name,
-            classBasePrefix: prefix,
-            ultimateExpandIcon: false,
-            ultimateDisabled: false,
-        };
-        this.methods = {
-            set(data) {
-                this.setData(data);
-                return new Promise((resolve) => wx.nextTick(resolve));
-            },
-            updateExpanded(activeValues) {
-                if (!this.parent) {
-                    return Promise.resolve()
-                        .then(nextTick)
-                        .then(() => {
-                        const data = { transition: true };
-                        if (this.data.expanded) {
-                            data.contentHeight = 'auto';
-                        }
-                        this.setData(data);
-                    });
-                }
-                const { value } = this.properties;
-                const expanded = activeValues.includes(value);
-                if (expanded === this.properties.expanded)
-                    return;
-                this.setData({ expanded });
-                this.updateStyle(expanded);
-            },
-            getRect(selector) {
-                return new Promise((resolve) => {
-                    wx.createSelectorQuery()
-                        .in(this)
-                        .select(selector)
-                        .boundingClientRect((rect) => {
-                        if (rect) {
-                            resolve(rect);
-                        }
-                    })
-                        .exec();
-                });
-            },
-            updateStyle(expanded) {
-                return this.getRect(`.${name}__content`)
-                    .then((rect) => rect.height)
-                    .then((height) => {
-                    if (expanded) {
-                        return this.set({
-                            contentHeight: height ? `${height}px` : 'auto',
-                        });
-                    }
-                    return this.set({ contentHeight: `${height}px` })
-                        .then(nextTick)
-                        .then(() => this.set({ contentHeight: 0 }));
-                });
-            },
-            onClick() {
-                const { ultimateDisabled } = this.data;
-                const { value } = this.properties;
-                if (ultimateDisabled)
-                    return;
-                this.parent.switch(value);
-            },
-            onTransitionEnd() {
-                if (this.data.expanded) {
-                    this.setData({
-                        contentHeight: 'auto',
-                    });
-                }
-            },
-        };
-    }
-};
-CollapsePanel = __decorate([
-    wxComponent()
-], CollapsePanel);
-export default CollapsePanel;

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel.json

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

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel.wxml

@@ -1,42 +0,0 @@
-<wxs src="../common/utils.wxs" module="utils" />
-
-<view style="{{ customStyle }}" class="{{classPrefix}} {{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
-      right-icon="{{ ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : '' }}"
-      t-class="{{classPrefix}}__header {{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 {{ultimateDisabled ? 'class-right-icon--disabled' : ''}}"
-      t-class-hover="class-header-hover"
-    >
-      <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"
-    style="height: {{contentHeight}};"
-    aria-hidden="{{expanded ? '' : true}}"
-    bind:transitionend="onTransitionEnd"
-  >
-    <view
-      class="{{classPrefix}}__content {{classPrefix}}__content--{{expanded ? 'active' : ''}} {{prefix}}-class-content"
-    >
-      {{content}}
-      <slot />
-      <slot name="content" />
-    </view>
-  </view>
-</view>
-<!-- parentDisabled -->

miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel.wxss

@@ -1,142 +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-collapse-panel {
-  overflow: hidden;
-  transition: height 200ms ease-in-out;
-  position: relative;
-  background-color: #fff;
-}
-.t-collapse-panel::after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: unset;
-  bottom: 0;
-  left: unset;
-  right: unset;
-  background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
-}
-.t-collapse-panel::after {
-  height: 1px;
-  left: 0;
-  right: 0;
-  transform: scaleY(0.5);
-}
-.t-collapse-panel--active {
-  height: auto;
-}
-.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__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-left: var(--td-collapse-horizontal-padding, 32rpx);
-  height: var(--td-collapse-header-height, 96rpx);
-  color: var(--td-collapse-header-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
-  position: relative;
-}
-.t-collapse-panel__header::after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: unset;
-  bottom: 0;
-  left: unset;
-  right: unset;
-  background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
-}
-.t-collapse-panel__header::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-color, #e7e7e7));
-}
-.t-collapse-panel__body::after {
-  height: 1px;
-  left: 0;
-  right: 0;
-  transform: scaleY(0.5);
-}
-.t-collapse-panel__wrapper {
-  transition: height 200ms ease-in-out;
-}
-.t-collapse-panel__content {
-  color: var(--td-collapse-content-text-color, 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);
-}
-.class-title {
-  font-size: var(--td-collapse-title-font-size, var(--td-font-size-m, 32rpx));
-}
-.class-title--disabled {
-  color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26));
-}
-.class-note--disabled {
-  color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)) !important;
-}
-.class-right-icon--disabled {
-  color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)) !important;
-}

miniprogram_npm/tdesign-miniprogram/collapse/collapse.js

@@ -17,7 +17,7 @@ let Collapse = class Collapse extends SuperComponent {
         };
         this.externalClasses = [`${prefix}-class`];
         this.relations = {
-            './collapse-panel': {
+            '../collapse-panel/collapse-panel': {
                 type: 'descendant',
                 linked() {
                     this.updateExpanded();
@@ -42,10 +42,7 @@ let Collapse = class Collapse extends SuperComponent {
         };
         this.methods = {
             updateExpanded() {
-                const panels = this.$children;
-                if (panels.length === 0)
-                    return;
-                panels.forEach((child) => {
+                this.$children.forEach((child) => {
                     child.updateExpanded(this.properties.value);
                 });
             },

miniprogram_npm/tdesign-miniprogram/collapse/collapse.wxml

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

miniprogram_npm/tdesign-miniprogram/collapse/index.d.ts

@@ -1,6 +1,4 @@
 export { default as Collapse } from './collapse';
 export * from './type';
 export * from './props';
-export * from './collapse-panel-props';
 export { CollapseProps } from './collapse';
-export { CollapsePanelProps } from './collapse-panel';

miniprogram_npm/tdesign-miniprogram/collapse/index.js

@@ -1,4 +1,3 @@
 export { default as Collapse } from './collapse';
 export * from './type';
 export * from './props';
-export * from './collapse-panel-props';

miniprogram_npm/tdesign-miniprogram/collapse/props.js

@@ -1,5 +1,5 @@
 const props = {
-    customStyle: {
+    style: {
         type: String,
         value: '',
     },

miniprogram_npm/tdesign-miniprogram/collapse/type.d.ts

@@ -1,5 +1,5 @@
 export interface TdCollapseProps {
-    customStyle?: {
+    style?: {
         type: StringConstructor;
         value?: string;
     };
@@ -32,38 +32,4 @@ export interface TdCollapseProps {
         value?: CollapseValue;
     };
 }
-export interface TdCollapsePanelProps {
-    content?: {
-        type: StringConstructor;
-        value?: string;
-    };
-    customStyle?: {
-        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;
-    };
-    headerRightContent?: {
-        type: StringConstructor;
-        value?: string;
-    };
-    value?: {
-        type: null;
-        value?: string | number;
-    };
-}
 export declare type CollapseValue = Array<string | number>;