hy-app 0.2.14 → 0.2.15

package/components/hy-submit-bar/typing.d.ts

@@ -1,88 +1,95 @@
-import type { CSSProperties } from "vue";
-import type BadgeProps from "../hy-badge/props";
+import type { CSSProperties } from 'vue'
+import type BadgeProps from '../hy-badge/props'
 
-interface IconMenus {
+export interface IconMenus {
   /**
    * @description icon图标
    * */
-  icon: string;
+  icon: string
   /**
    * @description 文本
    * */
-  text: string;
+  text: string
   /**
    * @description 徽标值
    * */
-  badge?: BadgeProps["badge"];
+  badge?: BadgeProps['badge']
 }
 
 export default interface HySubmitBarProps {
   /**
    * @description 左边菜单栏
    * */
-  menus?: IconMenus[];
+  menus?: IconMenus[]
   /**
    * @description 绝对定位
    * */
-  fixed?: boolean;
+  fixed?: boolean
   /**
    * @description 是否显示边框
    * */
-  border?: boolean;
+  border?: boolean
   /**
    * @description 加载左边按钮loading
    * */
-  leftLoading?: boolean;
+  leftLoading?: boolean
   /**
    * @description 加载右边按钮loading
    * */
-  rightLoading?: boolean;
+  rightLoading?: boolean
   /**
    * @description 左边icon的颜色
    * */
-  iconColor?: string;
+  iconColor?: string
   /**
    * @description 左边文字的颜色
    * */
-  iconLabelColor?: string;
+  iconLabelColor?: string
   /**
    * @description 右边按钮文字颜色
    * */
-  textColor?: string;
+  textColor?: string
   /**
    * @description 显示左边按钮
    * */
-  showLeftBtn?: boolean;
+  showLeftBtn?: boolean
   /**
    * @description 显示右边按钮
    * */
-  showRightBtn?: boolean;
+  showRightBtn?: boolean
   /**
    * @description 左边按钮文字
    * */
-  leftBtnText?: string;
+  leftBtnText?: string
   /**
    * @description 右边按钮文字
    * */
-  rightBtnText?: string;
+  rightBtnText?: string
   /**
    * @description 左边按钮颜色，支持渐变色
    * */
-  leftBtnColor?: string;
+  leftBtnColor?: string
   /**
    * @description 有边按钮颜色，支持渐变色
    * */
-  rightBtnColor?: string;
+  rightBtnColor?: string
   /**
    * @description 按钮的形状
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 按钮点击等待时长（运用了节流方法）
    * */
-  warn?: number;
+  warn?: number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface ISubmitBarEmits {
+  /** 点击按钮触发 */
+  (e: 'click', index: number): void
+  /** 点击左侧小菜单图标触发 */
+  (e: 'menuClick', index: number): void
 }

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

@@ -13,33 +13,85 @@
       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">
+/**
+ * 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @displayName hy-subsection
+ */
+defineOptions({})
 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 } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import type { SubSectionVo } from "./typing";
-import { addUnit, getRect, guid } from "../../utils";
+import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { ISubsectionEmits } from './typing'
+import type { SubSectionVo } from './typing'
+import { addUnit, getRect, guid } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 接收值 */
+  modelValue: String,
+  /** 默认值 */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** tab的数据 */
+  list: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  /** list的键值 */
+  customKeys: {
+    type: Object,
+    default() {
+      return {
+        name: 'name',
+        value: 'value',
+      }
+    },
+  },
+  /** 激活时的颜色 */
+  activeColor: String,
+  /** 未激活时的颜色 */
+  inactiveColor: String,
+  /**
+   * 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+   * @values button,subsection
+   * */
+  mode: {
+    type: String,
+    default: 'button',
+  },
+  /** 字体大小，单位px */
+  fontSize: {
+    type: Number,
+    default: 12,
+  },
+  /** 激活选项的字体是否加粗 */
+  bold: {
+    type: Boolean,
+    default: true,
+  },
+  /** 组件背景颜色，mode为button时有效 */
+  bgColor: String,
+})
 const {
   modelValue,
   current,
@@ -51,159 +103,150 @@ const {
   bgColor,
   inactiveColor,
   customKeys,
-} = toRefs(props);
-const emit = defineEmits(["change", "update:modelValue"]);
+} = toRefs(props)
+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 (mode.value === 'button') {
+    style.backgroundColor = bgColor.value
   }
-  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",
-    ];
-  };
-});
+      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',
+    ]
+  }
+})
 /**
  * @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 (mode.value === 'subsection') {
     // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
-    style.backgroundColor = activeColor.value;
+    style.backgroundColor = activeColor.value
   }
-  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",
+    mode.value === 'button' && 'hy-subsection--button__bar',
+    innerCurrent.value === 0 && mode.value === 'subsection' && 'hy-subsection__bar--first',
     innerCurrent.value > 0 &&
       innerCurrent.value < list.value.length - 1 &&
-      mode.value === "subsection" &&
-      "hy-subsection__bar--center",
+      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);
+      mode.value === '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 (mode.value === 'subsection') {
     // 设置border的样式
-    style.borderColor = activeColor.value;
-    style.borderWidth = "1px";
-    style.borderStyle = "solid";
+    style.borderColor = activeColor.value
+    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 = bold.value && innerCurrent.value === index ? 'bold' : 'normal'
+    style.fontSize = addUnit(fontSize.value)
     // subsection模式下，激活时默认为白色的文字
-    if (mode.value === "subsection") {
-      style.color = innerCurrent.value === index ? "#fff" : inactiveColor.value;
+    if (mode.value === 'subsection') {
+      style.color = innerCurrent.value === index ? '#fff' : inactiveColor.value
     } else {
       // button模式下，激活时文字颜色默认为activeColor
-      style.color =
-        innerCurrent.value === index ? activeColor.value : inactiveColor.value;
+      style.color = innerCurrent.value === index ? activeColor.value : inactiveColor.value
     }
-    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;
+    if (typeof item === 'string' || typeof item === 'number') {
+      return item === modelValue.value
     } else {
-      return item[customKeys.value.value] === modelValue.value;
+      return item[customKeys.value.value] === modelValue.value
     }
-  });
+  })
 
   // 设置默认值当没有找的时候导致样式问题
-  innerCurrent.value =
-    innerCurrent.value === -1 ? current.value : innerCurrent.value;
+  innerCurrent.value = innerCurrent.value === -1 ? current.value : 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[customKeys.value.value] : item
+}
 
 /**
  * @description 判断展示文本
  * */
 const getName = (item: SubSectionVo) => {
-  return typeof item === "object" ? item[customKeys.value.name] : item;
-};
+  return typeof item === 'object' ? item[customKeys.value.name] : item
+}
 
 /**
  * @description 点击事件
@@ -211,13 +254,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,56 +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;
+  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: 'update:modelValue', value: any): void
 }