vdesign-ui 0.1.21 → 0.1.23

package/dist/components/transition/style.less

@@ -0,0 +1,208 @@
+.bounce-enter-active {
+  animation: bounce-in 300ms linear;
+}
+
+.bounce-leave-active {
+  animation: zoom-out 250ms linear;
+}
+
+.zoom-enter,
+.zoom-leave-to {
+  opacity: 0.01;
+  transform: scale(0.75);
+}
+
+.zoom-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.zoom-leave-active {
+  transition: all 250ms linear;
+}
+
+.punch-enter,
+.punch-leave-to {
+  opacity: 0.01;
+  transform: scale(1.35);
+}
+
+.punch-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.punch-leave-active {
+  transition: all 250ms linear;
+}
+
+.slide-up-enter,
+.slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.slide-up-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-up-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-right-enter,
+.slide-right-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.slide-right-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-right-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-left-enter,
+.slide-left-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+
+.slide-left-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-left-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-down-enter,
+.slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.slide-down-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-down-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0.01;
+}
+
+.fade-enter-active {
+  transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-leave-active {
+  transition: opacity 250ms linear;
+}
+
+.fade-up-enter,
+.fade-up-leave-to {
+  opacity: 0.01;
+  transform: translate3d(0, 20%, 0);
+}
+
+.fade-up-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-up-leave-active {
+  transition: all 250ms linear;
+}
+
+.fade-down-enter,
+.fade-down-leave-to {
+  opacity: 0.01;
+  transform: translate3d(0, -20%, 0);
+}
+
+.fade-down-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-down-leave-active {
+  transition: all 250ms linear;
+}
+
+.fade-right-enter,
+.fade-right-leave-to {
+  opacity: 0.01;
+  transform: translate3d(-20%, 0, 0);
+}
+
+.fade-right-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-right-leave-active {
+  transition: all 250ms linear;
+}
+
+.fade-left-enter,
+.fade-left-leave-to {
+  opacity: 0.01;
+  transform: translate3d(20%, 0, 0);
+}
+
+.fade-left-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-left-leave-active {
+  transition: all 250ms linear;
+}
+
+.fly-enter-active {
+  animation: fly-in 600ms;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fly-leave-active {
+  animation: zoom-out 250ms;
+}
+
+
+@keyframes fly-in {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5) translate3d(0, 50px, 0);
+  }
+
+  45% {
+    opacity: 1;
+    transform: scale(1.05) translate3d(0, -50px, 0);
+  }
+
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0.5);
+  }
+
+  45% {
+    transform: scale(1.05);
+  }
+
+  80% {
+    transform: scale(0.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  to {
+    opacity: 0.01;
+    transform: scale(0.75);
+  }
+}

package/dist/components/upload/index.js

@@ -0,0 +1,7 @@
+import Upload from './index.vue';
+import './style.less';
+Upload.install = function(Vue) {
+    Vue.component(Upload.name, Upload)
+}
+
+export default Upload;

package/dist/components/upload/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <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="photo" class="vd-upload__icon"></vd-icon>
+        <p class="vd-upload__text" v-if="text">{{ text }}</p>
+        <input type="file" ref="input" class="vd-upload__input" :accept="accept" @change="onChange"
+          :disabled="disabled">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vd-upload',
+  inheritAttrs: false,
+
+  props: {
+    photo: {
+      type: String,
+      default: 'icon_btn_photo'
+    },
+    text: String,
+    block: Boolean,
+    disabled: Boolean,
+    beforeRead: Function,
+    afterRead: Function,
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
+    maxSize: {
+      type: Number,
+      default: Number.MAX_VALUE
+    }
+  },
+
+  methods: {
+    onChange(event) {
+      let { files } = event.target;
+      if (this.disabled || !files.length) {
+        return;
+      }
+
+      files = files.length === 1 ? files[0] : [].slice.call(files, 0);
+      if (!files || (this.beforeRead && !this.beforeRead(files))) {
+        return;
+      }
+
+      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;
+            }
+
+            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
+          );
+        });
+      }
+    },
+
+    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>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/upload/index1.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="vd-upload" :class="{ 'vd-upload--block': (block && listData.length === 0) }">
+    <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>
+        <p class="vd-upload__text" v-if="text">{{ text }}</p>
+        <input type="file" class="vd-upload__input" accept="image/*,.pdf" :multiple="multiple" @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'
+  },
+  props: {
+    uploaded: {
+      type: Boolean,
+      default: false
+    },
+    preview: {
+      type: Boolean,
+      default: true
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      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
+    },
+    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
+    }
+  },
+  methods: {
+    fileCls(file) {
+      if (file === 'application/pdf') {
+        return [`${prefixCls}__preview--pdf`];
+      } else {
+        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('change', listData)
+      }
+    },
+    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)
+
+            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
+      }
+    },
+    closePreview() {
+      this.isPreview = false
+    },
+  }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/upload/style.less

@@ -0,0 +1,156 @@
+
+@upload-prefix-cls: vd-upload;
+
+.@{upload-prefix-cls}{ 
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    overflow-x: auto;
+    
+    &--block{
+        display: flex;
+        width: 100%;
+        .@{upload-prefix-cls}{
+            &__wrapper{
+                width: 100%;
+            }
+            &__uploader{
+                width: 100%;
+            }
+        }
+
+    }
+
+    &__wrapper{
+        display: flex;
+        gap: 12px;
+    }
+
+    &__uploader{
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: calc(var(--height-upload-bg) * 1px);
+        min-width: calc(var(--width-upload-small) * 1px);
+        background-color: var(--color-upload-bg);
+        border-radius: calc( var(--radius-upload-content) * 1px);
+
+        &--text{
+            padding-block-start: calc(var(--spacing-upload-padding_top) * 1px);
+            padding-block-end: calc(var(--spacing-upload-padding_bottom) * 1px);
+        }
+
+    } 
+
+    &__preview{
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--width-upload-small) * 1px);
+        border-radius: calc( var(--radius-upload-content) * 1px);
+
+        &--pdf{
+            background-color: var(--color-upload-pdf-bg);
+        }
+
+        &-delete{
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0  calc(var(--radius-upload-content) * 1px);
+            background-color: var(--color-upload-close_bg);
+            &-icon{      
+                font-size: calc(var(--icon-upload-close) * 1px);
+                color: #ffffff;
+            }
+        }
+        &-word{
+            color: var(--color-upload-pdf-text);
+            font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
+            font-weight: var(--en-single-f-f-b-fontWeight);
+        }
+
+        &-img{
+
+            img{
+                object-fit: cover;
+                width: calc(var(--height-upload-bg) * 1px);
+                height: calc(var(--height-upload-bg) * 1px);
+                border-radius: calc( var(--radius-upload-content) * 1px);
+            }
+        }
+    }
+
+
+
+    &__icon{
+        font-size: calc(var(--icon-upload-size) * 1px);
+        color: var(--color-upload-icon);
+    }
+
+    &__text{
+        margin-block-start: calc(var(--spacing-upload-text-margin_top) * 1px);
+        color: var(--color-upload-text);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+    }
+
+    &__input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        cursor: pointer;
+        opacity: 0;
+    }
+}
+
+.vd-image-preview{
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2001;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-dialog-mask_bg);
+    background: rgba(0,0,0,.8);
+
+    &__item{
+        flex-grow: 1;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+            img{
+                display: block;
+                object-fit: contain;
+            }
+        }
+    }
+
+
+    
+[lang='ar'] {
+    .@{upload-prefix-cls}{ 
+        &__preview{
+            &-delete{
+                left: 0;
+                right: auto;
+                border-radius: calc(var(--radius-upload-content) * 1px) 0;
+
+            }
+        }
+    }
+}

package/dist/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vdesign-ui demo</title>
+<script src="./vdesign-ui.umd.js"></script>
+
+<link rel="stylesheet" href="./vdesign-ui.css">
+
+
+<script>
+console.log(vdesign-ui)
+</script>