vdesign-ui 0.1.20 → 0.1.21

package/dist/components/toast/index.vue

@@ -1,44 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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

@@ -1,208 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-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

@@ -1,224 +0,0 @@
-<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

@@ -1,156 +0,0 @@
-
-@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;
-
-            }
-        }
-    }
-}