hy-app 0.4.13 → 0.5.0

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

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

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

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

package/components/hy-subsection/props.ts

@@ -1,19 +1,52 @@
-import type IProps from "./typing";
+import type { SubSectionVo } from './typing'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  modelValue: "",
-  current: 0,
-  list: [],
-  customKeys: {
-    name: "name",
-    value: "value",
-  },
-  activeColor: "",
-  inactiveColor: "",
-  mode: "button",
-  fontSize: 12,
-  bold: true,
-  bgColor: "",
-};
+const subsectionProps = {
+    /** 接收值 */
+    modelValue: [String, Number],
+    /** 默认值 */
+    current: {
+        type: Number,
+        default: 0
+    },
+    /** tab的数据 */
+    list: {
+        type: Array as PropType<SubSectionVo[]>,
+        default: () => []
+    },
+    /** list的键值 */
+    customKeys: {
+        type: Object,
+        default: () => ({ 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,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default subsectionProps