vdesign-ui 0.2.4 → 0.2.6

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

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

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

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

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

@@ -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: 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

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