hy-app 0.2.2 → 0.2.5

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

@@ -1,14 +1,12 @@
 <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) }"
-      >{{ title }}</text
     >
+      {{ title }}
+    </text>
     <HyIcon
       :custom-style="{
         transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)',
@@ -19,11 +17,7 @@
     ></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) }"
@@ -47,8 +41,9 @@
               :style="{
                 color: currentIndex === index ? currentColor : inactiveColor,
               }"
-              >{{ item.label }}</view
             >
+              {{ item.label }}
+            </view>
             <!-- 勾选图标 -->
             <HyIcon
               v-if="currentIndex === index"
@@ -62,91 +57,90 @@
   </HyOverlay>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-dropdown-item',
+  options: {
+    styleIsolation: 'shared',
+  },
+}
+</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 type FatherIProps from "../hy-dropdown/typing";
-import type { DropdownMenuItem } from "./typing";
-import { addUnit, getRect, throttle } from "../../utils";
-import { IconConfig } from "../../config";
+import { computed, inject, ref, onMounted, watch, useSlots, toRefs, getCurrentInstance } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import type FatherIProps from '../hy-dropdown/typing'
+import type { DropdownMenuItem } from './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'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { modelValue, menus } = toRefs(props);
-const emits = defineEmits(["update:modelValue", "change"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { modelValue, menus } = toRefs(props)
+const emits = defineEmits(['update:modelValue', 'change'])
 
-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
@@ -156,29 +150,29 @@ watch(
   (newVal) => {
     //关闭其他条件的下拉弹窗
     if (newVal !== props.title) {
-      isOpen.value = false;
+      isOpen.value = false
     }
   },
-);
+)
 
 //根据双向绑定值动态设置下拉选中项索引
 watch(
   () => modelValue.value,
   (newVal) => {
-    currentIndex.value = menus.value.findIndex((item) => item.value === newVal);
+    currentIndex.value = menus.value.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
+    emits('update:modelValue', item.value)
+    emits('change', item.value)
   }
-};
+}
 
 /**
  * @description 打开或关闭
@@ -186,24 +180,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/index.scss

@@ -109,4 +109,4 @@
   100% {
     top: -100%;
   }
-}
+}

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

@@ -22,9 +22,7 @@
           :color="iconColor"
           :size="iconSize ? iconSize : addUnit(getPx(getFloatBtnSize) * 0.7)"
         />
-        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{
-          text
-        }}</text>
+        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{ text }}</text>
       </slot>
     </view>
 
@@ -43,10 +41,11 @@
           }"
           @click="handleMenuItemClick(item, i)"
         >
-          {{ typeof item === "string" ? item : item.label }}
+          {{ typeof item === 'string' ? item : item.label }}
         </view>
         <HyLine
           v-if="i !== menus.length - 1"
+          color="#FFFFFF"
           :length="addUnit(getPx(getFloatBtnSize) * 0.7)"
           :direction="direction === 'row' ? 'column' : 'row'"
           :custom-style="{ margin: 'auto' }"
@@ -63,30 +62,23 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import {
-  computed,
-  type CSSProperties,
-  getCurrentInstance,
-  onMounted,
-  ref,
-  toRefs,
-} from "vue";
-import type IProps from "./typing";
-import type { MenusType } from "./typing";
-import defaultProps from "./props";
-import { addUnit, getPx, getRect, getWindowInfo, guid } from "../../utils";
+import { computed, type CSSProperties, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
+import type IProps from './typing'
+import type { MenusType } from './typing'
+import defaultProps from './props'
+import { addUnit, getPx, getRect, getWindowInfo, guid } from '../../utils'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyLine from "../hy-line/hy-line.vue";
+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 {
   menus,
   customStyle,
@@ -99,33 +91,30 @@ const {
   size,
   fixed,
   direction,
-} = toRefs(props);
-const emit = defineEmits(["click", "clickItem"]);
+} = toRefs(props)
+const emit = defineEmits(['click', 'clickItem'])
 
-const instance = getCurrentInstance();
+const instance = getCurrentInstance()
 const btnSize: AnyObject = {
-  small: "50px",
-  medium: "60px",
-  large: "70px",
-};
-const open = ref(false);
-const rotate = computed(() => (open.value && !text.value ? "45deg" : "0deg"));
-const soleId = `hy-float-button__${guid()}`;
-const showLeft = ref(false);
+  small: '50px',
+  medium: '60px',
+  large: '70px',
+}
+const open = ref(false)
+const rotate = computed(() => (open.value && !text.value ? '45deg' : '0deg'))
+const soleId = `hy-float-button__${guid()}`
+const showLeft = ref(false)
 
 /**
  * @description 获取组件大小
  * */
 const getFloatBtnSize = computed(() => {
-  if (
-    typeof size.value === "string" &&
-    Object.keys(btnSize).includes(size.value)
-  ) {
-    return btnSize[size.value];
+  if (typeof size.value === 'string' && Object.keys(btnSize).includes(size.value)) {
+    return btnSize[size.value]
   } else {
-    return addUnit(size.value);
+    return addUnit(size.value)
   }
-});
+})
 
 /**
  * @description 悬浮按钮样式
@@ -137,85 +126,79 @@ const FloatButtonStyle = computed(() => {
     backgroundColor: bgColor.value,
     zIndex: zIndex.value,
     color: textColor.value,
-  };
-  if (fixed.value) style.position = "fixed";
+  }
+  if (fixed.value) style.position = 'fixed'
 
-  style.height = getFloatBtnSize.value;
-  style.width = getFloatBtnSize.value;
-  return Object.assign(style, customStyle.value);
-});
+  style.height = getFloatBtnSize.value
+  style.width = getFloatBtnSize.value
+  return Object.assign(style, customStyle.value)
+})
 const menusStyle = computed(() => {
   const style: CSSProperties = {
     backgroundColor: bgColor.value,
-  };
+  }
 
   // 判断横向展示还是纵向展示
-  if (direction.value === "row") {
+  if (direction.value === 'row') {
     if (showLeft.value) {
-      style.transform = "translateX(-100%)";
-      style.left = "100%";
-      style.paddingRight = getFloatBtnSize.value;
-      style.flexDirection = "row-reverse";
+      style.transform = 'translateX(-100%)'
+      style.left = '100%'
+      style.paddingRight = getFloatBtnSize.value
+      style.flexDirection = 'row-reverse'
     } else {
-      style.paddingLeft = getFloatBtnSize.value;
+      style.paddingLeft = getFloatBtnSize.value
     }
-    style.bottom = 0;
-    style.transition = "width 0.5s ease";
-    style.height = getFloatBtnSize.value;
+    style.bottom = 0
+    style.transition = 'width 0.5s ease'
+    style.height = getFloatBtnSize.value
     style.width = open.value
-      ? addUnit(
-          getPx(getFloatBtnSize.value) * menus.value.length +
-            getPx(getFloatBtnSize.value),
-        )
-      : 0;
+      ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
+      : 0
   } else {
-    style.bottom = 0;
-    style.left = 0;
-    style.transition = "height 0.5s ease";
-    style.width = getFloatBtnSize.value;
+    style.bottom = 0
+    style.left = 0
+    style.transition = 'height 0.5s ease'
+    style.width = getFloatBtnSize.value
     style.height = open.value
-      ? addUnit(
-          getPx(getFloatBtnSize.value) * menus.value.length +
-            getPx(getFloatBtnSize.value),
-        )
-      : 0;
-    style.paddingBottom = getFloatBtnSize.value;
+      ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
+      : 0
+    style.paddingBottom = getFloatBtnSize.value
   }
-  return style;
-});
+  return style
+})
 
 onMounted(() => {
-  const { windowWidth } = getWindowInfo();
+  const { windowWidth } = getWindowInfo()
   getRect(`#${soleId}`, false, instance).then((rect) => {
-    const { left } = rect as UniApp.NodeInfo;
-    if (left && left > windowWidth / 2) showLeft.value = true;
-  });
-});
+    const { left } = rect as UniApp.NodeInfo
+    if (left && left > windowWidth / 2) showLeft.value = true
+  })
+})
 
 /**
  * @description 点击悬浮按钮
  * */
 const handleClick = () => {
-  emit("click");
-  open.value = !open.value;
-};
+  emit('click')
+  open.value = !open.value
+}
 
 /**
  * @description 点击单条菜单栏
  * */
 const handleMenuItemClick = (temp: MenusType, index: number) => {
-  emit("clickItem", temp, index);
-  open.value = false;
-  if (typeof temp !== "string" && temp?.url) {
+  emit('clickItem', temp, index)
+  open.value = false
+  if (typeof temp !== 'string' && temp?.url) {
     uni.navigateTo({
       url: temp.url,
-    });
+    })
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 .hy-float-button {
   &__container {
     rotate: v-bind(rotate);

package/components/hy-form/index.scss

@@ -26,7 +26,7 @@
       }
       &-warning {
         color: $hy-error;
-        font-size: $hy-font-size-hint;
+        font-size: $hy-font-size-sm;
       }
     }
   }

package/components/hy-grid/hy-grid.vue

@@ -10,9 +10,9 @@
       >
         <slot :record="item">
           <HyIcon
-            :name="item?.icon"
+            :name="item[customKeys?.icon]"
             label-pos="bottom"
-            :label="item?.name"
+            :label="item[customKeys?.name]"
             :space="item?.iconConfig?.space || iconConfig?.space || 8"
             :color="item?.iconConfig?.color || iconConfig?.color"
             :size="item?.iconConfig?.size || iconConfig?.size || 30"
@@ -28,7 +28,6 @@
               item?.iconConfig?.customStyle || iconConfig?.customStyle
             "
           ></HyIcon>
-          <!--          <view class="hy-grid-item__title">{{ item.name }}</view>-->
         </slot>
       </view>
     </template>

package/components/hy-grid/props.ts

@@ -2,6 +2,10 @@ import type IProps from "./typing";
 
 const defaultProps: IProps = {
   list: [],
+  customKeys: {
+    name: "name",
+    icon: "icon",
+  },
   col: 5,
   border: false,
   itemHeight: "80px",

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

@@ -19,11 +19,26 @@ interface GridItemVo {
    * */
   [key: string]: any;
 }
+export interface CustomKeysVo {
+  /**
+   * @description 自定义标题键名
+   * */
+  name: string;
+  /**
+   * @description 自定义icon键名
+   * */
+  icon: string;
+}
+
 export default interface HyGridProps {
   /**
    * @description 数据集
    * */
   list: GridItemVo[];
+  /**
+   * @description 自定义键值
+   * */
+  customKeys?: CustomKeysVo;
   /**
    * @description 宫格的列数（默认 3 ）
    * */

package/components/hy-icon/index.scss

@@ -66,12 +66,12 @@
 
   &__label {
     @include lineEllipsis;
-    overflow: hidden;
     /* #ifndef APP-NVUE */
     line-height: 1;
     /* #endif */
     color: $hy-text-color--grey;
-    font-size: 12px;
+    font-size: $hy-font-size-sm;
+    max-width: 150rpx;
   }
 }
 @include b(rotate) {

package/components/hy-login/TheUserLogin.vue

@@ -104,7 +104,6 @@ const userColumns = computed(() => [
       },
       onSuffix: () => {
         showPwd.value = !showPwd.value;
-        console.log(showChoice.value);
       },
     },
     rules: [props.customUserValidator, props.pwdNumValidator],