vdesign-ui 0.1.20 → 0.1.21

package/dist/components/selector/index.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0" @keyup.enter="handlerClick"
-    @click.stop="handlerClick">
-    <div class="vd-selector__inner">
-      <div :contenteditable="contenteditable" class="vd-selector__left">
-        <vd-icon v-if="icon" :name="icon" svg :class="iconClasses"></vd-icon>
-        <div :class="titleClasses">
-          <slot v-if="!isSlotEmpty" name="content"></slot>
-          <template v-else>{{ content }} </template>
-        </div>
-      </div>
-      <vd-icon v-if="arrow" :name="arrow" :class="arrowClasses"></vd-icon>
-    </div>
-    <slot v-if="showMenu"></slot>
-  </div>
-</template>
-
-<script>
-const prefixCls = 'vd-selector';
-export default {
-  name: "vd-selector",
-  componentName: "vd-selector",
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    arrow: {
-      type: [String, Boolean],
-      default: 'icon_btn_moredown'
-    },
-    type: {
-      type: String,
-      default: ''// form
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: value => ['s', 'm', 'l', 'xl'].includes(value)
-    },
-    content: {
-      type: [String, Array],
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    active: {
-      type: Boolean,
-      default: false
-    },
-    contenteditable: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      showMenu: this.value,
-    };
-  },
-  computed: {
-    isSlotEmpty() {
-      return !this.$slots.content;
-    },
-    wrapClasses() {
-      return {
-        [`${prefixCls}-${this.type}`]: this.type,
-        [`${prefixCls}-${this.size}`]: this.size,
-        [`${prefixCls}--disabled`]: this.disabled,
-        [`${prefixCls}--active`]: this.showMenu || this.active,
-      }
-    },
-    titleClasses() {
-      return {
-        [`${prefixCls}-${this.type}__title`]: this.type,
-        [`${prefixCls}-${this.size}__title`]: this.size,
-      }
-    },
-    iconClasses() {
-      return {
-        [`${prefixCls}-iconfont`]: true,
-        [`${prefixCls}-${this.type}__icon`]: this.type,
-        [`${prefixCls}-${this.size}__icon`]: this.size,
-      }
-    },
-    arrowClasses() {
-      return {
-        [`${prefixCls}-iconfont`]: true,
-        [`${prefixCls}-${this.type}__arrow`]: this.type,
-        [`${prefixCls}-${this.size}__arrow`]: this.size,
-        [`${prefixCls}__arrow--active`]: this.showMenu && this.arrow === 'icon_btn_moredown',
-      }
-    },
-  },
-  watch: {
-    value(val) {
-      this.showMenu = val;
-    }
-  },
-  methods: {
-    close() {
-      this.showMenu = false
-      this.$emit('close', false)
-      this.$emit('input', false)
-    },
-    handlerClick() {
-      if (this.disabled) return;
-      this.showMenu = !this.showMenu
-      this.$emit('click', this.showMenu)
-      this.$emit('input', this.showMenu)
-    }
-  }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/selector/style.less

@@ -1,474 +0,0 @@
-@selector-prefix-cls: vd-selector;
-
-.@{selector-prefix-cls} {
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-
-  &__inner {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-  }
-
-  &__left {
-    display: flex;
-    align-items: center;
-    max-width: 100%;
-    overflow: hidden;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  &-iconfont {
-    flex: none;
-    min-width: 0;
-  }
-
-  &-xl {
-
-    &__title {
-      font-size: calc(var(--en-single-f-e-r-fontSize) * 1px);
-      font-weight: var(--en-single-f-e-r-fontWeight);
-      color: var(--color-selector-xl-text-default);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &--active {
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-selector-xl-text-active);
-      }
-
-      &--disabled {
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-selector-xl-text-disable);
-      }
-    }
-
-    &__icon {
-      font-size: calc(var(--icon-selector-xl) * 1px);
-      margin-inline-end: calc(var(--spacing-selector-xl-margin_y) * 1px);
-
-      &--disabled {
-        opacity: var(--opacity-30);
-      }
-    }
-
-    &__arrow {
-      font-size: calc(var(--icon-small) * 1px);
-      margin-inline-start: calc(var(--spacing-selector-l-margin_y) * 1px);
-      color: var(--color-selector-icon_down-default);
-      transition: transform .3s;
-
-      &--active {
-        color: var(--color-selector-icon_down-active);
-      }
-
-      &--disabled {
-        color: var(--color-selector-icon_down-disable);
-      }
-    }
-
-
-  }
-
-  &-l {
-
-    &__title {
-      font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-      font-weight: var(--en-single-f-d-r-fontWeight);
-      color: var(--color-selector-l-text-default);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &--active {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-l-text-active);
-      }
-
-      &--disabled {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-l-text-disable);
-      }
-    }
-
-    &__icon {
-      font-size: calc(var(--icon-selector-l) * 1px);
-      margin-inline-end: calc(var(--spacing-selector-l-margin_y) * 1px);
-
-      &--disabled {
-        opacity: var(--opacity-30);
-      }
-    }
-
-    &__arrow {
-      font-size: calc(var(--icon-small) * 1px);
-      margin-inline-start: calc(var(--spacing-selector-l-margin_y) * 1px);
-      color: var(--color-selector-icon_down-default);
-      transition: transform .3s;
-
-      &--active {
-        color: var(--color-selector-icon_down-active);
-      }
-
-      &--disabled {
-        color: var(--color-selector-icon_down-disable);
-      }
-    }
-
-  }
-
-  &-m {
-
-    &__title {
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      color: var(--color-selector-m-text-default);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &--active {
-        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-        color: var(--color-selector-m-text-active);
-      }
-
-      &--disabled {
-        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-        color: var(--color-selector-m-text-disable);
-      }
-    }
-
-    &__icon {
-      font-size: calc(var(--icon-selector-m) * 1px);
-      margin-inline-end: calc(var(--spacing-selector-m-margin_y) * 1px);
-
-      &--disabled {
-        opacity: var(--opacity-30);
-      }
-    }
-
-    &__arrow {
-      font-size: calc(var(--icon-small) * 1px);
-      margin-inline-start: calc(var(--spacing-selector-m-margin_y) * 1px);
-      color: var(--color-selector-icon_down-default);
-      transition: transform .3s;
-
-      &--active {
-        color: var(--color-selector-icon_down-active);
-      }
-
-      &--disabled {
-        color: var(--color-selector-icon_down-disable);
-      }
-    }
-  }
-
-  &-s {
-
-    &__title {
-      font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-      font-weight: var(--en-single-f-b-r-fontWeight);
-      color: var(--color-selector-s-text-default);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &--active {
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-        color: var(--color-selector-s-text-active);
-      }
-
-      &--disabled {
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-        color: var(--color-selector-s-text-disable);
-      }
-    }
-
-    &__icon {
-      font-size: calc(var(--icon-selector-s) * 1px);
-      margin-inline-end: calc(var(--spacing-selector-s-margin_y) * 1px);
-
-      &--disabled {
-        opacity: var(--opacity-30);
-      }
-    }
-
-    &__arrow {
-      font-size: calc(var(--icon-extra-small) * 1px);
-      margin-inline-start: calc(var(--spacing-selector-s-margin_y) * 1px);
-      color: var(--color-selector-icon_down-default);
-      transition: transform .3s;
-
-      &--active {
-        color: var(--color-selector-icon_down-active);
-      }
-
-      &--disabled {
-        color: var(--color-selector-icon_down-disable);
-      }
-    }
-
-  }
-
-  &-form {
-    width: calc(var(--width-selector-form) * 1px);
-    height: calc(var(--height-selector-form) * 1px);
-    // line-height: calc(var(--height-selector-form) * 1px);
-    padding-inline-start: calc(var(--spacing-selector-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-selector-padding_y) * 1px);
-    background-color: var(--color-selector-form-bg-default);
-    border-radius: calc(var(--radius-selector-form) * 1px);
-    justify-content: space-between;
-
-    .@{selector-prefix-cls}__inner {
-      justify-content: space-between;
-    }
-
-    &--active {
-      background-color: var(--color-selector-form-bg-active);
-    }
-
-    &--disabled {
-      background-color: var(--color-selector-form-bg-disable);
-    }
-
-    &__title {
-      font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-      font-weight: var(--en-single-f-d-r-fontWeight);
-      color: var(--color-selector-form-text-default);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &--active {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-xl-text-active);
-      }
-
-      &--disabled {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-xl-text-disable);
-      }
-    }
-
-    &__icon {
-      font-size: calc(var(--icon-selector-l) * 1px);
-      margin-inline-end: calc(var(--spacing-selector-icon-margin_right) * 1px);
-
-      &--disabled {
-        opacity: var(--opacity-30);
-      }
-    }
-
-    &__arrow {
-      font-size: calc(var(--icon-small) * 1px);
-      margin-inline-start: calc(var(--spacing-selector-down-margin_left) * 1px);
-      color: var(--color-selector-icon_down-default);
-      transition: transform .3s;
-
-      &--active {
-        color: var(--color-selector-icon_down-active);
-      }
-
-      &--disabled {
-        color: var(--color-selector-icon_down-disable);
-      }
-    }
-  }
-
-  &--active {
-    .@{selector-prefix-cls}-xl {
-
-      &__title {
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-selector-xl-text-active);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-active);
-        transition: transform .3s;
-      }
-
-    }
-
-    .@{selector-prefix-cls}-l {
-
-      &__title {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-l-text-active);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-active);
-        transition: transform .3s;
-      }
-
-    }
-
-    .@{selector-prefix-cls}-m {
-
-      &__title {
-        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-        color: var(--color-selector-m-text-active);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-active);
-        transition: transform .3s;
-      }
-    }
-
-    .@{selector-prefix-cls}-s {
-
-      &__title {
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-        color: var(--color-selector-s-text-active);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-active);
-        transition: transform .3s;
-      }
-
-    }
-
-    .@{selector-prefix-cls}-form {
-      background-color: var(--color-selector-form-bg-active);
-
-      &__title {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-xl-text-active);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-active);
-        transition: transform .3s;
-      }
-    }
-  }
-
-  &--disabled {
-    .@{selector-prefix-cls}-xl {
-
-      &__title {
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-selector-xl-text-disable);
-      }
-
-      &__icon {
-        opacity: var(--opacity-30);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-disable);
-      }
-
-
-    }
-
-    .@{selector-prefix-cls}-l {
-
-      &__title {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-l-text-disable);
-      }
-
-      &__icon {
-        opacity: var(--opacity-30);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-disable);
-      }
-
-    }
-
-    .@{selector-prefix-cls}-m {
-
-      &__title {
-        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-        color: var(--color-selector-m-text-disable);
-      }
-
-      &__icon {
-        opacity: var(--opacity-30);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-disable);
-      }
-
-    }
-
-    .@{selector-prefix-cls}-s {
-
-      &__title {
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-        color: var(--color-selector-s-text-disable);
-      }
-
-      &__icon {
-        opacity: var(--opacity-30);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-disable);
-      }
-
-    }
-
-    .@{selector-prefix-cls}-form {
-      background-color: var(--color-selector-form-bg-disable);
-
-      &__title {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-selector-xl-text-disable);
-      }
-
-      &__icon {
-        opacity: var(--opacity-30);
-      }
-
-      &__arrow {
-        color: var(--color-selector-icon_down-disable);
-      }
-    }
-  }
-
-  &__arrow--active {
-    transform: rotate(180deg);
-    transform-origin: center;
-  }
-}

package/dist/components/skeleton/index.js

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