vdesign-ui 0.1.23 → 0.1.24-beta

package/dist/components/result/index.vue

@@ -2,10 +2,9 @@
     <div class="vd-result">
         <div class="vd-result-img" v-if="currentImg"><img :src="currentImg" alt="img"></div>
         <div class="vd-result-title" v-if="title">{{ title }}</div>
-        <p class="vd-result-txt" v-if="text">{{ text }}</p>
+        <div class="vd-result-txt" v-if="text">{{ text }}</div>
         <div class="vd-result-footer">
             <slot name="btnp"></slot>
-
             <div class="vd-result-footer-btnx" v-if="$slots.btnt">
                 <slot name="btnt"></slot>
             </div>

package/dist/components/selector/index.vue

@@ -1,37 +1,44 @@
 <template>
-  <div class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0" @keyup.enter="handlerClick"
-    @click.stop="handlerClick">
-    <div class="vd-selector__inner">
+  <div v-clickoutside="close" class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0">
+    <div class="vd-selector__inner" @click.stop="handlerClick">
       <div :contenteditable="contenteditable" class="vd-selector__left">
         <vd-icon v-if="icon" :name="icon" svg :class="iconClasses"></vd-icon>
         <div :class="titleClasses">
-          <slot v-if="!isSlotEmpty" name="content"></slot>
-          <template v-else>{{ content }} </template>
+          <slot name="content">
+            {{ content }}
+          </slot>
         </div>
       </div>
       <vd-icon v-if="arrow" :name="arrow" :class="arrowClasses"></vd-icon>
     </div>
-    <slot v-if="showMenu"></slot>
+    <div class="vd-selector--slot">
+      <slot name="dropdown"></slot>
+    </div>
   </div>
 </template>
 
 <script>
+import clickoutside from "../mixins/clickoutside.js";
 const prefixCls = 'vd-selector';
+
 export default {
-  name: "vd-selector",
-  componentName: "vd-selector",
+  name: 'vd-selector',
+  directives: {
+    clickoutside
+  },
   props: {
     icon: {
       type: String,
       default: ''
     },
     arrow: {
-      type: [String, Boolean],
+      type: String,
       default: 'icon_btn_moredown'
     },
     type: {
       type: String,
-      default: ''// form
+      default: '',
+      validator: value => ['', 'form'].includes(value)
     },
     size: {
       type: String,
@@ -39,7 +46,7 @@ export default {
       validator: value => ['s', 'm', 'l', 'xl'].includes(value)
     },
     content: {
-      type: [String, Array],
+      type: String,
       default: ''
     },
     disabled: {
@@ -57,64 +64,90 @@ export default {
     value: {
       type: Boolean,
       default: false
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    value(val) {
+      this.showMenu = val;
     }
   },
   data() {
     return {
-      showMenu: this.value,
-    };
+      showMenu: this.value
+    }
   },
   computed: {
-    isSlotEmpty() {
-      return !this.$slots.content;
-    },
+    // 计算外层容器的样式类
     wrapClasses() {
       return {
         [`${prefixCls}-${this.type}`]: this.type,
         [`${prefixCls}-${this.size}`]: this.size,
         [`${prefixCls}--disabled`]: this.disabled,
         [`${prefixCls}--active`]: this.showMenu || this.active,
-      }
+      };
     },
+    // 计算标题的样式类
     titleClasses() {
       return {
         [`${prefixCls}-${this.type}__title`]: this.type,
         [`${prefixCls}-${this.size}__title`]: this.size,
-      }
+      };
     },
+    // 计算图标的样式类
     iconClasses() {
       return {
         [`${prefixCls}-iconfont`]: true,
         [`${prefixCls}-${this.type}__icon`]: this.type,
         [`${prefixCls}-${this.size}__icon`]: this.size,
-      }
+      };
     },
+    // 计算箭头的样式类
     arrowClasses() {
       return {
         [`${prefixCls}-iconfont`]: true,
         [`${prefixCls}-${this.type}__arrow`]: this.type,
         [`${prefixCls}-${this.size}__arrow`]: this.size,
         [`${prefixCls}__arrow--active`]: this.showMenu && this.arrow === 'icon_btn_moredown',
-      }
+      };
     },
   },
-  watch: {
-    value(val) {
-      this.showMenu = val;
-    }
-  },
   methods: {
+    generateClasses(suffix = '', extra = '') {
+      return {
+        [`${prefixCls}-${this.type}${suffix}`]: this.type,
+        [`${prefixCls}-${this.size}${suffix}`]: this.size,
+        [`${prefixCls}${extra}`]: extra,
+        [`${prefixCls}--disabled`]: this.disabled,
+        [`${prefixCls}--active`]: this.showMenu || this.active,
+        [`${prefixCls}-${this.size}${suffix}--active`]: this.showMenu && this.arrow,
+      };
+    },
     close() {
-      this.showMenu = false
-      this.$emit('close', false)
-      this.$emit('input', false)
+      if (this.showMenu) {
+        // this.showMenu = false;
+        // this.$emit('close');
+        // 传了下拉菜单才执行
+        if (this.$scopedSlots.dropdown) {
+          console.log('has dropdown')
+          this.$emit('input', false);
+        }
+      }
     },
     handlerClick() {
       if (this.disabled) return;
-      this.showMenu = !this.showMenu
-      this.$emit('click', this.showMenu)
-      this.$emit('input', this.showMenu)
+      console.log('showMenu:1:', this.showMenu);
+      // 更新showMenu的值
+      this.showMenu = !this.showMenu;
+      console.log('showMenu:2:', this.showMenu);
+      // 使用$emit来更新v-model绑定的值
+      this.$emit('input', this.showMenu);
+      this.$emit('click');
     }
+
   }
 };
 </script>

package/dist/components/selector/style.less

@@ -298,6 +298,12 @@
     }
   }
 
+  &--slot {
+    position: absolute;
+    top: 100%;
+    display: none;
+  }
+
   &--active {
     .@{selector-prefix-cls}-xl {
 
@@ -372,6 +378,10 @@
         transition: transform .3s;
       }
     }
+
+    .@{selector-prefix-cls}--slot {
+      display: block;
+    }
   }
 
   &--disabled {

package/dist/components/slider/index.vue

@@ -59,15 +59,9 @@ export default {
       type: Number,
       default: 1
     },
-    // disabled: {
-    //     type: Boolean,
-    //     default: false
-    // },
     value: {
       type: Number
     },
-    markLeft:Number,
-    markRight:Number,
 
   },
   data() {

package/dist/components/title/index.vue

@@ -11,7 +11,7 @@
         <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
             <slot name="right">
                 <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
-                <vd-icon v-if="arrow" class="vd-title-arrow" name="ar_icon_nav_back"></vd-icon>
+                <vd-icon v-if="arrow" class="vd-title-arrow" name="icon_btn_next"></vd-icon>
             </slot>
         </div>
     </div>

package/dist/components/upload/index.vue

@@ -15,7 +15,6 @@
 export default {
   name: 'vd-upload',
   inheritAttrs: false,
-
   props: {
     photo: {
       type: String,

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;