hy-app 0.3.0 → 0.3.2

package/components/hy-steps/hy-steps.vue

@@ -1,7 +1,10 @@
 <template>
   <view :class="[`hy-steps--${direction}`, 'hy-steps']">
     <template v-for="(item, i) in list" :key="i">
-      <view ref="hy-steps-item" :class="[`hy-steps-item--${direction}`, 'hy-steps-item']">
+      <view
+        ref="hy-steps-item"
+        :class="[`hy-steps-item--${direction}`, 'hy-steps-item']"
+      >
         <!--	线条	-->
         <view
           v-if="i > 0"
@@ -34,7 +37,10 @@
                 backgroundColor: statusColor(i, item?.error),
               }"
             ></view>
-            <view class="hy-steps-item__wrapper__icon" v-else-if="activeIcon || inactiveIcon">
+            <view
+              class="hy-steps-item__wrapper__icon"
+              v-else-if="activeIcon || inactiveIcon"
+            >
               <HyIcon
                 :name="i <= current ? activeIcon : inactiveIcon"
                 :size="iconSize"
@@ -45,28 +51,35 @@
               v-else
               :style="{
                 backgroundColor:
-                  statusClass(i, item.error) === 'process' ? activeColor : 'transparent',
+                  statusClass(i, item.error) === 'process'
+                    ? activeColor
+                    : 'transparent',
                 borderColor: statusColor(i, item?.error),
               }"
               class="hy-steps-item__wrapper__circle"
             >
               <text
                 v-if="
-                  statusClass(i, item.error) === 'process' || statusClass(i, item.error) === 'wait'
+                  statusClass(i, item.error) === 'process' ||
+                  statusClass(i, item.error) === 'wait'
                 "
                 class="hy-steps-item__wrapper__circle__text"
                 :style="{
-                  color: i == current ? '#ffffff' : inactiveColor,
+                  color: textColor(i),
                 }"
               >
                 {{ i + 1 }}
               </text>
               <HyIcon
                 v-else
-                :color="statusClass(i, item.error) === 'error' ? 'error' : activeColor"
+                :color="
+                  statusClass(i, item.error) === 'error' ? 'error' : activeColor
+                "
                 :size="iconSize"
                 :name="
-                  statusClass(i, item.error) === 'error' ? IconConfig.CLOSE : IconConfig.CHECK_MASK
+                  statusClass(i, item.error) === 'error'
+                    ? IconConfig.CLOSE
+                    : IconConfig.CHECK_MASK
                 "
               ></HyIcon>
             </view>
@@ -83,17 +96,21 @@
           <slot name="content" :record="item" :index="i">
             <slot name="title" :title="item.title" :index="i">
               <text
-                :class="[current == i && 'hy-steps-item__content__title--active']"
-                :style="{
-                  lineHeight: '20px',
-                  fontSize: current == i ? '14px' : '13px',
-                }"
+                :class="[
+                  'hy-steps-item__content__title',
+                  current == i && 'hy-steps-item__content__title--active',
+                  current == i &&
+                    item.error &&
+                    'hy-steps-item__content__title--error',
+                ]"
               >
                 {{ item.title }}
               </text>
             </slot>
             <slot name="desc" :desc="item.desc" :index="i">
-              <text :style="{ fontSize: '12px', color: '#999' }">{{ item.desc }}</text>
+              <text :style="{ fontSize: '12px', color: '#999' }">{{
+                item.desc
+              }}</text>
             </slot>
           </slot>
         </view>
@@ -105,31 +122,31 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-steps',
+  name: "hy-steps",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, onMounted, getCurrentInstance, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IStepsEmits } from './typing'
-import type { StepListVo } from './typing'
-import { addUnit, getRect } from '../../utils'
-import { ColorConfig, IconConfig } from '../../config'
+import { computed, ref, onMounted, getCurrentInstance, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IStepsEmits } from "./typing";
+import type { StepListVo } from "./typing";
+import { addUnit, getRect } from "../../utils";
+import { ColorConfig, IconConfig } from "../../config";
 
 /**
  * 一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
  * @displayName hy-steps
  */
-defineOptions({})
+defineOptions({});
 
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -149,12 +166,18 @@ const props = defineProps({
    * */
   direction: {
     type: String,
-    default: 'row',
+    default: "row",
   },
   /** 激活状态颜色 */
-  activeColor: String,
+  activeColor: {
+    type: String,
+    default: "",
+  },
   /** 未激活状态颜色 */
-  inactiveColor: String,
+  inactiveColor: {
+    type: String,
+    default: "",
+  },
   /** 激活状态的图标 */
   activeIcon: String,
   /** 未激活状态图标 */
@@ -169,112 +192,117 @@ const props = defineProps({
     type: [String, Number],
     default: 17,
   },
-})
-const { current, list, direction, dot, inactiveColor, activeColor } = toRefs(props)
-const emit = defineEmits<IStepsEmits>()
+});
+const emit = defineEmits<IStepsEmits>();
 
 const size = ref<UniApp.NodeInfo>({
   height: 0,
   width: 0,
-})
-const instance = getCurrentInstance()
+});
+const instance = getCurrentInstance();
 
 watch(
-  () => current.value,
+  () => props.current,
   (newVal: number) => {
-    if (list.value[newVal - 1]?.error) {
-      const index = list.value.findIndex((item) => item.error)
-      emit('update:current', index)
-      emit('change', index)
+    if (props.list[newVal - 1]?.error) {
+      const index = props.list.findIndex((item) => item.error);
+      emit("update:current", index);
+      emit("change", index);
     }
   },
-)
+);
+
+// 字体颜色
+const textColor = computed(() => {
+  return (index: number) =>
+    index == props.current ? "#ffffff" : props.inactiveColor;
+});
 
 /**
  * @description 线条样式
  * */
 const lineStyle = computed(() => {
   return (temp: StepListVo, index: number): CSSProperties => {
-    const style: CSSProperties = {}
-    if (direction.value === 'row') {
-      style.width = addUnit(size.value.width! - 25)
-      style.left = addUnit(-size.value.width! / 2 + 12)
+    const style: CSSProperties = {};
+    if (props.direction === "row") {
+      style.width = addUnit(size.value.width! - 25);
+      style.left = addUnit(-size.value.width! / 2 + 12);
     } else {
-      style.height = addUnit(size.value.height! - 30)
-      style.top = addUnit(25)
+      style.height = addUnit(size.value.height! - 30);
+      style.top = addUnit(25);
     }
     style.backgroundColor = temp.error
-      ? ''
-      : index < current.value
-        ? activeColor.value
-        : inactiveColor.value
-    return style
-  }
-})
+      ? ""
+      : index < props.current
+        ? ""
+        : props.inactiveColor;
+    return style;
+  };
+});
 
 const itemStyleInner = computed(() => {
-  return {}
-})
+  return {};
+});
 /**
  * @description 状态类名
  * */
 const statusClass = computed(() => {
   return (index: number, error: boolean = false) => {
-    if (current.value == index) {
-      return error ? 'error' : 'process'
-    } else if (current.value > index) {
-      return 'finish'
+    if (props.current == index) {
+      return error ? "error" : "process";
+    } else if (props.current > index) {
+      return "finish";
     } else {
-      return 'wait'
+      return "wait";
     }
-  }
-})
+  };
+});
 const statusColor = computed(() => {
   return (index: number, error?: boolean) => {
-    let colorTmp = ''
+    let colorTmp: string | number;
     switch (statusClass.value(index, error)) {
-      case 'finish':
-        colorTmp = activeColor.value
-        break
-      case 'error':
-        colorTmp = ColorConfig.error
-        break
-      case 'process':
-        colorTmp = dot.value ? activeColor.value : 'transparent'
-        break
+      case "finish":
+        colorTmp = props.activeColor;
+        break;
+      case "error":
+        colorTmp = ColorConfig.error;
+        break;
+      case "process":
+        colorTmp = props.dot ? props.current : "transparent";
+        break;
       default:
-        colorTmp = inactiveColor.value
-        break
+        colorTmp = props.inactiveColor;
+        break;
     }
-    return colorTmp
-  }
-})
+    return colorTmp;
+  };
+});
 
 const contentStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
-  if (direction.value === 'column') {
-    style.marginLeft = dot.value ? '2px' : '6px'
-    style.marginTop = dot.value ? '0px' : '6px'
+  const style: CSSProperties = {};
+  if (props.direction === "column") {
+    style.marginLeft = props.dot ? "2px" : "6px";
+    style.marginTop = props.dot ? "0px" : "6px";
   } else {
-    style.marginTop = dot.value ? '2px' : '6px'
-    style.marginLeft = dot.value ? '2px' : '6px'
+    style.marginTop = props.dot ? "2px" : "6px";
+    style.marginLeft = props.dot ? "2px" : "6px";
   }
 
-  return style
-})
+  return style;
+});
 
 onMounted(() => {
-  getStepsItemRect()
-})
+  getStepsItemRect();
+});
 
 // 获取组件的尺寸，用于设置横线的位置
 const getStepsItemRect = () => {
-  getRect('.hy-steps-item', false, instance).then((rect) => {
-    size.value = rect as UniApp.NodeInfo
-  })
-}
+  getRect(".hy-steps-item", false, instance).then((rect) => {
+    size.value = rect as UniApp.NodeInfo;
+  });
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-steps/index.scss

@@ -4,11 +4,11 @@
 @include b(steps) {
   @include flex;
 
-  &--column {
+  @include m(column) {
     flex-direction: column;
   }
 
-  &--row {
+  @include m(row) {
     flex-direction: row;
     flex: 1;
     /* #ifdef MP */
@@ -21,20 +21,20 @@
     flex: 1;
     @include flex;
 
-    &--row {
+    @include m(row) {
       flex-direction: column;
       align-items: center;
       position: relative;
     }
 
-    &--column {
+    @include m(column) {
       position: relative;
       flex-direction: row;
       justify-content: flex-start;
       padding-bottom: 5px;
     }
 
-    &__wrapper {
+    @include e(wrapper) {
       @include flex;
       justify-content: center;
       align-items: center;
@@ -55,34 +55,34 @@
         }
       }
 
-      &--column {
+      @include m(column) {
         width: 20px;
         height: 20px;
       }
 
-      &--row {
+      @include m(row) {
         width: 20px;
         height: 20px;
       }
 
       /* 点形状 */
-      &--dot {
-        &__item {
+      @include m(dot) {
+        @include e(item) {
           width: 10px;
           height: 10px;
           border-radius: $hy-border-radius-circle;
           background-color: $hy-info;
           border: none;
         }
-        &__finish {
+        @include e(finish) {
           background-color: $hy-primary;
         }
-        &__process {
+        @include e(process) {
           background-color: $hy-primary;
         }
       }
 
-      &__circle {
+      @include e(circle) {
         width: 20px;
         height: 20px;
         /* #ifndef APP-NVUE */
@@ -96,7 +96,7 @@
         justify-content: center;
         transition: background-color 0.3s;
 
-        &__text {
+        @include e(text) {
           color: $hy-text-color--grey;
           font-size: 11px;
           @include flex(row);
@@ -108,19 +108,29 @@
       }
     }
 
-    &__content {
+    @include e(content) {
       @include flex;
       flex: 1;
-      &__title--active {
-        color: $hy-primary;
+
+      @include e(title) {
+        line-height: 25px;
+        font-size: 13px;
+        @include m(active) {
+          color: $hy-primary;
+          font-size: 15px;
+        }
+
+        @include m(error) {
+          color: $hy-error;
+        }
       }
 
-      &--row {
+      @include m(row) {
         flex-direction: column;
         align-items: center;
       }
 
-      &--column {
+      @include m(column) {
         flex-direction: column;
         justify-content: flex-start;
         margin-left: $hy-border-margin-padding-sm;
@@ -129,7 +139,7 @@
     }
 
     /* 线条样式 */
-    &__line {
+    @include e(line) {
       position: absolute;
       background: $hy-border-color;
 
@@ -146,12 +156,12 @@
         background-color: $hy-info;
       }
 
-      &--row {
+      @include m(row) {
         top: $hy-border-margin-padding-base;
         height: 1px;
       }
 
-      &--column {
+      @include m(column) {
         width: 1px;
         left: $hy-border-margin-padding-base;
       }