hy-app 0.3.0 → 0.3.2

package/components/hy-list/hy-list.vue

@@ -9,7 +9,10 @@
     class="hy-virtual-container"
   >
     <view class="hy-virtual-container__list">
-      <slot v-if="slotDefault" :record="line === 1 ? virtualData : waterfall"></slot>
+      <slot
+        v-if="slotDefault"
+        :record="line === 1 ? virtualData : waterfall"
+      ></slot>
       <template v-else>
         <view
           v-if="line === 1"
@@ -63,55 +66,53 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-list',
+  name: "hy-list",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script lang="ts" setup>
 import {
   computed,
-  type CSSProperties,
   getCurrentInstance,
   nextTick,
   onMounted,
+  type PropType,
   reactive,
   ref,
-  toRefs,
   useSlots,
   watch,
-} from 'vue'
-import { addUnit, getPx, getRect } from '../../utils'
-import type { IListEmits } from './typing'
+} from "vue";
+import type { CSSProperties } from "vue";
+import { addUnit, getPx, getRect } from "../../utils";
+import type { IListEmits } from "./typing";
 
 /**
  * 实现只展示可视内容的dom，减少dom创建，优化滚动性能
  * @displayName hy-list
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 数据列表 */
   list: {
-    type: Array,
-    default() {
-      return []
-    },
+    type: Array as PropType<(string | Record<string, any>)[]>,
+    default: () => [],
   },
   /** 容器高度，必须给个高度，否则加载全部数据 */
   containerHeight: {
     type: String,
-    default: '100%',
+    default: "100%",
   },
   /** 子容器的高度，必须和内容一致，否则计算有问题 */
   itemHeight: {
     type: [String, Number],
-    default: '40px',
+    default: "40px",
   },
   /** 子容器的底部，会计算到容器内 */
   marginBottom: {
@@ -126,12 +127,12 @@ const props = defineProps({
   /** 子容器的圆角，单位px */
   borderRadius: {
     type: [String, Number],
-    default: '3px',
+    default: "3px",
   },
   /** 容器背景色 */
   background: {
     type: String,
-    default: 'transparent',
+    default: "transparent",
   },
   /** 是否显示边框 */
   border: {
@@ -146,7 +147,7 @@ const props = defineProps({
   /** 每一项的唯一标识key */
   keyField: {
     type: String,
-    default: 'id',
+    default: "id",
   },
   /**
    * 加载状态
@@ -154,143 +155,133 @@ const props = defineProps({
    * */
   load: {
     type: String,
-    default: 'loadMore',
+    default: "loadMore",
   },
   /** 显示底部加载状态 */
   showDivider: {
     type: Boolean,
     default: true,
   },
-})
-const {
-  list,
-  line,
-  keyField,
-  itemHeight,
-  containerHeight,
-  marginBottom,
-  padding,
-  borderRadius,
-  background,
-  border,
-} = toRefs(props)
-const emit = defineEmits<IListEmits>()
+});
+const emit = defineEmits<IListEmits>();
 
-const slots = useSlots()
+const slots = useSlots();
 // 滚动条距离顶部距离
-const scrollTop = ref(0)
+const scrollTop = ref(0);
 // 可视区域的高度
-const viewHeight = ref(0)
+const viewHeight = ref(0);
 const waterfall: {
-  left: AnyObject[]
-  right: AnyObject[]
+  left: AnyObject[];
+  right: AnyObject[];
 } = reactive({
   left: [],
   right: [],
-})
+});
 // 排列方式
-const arrange = computed(() => (line.value === 1 ? 'column' : 'row'))
-const boxHeight = getPx(itemHeight.value) + getPx(marginBottom.value)
-const listHeight = addUnit(containerHeight.value)
-const instance = getCurrentInstance()
+const arrange = computed(() => (props.line === 1 ? "column" : "row"));
+const boxHeight = getPx(props.itemHeight) + getPx(props.marginBottom);
+const listHeight = addUnit(props.containerHeight);
+const instance = getCurrentInstance();
 
 onMounted(() => {
   nextTick(async () => {
-    const res = await getRect('.hy-virtual-container', false, instance)
-    viewHeight.value = (res as UniApp.NodeInfo).height ?? 0
-  })
-})
+    const res = await getRect(".hy-virtual-container", false, instance);
+    viewHeight.value = (res as UniApp.NodeInfo).height ?? 0;
+  });
+});
 
 const itemStyle = computed((): CSSProperties => {
   return {
-    height: addUnit(itemHeight.value),
-    padding: addUnit(padding.value),
-    marginBottom: addUnit(marginBottom.value),
-    borderRadius: addUnit(borderRadius.value),
-    background: background.value,
-    border: border.value ? '1px solid #dadbde' : '',
-  }
-})
+    height: addUnit(props.itemHeight),
+    padding: addUnit(props.padding),
+    marginBottom: addUnit(props.marginBottom),
+    borderRadius: addUnit(props.borderRadius),
+    background: props.background,
+    border: props.border ? "1px solid #dadbde" : "",
+  };
+});
 
 /**
  * @description 虚拟列表真实展示数据：起始下标
  */
 const start = computed(() => {
-  const s = Math.floor(scrollTop.value / boxHeight)
-  return Math.max(0, s * line.value)
-})
+  const s = Math.floor(scrollTop.value / boxHeight);
+  return Math.max(0, s * props.line);
+});
 
 /**
  * @description 虚拟列表真实展示数据：结束下标
  */
 const over = computed(() => {
-  const o = Math.floor((scrollTop.value + viewHeight.value + 1) / boxHeight + 5)
-  return Math.min(list.value.length, o * line.value)
-})
+  const o = Math.floor(
+    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5,
+  );
+  return Math.min(props.list.length, o * props.line);
+});
 
 /**
  * @description 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
  */
 const paddingAttr = computed(() => {
-  const paddingTop = start.value * boxHeight
-  const paddingBottom = (list.value.length - over.value) * boxHeight
-  return `${paddingTop / line.value}px 0 ${paddingBottom / line.value}px`
-})
+  const paddingTop = start.value * boxHeight;
+  const paddingBottom = (props.list.length - over.value) * boxHeight;
+  return `${paddingTop / props.line}px 0 ${paddingBottom / props.line}px`;
+});
 
 /**
  * @description 虚拟列表真实展示数据
  */
-const virtualData = computed(() => {
-  return list.value.slice(start.value, over.value)
-})
+const virtualData = computed<(string | Record<string, any>)[]>(() => {
+  return props.list.slice(start.value, over.value);
+});
 
 watch(
   () => virtualData.value,
-  (newVal, oldValue) => {
-    waterfall.left.length = 0
-    waterfall.right.length = 0
-    if (line.value === 2 && newVal.every((item) => typeof item !== 'string')) {
+  (newVal) => {
+    waterfall.left.length = 0;
+    waterfall.right.length = 0;
+    if (props.line === 2 && newVal!.every((item) => typeof item !== "string")) {
       newVal.forEach((item, i) => {
         if (i % 2 === 0) {
-          waterfall.left.push(item as AnyObject)
+          waterfall.left.push(item as AnyObject);
         } else {
-          waterfall.right.push(item as AnyObject)
+          waterfall.right.push(item as AnyObject);
         }
-      })
+      });
     }
   },
   { immediate: true, deep: true },
-)
+);
 
 /**
  * @description 监听滚动条距离顶部距离，实时更新
  */
 const onScroll = async (e: any) => {
-  scrollTop.value = e.detail.scrollTop ?? 0
-}
+  scrollTop.value = e.detail.scrollTop ?? 0;
+};
 
 /**
  * @description 滚动底部函数
  * */
 const scrollToLower = () => {
-  emit('scrollToLower')
-}
+  emit("scrollToLower");
+};
 
 /**
  * @description 点击行触发函数
  * */
 const handleClick = (temp: string | AnyObject) => {
-  emit('click', temp)
-}
+  emit("click", temp);
+};
 
 /**
  * @description 获取默认插槽
  */
-const slotDefault = useSlots().default
+const slotDefault = useSlots().default;
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 .hy-virtual-container {
   height: v-bind(listHeight);
   &__list {

package/components/hy-loading/hy-loading.vue

@@ -25,7 +25,11 @@
     >
       <block v-if="mode === 'spinner'">
         <!-- #ifndef APP-NVUE -->
-        <view v-for="(item, index) in array12" :key="index" class="hy-loading-icon__dot"></view>
+        <view
+          v-for="(item, index) in array12"
+          :key="index"
+          class="hy-loading-icon__dot"
+        ></view>
         <!-- #endif -->
       </block>
     </view>
@@ -44,25 +48,25 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-loading',
+  name: "hy-loading",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { toRefs, ref, computed } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, colorGradient } from '../../utils'
+import { ref, computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, colorGradient } from "../../utils";
 
 /**
  * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
  * @displayName hy-loading
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -74,12 +78,12 @@ const props = defineProps({
   /** 动画活动区域的颜色，只对 mode = flower 模式有效 */
   color: {
     type: String,
-    default: '#909399',
+    default: "#909399",
   },
   /** 提示文本的颜色 */
   textColor: {
     type: String,
-    default: '#909399',
+    default: "#909399",
   },
   /** 文字和图标是否垂直排列 */
   vertical: {
@@ -89,7 +93,7 @@ const props = defineProps({
   /** 模式选择，见官网说明 */
   mode: {
     type: String,
-    default: 'spinner',
+    default: "spinner",
   },
   /** 加载图标的大小，单位px */
   size: {
@@ -106,7 +110,7 @@ const props = defineProps({
   /** 动画模式 */
   timingFunction: {
     type: String,
-    default: 'ease-in-out',
+    default: "ease-in-out",
   },
   /** 动画执行周期时间 */
   duration: {
@@ -117,24 +121,23 @@ const props = defineProps({
   inactiveColor: String,
   /** 定义需要用到的外部样式 */
   customStyle: Object as PropType<CSSProperties>,
-})
-const { show, size, color, mode, inactiveColor } = toRefs(props)
+});
 
 //动画旋转角度
-const aniAngel = ref(360)
+const aniAngel = ref(360);
 const array12 = Array.from({
   length: 12,
-})
-const webviewHide = ref(false)
+});
+const webviewHide = ref(false);
 
 const otherBorderColor = computed(() => {
-  const lightColor = colorGradient(color.value, '#ffffff', 100)[80]
-  if (mode.value === 'circle') {
-    return inactiveColor.value ? inactiveColor.value : lightColor
+  const lightColor = colorGradient(props.color, "#ffffff", 100)[80];
+  if (props.mode === "circle") {
+    return props.inactiveColor ? props.inactiveColor : lightColor;
   } else {
-    return 'transparent'
+    return "transparent";
   }
-})
+});
 
 // 监听webview的显示与隐藏
 // const addEventListenerToWebview = () => {
@@ -155,5 +158,5 @@ const otherBorderColor = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-login/TheUserLogin.vue

@@ -32,7 +32,7 @@ import type { UserLoginInfoVo } from './typing'
 
 // 组件
 import HyCheckbox from '../hy-checkbox/hy-checkbox.vue'
-import HyForm from '@/package/components/hy-form-group/hy-form.vue'
+import HyForm from '@/package/components/hy-form-group/hy-form-group.vue'
 
 interface IProps {
   themeColor: string

package/components/hy-menu/hy-menu.vue

@@ -1,7 +1,11 @@
 <template>
   <view class="hy-menu" :style="{ width: addUnit(width) }">
     <template v-for="(item, i) in list">
-      <view @click="handleClick(item, i)" :class="menuItemClass(item, i)" :style="customStyle">
+      <view
+        @click="handleClick(item, i)"
+        :class="menuItemClass(item, i)"
+        :style="customStyle"
+      >
         <slot name="icon">
           <hy-icon
             class="hy-menu-item__icon"
@@ -44,37 +48,36 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-menu',
+  name: "hy-menu",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IMenuEmits, MenusType } from './typing'
-import { addUnit } from '../../utils'
-
-import type HyBadgeProps from '../hy-badge/typing'
-import type HyIconProps from '../hy-icon/typing'
+import { computed, ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IMenuEmits, MenusType, ModelValueVo } from "./typing";
+import { addUnit } from "../../utils";
+import type HyBadgeProps from "../hy-badge/typing";
+import type HyIconProps from "../hy-icon/typing";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyBadge from '../hy-badge/hy-badge.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyBadge from "../hy-badge/hy-badge.vue";
 
 /**
  * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
  * @displayName hy-menu
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 当前值 */
-  modelValue: [String, Number],
+  modelValue: [String, Number] as PropType<ModelValueVo>,
   /** 菜单数据集 */
   list: {
     type: Array as PropType<Array<MenusType>>,
@@ -99,38 +102,40 @@ const props = defineProps({
   },
   /** 定义需要用到的外部样式 */
   customStyle: Object as PropType<CSSProperties>,
-})
-const { modelValue, list, color } = toRefs(props)
-const emit = defineEmits<IMenuEmits>()
+});
+const emit = defineEmits<IMenuEmits>();
 
-const current = ref<string | number>(0)
+const current = ref<string | number>(0);
 
 watch(
-  () => modelValue.value,
-  (newVal: string | number) => {
-    current.value = list.value.findIndex((item) => item.id === newVal)
+  () => props.modelValue,
+  (newVal) => {
+    current.value = props.list.findIndex((item) => item.id === newVal);
     // current.value = newVal;
   },
-)
+);
 
 const menuItemClass = computed(() => {
   return (temp: MenusType, i: number) => {
     const classes = [
-      'hy-menu-item',
-      prefix.value && 'hy-menu-item--prefix',
-      suffix.value && 'hy-menu-item--suffix',
-      temp.disabled && 'hy-menu-item--disabled',
-    ]
+      "hy-menu-item",
+      prefix.value && "hy-menu-item--prefix",
+      suffix.value && "hy-menu-item--suffix",
+      temp.disabled && "hy-menu-item--disabled",
+    ];
     if (current.value === i) {
-      classes.push('hy-menu-item--active', color.value && 'hy-menu-item--active__color')
+      classes.push(
+        "hy-menu-item--active",
+        props.color && "hy-menu-item--active__color",
+      );
     }
 
-    return classes
-  }
-})
+    return classes;
+  };
+});
 
 const prefix = computed(() => {
-  // let prefix: boolean = false;
+  let prefix: boolean = false;
   // if (sidebar) {
   //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
   //     return c.value === sidebar.props.modelValue;
@@ -144,11 +149,11 @@ const prefix = computed(() => {
   //     prefix = true;
   //   }
   // }
-  return prefix
-})
+  return prefix;
+});
 
 const suffix = computed(() => {
-  let suffix: boolean = false
+  let suffix: boolean = false;
   // if (sidebar) {
   //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
   //     return c.value === sidebar.props.modelValue;
@@ -162,21 +167,21 @@ const suffix = computed(() => {
   //     suffix = true;
   //   }
   // }
-  return suffix
-})
+  return suffix;
+});
 
 function handleClick(temp: MenusType, i: number) {
   if (temp?.disabled) {
-    return
+    return;
   }
-  current.value = i
-  emit('update:modelValue', temp.id)
-  emit('change', temp)
+  current.value = i;
+  emit("update:modelValue", temp.id);
+  emit("change", temp);
 }
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 .hy-menu-item--active__color {
   color: v-bind(color);
   &::before {

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

@@ -1,64 +1,65 @@
-import type { CSSProperties } from 'vue'
-import type HyBadgeProps from '../hy-badge/typing'
-import type HyIconProps from '../hy-icon/typing'
+import type { CSSProperties } from "vue";
+import type HyBadgeProps from "../hy-badge/typing";
+import type HyIconProps from "../hy-icon/typing";
 
+export type ModelValueVo = string | number;
 export interface MenusType {
   /**
    * @description 唯一id
    * */
-  id: string | number
+  id: string | number;
   /**
    * @description 标题
    * */
-  title: string
+  title: string;
   /**
    * @description 是否禁用
    * */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * @description icon
    * */
-  icon?: string
+  icon?: string;
   /**
    * @description 徽标值
    * */
-  badge?: number
+  badge?: number;
 }
 
 export default interface HyMenuProps {
   /**
    * @description 当前值
    * */
-  modelValue: string | number
+  modelValue: string | number;
   /**
    * @description 菜单数据集
    * */
-  list: MenusType[]
+  list: MenusType[];
   /**
    * @description 侧边菜单栏宽度
    * */
-  width?: string | number
+  width?: string | number;
   /**
    * @description 选中颜色
    * */
-  color?: string
+  color?: string;
   /**
    * @description 图标属性值
    * */
-  icon?: Partial<HyIconProps>
+  icon?: Partial<HyIconProps>;
   /**
    * @description 徽标属性值
    * */
-  badge?: Partial<HyBadgeProps>
+  badge?: Partial<HyBadgeProps>;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface IMenuEmits {
   /** 选中触发 */
-  (e: 'change', temp: MenusType): void
+  (e: "change", temp: MenusType): void;
   /** 选中触发 */
-  (e: 'update:modelValue', id: MenusType['id']): void
+  (e: "update:modelValue", id: MenusType["id"]): void;
 }