vdesign-ui 0.1.9 → 0.1.10

package/dist/components/switch/index.vue

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

@@ -0,0 +1,54 @@
+@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);
+    }
+  }
+
+  // 选中&&禁用
+  &-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);
+    }
+  }
+}

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,185 @@
+<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), 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="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, Boolean],
+    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 {
+      // defType: ['primary', 'card', 'secondary','capsule','selector-l','selector-m', 'filter', 'click-filter'],
+      currentValue: this.value,
+      navList: [],
+    };
+  },
+  watch: {
+    value(val) {
+      this.currentValue = val;
+    },
+    currentValue() {
+      this.updateStatus();
+    },
+  },
+  computed: {
+    ellipsisClasses() {
+      return [
+        {
+          [`${prefixCls}-text--ellipsis`]: this.ellipsis,
+        },
+      ];
+    },
+    menuClasses() {
+      return [
+        {
+          [`${prefixCls}-menu`]: this.menu,
+          [`${prefixCls}__wrap--bg`]: this.backgroundColor,
+          // 二级tab才有线
+          "vd-hairline--bottom": this.divider,
+        },
+      ];
+    },
+    scrollspy() {
+      return [
+        {
+          [`${prefixCls}--complete`]: this.menu,
+        },
+      ];
+    },
+    lineClasses() {
+      return [
+        {
+          [`${prefixCls}__line`]: !this.actBorder,
+        },
+      ];
+    },
+    barType() {
+      return [
+        {
+          [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
+        },
+      ];
+    },
+  },
+  methods: {
+    emitMenuClick() {
+      this.$emit('menu-click');
+    },
+    tabClasses(item) {
+      let active = "";
+      const tabsType = this.tabsType;
+      const tabsBaseClass = `${prefixCls}-${tabsType}`;
+
+      if (item.name === this.currentValue) {
+        active = `${prefixCls}-${tabsType}-active`;
+      }
+
+      return [tabsBaseClass, active];
+    },
+    getTabs() {
+      return this.$children.filter((item) => item.$options.name === "vd-tab");
+    },
+    updateNav() {
+      this.navList = [];
+      this.getTabs().forEach((pane, index) => {
+        this.navList.push({
+          title: pane.title,
+          name: pane.name || index,
+          arrow: pane.arrow,
+        });
+        if (!pane.name) {
+          pane.name = index;
+        }
+        if (index == 0) {
+          if (!this.currentValue) {
+            this.currentValue = pane.name || index;
+          }
+        }
+      });
+      this.updateStatus();
+    },
+    updateStatus() {
+      this.getTabs().forEach((tab) => {
+        tab.show = tab.name === this.currentValue;
+      });
+    },
+    handleChange(index) {
+      const nav = this.navList[index];
+      const name = nav.name;
+      const title = nav.title;
+
+      if (this.currentValue !== name) {
+        this.currentValue = name;
+        const eventData = {
+          index: index,
+          title: title,
+          name: name
+        };
+        this.$emit('change', eventData);
+
+        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",
+          });
+        }
+      }
+      const eventData = {
+        index: index,
+        title: title,
+        name: name
+      };
+      this.$emit("click", eventData);
+    },
+  },
+  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%;
+    // 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;
+      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;
+      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);
+    
+      &::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;
+}
+
+