@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/search/search.vue

@@ -1,7 +1,7 @@
 <template>
   <view>
     <view
-      :style="tools._style([customStyle])"
+      :style="'' + tools._style([customStyle])"
       :class="classPrefix + ' ' + tClass"
     >
       <view
@@ -88,7 +88,7 @@
         :t-class="classPrefix + '__result-item'"
         hover
         aria-role="option"
-        @click="onSelectOption($event, { index })"
+        @click="(e) => onSelectOption(e, { index })"
       >
         <template
           #title
@@ -115,160 +115,161 @@ import { highLight } from './computed.js';
 const name = `${prefix}-search`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-input-container`,
-    `${prefix}-class-input`,
-    `${prefix}-class-action`,
-    `${prefix}-class-left`,
-    `${prefix}-class-clear`,
-  ],
+export default {
   components: {
     TIcon,
     TCell,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-  ],
-  data() {
-    return {
-      classPrefix: name,
-      prefix,
-      isShowResultList: false,
-      isSelected: false,
-      showClearIcon: false,
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-input-container`,
+      `${prefix}-class-input`,
+      `${prefix}-class-action`,
+      `${prefix}-class-left`,
+      `${prefix}-class-clear`,
+    ],
+    props: {
+      ...props,
+    },
+    emits: [
+    ],
+    data() {
+      return {
+        classPrefix: name,
+        prefix,
+        isShowResultList: false,
+        isSelected: false,
+        showClearIcon: false,
+        tools,
 
-      dataValue: this.value,
+        dataValue: this.value,
       // innerMaxLen: -1,
       // rawValue: '',
-    };
-  },
-  watch: {
-    resultList: {
-      handler(val) {
-        const { isSelected } = this;
-        if (val.length) {
-          if (isSelected) {
-          // 已选择
-            this.isShowResultList = false;
-            this.isSelected = false;
+      };
+    },
+    watch: {
+      resultList: {
+        handler(val) {
+          const { isSelected } = this;
+          if (val.length) {
+            if (isSelected) {
+              // 已选择
+              this.isShowResultList = false;
+              this.isSelected = false;
+            } else {
+              this.isShowResultList = true;
+            }
           } else {
-            this.isShowResultList = true;
+            this.isShowResultList = false;
           }
-        } else {
-          this.isShowResultList = false;
-        }
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
 
-    value: {
-      handler(val) {
-        this.dataValue = val;
+      value: {
+        handler(val) {
+          this.dataValue = val;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
 
-    dataValue: {
-      handler() {
+      dataValue: {
+        handler() {
         // this.updateInnerMaxLen();
-        this.updateClearIconVisible();
+          this.updateClearIconVisible();
+        },
       },
-    },
-    clearTrigger: 'updateClearIconVisible',
-    clearable: 'updateClearIconVisible',
-    disabled: 'updateClearIconVisible',
-    readonly: 'updateClearIconVisible',
+      clearTrigger: 'updateClearIconVisible',
+      clearable: 'updateClearIconVisible',
+      disabled: 'updateClearIconVisible',
+      readonly: 'updateClearIconVisible',
 
     // maxcharacter: 'updateInnerMaxLen',
     // maxlength: 'updateInnerMaxLen',
-  },
-  mounted() {
-    this.updateClearIconVisible();
-  },
-  methods: {
-    updateClearIconVisible(value = false) {
-      const { clearTrigger, disabled, readonly, dataValue } = this;
-      if (disabled || readonly || !dataValue) {
-        this.showClearIcon = false;
-        return;
-      }
-
-      this.showClearIcon = value || String(clearTrigger) === 'always';
     },
+    mounted() {
+      this.updateClearIconVisible();
+    },
+    methods: {
+      updateClearIconVisible(value = false) {
+        const { clearTrigger, disabled, readonly, dataValue } = this;
+        if (disabled || readonly || !dataValue) {
+          this.showClearIcon = false;
+          return;
+        }
 
-    onInput(e) {
-      let { value } = e.detail;
-      // this.rawValue = value;
-      this.dataValue = value;
+        this.showClearIcon = value || String(clearTrigger) === 'always';
+      },
 
-      const { maxcharacter } = this;
-      if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
-        const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+      onInput(e) {
+        let { value } = e.detail;
+        // this.rawValue = value;
+        this.dataValue = value;
 
-        value = characters;
-      }
+        const { maxcharacter } = this;
+        if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
+          const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
 
+          value = characters;
+        }
 
-      nextTick().then(() => {
-        this.dataValue = value;
-        this.$emit('change', {
-          value,
-          trigger: 'input-change',
+
+        nextTick().then(() => {
+          this.dataValue = value;
+          this.$emit('change', {
+            value,
+            trigger: 'input-change',
+          });
         });
-      });
       // this.updateInnerMaxLen();
-    },
+      },
 
-    onFocus(e) {
-      const { value } = e.detail;
-      this.updateClearIconVisible(true);
-      this.$emit('focus', { value });
-    },
+      onFocus(e) {
+        const { value } = e.detail;
+        this.updateClearIconVisible(true);
+        this.$emit('focus', { value });
+      },
 
-    onBlur(e) {
-      const { value } = e.detail;
-      this.updateClearIconVisible();
-      this.$emit('blur', { value });
-    },
+      onBlur(e) {
+        const { value } = e.detail;
+        this.updateClearIconVisible();
+        this.$emit('blur', { value });
+      },
 
-    handleClear() {
-      this.dataValue = '';
-      this.$emit('clear', { value: '' });
-      this.$emit('change', {
-        value: '',
-        trigger: 'clear',
-      });
-    },
+      handleClear() {
+        this.dataValue = '';
+        this.$emit('clear', { value: '' });
+        this.$emit('change', {
+          value: '',
+          trigger: 'clear',
+        });
+      },
 
-    onConfirm(e) {
-      const { value } = e.detail;
-      this.$emit('submit', { value });
-    },
+      onConfirm(e) {
+        const { value } = e.detail;
+        this.$emit('submit', { value });
+      },
 
-    onActionClick() {
-      this.$emit('action-click');
-    },
+      onActionClick() {
+        this.$emit('action-click');
+      },
 
-    onSelectOption(tools, { index }) {
-      const item = this.resultList[index];
-      this.dataValue = item;
-      this.isSelected = true;
+      onSelectOption(tools, { index }) {
+        const item = this.resultList[index];
+        this.dataValue = item;
+        this.isSelected = true;
 
-      this.$emit('change', {
-        value: item,
-        trigger: 'option-click',
-      });
-    },
-    highLight,
+        this.$emit('change', {
+          value: item,
+          trigger: 'option-click',
+        });
+      },
+      highLight,
     // updateInnerMaxLen() {
     //   // this.innerMaxLen = this.getInnerMaxLen();
     // },
@@ -289,8 +290,9 @@ export default uniComponent({
     //     count,
     //   });
     // },
-  },
-});
+    },
+  }),
+};
 
 
 </script>

package/dist/search/type.ts

@@ -107,7 +107,7 @@ export interface TdSearchProps {
   /**
    * 只读状态
    */
-  readonly?: boolean;
+  readonly?: boolean | null;
   /**
    * 预览结果列表
    * @default []

package/dist/side-bar/side-bar.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="classPrefix + ' ' + tClass"
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
   >
     <slot />
     <view :class="classPrefix + '__padding'" />
@@ -18,65 +18,67 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-side-bar`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-  ],
-  mixins: [ParentMixin(RELATION_MAP.SideBarItem)],
-  props: {
-    ...props,
-  },
-  emits: [
-    'click',
-    'change',
-  ],
-  data() {
-    return {
-      classPrefix: name,
-      prefix,
-      tools,
-
-      dataValue: coalesce(this.value, this.defaultValue),
-    };
-  },
-  watch: {
-    value: {
-      handler(e) {
-        this.dataValue = e;
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
       },
-      immediate: true,
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+    ],
+    mixins: [ParentMixin(RELATION_MAP.SideBarItem)],
+    props: {
+      ...props,
     },
-    dataValue: {
-      handler(v) {
-        const sideBarItems = this.children || [];
-        sideBarItems.forEach((item, index) => {
-          item.updateActive(v);
-          item.isFirstChild = index === 0;
-          item.isLastChild = index === sideBarItems.length - 1;
-        });
-      },
-      immediate: true,
+    emits: [
+      'click',
+      'change',
+    ],
+    data() {
+      return {
+        classPrefix: name,
+        prefix,
+        tools,
+
+        dataValue: coalesce(this.value, this.defaultValue),
+      };
     },
-  },
-  methods: {
-    innerAfterUnLinked(child) {
-      const index = this.children.findIndex(item => item === child);
-      this.children.splice(index, 1);
+    watch: {
+      value: {
+        handler(e) {
+          this.dataValue = e;
+        },
+        immediate: true,
+      },
+      dataValue: {
+        handler(v) {
+          const sideBarItems = this.children || [];
+          sideBarItems.forEach((item, index) => {
+            item.updateActive(v);
+            item.isFirstChild = index === 0;
+            item.isLastChild = index === sideBarItems.length - 1;
+          });
+        },
+        immediate: true,
+      },
     },
-    doChange({ value, label }) {
-      this._trigger('change', { value, label });
+    methods: {
+      innerAfterUnLinked(child) {
+        const index = this.children.findIndex(item => item === child);
+        this.children.splice(index, 1);
+      },
+      doChange({ value, label }) {
+        this._trigger('change', { value, label });
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./side-bar.css"></style>

package/dist/side-bar-item/side-bar-item.vue

@@ -1,22 +1,18 @@
 <template>
   <view
     :id="tId"
-    :class="
-      tools.cls(classPrefix, [
-        ['active', active],
-        ['disabled', disabled]
-      ]) +
-        ' ' +
-        tClass
-    "
-    :style="tools._style([customStyle])"
+    :class="'' + tools.cls(classPrefix, [
+      ['active', active],
+      ['disabled', disabled]
+    ]) +
+      ' ' +
+      tClass"
+    :style="'' + tools._style([customStyle])"
     aria-role="button"
-    :aria-label="
-      ariaLabel ||
-        (badgeProps && (badgeProps.dot || badgeProps.count)
-          ? (active ? '已选中，' + label + tools.getBadgeAriaLabel({ ...badgeProps })
-            : label + tools.getBadgeAriaLabel({ ...badgeProps })) : '')
-    "
+    :aria-label="ariaLabel ||
+      (badgeProps && (badgeProps.dot || badgeProps.count)
+        ? (active ? '已选中，' + label + tools.getBadgeAriaLabel({ ...badgeProps })
+          : label + tools.getBadgeAriaLabel({ ...badgeProps })) : '')"
     :aria-disabled="disabled"
     @click="handleClick"
   >
@@ -50,15 +46,15 @@
     </block>
     <block v-if="badgeProps">
       <t-badge
-        :color="badgeProps.color"
+        :color="badgeProps.color || ''"
         :content="label"
-        :count="badgeProps.count"
-        :dot="badgeProps.dot"
-        :max-count="badgeProps.maxCount"
-        :offset="badgeProps.offset"
-        :shape="badgeProps.shape"
-        :show-zero="badgeProps.showZero"
-        :size="badgeProps.size"
+        :count="badgeProps.count || 0"
+        :dot="badgeProps.dot || false"
+        :max-count="badgeProps.maxCount || 99"
+        :offset="badgeProps.offset || []"
+        :shape="badgeProps.shape || 'circle'"
+        :show-zero="badgeProps.showZero || false"
+        :size="badgeProps.size || 'medium'"
         :t-class="badgeProps.tClass"
         :t-class-content="badgeProps.tClassContent"
         :t-class-count="badgeProps.tClassCount"
@@ -83,83 +79,87 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const name = `${prefix}-side-bar-item`;
 
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.SideBarItem)],
+export default {
   components: {
     TBadge,
     TIcon,
   },
-  props: {
-    ...props,
-    tId: {
-      type: String,
-      default: '',
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-  },
-  data() {
-    return {
-      classPrefix: name,
-      prefix,
-      active: false,
-      isPre: false,
-      isNext: false,
-      tools,
-      isFirstChild: false,
-      isLastChild: false,
-    };
-  },
-  computed: {
-    iconCustomStyle() {
-      return tools._style([
-        {
-          fontSize: 'var(--td-side-bar-icon-size, 20px)',
-          marginRight: '2px',
-        },
-        this.innerIcon.style || '',
-      ]);
+    externalClasses: [
+      `${prefix}-class`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.SideBarItem)],
+    props: {
+      ...props,
+      tId: {
+        type: String,
+        default: '',
+      },
     },
-  },
-  watch: {
-    icon: {
-      handler(v) {
-        this.innerIcon = typeof v === 'string' ? { name: v } : v;
+    data() {
+      return {
+        classPrefix: name,
+        prefix,
+        active: false,
+        isPre: false,
+        isNext: false,
+        tools,
+        isFirstChild: false,
+        isLastChild: false,
+      };
+    },
+    computed: {
+      iconCustomStyle() {
+        if (!this.innerIcon) return '';
+
+        return tools._style([
+          {
+            fontSize: 'var(--td-side-bar-icon-size, 20px)',
+            marginRight: '2px',
+          },
+          this.innerIcon.style || '',
+        ]);
       },
-      immediate: true,
     },
-    disabled: {
-      handler() {
-        this.updateActive(this.value);
+    watch: {
+      icon: {
+        handler(v) {
+          this.innerIcon = typeof v === 'string' ? { name: v } : v;
+        },
+        immediate: true,
+      },
+      disabled: {
+        handler() {
+          this.updateActive(this.value);
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
+    mounted() {
 
-  },
-  methods: {
-    innerAfterLinked() {
-      const parent = this[RELATION_MAP.SideBarItem];
-      this.updateActive(parent.dataValue);
-    },
-    updateActive(value) {
-      const active = value === this.value && !this.disabled;
-      this.active = active;
     },
-    handleClick() {
-      if (this.disabled) return;
-      const { value, label } = this;
+    methods: {
+      innerAfterLinked() {
+        const parent = this[RELATION_MAP.SideBarItem];
+        this.updateActive(parent.dataValue);
+      },
+      updateActive(value) {
+        const active = value === this.value && !this.disabled;
+        this.active = active;
+      },
+      handleClick() {
+        if (this.disabled) return;
+        const { value, label } = this;
 
-      this[RELATION_MAP.SideBarItem]?.doChange({ value, label });
+        this[RELATION_MAP.SideBarItem]?.doChange({ value, label });
+      },
     },
-  },
-});
+  }),
+};
 
 </script>
 <style scoped src="./side-bar-item.css"></style>