hy-app 0.2.13 → 0.2.15

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

@@ -1,48 +1,48 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyDropdownProps {
   /**
    * @description 标题和选项卡选中的颜色（默认#2979ff）
    * */
-  activeColor?: string;
+  activeColor?: string
   /**
    * @description 标题和选项卡未选中的颜色（默认#606266）
    * */
-  inactiveColor?: string;
+  inactiveColor?: string
   /**
    * @description 点击遮罩是否关闭菜单（默认true）
    * */
-  closeOnClickMask?: boolean;
+  closeOnClickMask?: boolean
   /**
    * @description 是否粘性定位（默认true）
    * */
-  sticky?: boolean;
+  sticky?: boolean
   /**
    * @description 标题菜单的高度，单位任意（默认80）
    * */
-  height?: number | string;
+  height?: number | string
   /**
    * @description 标题菜单是否显示下边框（默认false）
    * */
-  borderBottom?: boolean;
+  borderBottom?: boolean
   /**
    * @description 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
    * */
-  titleSize?: number;
+  titleSize?: number
   /**
    * @description 菜单展开内容下方的圆角值，单位任意（默认0）
    * */
-  borderRadius?: number;
+  borderRadius?: number
   /**
-   * @description 是否显示遮罩
+   * @description 图标名称
    * */
-  menuIcon?: string;
+  menuIcon?: string
   /**
-   * @description 是否显示遮罩
+   * @description 图标大小
    * */
-  menuIconSize?: number;
+  menuIconSize?: number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -58,6 +58,10 @@
 </template>
 
 <script lang="ts">
+/**
+ * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。和hy-dropdown组合用法
+ * @displayName hy-dropdown-item
+ */
 export default {
   name: 'hy-dropdown-item',
   options: {
@@ -67,9 +71,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, ref, onMounted, watch, useSlots, toRefs, getCurrentInstance } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+import {
+  computed,
+  inject,
+  ref,
+  onMounted,
+  watch,
+  useSlots,
+  toRefs,
+  getCurrentInstance,
+  type PropType,
+} from 'vue'
+import type { IDropdownItemEmits } from './typing'
 import type FatherIProps from '../hy-dropdown/typing'
 import type { DropdownMenuItem } from './typing'
 import { addUnit, getRect, throttle } from '../../utils'
@@ -78,9 +91,25 @@ import { IconConfig } from '../../config'
 import HyOverlay from '../hy-overlay/hy-overlay.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 获取值 */
+  modelValue: String,
+  /** 标题 */
+  title: String,
+  /** 下拉选择值 */
+  menus: {
+    type: Array as unknown as PropType<DropdownMenuItem[]>,
+    default: [],
+  },
+  /** 禁用组件点击 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
 const { modelValue, menus } = toRefs(props)
-const emits = defineEmits(['update:modelValue', 'change'])
+const emits = defineEmits<IDropdownItemEmits>()
 
 const slots = useSlots()
 //是否有插槽

package/components/hy-dropdown-item/typing.d.ts

@@ -2,28 +2,35 @@ export interface DropdownMenuItem {
   /**
    * @description 展示标题
    * */
-  label: string;
+  label: string
   /**
    * @description 值
    * */
-  value: string | number;
+  value: string | number
 }
 
 export default interface HyDropdownItemProps {
   /**
    * @description 获取值
    * */
-  modelValue: string | number;
+  modelValue: string | number
   /**
    * @description 标题
    * */
-  title: string;
+  title: string
   /**
    * @description 下拉选择值
    * */
-  menus?: DropdownMenuItem[];
+  menus?: DropdownMenuItem[]
   /**
    * @description 禁用组件点击
    * */
-  disabled?: boolean;
+  disabled?: boolean
+}
+
+export interface IDropdownItemEmits {
+  /** 选中值触发 */
+  (e: 'change', item: DropdownMenuItem): void
+  /** 选中值触发 */
+  (e: 'update:modelValue', item: DropdownMenuItem): void
 }

package/components/hy-empty/hy-empty.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-empty" v-if="show" :style="emptyStyle">
+  <view :class="['hy-empty', customClass]" v-if="show" :style="emptyStyle">
     <view class="hy-empty__img" :style="imgStyle">
       <HyIcon
         :name="imageUrl || emptyIcon[mode].icon"
@@ -30,6 +30,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 加载的第一页数据就为空
+ * @displayName hy-empty
+ */
+defineOptions({})
 export default {
   name: 'hy-empty',
   options: {
@@ -41,20 +46,73 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit } from '../../utils'
 import emptyIcon from './icon'
+import type { HyButtonProps } from '../hy-button/typing'
+import type { IEmptyEmits } from './typing'
 
 // 组件
 import HyButton from '../hy-button/hy-button.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否显示空状态 */
+  show: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  /** 缺省页内容 */
+  mode: {
+    type: String,
+    default: 'car',
+  },
+  /** 空状态图片 */
+  imageUrl: String,
+  /** 组件层级 */
+  zIndex: {
+    type: Number,
+    default: 889,
+  },
+  /** 组件层级 */
+  width: {
+    type: Number,
+    default: 350,
+  },
+  /** icon高度 */
+  height: {
+    type: [String, Number],
+    default: 'auto',
+  },
+  /** 提示信息 */
+  description: String,
+  /** 提示信息大小 */
+  desSize: {
+    type: Number,
+    default: 15,
+  },
+  /** 提示信息颜色 */
+  desColor: String,
+  /** 图片margin */
+  imgMargin: String,
+  /** 按钮属性值 */
+  button: {
+    type: Object as unknown as PropType<HyButtonProps>,
+  },
+  navigateUrl: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const { zIndex, width, height, imgMargin, navigateUrl, desSize, desColor, customStyle } =
   toRefs(props)
-const emit = defineEmits(['click'])
+const emit = defineEmits<IEmptyEmits>()
 
 const emptyDescription = computed(() => {
   return props.description

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

@@ -76,3 +76,8 @@ export default interface HyEmptyProps {
    * */
   customStyle?: CSSProperties
 }
+
+export interface IEmptyEmits {
+  /** 点击按钮触发 */
+  (e: 'click'): void
+}

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

@@ -9,6 +9,7 @@
         'hy-float-button__shadow': shadow,
       },
       `hy-float-button__${shape}`,
+      customClass,
     ]"
     @touchmove.stop.prevent="handleTouchMove"
     @touchstart="handleTouchStart"
@@ -60,6 +61,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 悬浮动作按钮组件，按下可显示一组动作按钮。
+ * @displayName hy-float-button
+ */
+defineOptions({})
 export default {
   name: 'hy-float-button',
   options: {
@@ -71,18 +77,124 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, type CSSProperties, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
-import type IProps from './typing'
+import { computed, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IFloatButtonEmits, IGap } from './typing'
 import type { MenusType } from './typing'
-import defaultProps from './props'
 import { addUnit, getPx, getRect, guid, isH5 } from '../../utils'
 import { HyApp } from '../../typing/modules/common'
+import { IconConfig } from '../../config'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLine from '../hy-line/hy-line.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 菜单栏集合 */
+  menus: {
+    type: Array as unknown as PropType<MenusType[]>,
+    default: [],
+  },
+  /**
+   * 打开方向
+   * @values row,column
+   * */
+  direction: {
+    type: String,
+    default: 'column',
+  },
+  /** 按钮显示的图标 */
+  icon: {
+    type: String,
+    default: IconConfig.PLUS,
+  },
+  /** 按钮图标大小 */
+  iconSize: String,
+  /** 按钮图标颜色 */
+  iconColor: String,
+  /** 到边框最小距离 */
+  gap: {
+    type: Object as unknown as PropType<IGap>,
+    default: { left: 16, right: 16, top: 16, bottom: 40 },
+  },
+  /** 层级 */
+  zIndex: {
+    type: Number,
+    default: 10086,
+  },
+  /** 按钮背景颜色 */
+  bgColor: String,
+  /** 按钮文字 */
+  text: String,
+  /** 按钮文字大小 */
+  fontSize: {
+    type: [Number, String],
+    default: 12,
+  },
+  /** 按钮文字的颜色 */
+  textColor: String,
+  /**
+   * 按钮的尺寸
+   * @values small,medium,large
+   * */
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  /**
+   * 按钮的形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: 'circle',
+  },
+  /** 按钮的透明度 */
+  opacity: {
+    type: Number,
+    default: 1,
+  },
+  /** 是否显示阴影 */
+  shadow: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示漂浮的动画 */
+  float: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否固定位置 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否能拖动 */
+  draggable: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 悬浮按钮位置
+   * @values left-top,left-bottom,right-top,right-bottom,left-center,right-center,top-center,bottom-center
+   * */
+  position: {
+    type: String,
+    default: 'right-bottom',
+  },
+  /** 禁用点击打开菜单栏 */
+  expandable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   menus,
   customStyle,
@@ -98,7 +210,7 @@ const {
   position,
   expandable,
 } = toRefs(props)
-const emit = defineEmits(['click', 'clickItem'])
+const emit = defineEmits<IFloatButtonEmits>()
 
 const instance = getCurrentInstance()
 const btnSize: AnyObject = {

package/components/hy-float-button/typing.d.ts

@@ -115,3 +115,10 @@ export default interface HyFloatButtonProps {
    * */
   customStyle?: CSSProperties
 }
+
+export interface IFloatButtonEmits {
+  /** 点击悬浮按钮触发 */
+  (e: 'click'): void
+  /** 点击菜单按钮触发 */
+  (e: 'clickItem', item: MenusType, index: number): void
+}

package/components/hy-folding-panel/hy-folding-panel.vue

@@ -39,64 +39,126 @@
 </template>
 
 <script lang="ts">
+/**
+ * 通过折叠面板收纳内容区域。
+ * @displayName hy-folding-panel
+ */
+defineOptions({})
 export default {
   name: 'hy-folding-panel',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { toRefs, ref, watch } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import type { PanelVo } from "./typing";
+import { toRefs, ref, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IFoldingPanel, PanelVo } from './typing'
+import { addUnit } from '../../utils'
+import { ColorConfig } from '../../config'
 
-import HyCell from "../hy-cell/hy-cell.vue";
-import HyLine from "../hy-line/hy-line.vue";
-import { addUnit } from "../../utils";
+import HyCell from '../hy-cell/hy-cell.vue'
+import HyLine from '../hy-line/hy-line.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { list, contentHeight, accordion } = toRefs(props);
-const emit = defineEmits(["open", "close", "change"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 数据集 */
+  list: {
+    type: Array as PropType<PanelVo[]>,
+    default: [],
+  },
+  /** 是否手风琴模式 */
+  accordion: {
+    type: Boolean,
+    default: false,
+  },
+  /** 头部标题 */
+  title: String,
+  /** 是否显示头部底部边框 */
+  titleBorder: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示cell下边框 */
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标题前缀竖线颜色 */
+  verticalColor: {
+    type: String,
+    default: ColorConfig.primary,
+  },
+  /** 是否显示标题前缀竖线 */
+  showVertical: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 单元的大小
+   * @values large,medium,small
+   * */
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  /** 内容面板高度 */
+  contentHeight: {
+    type: [Number, String],
+    default: 120,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { list, contentHeight, accordion } = toRefs(props)
+const emit = defineEmits<IFoldingPanel>()
 
-const lists = ref<PanelVo[]>([]);
+const lists = ref<PanelVo[]>([])
 
 watch(
   () => list.value,
   (newValue: PanelVo[]) => {
     lists.value = newValue.map((item) => ({
       ...item,
-      arrowDirection: "down",
+      arrowDirection: 'down',
       spread: false,
-    }));
+    }))
   },
   { immediate: true },
-);
+)
 
 const clickHandler = (temp: PanelVo, index: number) => {
   // if (temp?.disabled && temp?.animating) return;
   lists.value = list.value.map((item, i) => {
     if (accordion.value) {
       // 判断是否是收起来
-      item.spread = i === index ? !item.spread : false;
+      item.spread = i === index ? !item.spread : false
     } else {
       if (i === index) {
-        item.spread = !item.spread;
+        item.spread = !item.spread
       }
     }
 
-    item.arrowDirection = item.spread ? "up" : "down";
-    return item;
-  });
-  emit("change", temp, index);
-  emit(temp.spread ? "open" : "close", temp, index);
-};
+    item.arrowDirection = item.spread ? 'up' : 'down'
+    return item
+  })
+  const event = temp.spread ? 'open' : 'close'
+  emit('change', temp, index)
+  emit(event, temp, index)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-folding-panel/typing.d.ts

@@ -1,59 +1,68 @@
-import type { CSSProperties } from "vue";
-import type { CellContentVo } from "../hy-cell/typing";
+import type { CSSProperties } from 'vue'
+import type { CellContentVo } from '../hy-cell/typing'
 
 export interface PanelVo extends CellContentVo {
   /**
    * @description 是否展示
    * */
-  spread?: boolean;
+  spread?: boolean
   /**
    * @description 展示面板里自定义值
    * */
-  content?: string;
+  content?: string
 }
 export default interface HyFoldingPanelProps {
   /**
    * @description 数据集
    * */
-  list: PanelVo[];
+  list: PanelVo[]
   /**
    * @description 是否手风琴模式（ 默认 false ）
    * */
-  accordion?: boolean;
+  accordion?: boolean
   /**
    * @description 头部标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 是否显示头部底部边框
    * */
-  titleBorder?: boolean;
+  titleBorder?: boolean
   /**
    * @description 是否显示cell下边框 (默认 true )
    * */
-  border?: boolean;
+  border?: boolean
   /**
    * @description 标题前缀竖线颜色
    * */
-  verticalColor?: string;
+  verticalColor?: string
   /**
    * @description 是否显示标题前缀竖线
    * */
-  showVertical?: boolean;
+  showVertical?: boolean
   /**
    * @description 是否禁用（默认false）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 单元的大小，可选值为 large，medium，small
    * */
-  size?: HyApp.SizeType;
+  size?: HyApp.SizeType
   /**
    * @description 内容面板高度
    * */
-  contentHeight?: string | number;
+  contentHeight?: string | number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IFoldingPanel {
+  /** 打开面板触发 */
+  (e: 'open', temp: PanelVo, index: number): void
+  /** 关闭面板触发 */
+  (e: 'close', temp: PanelVo, index: number): void
+  /** 改成面板开关状态触发 */
+  (e: 'change', temp: PanelVo, index: number): void
 }