vdesign-ui 0.2.4 → 0.2.6

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: var(--radius-tag-bg);
-    padding: 0 var(--spacing-tag-padding_y);
-    
-    &--s {
-      font-size: var(--en-single-f-b-s-fontSize);
-      font-weight: var(--en-single-f-b-s-fontWeight);
-      height: var(--height-tag-s);
-    }
-    
-    &--l {
-      font-size: var(--en-single-f-b-r-fontSize);
-      font-weight: var(--en-single-f-b-r-fontWeight);
-      height: var(--height-tag-m);
-    }
-    
-
-
-    &--white{
-        color: var(--color-tag-default-text);
-        background-color: var(--color-tag-default-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            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) * 2);
-            }
-        }
-    }
-    
-    &--dark{
-        color: var(--color-tag-dark-text);
-        background-color: var(--color-tag-dark-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            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) * 2);
-
-            }
-        }
-    }
-
-    &--blue{
-        color: var(--color-tag-blue-text);
-        background-color: var(--color-tag-blue-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-blue-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--cyan{
-        color: var(--color-tag-cyan-text);
-        background-color: var(--color-tag-cyan-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-cyan-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-
-    &--green{
-        color: var(--color-tag-green-text);
-        background-color: var(--color-tag-green-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-green-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-    &--olive{
-        color: var(--color-tag-olive-text);
-        background-color: var(--color-tag-olive-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-olive-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-    
-    &--yellow{
-        color: var(--color-tag-yellow-text);
-        background-color: var(--color-tag-yellow-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-yellow-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-    &--orange{
-        color: var(--color-tag-orange-text);
-        background-color: var(--color-tag-orange-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-orange-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--red{
-        color: var(--color-tag-red-text);
-        background-color: var(--color-tag-red-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-red-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--pink{
-        color: var(--color-tag-pink-text);
-        background-color: var(--color-tag-pink-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-pink-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-
-    &--purple{
-        color: var(--color-tag-purple-text);
-        background-color: var(--color-tag-purple-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-purple-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--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,99 +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"  :class="leftIconClasses"></vd-icon>
-                <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon"  :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="icon_btn_next"></vd-icon>
-            </slot>
-        </div>
-    </div>
-</template>
-<script>
-import VdIcon from '../icon';
-const prefixCls = 'vd-title';
-
-export default {
-    name: 'vd-title',
-    components: {
-        VdIcon
-    },
-    props: {
-        type: {
-            type: String,
-            default: 'primary'
-        },
-        title: String,
-        leftIcon: String,
-        rightIcon: String,
-        arrow: Boolean,
-        subText: String,
-        guideText: String,
-        sticky: {
-            type: Boolean,
-            default: false
-        }
-
-    },
-    data() {
-        return {
-
-        };
-    },
-    computed: {
-        wrapClasses() {
-            return {
-                [`${prefixCls}-${this.type}`]: this.type,
-                [`${prefixCls}-${this.type}-double`]: this.subText,
-                [`${prefixCls}--sticky`]: this.sticky
-            }
-
-        },
-        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: var(--spacing-title-padding_left);
-    padding-inline-end: var(--spacing-title-padding_right);
-    background-color: var(--bg-color-1);
-
-    &--sticky {
-        position: sticky;
-        top: 0;
-        z-index: 1000;
-    }
-
-    &--right {
-        display: flex;
-        align-items: center;
-    }
-
-    &-content {
-        display: flex;
-        align-items: center;
-    }
-
-    &-inner__title {
-        color: var(--color-title-head);
-    }
-
-    &__subtext {
-        margin-block-start: var(--spacing-title-subtitle-margin_top);
-        color: var(--color-title-text);
-    }
-
-    &-arrow {
-        color: var(--color-title-icon_arrow);
-        font-size: var(--icon-title-arrow);
-    }
-
-    &-primary {
-        height: var(--height-title-primary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-primary_icon-margin_y);
-            font-size: var(--icon-title-primary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-primary_icon-margin_y);
-            font-size: var(--icon-title-primary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-f-b-fontSize);
-            font-weight: var(--en-single-f-f-b-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-    }
-
-    &-secondary {
-        height: var(--height-title-secondary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-secondary_icon-margin_y);
-            font-size: var(--icon-title-secondary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-secondary_icon-margin_y);
-            font-size: var(--icon-title-secondary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-e-s-fontSize);
-            font-weight: var(--en-single-f-e-s-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-        }
-    }
-
-    &-tertiary {
-        height: var(--height-title-tertiary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-tertiary_icon-margin_y);
-            font-size: var(--icon-title-tertiary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-tertiary_icon-margin_y);
-            font-size: var(--icon-title-tertiary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-d-s-fontSize);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontSize);
-        }
-    }
-
-    &-quaternary {
-        height: var(--height-title-quaternary);
-
-        &__icon--left {
-            margin-inline-end: var(--spacing-title-quaternary_icon-margin_y);
-            font-size: var(--icon-title-quaternary);
-        }
-
-        &__icon--right {
-            margin-inline-start: var(--spacing-title-quaternary_icon-margin_y);
-            font-size: var(--icon-title-quaternary);
-        }
-
-        &__title {
-            font-size: var(--en-single-f-c-s-fontSize);
-            font-weight: var(--en-single-f-c-s-fontWeight);
-        }
-
-        &__text--right {
-            margin-inline-end: var(--spacing-title-text-margin_right);
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-title-text);
-        }
-
-        &__subtext {
-            font-size: var(--en-single-f-a-r-fontSize);
-            font-weight: var(--en-single-f-a-r-fontSize);
-        }
-    }
-
-    &-label {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-    }
-
-    &-primary-double {
-        height: var(--height-title-primary_double);
-    }
-
-    &-secondary-double {
-        height: var(--height-title-secondary_double);
-    }
-
-    &-tertiary-double {
-        height: var(--height-title-tertiary_double);
-    }
-
-    &-quaternary-double {
-        height: var(--height-title-quaternary_double);
-    }
-}

package/dist/components/toast/index.js

@@ -1,86 +0,0 @@
-import Vue from 'vue'
-import VdToast from './index.vue'
-import { inBrowser } from '../utils/env';
-
-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 树中
-     */
-    if (inBrowser) {
-      document.body.appendChild(this.vm.$el) // 将虚拟 DOM 插入真实 DOM
-      this.start()
-    }
-  }
-
-  /**
-   * 开始此组件
-   */
-  start() {
-    clearTimeout(timer)
-    /**
-     * 在挂载真实 DOM 树后显示过渡效果
-     */
-    timer = setTimeout(() => {
-      this.isShow = true
-      this.end()
-    }, 100)
-  }
-
-  /**
-   * 结束此组件
-   */
-  end() {
-    /**
-     * 关闭过渡效果之后移除真实 DOM 树节点
-     */
-    setTimeout(() => {
-      this.isShow = false
-      setTimeout(() => {
-      if (inBrowser) {
-          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>

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: var(--width-toast-small);
-  max-width: var(--width-toast-large);
-  padding: var(--spacing-toast-padding_x) var(--spacing-toast-padding_y);
-  background-color: var(--color-toast-bg);
-  border-radius: var(--radius-toast-content);
-  color: var(--color-toast-text);
-  font-size: var(--en-single-f-c-r-fontSize);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-
-  &.vd-toast-show {
-    opacity: 1;
-  }
-
-  &-icon {
-    min-height: var(--height-toast-small);
-
-    .vd-iconfont {
-      font-size: var(--icon-toast-size);
-      margin-bottom: var(--spacing-toast-icon-margin_bottom);
-    }
-  }
-
-  &__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;