hy-app 0.2.13 → 0.2.15

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

@@ -1,7 +1,3 @@
-<!--
-  @component hy-button 按钮组件
-  @description 用于页面中的操作按钮，支持多种状态和样式
--->
 <template>
   <!-- #ifndef APP-NVUE -->
   <button
@@ -68,8 +64,8 @@
       !disabled && !loading && !color && (plain || type === 'info')
         ? 'hy-button--active--plain'
         : !disabled && !loading && !plain
-        ? 'hy-button--active'
-        : ''
+          ? 'hy-button--active'
+          : ''
     "
     @click="clickHandler"
     :class="bemClass"
@@ -120,11 +116,10 @@
 
 <script lang="ts">
 /**
- * 从底部弹出的动作菜单面板组件
- *
- * @displayName HyButton 动作面板
- * @version 1.0.0
+ * 该组件内部实现以uni-app的基础button组件为基础，进行二次封装
+ * @displayName hy-button
  */
+defineOptions({})
 export default {
   name: 'hy-button',
   options: {
@@ -136,144 +131,142 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { bem, throttle } from '../../utils'
-import defaultProps from './props'
 import { ColorConfig } from '../../config'
-import type { HyButtonProps, IButtonEmits } from './typing.d.ts'
+import type { IButtonEmits } from './typing.d.ts'
+import type HyIconProps from '../hy-icon/typing'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
-import { HyApp } from 'hy-app/typing/modules/common'
 
-type MessageType = 'info' | 'primary' | 'error' | 'warning' | 'success'
-// const props = withDefaults(defineProps<{ type: MessageType }>(), { type: 'error' })
+// const props = withDefaults(defineProps<HyButtonProps>(), param)
 const props = defineProps({
+  /** 是否显示按钮的细边框 */
   hairline: {
     type: Boolean,
     default: false,
   },
+  /**
+   * 按钮的预置样式
+   * @values info,primary,error,warning,success
+   * */
   type: {
     type: String,
     default: 'primary',
-    validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
   },
+  /**
+   * 按钮尺寸
+   * @values large,medium,small,mini
+   * */
   size: {
     type: String,
     default: 'medium',
-    validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
   },
+  /**
+   * 按钮形状
+   * @values circle,square
+   * */
   shape: {
     type: String,
     default: 'square',
-    validator: (v) => ['circle', 'square'].includes(v),
   },
+  /** 按钮是否镂空，背景色透明  */
   plain: {
     type: Boolean,
     default: false,
   },
+  /** 是否禁用 */
   disabled: {
     type: Boolean,
     default: false,
   },
+  /** 按钮名称前是否带 loading 图标 */
   loading: {
     type: Boolean,
     default: false,
   },
-  loadingText: {
-    type: String,
-    default: '',
-  },
+  /** 加载中提示文字 */
+  loadingText: String,
+  /**
+   * 加载状态图标类型
+   * @values spinner,circle,semicircle
+   * */
   loadingMode: {
     type: String,
     default: 'spinner',
-    validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
   },
+  /** 加载图标大小 */
   loadingSize: {
-    type: Number,
+    type: [Number, String],
     default: 13,
   },
-  openType: {
-    type: String,
-    default: '',
-  },
-  formType: {
-    type: String,
-    default: '',
-  },
-  appParameter: {
-    type: String,
-    default: '',
-  },
+  /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
+  openType: String,
+  /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
+  formType: String,
+  /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） */
+  appParameter: String,
+  /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
   hoverStopPropagation: {
     type: Boolean,
     default: true,
   },
+  /**
+   * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
+   * @values zh_CN,zh_TW,en
+   * */
   lang: {
     type: String,
     default: 'en',
   },
-  sessionFrom: {
-    type: String,
-    default: '',
-  },
-  sendMessageTitle: {
-    type: String,
-    default: '',
-  },
-  sendMessagePath: {
-    type: String,
-    default: '',
-  },
-  sendMessageImg: {
-    type: String,
-    default: '',
-  },
+  /** 会话来源，openType="contact"时有效 */
+  sessionFrom: String,
+  /** 会话内消息卡片标题，openType="contact"时有效 */
+  sendMessageTitle: String,
+  /** 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 */
+  sendMessagePath: String,
+  /** 会话内消息卡片图片，openType="contact"时有效 */
+  sendMessageImg: String,
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 */
   showMessageCard: {
     type: Boolean,
     default: false,
   },
-  dataName: {
-    type: String,
-    default: '',
-  },
+  /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
+  dataName: String,
+  /** 节流时间，一定时间内只能触发一次 */
   throttleTime: {
     type: Number,
     default: 0,
   },
+  /** 按住后多久出现点击态，单位毫秒 */
   hoverStartTime: {
     type: Number,
     default: 0,
   },
+  /** 手指松开后点击态保留时间，单位毫秒 */
   hoverStayTime: {
     type: Number,
     default: 200,
   },
-  text: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: Object,
-    default: () => ({}),
-  },
-  color: {
-    type: String,
-    default: '',
-  },
+  /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
+  text: String,
+  /** 按钮图标api集合 */
+  icon: Object as PropType<HyIconProps>,
+  /** 按钮颜色，支持传入linear-gradient渐变色 */
+  color: String,
+  /** 阻止事件冒泡 */
   stop: {
     type: Boolean,
     default: true,
   },
-  /**阻止事件冒泡*/
-  customStyle: {
-    type: CSSProperties,
-  },
-  /**阻止事件冒泡*/
-  customClass: {
-    type: String,
-  },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as unknown as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const { disabled, loading, throttleTime, stop, size, type, plain, color, icon } = toRefs(props)
 const emit = defineEmits<IButtonEmits>()

package/components/hy-button/props.ts

@@ -1,160 +1,159 @@
 import type { HyButtonProps } from './typing'
 import { HyApp } from 'hy-app/typing/modules/common'
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import HyIconProps from '@/package/components/hy-icon/typing'
 
-const defaultProps = {
-  /**是否显示按钮的细边框*/
+export const defaultProps = {
+  /** 是否显示按钮的细边框 */
   hairline: {
     type: Boolean,
     default: false,
   },
-  /**按钮的预置样式*/
+  /** 按钮的预置样式 */
   type: {
-    type: String,
+    type: String as PropType<HyApp.ThemeType>,
     default: 'primary',
     validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
   },
-  /**按钮尺寸*/
+  /** 按钮尺寸 */
   size: {
-    type: String,
+    type: String as PropType<HyApp.SizeType | 'mini'>,
     default: 'medium',
     validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
   },
-  /**按钮形状*/
+  /** 按钮形状 */
   shape: {
-    type: String,
+    type: String as PropType<HyApp.ShapeType>,
     default: 'square',
     validator: (v) => ['circle', 'square'].includes(v),
   },
-  /**按钮是否镂空，背景色透明 */
+  /** 按钮是否镂空，背景色透明  */
   plain: {
     type: Boolean,
     default: false,
   },
-  /**是否禁用*/
+  /** 是否禁用 */
   disabled: {
     type: Boolean,
     default: false,
   },
-  /**按钮名称前是否带 loading 图标*/
+  /** 按钮名称前是否带 loading 图标 */
   loading: {
     type: Boolean,
     default: false,
   },
-  /**加载中提示文字*/
+  /** 加载中提示文字 */
   loadingText: {
     type: String,
     default: '',
   },
-  /**加载状态图标类型*/
+  /** 加载状态图标类型 */
   loadingMode: {
-    type: String,
+    type: String as PropType<HyApp.LoadingMode>,
     default: 'spinner',
     validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
   },
-  /**加载图标大小*/
+  /** 加载图标大小 */
   loadingSize: {
     type: Number,
     default: 13,
   },
-  /**开放能力，具体请看uniapp稳定关于button组件部分说明*/
+  /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
   openType: {
     type: String,
     default: '',
   },
-  /**用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件*/
+  /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
   formType: {
     type: String,
     default: '',
   },
-  /**打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）*/
+  /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） */
   appParameter: {
     type: String,
     default: '',
   },
-  /**指定是否阻止本节点的祖先节点出现点击态，微信小程序有效*/
+  /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
   hoverStopPropagation: {
     type: Boolean,
     default: true,
   },
-  /**指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）*/
+  /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ） */
   lang: {
     type: String,
     default: 'en',
   },
-  /**会话来源，openType="contact"时有效*/
+  /** 会话来源，openType="contact"时有效 */
   sessionFrom: {
     type: String,
     default: '',
   },
-  /**会话内消息卡片标题，openType="contact"时有效*/
+  /** 会话内消息卡片标题，openType="contact"时有效 */
   sendMessageTitle: {
     type: String,
     default: '',
   },
-  /**会话内消息卡片点击跳转小程序路径，openType="contact"时有效*/
+  /** 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 */
   sendMessagePath: {
     type: String,
     default: '',
   },
-  /**会话内消息卡片图片，openType="contact"时有效*/
+  /** 会话内消息卡片图片，openType="contact"时有效 */
   sendMessageImg: {
     type: String,
     default: '',
   },
-  /**是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效*/
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 */
   showMessageCard: {
     type: Boolean,
     default: false,
   },
-  /**额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取*/
+  /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
   dataName: {
     type: String,
     default: '',
   },
-  /**节流时间，一定时间内只能触发一次*/
+  /** 节流时间，一定时间内只能触发一次 */
   throttleTime: {
     type: Number,
     default: 0,
   },
-  /**按住后多久出现点击态，单位毫秒*/
+  /** 按住后多久出现点击态，单位毫秒 */
   hoverStartTime: {
     type: Number,
     default: 0,
   },
-  /**手指松开后点击态保留时间，单位毫秒*/
+  /** 手指松开后点击态保留时间，单位毫秒 */
   hoverStayTime: {
     type: Number,
     default: 200,
   },
-  /**按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）*/
+  /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
   text: {
     type: String,
     default: '',
   },
-  /**按钮图标api集合*/
+  /** 按钮图标api集合 */
   icon: {
-    type: Object,
+    type: Object as PropType<HyIconProps>,
     default: () => ({}),
   },
-  /**按钮颜色，支持传入linear-gradient渐变色*/
+  /** 按钮颜色，支持传入linear-gradient渐变色 */
   color: {
     type: String,
     default: '',
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   stop: {
     type: Boolean,
     default: true,
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   customStyle: {
-    type: CSSProperties,
+    type: Object as PropType<CSSProperties>,
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   customClass: {
     type: String,
   },
-}
-
-export default defaultProps
+} as const