hy-app 0.2.16 → 0.2.18

package/components/hy-action-sheet/hy-action-sheet.vue

@@ -91,11 +91,6 @@
   </view>
 </template>
 <script lang="ts">
-/**
- * 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
- * @displayName hy-action-sheet
- */
-defineOptions({})
 export default {
   name: 'hy-action-sheet',
   options: {
@@ -107,6 +102,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
+/**
+ * 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ * @displayName hy-action-sheet
+ */
+defineOptions({})
 import { watch, ref, PropType, type CSSProperties } from 'vue'
 import { isArray } from '../../utils'
 import { IActionSheetPanel, IActionSheetEmits, IActionSheetAction } from './typing.d.ts'

package/components/hy-action-sheet/index.scss

@@ -24,7 +24,7 @@
     color: $hy-text-color;
     font-size: $hy-font-size-base;
     text-align: center;
-    border: none;
+    border-radius: 0;
     background: transparent;
     outline: none;
     padding: 0;
@@ -121,3 +121,8 @@
     @include lineEllipsis;
   }
 }
+
+/* 去除原生按钮边框 */
+button:after {
+  border: none;
+}

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

@@ -60,11 +60,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 此选择器用于选择地址
- * @displayName hy-address-picker
- */
-defineOptions({})
 export default {
   name: 'hy-address-picker',
   options: {
@@ -76,6 +71,11 @@ export default {
 </script>
 
 <script setup lang="ts">
+/**
+ * 此选择器用于选择地址
+ * @displayName hy-address-picker
+ */
+defineOptions({})
 import { type CSSProperties, onMounted, PropType, ref, toRefs } from 'vue'
 import type { IAddressPickerEmits } from './typing'
 import address from '../../utils/address.json'

package/components/hy-avatar/hy-avatar.vue

@@ -41,11 +41,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所
- * @displayName hy-avatar
- */
-defineOptions({})
 export default {
   name: 'hy-avatar',
   options: {
@@ -57,6 +52,11 @@ export default {
 </script>
 
 <script setup lang="ts">
+/**
+ * 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所
+ * @displayName hy-avatar
+ */
+defineOptions({})
 import { computed, type CSSProperties, toRefs, ref, watch } from 'vue'
 import type { IAvatarEmit } from './typing'
 import { addUnit, random } from '../../utils'

package/components/hy-back-top/hy-back-top.vue

@@ -24,11 +24,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
- * @displayName hy-back-top
- */
-defineOptions({})
 export default {
   name: 'hy-back-top',
   options: {
@@ -40,6 +35,11 @@ export default {
 </script>
 
 <script setup lang="ts">
+/**
+ * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+ * @displayName hy-back-top
+ */
+defineOptions({})
 import { computed, type CSSProperties, PropType, toRefs } from 'vue'
 import { addUnit, getPx } from '../../utils'
 import { IconConfig } from '../../config'

package/components/hy-badge/hy-badge.vue

@@ -16,11 +16,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 此选择器用于选择地址
- * @displayName hy-address-picker
- */
-defineOptions({})
 export default {
   name: 'hy-badge',
   options: {
@@ -32,6 +27,11 @@ export default {
 </script>
 
 <script setup lang="ts">
+/**
+ * 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+ * @displayName hy-badge
+ */
+defineOptions({})
 import type { IBadgeEmit } from './typing'
 import defaultProps from './props'
 import { computed, type CSSProperties, PropType, toRefs } from 'vue'

package/components/hy-button/hy-button.vue

@@ -115,11 +115,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件内部实现以uni-app的基础button组件为基础，进行二次封装
- * @displayName hy-button
- */
-defineOptions({})
 export default {
   name: 'hy-button',
   options: {
@@ -131,6 +126,11 @@ export default {
 </script>
 
 <script setup lang="ts">
+/**
+ * 该组件内部实现以uni-app的基础button组件为基础，进行二次封装
+ * @displayName hy-button
+ */
+defineOptions({})
 import { computed, toRefs } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { bem, throttle } from '../../utils'

package/components/hy-calendar/hy-calendar.vue

@@ -65,11 +65,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
- * @displayName hy-calendar
- */
-defineOptions({})
 export default {
   name: 'hy-calendar',
   options: {
@@ -78,19 +73,25 @@ export default {
   },
 }
 </script>
+
 <script setup lang="ts">
-import type { ICalendarEmit } from './typing'
+import type { ICalendarEmits } from './typing'
 import { computed, nextTick, onMounted, type PropType, ref, toRefs, watch } from 'vue'
 import { addUnit, error, isNumericString, padZero, range } from '../../utils'
 import Calendar from '../../utils/calendar.js'
 import dayjs from 'dayjs/esm'
-
 // 组件
 import HyMount from './month.vue'
 import HyHeader from './header.vue'
 import HyPopup from '../hy-popup/hy-popup.vue'
 import HyButton from '../hy-button/hy-button.vue'
 
+/**
+ * 用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
+ * @displayName hy-calendar
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 是否显示日历弹窗 */
@@ -134,23 +135,26 @@ const props = defineProps({
   },
   /** 自定义列表 */
   customList: {
-    type: Array as unknown as any[],
+    type: Array as unknown as PropType<any[]>,
     default: [],
   },
   /** 主题色，对底部按钮和选中日期有效 */
-  color: String,
+  color: {
+    type: String,
+    default: '',
+  },
   /** 最小的可选日期 */
   minDate: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 最大可选日期 */
   maxDate: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 默认选中的日期，mode为multiple或range是必须为数组格式 */
-  defaultDate: [Date, String, Array<string>],
+  defaultDate: [Date, String, Array],
   /** mode=multiple时，最多可选多少个日期 */
   maxCount: {
     type: Number,
@@ -219,7 +223,7 @@ const props = defineProps({
   },
   /** 圆角值，默认无圆角 */
   round: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 最多展示的月份数量 */
@@ -229,13 +233,13 @@ const props = defineProps({
   },
   /** 星期文案 */
   weekText: {
-    type: Array as unknown as string[],
-    default: ['一', '二', '三', '四', '五', '六', '日'],
+    type: Array as unknown as PropType<string[]>,
+    default: () => ['一', '二', '三', '四', '五', '六', '日'],
   },
   /** 单选与多选禁止选中的日期列表，mode!=range时有效。 */
   forbidDays: {
-    type: Array as unknown as Date[],
-    default: [],
+    type: Array as unknown as PropType<Date[]>,
+    default: () => [],
   },
   /** 单选与多选禁止选中的日期选择时提示 */
   forbidDaysToast: {
@@ -255,7 +259,7 @@ const {
   formatter,
   showLunar,
 } = toRefs(props)
-const emit = defineEmits<ICalendarEmit>(['confirm', 'close'])
+const emit = defineEmits<ICalendarEmits>()
 
 // 需要显示的月份的数组
 const months = ref<any[]>([])

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

@@ -125,7 +125,7 @@ export default interface HyCalendarProps {
   forbidDaysToast?: string
 }
 
-export interface ICalendarEmit {
+export interface ICalendarEmits {
   /** 日期选择完成后触发，则点击确认按钮后触发 */
   (e: 'confirm', selected: string[]): void
   /** 日历关闭时触发 */

package/components/hy-card/hy-card.vue

@@ -71,11 +71,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 卡片组件一般用于多个列表条目，且风格统一的场景。
- * @displayName hy-card
- */
-defineOptions({})
 export default {
   name: 'hy-card',
   options: {
@@ -87,6 +82,11 @@ export default {
 </script>
 
 <script setup lang="ts">
+/**
+ * 卡片组件一般用于多个列表条目，且风格统一的场景。
+ * @displayName hy-card
+ */
+defineOptions({})
 import type { ICardEmits } from './typing'
 import { addUnit } from '../../utils'
 import { computed, type CSSProperties, PropType, toRefs } from 'vue'

package/components/hy-cell/hy-cell.vue

@@ -120,11 +120,6 @@
 </template>
 
 <script lang="ts">
-/**
- * cell单元格一般用于一组列表的情况，比如个人中心页，设置页等
- * @displayName hy-cell
- */
-defineOptions({})
 export default {
   name: 'hy-cell',
   options: {
@@ -146,12 +141,18 @@ import { addUnit } from '../../utils'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import type HyIconProps from '../hy-icon/typing'
 
+/**
+ * cell单元格一般用于一组列表的情况，比如个人中心页，设置页等
+ * @displayName hy-cell
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** cell列表数据 */
   list: {
     type: Array as unknown as PropType<Array<CellContentVo>>,
-    default: [],
+    default: () => [],
     required: true,
   },
   /** 头部标题 */
@@ -168,7 +169,7 @@ const props = defineProps({
   },
   /** 圆角 */
   borderRadius: {
-    type: String,
+    type: [String, Number],
     default: '5px',
   },
   /** 是否禁用cell */
@@ -186,7 +187,7 @@ const props = defineProps({
    * @values large,medium,small
    * */
   size: {
-    type: String,
+    type: [String, Number],
     default: 'medium',
   },
   /** 右侧的内容 */
@@ -212,9 +213,7 @@ const props = defineProps({
     default: 'right',
   },
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
 })
 const { size, disabled, clickable, borderRadius } = toRefs(props)
 const emit = defineEmits<ICellEmits>()

package/components/hy-check-button/hy-check-button.vue

@@ -16,11 +16,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件内部实现以tag二次封装按钮复选框和单选框
- * @displayName hy-check-button
- */
-defineOptions({})
 export default {
   name: 'hy-check-button',
   options: {
@@ -38,6 +33,12 @@ import type { CheckboxColumnsVo } from './typing'
 import HyTag from '../hy-tag/hy-tag.vue'
 import { isArray } from '../../utils'
 
+/**
+ * 该组件内部实现以tag二次封装按钮复选框和单选框
+ * @displayName hy-check-button
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 选中得值，selectTypeW为radio是字符串，为checkbox是数组 */
@@ -71,7 +72,7 @@ const props = defineProps({
   /** 禁用 */
   disabled: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   /** 每行几列，每列等宽 */
   col: {

package/components/hy-checkbox/hy-checkbox.vue

@@ -50,11 +50,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
- * @displayName hy-checkbox
- */
-defineOptions({})
 export default {
   name: 'hy-checkbox',
   options: {
@@ -70,9 +65,16 @@ import { computed, toRefs, watch, ref, reactive } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit, bem, error } from '../../utils'
 import { IconConfig } from '../../config'
-import HyIcon from '../hy-icon/hy-icon.vue'
 import type { ICheckBoxEmits } from './typing'
 import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @displayName hy-checkbox
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -260,8 +262,8 @@ const iconWrapStyle = computed(() => {
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
         : !isDisabled(temp?.disabled)
-        ? '#ffffff'
-        : ''
+          ? '#ffffff'
+          : ''
     style.borderColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
@@ -286,18 +288,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-code-input/hy-code-input.vue

@@ -42,11 +42,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于验证用户短信验证码的场景，也可以结合华玥的键盘组件使用
- * @displayName hy-code-input
- */
-defineOptions({})
 export default {
   name: 'hy-code-input',
   options: {
@@ -58,19 +53,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  nextTick,
-  onUnmounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue'
+import { computed, nextTick, onUnmounted, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { ICodeInputEmits } from './typing'
 import { addUnit, getPx } from '../../utils'
 
+/**
+ * 一般用于验证用户短信验证码的场景，也可以结合华玥的键盘组件使用
+ * @displayName hy-code-input
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 获取值 */

package/components/hy-code-input/index.scss

@@ -32,7 +32,7 @@
         &:before {
           content: "";
           background-color: $hy-text-color;
-          width: 1.5px;
+          width: 2rpx;
           border-radius: 2px;
           height: 50%;
           animation: 1s hy-cursor-flicker--2 infinite;

package/components/hy-config-provider/hy-config-provider.vue

@@ -6,11 +6,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
- * @displayName hy-config-provider
- */
-defineOptions({})
 export default {
   name: 'hy-config-provider',
   options: {
@@ -22,10 +17,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit, colorGradient } from '../../utils'
 import { ColorConfig } from '../../config'
 
+/**
+ * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
+ * @displayName hy-config-provider
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /**

package/components/hy-count-down/hy-count-down.vue

@@ -11,11 +11,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
- * @displayName hy-count-down
- */
-defineOptions({})
 export default {
   name: 'hy-count-down',
   options: {
@@ -30,7 +25,13 @@ export default {
 import { onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { isSameSecond, parseFormat, parseTimeData } from './index'
-import { ICountDownEmits } from './typing'
+import type { ICountDownEmits } from './typing'
+
+/**
+ * 一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @displayName hy-count-down
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({

package/components/hy-count-to/hy-count-to.vue

@@ -15,11 +15,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
- * @displayName hy-count-to
- */
-defineOptions({})
 export default {
   name: 'hy-count-to',
   options: {
@@ -36,6 +31,12 @@ import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit, isNumber } from '../../utils'
 
+/**
+ * 一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @displayName hy-count-to
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 开始的数值，默认从0增长到某一个数 */

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

@@ -56,11 +56,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 此选择器用于时间日期选择
- * @displayName hy-datetime-picker
- */
-defineOptions({})
 export default {
   name: 'hy-datetime-picker',
   options: {
@@ -78,12 +73,17 @@ import dayjs from 'dayjs/esm'
 import { error, padZero } from '../../utils'
 import { DateModeEnum } from '../../typing'
 import type HyInputProps from '../hy-input/typing'
-
 // 组件
 import HyInput from '../hy-input/hy-input.vue'
 import HyPicker from '../hy-picker/hy-picker.vue'
 import { IDatetimePickerEmits } from '@/package/components/hy-datetime-picker/typing'
 
+/**
+ * 此选择器用于时间日期选择
+ * @displayName hy-datetime-picker
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 用于控制选择器的弹出和收起 */
@@ -668,7 +668,7 @@ const getBoundary = (type: string, innerVal: string | number) => {
   }
 }
 const onShowByClickInput = () => {
-  if (!input.value.disabled) {
+  if (!input.value?.disabled) {
     showByClickInput.value = !showByClickInput.value
   }
 }

package/components/hy-divider/hy-divider.vue

@@ -21,11 +21,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 区隔内容的分割线，一般用于页面底部"没有更多"的提示
- * @displayName hy-divider
- */
-defineOptions({})
 export default {
   name: 'hy-divider',
   options: {
@@ -40,12 +35,17 @@ export default {
 import { computed, toRefs } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit } from '../../utils'
-
 // 组件
 import HyLine from '../hy-line/hy-line.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 import { IconConfig } from '../../config'
 
+/**
+ * 区隔内容的分割线，一般用于页面底部"没有更多"的提示
+ * @displayName hy-divider
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 是否虚线 */
@@ -83,7 +83,10 @@ const props = defineProps({
   /** 线条颜色 */
   lineColor: String,
   /** 加载图标 */
-  loadingIcon: IconConfig.LOADING,
+  loadingIcon: {
+    type: String,
+    default: IconConfig.LOADING,
+  },
   /** 加载前的提示语 */
   loadMoreText: {
     type: String,