vdesign-ui 0.1.20 → 0.1.21

package/dist/components/switch/index.js

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

package/dist/components/switch/index.vue

@@ -1,72 +0,0 @@
-<template>
-  <!-- 开关 -->
-  <div class="vd-switch" :class="{ 'vd-switch-on': isActived }" :disabled="disabled" @click="handleClick">
-    <span class="vd-switch-round"></span>
-  </div>
-</template>
-<script>
-export default {
-  name: 'vd-switch',
-  props: {
-    /**
-     * v-model 绑定值
-     */
-    value: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 异步状态
-     */
-    async: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 禁用状态
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      /**
-       * 激活状态
-       */
-      isActived: this.value
-    }
-  },
-  methods: {
-    /**
-     * 点击 Switch 开关
-     */
-    handleClick() {
-      const { disabled, async, isActived } = this
-      /**
-       * 判断是否被禁用
-       */
-      if (!disabled) {
-        /**
-         * 判断是否异步
-         */
-        !async && this.$emit('input', !isActived)
-        this.$emit('on-click')
-        // element.style.setProperty('--primary-color', 'blue');
-      }
-    },
-  },
-  watch: {
-    /**
-     * 监听 value 的值
-     */
-    value(value) {
-      this.isActived = value
-    }
-  }
-}
-</script>
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/switch/style.less

@@ -1,56 +0,0 @@
-@prefix: ~"vd-switch";
-
-.@{prefix} {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  width: calc(var(--width-switch-bg) * 1px);
-  height: calc(var(--height-switch-bg) * 1px);
-  border-radius: calc(var(--radius-switch-bg) * 1px);
-  background: var(--color-switch-off_bg-default);
-  cursor: pointer;
-
-  &-round {
-    box-sizing: border-box;
-    position: absolute;
-    top: calc(var(--height-switch-bg) * -0.5px);
-    left: 0;
-    transition: transform .3s;
-    width: calc(var(--height-switch-button) * 1px);
-    height: calc(var(--height-switch-button) * 1px);
-    border-radius: calc(var(--radius-switch-button) * 1px);
-    border: 1px solid var(--color-switch-off_button_border-default);
-    background: var(--color-switch-off_button_bg-default);
-  }
-
-  &-on {
-    border-color: var(--color-switch-on_button_border-default);
-    background: var(--color-switch-on_bg-default);
-
-    .@{prefix}-round {
-      transform: translateX(calc(var(--height-switch-button) * 1px));
-      background: var(--color-switch-on_button_bg-default);
-    }
-  }
-
-  &[disabled] {
-    border-color: var(--color-switch-off_button_border-disable);
-    background: var(--color-switch-off_bg-disable);
-
-    .@{prefix}-round {
-      background: var(--color-switch-off_button_bg-disable);
-      border-color: var(--color-switch-off_button_border-disable);
-    }
-  }
-
-  // 选中&&禁用
-  &-on[disabled] {
-    border-color: var(--color-switch-on_button_border-disable);
-    background: var(--color-switch-on_bg-disable);
-
-    .@{prefix}-round {
-      background: var(--color-switch-on_button_bg-disable);
-      border-color: var(--color-switch-on_button_border-disable);
-    }
-  }
-}

package/dist/components/tabs/index.js

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

package/dist/components/tabs/index.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="vd-tabs">
-    <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
-      <div :class="[barType,scrollspy]" ref="tabsContainer">
-        <div v-for="(item, index) in navList" :key="index" :class="tabClasses(item)" @click="handleChange(index)">
-          <span class="vd-tabs-text-cell" :class="ellipsisClasses">{{ item.title }}
-            <vd-icon class="vd-tabs-arrow" v-if="item.arrow" name="icon_btn_moredown"></vd-icon>
-          </span>
-        </div>
-      </div>
-      <div class="vd-tabs-menu--right" v-if="menu">
-        <vd-icon :name="menuIcon" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
-      </div>
-    </div>
-    <div class="vd-tabs__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-const prefixCls = "vd-tabs";
-export default {
-  name: "vd-tabs",
-  props: {
-    value: [String, Number],
-    tabsType: {
-      type: String,
-      default: "primary",
-    },
-    menu: Boolean,
-    ellipsis: {
-      type: Boolean,
-      default: true,
-    },
-    actBorder: Boolean,
-    backgroundColor: Boolean,
-    divider: Boolean,
-    menuIcon: {
-      type: String,
-      default: 'icon_tab_morelist',
-    },
-  },
-  data() {
-    return {
-      currentValue: this.value,
-      navList: [],
-    };
-  },
-  watch: {
-    value(val) {
-      this.currentValue = val;
-    },
-  },
-  computed: {
-    scrollspy() {
-      return  `${prefixCls}--complete`
-    },
-    ellipsisClasses() {
-      return {
-        [`${prefixCls}-text--ellipsis`]: this.ellipsis,
-      };
-    },
-    menuClasses() {
-      return {
-        [`${prefixCls}-menu`]: this.menu,
-        [`${prefixCls}__wrap--bg`]: this.backgroundColor,
-        "vd-hairline--bottom": this.divider,
-      };
-    },
-    lineClasses() {
-      return {
-        [`${prefixCls}__line`]: !this.actBorder,
-      };
-    },
-    barType() {
-      return {
-        [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
-      };
-    },
-  },
-  methods: {
-    emitMenuClick() {
-      this.$emit('menu-click');
-    },
-    tabClasses(item) {
-      return {
-        [`${prefixCls}-${this.tabsType}`]: true,
-        [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
-      };
-    },
-    getTabs() {
-      return this.$children.filter((item) => item.$options.name === "vd-tab");
-    },
-    updateNav() {
-      this.navList = this.getTabs().map((pane, index) => ({
-        title: pane.title,
-        name: pane.name || index,
-        arrow: pane.arrow,
-      }));
-      if (!this.currentValue) {
-        this.currentValue = this.navList[0].name;
-      }
-      this.updateStatus();
-    },
-    updateStatus() {
-      this.getTabs().forEach((tab) => {
-        tab.show = tab.computedName === this.currentValue;
-      });
-    },
-    handleChange(index) {
-      const nav = this.navList[index];
-      const name = nav.name;
-      if (this.currentValue !== name) {
-        this.currentValue = name;
-        this.$emit('input', name); // 确保向父组件更新
-        this.$emit('change', { index, title: nav.title, name });
-        this.updateStatus(); // 确保更新状态
-        this.adjustTabPosition(index);
-      }
-      this.$emit("click", { index, title: nav.title, name });
-    },
-    adjustTabPosition(index) {
-      const container = this.$refs.tabsContainer;
-      const selectedTab = container.children[index];
-      if (selectedTab) {
-        const containerWidth = container.offsetWidth;
-        const tabWidth = selectedTab.offsetWidth;
-        const tabOffsetLeft = selectedTab.offsetLeft;
-        const scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
-        container.scrollTo({ left: scrollLeft, behavior: "smooth" });
-      }
-    },
-  },
-  mounted() {
-    this.updateNav();
-  },
-};
-</script>
-
-<style lang="less"></style>
-
-<style lang="less">
-@import "./style.less";
-</style>

package/dist/components/tabs/style.less

@@ -1,385 +0,0 @@
-@tabs-prefix-cls: vd-tabs;
-
-.@{tabs-prefix-cls} {
-
-  &__wrap {
-    position: relative;
-    width: 100%;
-    // background-color: #fff;  
-  }
-
-  &-primary {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    padding-inline-start: calc(var(--spacing-tab-primary-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-tab-primary-padding_right) * 1px);
-    color: var(--color-tab-primary-text-default);
-    font-size: calc(var(--en-single-f-d-r-fontSize)* 1px);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-
-    &-bar {
-      position: relative;
-      // display: flex;
-      white-space: nowrap;
-      padding-inline-start: calc(var(--spacing-tab-primary-margin_left)*1px);
-      height: calc(var(--height-super-large)*1px);
-      line-height: calc(var(--height-super-large)*1px);
-    }
-
-    &-active {
-      color: var(--color-tab-primary-text-active);
-      font-size: calc(var(--en-single-f-e-s-fontSize)* 1px);
-      font-weight: var(--en-single-f-e-s-fontWeight);
-
-
-      &::before {
-        content: "";
-        bottom: 11px;
-        height: calc(var(--height-tab-primary-bar) * 1px);
-        width: calc(var(--width-tab-primary-bar) * 1px);
-        display: block;
-        position: absolute;
-        background-color: var(--color-tab-primary-bar-active);
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: calc(var(--radius-tab-primary_bar) * 1px);
-      }
-    }
-  }
-
-  &-card {
-    min-width: 1%;
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    text-align: center;
-    color: var(--color-tab-primary-text-default);
-    font-size: calc(var(--en-single-f-d-r-fontSize)* 1px);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-
-    &-bar {
-      position: relative;
-      display: flex;
-      padding-inline-start: 20px;
-      padding-inline-end: 20px;
-      height: calc(var(--height-super-large)*1px);
-      line-height: calc(var(--height-super-large)*1px);
-    }
-
-    &-active {
-      color: var(--color-tab-primary-text-active);
-      font-size: calc(var(--en-single-f-e-s-fontSize)* 1px);
-      font-weight: var(--en-single-f-e-s-fontWeight);
-
-      &::before {
-        content: "";
-        bottom: 11px;
-        height: calc(var(--height-tab-primary-bar) * 1px);
-        width: calc(var(--width-tab-primary-bar) * 1px);
-        display: block;
-        position: absolute;
-        background-color: var(--color-tab-primary-bar-active);
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 1px;
-      }
-    }
-  }
-
-  &-secondary {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    margin-inline-start: calc(var(--spacing-tab-secondary-padding_left) * 1px);
-    margin-inline-end: calc(var(--spacing-tab-secondary-padding_right) * 1px);
-    color: var(--color-tab-primary-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-c-r-fontWeigh);
-
-    &-bar {
-      display: flex;
-      align-items: center;
-      position: relative;
-      padding-inline-start: calc(var(--spacing-tab-secondary-margin_left) * 1px);
-      height: calc(var(--height-tab-secondary) * 1px);
-      line-height: calc(var(--height-tab-secondary) * 1px);
-    }
-
-    &-active {
-      color: var(--color-tab-primary-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-      font-weight: var(--en-single-f-c-s-fontWeight);
-
-      &::before {
-        content: "";
-        bottom: 0;
-        height: calc(var(--height-tab-secondary-bar) * 1px);
-        display: block;
-        position: absolute;
-        background-color: var(--color-tab-secondary-bar-active);
-        left: 0;
-        right: 0;
-        width: 100%;
-        border-radius: calc(var(--radius-tab-secondary-bar_top) * 1px) calc(var(--radius-tab-secondary-bar_top) * 1px) calc(var(--radius-tab-secondary-bar_bottom) * 1px) calc(var(--radius-tab-secondary-bar_bottom) * 1px);
-      }
-    }
-  }
-
-  &-capsule {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    vertical-align: middle;
-    height: calc(var(--height-tab-capsule_btn) * 1px);
-    line-height: calc(var(--height-tab-capsule_btn) * 1px);
-    padding-inline-start: calc(var(--spacing-tab-capsule_btn-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-tab-capsule_btn-padding_right) * 1px);
-    margin-inline-start: calc(var(--spacing-tab-capsule_btn-margin_right) * 1px);
-    margin-inline-end: calc(var(--spacing-tab-capsule_btn-margin_right) * 1px);
-    background-color: var(--color-tab-capsule_btn-bg-default);
-    color: var(--color-tab-capsule-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-    border-radius: calc(var(--radius-tab-capsule_button) * 1px);
-
-    &-bar {
-      position: relative;
-      // display: flex;
-      white-space: nowrap;
-      align-items: center;
-      padding-inline-start: calc(var(--spacing-tab-capsule-margin_left) * 1px);
-      height: calc(var(--height-tab-capsule) * 1px);
-      line-height: calc(var(--height-tab-capsule) * 1px);
-    }
-
-    &-active {
-      color: var(--color-tab-capsule-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-      font-weight: var(--en-single-f-c-s-fontWeight);
-      background-color: var(--color-tab-capsule_btn-bg-active);
-
-      .@{tabs-prefix-cls}-arrow {
-        color: var(--color-tab-filter_down-active);
-        transform: rotate(180deg);
-      }
-    }
-
-  }
-
-  &-selector-l {
-    flex: 1;
-    position: relative;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-    height: calc(var(--height-tab-selector_l_btn) * 1px);
-    line-height: calc(var(--height-tab-selector_l_btn) * 1px);
-    color: var(--color-tab-selector-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-
-    &-bar {
-      position: relative;
-      display: flex;
-      // background-color: #F7F8F9;
-      background-color: var(--color-tab-selector-bg-default);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
-      padding-inline-start: calc(var(--spacing-tab-selector-margin_left) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-selector-margin_right) * 1px);
-      padding-block-start: calc(var(--spacing-tab-selector-margin_top) * 1px);
-      padding-block-end: calc(var(--spacing-tab-selector-margin_bottom) * 1px);
-    }
-
-    &-active {
-      color: var(--color-tab-selector-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
-      font-weight: var(--en-single-f-c-s-fontWeight);
-      background-color: var(--color-tab-selector-bg-active);
-      box-shadow: var(--shadow-s1);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
-    }
-  }
-
-  &-selector-m {
-    flex: 1;
-    position: relative;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-    height: calc(var(--height-tab-selector_m_btn)*1px);
-    line-height: calc(var(--height-tab-selector_m_btn)*1px);
-    color: var(--color-tab-selector-text-default);
-    font-size: calc(var(--en-single-f-b-r-fontSize)* 1px);
-    font-weight: var(--en-single-f-b-r-fontWeight);
-
-    &-bar {
-      position: relative;
-      display: flex;
-      // background-color: #F7F8F9;
-      background-color: var(--color-tab-selector-bg-default);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
-      padding-inline-start: calc(var(--spacing-tab-selector-margin_left) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-selector-margin_right) * 1px);
-      padding-block-start: calc(var(--spacing-tab-selector-margin_top) * 1px);
-      padding-block-end: calc(var(--spacing-tab-selector-margin_bottom) * 1px);
-    }
-
-    &-active {
-      color: var(--color-tab-selector-text-active);
-      font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
-      font-weight: var(--en-single-f-b-s-fontWeight);
-      background-color: var(--color-tab-selector-bg-active);
-      box-shadow: var(--shadow-s1);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
-    }
-  }
-
-  &-filter {
-    flex: 1;
-    position: relative;
-    cursor: pointer;
-    text-align: center;
-    color: var(--color-tab-filter-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-
-    &-bar {
-      position: relative;
-      display: flex;
-      height: calc(var(--height-tab-filter)*1px);
-      line-height: calc(var(--height-tab-filter)*1px);
-      padding-inline-start: calc(var(--spacing-tab-filter-margin_y) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-filter-margin_y) * 1px);
-    }
-
-    &-active {
-      color: var(--color-tab-filter-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
-      font-weight: var(--en-single-f-c-s-fontWeight);
-
-      .@{tabs-prefix-cls}-arrow {
-        color: var(--color-tab-filter_down);
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  &-click-filter {
-    flex: 1;
-    position: relative;
-    cursor: pointer;
-    text-align: center;
-    color: var(--color-tab-double_click_filter-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize)* 1px);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-
-    &-bar {
-      position: relative;
-      display: flex;
-      height: calc(var(--height-tab-filter)*1px);
-      line-height: calc(var(--height-tab-filter)*1px);
-    }
-
-    &-active {
-      color: var(--color-tab-double_click_filter-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
-      font-weight: var(--en-single-f-c-s-fontWeight);
-    }
-  }
-
-  &-menu-btn {
-    cursor: pointer;
-    // position: absolute;
-    // top: 50%;
-    // transform: translateY(-50%)!important;
-    // right: 0;
-    font-size: calc(var(--icon-large) * 1px) !important;
-  }
-
-  &-text-cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-arrow {
-    display: inline-block;
-    vertical-align: -1px;
-    font-size: calc(var(--icon-small) * 1px) !important;
-    color: var(--color-tab-filter_down);
-  }
-
-  &__line {
-    &::before {
-      display: none;
-    }
-  }
-
-  &-menu {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-
-    &--right {
-      position: relative;
-      display: flex;
-      height: calc(var(--icon-large) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-primary_icon-margin_right) * 1px);
-      color: var(--text-color-h1);
-
-      &::before {
-        content: '';
-        position: absolute;
-        margin-inline-start: -16px;
-        width: 16px;
-        height: 100%;
-        background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
-      }
-
-
-    }
-
-  }
-
-
-  &__wrap--bg {
-    background-color: transparent;
-  }
-
-  &--complete {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    padding-inline-end: calc(var(--spacing-tab-primary_icon-margin_right) * 1px);
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &-text--ellipsis {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-}
-
-[lang='ar'] .vd-tabs-menu--right::before {
-  transform: scaleX(-1);
-}
-
-
-.vd-tab {
-  width: 100%;
-  display: none;
-}
-
-.vd-tab-active {
-  display: block;
-}