vdesign-ui 0.1.17 → 0.1.19

package/dist/components/tag/index.js

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

package/dist/components/tag/index.vue

@@ -1,50 +0,0 @@
-<template>
-  <!-- {{text}} 改成v-html -->
-  <div class="vd-tag" :class="classes">
-    <slot>{{ text }}</slot>
-  </div>
-</template>
-
-<script>
-const prefixCls = 'vd-tag'
-export default {
-  name: 'vd-tag',
-  props: {
-    text: String,
-    type: {
-      type: String,
-      // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
-      default: ''
-    },
-    size: {
-      type: String,
-    },
-    borders: {
-      type: Boolean,
-    },
-    plain: {
-      type: Boolean,
-    }
-
-  },
-  computed: {
-    classes() {
-      const classes = {
-        [`${prefixCls}--${this.size}`]: this.size,
-        [`${prefixCls}--${this.type}`]: this.type,
-        [`${prefixCls}--${this.type}__border`]: this.borders,
-        [`${prefixCls}--plain`]: this.plain
-      };
-      if (this.borders) {
-        classes['vd-hairline--surround'] = true;
-      }
-      return classes
-
-    },
-  }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/tag/style.less

@@ -1,211 +0,0 @@
-@tag-prefix-cls: vd-tag;
-
-.@{tag-prefix-cls}{
-    display: inline-flex;
-    align-items: center;
-    border-radius: calc(var(--radius-tag-bg) * 1px);
-    padding: 0 calc(var(--spacing-tag-padding_y) * 1px);
-
-    &--small{
-        font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-s-fontWeight);
-        height: calc(var(--height-tag-s) * 1px);
-    }
-
-    &--large{
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-        height: calc(var(--height-tag-m) * 1px);
-    }
-
-
-
-    &--white{
-        color: var(--color-tag-default-text);
-        background-color: var(--color-tag-default-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-tag-default_border-text);
-            &::after{
-                border-color: var(--color-tag-default-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-            }
-        }
-    }
-    
-    &--dark{
-        color: var(--color-tag-dark-text);
-        background-color: var(--color-tag-dark-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-tag-dark_border-text);
-            &::after{
-                border-color: var(--color-tag-dark-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-    }
-
-    &--blue{
-        color: var(--color-tag-blue-text);
-        background-color: var(--color-tag-blue-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-blue-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-    }
-
-    &--cyan{
-        color: var(--color-tag-cyan-text);
-        background-color: var(--color-tag-cyan-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-cyan-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-
-    }
-
-
-    &--green{
-        color: var(--color-tag-green-text);
-        background-color: var(--color-tag-green-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-green-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-
-    }
-
-    &--olive{
-        color: var(--color-tag-olive-text);
-        background-color: var(--color-tag-olive-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-olive-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-
-    }
-
-    
-    &--yellow{
-        color: var(--color-tag-yellow-text);
-        background-color: var(--color-tag-yellow-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-yellow-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-
-    }
-
-    &--orange{
-        color: var(--color-tag-orange-text);
-        background-color: var(--color-tag-orange-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-orange-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-    }
-
-    &--red{
-        color: var(--color-tag-red-text);
-        background-color: var(--color-tag-red-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-red-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-    }
-
-    &--pink{
-        color: var(--color-tag-pink-text);
-        background-color: var(--color-tag-pink-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-pink-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-    }
-
-
-    &--purple{
-        color: var(--color-tag-purple-text);
-        background-color: var(--color-tag-purple-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-purple-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
-
-            }
-        }
-    }
-
-    &--plain {
-        background-color:transparent;
-        padding: 0;
-    }
-}

package/dist/components/title/index.js

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

package/dist/components/title/index.vue

@@ -1,92 +0,0 @@
-<template>
-    <div :class="['vd-title', wrapClasses]" @click="handleClick">
-        <div class="vd-title--left">
-            <div class="vd-title-content">
-                <vd-icon v-if="leftIcon" :name="leftIcon" :svg="leftSvg" :class="leftIconClasses"></vd-icon>
-                <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon" :svg="rightSvg" :class="rightIconClasses"></vd-icon>
-            </div>
-            <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
-        </div>
-        <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
-            <slot name="right">
-                <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
-                <vd-icon v-if="arrow" class="vd-title-arrow" name="ar_icon_nav_back"></vd-icon>
-            </slot>
-        </div>
-    </div>
-</template>
-<script>
-const prefixCls = 'vd-title';
-
-export default {
-    name: 'vd-title',
-    props: {
-        title: String,
-        leftIcon: String,
-        rightIcon: String,
-        arrow: Boolean,
-        subText: String,
-        guideText: String,
-        type: {
-            type: String,
-            default: 'primary'
-        },
-        leftSvg: Boolean,
-        rightSvg: Boolean,
-
-    },
-    data() {
-        return {
-
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return {
-                [`${prefixCls}-${this.type}`]: this.type,
-                [`${prefixCls}-${this.type}-double`]: this.subText,
-            }
-
-        },
-        leftIconClasses() {
-            return {
-                [`${prefixCls}-${this.type}__icon--left`]: this.type
-            }
-
-        },
-        innerTitleClasses() {
-            return {
-                [`${prefixCls}-${this.type}__title`]: this.type
-            }
-
-        },
-        subTextClasses() {
-            return {
-                [`${prefixCls}-${this.type}__subtext`]: this.type
-            }
-        },
-        rightIconClasses() {
-            return {
-                [`${prefixCls}-${this.type}__icon--right`]: this.type
-            }
-        },
-        textRightClasses() {
-            return {
-                [`${prefixCls}-${this.type}__text--right`]: this.type
-            }
-        }
-    },
-    methods: {
-        handleClick() {
-            if (this.arrow) {
-                this.$emit('next');
-            }
-        },
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/title/style.less

@@ -1,188 +0,0 @@
-
-@title-prefix-cls: vd-title;
-
-    .@{title-prefix-cls} {
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-inline-start: calc(var(--spacing-title-padding_left) * 1px);
-        padding-inline-end: calc(var(--spacing-title-padding_right) * 1px);
-        background-color: var(--bg-color-1);
-    
-        // &--left{
-        //     display: flex;
-        //     flex-direction: column;
-        // }
-    
-        &--right{
-            display: flex;
-            align-items: center;
-        }
-    
-        &-content{
-            display: flex;
-            align-items: center;
-        }
-
-        &-inner__title{
-            color: var(--color-title-head);
-        }
-
-        &__subtext{
-            margin-block-start: calc(var(--spacing-title-subtitle-margin_top) * 1px);
-            color: var(--color-title-text);
-        }
-
-        &-arrow{
-            color:var(--color-title-icon_arrow);
-            font-size: calc(var(--icon-title-arrow) * 1px);
-        }
-
-        &-primary{
-
-            height: calc(var(--height-title-primary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-primary) * 1px);  
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-primary) * 1px);   
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-                font-weight: var(--en-single-f-f-b-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-r-fontWeight);
-                color: var(--color-title-text);
-            }
-            &__subtext{
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-r-fontWeight);
-            }
-        }
-
-        &-secondary {
-
-            height: calc(var(--height-title-secondary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-secondary) * 1px);
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-secondary) * 1px);
-                
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-e-s-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-r-fontWeight);
-                color: var(--color-title-text);
-            }
-            &__subtext{
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-            }
-        }
-
-        &-tertiary {
-            height: calc(var(--height-title-tertiary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-tertiary) * 1px);
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-tertiary) * 1px);
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                color: var(--color-title-text);
-            }
-
-            &__subtext{
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontSize);
-            }
-        }
-
-        &-quaternary {
-            height: calc(var(--height-title-quaternary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-quaternary) * 1px);
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-quaternary) * 1px);
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-s-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                color: var(--color-title-text);
-            }
-            &__subtext{
-                font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-a-r-fontSize);
-            }
-        }
-
-        &-label{
-            padding-inline-start: 0;
-            padding-inline-end: 0;
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-
-        &-primary-double {
-            height: calc(var(--height-title-primary_double) * 1px);
-        }
-        &-secondary-double {
-            height: calc(var(--height-title-secondary_double) * 1px);
-        }
-        &-tertiary-double {
-            height: calc(var(--height-title-tertiary_double) * 1px);
-        }
-        &-quaternary-double {
-            height: calc(var(--height-title-quaternary_double) * 1px);
-        }
-    }
-
-
-

package/dist/components/toast/index.js

@@ -1,80 +0,0 @@
-import Vue from 'vue'
-import VdToast from './index.vue'
-let timer = null
-
-/**
- * 使用新类继承 VUE 扩展组件
- */
-class Toast extends Vue.extend(VdToast) {
-  constructor(options) {
-    super()
-    const type = Object.prototype.toString.call(options)
-    /**
-     * 赋值虚拟节点
-     */
-    this.vm = this.$mount()
-    /**
-     * 判断 options 类型
-     */
-    if (type === '[object String]' || type === '[object Number]') {
-      this.message = options
-    } else if (type === '[object Object]') {
-      /**
-       * 循环遍历，设置该类属性
-       */
-      Object.keys(options).forEach(elem => {
-        this[elem] = options[elem]
-      })
-    } else {
-      /**
-       * 抛出错误
-       */
-      throw new Error(`${JSON.stringify(options)} is not Number, String or Object`)
-    }
-    this.init()
-  }
-
-  /**
-   * 初始化方法
-   */
-  init() {
-    /**
-     * 把虚拟 DOM 插入到真实 DOM 树中
-     */
-    document.body.appendChild(this.vm.$el)
-    this.start()
-  }
-
-  /**
-   * 开始此组件
-   */
-  start() {
-    clearTimeout(timer)
-    /**
-     * 在挂载真实 DOM 树后显示过渡效果
-     */
-    timer = setTimeout(() => {
-      this.isShow = true
-      this.end()
-    }, 100)
-  }
-
-  /**
-   * 结束此组件
-   */
-  end() {
-    /**
-     * 关闭过渡效果之后移除真实 DOM 树节点
-     */
-    setTimeout(() => {
-      this.isShow = false
-      setTimeout(() => {
-        document.body.removeChild(this.vm.$el)
-      }, 500)
-    }, this.duration)
-  }
-}
-
-const GetToast = options => new Toast(options)
-
-export default GetToast

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>