hy-app 0.4.13 → 0.5.0

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

@@ -1,170 +1,116 @@
 <template>
-  <view :class="['hy-empty', customClass]" v-if="show" :style="emptyStyle">
-    <view class="hy-empty__img" :style="imgStyle">
-      <HyImage
-        :src="imageUrl || emptyIcon[mode].icon"
-        :width="width"
-        :height="height"
-        img-mode="widthFix"
-      ></HyImage>
+    <view :class="['hy-empty', customClass]" v-if="show" :style="emptyStyle">
+        <view class="hy-empty__img" :style="imgStyle">
+            <hy-image
+                :src="imageUrl || emptyIcon[mode].icon"
+                :width="width"
+                :height="height"
+                img-mode="widthFix"
+            ></hy-image>
+        </view>
+        <view v-if="$slots.default">
+            <slot></slot>
+        </view>
+        <view class="hy-empty--description" v-else>
+            <!-- 详情描述 -->
+            <slot v-if="$slots.description" name="description"></slot>
+            <text v-else :style="descriptionStyle">{{
+                emptyDescription || emptyIcon[mode].desc
+            }}</text>
+            <view class="hy-empty--button" v-if="button?.text">
+                <hy-button
+                    :text="button?.text"
+                    :size="button?.size"
+                    :type="button?.type"
+                    :shape="button?.shape"
+                    :plain="button?.plain"
+                    :custom-style="button?.customStyle"
+                    @click="handleClick"
+                ></hy-button>
+            </view>
+        </view>
     </view>
-    <view v-if="$slots.default">
-      <slot></slot>
-    </view>
-    <view class="hy-empty--description" v-else>
-      <slot v-if="$slots.description" name="description"></slot>
-      <text v-else :style="descriptionStyle">{{
-        emptyDescription || emptyIcon[mode].desc
-      }}</text>
-      <view class="hy-empty--button" v-if="button?.text">
-        <HyButton
-          :text="button?.text"
-          :size="button?.size"
-          :type="button?.type"
-          :shape="button?.shape"
-          :plain="button?.plain"
-          :custom-style="button?.customStyle"
-          @click="handleClick"
-        ></HyButton>
-      </view>
-    </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-empty",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-empty',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { addUnit } from "../../libs";
-import emptyIcon from "./icon";
-import type { HyButtonProps } from "../hy-button/typing";
-import type { IEmptyEmits } from "./typing";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import emptyIcon from './icon'
+import type { IEmptyEmits } from './typing'
+import emptyProps from './props'
 // 组件
-import HyButton from "../hy-button/hy-button.vue";
-import HyImage from "../hy-image/hy-image.vue";
+import HyButton from '../hy-button/hy-button.vue'
+import HyImage from '../hy-image/hy-image.vue'
 
 /**
  * 加载的第一页数据就为空
  * @displayName hy-empty
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 是否显示空状态 */
-  show: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * 缺省页内容
-   * @values content,search,address,network,order,coupon,favor,history,message,comment,integral
-   * */
-  mode: {
-    type: String,
-    default: "content",
-  },
-  /** 空状态图片 */
-  imageUrl: String,
-  /** 组件层级 */
-  zIndex: {
-    type: Number,
-    default: 889,
-  },
-  /** 组件层级 */
-  width: {
-    type: [String, Number],
-    default: "240px",
-  },
-  /** icon高度 */
-  height: {
-    type: [String, Number],
-    default: "240px",
-  },
-  /** 提示信息 */
-  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>,
-    default: () => {},
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<IEmptyEmits>();
+const props = defineProps(emptyProps)
+const emit = defineEmits<IEmptyEmits>()
 
 const emptyDescription = computed(() => {
-  return props.description;
-});
+    return props.description
+})
 
 /**
  * @description 整体样式
  * */
 const emptyStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    zIndex: props.zIndex,
-  };
-  return Object.assign(style, props.customStyle);
-});
+    const style: CSSProperties = {
+        zIndex: props.zIndex
+    }
+    return Object.assign(style, props.customStyle)
+})
 
 /**
  * @description 提示信息样式
  * */
 const descriptionStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    fontSize: addUnit(props.desSize),
-    color: props.desColor,
-  };
-  return style;
-});
+    const style: CSSProperties = {
+        fontSize: addUnit(props.desSize),
+        color: props.desColor
+    }
+    return style
+})
 
 /**
  * @description 图片样式
  * */
 const imgStyle = computed<CSSProperties>(() => {
-  return {
-    width: addUnit(props.width),
-    height: addUnit(props.height),
-    margin: props.imgMargin,
-  };
-});
+    return {
+        width: addUnit(props.width),
+        height: addUnit(props.height),
+        margin: props.imgMargin
+    }
+})
 
 /**
  * @description 点击按钮，跳转页面
  * */
 const handleClick = () => {
-  emit("click");
-  if (props.navigateUrl) {
-    uni.navigateTo({
-      url: props.navigateUrl,
-    });
-  }
-};
+    emit('click')
+    if (props.navigateUrl) {
+        uni.navigateTo({
+            url: props.navigateUrl
+        })
+    }
+}
 </script>
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-empty/props.ts

@@ -1,18 +1,60 @@
-import type IProps from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type { HyButtonProps } from '../hy-button/typing'
 
-const defaultProps: IProps = {
-  show: true,
-  mode: 'car',
-  imageUrl: '',
-  zIndex: 889,
-  width: 350,
-  height: 'auto',
-  description: '',
-  desSize: 15,
-  desColor: '',
-  imgMargin: '',
-  button: {},
-  navigateUrl: '',
+const emptyProps = {
+    /** 是否显示空状态 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 缺省页内容
+     * @values content,search,address,network,order,coupon,favor,history,message,comment,integral
+     * */
+    mode: {
+        type: String,
+        default: 'content'
+    },
+    /** 空状态图片 */
+    imageUrl: String,
+    /** 组件层级 */
+    zIndex: {
+        type: Number,
+        default: 889
+    },
+    /** 组件层级 */
+    width: {
+        type: [String, Number],
+        default: '240px'
+    },
+    /** icon高度 */
+    height: {
+        type: [String, Number],
+        default: '240px'
+    },
+    /** 提示信息 */
+    description: String,
+    /** 提示信息大小 */
+    desSize: {
+        type: Number,
+        default: 15
+    },
+    /** 提示信息颜色 */
+    desColor: String,
+    /** 图片margin */
+    imgMargin: String,
+    /** 按钮属性值 */
+    button: {
+        type: Object as PropType<HyButtonProps>
+    },
+    navigateUrl: String,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
 }
 
-export default defaultProps
+export default emptyProps

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

@@ -1,96 +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]: {
+    [key: string]: {
+        /**
+         * 提示信息
+         * */
+        desc: string
+        /**
+         * 空状态图片地址
+         * */
+        icon: string
+    }
+}
+
+export default interface HyEmptyProps {
     /**
-     * 提示信息
+     * @description 是否显示空状态
      * */
-    desc: string;
+    show?: boolean
     /**
-     * 空状态图片地址
+     * @description 缺省页内容
      * */
-    icon: string;
-  };
-};
-
-export default interface HyEmptyProps {
-  /**
-   * @description 是否显示空状态
-   * */
-  show?: boolean;
-  /**
-   * @description 缺省页内容
-   * */
-  mode?: EmptyModeType;
-  /**
-   * @description 空状态图片
-   * */
-  imageUrl?: string;
-  /**
-   * @description 组件层级
-   * */
-  zIndex?: number;
-  /**
-   * @description icon宽度
-   * */
-  width?: number | string;
-  /**
-   * @description icon高度
-   * */
-  height?: number | string;
-  /**
-   * @description 提示信息
-   * */
-  description?: string;
-  /**
-   * @description 提示信息大小
-   * */
-  desSize?: string | number;
-  /**
-   * @description 提示信息颜色
-   * */
-  desColor?: string;
-  /**
-   * @description 图片margin
-   * */
-  imgMargin?: string;
-  /**
-   * @description 按钮属性只
-   * */
-  button?: HyButtonProps;
-  /**
-   * @description 跳转地址
-   * */
-  navigateUrl?: string;
-  /**
-   * @description 自定义输入框外部样式
-   * */
-  customStyle?: CSSProperties;
+    mode?: EmptyModeType
+    /**
+     * @description 空状态图片
+     * */
+    imageUrl?: string
+    /**
+     * @description 组件层级
+     * */
+    zIndex?: number
+    /**
+     * @description icon宽度
+     * */
+    width?: number | string
+    /**
+     * @description icon高度
+     * */
+    height?: number | string
+    /**
+     * @description 提示信息
+     * */
+    description?: string
+    /**
+     * @description 提示信息大小
+     * */
+    desSize?: string | number
+    /**
+     * @description 提示信息颜色
+     * */
+    desColor?: string
+    /**
+     * @description 图片margin
+     * */
+    imgMargin?: string
+    /**
+     * @description 按钮属性只
+     * */
+    button?: HyButtonProps
+    /**
+     * @description 跳转地址
+     * */
+    navigateUrl?: string
+    /**
+     * @description 自定义输入框外部样式
+     * */
+    customStyle?: CSSProperties
 }
 
 export interface IEmptyEmits {
-  /** 点击按钮触发 */
-  (e: "click"): void;
+    /** 点击按钮触发 */
+    (e: 'click'): void
 }

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

@@ -1,108 +1,53 @@
 <template>
-  <view :class="flexClass" :style="flexStyle">
-    <slot />
-  </view>
+    <view :class="flexClass" :style="flexStyle">
+        <slot />
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-flex",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-flex',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties } from "vue";
-import type { PropType } from "vue";
-import type { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from "./typing";
-import { addUnit, isArray } from "../../libs";
+import { computed } from 'vue'
+import { addUnit, isArray } from '../../libs'
+import flexProps from './props'
 
-const props = defineProps({
-  /** flex 主轴的方向是否垂直，使用 flex-direction: column */
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 设置元素在主轴方向上的对齐方式
-   * @values flex-start,flex-end,space-between,space-around,space-evenly,center
-   * */
-  justify: {
-    type: String as PropType<FlexJustify>,
-    default: "flex-start",
-  },
-  /**
-   * 设置元素在交叉轴方向上的对齐方式
-   * @values flex-start,center,flex-end,stretch,baseline
-   * */
-  align: {
-    type: String as PropType<FlexAlign>,
-    default: "flex-start",
-  },
-  /**
-   * 设置元素单行显示还是多行显示
-   * @values nowrap,wrap,wrap-reverse
-   * */
-  wrap: {
-    type: String as PropType<FlexWrap>,
-    default: "nowrap",
-  },
-  /** flex 属性，支持数字或字符串。如 1 或 'none' */
-  flex: {
-    type: [String, Number],
-    default: "initial",
-  },
-  /** 设置网格之间的间隙 */
-  gap: {
-    type: [String, Number, Array] as PropType<
-      string | number | (string | number)[]
-    >,
-    default: 0,
-  },
-  /** 快捷设置 */
-  basis: {
-    type: [String, Number],
-    default: "auto",
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => {},
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
+const props = defineProps(flexProps)
 
 // 计算 class
 const flexClass = computed(() => [
-  "hy-flex",
-  props.customClass,
-  props.vertical && "hy-flex--vertical",
-]);
+    'hy-flex',
+    props.customClass,
+    props.vertical && 'hy-flex--vertical'
+])
 
 // 计算 style
 const flexStyle = 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,
-    flex: props.flex,
-    "flex-basis": props.basis,
-    "row-gap": colGap,
-    "column-gap": rowGap,
-    ...props.customStyle,
-  };
-});
+    return {
+        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,
+        ...props.customStyle
+    }
+})
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>