vdesign-ui 0.1.11 → 0.1.13

package/dist/components/activityviews/index.vue

@@ -5,7 +5,7 @@
         <div class="vd-activityviews">
             <div class="vd-activityviews__header" v-if="withHeader">
                 <div class="vd-activityviews__wrapper">
-                    <vd-icon v-if="backDefault" :name="backDefault"></vd-icon>
+                    <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
                     <div v-if="title" class="vd-activityviews__title">{{ title }}</div>
                     <slot name="close">
                         <vd-icon v-if="closeIcon" class="vd-activityviews__close" name="icon_btn_dialogclose" svg
@@ -45,10 +45,7 @@ export default {
     props: {
         value: Boolean,
         title: String,
-        backDefault: {
-            type: String,
-            default: "icon_nav_back"
-        },
+        backDefault:Boolean,
         closeIcon: Boolean,
         closeBtn: String,
         description: String,

package/dist/components/dialog/index.vue

@@ -9,10 +9,11 @@
                 <div class="vd-dialog__title">{{ title }}</div>
             </header>
             <div class="vd-dialog__content">
-                <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }" v-if="message">{{
+                <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }" v-if="message || $slots.content">
+                    <slot name="content">{{
                     message
-                    }}</div>
-                <slot name="content"></slot>
+                    }}</slot>
+                </div>
             </div>
             <footer class="vd-dialog__footer">
                 <div class="vd-dialog__btns" v-if="btns">

package/dist/components/empty/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="vd-empty" :class="wrapClasses">
         <div class="vd-empty-img"><img :src="currentImg" alt="img"></div>
-        <p class="vd-empty-txt" :class="textClasses" v-if="text">{{ text }}</p>
+        <p class="vd-empty-txt" :class="textClasses" v-if="description">{{ description }}</p>
         <div class="vd-empty-footer" :class="footerClasses" v-if="$slots.btn">
             <slot name="btn"></slot>
         </div>
@@ -15,7 +15,7 @@ export default {
     name: 'vd-empty',
     props: {
         imgs: String,
-        text: String,
+        description: String,
         size: String,
         type: {
             type: String,

package/dist/components/input/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="wrapClasses" class="vd-input">
     <template v-if="inputTextArea || type !== 'textarea'">
-      <span v-if="prefix || $slots.prefix" class="vd-input-form__prefix vd-hairline--right">
+      <span v-if="prefix || $slots.prefix" class="vd-input-form__prefix" :class="borderRightClasses">
         <slot name="prefix">{{ prefix }}</slot>
       </span>
       <input
@@ -116,17 +116,18 @@ export default {
       default: "text",
     },
     prefix: {
-      type: [Boolean, String],
-      default: false,
+      type: Boolean,
+    },
+    borderRight: {
+      type: Boolean,
+      default: true
     },
     suffix: {
-      type: [Boolean, String],
-      default: false,
+      type: Boolean,
     },
     // 设计如此,单独的文字
     append: {
-      type: [Boolean, String],
-      default: false,
+      type: Boolean,
     },
     placeholder: {
       type: String,
@@ -218,6 +219,14 @@ export default {
         },
       ];
     },
+    borderRightClasses(){
+      return [
+        "vd-hairline--right",
+        {
+          [`${prefixCls}--border`]: this.borderRight,
+        }
+      ]
+    },
     inputClasses() {
       return [
         `${prefixCls}__control`,

package/dist/components/input/search/index.vue

@@ -6,13 +6,13 @@
                     <vd-icon name="icon_nav_search"></vd-icon>
                 </slot>
             </span>
-            <input :type="type" :class="inputClasses" :placeholder="placeholder">
-            <!-- <vd-input
-                type="text"
-                form="form"
-                placeholder="请输出文字"
-                v-model="input"
-            ></vd-input> -->
+            <!-- <input :type="type" :class="inputClasses" :placeholder="placeholder"> -->
+            <vd-input
+                v-bind="$attrs"
+                v-on="listeners"
+                form="search"
+                :hairline = "false"
+            ></vd-input>
             <span v-if="suffix || $slots.suffix" class="vd-search__suffix">
                 <slot name="suffix">
                     <vd-icon v-if="suffix" name="icon_btn_clean"></vd-icon>
@@ -30,6 +30,7 @@
 const prefixCls = 'vd-search';
 export default {
     name: 'vd-search',
+    inheritAttrs: false,
     props: {
         type: {
             type: String,
@@ -41,10 +42,6 @@ export default {
         suffix: {
             type: Boolean,
         },
-        placeholder: {
-            type: String,
-            default: ''
-        },
     },
     data() {
         return {
@@ -56,6 +53,11 @@ export default {
                 `${prefixCls}__control`
             ]
         },
+        listeners() {
+            return {
+                ...this.$listeners,
+            };
+        }
     },
     methods: {
 

package/dist/components/input/style.less

@@ -11,6 +11,10 @@
         border: 0;
         text-decoration: none;
     }
+
+    &--border{
+        margin-inline-end: calc(var(--spacing-input-form_divider-margin_y)* 1px);
+    }
     &__control {
         flex: 1;
         width: 100%;
@@ -18,10 +22,11 @@
         margin: 0;
         padding: 0;
         background-color: transparent;
-        caret-color: var(--color-input-cursor);
         color: var(--color-input-text-active);
         font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
         font-weight: var(--en-single-f-d-s-fontWeight);
+        caret-color: var(--color-input-cursor);
+
     }
 
     &--active {
@@ -126,7 +131,7 @@
             color: var(--color-input-text-active);
             font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
             font-weight: var(--en-single-f-d-s-fontWeight);
-            margin-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
+            // margin-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
             padding-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
         }
 
@@ -224,13 +229,22 @@
         border: 0;
         text-decoration: none;
     }
-    height: calc(var(--height-input-search_content) * 1px);
+    flex: 1;
     display: flex;
     align-items: center;
+    height: calc(var(--height-input-search_content) * 1px);
     padding-inline-start: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
     padding-inline-end: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
 
 
+    .@{input-prefix-cls} {    
+            &-search{
+            padding-inline-end: 0;
+            flex: 1;
+        }
+    }
+
+
     &-content {
         flex: 1;
         display: flex;
@@ -244,12 +258,12 @@
 
             &__control {
                 width: 100%;
-                caret-color: var(--color-input-cursor);
                 background-color: transparent;
                 height: calc(var(--height-input-search_bg) * 1px);
                 color: var(--color-input-text-active);
                 font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
                 font-weight: var(--en-single-f-d-s-fontWeight);
+                caret-color: var(--color-input-cursor);
 
 
                 &::-webkit-input-placeholder {
@@ -311,13 +325,13 @@
     &-input {
         width: 100%;
         padding: 0;
-        caret-color: var(--color-input-cursor);
         background-color: transparent;
         color: var(--color-input-text-active);
         font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
         font-weight: var(--en-single-f-d-s-fontWeight);
         // margin-inline-start: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
         margin-inline-end: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
+        caret-color: var(--color-input-cursor);
 
         &::-webkit-input-placeholder {
             color: var(--color-input-text-default);

package/dist/components/skeleton/index.vue

@@ -1,55 +1,60 @@
 <template>
   <div class="vd-skeleton" :class="{ 'vd-skeleton--animate': animate }">
-    <div class="vd-skeleton__img" v-if="img"></div>
-    <div class="vd-skeleton__title" :class="titleClasses" v-if="title"></div>
-    <div class="vd-skeleton__button" v-if="button"></div>
-    <div class="vd-skeleton__img--s" v-if="sImg"></div>
-    <div class="vd-skeleton__avatar" :class="avatarClasses" v-if="avatar"></div>
-    <div v-if="paragraph || text" class="vd-skeleton__content">
-      <div class="vd-skeleton__text" v-if="text"></div>
-      <template v-if="paragraph">
-        <div class="vd-skeleton__paragraph" v-for="item in rows" :key="item" :class="{
-          'is-last': item === rows && rows > 1,
-        }">
-        </div>
-      </template>
-    </div>
-    <div class="vd-skeleton__stock" v-if="stock">
-      <div class="vd-skeleton__stock--left">
-        <span class="vd-skeleton__stock--data"></span>
-        <span class="vd-skeleton__stock--subdatax"></span>
+    <template v-if="loading">  
+      <div class="vd-skeleton__img" v-if="img"></div>
+      <div class="vd-skeleton__title" :class="titleClasses" v-if="title"></div>
+      <div class="vd-skeleton__button" v-if="button"></div>
+      <div class="vd-skeleton__img--s" v-if="sImg"></div>
+      <div class="vd-skeleton__avatar" :class="avatarClasses" v-if="avatar"></div>
+      <div v-if="paragraph || text" class="vd-skeleton__content">
+        <div class="vd-skeleton__text" v-if="text"></div>
+        <template v-if="paragraph">
+          <div class="vd-skeleton__paragraph" v-for="item in rows" :key="item" :class="{
+            'is-last': item === rows && rows > 1,
+          }">
+          </div>
+        </template>
       </div>
-      <div class="vd-skeleton--space">
-        <div class="vd-skeleton__stock--center"></div>
-        <div class="vd-skeleton__stock--right spacing">
-          <span class="vd-skeleton__stock--title"></span>
-          <span class="vd-skeleton__stock--text"></span>
+      <div class="vd-skeleton__stock" v-if="stock">
+        <div class="vd-skeleton__stock--left">
+          <span class="vd-skeleton__stock--data"></span>
+          <span class="vd-skeleton__stock--subdatax"></span>
         </div>
-      </div>
-    </div>
-    <div class="vd-skeleton__stock" v-if="data">
-      <div class="vd-skeleton__stock--left">
-        <span class="vd-skeleton__stock--data"></span>
-        <span class="vd-skeleton__stock--subdatal"></span>
-      </div>
-      <div class="vd-skeleton--space">
-        <div class="vd-skeleton__stock--right">
-          <span class="vd-skeleton__stock--title"></span>
-          <span class="vd-skeleton__stock--text"></span>
+        <div class="vd-skeleton--space">
+          <div class="vd-skeleton__stock--center"></div>
+          <div class="vd-skeleton__stock--right spacing">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
         </div>
-        <div class="vd-skeleton__stock--right">
-          <span class="vd-skeleton__stock--title"></span>
-          <span class="vd-skeleton__stock--text"></span>
+      </div>
+      <div class="vd-skeleton__stock" v-if="data">
+        <div class="vd-skeleton__stock--left">
+          <span class="vd-skeleton__stock--data"></span>
+          <span class="vd-skeleton__stock--subdatal"></span>
         </div>
-        <div class="vd-skeleton__stock--right">
-          <span class="vd-skeleton__stock--title"></span>
-          <span class="vd-skeleton__stock--text"></span>
+        <div class="vd-skeleton--space">
+          <div class="vd-skeleton__stock--right">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
+          <div class="vd-skeleton__stock--right">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
+          <div class="vd-skeleton__stock--right">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="vd-skeleton__equally" v-if="equally">
-      <div class="vd-skeleton__img" v-for="item in equallys" :key="item" :style="{ height: height + 'px' }"></div>
-    </div>
+      <div class="vd-skeleton__equally" v-if="equally">
+        <div class="vd-skeleton__img" v-for="item in equallys" :key="item" :style="{ height: height + 'px' }"></div>
+      </div>
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
   </div>
 </template>
 
@@ -110,8 +115,11 @@ export default {
     avatarSize: {
       type: String,
       default: 's'
-
-    }
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
   },
   computed: {
     titleClasses() {

package/dist/components/tabs/index.vue

@@ -24,7 +24,7 @@ const prefixCls = "vd-tabs";
 export default {
   name: "vd-tabs",
   props: {
-    value: [String, Number, Boolean],
+    value: [String, Number],
     tabsType: {
       type: String,
       default: "primary",
@@ -102,36 +102,24 @@ export default {
       this.$emit('menu-click');
     },
     tabClasses(item) {
-      let active = "";
-      const tabsType = this.tabsType;
-      const tabsBaseClass = `${prefixCls}-${tabsType}`;
-
-      if (item.name === this.currentValue) {
-        active = `${prefixCls}-${tabsType}-active`;
-      }
-
-      return [tabsBaseClass, active];
+      return {
+        [`${prefixCls}-${this.tabsType}`]: true,
+        [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue
+      };
     },
     getTabs() {
       return this.$children.filter((item) => item.$options.name === "vd-tab");
     },
+
     updateNav() {
-      this.navList = [];
-      this.getTabs().forEach((pane, index) => {
-        this.navList.push({
-          title: pane.title,
-          name: pane.name || index,
-          arrow: pane.arrow,
-        });
-        if (!pane.name) {
-          pane.name = index;
-        }
-        if (index == 0) {
-          if (!this.currentValue) {
-            this.currentValue = pane.name || index;
-          }
-        }
-      });
+      this.navList = this.getTabs().map((pane, index) => ({
+        title: pane.title,
+        name: pane.name || index,
+        arrow: pane.arrow
+      }));
+      if (!this.currentValue) {
+        this.currentValue = this.navList[0].name;
+      }
       this.updateStatus();
     },
     updateStatus() {
@@ -152,19 +140,7 @@ export default {
           name: name
         };
         this.$emit('change', eventData);
-
-        const container = this.$refs.tabsContainer;
-        const selectedTab = container.children[index];
-        if (selectedTab) {
-          const containerWidth = container.offsetWidth;
-          const tabWidth = selectedTab.offsetWidth;
-          const tabOffsetLeft = selectedTab.offsetLeft;
-          const scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
-          container.scrollTo({
-            left: scrollLeft,
-            behavior: "smooth",
-          });
-        }
+        this.adjustTabPosition(index);
       }
       const eventData = {
         index: index,
@@ -173,6 +149,17 @@ export default {
       };
       this.$emit("click", eventData);
     },
+    adjustTabPosition(index) {
+      const container = this.$refs.tabsContainer;
+      const selectedTab = container.children[index];
+      if (selectedTab) {
+        const containerWidth = container.offsetWidth;
+        const tabWidth = selectedTab.offsetWidth;
+        const tabOffsetLeft = selectedTab.offsetLeft;
+        const scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
+        container.scrollTo({ left: scrollLeft, behavior: "smooth" });
+      }
+    },
   },
   mounted() {
     // 在组件挂载后更新标签

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

@@ -1,5 +1,5 @@
 <template>
-    <div :class="getCls()">
+    <div :class="getCls">
       <slot />
     </div>
   </template>
@@ -29,21 +29,21 @@
                 this.updateNav()
             }
         },
+        computed: {
+            getCls() {
+                return [
+                    'vd-tab',
+                    {'vd-tab-active': this.show}
+                ];
+            }
+        },
         mounted () {
             this.updateNav()
         },
         methods: {
-        updateNav () {
-            this.$parent.updateNav()
-        },
-        getCls () {
-            return [
-            'vd-tab',
-                {
-                    'vd-tab-active': this.show
-                }
-            ]
-        }
+            updateNav () {
+                this.$parent.updateNav()
+            },
         }
     }
   </script>

package/dist/locale/ar.js

@@ -56,7 +56,7 @@ export default {
       text: "فاتورة غير مدفوعة"
     },
     empty: {
-      text: "لايوجد بيانات"
+      description: "لايوجد بيانات"
     },
     result: {
       text: "يستخدم هذا النوع بشكل أساسي في النوافذ المنبثقة الأساسية للتنبيه",

package/dist/locale/en.js

@@ -56,7 +56,7 @@ export default {
       text: "tab"
     },
     empty: {
-      text: "no data"
+      description: "no data"
     },
     result: {
       text: "This is a type mainly used for basic alert pop-ups.",

package/dist/locale/zh.js

@@ -56,7 +56,7 @@ export default {
       text: "选项卡"
     },
     empty: {
-      text: "无数据"
+      description: "无数据"
     },
     result: {
       text: "这是一种主要用于基本警报弹出窗口的类型",