vdesign-ui 0.2.12 → 0.2.14

package/dist/components/step/index.vue

@@ -1,48 +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>
+<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 +1,66 @@
-@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;
-  }
-}
+@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%;
+          right: 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;
+  }
+}
+
+[lang='ar'] {
+  .vd-step.vd-step-horizontal .vd-step-item:last-child .vd-step-u-line {
+    right: inherit;
+    left: 50%;
+  }
+}

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

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