@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/tab-bar/tab-bar.vue

@@ -8,8 +8,8 @@
       :style="'height: ' + placeholderHeight + 'px;'"
     />
     <view
-      :style="tools._style(['z-index: ' + zIndex, customStyle])"
-      :class="tools.cls(classPrefix, [
+      :style="'' + tools._style(['z-index: ' + zIndex, customStyle])"
+      :class="'' + tools.cls(classPrefix, [
         ['border', bordered], ['fixed', fixed],
         ['safe', safeAreaInsetBottom], shape]
       ) + ' ' + tClass"
@@ -32,105 +32,107 @@ import tools from '../common/utils.wxs';
 const classPrefix = `${prefix}-tab-bar`;
 
 
-export default uniComponent({
-  name: classPrefix,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [{
-    key: 'value',
-    event: 'change',
-  }],
-  externalClasses: [`${prefix}-class`],
-  mixins: [ParentMixin(RELATION_MAP.TabBarItem)],
-  props: {
-    ...props,
-  },
-  emits: [
-    'change',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix,
-      tools,
+export default {
+  ...uniComponent({
+    name: classPrefix,
+    options: {
+      styleIsolation: 'shared',
+    },
+    controlledProps: [{
+      key: 'value',
+      event: 'change',
+    }],
+    externalClasses: [`${prefix}-class`],
+    mixins: [ParentMixin(RELATION_MAP.TabBarItem)],
+    props: {
+      ...props,
+    },
+    emits: [
+      'change',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix,
+        tools,
 
-      dataValue: coalesce(this.value, this.defaultValue),
-      placeholderHeight: 56,
-    };
-  },
-  watch: {
-    value: {
-      handler(e) {
-        this.dataValue = e;
-      },
-      immediate: true,
+        dataValue: coalesce(this.value, this.defaultValue),
+        placeholderHeight: 56,
+      };
     },
-    dataValue: {
-      handler() {
-        this.updateChildren();
+    watch: {
+      value: {
+        handler(e) {
+          this.dataValue = e;
+        },
+        immediate: true,
+      },
+      dataValue: {
+        handler() {
+          this.updateChildren();
+        },
+        immediate: true,
+      },
+      'fixed'() {
+        this.setPlaceholderHeight();
+      },
+      placeholder() {
+        this.setPlaceholderHeight();
       },
-      immediate: true,
-    },
-    'fixed'() {
-      this.setPlaceholderHeight();
     },
-    placeholder() {
+    mounted() {
       this.setPlaceholderHeight();
+      this.showChildren();
     },
-  },
-  mounted() {
-    this.setPlaceholderHeight();
-    this.showChildren();
-  },
-  methods: {
-    setPlaceholderHeight() {
-      if (!this.fixed || !this.placeholder) {
-        return;
-      }
-      nextTick().then(() => {
-        getRect(this, `.${classPrefix}`).then((res) => {
-          this.placeholderHeight = res.height;
+    methods: {
+      setPlaceholderHeight() {
+        if (!this.fixed || !this.placeholder) {
+          return;
+        }
+        nextTick().then(() => {
+          getRect(this, `.${classPrefix}`).then((res) => {
+            this.placeholderHeight = res.height;
+          });
         });
-      });
-    },
-    showChildren() {
-      const { dataValue } = this;
+      },
+      showChildren() {
+        const { dataValue } = this;
 
-      this.children.forEach((child) => {
-        this.crowded = this.children.length > 3;
+        this.children.forEach((child) => {
+          this.crowded = this.children.length > 3;
 
-        if (child.value === dataValue) {
-          child.showSpread();
-        }
-      });
-    },
+          if (child.value === dataValue) {
+            child.showSpread();
+          }
+        });
+      },
 
-    updateChildren() {
-      const { dataValue } = this;
+      updateChildren() {
+        const { dataValue } = this;
 
-      this.children?.forEach((child) => {
-        child.checkActive(dataValue);
-      });
-    },
+        this.children?.forEach((child) => {
+          child.checkActive(dataValue);
+        });
+      },
 
-    updateValue(value) {
-      this._trigger('change', { value });
-    },
+      updateValue(value) {
+        this._trigger('change', { value });
+      },
 
-    changeOtherSpread(value) {
-      this.children.forEach((child) => {
-        if (child.value !== value) {
-          child.closeSpread();
-        }
-      });
-    },
+      changeOtherSpread(value) {
+        this.children.forEach((child) => {
+          if (child.value !== value) {
+            child.closeSpread();
+          }
+        });
+      },
 
-    initName() {
-      return (this.backupValue += 1);
+      initName() {
+        return (this.backupValue += 1);
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./tab-bar.css"></style>
 <style scoped>

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

@@ -1,13 +1,13 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [
+    :style="'' + tools._style([customStyle])"
+    :class="'' + tools.cls(classPrefix, [
       ['split', split],
       ['crowded', crowded], shape]
     ) + ' ' + tClass"
   >
     <view
-      :class="tools.cls(classPrefix + '__content', [['checked', isChecked], theme])"
+      :class="'' + tools.cls(classPrefix + '__content', [['checked', isChecked], theme])"
       :hover-class="classPrefix + '__content--active'"
       :hover-stay-time="200"
       :aria-selected="(!hasChildren || !isSpread) && isChecked ? true : false"
@@ -71,7 +71,7 @@
         </block>
         <slot name="icon" />
       </view>
-      <view :class="tools.cls(classPrefix + '__text', [['small', !!icon]])">
+      <view :class="'' + tools.cls(classPrefix + '__text', [['small', !!icon]])">
         <t-icon
           v-if="hasChildren"
           name="view-list"
@@ -123,97 +123,100 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 const classPrefix = `${prefix}-tab-bar-item`;
 
 
-export default uniComponent({
-  name: classPrefix,
-  options: {
-    styleIsolation: 'shared',
-    virtualHost: true,
-  },
-  externalClasses: [`${prefix}-class`],
-  mixins: [ChildrenMixin(RELATION_MAP.TabBarItem)],
+export default {
   components: {
     TIcon,
     TBadge,
   },
-  props: {
-    ...props,
-  },
-  emits: [],
-  watch: {
-    subTabBar: {
-      handler(value) {
-        this.hasChildren = value?.length > 0;
-      },
-      immediate: true,
+  ...uniComponent({
+    name: classPrefix,
+    options: {
+      styleIsolation: 'shared',
+      virtualHost: true,
     },
-    icon: {
-      handler(v) {
-        this.innerIcon = calcIcon(v);
+    externalClasses: [`${prefix}-class`],
+    mixins: [ChildrenMixin(RELATION_MAP.TabBarItem)],
+    props: {
+      ...props,
+    },
+    emits: [],
+    watch: {
+      subTabBar: {
+        handler(value) {
+          this.hasChildren = value?.length > 0;
+        },
+        immediate: true,
+      },
+      icon: {
+        handler(v) {
+          this.innerIcon = calcIcon(v);
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix,
-      isSpread: false,
-      isChecked: false,
-      hasChildren: false,
-      currentName: '',
-      split: true,
-      iconOnly: false,
-      theme: '',
-      crowded: false,
-      shape: 'normal',
-      tools,
-    };
-  },
-  async mounted() {
-    const res = await getRect(this, `.${classPrefix}__text`);
+    data() {
+      return {
+        prefix,
+        classPrefix,
+        isSpread: false,
+        isChecked: false,
+        hasChildren: false,
+        currentName: '',
+        split: true,
+        iconOnly: false,
+        theme: '',
+        crowded: false,
+        shape: 'normal',
+        tools,
+        innerIcon: null,
+      };
+    },
+    async mounted() {
+      const res = await getRect(this, `.${classPrefix}__text`);
 
-    this.iconOnly = res.height === 0;
-  },
-  methods: {
-    innerAfterLinked() {
-      const parent = this[RELATION_MAP.TabBarItem];
-      const { theme, split, shape } = parent;
+      this.iconOnly = res.height === 0;
+    },
+    methods: {
+      innerAfterLinked() {
+        const parent = this[RELATION_MAP.TabBarItem];
+        const { theme, split, shape } = parent;
 
-      this.theme = theme;
-      this.split = split;
-      this.shape = shape;
-      this.currentName = this.value ? this.value : parent.initName();
+        this.theme = theme;
+        this.split = split;
+        this.shape = shape;
+        this.currentName = this.value ? this.value : parent.initName();
 
-      parent.updateChildren();
-    },
-    showSpread() {
-      this.isSpread = true;
-    },
-    toggle() {
-      const { currentName, hasChildren, isSpread } = this;
+        parent.updateChildren();
+      },
+      showSpread() {
+        this.isSpread = true;
+      },
+      toggle() {
+        const { currentName, hasChildren, isSpread } = this;
 
-      if (hasChildren) {
-        this.isSpread = !isSpread;
-      }
-      this[RELATION_MAP.TabBarItem].updateValue(currentName);
-      this[RELATION_MAP.TabBarItem].changeOtherSpread(currentName);
-    },
-    selectChild(event) {
-      const { value } = event.target.dataset;
+        if (hasChildren) {
+          this.isSpread = !isSpread;
+        }
+        this[RELATION_MAP.TabBarItem].updateValue(currentName);
+        this[RELATION_MAP.TabBarItem].changeOtherSpread(currentName);
+      },
+      selectChild(event) {
+        const { value } = event.target.dataset;
 
-      this[RELATION_MAP.TabBarItem].updateValue(value);
-      this.isSpread = false;
-    },
-    checkActive(value) {
-      const { currentName, subTabBar = [] } = this;
-      const isChecked = subTabBar?.some(item => item.value === value) || currentName === value;
+        this[RELATION_MAP.TabBarItem].updateValue(value);
+        this.isSpread = false;
+      },
+      checkActive(value) {
+        const { currentName, subTabBar = [] } = this;
+        const isChecked = subTabBar?.some(item => item.value === value) || currentName === value;
 
-      this.isChecked = isChecked;
-    },
-    closeSpread() {
-      this.isSpread = false;
+        this.isChecked = isChecked;
+      },
+      closeSpread() {
+        this.isSpread = false;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./tab-bar-item.css"></style>

package/dist/tab-panel/tab-panel.vue

@@ -3,7 +3,7 @@
     v-if="!lazy || hasActivated"
     :id="id"
     :class="tClass + ' ' + classPrefix + ' ' + (active ? classPrefix + '--active' : classPrefix + '--inactive')"
-    :style="tools._style([customStyle, hide ? 'display: none' : ''])"
+    :style="'' + tools._style([customStyle, hide ? 'display: none' : ''])"
     aria-role="tabpanel"
   >
     <view v-if="panel">
@@ -23,76 +23,78 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
 const name = `${prefix}-tab-panel`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-    virtualHost: true,
-  },
-  externalClasses: [`${prefix}-class`],
-  mixins: [ChildrenMixin(RELATION_MAP.TabPanel)],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      active: false,
-      hide: true,
-      id: '',
-      hasActivated: false,
-      tools,
-    };
-  },
-  watch: {
-    label: 'update',
-    badgeProps: {
-      handler() {
-        this.update();
-      },
-      deep: true,
-    },
-    disabled: 'update',
-
-    icon: 'update',
-    panel: 'update',
-    value: 'update',
-
-    lazy: 'update',
-  },
-  methods: {
-    setParent(parent) {
-      this[RELATION_MAP.TabPanel] = parent;
-      if (!parent.children.includes(this)) {
-        parent.children.push(this);
-      }
-      parent.innerAfterLinked(this);
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+      virtualHost: true,
     },
-    setId(id) {
-      this.id = id;
+    externalClasses: [`${prefix}-class`],
+    mixins: [ChildrenMixin(RELATION_MAP.TabPanel)],
+    props: {
+      ...props,
     },
-    getComputedName() {
-      if (this.value != null) {
-        return `${this.value}`;
-      }
-      return `${this.dataIndex}`;
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        active: false,
+        hide: true,
+        id: '',
+        hasActivated: false,
+        tools,
+      };
     },
-    update() {
-      this[RELATION_MAP.TabPanel]?.updateTabs();
+    watch: {
+      label: 'update',
+      badgeProps: {
+        handler() {
+          this.update();
+        },
+        deep: true,
+      },
+      disabled: 'update',
+
+      icon: 'update',
+      panel: 'update',
+      value: 'update',
+
+      lazy: 'update',
     },
+    methods: {
+      setParent(parent) {
+        this[RELATION_MAP.TabPanel] = parent;
+        if (!parent.children.includes(this)) {
+          parent.children.push(this);
+        }
+        parent.innerAfterLinked(this);
+      },
+      setId(id) {
+        this.id = id;
+      },
+      getComputedName() {
+        if (this.value != null) {
+          return `${this.value}`;
+        }
+        return `${this.dataIndex}`;
+      },
+      update() {
+        this[RELATION_MAP.TabPanel]?.updateTabs();
+      },
 
-    render(active, parent) {
-      this.initialized = this.initialized || active;
+      render(active, parent) {
+        this.initialized = this.initialized || active;
 
-      if (active && !this.hasActivated) {
-        this.hasActivated = true;
-      }
+        if (active && !this.hasActivated) {
+          this.hasActivated = true;
+        }
 
-      this.active = active;
-      this.hide = !parent.animation && !active;
+        this.active = active;
+        this.hide = !parent.animation && !active;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./tab-panel.css"></style>