hy-app 0.3.1 → 0.3.3

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

@@ -1,83 +1,96 @@
-import type { CSSProperties } from 'vue'
-import type HyButtonProps from '../hy-button/typing'
+import type { CSSProperties } from "vue";
+import type HyButtonProps from "../hy-button/typing";
 
 type EmptyModeType =
-  | 'car'
-  | 'page'
-  | 'search'
-  | 'address'
-  | 'wifi'
-  | 'order'
-  | 'coupon'
-  | 'favor'
-  | 'permission'
-  | 'history'
-  | 'message'
-  | 'image'
-  | 'video'
-  | 'comment'
-  | 'integral'
-  | 'subscribe'
-  | 'earnings'
-  | 'announcement'
-  | 'signIn'
+  | "car"
+  | "page"
+  | "search"
+  | "address"
+  | "wifi"
+  | "order"
+  | "coupon"
+  | "favor"
+  | "permission"
+  | "history"
+  | "message"
+  | "image"
+  | "video"
+  | "comment"
+  | "integral"
+  | "subscribe"
+  | "earnings"
+  | "announcement"
+  | "signIn";
+
+export type IEmptyIcon = {
+  [key: string]: {
+    /**
+     * 提示信息
+     * */
+    desc: string;
+    /**
+     * 空状态图片地址
+     * */
+    icon: string;
+  };
+};
 
 export default interface HyEmptyProps {
   /**
    * @description 是否显示空状态
    * */
-  show?: boolean
+  show?: boolean;
   /**
    * @description 缺省页内容
    * */
-  mode?: EmptyModeType
+  mode?: EmptyModeType;
   /**
    * @description 空状态图片
    * */
-  imageUrl?: string
+  imageUrl?: string;
   /**
    * @description 组件层级
    * */
-  zIndex?: number
+  zIndex?: number;
   /**
    * @description icon宽度
    * */
-  width?: number | string
+  width?: number | string;
   /**
    * @description icon高度
    * */
-  height?: number | string
+  height?: number | string;
   /**
    * @description 提示信息
    * */
-  description?: string
+  description?: string;
   /**
    * @description 提示信息大小
    * */
-  desSize?: string | number
+  desSize?: string | number;
   /**
    * @description 提示信息颜色
    * */
-  desColor?: string
+  desColor?: string;
   /**
    * @description 图片margin
    * */
-  imgMargin?: string
+  imgMargin?: string;
   /**
    * @description 按钮属性只
    * */
-  button?: HyButtonProps
+  button?: HyButtonProps;
   /**
    * @description 跳转地址
    * */
-  navigateUrl?: string
+  navigateUrl?: string;
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface IEmptyEmits {
   /** 点击按钮触发 */
-  (e: 'click'): void
+  (e: "click"): void;
 }

package/components/hy-flex/hy-flex.vue

@@ -4,10 +4,22 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-flex",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
-import { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from './typing'
-import { addUnit, isArray } from '../../utils'
+import { computed } from "vue";
+import type { PropType } from "vue";
+import type { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from "./typing";
+import { addUnit, isArray } from "../../utils";
 
 const props = defineProps({
   /** flex 主轴的方向是否垂直，使用 flex-direction: column */
@@ -15,59 +27,73 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  /** 快捷设置 flex-direction */
+  /**
+   * 快捷设置 flex-direction
+   * @values row,row-reverse,column,column-reverse
+   * */
   direction: String as PropType<FlexDirection>,
-  /** 设置元素在主轴方向上的对齐方式 */
+  /**
+   * 设置元素在主轴方向上的对齐方式
+   * @values flex-start,flex-end,space-between,space-around,space-evenly,center
+   * */
   justify: {
     type: String as PropType<FlexJustify>,
-    default: 'flex-start',
+    default: "flex-start",
   },
-  /** 设置元素在交叉轴方向上的对齐方式 */
+  /**
+   * 设置元素在交叉轴方向上的对齐方式
+   * @values flex-start,center,flex-end,stretch,baseline
+   * */
   align: {
     type: String as PropType<FlexAlign>,
-    default: 'flex-start',
+    default: "flex-start",
   },
-  /** 设置元素单行显示还是多行显示 */
+  /**
+   * 设置元素单行显示还是多行显示
+   * @values nowrap,wrap,wrap-reverse
+   * */
   wrap: {
     type: String as PropType<FlexWrap>,
-    default: 'nowrap',
+    default: "nowrap",
   },
   /** flex 属性，支持数字或字符串。如 1 或 'none' */
   flex: {
     type: [String, Number],
-    default: 'initial',
+    default: "initial",
   },
   /** 设置网格之间的间隙 */
   gap: {
-    type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
+    type: [String, Number, Array] as PropType<
+      string | number | (string | number)[]
+    >,
     default: 0,
   },
   /** 快捷设置 */
   basis: {
     type: [String, Number],
-    default: 'auto',
+    default: "auto",
   },
-})
+});
 
 // 计算 class
-const cls = computed(() => ['hy-flex', props.vertical && 'hy-flex--vertical'])
+const cls = computed(() => ["hy-flex", props.vertical && "hy-flex--vertical"]);
 
 // 计算 style
 const style = computed(() => {
-  const gap = isArray(props.gap) ? props.gap : [props.gap, props.gap]
-  const [rowGap, colGap] = gap.map((v) => addUnit(v))
+  const gap = isArray(props.gap) ? props.gap : [props.gap, props.gap];
+  const [rowGap, colGap] = gap.map((v) => addUnit(v));
 
   return {
-    display: 'flex',
-    'justify-content': props.justify,
-    'align-items': props.align,
-    'flex-wrap': props.wrap,
+    display: "flex",
+    "justify-content": props.justify,
+    "align-items": props.align,
+    "flex-wrap": props.wrap,
     flex: props.flex,
-    'flex-basis': props.basis,
-    'row-gap': colGap,
-    'column-gap': rowGap,
-  }
-})
+    "flex-basis": props.basis,
+    "row-gap": colGap,
+    "column-gap": rowGap,
+  };
+});
 </script>
 
 <style scoped></style>