vdesign-ui 0.1.21 → 0.1.23

package/dist/components/step-item/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <!-- 标签选项 -->
+  <div class="vd-step-item" :class="[
+    'vd-step-' + parentProps.direction,
+    state ? 'vd-step-' + state : '',
+    isActive ? 'vd-step-active' : ''
+  ]" :style="`color:${isActive ? parentProps.activeColor : parentProps.color};`">
+    <!-- 点 -->
+    <div v-if="parentProps.direction !== 'basic'" class="vd-step-u-dot"
+      :style="`color:${isActive ? parentProps.activeColor : parentProps.color};`">
+      <vd-icon v-if="state" :svg="true" :name="iconName"></vd-icon>
+    </div>
+    <!-- 线 -->
+    <div class="vd-step-u-line" :style="`background:${isActive ? parentProps.activeColor : parentProps.color};`"></div>
+    <!-- 文本 -->
+    <div v-if="parentProps.direction !== 'basic'" class="vd-step-u-text"
+      :style="`color:${isActive ? parentProps.activeColor : parentProps.color};`">
+      <div class="vd-step-u-text__title" v-if="customTitle">
+        <slot name="title"></slot>
+      </div>
+      <div class="vd-step-u-text__title" v-else>{{ title }}</div>
+      <div class="vd-step-u-text__description" v-if="customDescription">
+        <slot name="description"></slot>
+      </div>
+      <div class="vd-step-u-text__description" v-else>{{ description }}</div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vd-step-item',
+  props: {
+    // 索引名称
+    name: {
+      type: [String, Number],
+      required: true
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    state: {
+      type: String,
+      default: '',
+    }
+  },
+  data() {
+    return {
+      isActive: false, // 激活状态
+      currentTheme: 'light', // 默认值
+    }
+  },
+  computed: {
+    // 父组件参数
+    parentProps() {
+      const { $options, _props } = this.$parent
+      return $options._componentTag === 'vd-step' ? _props : {}
+    },
+    customTitle() {
+      return !!this.$slots.title
+    },
+    customDescription() {
+      return !!this.$slots.description
+    },
+    iconName() {
+      if (this.state === 'afoot') {
+        return this.currentTheme === 'dark' ? 'icon_show_steping1' : 'icon_show_steping'
+      } else if (this.state === 'warning') {
+        return this.currentTheme === 'dark' ? 'icon_show_stepwrong1' : 'icon_show_stepwrong'
+      }
+      return ''
+    }
+  },
+  mounted() {
+    const theme = document.querySelector('html').getAttribute('theme')
+    this.currentTheme = theme ? theme : this.currentTheme
+    this.observeThemeChange()
+  },
+  watch: {
+    // 监听父组件参数
+    parentProps: {
+      handler() {
+        this.isActive = this.parentProps.active.includes(this.name)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    observeThemeChange() {
+      const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'theme') {
+            const theme = document.querySelector('html').getAttribute('theme')
+            this.currentTheme = theme ? theme : this.currentTheme
+          }
+        })
+      })
+      observer.observe(document.querySelector('html'), { attributes: true })
+
+      this.$once('hook:beforeDestroy', () => {
+        observer.disconnect()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/step-item/style.less

@@ -0,0 +1,361 @@
+@prefix: ~"vd-step-item";
+
+.@{prefix} {
+  position: relative;
+
+  &.vd-step-horizontal {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-block-start: calc((var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size) + var(--spacing-steps-horizontal_icon-margin_bottom)) * 1px);
+
+    .vd-step-u-dot {
+      position: absolute;
+      inset-inline-end: 50%;
+      transform: translateX(50%);
+      z-index: 2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: inherit;
+      width: calc(var(--icon-steps-size) * 1px);
+      height: calc(var(--icon-steps-size) * 1px);
+      inset-block-start: calc(var(--spacing-steps-horizontal-padding_x) * 1px);
+
+      .vd-iconfont {
+        color: inherit;
+        font-size: calc(var(--icon-steps-size) * 1px);
+      }
+
+      &::before {
+        content: "";
+        width: calc(var(--icon-steps-size) * 0.5px);
+        height: calc(var(--icon-steps-size) * 0.5px);
+        border-radius: 999em;
+        overflow: hidden;
+        background-color: var(--bg-color-1);
+        border: 2px solid var(--text-color-h3);
+        box-sizing: border-box;
+      }
+    }
+
+    .vd-step-u-line {
+      position: absolute;
+      inset-block-start: calc((var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size)/2) * 1px);
+      inset-inline-end: 0;
+      z-index: 1;
+      width: 100%;
+      height: calc(var(--height-steps-border-default) * 1px);
+      background: linear-gradient(to left,
+          transparent 0%,
+          transparent 50%,
+          var(--color-steps-border-default) 50%,
+          var(--color-steps-border-default) 100%);
+      background-size: 5px calc(var(--height-steps-border-default) * 1px);
+      background-repeat: repeat-x;
+    }
+
+    .vd-step-u-text {
+      min-width: 0;
+      word-break: break-word;
+      text-align: center;
+      // not_started
+      color: var(--color-steps-text-not_started);
+      font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+      font-weight: var(--en-multi-f-c-r-fontWeight);
+      line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+
+      &__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      &__description {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        // description_text
+        color: var(--color-steps-description_text);
+        font-size: calc(var(--en-multi-f-b-r-fontSize) * 1px);
+        font-weight: var(--en-multi-f-b-r-fontWeight);
+        line-height: calc(var(--en-multi-f-b-r-lineHeight) * 1px);
+      }
+    }
+
+    &.vd-step-active {
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-complete);
+        font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-multi-f-c-r-fontWeight);
+        line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+      }
+
+      .vd-step-u-dot {
+        &::before {
+          border: 2px solid var(--primary-color);
+        }
+      }
+
+      .vd-step-u-line {
+        height: calc(var(--height-steps-border-hover) * 1px);
+        background: var(--color-steps-border-hover);
+      }
+    }
+
+    &.vd-step-afoot {
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-afoot);
+        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 50%;
+        height: calc(var(--height-steps-border-hover) * 1px);
+        background: var(--color-steps-border-hover);
+      }
+    }
+
+    &.vd-step-warning {
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-warning);
+        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 50%;
+        height: calc(var(--height-steps-border-hover) * 1px);
+        background: var(--color-steps-border-hover);
+      }
+    }
+  }
+
+  // vertical
+  &.vd-step-vertical {
+    width: 100%;
+    padding-inline-start: calc((var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) + var(--spacing-steps-vertical_icon-margin_right)) * 1px);
+
+    &:not(:last-child) {
+      padding-block-end: calc(var(--spacing-steps-vertical_description_text-margin_bottom) * 1px);
+    }
+
+    .vd-step-u-dot {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: calc(var(--spacing-steps-vertical-padding_y) * 1px);
+      z-index: 2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: inherit;
+      width: calc(var(--icon-steps-size) * 1px);
+      height: calc(var(--icon-steps-size) * 1px);
+
+      .vd-iconfont {
+        color: inherit;
+        font-size: calc(var(--icon-steps-size) * 1px);
+      }
+
+      &::before {
+        content: "";
+        width: calc(var(--icon-steps-size) * 0.5px);
+        height: calc(var(--icon-steps-size) * 0.5px);
+        border-radius: 999em;
+        overflow: hidden;
+        background-color: var(--bg-color-1);
+        border: 2px solid var(--text-color-h3);
+        box-sizing: border-box;
+      }
+    }
+
+    .vd-step-u-line {
+      position: absolute;
+      z-index: 1;
+      inset-block-start: calc((var(--icon-steps-size)/2) * 1px);
+      inset-inline-start: calc((var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2) * 1px);
+      width: calc(var(--height-steps-border-default) * 1px);
+      height: 100%;
+      background: linear-gradient(to bottom,
+          transparent 0%,
+          transparent 50%,
+          var(--color-steps-border-default) 50%,
+          var(--color-steps-border-default) 100%);
+      background-size: 1px 5px;
+      background-repeat: repeat-y;
+    }
+
+    .vd-step-u-text {
+      min-width: 0;
+      word-break: break-word;
+      text-align: start;
+      // not_started
+      color: var(--color-steps-text-not_started);
+      font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+      font-weight: var(--en-multi-f-c-r-fontWeight);
+      line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+
+      &__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      &__description {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        // description_text
+        color: var(--color-steps-description_text);
+        font-size: calc(var(--en-multi-f-b-r-fontSize) * 1px);
+        font-weight: var(--en-multi-f-b-r-fontWeight);
+        line-height: calc(var(--en-multi-f-b-r-lineHeight) * 1px);
+      }
+    }
+
+    &.vd-step-active {
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-complete);
+        font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-multi-f-c-r-fontWeight);
+        line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+      }
+
+      .vd-step-u-dot {
+        &::before {
+          border: 2px solid var(--primary-color);
+        }
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        height: 100%;
+        width: calc(var(--height-steps-border-default) * 1px);
+        background: var(--color-steps-border-hover);
+      }
+
+      // 复杂 css 条件，但:has兼容性不够
+      &:not(:has(+ :is(.vd-step-active, .vd-step-afoot, .vd-step-warning))) {
+        .vd-step-u-line::after {
+          height: 50%;
+        }
+      }
+    }
+
+
+    &.vd-step-afoot {
+      .u-line::after {
+        height: 100%;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-afoot);
+        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+      }
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      &+.vd-step-active {
+        .vd-step-u-line::after {
+          height: 100%;
+        }
+      }
+    }
+
+    &.vd-step-warning {
+      .vd-step-u-line::after {
+        height: 100%;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-warning);
+        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+      }
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      &+.vd-step-active {
+        .vd-step-u-line::after {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  // basic
+  &.vd-step-basic {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: calc(var(--spacing-steps-basic-padding_top) * 1px);
+    padding-bottom: calc(var(--spacing-steps-basic-padding_bottom) * 1px);
+    margin-inline-start: calc(var(--spacing-steps-basic-padding_y) * 1px);
+
+    &:last-child {
+      margin-inline-end: calc(var(--spacing-steps-basic-padding_y) * 1px);
+    }
+
+    .vd-step-u-line {
+      width: 100%;
+      height: calc(var(--height-steps-basic-default) * 1px);
+      border-radius: calc(var(--radius-steps-basic) * 1px);
+      background: var(--color-steps-basic-default);
+    }
+
+    &.vd-step-active {
+
+      .vd-step-u-line {
+        height: calc(var(--height-steps-basic-hover) * 1px);
+        background: var(--color-steps-basic-hover);
+      }
+    }
+  }
+}
+
+
+[lang='ar'] {
+  .vd-step-horizontal .vd-step-u-dot {
+    transform: translateX(-50%);
+  }
+}

package/dist/components/style/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <h2>默认包含了一些常用样式，可以直接通过 className 的方式使用,样式文件在packages/tokens/style.less里面</h2>
+
+
+        <h3>文字省略</h3>
+        
+        <!-- 最多显示一行 -->
+        <div class="vd-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
+
+        <!-- 最多显示两行 -->
+        <div class="vd-multi-ellipsis--l2">
+        这是一段最多显示两行的文字，多余的内容会被省略
+        </div>
+
+        <!-- 最多显示三行 -->
+        <div class="vd-multi-ellipsis--l3">
+        这是一段最多显示三行的文字，多余的内容会被省略
+        </div>
+
+        <h3>1px 边框</h3>
+
+        <!-- 上边框 -->
+        <div class="vd-hairline--top"></div>
+
+        <!-- 下边框 -->
+        <div class="vd-hairline--bottom"></div>
+
+        <!-- 左边框 -->
+        <div class="vd-hairline--left"></div>
+
+        <!-- 右边框 -->
+        <div class="vd-hairline--right"></div>
+
+        <!-- 上下边框 -->
+        <div class="vd-hairline--top-bottom"></div>
+
+        <!-- 全边框 -->
+        <div class="vd-hairline--surround"></div>
+    </div>
+</template>
+

package/dist/components/switch/index.js

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

@@ -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,56 @@
+@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

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