vdesign-ui 0.1.22 → 0.1.24-beta

package/dist/components/upload/index.vue

@@ -1,220 +1,98 @@
 <template>
-  <div class="vd-upload" :class="{ 'vd-upload--block': (block && listData.length === 0) }">
+  <div class="vd-upload" :class="{ 'vd-upload--block': block }">
     <div class="vd-upload__wrapper">
       <div class="vd-upload__uploader" :class="{ 'vd-upload__uploader--text': text }">
-        <vd-icon name="icon_btn_photo" class="vd-upload__icon"></vd-icon>
+        <vd-icon :name="photo" class="vd-upload__icon"></vd-icon>
         <p class="vd-upload__text" v-if="text">{{ text }}</p>
-        <input type="file" class="vd-upload__input" accept="image/*,.pdf" :multiple="multiple" @change="onChange"
+        <input type="file" ref="input" class="vd-upload__input" :accept="accept" @change="onChange"
           :disabled="disabled">
       </div>
-      <div class="vd-upload__preview" v-for="item in listData" :key="item.id" :class="fileCls(item.type)">
-        <div class="vd-upload__preview-img" v-if="item.type.startsWith('image')" @click="onPreview(item)">
-          <img :src="item.url" />
-        </div>
-        <div class="vd-upload__preview-word" v-if="item.type === 'application/pdf'">PDF</div>
-        <div class="vd-upload__preview-delete" @click="onDelete($event, item)" v-if="deletable">
-          <vd-icon name="icon_btn_close" class="vd-upload__preview-delete-icon"></vd-icon>
-        </div>
-      </div>
-    </div>
-    <div class="vd-image-preview" v-if="isPreview" @click="closePreview">
-      <div class="vd-image-preview__item" v-for="item in listData" :key="item.id" v-show="curNum === item.id"><img
-          :src="item.url" /></div>
     </div>
   </div>
 </template>
 
 <script>
-const prefixCls = 'vd-upload';
 export default {
   name: 'vd-upload',
-  model: {
-    prop: 'fileList'
-  },
+  inheritAttrs: false,
   props: {
-    uploaded: {
-      type: Boolean,
-      default: false
-    },
-    preview: {
-      type: Boolean,
-      default: true
-    },
-    block: {
-      type: Boolean,
-      default: false
-    },
-    text: {
+    photo: {
       type: String,
-      default: ''
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    deletable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 文件读取前钩子函数
-     */
-    beforeRead: {
-      type: Function,
-      default: () => () => true
-    },
-    /**
-     * 文件读取完钩子函数
-     */
-    afterRead: {
-      type: Function,
-      default: () => () => true
-    },
-    /**
-     * 文件删除前钩子函数
-     */
-    beforeDelete: {
-      type: Function,
-      default: () => () => true
-    },
-    maxCount: {
-      type: Number,
-      default: 1000
+      default: 'icon_btn_photo'
+    },
+    text: String,
+    block: Boolean,
+    disabled: Boolean,
+    beforeRead: Function,
+    afterRead: Function,
+    accept: {
+      type: String,
+      default: 'image/*'
     },
     maxSize: {
       type: Number,
-      default: 6 * 1024 * 1024
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      listData: this.fileList,
-      curNum: 1,
-      isPreview: false
-    }
-  },
-  watch: {
-    /**
-     * 监听列表数据
-     */
-    fileList: {
-      handler(value) {
-        this.listData = value
-      },
-      deep: true
+      default: Number.MAX_VALUE
     }
   },
+
   methods: {
-    fileCls(file) {
-      if (file === 'application/pdf') {
-        return [`${prefixCls}__preview--pdf`];
-      } else {
-        return [];
+    onChange(event) {
+      let { files } = event.target;
+      if (this.disabled || !files.length) {
+        return;
       }
-    },
-    onDelete(e, item) {
-      e.stopPropagation()
-      const { disabled, beforeDelete, listData } = this
-      /**
-       * 判断是否允许删除文件
-       */
-      if (!disabled && beforeDelete(item) !== false) {
-        /**
-         * 索引
-         */
-        let i = 0
-        /**
-         * 循环遍历数组定位下标位置
-         */
-        for (; i < listData.length; i++) {
-          /**
-           * 判断 id 是否相等
-           */
-          if (listData[i].id === item.id) break
-        }
-        /**
-         * 删除
-         */
-        listData.splice(i, 1)
-        this.$emit('input', listData)
-        this.$emit('on-change', listData)
+
+      files = files.length === 1 ? files[0] : [].slice.call(files, 0);
+      if (!files || (this.beforeRead && !this.beforeRead(files))) {
+        return;
       }
-    },
-    onChange(e) {
-      const { beforeRead, afterRead, maxSize, maxCount, listData } = this
-      /**
-       * 获取不超过 maxCount 文件
-       */
-      const files = Object.values(e.target.files).slice(0, maxCount)
 
-      /**
-       * 判断是否允许读取文件
-       */
-      if (beforeRead(files) !== false) {
-        /**
-         * 循环遍历添加数据
-         */
-        const arr = []
-        files.forEach(elem => {
-          /**
-           * 判断大小是否小于或等于 maxSize
-           */
-          if (elem.size <= maxSize) {
-            /**
-             * 数组长度
-             */
-            const len = listData.length
-            /**
-             * 获取 id
-             */
-            const id = len === 0 ? 1 : listData[len - 1].id + 1
-            /**
-             * 创建 blob 预览图片地址
-             */
-            const url = window.URL.createObjectURL(elem)
+      if (Array.isArray(files)) {
+        Promise.all(files.map(this.readFile)).then(contents => {
+          let oversize = false;
+          const payload = files.map((file, index) => {
+            if (file.size > this.maxSize) {
+              oversize = true;
+            }
 
-            const type = e.target.files[0].type;
-            /**
-             * 添加进数组
-             */
-            listData.push({ id, url, type })
-            arr.push(elem)
-          }
-        })
-        /**
-         * 符合规则的图片数组
-         */
-        if (arr.length > 0) {
-          afterRead(arr)
-          this.$emit('change', listData)
-          this.$emit('num-changed', this.curNum);
-        }
-      }
-    },
-    onPreview({ id }) {
-      const { disabled, preview } = this
-      /**
-       * 判断是否允许预览
-       */
-      if (!disabled && preview) {
-        this.curNum = id
-        /**
-         * 打开图片预览
-         */
-        this.isPreview = true
+            return {
+              file: files[index],
+              content: contents[index]
+            };
+          });
+
+          this.onAfterRead(payload, oversize);
+        });
+      } else {
+        this.readFile(files).then(content => {
+          this.onAfterRead(
+            { file: files, content },
+            files.size > this.maxSize
+          );
+        });
       }
     },
-    closePreview() {
-      this.isPreview = false
+
+    readFile(file) {
+      return new Promise(resolve => {
+        const reader = new FileReader();
+
+        reader.onload = event => {
+          resolve(event.target.result);
+        };
+        reader.readAsDataURL(file);
+
+      });
     },
+
+    onAfterRead(files, oversize) {
+      if (oversize) {
+        this.$emit('oversize', files);
+      } else {
+        this.afterRead && this.afterRead(files);
+        this.$refs.input && (this.$refs.input.value = '');
+      }
+    }
   }
 }
 </script>

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

@@ -903,9 +903,9 @@ html{
 }
 
 html[theme="dark"]{
---divider-small:0.5;
 --divider-medium:1;
 --divider-large:3;
+--divider-small:0.5;
 --height-super-small:28;
 --height-extra-small:32;
 --height-small:36;
@@ -1382,9 +1382,9 @@ html[theme="dark"]{
 --color-trade-account_head_card_ar-bg:#09825a;
 }
 html{
---divider-small:0.5;
 --divider-medium:1;
 --divider-large:3;
+--divider-small:0.5;
 --height-super-small:28;
 --height-extra-small:32;
 --height-small:36;
@@ -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;