vdesign-ui 0.1.22 → 0.1.24-beta

package/dist/components/input/index.vue

@@ -11,6 +11,7 @@
         :type="passwordIcon ? (passwordVisible ? 'text' : 'password') : type"
         :class="inputClasses"
         :disabled="disabled"
+        :readonly="readonly"
         :placeholder="placeholder"
         :value="currentValue"
         @input="handleInput"
@@ -28,6 +29,7 @@
         :rows="rows"
         :class="inputClasses"
         :disabled="disabled"
+        :readonly="readonly"
         :placeholder="placeholder"
         :value="currentValue"
         @focus="handleFocus"
@@ -37,12 +39,12 @@
       >
       </textarea>
       <div
-        v-if="suffix || $slots.suffix || append || $slots.append || isWordLimitVisible"
+        v-if="suffix || clearable || $slots.suffix || append || $slots.append || isWordLimitVisible"
         class="vd-input-form__right"
       >
-        <span v-if="suffix || $slots.suffix" class="vd-input-form__suffix">
+        <span v-if="(suffix || $slots.suffix) || showClear" class="vd-input-form__suffix">
           <slot name="suffix">
-            <vd-icon name="icon_btn_clean" @click="handleClear"></vd-icon>
+            <vd-icon name="icon_btn_clean" @mousedown.prevent.native="handleClear"></vd-icon>
           </slot>
         </span>
         <span v-if="append || $slots.append" class="vd-input-form__append">
@@ -64,7 +66,7 @@
         class="vd-input-form__password"
       >
         <span v-if="passwordClose" class="vd-input-form__password--close">
-            <vd-icon name="icon_btn_close" @click="handleClear"></vd-icon>
+            <vd-icon name="icon_btn_close" @mousedown.prevent.native="handleClear"></vd-icon>
         </span>
         <span v-if="passwordIcon" class="vd-input-form__password--password">
             <vd-icon
@@ -82,11 +84,14 @@
         :wrap="wrap"
         :class="inputClasses"
         :disabled="disabled"
+        :readonly="readonly"
         :placeholder="placeholder"
         :value="currentValue"
         :rows="rows"
         :name="name"
         @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
         :style="textareaStyles"
       >
       </textarea>
@@ -144,10 +149,6 @@ export default {
     passwordClose: {
       type: Boolean,
     },
-    passwordType: {
-      type: String,
-      default: "icon_btn_eye_close",
-    },
     form: {
       type: String,
     },
@@ -192,6 +193,8 @@ export default {
       type: Boolean,
       default: false,
     },
+    clearable:Boolean,
+    readonly:Boolean
   },
   data() {
     return {
@@ -200,9 +203,20 @@ export default {
       isOnComposition: false,
       textareaStyles: {},
       passwordVisible: false,
+      focused: false,
     };
   },
   computed: {
+    showClear() {
+      const show = (
+        this.clearable &&
+        this.focused &&
+        this.currentValue !== '' &&
+        !this.disabled &&
+        !this.readonly
+      );
+      return show;
+    },
     wrapClasses() {
       return [
         {
@@ -257,12 +271,18 @@ export default {
   },
   methods: {
     handleFocus(event) {
+      this.focused = true;
       if (this.form) {
         this.focusClass = true;
       }
       this.$emit("focus", event);
+
+      if (this.readonly) {
+        this.blur();
+      }
     },
     handleBlur(event) {
+      this.focused = false;
       if (this.form) {
         this.focusClass = false;
       }
@@ -319,6 +339,9 @@ export default {
       this.setCurrentValue("");
       this.$emit("change", e);
       this.$emit("clear");
+      this.$nextTick(() => {
+        this.focus();
+      });
     },
     handlePasswordVisible() {
       this.passwordVisible = !this.passwordVisible;

package/dist/components/input/style.less

@@ -139,7 +139,6 @@
         &__right {
             display: inline-flex;
             align-items: center;
-
             .@{input-prefix-cls}__word-limit {
                 text-align: end;
                 color: var(--color-input-text-default);

package/dist/components/loading/img_status_loading_white_ani.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/components/loading/img_status_refresh_ani.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/components/loading/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="vd-loading-wrapper">
-
     <div class="vd-loading" v-if="loading">
       <slot>
-        <img src="./loading.png" alt="">
+        <img src="./img_status_loading_white_ani.svg" alt="">
       </slot>
       <span class="vd-loading__text" v-if="text">{{ text }}</span>
     </div>
     <div class="vd-refresh" :class="refreshClasses" v-else>
-      <img src="./refresh.png" alt="">
+      <slot>
+        <img src="./img_status_refresh_ani.svg" alt="">
+      </slot>
     </div>
   </div>
 </template> 

package/dist/components/loading/style.less

@@ -1,6 +1,6 @@
 
 .vd-loading{
-    position: absolute;
+    position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);

package/dist/components/mixins/clickoutside.js

@@ -1,81 +1,81 @@
-import Vue from 'vue';
-import { on } from './dom';
-// 定义一个空数组 nodeList，用于存储绑定了该指令的元素。
-const nodeList = [];
-//定义一个常量 ctx，用于标识特殊属性名。
-const ctx = '@@clickoutsideContext';
-// 定义一个变量 startClick，用于存储点击开始时的事件对象。
-let startClick;
-// 定义一个变量 seed，用作节点标识的种子。
-let seed = 0;
-// 在文档上添加一个 mousedown 事件监听器，用于记录点击开始时的事件对象。
-!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
-// 添加一个 mouseup 事件监听器。当鼠标放开时，
-!Vue.prototype.$isServer && on(document, 'mouseup', e => {
-  // 遍历 nodeList 数组中的每个元素，并执行它们的 documentHandler 函数。
-  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
-});
-// 创建一个处理文档点击事件的函数。
-// 该函数返回一个闭包函数，用于检查点击事件是否发生在绑定的元素外部，并执行相应的回调函数。
-function createDocumentHandler(el, binding, vnode) {
-  return function (mouseup = {}, mousedown = {}) {
-    if (!vnode ||
-      !vnode.context ||
-      !mouseup.target ||
-      !mousedown.target ||
-      el.contains(mouseup.target) ||
-      el.contains(mousedown.target) ||
-      el === mouseup.target ||
-      (vnode.context.popperElm &&
-        (vnode.context.popperElm.contains(mouseup.target) ||
-          vnode.context.popperElm.contains(mousedown.target)))) return;
-
-    if (binding.expression &&
-      el[ctx].methodName &&
-      vnode.context[el[ctx].methodName]) {
-      vnode.context[el[ctx].methodName]();
-    } else {
-      el[ctx].bindingFn && el[ctx].bindingFn();
-    }
-  };
-}
-
-/**
- * v-clickoutside
- * @desc 点击元素外面才会触发的事件
- * @example
- * ```vue
- * <div v-element-clickoutside="handleClose">
- * ```
- */
-export default {
-  // 将元素添加到 nodeList 数组中，并为该元素添加一个包含事件处理函数的特殊属性。
-  bind(el, binding, vnode) {
-    nodeList.push(el);
-    const id = seed++;
-    el[ctx] = {
-      id,
-      documentHandler: createDocumentHandler(el, binding, vnode),
-      methodName: binding.expression,
-      bindingFn: binding.value
-    };
-  },
-  // 当指令所在组件的 VNode 更新时调用，更新元素的事件处理函数和绑定方法。
-  update(el, binding, vnode) {
-    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
-    el[ctx].methodName = binding.expression;
-    el[ctx].bindingFn = binding.value;
-  },
-  // 从 nodeList 中移除对应的元素，并删除特殊属性。
-  unbind(el) {
-    let len = nodeList.length;
-
-    for (let i = 0; i < len; i++) {
-      if (nodeList[i][ctx].id === el[ctx].id) {
-        nodeList.splice(i, 1);
-        break;
-      }
-    }
-    delete el[ctx];
-  }
-};
+import Vue from 'vue';
+import { on } from './dom';
+// 定义一个空数组 nodeList，用于存储绑定了该指令的元素。
+const nodeList = [];
+//定义一个常量 ctx，用于标识特殊属性名。
+const ctx = '@@clickoutsideContext';
+// 定义一个变量 startClick，用于存储点击开始时的事件对象。
+let startClick;
+// 定义一个变量 seed，用作节点标识的种子。
+let seed = 0;
+// 在文档上添加一个 mousedown 事件监听器，用于记录点击开始时的事件对象。
+!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
+// 添加一个 mouseup 事件监听器。当鼠标放开时，
+!Vue.prototype.$isServer && on(document, 'mouseup', e => {
+  // 遍历 nodeList 数组中的每个元素，并执行它们的 documentHandler 函数。
+  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
+});
+// 创建一个处理文档点击事件的函数。
+// 该函数返回一个闭包函数，用于检查点击事件是否发生在绑定的元素外部，并执行相应的回调函数。
+function createDocumentHandler(el, binding, vnode) {
+  return function (mouseup = {}, mousedown = {}) {
+    if (!vnode ||
+      !vnode.context ||
+      !mouseup.target ||
+      !mousedown.target ||
+      el.contains(mouseup.target) ||
+      el.contains(mousedown.target) ||
+      el === mouseup.target ||
+      (vnode.context.popperElm &&
+        (vnode.context.popperElm.contains(mouseup.target) ||
+          vnode.context.popperElm.contains(mousedown.target)))) return;
+
+    if (binding.expression &&
+      el[ctx].methodName &&
+      vnode.context[el[ctx].methodName]) {
+      vnode.context[el[ctx].methodName](mouseup.target);
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn();
+    }
+  };
+}
+
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-element-clickoutside="handleClose">
+ * ```
+ */
+export default {
+  // 将元素添加到 nodeList 数组中，并为该元素添加一个包含事件处理函数的特殊属性。
+  bind(el, binding, vnode) {
+    nodeList.push(el);
+    const id = seed++;
+    el[ctx] = {
+      id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+  // 当指令所在组件的 VNode 更新时调用，更新元素的事件处理函数和绑定方法。
+  update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+  // 从 nodeList 中移除对应的元素，并删除特殊属性。
+  unbind(el) {
+    let len = nodeList.length;
+
+    for (let i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
+  }
+};

package/dist/components/pagebreak/index.vue

@@ -8,7 +8,7 @@
     </template>
 
     <div class="vd-page-break__number" v-else>
-      <span class="vd-page-break__number--active" v-html="number"></span>
+      <span class="vd-page-break__number--active" v-if="number">{{ number }}</span>
       <span class="vd-page-break__number--line">/</span>
       <span class="vd-page-break__number--total">{{ total }}</span>
     </div>
@@ -34,21 +34,27 @@ export default {
     total: {
       type: Number,
       default: 9
+    },
+    activePage: {
+      type: Number,
+      default: 1 // 默认显示第一页
     }
   },
   data() {
     return {
-      currentPage: 1,
+      currentPage: this.activePage // 从外部传入的值初始化,
     }
   },
-  computed: {
-
+  watch: {
+    activePage(newVal) {
+      this.currentPage = newVal; // 外部传入值变化时更新当前页
+    }
   },
   methods: {
     changePage(pageNumber) {
       if (pageNumber >= 1 && pageNumber <= this.totalPages) {
         this.currentPage = pageNumber;
-        this.$emit('page-changed', pageNumber);
+        this.$emit('change', pageNumber);
       }
     },
   },