hy-app 0.2.13 → 0.2.15

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

@@ -1,10 +1,7 @@
 <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"
@@ -36,51 +33,40 @@
               :style="{
                 backgroundColor: statusColor(i, item?.error),
               }"
-            >
-            </view>
-            <view
-              class="hy-steps-item__wrapper__icon"
-              v-else-if="activeIcon || inactiveIcon"
-            >
+            ></view>
+            <view class="hy-steps-item__wrapper__icon" v-else-if="activeIcon || inactiveIcon">
               <HyIcon
                 :name="i <= current ? activeIcon : inactiveIcon"
                 :size="iconSize"
                 :color="i <= current ? activeColor : inactiveColor"
-              >
-              </HyIcon>
+              ></HyIcon>
             </view>
             <view
               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,
                 }"
-                >{{ i + 1 }}</text
               >
+                {{ 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>
@@ -97,20 +83,17 @@
           <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',
-                ]"
+                :class="[current == i && 'hy-steps-item__content__title--active']"
                 :style="{
                   lineHeight: '20px',
                   fontSize: current == i ? '14px' : '13px',
                 }"
-                >{{ item.title }}</text
               >
+                {{ 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>
@@ -121,14 +104,19 @@
 </template>
 
 <script lang="ts">
+/**
+ * 一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+ * @displayName hy-steps
+ */
+defineOptions({})
 export default {
-  name: "hy-steps",
+  name: 'hy-steps',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
@@ -140,122 +128,160 @@ import {
   onMounted,
   getCurrentInstance,
   watch,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import type { StepListVo } from "./typing";
-import { addUnit, getRect } from "../../utils";
-import { ColorConfig, IconConfig } from "../../config";
+  PropType,
+} from 'vue'
+import type { IStepsEmits } from './typing'
+import type { StepListVo } from './typing'
+import { addUnit, getRect } from '../../utils'
+import { ColorConfig, IconConfig } from '../../config'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { current, list, direction, dot, inactiveColor, activeColor } =
-  toRefs(props);
-const emit = defineEmits(["click", "update:current"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 设置当前处于第几步 */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 步骤条的数据集 */
+  list: {
+    type: Array as PropType<StepListVo[]>,
+    default: [],
+  },
+  /**
+   * 方向
+   * @values row,column
+   * */
+  direction: {
+    type: String,
+    default: 'row',
+  },
+  /** 激活状态颜色 */
+  activeColor: String,
+  /** 未激活状态颜色 */
+  inactiveColor: String,
+  /** 激活状态的图标 */
+  activeIcon: String,
+  /** 未激活状态图标 */
+  inactiveIcon: String,
+  /** 是否显示点类型 */
+  dot: {
+    type: Boolean,
+    default: false,
+  },
+  /** 图标大小 */
+  iconSize: {
+    type: [String, Number],
+    default: 17,
+  },
+})
+const { current, list, direction, dot, inactiveColor, activeColor } = toRefs(props)
+const emit = defineEmits<IStepsEmits>()
 
 const size = ref<UniApp.NodeInfo>({
   height: 0,
   width: 0,
-});
-const instance = getCurrentInstance();
+})
+const instance = getCurrentInstance()
 
 watch(
   () => current.value,
   (newVal: number) => {
     if (list.value[newVal - 1]?.error) {
-      const index = list.value.findIndex((item) => item.error);
-      emit("update:current", index);
+      const index = list.value.findIndex((item) => item.error)
+      emit('update:current', index)
+      emit('change', index)
     }
   },
-);
+)
 
 /**
  * @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 (direction.value === '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;
-  };
-});
+      ? activeColor.value
+      : inactiveColor.value
+    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";
+      return error ? 'error' : 'process'
     } else if (current.value > index) {
-      return "finish";
+      return 'finish'
     } else {
-      return "wait";
+      return 'wait'
     }
-  };
-});
+  }
+})
 const statusColor = computed(() => {
   return (index: number, error?: boolean) => {
-    let colorTmp = "";
+    let colorTmp = ''
     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 = activeColor.value
+        break
+      case 'error':
+        colorTmp = ColorConfig.error
+        break
+      case 'process':
+        colorTmp = dot.value ? activeColor.value : 'transparent'
+        break
       default:
-        colorTmp = inactiveColor.value;
-        break;
+        colorTmp = inactiveColor.value
+        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 (direction.value === 'column') {
+    style.marginLeft = dot.value ? '2px' : '6px'
+    style.marginTop = dot.value ? '0px' : '6px'
   } else {
-    style.marginTop = dot.value ? "2px" : "6px";
-    style.marginLeft = dot.value ? "2px" : "6px";
+    style.marginTop = dot.value ? '2px' : '6px'
+    style.marginLeft = dot.value ? '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/typing.d.ts

@@ -1,58 +1,65 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export interface StepListVo {
   /**
    * @description 标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 描述
    * */
-  desc?: string;
+  desc?: string
   /**
    * @description 是否错误
    * */
-  error?: boolean;
+  error?: boolean
 }
 export default interface HyStepsProps {
   /**
    * @description 设置当前处于第几步 (默认 0 )
    * */
-  current: number;
+  current: number
   /**
    * @description 步骤条的数据集
    * */
-  list: StepListVo[];
+  list: StepListVo[]
   /**
    * @description row-横向，column-竖向 (默认 'row' )
    * */
-  direction?: HyApp.DirectionType;
+  direction?: HyApp.DirectionType
   /**
    * @description 激活状态颜色 (默认 '#3c9cff' )
    * */
-  activeColor?: string;
+  activeColor?: string
   /**
    * @description 未激活状态颜色 (默认 '#969799' )
    * */
-  inactiveColor?: string;
+  inactiveColor?: string
   /**
    * @description 激活状态的图标
    * */
-  activeIcon?: string;
+  activeIcon?: string
   /**
    * @description 未激活状态图标
    * */
-  inactiveIcon?: string;
+  inactiveIcon?: string
   /**
    * @description 是否显示点类型 (默认 false )
    * */
-  dot?: boolean;
+  dot?: boolean
   /**
    * @description 图标大小  (默认 17 )
    * */
-  iconSize?: string | number;
+  iconSize?: string | number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IStepsEmits {
+  /** 值改成触发 */
+  (e: 'change', index: number): void
+  /** 值改成触发 */
+  (e: 'update:current', index: number): void
 }

package/components/hy-submit-bar/hy-submit-bar.vue

@@ -1,8 +1,5 @@
 <template>
-  <view
-    :class="['hy-submit-bar', border && 'hy-border__top']"
-    :style="submitBarStyle"
-  >
+  <view :class="['hy-submit-bar', border && 'hy-border__top', customClass]" :style="submitBarStyle">
     <view class="hy-submit-bar__left">
       <slot name="left">
         <view
@@ -70,28 +67,113 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该布局一般用于商品详情页底部引导用户快速购买商品的场景，开发者可以根据自己的需求修改布局结构和样式。
+ * @displayName hy-submit-bar
+ */
+defineOptions({})
 export default {
-  name: "hy-submit-bar",
+  name: 'hy-submit-bar',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { computed, type CSSProperties, toRefs } from "vue";
-import { debounce } from "../../utils";
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IconMenus, ISubmitBarEmits } from './typing'
+import { debounce } from '../../utils'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
-import HyBadge from "../hy-badge/hy-badge.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 左边菜单栏 */
+  menus: {
+    type: Array as unknown as PropType<IconMenus[]>,
+    default: [],
+  },
+  /** 绝对定位 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示边框 */
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  /** 加载左边按钮loading */
+  leftLoading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 加载右边按钮loading */
+  rightLoading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 左边icon的颜色 */
+  iconColor: String,
+  /** 左边文字的颜色 */
+  iconLabelColor: {
+    type: String,
+    default: '#909193FF',
+  },
+  /** 右边按钮文字颜色 */
+  textColor: String,
+  /** 显示左边按钮 */
+  showLeftBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /** 显示右边按钮 */
+  showRightBtn: {
+    type: Boolean,
+    default: true,
+  },
+  /** 左边按钮文字 */
+  leftBtnText: {
+    type: String,
+    default: '加入购物车',
+  },
+  /** 右边按钮文字 */
+  rightBtnText: {
+    type: String,
+    default: '立即购买',
+  },
+  /** 左边按钮颜色，支持渐变色 */
+  leftBtnColor: {
+    type: String,
+    default: '#ed3f14',
+  },
+  /** 有边按钮颜色，支持渐变色 */
+  rightBtnColor: {
+    type: String,
+    default: '#ff7900',
+  },
+  /**
+   * 按钮的形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: 'circle',
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   fixed,
   showLeftBtn,
@@ -102,10 +184,9 @@ const {
   textColor,
   leftLoading,
   rightLoading,
-  warn,
   customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click", "menuClick"]);
+} = toRefs(props)
+const emit = defineEmits<ISubmitBarEmits>()
 
 /**
  * @description 整体样式
@@ -114,10 +195,10 @@ const submitBarStyle = computed(() => {
   const style: CSSProperties = {
     bottom: 0,
     left: 0,
-  };
-  if (fixed.value) style.position = "fixed";
-  return Object.assign(style, customStyle.value);
-});
+  }
+  if (fixed.value) style.position = 'fixed'
+  return Object.assign(style, customStyle.value)
+})
 
 /**
  * @description 左边按钮样式
@@ -126,23 +207,23 @@ const leftBtnStyle = computed(() => {
   const style: CSSProperties = {
     background: leftBtnColor.value,
     color: textColor.value,
-  };
+  }
   if (!showRightBtn.value) {
-    style.flex = 1;
-    if (shape.value === "circle") {
-      style.borderRadius = "100px";
+    style.flex = 1
+    if (shape.value === 'circle') {
+      style.borderRadius = '100px'
     } else {
-      style.borderRadius = "2px";
+      style.borderRadius = '2px'
     }
   } else {
-    if (shape.value === "circle") {
-      style.borderRadius = "100px 0 0 100px";
+    if (shape.value === 'circle') {
+      style.borderRadius = '100px 0 0 100px'
     } else {
-      style.borderRadius = "2px 0 0 2px";
+      style.borderRadius = '2px 0 0 2px'
     }
   }
-  return style;
-});
+  return style
+})
 
 /**
  * @description 右边按钮样式
@@ -151,45 +232,45 @@ const rightBtnStyle = computed(() => {
   const style: CSSProperties = {
     background: rightBtnColor.value,
     color: textColor.value,
-  };
+  }
   if (!showLeftBtn.value) {
-    style.flex = 1;
-    if (shape.value === "circle") {
-      style.borderRadius = "100px";
+    style.flex = 1
+    if (shape.value === 'circle') {
+      style.borderRadius = '100px'
     } else {
-      style.borderRadius = "2px";
+      style.borderRadius = '2px'
     }
   } else {
-    if (shape.value === "circle") {
-      style.borderRadius = "0 100px 100px 0";
+    if (shape.value === 'circle') {
+      style.borderRadius = '0 100px 100px 0'
     } else {
-      style.borderRadius = "0 2px 2px 0";
+      style.borderRadius = '0 2px 2px 0'
     }
   }
-  return style;
-});
+  return style
+})
 
 /**
  * @description 点击左边图标
  * */
 const clickMenuFn = (i: number) => {
-  emit("menuClick", i);
-};
+  emit('menuClick', i)
+}
 
 /**
  * @description 点击按钮
  * */
-const confirmClickFn = debounce((i: number) => {
+const confirmClickFn = (i: number) => {
   if (
     (!leftLoading.value && !rightLoading.value) ||
     (leftLoading.value && i !== 0) ||
     (rightLoading.value && i !== 1)
   ) {
-    emit("click", i);
+    emit('click', i)
   }
-}, warn.value);
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>