vdesign-ui 0.1.21 → 0.1.23

package/dist/components/selector/style.less

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

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

package/dist/components/skeleton/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="vd-skeleton" :class="{ 'vd-skeleton--animate': animate }">
+    <template v-if="loading">  
+      <div class="vd-skeleton__img" v-if="img"></div>
+      <div class="vd-skeleton__title" :class="titleClasses" v-if="title"></div>
+      <div class="vd-skeleton__button" v-if="button"></div>
+      <div class="vd-skeleton__img--s" v-if="sImg"></div>
+      <div class="vd-skeleton__avatar" :class="avatarClasses" v-if="avatar"></div>
+      <div v-if="paragraph || text" class="vd-skeleton__content">
+        <div class="vd-skeleton__text" v-if="text"></div>
+        <template v-if="paragraph">
+          <div class="vd-skeleton__paragraph" v-for="item in rows" :key="item" :class="{
+            'is-last': item === rows && rows > 1,
+          }">
+          </div>
+        </template>
+      </div>
+      <div class="vd-skeleton__stock" v-if="stock">
+        <div class="vd-skeleton__stock--left">
+          <span class="vd-skeleton__stock--data"></span>
+          <span class="vd-skeleton__stock--subdatax"></span>
+        </div>
+        <div class="vd-skeleton--space">
+          <div class="vd-skeleton__stock--center"></div>
+          <div class="vd-skeleton__stock--right spacing">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
+        </div>
+      </div>
+      <div class="vd-skeleton__stock" v-if="data">
+        <div class="vd-skeleton__stock--left">
+          <span class="vd-skeleton__stock--data"></span>
+          <span class="vd-skeleton__stock--subdatal"></span>
+        </div>
+        <div class="vd-skeleton--space">
+          <div class="vd-skeleton__stock--right">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
+          <div class="vd-skeleton__stock--right">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
+          <div class="vd-skeleton__stock--right">
+            <span class="vd-skeleton__stock--title"></span>
+            <span class="vd-skeleton__stock--text"></span>
+          </div>
+        </div>
+      </div>
+      <div class="vd-skeleton__equally" v-if="equally">
+        <div class="vd-skeleton__img" v-for="item in equallys" :key="item" :style="{ height: height + 'px' }"></div>
+      </div>
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+const prefixCls = 'vd-skeleton'
+export default {
+  name: 'vd-skeleton',
+  props: {
+    rows: {
+      type: Number,
+      default: 4
+    },
+    img: {
+      type: Boolean
+    },
+    title: {
+      type: Boolean
+    },
+    button: {
+      type: Boolean
+    },
+    paragraph: {
+      type: Boolean
+    },
+    sImg: {
+      type: Boolean
+    },
+    avatar: {
+      type: Boolean
+    },
+    text: {
+      type: Boolean
+    },
+    stock: {
+      type: Boolean
+    },
+    data: {
+      type: Boolean
+    },
+    equally: {
+      type: Boolean
+    },
+    equallys: {
+      type: Number,
+      default: 2
+    },
+    height: {
+      type: Number
+    },
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    titleSize: {
+      type: String,
+      default: 'l'
+    },
+    avatarSize: {
+      type: String,
+      default: 's'
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+  },
+  computed: {
+    titleClasses() {
+      return {
+        [`${prefixCls}__title--${this.titleSize}`]: this.titleSize,
+      }
+    },
+    avatarClasses() {
+      return {
+        [`${prefixCls}__avatar--${this.avatarSize}`]: this.avatarSize,
+      }
+    },
+  }
+
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>