hy-app 0.2.13 → 0.2.15

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

@@ -1,108 +1,131 @@
-import type { CSSProperties } from "vue";
-import type HyInputProps from "../hy-input/typing";
+import type { CSSProperties } from 'vue'
+import type HyInputProps from '../hy-input/typing'
 
-interface PickerColumnVo extends AnyObject {
+export interface PickerColumnVo extends AnyObject {
   /**
    * @description id必填
    * */
-  id: string;
+  id: string
   /**
    * @description 显示文本
    * */
-  text?: string;
+  text?: string
 }
 
 export default interface HyPickerProps {
   /**
    * @description 显示到输入框值
    * */
-  modelValue?: string | string[];
+  modelValue?: string | string[]
   /**
    * @description 对象数组，设置每一列的数据
    * */
-  columns: (string | PickerColumnVo)[][];
+  columns: (string | PickerColumnVo)[][]
   /**
    * @description 是否显示弹窗（默认 false ）
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 弹窗弹出模式
    * */
-  popupMode?: HyApp.LayoutType;
+  popupMode?: HyApp.LayoutType
   /**
    * @description 分割数组条件
    * */
-  separator?: string;
+  separator?: string
   /**
    * @description 是否显示顶部的操作栏（默认 true ）
    * */
-  showToolbar?: boolean;
+  showToolbar?: boolean
   /**
    * @description 顶部标题
    * */
-  title?: string;
+  title?: 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 选项对象中，需要展示的属性键名（默认 'text' ）
    * */
-  keyName?: string;
+  keyName?: string
   /**
    * @description 是否允许点击遮罩关闭选择器（默认 false ）
    * */
-  closeOnClickOverlay?: boolean;
+  closeOnClickOverlay?: boolean
   /**
    * @description 各列的默认索引
    * */
-  defaultIndex?: number[];
+  defaultIndex?: number[]
   /**
    * @description 是否在手指松开时立即触发change事件（默认 true ）
    * */
-  immediateChange?: boolean;
+  immediateChange?: boolean
   /**
    * @description 最高层级
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description 是否显示输入框（默认 false ）
    * */
-  hasInput?: boolean;
+  hasInput?: boolean
   /**
    * @description 输入框集合属性
    * */
-  input?: Partial<HyInputProps>;
+  input?: Partial<HyInputProps>
   /**
    * @description 是否自定义选择器nav左边内容
    * */
-  toolbarRightSlot?: boolean;
+  toolbarRightSlot?: boolean
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export type SelectValueVo = {
+  value: string[]
+  index?: number
+  indexs?: number[]
+  // values为当前变化列的数组内容
+  values?: Array<any>
+  columnIndex?: Array<number>
+}
+export interface IPickerEmits {
+  /** 关闭选择器时触发 */
+  (e: 'close'): void
+  /** 点击取消按钮 */
+  (e: 'cancel'): void
+  /** 点击确定按钮，返回当前选择的值	 */
+  (e: 'confirm', params: SelectValueVo): void
+  /** 当选择值变化时触发 */
+  (e: 'change', params: SelectValueVo): void
+  /** 显示隐藏触发 */
+  (e: 'update:show', show: boolean): void
+  /** 选中值触发 */
+  (e: 'update:modelValue', value: any): void
 }

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

@@ -52,7 +52,10 @@
         <!-- 普通模式 -->
 
         <!-- 列表模式 -->
-        <view v-if="!slots.content && mode === 'menu'" class="hy-popover__menu">
+        <view
+          v-if="!slots.content && mode === 'menu' && Array.isArray(content)"
+          class="hy-popover__menu"
+        >
           <view
             v-for="(item, index) in content"
             :key="index"
@@ -61,8 +64,8 @@
             :style="index === 0 ? 'border-top: none' : ''"
           >
             <hy-icon
-              v-if="typeof item === 'object' && item.iconClass"
-              :name="item.iconClass"
+              v-if="typeof item === 'object' && item.icon"
+              :name="item.icon"
               custom-class="hy-popover__icon"
             />
             <view style="display: inline-block">
@@ -90,6 +93,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 常用于展示提示信息。
+ * @displayName hy-popover
+ */
+defineOptions({})
 export default {
   name: 'hy-popover',
   options: {
@@ -111,9 +119,9 @@ import {
   useSlots,
   watch,
   inject,
+  PropType,
 } from 'vue'
-import defaultProps from './props'
-import IProps, { type PopoverExpose } from './typing'
+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'
@@ -122,9 +130,49 @@ import { closeOther, pushToQueue, removeFromQueue } from '../../common'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyTransition from '../hy-transition/hy-transition.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 控制 popover 的显示状态 */
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  /** 显示的内容，也可以通过 slot#content 传入 */
+  content: [String, Array],
+  /**
+   * 指定 popover 的放置位置
+   * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
+   * */
+  placement: {
+    type: String,
+    default: 'bottom',
+  },
+  /** 控制 popover 的显示状态 */
+  offset: {
+    type: [Number, Array, Object] as PropType<IOffset>,
+    default: 0,
+  },
+  /** 是否显示关闭按钮 */
+  showClose: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否禁用 popover */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 当前显示的模式，决定内容的展现形式
+   * @values normal,menu
+   * */
+  mode: {
+    type: String,
+    default: 'normal',
+  },
+})
 const { modelValue, content, mode, placement } = toRefs(props)
-const emit = defineEmits(['update:modelValue', 'menuClick', 'change', 'open', 'close'])
+const emit = defineEmits<IPopoverEmits>()
 
 const slots = useSlots()
 const queue = inject<Queue | null>(queueKey, null)

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

@@ -19,6 +19,11 @@ export type PopoverExpose = {
   open: () => void
   close: () => void
 }
+export interface PopoverContentVo {
+  iconClass: string
+  content: string
+  icon: string
+}
 
 export default interface HyOverlayProps {
   /**
@@ -28,7 +33,7 @@ export default interface HyOverlayProps {
   /**
    * @description 显示的内容，也可以通过 slot#content 传入
    */
-  content?: string | Record<string, any>[]
+  content?: string | (string | PopoverContentVo)[]
   /**
    * @description 指定 popover 的放置位置：top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
    */
@@ -58,3 +63,18 @@ export default interface HyOverlayProps {
    * */
   customClass?: string
 }
+
+export type PopoverParamsVo = {
+  show: boolean
+}
+export type PopoverItemParamsVo = {
+  item: Record<string, any>
+  index: number
+}
+export interface IPopoverEmits {
+  (e: 'menuClick', params: PopoverItemParamsVo): void
+  (e: 'change', params: PopoverParamsVo): void
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'update:modelValue', value: boolean): void
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-popup">
+  <view :class="['hy-popup', customClass]">
     <HyOverlay
       :show="show"
       @click="overlayClick"
@@ -29,12 +29,7 @@
           hover-class="hy-popup__content__close--hover"
           hover-stay-time="150"
         >
-          <HyIcon
-            :name="IconConfig.CLOSE"
-            color="#909399"
-            size="18"
-            bold
-          ></HyIcon>
+          <HyIcon :name="IconConfig.CLOSE" color="#909399" size="18" bold></HyIcon>
         </view>
         <!--        <hy-safe-bottom v-if="safeAreaInsetBottom"></hy-safe-bottom>-->
       </view>
@@ -43,43 +38,113 @@
 </template>
 
 <script lang="ts">
+/**
+ * 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
+ * @displayName hy-popup
+ */
+defineOptions({})
 export default {
   name: 'hy-popup',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, toRefs, watch } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, getWindowInfo } from "../../utils";
-import { IconConfig } from "../../config";
+import { computed, type CSSProperties, PropType, ref, toRefs, watch } from 'vue'
+import type { IPopupEmits } from './typing'
+import { addUnit, getWindowInfo } from '../../utils'
+import { IconConfig } from '../../config'
 
 // 组件
-import HyTransition from "../hy-transition/hy-transition.vue";
-import HyOverlay from "../hy-overlay/hy-overlay.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyOverlay from '../hy-overlay/hy-overlay.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  duration,
-  show,
-  closeOnClickOverlay,
-  mode,
-  zIndex,
-  bgColor,
-  round,
-  customStyle,
-  zoom,
-} = toRefs(props);
-const emit = defineEmits(["open", "close", "click", "update:show"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否展示弹窗 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示遮罩 */
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 弹出方向 */
+  mode: {
+    type: String,
+    default: 'bottom',
+  },
+  /** 动画时长，单位ms */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 是否显示关闭图标 */
+  closeable: {
+    type: Boolean,
+    default: false,
+  },
+  /** 自定义遮罩的样式 */
+  overlayStyle: Object as PropType<CSSProperties>,
+  /** 遮罩透明度，0-1之间 */
+  overlayOpacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /** 点击遮罩是否关闭弹窗 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 弹窗层级 */
+  zIndex: {
+    type: Number,
+    default: 10086,
+  },
+  /** 是否为iPhoneX留出底部安全距离 */
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否留出顶部安全距离 */
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 自定义关闭图标位置
+   * @values top-left,top-right
+   * */
+  closeIconPos: {
+    type: String,
+    default: 'top-right',
+  },
+  /** 圆角值 */
+  round: String,
+  /** 当mode=center时 是否开启缩放 */
+  zoom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 背景颜色 */
+  bgColor: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { duration, show, closeOnClickOverlay, mode, zIndex, bgColor, round, customStyle, zoom } =
+  toRefs(props)
+const emit = defineEmits<IPopupEmits>()
 
-const overlayDuration = ref(duration.value + 50);
+const overlayDuration = ref(duration.value + 50)
 
 watch(
   () => show.value,
@@ -91,117 +156,117 @@ watch(
       // #endif
     }
   },
-);
+)
 
 const transitionStyle = computed(() => {
   const style: CSSProperties = {
     zIndex: zIndex.value,
-    position: "fixed",
-    display: "flex",
-  };
-  if (mode.value !== "center") {
-    style[mode.value] = 0;
+    position: 'fixed',
+    display: 'flex',
+  }
+  if (mode.value !== 'center') {
+    style[mode.value] = 0
   }
   switch (mode.value) {
-    case "left":
-    case "right":
-      style.bottom = 0;
-      style.top = 0;
-      break;
-    case "top":
-    case "bottom":
-      style.left = 0;
-      style.right = 0;
-      break;
-    case "center":
+    case 'left':
+    case 'right':
+      style.bottom = 0
+      style.top = 0
+      break
+    case 'top':
+    case 'bottom':
+      style.left = 0
+      style.right = 0
+      break
+    case 'center':
       Object.assign(style, {
-        alignItems: "center",
-        "justify-content": "center",
+        alignItems: 'center',
+        'justify-content': 'center',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-      });
-      break;
+      })
+      break
     default:
-      break;
+      break
   }
 
-  return style;
-});
+  return style
+})
 const contentStyle = computed(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
   // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
   // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
-  const { safeAreaInsets } = getWindowInfo();
-  if (mode.value !== "center") {
-    style.flex = 1;
+  const { safeAreaInsets } = getWindowInfo()
+  if (mode.value !== 'center') {
+    style.flex = 1
   }
   // 背景色，一般用于设置为transparent，去除默认的白色背景
   if (bgColor.value) {
-    style.backgroundColor = bgColor.value;
+    style.backgroundColor = bgColor.value
   }
   if (round.value) {
-    const value = addUnit(round.value);
+    const value = addUnit(round.value)
     switch (mode.value) {
-      case "top":
-        style.borderBottomLeftRadius = value;
-        style.borderBottomRightRadius = value;
-        break;
-      case "bottom":
-        style.borderTopLeftRadius = value;
-        style.borderTopRightRadius = value;
-        break;
-      case "center":
-        style.borderRadius = value;
-        break;
+      case 'top':
+        style.borderBottomLeftRadius = value
+        style.borderBottomRightRadius = value
+        break
+      case 'bottom':
+        style.borderTopLeftRadius = value
+        style.borderTopRightRadius = value
+        break
+      case 'center':
+        style.borderRadius = value
+        break
       default:
-        break;
+        break
     }
   }
-  return Object.assign(style, customStyle.value || {});
-});
+  return Object.assign(style, customStyle.value || {})
+})
 const positionMode = computed(() => {
-  if (mode.value === "center") {
-    return zoom.value ? "fade-zoom" : "fade";
+  if (mode.value === 'center') {
+    return zoom.value ? 'fade-zoom' : 'fade'
   }
-  if (mode.value === "left") {
-    return "slide-left";
+  if (mode.value === 'left') {
+    return 'slide-left'
   }
-  if (mode.value === "right") {
-    return "slide-right";
+  if (mode.value === 'right') {
+    return 'slide-right'
   }
-  if (mode.value === "bottom") {
-    return "slide-up";
+  if (mode.value === 'bottom') {
+    return 'slide-up'
   }
-  if (mode.value === "top") {
-    return "slide-down";
+  if (mode.value === 'top') {
+    return 'slide-down'
   }
-});
+})
 
 // 点击遮罩
 const overlayClick = () => {
   if (closeOnClickOverlay.value) {
-    emit("update:show", false);
-    emit("close");
+    emit('update:show', false)
+    emit('close')
   }
-};
+}
 const close = () => {
-  emit("update:show", false);
-  emit("close");
-};
+  emit('update:show', false)
+  emit('close')
+}
 const afterEnter = () => {
-  emit("open");
-};
+  emit('open')
+}
 const clickHandler = () => {
   // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
-  if (mode.value === "center") {
-    overlayClick();
+  if (mode.value === 'center') {
+    overlayClick()
   }
-  emit("click");
-};
+  emit('click')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -66,3 +66,14 @@ export default interface HyPopupProps {
    * */
   customStyle?: CSSProperties
 }
+
+export interface IPopupEmits {
+  /** 弹出层打开触发 */
+  (e: 'open'): void
+  /** 弹出层关闭触发 */
+  (e: 'close'): void
+  /** 弹出层点击触发 */
+  (e: 'click'): void
+  /** 显示隐藏触发 */
+  (e: 'update:show', visible: boolean): void
+}