hy-app 0.3.0 → 0.3.2

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

@@ -1,5 +1,8 @@
 <template>
-  <view :class="['hy-submit-bar', border && 'hy-border__top', customClass]" :style="submitBarStyle">
+  <view
+    :class="['hy-submit-bar', border && 'hy-border__top', customClass]"
+    :style="submitBarStyle"
+  >
     <view class="hy-submit-bar__left">
       <slot name="left">
         <view
@@ -68,30 +71,29 @@
 
 <script lang="ts">
 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 { computed, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IconMenus, ISubmitBarEmits } from './typing'
-
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IconMenus, ISubmitBarEmits } from "./typing";
 // 组件
-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";
 
 /**
  * 该布局一般用于商品详情页底部引导用户快速购买商品的场景，开发者可以根据自己的需求修改布局结构和样式。
  * @displayName hy-submit-bar
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -125,7 +127,7 @@ const props = defineProps({
   /** 左边文字的颜色 */
   iconLabelColor: {
     type: String,
-    default: '#909193FF',
+    default: "#909193FF",
   },
   /** 右边按钮文字颜色 */
   textColor: String,
@@ -142,22 +144,22 @@ const props = defineProps({
   /** 左边按钮文字 */
   leftBtnText: {
     type: String,
-    default: '加入购物车',
+    default: "加入购物车",
   },
   /** 右边按钮文字 */
   rightBtnText: {
     type: String,
-    default: '立即购买',
+    default: "立即购买",
   },
   /** 左边按钮颜色，支持渐变色 */
   leftBtnColor: {
     type: String,
-    default: '#ed3f14',
+    default: "#ed3f14",
   },
   /** 有边按钮颜色，支持渐变色 */
   rightBtnColor: {
     type: String,
-    default: '#ff7900',
+    default: "#ff7900",
   },
   /**
    * 按钮的形状
@@ -165,28 +167,17 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'circle',
+    default: "circle",
   },
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  fixed,
-  showLeftBtn,
-  showRightBtn,
-  leftBtnColor,
-  rightBtnColor,
-  shape,
-  textColor,
-  leftLoading,
-  rightLoading,
-  customStyle,
-} = toRefs(props)
-const emit = defineEmits<ISubmitBarEmits>()
+});
+const emit = defineEmits<ISubmitBarEmits>();
 
 /**
  * @description 整体样式
@@ -195,82 +186,82 @@ const submitBarStyle = computed(() => {
   const style: CSSProperties = {
     bottom: 0,
     left: 0,
-  }
-  if (fixed.value) style.position = 'fixed'
-  return Object.assign(style, customStyle.value)
-})
+  };
+  if (props.fixed) style.position = "fixed";
+  return Object.assign(style, props.customStyle);
+});
 
 /**
  * @description 左边按钮样式
  * */
 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'
+    background: props.leftBtnColor,
+    color: props.textColor,
+  };
+  if (!props.showRightBtn) {
+    style.flex = 1;
+    if (props.shape === "circle") {
+      style.borderRadius = "100px";
     } else {
-      style.borderRadius = '2px'
+      style.borderRadius = "2px";
     }
   } else {
-    if (shape.value === 'circle') {
-      style.borderRadius = '100px 0 0 100px'
+    if (props.shape === "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 右边按钮样式
  * */
 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'
+    background: props.rightBtnColor,
+    color: props.textColor,
+  };
+  if (!props.showLeftBtn) {
+    style.flex = 1;
+    if (props.shape === "circle") {
+      style.borderRadius = "100px";
     } else {
-      style.borderRadius = '2px'
+      style.borderRadius = "2px";
     }
   } else {
-    if (shape.value === 'circle') {
-      style.borderRadius = '0 100px 100px 0'
+    if (props.shape === "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 = (i: number) => {
   if (
-    (!leftLoading.value && !rightLoading.value) ||
-    (leftLoading.value && i !== 0) ||
-    (rightLoading.value && i !== 1)
+    (!props.leftLoading && !props.rightLoading) ||
+    (props.leftLoading && i !== 0) ||
+    (props.rightLoading && i !== 1)
   ) {
-    emit('click', i)
+    emit("click", i);
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-subsection/hy-subsection.vue

@@ -13,33 +13,35 @@
       v-for="(item, index) in list"
       :key="index"
     >
-      <text class="hy-subsection__item__text" :style="[textStyle(index)]">{{ getName(item) }}</text>
+      <text class="hy-subsection__item__text" :style="[textStyle(index)]">{{
+        getName(item)
+      }}</text>
     </view>
   </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: 'hy-subsection',
+  name: "hy-subsection",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ISubsectionEmits, SubSectionVo } from './typing'
-import { addUnit, getRect, guid } from '../../utils'
+import { computed, ref, onMounted, getCurrentInstance } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ISubsectionEmits, SubSectionVo } from "./typing";
+import { addUnit, getRect, guid } from "../../utils";
 
 /**
  * 该分段器一般用于用户从几个选项中选择某一个的场景
  * @displayName hy-subsection
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -52,13 +54,13 @@ const props = defineProps({
   },
   /** tab的数据 */
   list: {
-    type: Array,
+    type: Array as PropType<SubSectionVo[]>,
     default: () => [],
   },
   /** list的键值 */
   customKeys: {
     type: Object,
-    default: () => ({ name: 'name', value: 'value' }),
+    default: () => ({ name: "name", value: "value" }),
   },
   /** 激活时的颜色 */
   activeColor: String,
@@ -70,7 +72,7 @@ const props = defineProps({
    * */
   mode: {
     type: String,
-    default: 'button',
+    default: "button",
   },
   /** 字体大小，单位px */
   fontSize: {
@@ -88,162 +90,157 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  modelValue,
-  current,
-  list,
-  mode,
-  activeColor,
-  fontSize,
-  bold,
-  bgColor,
-  inactiveColor,
-  customKeys,
-} = toRefs(props)
-const emit = defineEmits<ISubsectionEmits>()
+});
+const emit = defineEmits<ISubsectionEmits>();
 
-const instance = getCurrentInstance()
+const instance = getCurrentInstance();
 // 组件尺寸
 const itemRect = ref<UniApp.NodeInfo>({
   width: 0,
   height: 0,
-})
-const innerCurrent = ref<number>(0)
-const guidClass = guid()
+});
+const innerCurrent = ref<number>(0);
+const guidClass = guid();
 
 /**
  * @description 容器样式
  * */
 const wrapperStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
+  const style: CSSProperties = {};
   // button模式时，设置背景色
-  if (mode.value === 'button') {
-    style.backgroundColor = bgColor.value
+  if (props.mode === "button") {
+    style.backgroundColor = props.bgColor;
   }
-  return style
-})
+  return style;
+});
 /**
  * @description 容器类名
  * */
 const wrapperClass = computed(() => {
   return (index: number) => {
     return [
-      'hy-subsection__item',
-      'cursor-pointer',
+      "hy-subsection__item",
+      "cursor-pointer",
       `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
-      `hy-subsection__item--${mode.value}`,
-      index < list.value.length - 1 && 'hy-subsection__item--no-border-right',
-      index === 0 && 'hy-subsection__item--first',
-      index === list.value.length - 1 && 'hy-subsection__item--last',
-    ]
-  }
-})
+      `hy-subsection__item--${props.mode}`,
+      index < props.list.length - 1 && "hy-subsection__item--no-border-right",
+      index === 0 && "hy-subsection__item--first",
+      index === props.list.length - 1 && "hy-subsection__item--last",
+    ];
+  };
+});
 /**
  * @description 滑块的样式
  * */
 const barStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
-  style.width = `${itemRect.value.width}px`
-  style.height = `${itemRect.value.height}px`
+  const style: CSSProperties = {};
+  style.width = `${itemRect.value.width}px`;
+  style.height = `${itemRect.value.height}px`;
   // 通过translateX移动滑块，其移动的距离为索引*item的宽度
-  style.transform = `translateX(${innerCurrent.value * itemRect.value.width!}px)`
-  if (mode.value === 'subsection') {
+  style.transform = `translateX(${innerCurrent.value * itemRect.value.width!}px)`;
+  if (props.mode === "subsection") {
     // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
-    style.backgroundColor = activeColor.value
+    style.backgroundColor = props.activeColor;
   }
-  return style
-})
+  return style;
+});
 /**
  * @description 滑块的类目
  * */
 const barClass = computed(() => {
-  let className: string[] = ['hy-subsection__bar', 'cursor-pointer']
+  let className: string[] = ["hy-subsection__bar", "cursor-pointer"];
   const className_2 = [
-    mode.value === 'button' && 'hy-subsection--button__bar',
-    innerCurrent.value === 0 && mode.value === 'subsection' && 'hy-subsection__bar--first',
+    props.mode === "button" && "hy-subsection--button__bar",
+    innerCurrent.value === 0 &&
+      props.mode === "subsection" &&
+      "hy-subsection__bar--first",
     innerCurrent.value > 0 &&
-      innerCurrent.value < list.value.length - 1 &&
-      mode.value === 'subsection' &&
-      'hy-subsection__bar--center',
-    innerCurrent.value === list.value.length - 1 &&
-      mode.value === 'subsection' &&
-      'hy-subsection__bar--last',
-  ].filter(Boolean) as string[]
-  className = className.concat(className_2)
+      innerCurrent.value < props.list.length - 1 &&
+      props.mode === "subsection" &&
+      "hy-subsection__bar--center",
+    innerCurrent.value === props.list.length - 1 &&
+      props.mode === "subsection" &&
+      "hy-subsection__bar--last",
+  ].filter(Boolean) as string[];
+  className = className.concat(className_2);
 
-  return className
-})
+  return className;
+});
 /**
  * @description 分段器item的样式
  * */
 const itemStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
-  if (mode.value === 'subsection') {
+  const style: CSSProperties = {};
+  if (props.mode === "subsection") {
     // 设置border的样式
-    style.borderColor = activeColor.value
-    style.borderWidth = '1px'
-    style.borderStyle = 'solid'
+    style.borderColor = props.activeColor;
+    style.borderWidth = "1px";
+    style.borderStyle = "solid";
   }
-  return style
-})
+  return style;
+});
 /**
  * @description 分段器文字颜色
  * */
 const textStyle = computed(() => {
   return (index: number): CSSProperties => {
-    const style: CSSProperties = {}
-    style.fontWeight = bold.value && innerCurrent.value === index ? 'bold' : 'normal'
-    style.fontSize = addUnit(fontSize.value)
+    const style: CSSProperties = {};
+    style.fontWeight =
+      props.bold && innerCurrent.value === index ? "bold" : "normal";
+    style.fontSize = addUnit(props.fontSize);
     // subsection模式下，激活时默认为白色的文字
-    if (mode.value === 'subsection') {
-      style.color = innerCurrent.value === index ? '#fff' : inactiveColor.value
+    if (props.mode === "subsection") {
+      style.color = innerCurrent.value === index ? "#fff" : props.inactiveColor;
     } else {
       // button模式下，激活时文字颜色默认为activeColor
-      style.color = innerCurrent.value === index ? activeColor.value : inactiveColor.value
+      style.color =
+        innerCurrent.value === index ? props.activeColor : props.inactiveColor;
     }
-    return style
-  }
-})
+    return style;
+  };
+});
 
 onMounted(() => {
-  init()
-})
+  init();
+});
 
 /**
  * @description 初始化
  * */
 const init = () => {
-  innerCurrent.value = list.value.findIndex((item: SubSectionVo) => {
-    if (typeof item === 'string' || typeof item === 'number') {
-      return item === modelValue.value
+  innerCurrent.value = props.list.findIndex((item: SubSectionVo) => {
+    if (typeof item === "string" || typeof item === "number") {
+      return item === props.modelValue;
     } else {
-      return item[customKeys.value.value] === modelValue.value
+      return item[props.customKeys.value] === props.modelValue;
     }
-  })
+  });
 
   // 设置默认值当没有找的时候导致样式问题
-  innerCurrent.value = innerCurrent.value === -1 ? current.value : innerCurrent.value
+  innerCurrent.value =
+    innerCurrent.value === -1 ? props.current : innerCurrent.value;
 
   // TODO： 多个数组在一起计算宽度， 宽度不一样会有问题，所以必须加guidClass随机数
-  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then((size) => {
-    itemRect.value = size as UniApp.NodeInfo
-  })
-}
+  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then(
+    (size) => {
+      itemRect.value = size as UniApp.NodeInfo;
+    },
+  );
+};
 
 /**
  * @description 判断值
  * */
 const getValue = (item: SubSectionVo) => {
-  return typeof item === 'object' ? item[customKeys.value.value] : item
-}
+  return typeof item === "object" ? item[props.customKeys.value] : item;
+};
 
 /**
  * @description 判断展示文本
  * */
 const getName = (item: SubSectionVo) => {
-  return typeof item === 'object' ? item[customKeys.value.name] : item
-}
+  return typeof item === "object" ? item[props.customKeys.name] : item;
+};
 
 /**
  * @description 点击事件
@@ -251,13 +248,13 @@ const getName = (item: SubSectionVo) => {
 const clickHandler = (temp: SubSectionVo, index: number) => {
   // 值改变才触发
   if (innerCurrent.value !== index) {
-    emit('change', index)
-    emit('update:modelValue', getValue(temp))
+    emit("change", index);
+    emit("update:modelValue", getValue(temp));
   }
-  innerCurrent.value = index
-}
+  innerCurrent.value = index;
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-subsection/typing.d.ts

@@ -1,63 +1,63 @@
-import type { CSSProperties } from 'vue'
-import { HyApp } from '@/package/typing/modules/common'
+import type { CSSProperties } from "vue";
+import { HyApp } from "@/package/typing/modules/common";
 
-export interface SubSectionItemVo extends HyApp.FieldNamesType {
-  name: string
-  value: string | number
+export interface SubSectionItemVo extends AnyObject {
+  name: string;
+  value: string | number;
 }
 
-export type SubSectionVo = string | number | SubSectionItemVo
+export type SubSectionVo = string | number | SubSectionItemVo;
 
 export default interface HySubsectionProps {
   /**
    * @description 接收值
    * */
-  modelValue: string | number
+  modelValue: string | number;
   /**
    * @description 默认值 (默认0)
    * */
-  current?: number
+  current?: number;
   /**
    * @description tab的数据
    * */
-  list: SubSectionVo[]
+  list: SubSectionVo[];
   /**
    * @description list的键值
    * */
-  customKeys?: HyApp.IFieldNames
+  customKeys?: HyApp.IFieldNames;
   /**
    * @description 激活时的颜色（默认 '#3c9cff' ）
    * */
-  activeColor?: string
+  activeColor?: string;
   /**
    * @description 未激活时的颜色（默认 '#303133' ）
    * */
-  inactiveColor?: string
+  inactiveColor?: string;
   /**
    * @description 模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
    * */
-  mode?: 'button' | 'subsection'
+  mode?: "button" | "subsection";
   /**
    * @description 字体大小，单位px（默认 12 ）
    * */
-  fontSize?: number | string
+  fontSize?: number | string;
   /**
    * @description 激活选项的字体是否加粗（默认 true ）
    * */
-  bold?: boolean
+  bold?: boolean;
   /**
    * @description 组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
    * */
-  bgColor?: string
+  bgColor?: string;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface ISubsectionEmits {
   /** 改变触发 */
-  (e: 'change', index: number): void
+  (e: "change", index: number): void;
   /** 改变触发 */
-  (e: 'update:modelValue', value: any): void
+  (e: "update:modelValue", value: any): void;
 }