vdesign-ui 0.2.6 → 0.2.8

package/dist/components/tab/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <div :class="tabClasses">
+        <slot v-if="shouldRender" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'vd-tab',
+    props: {
+        name: [String, Number],
+        title: {
+            type: String,
+        },
+        arrow: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            isRendered: false,
+        };
+    },
+    watch: {
+        isActive(newVal) {
+            if (newVal && !this.isRendered) {
+                this.isRendered = true;
+            }
+        },
+    },
+    computed: {
+        isActive() {
+            return this.computedName === this.$parent.currentValue;
+            },
+        tabClasses() {
+            return {
+                'vd-tab': true,
+                'vd-tab-active': this.isActive,
+            };
+        },
+        computedName() {
+            return this.name != null
+                ? this.name
+                : this.$parent.tabs.indexOf(this);
+            },
+        shouldRender() {
+            if (this.$parent.lazyRender) {
+                return this.isRendered || this.isActive;
+            } else {
+                return true;
+            }
+        },
+        computedTitle() {
+        // Since the title slot is now handled by vd-tabs, we return the title prop
+            return this.title;
+        },
+    },
+    created() {
+        this.$parent.registerTab(this);
+    },
+    beforeDestroy() {
+        this.$parent.unregisterTab(this);
+    },
+};
+</script>
+
+<style lang="less"></style>

package/dist/components/tabs/index.js

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

@@ -0,0 +1,180 @@
+<template>
+  <div class="vd-tabs" :class="stickyClasses">
+    <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
+      <div class="vd-tabs__nav" :class="[barType,scrollspy]" ref="tabsContainer">
+        <div v-for="(item, index) in navList" :key="index" :class="[tabClasses(item), lineClasses]" @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="menuIconComputed" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
+      </div>
+    </div>
+    <div class="vd-tabs__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import VdIcon from "../icon";
+const prefixCls = "vd-tabs";
+export default {
+  name: "vd-tabs",
+  components: {
+    VdIcon,
+  },
+  props: {
+    value: [String, Number],
+    tabsType: {
+      type: String,
+      default: "primary",
+    },
+    // 将 menu 作为一个字段，同时控制显示和图标名称
+    menu: {
+      type: [Boolean, String],
+      default: false,
+    },
+    ellipsis: {
+      type: Boolean,
+      default: true,
+    },
+    actBorder: Boolean,
+    backgroundColor: Boolean,
+    divider: Boolean,
+    sticky: Boolean,
+    lazyRender: Boolean,
+  },
+  data() {
+    return {
+      currentValue: this.value, // 当前选中的标签名
+      navList: [], // 标签导航列表
+      tabs: [], // 已注册的标签
+    };
+  },
+  watch: {
+    // 监听 value 变化，更新 currentValue
+    value(val) {
+      this.currentValue = val;
+    },
+  },
+  computed: {
+    // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
+    menuIconComputed() {
+      if (typeof this.menu === 'string') {
+        return this.menu;
+      } else {
+        return 'icon_tab_morelist'; // 默认的菜单图标名称
+      }
+    },
+    // 计算滚动监视的类名
+    scrollspy() {
+      return  `${prefixCls}--complete`
+    },
+    // 计算标签文字是否需要省略号的类名
+    ellipsisClasses() {
+      return {
+        [`${prefixCls}-text--ellipsis`]: this.ellipsis,
+      };
+    },
+    // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
+    menuClasses() {
+      return {
+        [`${prefixCls}-menu`]: this.menu,
+        [`${prefixCls}__wrap--bg`]: this.backgroundColor,
+        "vd-hairline--bottom": this.divider,
+      };
+    },
+    // 计算标签下方线条的类名
+    lineClasses() {
+      return {
+        [`${prefixCls}__line`]: !this.actBorder,
+      };
+    },
+    // 根据 tabsType 属性计算标签类型的类名
+    barType() {
+      return {
+        [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
+      };
+    },
+    stickyClasses() {
+      return {
+        [`${prefixCls}--sticky`]: this.sticky,
+      };
+    },
+  },
+  methods: {
+    // 当菜单按钮被点击时触发事件
+    emitMenuClick() {
+      this.$emit('menu-click');
+    },
+    // 计算每个标签项的类名
+    tabClasses(item) {
+      return {
+        [`${prefixCls}-${this.tabsType}`]: true,
+        [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
+      };
+    },
+     // 注册新的标签到 tabs 数组中
+    registerTab(tab) {
+      if (!this.tabs.includes(tab)) {
+        this.tabs.push(tab);
+        this.updateNav();
+      }
+    },
+     // 从 tabs 数组中注销一个标签
+    unregisterTab(tab) {
+      const index = this.tabs.indexOf(tab);
+      if (index !== -1) {
+        this.tabs.splice(index, 1);
+        this.updateNav();
+      }
+    },
+    // 根据已注册的标签更新导航列表
+    updateNav() {
+      this.navList = this.tabs.map((tab, index) => ({
+        title: tab.title,
+        name: tab.name != null ? tab.name : index,
+        arrow: tab.arrow,
+      }));
+       // 如果当前没有选中的标签且导航列表不为空，则将第一个标签设为当前值
+      if (!this.currentValue && this.navList.length) {
+        this.currentValue = this.navList[0].name;
+        this.$emit("input", this.currentValue);
+      }
+    },
+    handleChange(index) {
+      const nav = this.navList[index];
+      const name = nav.name;
+      if (this.currentValue !== name) {
+        this.currentValue = name;
+        this.$emit("input", name); // 触发 input 事件，更新父组件中的 v-model 绑定值
+        this.$emit("change", { index, title: nav.title, name }); // 触发 change 事件，传递标签的详细信息
+        this.adjustTabPosition(index); // 调整选中标签的位置
+      }
+      this.$emit("click", { index, title: nav.title, name }); // 触发 click 事件，传递标签的详细信息
+    },
+    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">
+@import "./style.less";
+</style>

package/dist/components/tabs/style.less

@@ -0,0 +1,383 @@
+@tabs-prefix-cls: vd-tabs;
+
+.@{tabs-prefix-cls} {
+
+  &__wrap {
+    position: relative;
+    width: 100%;
+  }
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+  }
+
+  &-primary {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    padding-inline-start: var(--spacing-tab-primary-padding_left);
+    padding-inline-end: var(--spacing-tab-primary-padding_right);
+    color: var(--color-tab-primary-text-default);
+    font-size: var(--en-single-f-d-r-fontSize);
+    font-weight: var(--en-single-f-d-r-fontWeight);
+  
+    &-bar {
+      position: relative;
+      white-space: nowrap;
+      padding-inline-start: var(--spacing-tab-primary-margin_left);
+      height: var(--height-super-large);
+      line-height: var(--height-super-large);
+    }
+  
+    &-active {
+      color: var(--color-tab-primary-text-active);
+      font-size: var(--en-single-f-e-s-fontSize);
+      font-weight: var(--en-single-f-e-s-fontWeight);
+  
+      &::before {
+        content: "";
+        bottom: 11px;
+        height: var(--height-tab-primary-bar);
+        width: var(--width-tab-primary-bar);
+        display: block;
+        position: absolute;
+        background-color: var(--color-tab-primary-bar-active);
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: var(--radius-tab-primary_bar);
+      }
+    }
+  }  
+
+  &-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: var(--en-single-f-d-r-fontSize);
+    font-weight: var(--en-single-f-d-r-fontWeight);
+  
+    &-bar {
+      position: relative;
+      display: flex;
+      padding-inline-start: 20px;
+      padding-inline-end: 20px;
+      height: var(--height-super-large);
+      line-height: var(--height-super-large);
+    }
+  
+    &-active {
+      color: var(--color-tab-primary-text-active);
+      font-size: var(--en-single-f-e-s-fontSize);
+      font-weight: var(--en-single-f-e-s-fontWeight);
+  
+      &::before {
+        content: "";
+        bottom: 11px;
+        height: var(--height-tab-primary-bar);
+        width: var(--width-tab-primary-bar);
+        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: var(--spacing-tab-secondary-padding_left);
+    margin-inline-end: var(--spacing-tab-secondary-padding_right);
+    color: var(--color-tab-primary-text-default);
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeigh);
+
+    &-bar {
+      display: flex;
+      align-items: center;
+      position: relative;
+      padding-inline-start: var(--spacing-tab-secondary-margin_left);
+      height: var(--height-tab-secondary);
+      line-height: var(--height-tab-secondary);
+    }
+
+    &-active {
+      color: var(--color-tab-primary-text-active);
+      font-size: var(--en-single-f-c-s-fontSize);
+      font-weight: var(--en-single-f-c-s-fontWeight);
+
+      &::before {
+        content: "";
+        bottom: 0;
+        height: var(--height-tab-secondary-bar);
+        display: block;
+        position: absolute;
+        background-color: var(--color-tab-secondary-bar-active);
+        left: 0;
+        right: 0;
+        width: 100%;
+        border-radius: var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_bottom) var(--radius-tab-secondary-bar_bottom);
+      }
+    }
+  }
+
+  &-capsule {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    height: var(--height-tab-capsule_btn);
+    line-height: var(--height-tab-capsule_btn);
+    padding-inline-start: var(--spacing-tab-capsule_btn-padding_left);
+    padding-inline-end: var(--spacing-tab-capsule_btn-padding_right);
+    margin-inline-start: var(--spacing-tab-capsule_btn-margin_right);
+    margin-inline-end: var(--spacing-tab-capsule_btn-margin_right);
+    background-color: var(--color-tab-capsule_btn-bg-default);
+    color: var(--color-tab-capsule-text-default);
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    border-radius: var(--radius-tab-capsule_button);
+  
+    &-bar {
+      position: relative;
+      white-space: nowrap;
+      align-items: center;
+      padding-inline-start: var(--spacing-tab-capsule-margin_left);
+      height: var(--height-tab-capsule);
+      line-height: var(--height-tab-capsule);
+    }
+  
+    &-active {
+      color: var(--color-tab-capsule-text-active);
+      font-size: var(--en-single-f-c-s-fontSize);
+      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: var(--height-tab-selector_l_btn);
+    line-height: var(--height-tab-selector_l_btn);
+    color: var(--color-tab-selector-text-default);
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+  
+    &-bar {
+      position: relative;
+      display: flex;
+      background-color: var(--color-tab-selector-bg-default);
+      border-radius: var(--radius-tab-selector_card);
+      padding-inline-start: var(--spacing-tab-selector-margin_left);
+      padding-inline-end: var(--spacing-tab-selector-margin_right);
+      padding-block-start: var(--spacing-tab-selector-margin_top);
+      padding-block-end: var(--spacing-tab-selector-margin_bottom);
+    }
+  
+    &-active {
+      color: var(--color-tab-selector-text-active);
+      font-size: var(--en-single-f-c-s-fontSize);
+      font-weight: var(--en-single-f-c-s-fontWeight);
+      background-color: var(--color-tab-selector-bg-active);
+      box-shadow: var(--shadow-s1);
+      border-radius: var(--radius-tab-selector_card);
+    }
+  }
+  
+  &-selector-m {
+    flex: 1;
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+    height: var(--height-tab-selector_m_btn);
+    line-height: var(--height-tab-selector_m_btn);
+    color: var(--color-tab-selector-text-default);
+    font-size: var(--en-single-f-b-r-fontSize);
+    font-weight: var(--en-single-f-b-r-fontWeight);
+  
+    &-bar {
+      position: relative;
+      display: flex;
+      background-color: var(--color-tab-selector-bg-default);
+      border-radius: var(--radius-tab-selector_card);
+      padding-inline-start: var(--spacing-tab-selector-margin_left);
+      padding-inline-end: var(--spacing-tab-selector-margin_right);
+      padding-block-start: var(--spacing-tab-selector-margin_top);
+      padding-block-end: var(--spacing-tab-selector-margin_bottom);
+    }
+  
+    &-active {
+      color: var(--color-tab-selector-text-active);
+      font-size: var(--en-single-f-b-s-fontSize);
+      font-weight: var(--en-single-f-b-s-fontWeight);
+      background-color: var(--color-tab-selector-bg-active);
+      box-shadow: var(--shadow-s1);
+      border-radius: var(--radius-tab-selector_card);
+    }
+  }
+  
+
+  &-filter {
+    flex: 1;
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+    color: var(--color-tab-filter-text-default);
+    font-size: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+  
+    &-bar {
+      position: relative;
+      display: flex;
+      height: var(--height-tab-filter);
+      line-height: var(--height-tab-filter);
+      padding-inline-start: var(--spacing-tab-filter-margin_y);
+      padding-inline-end: var(--spacing-tab-filter-margin_y);
+    }
+  
+    &-active {
+      color: var(--color-tab-filter-text-active);
+      font-size: var(--en-single-f-c-s-fontSize);
+      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: var(--en-single-f-c-r-fontSize);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+  
+    &-bar {
+      position: relative;
+      display: flex;
+      height: var(--height-tab-filter);
+      line-height: var(--height-tab-filter);
+    }
+  
+    &-active {
+      color: var(--color-tab-double_click_filter-text-active);
+      font-size: var(--en-single-f-c-s-fontSize);
+      font-weight: var(--en-single-f-c-s-fontWeight);
+    }
+  }
+  
+
+  &-menu-btn {
+    cursor: pointer;
+    font-size: var(--icon-large)!important;
+  }
+
+  &-text-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-arrow {
+    display: inline-block;
+    vertical-align: -1px;
+    font-size: var(--icon-small) !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: var(--icon-large);
+      padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
+      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: var(--spacing-tab-primary_icon-margin_right);
+
+    &::-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;
+}

package/dist/components/tag/index.js

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

package/dist/components/tag/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="vd-tag" :class="classes"  @click="handleClick">
+    <slot>{{ text }}</slot>
+  </div>
+</template>
+
+<script>
+const prefixCls = 'vd-tag'
+export default {
+  name: 'vd-tag',
+  props: {
+    text: String,
+    type: {
+      type: String,
+      // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
+      default: '',
+      validator(value) {
+        return [
+          'white', 'dark', 'blue', 'cyan', 'green',
+          'olive', 'yellow', 'orange', 'red', 'pink', 'purple',
+        ].includes(value);
+      },
+    },
+    size: {
+      type: String,
+      required: true,
+      validator(value) {
+      return ['s', 'l'].includes(value);
+    },
+    },
+    borders: {
+      type: Boolean,
+    },
+    plain: {
+      type: Boolean,
+    }
+
+  },
+  computed: {
+    classes() {
+      const classes = {
+        [`${prefixCls}--${this.size}`]: this.size,
+        [`${prefixCls}--${this.type}`]: this.type,
+        [`${prefixCls}--${this.type}__border`]: this.borders,
+        [`${prefixCls}--plain`]: this.plain
+      };
+      if (this.borders) {
+        classes['vd-hairline--surround'] = true;
+      }
+      return classes
+
+    },
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>