hy-app 0.2.16 → 0.3.0

package/components/hy-overlay/hy-overlay.vue

@@ -1,7 +1,7 @@
 <template>
   <HyTransition
     :show="show"
-    :custom-class="['hy-overlay', customClass]"
+    :custom-class="`hy-overlay ${customClass}`"
     :duration="duration"
     :custom-style="overlayStyle"
     @click="clickHandler"
@@ -11,11 +11,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
- * @displayName hy-overlay
- */
-defineOptions({})
 export default {
   name: 'hy-overlay',
   options: {
@@ -32,6 +27,12 @@ import type { CSSProperties, PropType } from 'vue'
 import type { IOverlayEmits } from './typing'
 import HyTransition from '../hy-transition/hy-transition.vue'
 
+/**
+ * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @displayName hy-overlay
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否显示遮罩 */
@@ -55,9 +56,7 @@ const props = defineProps({
     default: 0.5,
   },
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
 })

package/components/hy-pagination/hy-pagination.vue

@@ -53,11 +53,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 当数据量过多时，使用分页分解数据。
- * @displayName hy-pagination
- */
-defineOptions({})
 export default {
   name: 'hy-pagination',
   options: {
@@ -69,11 +64,19 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IPaginationEmits } from './typing'
+import { IconConfig } from '../../config'
+// 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyButton from '../hy-button/hy-button.vue'
-import { CSSProperties, PropType, ref, toRefs, watch } from 'vue'
-import type { IPaginationEmits } from './typing'
-import { IconConfig } from 'hy-app'
+
+/**
+ * 当数据量过多时，使用分页分解数据。
+ * @displayName hy-pagination
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({

package/components/hy-picker/hy-picker.vue

@@ -95,11 +95,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 此选择器用于单列，多列，多列联动的选择场景。
- * @displayName hy-picker
- */
-defineOptions({})
 export default {
   name: 'hy-picker',
   options: {
@@ -115,17 +110,22 @@ import { computed, PropType, ref, toRefs, watch } from 'vue'
 import { deepClone, sleep, addUnit } from '../../utils'
 import { IconConfig } from '../../config'
 import type { IPickerEmits, PickerColumnVo } from './typing'
-
+import type HyInputProps from '../hy-input/typing'
 // 组件
 import HyInput from '../hy-input/hy-input.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyPopup from '../hy-popup/hy-popup.vue'
-import type HyInputProps from '@/package/components/hy-input/typing'
+
+/**
+ * 此选择器用于单列，多列，多列联动的选择场景。
+ * @displayName hy-picker
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 显示到输入框值 */
-  modelValue: String,
+  modelValue: [String, Array],
   /** 是否显示弹窗 */
   show: {
     type: Boolean,
@@ -329,7 +329,7 @@ const inputValue = computed(() => {
  * @description 显示
  * */
 const onShowByClickInput = () => {
-  if (!input.value.disabled) {
+  if (!input.value?.disabled) {
     showByClickInput.value = !showByClickInput.value
   }
 }

package/components/hy-popover/hy-popover.vue

@@ -93,11 +93,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 常用于展示提示信息。
- * @displayName hy-popover
- */
-defineOptions({})
 export default {
   name: 'hy-popover',
   options: {
@@ -119,17 +114,22 @@ import {
   useSlots,
   watch,
   inject,
-  PropType,
 } from 'vue'
+import type { PropType, CSSProperties } from 'vue'
 import type { IOffset, IPopoverEmits, PopoverContentVo, PopoverExpose } from './typing'
 import { isArray } from '../../utils'
 import { type Queue, queueKey, usePopover } from '../../composables'
 import { closeOther, pushToQueue, removeFromQueue } from '../../common'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyTransition from '../hy-transition/hy-transition.vue'
 
+/**
+ * 常用于展示提示信息。
+ * @displayName hy-popover
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 控制 popover 的显示状态 */
@@ -170,6 +170,10 @@ const props = defineProps({
     type: String,
     default: 'normal',
   },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const { modelValue, content, mode, placement } = toRefs(props)
 const emit = defineEmits<IPopoverEmits>()

package/components/hy-popup/hy-popup.vue

@@ -38,11 +38,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
- * @displayName hy-popup
- */
-defineOptions({})
 export default {
   name: 'hy-popup',
   options: {
@@ -54,7 +49,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, PropType, ref, toRefs, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { IPopupEmits } from './typing'
 import { addUnit, getWindowInfo } from '../../utils'
 import { IconConfig } from '../../config'
@@ -64,6 +60,12 @@ import HyTransition from '../hy-transition/hy-transition.vue'
 import HyOverlay from '../hy-overlay/hy-overlay.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
+ * @displayName hy-popup
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否展示弹窗 */
@@ -127,7 +129,7 @@ const props = defineProps({
     default: 'top-right',
   },
   /** 圆角值 */
-  round: String,
+  round: [String, Number],
   /** 当mode=center时 是否开启缩放 */
   zoom: {
     type: Boolean,

package/components/hy-price/hy-price.vue

@@ -15,11 +15,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 业务组件,突出金额小数点前大，小数点后小
- * @displayName hy-price
- */
-defineOptions({})
 export default {
   name: 'hy-price',
   options: {
@@ -35,6 +30,12 @@ import { computed, toRefs } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit, getPx } from '../../utils'
 
+/**
+ * 业务组件,突出金额小数点前大，小数点后小
+ * @displayName hy-price
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 传入金额值 */

package/components/hy-qrcode/hy-qrcode.vue

@@ -21,11 +21,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 根据提供的字符串前端JS生成二维码展示
- * @displayName hy-qrcode
- */
-defineOptions({})
 export default {
   name: 'hy-qrcode',
   options: {
@@ -41,12 +36,15 @@ import { getCurrentInstance, toRefs, ref, onMounted } from 'vue'
 import type { IQrcodeEmits } from './typing'
 import QRCode from './qrcode.js'
 import { addUnit, error } from '../../utils'
-import { IconConfig } from '../../config'
-
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 
+/**
+ * 根据提供的字符串前端JS生成二维码展示
+ * @displayName hy-qrcode
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */

package/components/hy-radio/hy-radio.vue

@@ -47,11 +47,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
- * @displayName hy-radio
- */
-defineOptions({})
 export default {
   name: 'hy-radio',
   options: {
@@ -69,10 +64,15 @@ import type { IRadioEmits } from './typing'
 import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
 import { addUnit, bem, error } from '../../utils'
 import { IconConfig } from '../../config'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @displayName hy-radio
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 双向绑定值，数组类型 */
@@ -296,18 +296,16 @@ const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
  * */
 const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
   e.stopPropagation()
-  if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
-    setRadioCheckedStatus(temp)
-  }
+  if (labelDisabled.value || isDisabled(temp?.disabled)) return
+  setRadioCheckedStatus(temp)
 }
 /**
  * @description 点击label
  * */
 const labelClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
   e.stopPropagation()
-  if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
-    setRadioCheckedStatus(temp)
-  }
+  if (labelDisabled.value || isDisabled(temp?.disabled)) return
+  setRadioCheckedStatus(temp)
 }
 
 /**

package/components/hy-rate/hy-rate.vue

@@ -51,11 +51,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件一般用于满意度调查，星型评分的场景。
- * @displayName hy-rate
- */
-defineOptions({})
 export default {
   name: 'hy-rate',
   options: {
@@ -71,10 +66,15 @@ import { addUnit, getRect, guid, range, sleep } from '../../utils'
 import { ref, watch, toRefs, onMounted, getCurrentInstance } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import type { IRateEmits } from './typing'
-
+import { IconConfig } from '../../config'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
-import { IconConfig } from '@/package'
+
+/**
+ * 该组件一般用于满意度调查，星型评分的场景。
+ * @displayName hy-rate
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({

package/components/hy-read-more/hy-read-more.vue

@@ -42,11 +42,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
- * @displayName hy-read-more
- */
-defineOptions({})
 export default {
   name: 'hy-read-more',
   options: {
@@ -67,6 +62,12 @@ import { IconConfig } from '../../config'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @displayName hy-read-more
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 内容超出此高度才会显示展开全文按钮，单位px */

package/components/hy-scroll-list/hy-scroll-list.vue

@@ -32,11 +32,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
- * @displayName hy-scroll-list
- */
-defineOptions({})
 export default {
   name: 'hy-scroll-list',
   options: {
@@ -52,6 +47,12 @@ import { computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstanc
 import type { IScrollListEmits } from './typing'
 import { addUnit, colorGradient, getRect, sleep } from '../../utils'
 
+/**
+ * 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
+ * @displayName hy-scroll-list
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 指示器的整体宽度 */

package/components/hy-search/hy-search.vue

@@ -94,11 +94,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
- * @displayName hy-search
- */
-defineOptions({})
 export default {
   name: 'hy-search',
   options: {
@@ -110,13 +105,20 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, toRefs, ref, watch, PropType, type CSSProperties } from 'vue'
+import { computed, nextTick, toRefs, ref, watch } from 'vue'
+import type { PropType, CSSProperties } from 'vue'
 import type { ISearchEmits } from './typing'
 import { sleep, addUnit } from '../../utils'
 import { IconConfig } from '../../config'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import type HyIconProps from '../hy-icon/typing'
 
+/**
+ * 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
+ * @displayName hy-search
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 输入框初始值 */

package/components/hy-signature/hy-signature.vue

@@ -73,11 +73,6 @@
   </view>
 </template>
 <script lang="ts">
-/**
- * 用于签名场景，基于 Canvas 实现的签名组件。提供了基础签名、历史记录、笔锋效果等功能。
- * @displayName hy-signature
- */
-defineOptions({})
 export default {
   name: 'hy-signature',
   options: {
@@ -99,6 +94,12 @@ import { canvas2dAdapter } from './canvasHelper'
 // 组件
 import HyButton from '../hy-button/hy-button.vue'
 
+/**
+ * 用于签名场景，基于 Canvas 实现的签名组件。提供了基础签名、历史记录、笔锋效果等功能。
+ * @displayName hy-signature
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 签名笔颜色 */

package/components/hy-slider/hy-slider.vue

@@ -140,11 +140,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于表单中，手动选择一个区间范围的场景。
- * @displayName hy-slider
- */
-defineOptions({})
 export default {
   name: 'hy-slider',
   options: {
@@ -159,7 +154,13 @@ export default {
 import { computed, getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit, error, getRect, getPx } from '../../utils'
-import { ISliderEmits } from '@/package/components/hy-slider/typing'
+import type { ISliderEmits } from './typing'
+
+/**
+ * 一般用于表单中，手动选择一个区间范围的场景。
+ * @displayName hy-slider
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -216,7 +217,7 @@ const props = defineProps({
   },
   /** 双滑块时值 */
   rangeValue: {
-    type: Array as unknown as number[],
+    type: Array as unknown as PropType<number[]>,
     default: [0, 0],
   },
   /** 是否区间的模式 */

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

@@ -104,11 +104,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
- * @displayName hy-steps
- */
-defineOptions({})
 export default {
   name: 'hy-steps',
   options: {
@@ -120,21 +115,19 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  toRefs,
-  ref,
-  onMounted,
-  getCurrentInstance,
-  watch,
-  PropType,
-} from 'vue'
+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'
 
+/**
+ * 一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+ * @displayName hy-steps
+ */
+defineOptions({})
+
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 
@@ -213,8 +206,8 @@ const lineStyle = computed(() => {
     style.backgroundColor = temp.error
       ? ''
       : index < current.value
-      ? activeColor.value
-      : inactiveColor.value
+        ? activeColor.value
+        : inactiveColor.value
     return style
   }
 })

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

@@ -67,11 +67,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该布局一般用于商品详情页底部引导用户快速购买商品的场景，开发者可以根据自己的需求修改布局结构和样式。
- * @displayName hy-submit-bar
- */
-defineOptions({})
 export default {
   name: 'hy-submit-bar',
   options: {
@@ -86,13 +81,18 @@ export default {
 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'
 
+/**
+ * 该布局一般用于商品详情页底部引导用户快速购买商品的场景，开发者可以根据自己的需求修改布局结构和样式。
+ * @displayName hy-submit-bar
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 左边菜单栏 */

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

@@ -1,7 +1,7 @@
 <template>
   <view
     ref="hy-subsection"
-    :class="[`hy-subsection--${mode}`, 'hy-subsection']"
+    :class="[`hy-subsection--${mode}`, 'hy-subsection', customClass]"
     :style="[customStyle, wrapperStyle]"
   >
     <view ref="hy-subsection__bar" :style="barStyle" :class="barClass"></view>
@@ -19,11 +19,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该分段器一般用于用户从几个选项中选择某一个的场景
- * @displayName hy-subsection
- */
-defineOptions({})
 export default {
   name: 'hy-subsection',
   options: {
@@ -36,15 +31,20 @@ export default {
 
 <script setup lang="ts">
 import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { ISubsectionEmits } from './typing'
-import type { SubSectionVo } from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type { ISubsectionEmits, SubSectionVo } from './typing'
 import { addUnit, getRect, guid } from '../../utils'
 
+/**
+ * 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @displayName hy-subsection
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 接收值 */
-  modelValue: String,
+  modelValue: [String, Number],
   /** 默认值 */
   current: {
     type: Number,
@@ -53,19 +53,12 @@ const props = defineProps({
   /** tab的数据 */
   list: {
     type: Array,
-    default() {
-      return []
-    },
+    default: () => [],
   },
   /** list的键值 */
   customKeys: {
     type: Object,
-    default() {
-      return {
-        name: 'name',
-        value: 'value',
-      }
-    },
+    default: () => ({ name: 'name', value: 'value' }),
   },
   /** 激活时的颜色 */
   activeColor: String,
@@ -91,6 +84,10 @@ const props = defineProps({
   },
   /** 组件背景颜色，mode为button时有效 */
   bgColor: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const {
   modelValue,