vdesign-ui 0.2.4 → 0.2.6

package/dist/components/slider/style.less

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

@@ -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,58 +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: 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

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