vdesign-ui 0.1.21 → 0.1.23

package/dist/components/tag/style.less

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

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

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

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

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

@@ -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>