vdesign-ui 0.2.6 → 0.2.8

package/dist/components/selector/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div v-clickoutside="close" class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0">
+    <div class="vd-selector__inner" @click.stop="handlerClick">
+      <div :contenteditable="contenteditable" class="vd-selector__left">
+        <vd-icon v-if="icon" :name="icon" svg :class="iconClasses"></vd-icon>
+        <div :class="titleClasses">
+          <slot name="content">
+            {{ content }}
+          </slot>
+        </div>
+      </div>
+      <vd-icon v-if="arrow" :name="arrow" :class="arrowClasses"></vd-icon>
+    </div>
+    <div class="vd-selector--slot">
+      <slot name="dropdown"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import VdIcon from '../icon';
+import clickoutside from "../mixins/clickoutside.js";
+const prefixCls = 'vd-selector';
+
+export default {
+  name: 'vd-selector',
+  components: {
+    VdIcon
+  },
+  directives: {
+    clickoutside
+  },
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    arrow: {
+      type: String,
+      default: 'icon_btn_moredown'
+    },
+    type: {
+      type: String,
+      default: '',
+      validator: value => ['', 'form'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'm',
+      validator: value => ['s', 'm', 'l', 'xl'].includes(value)
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    contenteditable: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    value(val) {
+      this.showMenu = val;
+    }
+  },
+  data() {
+    return {
+      showMenu: this.value
+    }
+  },
+  computed: {
+    // 计算外层容器的样式类
+    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',
+      };
+    },
+  },
+  methods: {
+    generateClasses(suffix = '', extra = '') {
+      return {
+        [`${prefixCls}-${this.type}${suffix}`]: this.type,
+        [`${prefixCls}-${this.size}${suffix}`]: this.size,
+        [`${prefixCls}${extra}`]: extra,
+        [`${prefixCls}--disabled`]: this.disabled,
+        [`${prefixCls}--active`]: this.showMenu || this.active,
+        [`${prefixCls}-${this.size}${suffix}--active`]: this.showMenu && this.arrow,
+      };
+    },
+    close() {
+      if (this.showMenu) {
+        // this.showMenu = false;
+        // this.$emit('close');
+        // 传了下拉菜单才执行
+        if (this.$scopedSlots.dropdown) {
+          console.log('has dropdown')
+          this.$emit('input', false);
+        }
+      }
+    },
+    handlerClick() {
+      if (this.disabled) return;
+      console.log('showMenu:1:', this.showMenu);
+      // 更新showMenu的值
+      this.showMenu = !this.showMenu;
+      console.log('showMenu:2:', this.showMenu);
+      // 使用$emit来更新v-model绑定的值
+      this.$emit('input', this.showMenu);
+      this.$emit('click');
+    }
+
+  }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/selector/style.less

@@ -0,0 +1,484 @@
+@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: var(--en-single-f-e-r-fontSize);
+      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: var(--en-single-f-f-b-fontSize);
+        font-weight: var(--en-single-f-f-b-fontWeight);
+        color: var(--color-selector-xl-text-active);
+      }
+  
+      &--disabled {
+        font-size: var(--en-single-f-f-b-fontSize);
+        font-weight: var(--en-single-f-f-b-fontWeight);
+        color: var(--color-selector-xl-text-disable);
+      }
+    }
+  
+    &__icon {
+      display: flex;
+      font-size: var(--icon-selector-xl);
+      margin-inline-end: var(--spacing-selector-xl-margin_y);
+  
+      &--disabled {
+        opacity: var(--opacity-30);
+      }
+    }
+  
+    &__arrow {
+      font-size: var(--icon-small);
+      margin-inline-start: var(--spacing-selector-l-margin_y);
+      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: var(--en-single-f-d-r-fontSize);
+      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: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-selector-l-text-active);
+      }
+  
+      &--disabled {
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-selector-l-text-disable);
+      }
+    }
+  
+    &__icon {
+      display: flex;
+      font-size: var(--icon-selector-l);
+      margin-inline-end: var(--spacing-selector-l-margin_y);
+  
+      &--disabled {
+        opacity: var(--opacity-30);
+      }
+    }
+  
+    &__arrow {
+      font-size: var(--icon-small);
+      margin-inline-start: var(--spacing-selector-l-margin_y);
+      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: var(--en-single-f-c-r-fontSize);
+      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: var(--en-single-f-c-s-fontSize);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+        color: var(--color-selector-m-text-active);
+      }
+  
+      &--disabled {
+        font-size: var(--en-single-f-c-s-fontSize);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+        color: var(--color-selector-m-text-disable);
+      }
+    }
+  
+    &__icon {
+      display: flex;
+      font-size: var(--icon-selector-m);
+      margin-inline-end: var(--spacing-selector-m-margin_y);
+  
+      &--disabled {
+        opacity: var(--opacity-30);
+      }
+    }
+  
+    &__arrow {
+      font-size: var(--icon-small);
+      margin-inline-start: var(--spacing-selector-m-margin_y);
+      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: var(--en-single-f-b-r-fontSize);
+      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: var(--en-single-f-b-r-fontSize);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+        color: var(--color-selector-s-text-active);
+      }
+  
+      &--disabled {
+        font-size: var(--en-single-f-b-r-fontSize);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+        color: var(--color-selector-s-text-disable);
+      }
+    }
+  
+    &__icon {
+      display: flex;
+      font-size: var(--icon-selector-s);
+      margin-inline-end: var(--spacing-selector-s-margin_y);
+  
+      &--disabled {
+        opacity: var(--opacity-30);
+      }
+    }
+  
+    &__arrow {
+      font-size: var(--icon-extra-small);
+      margin-inline-start: var(--spacing-selector-s-margin_y);
+      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: var(--width-selector-form);
+    height: var(--height-selector-form);
+    padding-inline-start: var(--spacing-selector-padding_y);
+    padding-inline-end: var(--spacing-selector-padding_y);
+    background-color: var(--color-selector-form-bg-default);
+    border-radius: var(--radius-selector-form);
+    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: var(--en-single-f-d-r-fontSize);
+      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: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-selector-xl-text-active);
+      }
+  
+      &--disabled {
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-selector-xl-text-disable);
+      }
+    }
+  
+    &__icon {
+      font-size: var(--icon-selector-l);
+      margin-inline-end: var(--spacing-selector-icon-margin_right);
+  
+      &--disabled {
+        opacity: var(--opacity-30);
+      }
+    }
+  
+    &__arrow {
+      font-size: var(--icon-small);
+      margin-inline-start: var(--spacing-selector-down-margin_left);
+      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);
+      }
+    }
+  }  
+
+  &--slot {
+    position: absolute;
+    top: 100%;
+    display: none;
+  }
+
+  &--active {
+    .@{selector-prefix-cls}-xl {
+
+      &__title {
+        font-size: var(--en-single-f-f-b-fontSize);
+        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: var(--en-single-f-d-s-fontSize);
+        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: var(--en-single-f-c-s-fontSize);
+        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: var(--en-single-f-b-r-fontSize);
+        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: var(--en-single-f-d-s-fontSize);
+        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;
+      }
+    }
+
+    .@{selector-prefix-cls}--slot {
+      display: block;
+    }
+  }
+
+  &--disabled {
+    .@{selector-prefix-cls}-xl {
+
+      &__title {
+        font-size: var(--en-single-f-f-b-fontSize);
+        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: var(--en-single-f-d-s-fontSize);
+        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: var(--en-single-f-c-s-fontSize);
+        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: var(--en-single-f-b-r-fontSize);
+        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: var(--en-single-f-d-s-fontSize);
+        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

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