vdesign-ui 0.1.24 → 0.2.0-beta

package/dist/components/tabs/index.vue

@@ -2,14 +2,15 @@
   <div class="vd-tabs">
     <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
       <div :class="[barType,scrollspy]" ref="tabsContainer">
-        <div v-for="(item, index) in navList" :key="index" :class="tabClasses(item)" @click="handleChange(index)">
-          <span class="vd-tabs-text-cell" :class="ellipsisClasses">{{ item.title }}
+        <div v-for="(item, index) in navList" :key="index" :class="[tabClasses(item), lineClasses]" @click="handleChange(index)">
+          <span class="vd-tabs-text-cell" :class="ellipsisClasses">
+            {{ item.title }}
             <vd-icon class="vd-tabs-arrow" v-if="item.arrow" name="icon_btn_moredown"></vd-icon>
           </span>
         </div>
       </div>
       <div class="vd-tabs-menu--right" v-if="menu">
-        <vd-icon :name="menuIcon" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
+        <vd-icon :name="menuIconComputed" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
       </div>
     </div>
     <div class="vd-tabs__content">
@@ -28,7 +29,11 @@ export default {
       type: String,
       default: "primary",
     },
-    menu: Boolean,
+    // 将 menu 作为一个字段，同时控制显示和图标名称
+    menu: {
+      type: [Boolean, String],
+      default: false,
+    },
     ellipsis: {
       type: Boolean,
       default: true,
@@ -36,31 +41,40 @@ export default {
     actBorder: Boolean,
     backgroundColor: Boolean,
     divider: Boolean,
-    menuIcon: {
-      type: String,
-      default: 'icon_tab_morelist',
-    },
   },
   data() {
     return {
-      currentValue: this.value,
-      navList: [],
+      currentValue: this.value, // 当前选中的标签名
+      navList: [], // 标签导航列表
+      tabs: [], // 已注册的标签
     };
   },
   watch: {
+    // 监听 value 变化，更新 currentValue
     value(val) {
       this.currentValue = val;
     },
   },
   computed: {
+    // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
+    menuIconComputed() {
+      if (typeof this.menu === 'string') {
+        return this.menu;
+      } else {
+        return 'icon_tab_morelist'; // 默认的菜单图标名称
+      }
+    },
+    // 计算滚动监视的类名
     scrollspy() {
       return  `${prefixCls}--complete`
     },
+    // 计算标签文字是否需要省略号的类名
     ellipsisClasses() {
       return {
         [`${prefixCls}-text--ellipsis`]: this.ellipsis,
       };
     },
+    // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
     menuClasses() {
       return {
         [`${prefixCls}-menu`]: this.menu,
@@ -68,11 +82,13 @@ export default {
         "vd-hairline--bottom": this.divider,
       };
     },
+    // 计算标签下方线条的类名
     lineClasses() {
       return {
         [`${prefixCls}__line`]: !this.actBorder,
       };
     },
+    // 根据 tabsType 属性计算标签类型的类名
     barType() {
       return {
         [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
@@ -80,45 +96,54 @@ export default {
     },
   },
   methods: {
+    // 当菜单按钮被点击时触发事件
     emitMenuClick() {
       this.$emit('menu-click');
     },
+    // 计算每个标签项的类名
     tabClasses(item) {
       return {
         [`${prefixCls}-${this.tabsType}`]: true,
         [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
       };
     },
-    getTabs() {
-      return this.$children.filter((item) => item.$options.name === "vd-tab");
+     // 注册新的标签到 tabs 数组中
+    registerTab(tab) {
+      if (!this.tabs.includes(tab)) {
+        this.tabs.push(tab);
+        this.updateNav();
+      }
     },
+     // 从 tabs 数组中注销一个标签
+    unregisterTab(tab) {
+      const index = this.tabs.indexOf(tab);
+      if (index !== -1) {
+        this.tabs.splice(index, 1);
+        this.updateNav();
+      }
+    },
+    // 根据已注册的标签更新导航列表
     updateNav() {
-      this.navList = this.getTabs().map((pane, index) => ({
-        title: pane.title,
-        name: pane.name || index,
-        arrow: pane.arrow,
+      this.navList = this.tabs.map((tab, index) => ({
+        title: tab.title,
+        name: tab.name != null ? tab.name : index,
+        arrow: tab.arrow,
       }));
-      if (!this.currentValue) {
+       // 如果当前没有选中的标签且导航列表不为空，则将第一个标签设为当前值
+      if (!this.currentValue && this.navList.length) {
         this.currentValue = this.navList[0].name;
       }
-      this.updateStatus();
-    },
-    updateStatus() {
-      this.getTabs().forEach((tab) => {
-        tab.show = tab.computedName === this.currentValue;
-      });
     },
     handleChange(index) {
       const nav = this.navList[index];
       const name = nav.name;
       if (this.currentValue !== name) {
         this.currentValue = name;
-        this.$emit('input', name); // 确保向父组件更新
-        this.$emit('change', { index, title: nav.title, name });
-        this.updateStatus(); // 确保更新状态
-        this.adjustTabPosition(index);
+        this.$emit("input", name); // 触发 input 事件，更新父组件中的 v-model 绑定值
+        this.$emit("change", { index, title: nav.title, name }); // 触发 change 事件，传递标签的详细信息
+        this.adjustTabPosition(index); // 调整选中标签的位置
       }
-      this.$emit("click", { index, title: nav.title, name });
+      this.$emit("click", { index, title: nav.title, name }); // 触发 click 事件，传递标签的详细信息
     },
     adjustTabPosition(index) {
       const container = this.$refs.tabsContainer;
@@ -133,13 +158,11 @@ export default {
     },
   },
   mounted() {
-    this.updateNav();
+    // 组件挂载后更新导航列表
+    // this.updateNav();
   },
 };
 </script>
-
-<style lang="less"></style>
-
 <style lang="less">
 @import "./style.less";
 </style>

package/dist/components/tabs/tab/index.vue

@@ -20,35 +20,32 @@ export default {
     },
     data() {
         return {
-            show: false,
         };
     },
     watch: {
-        title() {
-            this.updateNav();
-        },
-        name() {
-            this.updateNav();
-        },
+
     },
     computed: {
+        isActive() {
+            return this.computedName === this.$parent.currentValue;
+            },
         tabClasses() {
             return {
                 'vd-tab': true,
-                'vd-tab-active': this.show,
+                'vd-tab-active': this.isActive,
             };
         },
         computedName() {
-            return this.name ?? this.$parent.getTabs().indexOf(this);
-        },
+            return this.name != null
+                ? this.name
+                : this.$parent.tabs.indexOf(this);
+            },
     },
-    methods: {
-        updateNav() {
-            this.$parent.updateNav();
-        },
+    created() {
+        this.$parent.registerTab(this);
     },
-    mounted() {
-        this.updateNav();
+    beforeDestroy() {
+        this.$parent.unregisterTab(this);
     },
 };
 </script>

package/dist/components/tag/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- {{text}} 改成v-html -->
-  <div class="vd-tag" :class="classes">
+  <div class="vd-tag" :class="classes"  @click="handleClick">
     <slot>{{ text }}</slot>
   </div>
 </template>
@@ -14,10 +13,20 @@ export default {
     type: {
       type: String,
       // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
-      default: ''
+      default: '',
+      validator(value) {
+        return [
+          'white', 'dark', 'blue', 'cyan', 'green',
+          'olive', 'yellow', 'orange', 'red', 'pink', 'purple',
+        ].includes(value);
+      },
     },
     size: {
       type: String,
+      required: true,
+      validator(value) {
+      return ['s', 'l'].includes(value);
+    },
     },
     borders: {
       type: Boolean,
@@ -41,7 +50,12 @@ export default {
       return classes
 
     },
-  }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    },
+  },
 }
 </script>
 

package/dist/components/tag/style.less

@@ -6,13 +6,13 @@
     border-radius: calc(var(--radius-tag-bg) * 1px);
     padding: 0 calc(var(--spacing-tag-padding_y) * 1px);
 
-    &--small{
+    &--s{
         font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
         font-weight: var(--en-single-f-b-s-fontWeight);
         height: calc(var(--height-tag-s) * 1px);
     }
 
-    &--large{
+    &--l{
         font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
         font-weight: var(--en-single-f-b-r-fontWeight);
         height: calc(var(--height-tag-m) * 1px);

package/dist/components/title/index.vue

@@ -2,9 +2,9 @@
     <div :class="['vd-title', wrapClasses]" @click="handleClick">
         <div class="vd-title--left">
             <div class="vd-title-content">
-                <vd-icon v-if="leftIcon" :name="leftIcon" :svg="leftSvg" :class="leftIconClasses"></vd-icon>
+                <vd-icon v-if="leftIcon" :name="leftIcon"  :class="leftIconClasses"></vd-icon>
                 <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon" :svg="rightSvg" :class="rightIconClasses"></vd-icon>
+                <vd-icon v-if="rightIcon" :name="rightIcon"  :class="rightIconClasses"></vd-icon>
             </div>
             <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
         </div>
@@ -22,18 +22,20 @@ const prefixCls = 'vd-title';
 export default {
     name: 'vd-title',
     props: {
+        type: {
+            type: String,
+            default: 'primary'
+        },
         title: String,
         leftIcon: String,
         rightIcon: String,
         arrow: Boolean,
         subText: String,
         guideText: String,
-        type: {
-            type: String,
-            default: 'primary'
-        },
-        leftSvg: Boolean,
-        rightSvg: Boolean,
+        sticky: {
+            type: Boolean,
+            default: false
+        }
 
     },
     data() {
@@ -46,6 +48,7 @@ export default {
             return {
                 [`${prefixCls}-${this.type}`]: this.type,
                 [`${prefixCls}-${this.type}-double`]: this.subText,
+                [`${prefixCls}--sticky`]: this.sticky
             }
 
         },

package/dist/components/title/style.less

@@ -14,6 +14,12 @@
         //     display: flex;
         //     flex-direction: column;
         // }
+
+        &--sticky {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
     
         &--right{
             display: flex;

package/dist/img/img_status_loading_white_ani.b56fcfae.svg

@@ -0,0 +1,155 @@
+<svg
+fill="none"
+width='100%'
+height='100%'
+viewBox="0 0 32 32"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <defs>
+      <style type="text/css">
+        <![CDATA[
+          @keyframes loading-animate1 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            20% {
+              fill-opacity: 1;
+            }
+            26% {
+              fill-opacity: 0.32;
+            }
+            32% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate2 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            12% {
+              fill-opacity: 0.16;
+            }
+            22% {
+              fill-opacity: 1;
+            }
+            31% {
+              fill-opacity: 0.32;
+            }
+            37% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate3 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            20% {
+              fill-opacity: 0.16;
+            }
+            30% {
+              fill-opacity: 1;
+            }
+            36% {
+              fill-opacity: 0.32;
+            }
+            42% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate4 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            25% {
+              fill-opacity: 0.16;
+            }
+            35% {
+              fill-opacity: 1;
+            }
+            41% {
+              fill-opacity: 0.32;
+            }
+            47% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          .loading-part-1,
+          .loading-part-2,
+          .loading-part-3,
+          .loading-part-4 {
+            animation-duration: 1s;
+            animation-delay: 0s;
+            animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
+            animation-iteration-count: infinite;
+          }
+
+          .loading-part-1 {
+            animation-name: loading-animate1;
+          }
+
+          .loading-part-2 {
+            animation-name: loading-animate2;
+          }
+
+          .loading-part-3 {
+            animation-name: loading-animate3;
+          }
+
+          .loading-part-4 {
+            animation-name: loading-animate4;
+          }
+        ]]>
+      </style>
+    </defs>
+  <g>
+    <path
+      class="loading-part-1"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 32.0001L9.72003 28.209C9.95076 27.9739 10.0803 27.655 10.0803 27.3225V16.2236L6.36035 20.0147C6.12963 20.2498 6 20.5687 6 20.9012V32.0001Z"
+      fill-opacity="0.16"
+      fill="#FFFFFF"
+    />
+    <path
+      class="loading-part-2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3068 26.559L15.0269 22.768C15.2576 22.5329 15.3872 22.214 15.3872 21.8815V2.71126L11.6672 6.50233C11.4364 6.73746 11.3068 7.05636 11.3068 7.38889V26.559Z"
+      fill-opacity="0.16"
+      fill="#FFFFFF"
+    />
+    <path
+      class="loading-part-3"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.6255 29.2742L20.3455 25.4832C20.5762 25.248 20.7059 24.9292 20.7059 24.5966V5.42644L16.9858 9.21751C16.7552 9.4526 16.6255 9.77154 16.6255 10.104V29.2742Z"
+      fill="#FFFFFF"
+      fill-opacity="0.16"
+    />
+    <path
+      class="loading-part-4"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.9196 15.7765L25.6396 11.9854C25.8703 11.7503 26 11.4314 26 11.0989V0L22.2799 3.79107C22.0492 4.02617 21.9196 4.3451 21.9196 4.67759V15.7765Z"
+      fill="#FFFFFF"
+      fill-opacity="0.16"
+    />
+  </g>
+</svg>

package/dist/img/img_status_refresh_ani.d0e59f12.svg

@@ -0,0 +1,158 @@
+<svg
+fill="none"
+width='100%'
+height='100%'
+viewBox="0 0 32 32"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <defs>
+      <style type="text/css">
+        <![CDATA[
+          @keyframes refresh-animate1 {
+            0% {
+              fill-opacity: 1;
+            }
+            16.67% {
+              fill-opacity: 0.16;
+            }
+            50% {
+              fill-opacity: 0.16;
+            }
+            83.33% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 1;
+            }
+          }
+
+          @keyframes refresh-animate2 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            16.67% {
+              fill-opacity: 1;
+            }
+            33.33% {
+              fill-opacity: 0.16;
+            }
+            50% {
+              fill-opacity: 0.16;
+            }
+            66.67% {
+              fill-opacity: 0.16;
+            }
+            83.33% {
+              fill-opacity: 1;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes refresh-animate3 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            16.67% {
+              fill-opacity: 0.16;
+            }
+            33.33% {
+              fill-opacity: 1;
+            }
+            50% {
+              fill-opacity: 0.16;
+            }
+            66.67% {
+              fill-opacity: 1;
+            }
+            83.33% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes refresh-animate4 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            33.33% {
+              fill-opacity: 0.16;
+            }
+            50% {
+              fill-opacity: 1;
+            }
+            66.67% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          .loading-part-1,
+          .loading-part-2,
+          .loading-part-3,
+          .loading-part-4 {
+            animation-duration: 1000ms;
+            animation-delay: 0s;
+            animation-timing-function: ease-out;
+            animation-iteration-count: infinite;
+          }
+
+          .loading-part-1 {
+            animation-name: refresh-animate1;
+          }
+
+          .loading-part-2 {
+            animation-name: refresh-animate2;
+          }
+
+          .loading-part-3 {
+            animation-name: refresh-animate3;
+          }
+
+          .loading-part-4 {
+            animation-name: refresh-animate4;
+          }
+        ]]>
+      </style>
+    </defs>
+  <g>
+    <path
+      class="loading-part-1"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 32.0001L9.72003 28.209C9.95076 27.9739 10.0803 27.655 10.0803 27.3225V16.2236L6.36035 20.0147C6.12963 20.2498 6 20.5687 6 20.9012V32.0001Z"
+      fill-opacity="0.16"
+      fill="#1BC47D"
+    />
+    <path
+      class="loading-part-2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3068 26.559L15.0269 22.768C15.2576 22.5329 15.3872 22.214 15.3872 21.8815V2.71126L11.6672 6.50233C11.4364 6.73746 11.3068 7.05636 11.3068 7.38889V26.559Z"
+      fill-opacity="0.16"
+      fill="#1BC47D"
+    />
+    <path
+      class="loading-part-3"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.6255 29.2742L20.3455 25.4832C20.5762 25.248 20.7059 24.9292 20.7059 24.5966V5.42644L16.9858 9.21751C16.7552 9.4526 16.6255 9.77154 16.6255 10.104V29.2742Z"
+      fill="#1BC47D"
+      fill-opacity="0.16"
+    />
+    <path
+      class="loading-part-4"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.9196 15.7765L25.6396 11.9854C25.8703 11.7503 26 11.4314 26 11.0989V0L22.2799 3.79107C22.0492 4.02617 21.9196 4.3451 21.9196 4.67759V15.7765Z"
+      fill="#1BC47D"
+      fill-opacity="0.16"
+    />
+  </g>
+</svg>

package/dist/token.css

@@ -2211,9 +2211,13 @@ html[theme="dark"]{
 --spacing-popover-primary-padding_left:12;
 --spacing-popover-primary-padding_right:12;
 --spacing-popover-primary-margin_y:4;
+--spacing-popover-primary-padding_top:8;
+--spacing-popover-primary-padding_bottom:8;
 --spacing-popover-secondary-padding_left:8;
 --spacing-popover-secondary-padding_right:8;
 --spacing-popover-secondary-margin_y:4;
+--spacing-popover-secondary-padding_top:4;
+--spacing-popover-secondary-padding_bottom:4;
 --spacing-popover-custom-padding_left:12;
 --spacing-popover-custom-padding_right:12;
 --spacing-popover-custom-margin_y:4;
@@ -2237,9 +2241,13 @@ html{
 --spacing-popover-primary-padding_left:12;
 --spacing-popover-primary-padding_right:12;
 --spacing-popover-primary-margin_y:4;
+--spacing-popover-primary-padding_top:8;
+--spacing-popover-primary-padding_bottom:8;
 --spacing-popover-secondary-padding_left:8;
 --spacing-popover-secondary-padding_right:8;
 --spacing-popover-secondary-margin_y:4;
+--spacing-popover-secondary-padding_top:4;
+--spacing-popover-secondary-padding_bottom:4;
 --spacing-popover-custom-padding_left:12;
 --spacing-popover-custom-padding_right:12;
 --spacing-popover-custom-margin_y:4;