vdesign-ui 0.2.5 → 0.2.6

package/dist/components/dropdown/index.vue

@@ -1,218 +0,0 @@
-<template>
-  <div class="vd-dropdown" :class="wrapClasses" v-show="isMask">
-    <!-- <transition :name="isAnimation ? 'vd-dropdown-fade' : ''">
-      <div class="vd-menu-mask" @click.stop="clickMenuMask"></div>
-    </transition> -->
-    <transition :name="isAnimation ? 'vd-dropdown-slide-down' : ''">
-      <div v-clickoutside="clickMenuMask" class="vd-dropdown-menu" v-show="isMask">
-        <template v-if="!isMultiple && !$slots.custom">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) in datalist" :key="item.name"
-            @click.stop="selectedItem(item, index)">
-            <span class="vd-dropdown-left">
-              <vd-icon v-if="item.icon" :name="item.icon" svg class="vd-dropdown-icon"></vd-icon>
-              <span class="vd-dropdown-group-cell">
-                <span class="vd-dropdown-text">{{ item.text }}</span>
-                <span v-if="types === 'group'" class="vd-dropdown-group-sub">
-                  <vd-icon v-if="item.subIcon" :name="item.subIcon" svg class="vd-dropdown-sub-icon"></vd-icon>
-                  <span class="vd-dropdown-subtext" v-html="item.subText"></span>
-                </span>
-              </span>
-            </span>
-            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
-              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
-            <span v-if="types === 'state'" v-html="item.stateText" class="vd-dropdown-state-text"
-              :class="`vd-dropdown-state-text--${item.state}`"></span>
-          </div>
-        </template>
-
-        <template v-if="isMultiple">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item in datalist" :key="item.name">
-            <vd-checkbox v-model="item.selected" :disabled="!item.selected && max <= selectedCount">
-              {{ item.text }}
-            </vd-checkbox>
-            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
-              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
-          </div>
-          <div class="vd-dropdown--btn">
-            <vd-button block size="small" type="tertiary_grey" @click="resetMenu">{{ resetBtnTxt }}</vd-button>
-            <vd-button block size="small" @click="sureMenu">{{ okBtnTxt }}</vd-button>
-          </div>
-        </template>
-
-        <div class="vd-dropdown-item" v-if="$slots.custom">
-          <slot name="custom">{{ custom }}</slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import clickoutside from "../mixins/clickoutside.js";
-import VdIcon from '../icon';
-import VdButton from '../button';
-const prefixCls = 'vd-dropdown';
-export default {
-  name: 'vd-dropdown',
-  components: {
-        VdIcon,
-        VdButton
-    },
-  directives: {
-    clickoutside
-  },
-  props: {
-    isAnimation: {
-      type: Boolean,
-      default: false
-    },
-    types: {
-      type: String,
-      default: 'primary',
-      validator: value => ['primary', 'secondary', 'state', 'group'].includes(value)
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    isMultiple: {
-      type: Boolean,
-      default: false
-    },
-    alignment: {
-      type: String,
-      default: 'center',
-      validator: value => ['start', 'end', 'center'].includes(value)
-    },
-    col: {
-      type: [Number, String],
-      default: 1
-    },
-    max: {
-      type: [Number, String],
-      default: 5
-    },
-    custom: {
-      type: String,
-      default: ''
-    },
-    list: {
-      type: Array,
-      default: () => []
-    },
-    for: {
-      type: String,
-      default: ''
-    },
-  },
-  data() {
-    return {
-      datalist: []
-    };
-  },
-  watch: {
-    list: {
-      immediate: true,
-      handler(val) {
-        this.datalist = [...val];
-      }
-    },
-    value(val){
-      if(!val){
-        this.$emit('close')
-      }
-    }
-  },
-  computed: {
-    isMask() {
-      return this.value;
-    },
-    wrapClasses() {
-      return {
-        [`${prefixCls}-${this.types}`]: this.types,
-        [`${prefixCls}--divided`]: this.types !== 'state',
-        [`${prefixCls}-${this.alignment}`]: this.alignment
-      };
-    },
-    okBtnTxt() {
-      return '确定';
-    },
-    resetBtnTxt() {
-      return '重置';
-    },
-    selectedCount() {
-      return this.datalist.filter(item => item.selected).length;
-    }
-  },
-  methods: {
-    itemClass(item) {
-      return {
-        [`${prefixCls}--disabled`]: item.disabled,
-        [`${prefixCls}--active`]: item.selected
-      };
-    },
-    findParentWithNameAttr(element, nameValue) {
-      // 如果当前元素具有 name 属性且与传入的值匹配，返回该元素
-      if (element.getAttribute && element.getAttribute('alias-name') === nameValue) {
-        return element;
-      }
-      // 如果已经到达根元素 (document 或 null)，停止查找
-      if (element.parentElement) {
-        return this.findParentWithNameAttr(element.parentElement, nameValue); // 递归查找父元素
-      }
-      return null; // 没有找到带 name 属性的匹配元素
-    },
-    clickMenuMask(e) {      
-      if (this.value) {
-        if(this.for){
-          const nameElement = this.findParentWithNameAttr(e, this.for)    
-          // 如果没找到就说明点外面了
-          if (!nameElement) {            
-            this.$emit('input', false);
-          }   
-        }        
-      }
-    },
-    selectedItem(item, index) {
-      this.$emit('change', item, index); // 通知父组件选中项改变
-    },
-    resetMenu() {
-      this.datalist.forEach(item => (item.selected = false));
-      this.$emit('reset', this.datalist);
-    },
-    sureMenu() {
-      this.$emit('close'); // 关闭菜单
-      this.$emit('ok', this.datalist); // 确认并返回数据
-    }
-  }
-};
-</script>
-
-
-<style lang="less">
-@import './style.less';
-
-.vd-dropdown-fade-enter-active,
-.vd-dropdown-fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.vd-dropdown-fade-enter,
-.vd-dropdown-fade-leave-to {
-  opacity: 0;
-}
-
-.vd-dropdown-slide-down-enter-active,
-.vd-dropdown-slide-down-leave-active {
-  transition: transform 0.5s;
-}
-
-.vd-dropdown-slide-down-enter,
-.vd-dropdown-slide-down-leave-to {
-  transform: translateY(-20px);
-}
-</style>

package/dist/components/dropdown/style.less

@@ -1,432 +0,0 @@
-.vd-menu-mask {
-  position: fixed;
-  z-index: 999;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0);
-}
-
-
-@dropdown-prefix-cls: vd-dropdown;
-
-
-.@{dropdown-prefix-cls} {
-  --translate-x: -50%;
-
-  position: relative;
-  font-size: var(--en-single-f-c-r-fontSize);
-
-  // 额外加的 btn，token之外的
-  &--btn {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 10px 0;
-    gap: 10px;
-  }
-
-  &-menu {
-    z-index: 1000;
-    background: #fff;
-    transform-origin: top center;
-    position: absolute;
-    transition: transform 0.25s ease, opacity 0.25s ease;
-    inset-block-start: 100%;
-    // 默认 center
-    inset-inline-start: 50%;
-    transform: translate(var(--translate-x), 2px);
-  }
-
-  &-start {
-    .@{dropdown-prefix-cls}-menu {
-      inset-inline-start: 0;
-      transform: translate(0, 2px);
-    }
-  }
-
-  &-end {
-    .@{dropdown-prefix-cls}-menu {
-      inset-inline-start: inherit;
-      inset-inline-end: 0;
-      transform: translate(0, 2px);
-    }
-  }
-
-  &-center {
-    .@{dropdown-prefix-cls}-menu {
-      inset-inline-start: 50%;
-      transform: translate(var(--translate-x), 2px);
-    }
-  }
-
-  &-primary {
-    .@{dropdown-prefix-cls}-menu {
-      display: inline-block;
-      overflow-y: auto;
-      min-width: var(--width-dropdown-primary_small);
-      max-height: var(--height-dropdown-primary_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-primary-padding_x);
-      padding-block-end: var(--spacing-dropdown-primary-padding_x);
-      padding-inline-start: var(--spacing-dropdown-primary-padding_y);
-      padding-inline-end: var(--spacing-dropdown-primary-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-primary);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: var(--height-dropdown-primary_item);
-      line-height: var(--height-dropdown-primary_item);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-  
-      &-text {
-        white-space: nowrap;
-        color: var(--color-dropdown-primary-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-icon {
-        font-size: var(--icon-dropdown-primary);
-        margin-inline-end: var(--spacing-dropdown-primary_icon-margin_right);
-      }
-  
-      &-active-select {
-        font-size: var(--icon-dropdown-primary_select);
-        margin-inline-start: var(--spacing-dropdown-primary_icon_select-margin_left);
-        transform: scaleX(1) !important;
-        direction: ltr;
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--active {
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-primary-text-active);
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-  
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-primary-text-disable);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      .@{dropdown-prefix-cls}-icon {
-        opacity: var(--opacity-30);
-      }
-    }
-  }  
-
-  &-secondary {
-    .@{dropdown-prefix-cls}-menu {
-      display: inline-block;
-      overflow-y: auto;
-      max-height: var(--height-dropdown-secondary_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-secondary-padding_x);
-      padding-block-end: var(--spacing-dropdown-secondary-padding_x);
-      padding-inline-start: var(--spacing-dropdown-secondary-padding_y);
-      padding-inline-end: var(--spacing-dropdown-secondary-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-secondary);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: var(--height-dropdown-secondary_item);
-      line-height: var(--height-dropdown-secondary_item);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-  
-      &-text {
-        white-space: nowrap;
-        color: var(--color-dropdown-secondary-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-icon {
-        font-size: var(--icon-dropdown-secondary);
-        margin-inline-end: var(--spacing-dropdown-secondary_icon-margin_right);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--active {
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-secondary-text-active);
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-  
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-secondary-text-disable);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      .@{dropdown-prefix-cls}-icon {
-        opacity: var(--opacity-30);
-      }
-    }
-  }  
-
-  &-state {
-    .@{dropdown-prefix-cls}-menu {
-      overflow-y: auto;
-      min-width: var(--width-dropdown-state_small);
-      max-height: var(--height-dropdown-state_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-state-padding_x);
-      padding-block-end: var(--spacing-dropdown-state-padding_x);
-      padding-inline-start: var(--spacing-dropdown-state-padding_y);
-      padding-inline-end: var(--spacing-dropdown-state-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-state);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: var(--height-dropdown-state_item);
-      line-height: var(--height-dropdown-state_item);
-      padding-inline-start: var(--spacing-dropdown-state_item-padding_y);
-      padding-inline-end: var(--spacing-dropdown-state_item-padding_y);
-      border-radius: var(--radius-dropdown-state_item);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        overflow: hidden;
-      }
-  
-      &-text {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        color: var(--color-dropdown-state-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-icon {
-        font-size: var(--icon-dropdown-state);
-        margin-inline-end: var(--spacing-dropdown-state_icon-margin_right);
-      }
-  
-      &-state-text {
-        font-size: var(--en-single-f-b-r-fontSize);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-  
-        &::before {
-          content: '';
-          display: inline-block;
-          border-radius: 50%;
-          width: var(--width-dropdown-state_drop);
-          height: var(--width-dropdown-state_drop);
-          margin-inline-start: var(--spacing-dropdown-state_drop-margin_left);
-          margin-inline-end: var(--spacing-dropdown-state_drop-margin_right);
-          background-color: var(--color-dropdown-state-open);
-        }
-  
-        &--open {
-          color: var(--color-dropdown-state-open);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-open);
-          }
-        }
-  
-        &--preopen {
-          color: var(--color-dropdown-state-preopen);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-preopen);
-          }
-        }
-  
-        &--close {
-          color: var(--color-dropdown-state-close);
-  
-          &::before {
-            background-color: var(--text-color-h3);
-          }
-        }
-  
-        &--fusing {
-          color: var(--color-dropdown-state-fusing);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-fusing);
-          }
-        }
-  
-        &--pre {
-          color: var(--color-dropdown-state-pre_market_auction);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-pre_market_auction);
-          }
-        }
-  
-        &--last {
-          color: var(--color-dropdown-state-last_trading_session);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-last_trading_session);
-          }
-        }
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--active {
-      background: var(--color-dropdown-state-bg-active);
-  
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-state-text-active);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-  
-      .@{dropdown-prefix-cls}-text {
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      .@{dropdown-prefix-cls}-icon {
-        opacity: var(--opacity-30);
-      }
-    }
-  }
-
-  &-group {
-    .@{dropdown-prefix-cls}-menu {
-      overflow-y: auto;
-      min-width: var(--width-dropdown-group_default);
-      max-height: var(--height-dropdown-group_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-group-padding_x);
-      padding-block-end: var(--spacing-dropdown-group-padding_x);
-      padding-inline-start: var(--spacing-dropdown-group-padding_y);
-      padding-inline-end: var(--spacing-dropdown-group-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-group);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding-block-start: var(--spacing-dropdown-group_item-padding_top);
-      padding-block-end: var(--spacing-dropdown-group_item-padding_bottom);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-  
-      &-group-cell {
-        display: flex;
-        flex-direction: column;
-        color: var(--color-dropdown-state-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-text {
-        color: var(--color-dropdown-group-title-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-group-sub {
-        display: flex;
-        align-items: center;
-        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
-      }
-  
-      &-sub-icon {
-        font-size: var(--icon-dropdown-group);
-        margin-inline-end: 6px;
-      }
-  
-      &-subtext {
-        color: var(--color-dropdown-group-text-default);
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-      }
-  
-      &-multext {
-        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
-      }
-    }
-  }
-  
-  &--divided {
-    .@{dropdown-prefix-cls}-item {
-      &:not(:last-child)::after {
-        position: absolute;
-        box-sizing: border-box;
-        content: ' ';
-        pointer-events: none;
-        top: -50%;
-        right: -50%;
-        bottom: -50%;
-        left: -50%;
-        border: 0 solid var(--color-dropdown-divider);
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-        border-bottom-width: 1px;
-      }
-    }
-  }
-}
-
-
-
-[dir="rtl"] .@{dropdown-prefix-cls} {
-  --translate-x: 50%;
-}

package/dist/components/empty/index.js

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