vdesign-ui 0.1.19 → 0.1.20

package/dist/components/toast/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- 消息提示 -->
+  <div :class="['vd-toast', { 'vd-toast-show': isShow }, { 'vd-toast-icon': !!icon }, customClass]"
+    :style="`background:${bgColor};`">
+    <i v-if="!!icon" class="vd-iconfont" :class="`vd-icon-${icon}`"></i>
+    <div>{{ message }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'vd-toast',
+  data() {
+    return {
+      message: '', // 提示语
+      isShow: false, // 是否显示
+      bgColor: '', // 背景颜色
+      icon: '', // 图标
+      duration: 1500, // 延迟时间
+      position: 'middle' // default:middle, value: top, bottom
+    }
+  },
+  computed: {
+    customClass() {
+      var classes = [];
+      switch (this.position) {
+        case 'top':
+          classes.push('vd-toast__top');
+          break;
+        case 'bottom':
+          classes.push('vd-toast__bottom');
+          break;
+        default:
+          classes.push('vd-toast__middle');
+      }
+      classes.push(this.className);
+
+      return classes.join(' ');
+    }
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/toast/style.less

@@ -0,0 +1,55 @@
+@prefix: ~"vd-toast";
+
+.@{prefix} {
+  display: inline-block;
+  width: max-content;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  text-align: center;
+  z-index: 1000;
+  transition: opacity .3s linear;
+  opacity: 0;
+  // token
+  min-width: calc(var(--width-toast-small)* 1px);
+  max-width: calc(var(--width-toast-large)* 1px);
+  padding: calc(var(--spacing-toast-padding_x) * 1px) calc(var(--spacing-toast-padding_y) * 1px);
+  background-color: var(--color-toast-bg);
+  border-radius: calc(var(--radius-toast-content) * 1px);
+  color: var(--color-toast-text);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+
+  &.vd-toast-show {
+    opacity: 1;
+  }
+
+  &-icon {
+    min-height: calc(var(--height-toast-small) * 1px);
+
+    .vd-iconfont {
+      font-size: calc(var(--icon-toast-size) * 1px);
+      margin-bottom: calc(var(--spacing-toast-icon-margin_bottom) * 1px);
+    }
+  }
+
+  &__top {
+    top: 50px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  &__middle {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &__bottom {
+    bottom: 50px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+}

package/dist/components/transition/index.js

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

package/dist/components/transition/index.vue

@@ -0,0 +1,13 @@
+<script>
+  export default {
+    name: 'transition',
+    functional: true,
+    render(h, context) {
+      return h('transition', context.data, context.children)
+    },
+  }
+</script>
+
+<style lang="less">
+@import"./style.less";
+</style>

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,224 @@
+<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('on-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;
+
+            }
+        }
+    }
+}