@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/collapse/collapse.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="[
       tClass,
       tools.cls(classPrefix, [['hairline--top-bottom', border], theme])
@@ -21,97 +21,99 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-collapse`;
 
 
-export default uniComponent({
-  name,
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
-    },
-  ],
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [`${prefix}-class`],
-  mixins: [ParentMixin(RELATION_MAP.CollapsePanel)],
-  props: {
-    ...props,
-  },
-  emits: [
-    'update:value',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      tools,
-      border: false,
-      dataValue: coalesce(this.value, this.defaultValue),
-      mounted: false,
-    };
-  },
-  watch: {
-    value: {
-      handler(value) {
-        this.dataValue = value;
+export default {
+  ...uniComponent({
+    name,
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
       },
-      immediate: true,
+    ],
+    options: {
+      styleIsolation: 'shared',
     },
-    dataValue: {
-      handler() {
-        this.waitUntilMounted(this.updateExpanded);
-      },
-      immediate: true,
-      deep: true,
+    externalClasses: [`${prefix}-class`],
+    mixins: [ParentMixin(RELATION_MAP.CollapsePanel)],
+    props: {
+      ...props,
     },
-    expandMutex: {
-      handler() {
-        this.waitUntilMounted(this.updateExpanded);
-      },
-      immediate: true,
+    emits: [
+      'update:value',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        tools,
+        border: false,
+        dataValue: coalesce(this.value, this.defaultValue),
+        mounted: false,
+      };
     },
+    watch: {
+      value: {
+        handler(value) {
+          this.dataValue = value;
+        },
+        immediate: true,
+      },
+      dataValue: {
+        handler() {
+          this.waitUntilMounted(this.updateExpanded);
+        },
+        immediate: true,
+        deep: true,
+      },
+      expandMutex: {
+        handler() {
+          this.waitUntilMounted(this.updateExpanded);
+        },
+        immediate: true,
+      },
 
-  },
-  mounted() {
-    let interval = 0;
-    // #ifdef APP-PLUS
-    interval = 33;
-    // #endif
-    setTimeout(() => {
-      this.mounted = true;
-    }, interval);
-  },
-  methods: {
-    waitUntilMounted(cb) {
-      if (this.mounted) {
-        cb.call(this);
-        return;
-      }
+    },
+    mounted() {
+      let interval = 0;
+      // #ifdef APP-PLUS
+      interval = 33;
+      // #endif
       setTimeout(() => {
-        cb.call(this);
-      }, 33);
+        this.mounted = true;
+      }, interval);
     },
+    methods: {
+      waitUntilMounted(cb) {
+        if (this.mounted) {
+          cb.call(this);
+          return;
+        }
+        setTimeout(() => {
+          cb.call(this);
+        }, 33);
+      },
 
-    updateExpanded() {
-      this.children?.forEach((e) => {
-        e.updateExpanded(this.dataValue);
-      });
-    },
-    switch(panelValue) {
-      const { expandMutex, dataValue: activeValues } = this;
+      updateExpanded() {
+        this.children?.forEach((e) => {
+          e.updateExpanded(this.dataValue);
+        });
+      },
+      switch(panelValue) {
+        const { expandMutex, dataValue: activeValues } = this;
 
-      let value = [];
-      const hit = activeValues?.indexOf(panelValue);
+        let value = [];
+        const hit = activeValues?.indexOf(panelValue);
 
-      if (hit > -1) {
-        value = activeValues.filter(item => item !== panelValue);
-      } else {
-        value = expandMutex ? [panelValue] : activeValues.concat(panelValue);
-      }
+        if (hit > -1) {
+          value = activeValues.filter(item => item !== panelValue);
+        } else {
+          value = expandMutex ? [panelValue] : activeValues.concat(panelValue);
+        }
 
-      this._trigger('change', { value });
+        this._trigger('change', { value });
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./collapse.css"></style>

package/dist/collapse-panel/collapse-panel.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="[
       classPrefix + ' ' + classPrefix + '--' + placement,
       tClass
@@ -64,7 +64,7 @@
       :animation="animation"
       :aria-hidden="expanded ? '' : true"
     >
-      <view :class="tools.cls(classPrefix + '__content', [['disabled', ultimateDisabled], ['expanded', expanded], placement]) + ' ' + tClassContent">
+      <view :class="'' + tools.cls(classPrefix + '__content', [['disabled', ultimateDisabled], ['expanded', expanded], placement]) + ' ' + tClassContent">
         {{ content }}
         <slot />
         <slot name="content" />
@@ -85,152 +85,154 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-collapse-panel`;
 const DISABLED_COLOR = 'var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, .26)))';
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-header`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.CollapsePanel)],
+export default {
   components: {
     TCell,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      expanded: false,
-      classPrefix: name,
-      classBasePrefix: prefix,
-      ultimateExpandIcon: false,
-      ultimateDisabled: false,
-      tools,
-      animation: null,
-    };
-  },
-  computed: {
-    titleCustomStyle() {
-      return tools._style({
-        fontSize: 'var(--td-collapse-title-font-size, var(--td-font-size-m, 16px))',
-        color: this.ultimateDisabled && DISABLED_COLOR,
-      });
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    noteCustomStyle() {
-      return tools._style({
-        color: this.ultimateDisabled && DISABLED_COLOR,
-
-      });
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-header`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.CollapsePanel)],
+    props: {
+      ...props,
     },
-    rightIconCustomStyle() {
-      return tools._style({
-        color: this.ultimateDisabled && DISABLED_COLOR,
-      });
+    data() {
+      return {
+        prefix,
+        expanded: false,
+        classPrefix: name,
+        classBasePrefix: prefix,
+        ultimateExpandIcon: false,
+        ultimateDisabled: false,
+        tools,
+        animation: null,
+      };
     },
-  },
-  watch: {
-    disabled: {
-      handler(e) {
-        this.ultimateDisabled = !!e;
+    computed: {
+      titleCustomStyle() {
+        return tools._style({
+          fontSize: 'var(--td-collapse-title-font-size, var(--td-font-size-m, 16px))',
+          color: this.ultimateDisabled && DISABLED_COLOR,
+        });
+      },
+      noteCustomStyle() {
+        return tools._style({
+          color: this.ultimateDisabled && DISABLED_COLOR,
+
+        });
+      },
+      rightIconCustomStyle() {
+        return tools._style({
+          color: this.ultimateDisabled && DISABLED_COLOR,
+        });
       },
-      immediate: true,
     },
-  },
-  methods: {
-    updateExpanded(activeValues = []) {
-      if (!this[RELATION_MAP.CollapsePanel]) {
-        return;
-      }
+    watch: {
+      disabled: {
+        handler(e) {
+          this.ultimateDisabled = !!e;
+        },
+        immediate: true,
+      },
+    },
+    methods: {
+      updateExpanded(activeValues = []) {
+        if (!this[RELATION_MAP.CollapsePanel]) {
+          return;
+        }
 
-      const { value } = this;
-      const { defaultExpandAll } = this[RELATION_MAP.CollapsePanel];
-      const expanded = defaultExpandAll ? !this.expanded : activeValues?.includes(value);
+        const { value } = this;
+        const { defaultExpandAll } = this[RELATION_MAP.CollapsePanel];
+        const expanded = defaultExpandAll ? !this.expanded : activeValues?.includes(value);
 
-      if (expanded === this.expanded) return;
+        if (expanded === this.expanded) return;
 
-      this.expanded = expanded;
-      this.updateStyle(expanded);
-    },
+        this.expanded = expanded;
+        this.updateStyle(expanded);
+      },
 
-    updateStyle(expanded) {
-      return getRect(this, `.${name}__content`)
-        .then(rect => rect.height)
-        .then((height) => {
-          const animation = uni.createAnimation({
-            duration: 0,
-            timingFunction: 'ease-in-out',
-          });
+      updateStyle(expanded) {
+        return getRect(this, `.${name}__content`)
+          .then(rect => rect.height)
+          .then((height) => {
+            const animation = uni.createAnimation({
+              duration: 0,
+              timingFunction: 'ease-in-out',
+            });
 
-          if (expanded) {
-            animation
-              .height(height)
-              .top(0)
-              .step({ duration: 300 })
-              .height('auto')
-              .step();
-          } else {
-            let doAnimation = false;
-
-            // #ifdef H5 || APP-PLUS
-            animation
-              .height(height)
-              .top(1)
-              .step({ duration: 17 })
-              .height(0)
-              .step({ duration: 300 });
-            doAnimation = true;
-            // #endif
-
-            if (!doAnimation) {
+            if (expanded) {
+              animation
+                .height(height)
+                .top(0)
+                .step({ duration: 300 })
+                .height('auto')
+                .step();
+            } else {
+              let doAnimation = false;
+
+              // #ifdef H5 || APP-PLUS
               animation
                 .height(height)
                 .top(1)
-                .step({ duration: 1 })
+                .step({ duration: 17 })
                 .height(0)
                 .step({ duration: 300 });
+              doAnimation = true;
+              // #endif
+
+              if (!doAnimation) {
+                animation
+                  .height(height)
+                  .top(1)
+                  .step({ duration: 1 })
+                  .height(0)
+                  .step({ duration: 300 });
+              }
             }
-          }
 
-          this.animation =  animation.export();
-        });
-    },
+            this.animation =  animation.export();
+          });
+      },
 
-    onClick() {
-      const { ultimateDisabled } = this;
-      const { value } = this;
+      onClick() {
+        const { ultimateDisabled } = this;
+        const { value } = this;
 
 
-      if (ultimateDisabled) return;
+        if (ultimateDisabled) return;
 
-      if (this[RELATION_MAP.CollapsePanel].defaultExpandAll) {
-        this.updateExpanded();
-      } else {
-        this[RELATION_MAP.CollapsePanel].switch(value);
-      }
-    },
+        if (this[RELATION_MAP.CollapsePanel].defaultExpandAll) {
+          this.updateExpanded();
+        } else {
+          this[RELATION_MAP.CollapsePanel].switch(value);
+        }
+      },
 
-    innerAfterLinked() {
-      const { dataValue, expandIcon, disabled } =  this[RELATION_MAP.CollapsePanel];
+      innerAfterLinked() {
+        const { dataValue, expandIcon, disabled } =  this[RELATION_MAP.CollapsePanel];
 
-      this.ultimateExpandIcon = this.expandIcon == null ? expandIcon : this.expandIcon;
-      this.ultimateDisabled = this.disabled == null ? disabled : this.disabled;
+        this.ultimateExpandIcon = this.expandIcon == null ? expandIcon : this.expandIcon;
+        this.ultimateDisabled = this.disabled == null ? disabled : this.disabled;
 
 
-      let interval = 0;
-      // #ifdef APP-PLUS
-      interval = 33;
-      // #endif
-      setTimeout(() => {
-        this.updateExpanded(dataValue);
-      }, interval);
+        let interval = 0;
+        // #ifdef APP-PLUS
+        interval = 33;
+        // #endif
+        setTimeout(() => {
+          this.updateExpanded(dataValue);
+        }, interval);
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./collapse-panel.css"></style>

package/dist/collapse-panel/props.ts

@@ -12,13 +12,13 @@ export default {
   },
   /** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */
   disabled: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdCollapsePanelProps['disabled'],
   },
   /** 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 */
   expandIcon: {
-    type: Boolean,
-    default: undefined as TdCollapsePanelProps['expandIcon'],
+    type: [Boolean, null],
+    default: null as TdCollapsePanelProps['expandIcon'],
   },
   /** 面板头内容 */
   header: {

package/dist/collapse-panel/type.ts

@@ -12,11 +12,11 @@ export interface TdCollapsePanelProps {
   /**
    * 禁止当前面板展开，优先级大于 Collapse 的同名属性
    */
-  disabled?: boolean;
+  disabled?: boolean | null;
   /**
    * 当前折叠面板展开图标，优先级大于 Collapse 的同名属性
    */
-  expandIcon?: boolean;
+  expandIcon?: boolean | null;
   /**
    * 面板头内容
    */

package/dist/color-picker/README.md

@@ -1,7 +1,7 @@
 ---
 title: ColorPicker 颜色选择器
 description: 用于颜色选择，支持多种格式。
-spline: data
+spline: form
 isComponent: true
 ---