vdesign-ui 0.2.6 → 0.2.8

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

@@ -0,0 +1,362 @@
+@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));
+
+    .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: var(--icon-steps-size);
+      height: var(--icon-steps-size);
+      inset-block-start: var(--spacing-steps-horizontal-padding_x);
+
+      .vd-iconfont {
+        color: inherit;
+        font-size: var(--icon-steps-size);
+      }
+
+      &::before {
+        content: "";
+        width: calc(var(--icon-steps-size) * 0.5);
+        height: calc(var(--icon-steps-size) * 0.5);
+        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);
+      inset-inline-end: 0;
+      z-index: 1;
+      width: 100%;
+      height: var(--height-steps-border-default);
+      background: linear-gradient(to left,
+          transparent 0%,
+          transparent 50%,
+          var(--color-steps-border-default) 50%,
+          var(--color-steps-border-default) 100%);
+      background-size: 5px var(--height-steps-border-default);
+      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: var(--en-multi-f-c-r-fontSize);
+      font-weight: var(--en-multi-f-c-r-fontWeight);
+      line-height: var(--en-multi-f-c-r-lineHeight);
+
+      &__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: var(--en-multi-f-b-r-fontSize);
+        font-weight: var(--en-multi-f-b-r-fontWeight);
+        line-height: var(--en-multi-f-b-r-lineHeight);
+      }
+    }
+
+    &.vd-step-active {
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-complete);
+        font-size: var(--en-multi-f-c-r-fontSize);
+        font-weight: var(--en-multi-f-c-r-fontWeight);
+        line-height: var(--en-multi-f-c-r-lineHeight);
+      }
+
+      .vd-step-u-dot {
+        &::before {
+          border: 2px solid var(--primary-color);
+        }
+      }
+
+      .vd-step-u-line {
+        height: var(--height-steps-border-hover);
+        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: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 50%;
+        height: var(--height-steps-border-hover);
+        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: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 50%;
+        height: var(--height-steps-border-hover);
+        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));
+
+    &:not(:last-child) {
+      padding-block-end: var(--spacing-steps-vertical_description_text-margin_bottom);
+    }
+
+    .vd-step-u-dot {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: var(--spacing-steps-vertical-padding_y);
+      z-index: 2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: inherit;
+      width: var(--icon-steps-size);
+      height: var(--icon-steps-size);
+
+      .vd-iconfont {
+        color: inherit;
+        font-size: var(--icon-steps-size);
+      }
+
+      &::before {
+        content: "";
+        width: calc(var(--icon-steps-size) * 0.5);
+        height: calc(var(--icon-steps-size) * 0.5);
+        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);
+      inset-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2);
+      width: var(--height-steps-border-default);
+      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: var(--en-multi-f-c-r-fontSize);
+      font-weight: var(--en-multi-f-c-r-fontWeight);
+      line-height: var(--en-multi-f-c-r-lineHeight);
+
+      &__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: var(--en-multi-f-b-r-fontSize);
+        font-weight: var(--en-multi-f-b-r-fontWeight);
+        line-height: var(--en-multi-f-b-r-lineHeight);
+      }
+    }
+
+
+    &.vd-step-active {
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-complete);
+        font-size: var(--en-multi-f-c-r-fontSize);
+        font-weight: var(--en-multi-f-c-r-fontWeight);
+        line-height: var(--en-multi-f-c-r-lineHeight);
+      }
+
+      .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: var(--height-steps-border-default);
+        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% !important;
+        }
+      }
+    }
+
+
+    &.vd-step-warning {
+      .vd-step-u-line::after {
+        height: 100%;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-warning);
+        font-size: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      &+.vd-step-active {
+        .vd-step-u-line::after {
+          height: 100%;
+        }
+      }
+    }
+
+
+    &.vd-step-afoot {
+      .u-line::after {
+        height: 100%;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-afoot);
+        font-size: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .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: var(--spacing-steps-basic-padding_top);
+    padding-bottom: var(--spacing-steps-basic-padding_bottom);
+    margin-inline-start: var(--spacing-steps-basic-padding_y);
+
+    &:last-child {
+      margin-inline-end: var(--spacing-steps-basic-padding_y);
+    }
+
+    .vd-step-u-line {
+      width: 100%;
+      height: var(--height-steps-basic-default);
+      border-radius: var(--radius-steps-basic);
+      background: var(--color-steps-basic-default);
+    }
+
+    &.vd-step-active {
+      .vd-step-u-line {
+        height: var(--height-steps-basic-hover);
+        background: var(--color-steps-basic-hover);
+      }
+    }
+  }
+}
+
+
+[lang='ar'] {
+  .vd-step-horizontal .vd-step-u-dot {
+    transform: translateX(-50%);
+  }
+}

package/dist/components/stepper/index.js

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

package/dist/components/stepper/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="vd-stepper" :class="wrapClasses">
+        <vd-button v-if="!position" :class="minusButtonClass" icon="icon_btn_reduce" size="small"
+            @click="onChange('minus')"></vd-button>
+        <input
+            type="number"
+            :class="inputClasses"
+            :disabled="disabled"
+            :value="currentValue"
+            :placeholder="placeholder"
+            @input="onInput"
+            @blur="onBlur"
+        >
+        <vd-button v-if="position === 'right'" class="vd-stepper__minus" icon="icon_btn_reduce" size="small"
+            @click="onChange('minus')"></vd-button>
+        <vd-button :class="plusButtonClass" icon="icon_btn_add" size="small"
+            @click="onChange('plus')"></vd-button>
+    </div>
+</template>
+
+<script>
+import VdButton from '../button';
+import languageMixin from '../mixins/languageMixin.js';
+
+const prefixCls = 'vd-stepper';
+export default {
+    mixins: [languageMixin],
+    components: {
+        VdButton,
+    },
+    name: 'vd-stepper',
+    props: {
+        value: null,
+        integer: Boolean,
+        position: String,
+        inputCenter: Boolean,
+        disabled: Boolean,
+        theme: String,
+        min: {
+            type: [String, Number],
+            default: 1
+        },
+        max: {
+            type: [String, Number],
+            default: Infinity
+        },
+        step: {
+            type: [String, Number],
+            default: 1
+        },
+        placeholder: String
+    },
+    data() {
+        let value;
+        if (this.isDef(this.value)) {
+            value = this.range(this.value);
+            if (value !== this.value) {
+                this.$emit('input', value);
+            }
+        } else {
+            value = '';
+        }
+        return {
+            currentValue: value,
+        };
+    },
+    computed: {
+        inputClasses() {
+            return [
+                `${prefixCls}-input`,
+            ]
+        },
+        wrapClasses() {
+            return [
+                {
+                    [`${prefixCls}--disabled`]: this.disabled,
+                    [`${prefixCls}--${this.theme}`]: this.theme,
+                    [`${prefixCls}--center`]: this.inputCenter
+                }
+            ]
+        },
+        minusButtonClass() {
+            const hairlineClass = this.language === 'ar' ? 'vd-hairline--left' : 'vd-hairline--right';
+            return `vd-stepper__minus ${hairlineClass}`;
+        },
+        plusButtonClass() {
+            const hairlineClass = this.language === 'ar' ? 'vd-hairline--right' : 'vd-hairline--left';
+            return `vd-stepper__plus ${hairlineClass}`;
+        }
+    },
+    watch: {
+        value(val) {
+            if (val !== this.currentValue) {
+                this.currentValue = this.format(val);
+            }
+        },
+        currentValue(val) {
+            this.$emit('input', val);
+            this.$emit('change', val);
+        }
+    },
+    methods: {
+        format(value) {
+            if (value === '' || value === null || value === undefined) {
+                return '';
+            }
+            value = String(value).replace(/[^0-9.-]/g, '');
+            return this.integer ? Math.floor(value) : +value;
+        },
+        // limit value range
+        range(value) {
+            value = this.format(value);
+            if (value === '') {
+                return value;
+            }
+            return Math.max(Math.min(this.max, value), this.min);
+        },
+        onInput(event) {
+            const { value } = event.target;
+            const formatted = this.format(value);
+            if (value !== String(formatted)) {
+                event.target.value = formatted;
+            }
+            this.currentValue = formatted;
+        },
+        onChange(type) {
+            if (this[`${type}Disabled`]) {
+                this.$emit('overlimit', type);
+                return;
+            }
+            const diff = type === 'minus' ? -this.step : +this.step;
+            let value = this.currentValue === '' ? 0 : this.currentValue;
+            value = Math.round((value + diff) * 100) / 100;
+            this.currentValue = this.range(value);
+            this.$emit(type);
+        },
+        onBlur(event) {
+            this.currentValue = this.range(this.currentValue);
+            this.$emit('blur', event);
+        },
+        isDef(value) {
+            return value !== undefined && value !== null;
+        }
+    }
+}
+</script>

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: var(--width-switch-bg);
+  height: var(--height-switch-bg);
+  border-radius: var(--radius-switch-bg);
+  background: var(--color-switch-off_bg-default);
+  cursor: pointer;
+
+  &-round {
+    box-sizing: border-box;
+    position: absolute;
+    top: calc(var(--height-switch-bg) * -0.5);
+    left: 0;
+    transition: transform .3s;
+    width: var(--height-switch-button);
+    height: var(--height-switch-button);
+    border-radius: var(--radius-switch-button);
+    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(var(--height-switch-button));
+      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/tab/index.js

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