hy-app 0.3.0 → 0.3.2

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

@@ -1,6 +1,9 @@
 <template>
   <!-- 标题栏 -->
-  <view :class="['hy-dropdown-item__header', isOpen && 'is-active']" @click="handleClick">
+  <view
+    :class="['hy-dropdown-item__header', isOpen && 'is-active']"
+    @click="handleClick"
+  >
     <text
       class="hy-dropdown-item__header--title"
       :style="{ color: currentColor, fontSize: addUnit(titleSize) }"
@@ -17,7 +20,11 @@
     ></HyIcon>
   </view>
   <!-- 下拉弹窗 -->
-  <HyOverlay :show="isOpen" :custom-style="{ top: addUnit(dropPopupTop) }" @click="closePopupFn">
+  <HyOverlay
+    :show="isOpen"
+    :custom-style="{ top: addUnit(dropPopupTop) }"
+    @click="closePopupFn"
+  >
     <view
       class="hy-dropdown-item__main"
       :style="{ top: addUnit(dropPopupTop), height: addUnit(dropHeight) }"
@@ -59,11 +66,11 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-dropdown-item',
+  name: "hy-dropdown-item",
   options: {
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
@@ -74,24 +81,22 @@ import {
   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'
-import { IconConfig } from '../../config'
+} from "vue";
+import type { IDropdownItemEmits, DropdownMenuItem } from "./typing";
+import type FatherIProps from "../hy-dropdown/typing";
+import { addUnit, getRect, throttle } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-import HyOverlay from '../hy-overlay/hy-overlay.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。和hy-dropdown组合用法
  * @displayName hy-dropdown-item
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -109,69 +114,69 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
-const { modelValue, menus } = toRefs(props)
-const emits = defineEmits<IDropdownItemEmits>()
+});
+const emit = defineEmits<IDropdownItemEmits>();
 
-const slots = useSlots()
+const slots = useSlots();
 //是否有插槽
 const hasSlot = computed(() => {
-  return Object.keys(slots).length > 0
-})
-const instance = getCurrentInstance()
+  return Object.keys(slots).length > 0;
+});
+const instance = getCurrentInstance();
 //父的props值
-const dropdownProps: FatherIProps | undefined = inject('dropdownProps')
-const { titleSize, menuIcon, menuIconSize, inactiveColor } = dropdownProps as FatherIProps
+const dropdownProps: FatherIProps | undefined = inject("dropdownProps");
+const { titleSize, menuIcon, menuIconSize, inactiveColor } =
+  dropdownProps as FatherIProps;
 //当前打开的dropItem项（标签名）
-const currentDropItem: any = inject('currentDropItem')
+const currentDropItem: any = inject("currentDropItem");
 //当前文字/箭头颜色
 const currentColor = computed(() => {
-  return isOpen.value ? dropdownProps?.activeColor : inactiveColor
-})
+  return isOpen.value ? dropdownProps?.activeColor : inactiveColor;
+});
 //是否打开
-const isOpen = ref<boolean>(false)
+const isOpen = ref<boolean>(false);
 //下拉弹窗距离页面顶部距离
-const dropPopupTop = ref(0)
+const dropPopupTop = ref(0);
 //下拉弹窗高度
-const dropHeight = ref<string | number>(0)
+const dropHeight = ref<string | number>(0);
 //下拉选项当前选中的索引
-const currentIndex = ref(-1)
+const currentIndex = ref(-1);
 
 //动态class
-const customClass = computed(() => (isOpen.value ? 'visible' : 'hidden'))
+const customClass = computed(() => (isOpen.value ? "visible" : "hidden"));
 
 onMounted(() => {
-  getDropPopupTop()
-})
+  getDropPopupTop();
+});
 
 /**
  * @description 计算下拉弹窗区域距离页面顶部距离
  * */
 const getDropPopupTop = () => {
-  getRect('.hy-dropdown-item__header', false, instance).then((rect) => {
-    const { bottom } = rect as UniApp.NodeInfo
+  getRect(".hy-dropdown-item__header", false, instance).then((rect) => {
+    const { bottom } = rect as UniApp.NodeInfo;
     // #ifdef H5
     //H5需要加上导航栏高度，固定44px
-    dropPopupTop.value = (bottom || 0) + 44
+    dropPopupTop.value = (bottom || 0) + 44;
     // #endif
     //  #ifndef H5
-    dropPopupTop.value = bottom || 0
+    dropPopupTop.value = bottom || 0;
     // #endif
-  })
-}
+  });
+};
 
 watch(isOpen, (v) => {
   //打开状态显示父容器
   if (v) {
-    dropHeight.value = 'auto'
+    dropHeight.value = "auto";
   } else {
     //关闭状态隐藏父容器
     //延迟改变使得关闭动画能完整呈现
     setTimeout(() => {
-      dropHeight.value = 0
-    }, 200)
+      dropHeight.value = 0;
+    }, 200);
   }
-})
+});
 /**
  * @description 动态控制开关,
  * @desc 防止点击展开后在点击下一个，导致上一个没有关闭bug
@@ -181,29 +186,29 @@ watch(
   (newVal) => {
     //关闭其他条件的下拉弹窗
     if (newVal !== props.title) {
-      isOpen.value = false
+      isOpen.value = false;
     }
   },
-)
+);
 
 //根据双向绑定值动态设置下拉选中项索引
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newVal) => {
-    currentIndex.value = menus.value.findIndex((item) => item.value === newVal)
+    currentIndex.value = props.menus.findIndex((item) => item.value === newVal);
   },
   { immediate: true },
-)
+);
 
 //选中监听
 const onSelect = (item: DropdownMenuItem, index: number) => {
-  isOpen.value = false
+  isOpen.value = false;
   if (index !== currentIndex.value) {
-    currentIndex.value = index
-    emits('update:modelValue', item.value)
-    emits('change', item.value)
+    currentIndex.value = index;
+    emit("change", item, index);
+    emit("update:modelValue", item);
   }
-}
+};
 
 /**
  * @description 打开或关闭
@@ -211,24 +216,24 @@ const onSelect = (item: DropdownMenuItem, index: number) => {
 const handleClick = () =>
   throttle(() => {
     //节流处理，防止点击过快动画未结束又切换导致显示bug
-    isOpen.value = !isOpen.value
+    isOpen.value = !isOpen.value;
     if (isOpen.value) {
       // 防止点击展开后在点击下一个，导致上一个没有关闭bug
-      currentDropItem.value = props.title
-      getDropPopupTop()
+      currentDropItem.value = props.title;
+      getDropPopupTop();
     }
-  })
+  });
 
 /**
  * @description 点击遮罩框关闭弹窗
  * */
 const closePopupFn = () => {
   if (dropdownProps?.closeOnClickMask) {
-    isOpen.value = false
+    isOpen.value = false;
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -2,35 +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
+  (e: "change", item: DropdownMenuItem, index: number): void;
+  /** 值改变触发 */
+  (e: "update:modelValue", item: DropdownMenuItem): void;
 }

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

@@ -13,7 +13,9 @@
     </view>
     <view class="hy-empty__description" v-else>
       <slot v-if="$slots.description" name="description"></slot>
-      <text v-else :style="descriptionStyle">{{ emptyDescription || emptyIcon[mode].name }}</text>
+      <text v-else :style="descriptionStyle">{{
+        emptyDescription || emptyIcon[mode].name
+      }}</text>
       <view class="hy-empty__button" v-if="button?.text">
         <HyButton
           :text="button?.text"
@@ -31,32 +33,31 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-empty',
+  name: "hy-empty",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-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 { computed } 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'
+import HyButton from "../hy-button/hy-button.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 加载的第一页数据就为空
  * @displayName hy-empty
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -69,7 +70,7 @@ const props = defineProps({
   /** 缺省页内容 */
   mode: {
     type: String,
-    default: 'car',
+    default: "car",
   },
   /** 空状态图片 */
   imageUrl: String,
@@ -86,7 +87,7 @@ const props = defineProps({
   /** icon高度 */
   height: {
     type: [String, Number],
-    default: 'auto',
+    default: "auto",
   },
   /** 提示信息 */
   description: String,
@@ -107,62 +108,61 @@ const props = defineProps({
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { zIndex, width, height, imgMargin, navigateUrl, desSize, desColor, customStyle } =
-  toRefs(props)
-const emit = defineEmits<IEmptyEmits>()
+});
+const emit = defineEmits<IEmptyEmits>();
 
 const emptyDescription = computed(() => {
-  return props.description
-})
+  return props.description;
+});
 
 /**
  * @description 整体样式
  * */
 const emptyStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    zIndex: zIndex.value,
-  }
-  return Object.assign(style, customStyle.value)
-})
+    zIndex: props.zIndex,
+  };
+  return Object.assign(style, props.customStyle);
+});
 
 /**
  * @description 提示信息样式
  * */
 const descriptionStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    fontSize: addUnit(desSize.value),
-    color: desColor.value,
-  }
-  return style
-})
+    fontSize: addUnit(props.desSize),
+    color: props.desColor,
+  };
+  return style;
+});
 
 /**
  * @description 图片样式
  * */
 const imgStyle = computed<CSSProperties>(() => {
   return {
-    width: addUnit(width.value),
-    height: addUnit(height.value),
-    margin: imgMargin.value,
-  }
-})
+    width: addUnit(props.width),
+    height: addUnit(props.height),
+    margin: props.imgMargin,
+  };
+});
 
 /**
  * @description 点击按钮，跳转页面
  * */
 const handleClick = () => {
-  emit('click')
-  if (navigateUrl.value) {
+  emit("click");
+  if (props.navigateUrl) {
     uni.navigateTo({
-      url: navigateUrl.value,
-    })
+      url: props.navigateUrl,
+    });
   }
-}
+};
 </script>
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -0,0 +1,99 @@
+<template>
+  <view :class="cls" :style="style">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-flex",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script setup lang="ts">
+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 */
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 快捷设置 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",
+  },
+  /**
+   * 设置元素在交叉轴方向上的对齐方式
+   * @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",
+  },
+});
+
+// 计算 class
+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));
+
+  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,
+  };
+});
+</script>
+
+<style scoped></style>

package/components/hy-flex/index.scss

@@ -0,0 +1,8 @@
+@use "../../libs/css/mixin.scss" as *;
+@include b(flex) {
+  box-sizing: border-box;
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,23 @@
+export type FlexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
+
+export type FlexJustify = HyApp.JustifyContentType
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
+
+export interface FlexProps {
+  /** 主轴方向，等价于 flex-direction */
+  vertical?: boolean
+  direction?: FlexDirection
+  /** justify-content */
+  justify?: FlexJustify
+  /** align-items */
+  align?: FlexAlign
+  /** flex-wrap */
+  wrap?: FlexWrap
+  /** flex 属性，支持数字或字符串。如 1 或 'none' */
+  flex?: number | string
+  /** 子元素间距，支持数字（px）、字符串或数组 [row, column] */
+  gap?: number | string | [number | string, number | string]
+  /** flex-basis */
+  basis?: number | string
+}