vdesign-ui 0.2.6 → 0.2.7

package/dist/components/slider/style.less

@@ -0,0 +1,100 @@
+@silder-prefix-cls: vd-slider;
+
+.@{silder-prefix-cls} {
+
+    &__wrap {
+        position: relative;
+        margin: 7px 0;
+        height: var(--height-slider-track);
+        background-color: var(--color-slider-track-default);
+        border-radius: var(--radius-slider-track);
+        
+        &--demonstration {
+            height: var(--height-slider-mark_track);
+            border-radius: var(--radius-slider-mark_track);
+        }
+    }
+
+    &__bar {
+        position: absolute;
+        top: 0;
+        height: var(--height-slider-track);
+        background-color: var(--color-slider-track-focus);
+        border-radius: var(--radius-slider-track);
+
+        &--demonstration {
+            height: var(--height-slider-mark_track);
+        }
+    }
+
+    &__button {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        cursor: grab;
+        border-radius: 50%;
+        width: var(--width-slider-handle);
+        height: var(--width-slider-handle);
+        background-color: var(--color-slider-handle-bg);
+        border: var(--width-slider-handle_border) solid var(--color-slider-handle_border-default);
+
+        &--demonstration {
+            width: var(--width-slider-mark_handle);
+            height: var(--height-slider-mark_handle);
+            border-radius: var(--radius-slider-mark_handle);
+            border: var(--width-slider-mark_handle_border) solid var(--color-slider-handle_border-default);
+        }
+
+        &--active {
+            border-color: var(--color-slider-handle_border-focus);
+        }
+    }
+
+    &__marks {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--spacing-slider-margin_bottom);
+        font-size: var(--en-single-f-a-r-fontSize);
+        font-weight: var(--en-single-f-a-r-fontWeight);
+        color: var(--color-slider-mark-text);
+
+        &--top {
+            margin-top: 0;
+            margin-bottom: var(--spacing-slider-margin_bottom);
+        }
+
+        &--active {
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+        }
+
+        &--hidden {
+            opacity: 0;
+        }
+    }
+
+    &__dots {
+        position: absolute;
+        width: 1px;
+        height: 3px;
+        border-radius: 4px;
+        background-color: #fff;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        &--active {
+            height: 5px;
+        }
+    }
+
+    &__tips {
+        position: absolute;
+        left: 50%;
+        top: calc(-1 * var(--height-slider-mark_handle) - 8px);
+        transform: translateX(-50%);
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-slider-mark-text-focus);
+    }
+}

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,58 @@
+@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: var(--spacing-steps-vertical-padding_x);
+    padding-block-end: var(--spacing-steps-vertical-padding_x);
+
+    .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,126 @@
+<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>
+import VdIcon from '../icon';
+import { inBrowser } from '../utils/env';
+
+export default {
+  name: 'vd-step-item',
+  components: {
+    VdIcon
+  },
+  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_svg' : 'icon_show_steping_svg'
+      } else if (this.state === 'warning') {
+        return this.currentTheme === 'dark' ? 'icon_show_stepwrong1_svg' : 'icon_show_stepwrong_svg'
+      }
+      return ''
+    }
+  },
+  mounted() {
+    if (inBrowser) {
+      const theme = document.querySelector('html').getAttribute('theme');
+      this.currentTheme = theme || this.currentTheme;
+      this.observeThemeChange();
+    }
+  },
+  watch: {
+    // 监听父组件参数
+    parentProps: {
+      handler() {
+        this.isActive = this.parentProps.active.includes(this.name)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    observeThemeChange() {
+      if (!inBrowser) return; // SSR 环境中不执行
+      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>