vdesign-ui 0.1.17 → 0.1.19

package/dist/components/slider/utils.js

@@ -1,60 +0,0 @@
-import Vue from 'vue';
-const isServer = Vue.prototype.$isServer;
-
-/* istanbul ignore next */
-export const on = (function() {
-    if (!isServer && document.addEventListener) {
-        return function(element, event, handler, useCapture = false) {
-            if (element && event && handler) {
-                element.addEventListener(event, handler, useCapture);
-            }
-        };
-    } else {
-        return function(element, event, handler) {
-            if (element && event && handler) {
-                element.attachEvent('on' + event, handler);
-            }
-        };
-    }
-})();
-
-/* istanbul ignore next */
-export const off = (function() {
-    if (!isServer && document.removeEventListener) {
-        return function(element, event, handler, useCapture = false) {
-            if (element && event) {
-                element.removeEventListener(event, handler, useCapture);
-            }
-        };
-    } else {
-        return function(element, event, handler) {
-            if (element && event) {
-                element.detachEvent('on' + event, handler);
-            }
-        };
-    }
-})();
-
-const SPECIAL_CHARS_REGEXP = /[:-_]+./g;
-const MOZ_HACK_REGEXP = /^moz([A-Z])/;
-
-function camelCase(name) {
-    return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
-        return offset ? letter.toUpperCase() : letter;
-    }).replace(MOZ_HACK_REGEXP, 'Moz$1');
-}
-
-// getStyle
-export function getStyle (element, styleName) {
-    if (!element || !styleName) return null;
-    styleName = camelCase(styleName);
-    if (styleName === 'float') {
-        styleName = 'cssFloat';
-    }
-    try {
-        const computed = document.defaultView.getComputedStyle(element, '');
-        return element.style[styleName] || computed ? computed[styleName] : null;
-    } catch(e) {
-        return element.style[styleName];
-    }
-}

package/dist/components/step/index.js

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

package/dist/components/step/index.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="vd-step" :class="'vd-step-' + direction">
-    <slot></slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'vd-step',
-  props: {
-    // 激活状态
-    active: {
-      type: Array,
-      required: true
-    },
-    // 显示方向
-    direction: {
-      type: String,
-      default: 'horizontal' // horizontal|vertical|basic
-    },
-    // 置灰颜色
-    color: {
-      type: String,
-      default: ''
-    },
-    // 激活颜色
-    activeColor: {
-      type: String,
-      default: ''
-    },
-    // 置灰图标
-    icon: {
-      type: String,
-      default: ''
-    },
-    // 激活图标
-    activeIcon: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/step/style.less

@@ -1,59 +0,0 @@
-@prefix: ~"vd-step";
-
-.@{prefix} {
-  transform: translateX(0);
-  width: 100%;
-  overflow: hidden;
-
-  &.vd-step-horizontal {
-    display: flex;
-    justify-content: space-between;
-
-    .vd-step-item {
-
-      &:first-child {
-        .vd-step-u-line {
-          width: 50%;
-
-          &::after {
-            width: 0%;
-          }
-        }
-      }
-
-      &:last-child {
-        .vd-step-u-line {
-          width: 50%;
-          inset-inline-end: 50%;
-
-          &::after {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  &.vd-step-vertical {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    padding-block-start: calc(var(--spacing-steps-vertical-padding_x) * 1px);
-    padding-block-end: calc(var(--spacing-steps-vertical-padding_x) * 1px);
-
-    .vd-step-item {
-
-      &:last-child {
-
-        .vd-step-u-line {
-          display: none;
-        }
-      }
-    }
-  }
-
-  &.vd-step-basic {
-    display: flex;
-    justify-content: space-between;
-  }
-}

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

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

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

@@ -1,89 +0,0 @@
-<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 :name="`${parentProps[isActive ? 'activeIcon' : 'icon']}`"></vd-icon> -->
-      <!-- {{ state }} -->
-      <vd-icon v-if="state" svg
-        :name="state === 'afoot' ? 'icon_show_steping' : state === 'warning' ? 'icon_show_stepwrong' : ''"></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: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    state: {
-      type: String,
-      default: '',
-    }
-  },
-  data() {
-    return {
-      isActive: false // 激活状态
-    }
-  },
-  computed: {
-    // 父组件参数
-    parentProps() {
-      const { $options, _props } = this.$parent
-      return $options._componentTag === 'vd-step' ? _props : {}
-    },
-    customTitle() {
-      return !!this.$slots.title
-    },
-    customDescription() {
-      return !!this.$slots.description
-    }
-  },
-  watch: {
-    // 监听父组件参数
-    parentProps: {
-      handler() {
-        this.isActive = this.parentProps.active.includes(this.name)
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-}
-</script>
-<style lang="less">
-@import './style.less';
-</style>

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

@@ -1,361 +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)) * 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: #fff;
-        border: 2px solid #ccc;
-        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 #1BC47D;
-        }
-      }
-
-      .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: #fff;
-        border: 2px solid #ccc;
-        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 #1BC47D;
-        }
-      }
-
-      .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

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