hy-app 0.2.13 → 0.2.15

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

@@ -1,6 +1,3 @@
-<docs>
-从底部弹出的动作菜单面板。
-</docs>
 <template>
   <view>
     <HyPopup
@@ -39,9 +36,9 @@
           <button
             v-for="(action, rowIndex) in actions"
             :key="rowIndex"
-            :class="`hy-action-sheet__action ${action?.disabled ? 'hy-action-sheet__action--disabled' : ''}  ${
-              action?.loading ? 'hy-action-sheet__action--loading' : ''
-            }`"
+            :class="`hy-action-sheet__action ${
+              action?.disabled ? 'hy-action-sheet__action--disabled' : ''
+            }  ${action?.loading ? 'hy-action-sheet__action--loading' : ''}`"
             :style="`color: ${action?.color}`"
             @click="onSelect(rowIndex, 'action')"
           >
@@ -94,6 +91,11 @@
   </view>
 </template>
 <script lang="ts">
+/**
+ * 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ * @displayName hy-action-sheet
+ */
+defineOptions({})
 export default {
   name: 'hy-action-sheet',
   options: {
@@ -105,13 +107,9 @@ export default {
 </script>
 
 <script lang="ts" setup>
-/**
- * 按钮组件，用于触发操作，如提交表单或打开链接
- */
-import { watch, ref } from 'vue'
+import { watch, ref, PropType, type CSSProperties } from 'vue'
 import { isArray } from '../../utils'
-import defaultProps from './props'
-import type { IActionSheetPanel, IActionSheetEmits, HyActionSheetProps } from './typing.d.ts'
+import { IActionSheetPanel, IActionSheetEmits, IActionSheetAction } from './typing.d.ts'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -119,7 +117,77 @@ import HyPopup from '../hy-popup/hy-popup.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 import HyButton from '../hy-button/hy-button.vue'
 
-const props = withDefaults(defineProps<HyActionSheetProps>(), defaultProps)
+// const props = withDefaults(defineProps<HyActionSheetProps>(), defaultProps)
+const props = defineProps({
+  /** 操作菜单是否展示 */
+  modelValue: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  /** 菜单选项列表 */
+  actions: {
+    type: Array as PropType<IActionSheetAction[]>,
+    default() {
+      return []
+    },
+  },
+  /** 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 */
+  panels: {
+    type: Array as PropType<Array<IActionSheetPanel | IActionSheetPanel[]>>,
+    default() {
+      return []
+    },
+  },
+  /** 操作菜单是否展示 */
+  round: {
+    type: [String, Number],
+    default: 20,
+  },
+  /** 标题 */
+  title: String,
+  /**
+   * 标题文字位置
+   * @values left,center,right
+   * */
+  titleAlign: {
+    type: String,
+    default: 'center',
+  },
+  /** 取消按钮的提示文字,不为空时显示按钮 */
+  cancelText: String,
+  /** 点击某个菜单项时是否关闭弹窗 */
+  closeOnClickAction: {
+    type: Boolean,
+    default: true,
+  },
+  /** 点击遮罩是否允许关闭 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 弹框动画持续时间 */
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  /** 菜单层级 */
+  zIndex: {
+    type: Number,
+    default: 100,
+  },
+  /** 处理底部安全区 */
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 自定义外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
+  /** 自定义标题类名 */
+  customHeaderClass: String,
+})
 const emit = defineEmits<IActionSheetEmits>()
 
 const formatPanels = ref<Array<IActionSheetPanel> | Array<IActionSheetPanel[]>>([])

package/components/hy-action-sheet/typing.d.ts

@@ -122,8 +122,6 @@ export interface IActionSheetEmits {
   (e: 'close'): void
   /** 打开面板时触发 */
   (e: 'open'): void
-  /**
-   * 手动更新弹窗显示隐藏
-   * */
+  /** 手动更新弹窗显示隐藏 */
   (e: 'update:modelValue', visible: boolean): void
 }

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

@@ -1,6 +1,7 @@
 <template>
-  <view class="u-datetime-picker">
-    <view v-if="hasInput" class="u-datetime-picker__has-input" @tap="onShowByClickInput">
+  <view class="hy-address-picker">
+    <view v-if="hasInput" class="hy-address-picker__has-input" @tap="onShowByClickInput">
+      <!-- @slot 自定义输入框 -->
       <slot name="trigger" :value="inputValue">
         <HyInput
           v-model="inputValue"
@@ -45,11 +46,13 @@
       @change="change"
     >
       <template #toolbar-right>
+        <!-- @slot 工具栏右侧内容，自定义右侧内容，因为微信小程序限制，需要同时设置:toolbarRightSlot="true"生效。 -->
         <slot name="toolbar-right">
           {{ confirmText }}
         </slot>
       </template>
       <template #toolbar-bottom>
+        <!-- @slot 工具栏下面内容，自定义底部内容 -->
         <slot name="toolbar-bottom"></slot>
       </template>
     </HyPicker>
@@ -57,6 +60,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 此选择器用于选择地址
+ * @displayName hy-address-picker
+ */
+defineOptions({})
 export default {
   name: 'hy-address-picker',
   options: {
@@ -68,18 +76,111 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, ref, toRefs } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+import { type CSSProperties, onMounted, PropType, ref, toRefs } from 'vue'
+import type { IAddressPickerEmits } from './typing'
 import address from '../../utils/address.json'
-
+import type HyInputProps from '../hy-input/typing'
 // 组件
 import HyInput from '../hy-input/hy-input.vue'
 import HyPicker from '../hy-picker/hy-picker.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 用于控制选择器的弹出和收起 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 弹出层弹出方向
+   * @values top,bottom
+   * */
+  popupMode: {
+    type: String,
+    default: 'bottom',
+  },
+  /** 是否显示顶部的操作栏 */
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 绑定值 */
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  /** 顶部标题 */
+  title: String,
+  /** 字符串截取数组条件 */
+  separator: {
+    type: String,
+    default: ' ',
+  },
+  /** 是否显示加载中状态 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 各列中，单个选项的高度 */
+  itemHeight: {
+    type: Number,
+    default: 44,
+  },
+  /** 取消按钮的文字 */
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  /** 确认按钮的文字 */
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  /** 取消按钮的颜色 */
+  cancelColor: {
+    type: String,
+    default: '#909193',
+  },
+  /** 确认按钮的颜色 */
+  confirmColor: {
+    type: String,
+    default: '#3c9cff',
+  },
+  /** 每列中可见选项的数量 */
+  visibleItemCount: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否允许点击遮罩关闭选择器 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  /** 各列的默认索引 */
+  defaultIndex: {
+    type: Array as PropType<Array<any>>,
+  },
+  /** 是否显示输入框 */
+  hasInput: {
+    type: Boolean,
+    default: false,
+  },
+  /** 输入框集合属性 */
+  input: {
+    type: Object as PropType<HyInputProps>,
+  },
+  /** 右边插槽 */
+  toolbarRightSlot: {
+    type: Boolean,
+    default: false,
+  },
+  /** 自定义输入框外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
 const { show, modelValue, hasInput, input, separator, closeOnClickOverlay } = toRefs(props)
-const emit = defineEmits(['close', 'cancel', 'confirm', 'change', 'update:modelValue'])
+const emit = defineEmits<IAddressPickerEmits>()
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
 const inputValue = ref<string>('') // 表单显示值

package/components/hy-address-picker/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/mixin.scss" as *;
-@include b(datetime-picker) {
+@include b(address-picker) {
   flex: 1;
   &__has-input {
     position: relative;
@@ -24,4 +24,4 @@
       padding: 0 10px;
     }
   }
-}
+}

package/components/hy-address-picker/typing.d.ts

@@ -1,90 +1,99 @@
-import type { CSSProperties } from "vue";
-import type HyInputProps from "../hy-input/typing";
+import type { CSSProperties } from 'vue'
+import type HyInputProps from '../hy-input/typing'
 
 export default interface HyAddressPickerProps {
   /**
    * @description 用于控制选择器的弹出和收起 ( 默认 false )
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 弹出层弹出方向
    * */
-  popupMode?: HyApp.LayoutType;
+  popupMode?: HyApp.LayoutType
   /**
    * @description 是否显示顶部的操作栏  ( 默认 true )
    * */
-  showToolbar?: boolean;
+  showToolbar?: boolean
   /**
    * @description 绑定值
    * */
-  modelValue: string;
+  modelValue: string
   /**
    * @description 顶部标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 字符串截取数组条件
    * */
-  separator?: string;
+  separator?: string
   /**
    * @description 是否显示加载中状态   ( 默认 false )
    * */
-  loading?: boolean;
+  loading?: boolean
   /**
    * @description 各列中，单个选项的高度   ( 默认 44 )
    * */
-  itemHeight?: number;
+  itemHeight?: number
   /**
    * @description 取消按钮的文字  ( 默认 '取消' )
    * */
-  cancelText?: string;
+  cancelText?: string
   /**
    * @description 确认按钮的文字  ( 默认 '确认' )
    * */
-  confirmText?: string;
+  confirmText?: string
   /**
    * @description 取消按钮的颜色  ( 默认 '#909193' )
    * */
-  cancelColor?: string;
+  cancelColor?: string
   /**
    * @description 确认按钮的颜色  ( 默认 '#3c9cff' )
    * */
-  confirmColor?: string;
+  confirmColor?: string
   /**
    * @description 每列中可见选项的数量  ( 默认 5 )
    * */
-  visibleItemCount?: number;
+  visibleItemCount?: number
   /**
    * @description 是否允许点击遮罩关闭选择器  ( 默认 false )
    * */
-  closeOnClickOverlay?: boolean;
+  closeOnClickOverlay?: boolean
   /**
    * @description 各列的默认索引
    * @note 类型有问题,需要调整
    * */
-  defaultIndex?: Array<any>;
+  defaultIndex?: Array<any>
   /**
-   * @description 输入框是否显示边框 ( 默认 false )
+   * @description 是否显示输入框 ( 默认 false )
    * */
-  hasInput?: boolean;
+  hasInput?: boolean
   /**
    * @description 输入框集合属性
    * */
-  input?: Partial<HyInputProps>;
+  input?: Partial<HyInputProps>
   /**
    * @description 右边插槽
    * */
-  toolbarRightSlot?: boolean;
-  /**
-   * @description 输入框形状
-   * */
-  shape?: HyApp.ShapeType;
-  /**
-   * @description 输入框边框
-   * */
-  border?: HyApp.BorderType;
+  toolbarRightSlot?: boolean
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export type ConfirmParams = {
+  /** 选中值 */
+  value: string
+}
+export interface IAddressPickerEmits {
+  /** 关闭选择器时触发 */
+  (e: 'close'): void
+  /** 点击取消按钮触发 */
+  (e: 'cancel'): void
+  /** 点击确认按钮触发 */
+  (e: 'confirm', params: ConfirmParams): void
+  /** 当选择值变化时触发 */
+  (e: 'change', args: any): void
+  /** 当选择值变化时触发 */
+  (e: 'update:modelValue', value: ConfirmParams['value']): void
 }

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

@@ -41,6 +41,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所
+ * @displayName hy-avatar
+ */
+defineOptions({})
 export default {
   name: 'hy-avatar',
   options: {
@@ -53,14 +58,83 @@ export default {
 
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs, ref, watch } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+import type { IAvatarEmit } from './typing'
 import { addUnit, random } from '../../utils'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 头像路径 */
+  src: String,
+  /**
+   * 头像形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: 'circle',
+  },
+  /**
+   * 头像尺寸
+   * @values large, medium, small
+   * */
+  size: {
+    type: [String, Number],
+    default: 'medium',
+  },
+  /**
+   * 头像图片的裁剪类型
+   * @values scaleToFill,aspectFit,aspectFill,widthFix,heightFix,top,bottom,center,left,right,top left,top right,bottom left,bottom right
+   * */
+  mode: {
+    type: String,
+    default: 'scaleToFill',
+  },
+  /** 用文字替代图片，级别优先于src */
+  text: String,
+  /** 头像背景颜色 */
+  bgColor: {
+    type: String,
+    default: '#c0c4cc',
+  },
+  /** 文字颜色 */
+  color: {
+    type: String,
+    default: '#ffffff',
+  },
+  /** 文字大小 */
+  fontSize: {
+    type: Number,
+    default: 18,
+  },
+  /** 显示的图标 */
+  icon: String,
+  /** 显示小程序头像，只对百度，微信，QQ小程序有效 */
+  mpAvatar: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否使用随机背景色 */
+  randomBgColor: {
+    type: Boolean,
+    default: false,
+  },
+  /** 加载失败的默认头像(组件有内置默认图片) */
+  defaultUrl: String,
+  /** 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间 */
+  colorIndex: {
+    type: Number,
+    default: 0,
+  },
+  /** 组件标识符 */
+  name: String,
+  /** 自定义输入框外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
 const {
   src,
   defaultUrl,
@@ -74,7 +148,7 @@ const {
   name,
   customStyle,
 } = toRefs(props)
-const emit = defineEmits(['click'])
+const emit = defineEmits<IAvatarEmit>()
 
 const base64Avatar =
   'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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'

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

@@ -1,64 +1,69 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyAvatarProps {
   /**
    * @description 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
    * */
-  src?: string;
+  src?: string
   /**
    * @description 头像形状  （ circle (默认) | square）
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 （默认 40 ）
    * */
-  size?: number | HyApp.SizeType;
+  size?: number | HyApp.SizeType
   /**
    * @description 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 （默认 'scaleToFill' ）
    * */
-  mode?: string;
+  mode?: string
   /**
    * @description 用文字替代图片，级别优先于src
    * */
-  text?: string;
+  text?: string
   /**
    * @description 背景颜色，一般显示文字时用 （默认 '#c0c4cc' ）
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 文字颜色 （默认 '#ffffff' ）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 文字大小  （默认 18 ）
    * */
-  fontSize?: number | string;
+  fontSize?: number | string
   /**
    * @description 显示的图标
    * */
-  icon?: string;
+  icon?: string
   /**
    * @description 显示小程序头像，只对百度，微信，QQ小程序有效  （默认 false ）
    * */
-  mpAvatar?: boolean;
+  mpAvatar?: boolean
   /**
    * @description 是否使用随机背景色  （默认 false ）
    * */
-  randomBgColor?: boolean;
+  randomBgColor?: boolean
   /**
    * @description 加载失败的默认头像(组件有内置默认图片)
    * */
-  defaultUrl?: string;
+  defaultUrl?: string
   /**
    * @description 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
    * */
-  colorIndex?: number;
+  colorIndex?: number
   /**
    * @description 组件标识符  （默认 'level' ）
    * */
-  name?: string;
+  name?: string
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IAvatarEmit {
+  /** 点击头像触发 */
+  (e: 'click', name: string, e: Event): void
 }