vdesign-ui 0.1.19 → 0.1.20

package/dist/components/slider/utils.js

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

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

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

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

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

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