hy-app 0.3.0 → 0.3.2

package/composables/usePopover.ts

@@ -1,221 +1,236 @@
-import { CSSProperties, getCurrentInstance, ref } from 'vue'
-import { getRect, isObject } from '../utils'
-import { IOffset, IPlacementVo } from '@/package/components/hy-popover/typing'
-
-export function usePopover(visibleArrow = true) {
-  const instance = getCurrentInstance()
-  const popStyle = ref<CSSProperties>()
-  const arrowStyle = ref<string>('')
-  const showStyle = ref<string>('')
-  const arrowClass = ref<string>('')
-  const popWidth = ref<number>(0)
-  const popHeight = ref<number>(0)
-  const left = ref<number>(0)
-  const bottom = ref<number>(0)
-  const width = ref<number>(0)
-  const height = ref<number>(0)
-  const top = ref<number>(0)
-
-  function noop() {}
-
-  function init(placement: IPlacementVo, visibleArrow: boolean, selector: string) {
-    // 初始化 class
-    if (visibleArrow) {
-      const arrowClassArr = [
-        `hy-${selector}__arrow`,
-        placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end'
-          ? `hy-${selector}__arrow-up`
-          : '',
-        placement === 'left' || placement === 'left-start' || placement === 'left-end'
-          ? `hy-${selector}__arrow-right`
-          : '',
-        placement === 'right' || placement === 'right-start' || placement === 'right-end'
-          ? `hy-${selector}__arrow-left`
-          : '',
-        placement === 'top' || placement === 'top-start' || placement === 'top-end'
-          ? `hy-${selector}__arrow-down`
-          : '',
-      ]
-      arrowClass.value = arrowClassArr.join(' ')
-    }
-
-    // 初始化数据获取
-    getRect('#target', false, instance).then((rect) => {
-      if (!rect) return
-      left.value = rect.left as number
-      bottom.value = rect.bottom as number
-      width.value = rect.width as number
-      height.value = rect.height as number
-      top.value = rect.top as number
-    })
-    // 用透明度可在初始化时获取到pop尺寸
-    getRect('#pos', false, instance).then((rect) => {
-      if (!rect) return
-      popWidth.value = rect.width as number
-      popHeight.value = rect.height as number
-    })
-  }
-
-  function control(placement: IPlacementVo, offset: IOffset) {
-    // arrow size
-    const arrowSize = visibleArrow ? 9 : 0
-    // 上下位（纵轴）对应的距离左边的距离
-    const verticalX = width.value / 2
-    // 上下位（纵轴）对应的距离底部的距离
-    const verticalY = arrowSize + height.value + 5
-    // 左右位（横轴）对应的距离左边的距离
-    const horizontalX = width.value + arrowSize + 5
-    // 左右位（横轴）对应的距离底部的距离
-    const horizontalY = height.value / 2
-
-    let offsetX = 0
-    let offsetY = 0
-    if (Array.isArray(offset)) {
-      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset[0]
-      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + (offset[1] ? offset[1] : offset[0])
-    } else if (isObject(offset)) {
-      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset.x
-      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset.y
-    } else {
-      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
-      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
-    }
-    // const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
-    // const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
-
-    const placements = new Map([
-      // 上
-      [
-        'top',
-        [
-          {
-            left: `${verticalX}px`,
-            bottom: `${verticalY}px`,
-            transform: 'translateX(-50%)',
-          },
-          'left: 50%;',
-        ],
-      ],
-      [
-        'top-start',
-        [
-          {
-            left: `${offsetX}px`,
-            bottom: `${verticalY}px`,
-          },
-          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`,
-        ],
-      ],
-      [
-        'top-end',
-        [
-          {
-            right: `${offsetX}px`,
-            bottom: `${verticalY}px`,
-          },
-          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`,
-        ],
-      ],
-      // 下
-      [
-        'bottom',
-        [
-          {
-            left: verticalX + 'px',
-            top: verticalY + 'px',
-            transform: 'translateX(-50%)',
-          },
-          'left: 50%;',
-        ],
-      ],
-      [
-        'bottom-start',
-        [
-          {
-            left: `${offsetX}px`,
-            top: `${verticalY}px`,
-          },
-          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`,
-        ],
-      ],
-      [
-        'bottom-end',
-        [
-          {
-            right: `${offsetX}px`,
-            top: `${verticalY}px`,
-          },
-          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`,
-        ],
-      ],
-      // 左
-      [
-        'left',
-        [
-          {
-            right: `${horizontalX}px`,
-            top: `${horizontalY}px`,
-            transform: 'translateY(-50%)',
-          },
-          'top: 50%',
-        ],
-      ],
-      [
-        'left-start',
-        [
-          {
-            right: `${horizontalX}px`,
-            top: `${offsetY}px`,
-          },
-          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`,
-        ],
-      ],
-      [
-        'left-end',
-        [
-          {
-            right: `${horizontalX}px`,
-            bottom: `${offsetY}px`,
-          },
-          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`,
-        ],
-      ],
-      // 右
-      [
-        'right',
-        [
-          {
-            left: `${horizontalX}px`,
-            top: `${horizontalY}px`,
-            transform: 'translateY(-50%)',
-          },
-          'top: 50%',
-        ],
-      ],
-      [
-        'right-start',
-        [
-          {
-            left: `${horizontalX}px`,
-            top: `${offsetY}px`,
-          },
-          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`,
-        ],
-      ],
-      [
-        'right-end',
-        [
-          {
-            left: `${horizontalX}px`,
-            bottom: `${offsetY}px`,
-          },
-          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`,
-        ],
-      ],
-    ])
-    popStyle.value = placements.get(placement)![0] as CSSProperties
-    arrowStyle.value = placements.get(placement)![1] as string
-  }
-
-  return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop }
-}
+import { getCurrentInstance, ref } from "vue";
+import type { CSSProperties } from "vue";
+import { getRect, isObject } from "../utils";
+import type { IOffset, IPlacementVo } from "../components/hy-popover/typing";
+
+export function usePopover(visibleArrow = true) {
+  const instance = getCurrentInstance();
+  const popStyle = ref<CSSProperties>();
+  const arrowStyle = ref<string>("");
+  const showStyle = ref<string>("");
+  const arrowClass = ref<string>("");
+  const popWidth = ref<number>(0);
+  const popHeight = ref<number>(0);
+  const left = ref<number>(0);
+  const bottom = ref<number>(0);
+  const width = ref<number>(0);
+  const height = ref<number>(0);
+  const top = ref<number>(0);
+
+  function noop() {}
+
+  function init(
+    placement: IPlacementVo,
+    visibleArrow: boolean,
+    selector: string,
+  ) {
+    // 初始化 class
+    if (visibleArrow) {
+      const arrowClassArr = [
+        `hy-${selector}__arrow`,
+        placement === "bottom" ||
+        placement === "bottom-start" ||
+        placement === "bottom-end"
+          ? `hy-${selector}__arrow-up`
+          : "",
+        placement === "left" ||
+        placement === "left-start" ||
+        placement === "left-end"
+          ? `hy-${selector}__arrow-right`
+          : "",
+        placement === "right" ||
+        placement === "right-start" ||
+        placement === "right-end"
+          ? `hy-${selector}__arrow-left`
+          : "",
+        placement === "top" ||
+        placement === "top-start" ||
+        placement === "top-end"
+          ? `hy-${selector}__arrow-down`
+          : "",
+      ];
+      arrowClass.value = arrowClassArr.join(" ");
+    }
+
+    // 初始化数据获取
+    getRect("#target", false, instance).then((rect) => {
+      if (!rect) return;
+      left.value = rect.left as number;
+      bottom.value = rect.bottom as number;
+      width.value = rect.width as number;
+      height.value = rect.height as number;
+      top.value = rect.top as number;
+    });
+    // 用透明度可在初始化时获取到pop尺寸
+    getRect("#pos", false, instance).then((rect) => {
+      if (!rect) return;
+      popWidth.value = rect.width as number;
+      popHeight.value = rect.height as number;
+    });
+  }
+
+  function control(placement: IPlacementVo, offset: IOffset) {
+    // arrow size
+    const arrowSize = visibleArrow ? 9 : 0;
+    // 上下位（纵轴）对应的距离左边的距离
+    const verticalX = width.value / 2;
+    // 上下位（纵轴）对应的距离底部的距离
+    const verticalY = arrowSize + height.value + 5;
+    // 左右位（横轴）对应的距离左边的距离
+    const horizontalX = width.value + arrowSize + 5;
+    // 左右位（横轴）对应的距离底部的距离
+    const horizontalY = height.value / 2;
+
+    let offsetX = 0;
+    let offsetY = 0;
+    if (Array.isArray(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset[0];
+      offsetY =
+        (horizontalY - 17 > 0 ? 0 : horizontalY - 25) +
+        (offset[1] ? offset[1] : offset[0]);
+    } else if (isObject(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset.x;
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset.y;
+    } else {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset;
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset;
+    }
+    // const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+    // const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+
+    const placements = new Map([
+      // 上
+      [
+        "top",
+        [
+          {
+            left: `${verticalX}px`,
+            bottom: `${verticalY}px`,
+            transform: "translateX(-50%)",
+          },
+          "left: 50%;",
+        ],
+      ],
+      [
+        "top-start",
+        [
+          {
+            left: `${offsetX}px`,
+            bottom: `${verticalY}px`,
+          },
+          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`,
+        ],
+      ],
+      [
+        "top-end",
+        [
+          {
+            right: `${offsetX}px`,
+            bottom: `${verticalY}px`,
+          },
+          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`,
+        ],
+      ],
+      // 下
+      [
+        "bottom",
+        [
+          {
+            left: verticalX + "px",
+            top: verticalY + "px",
+            transform: "translateX(-50%)",
+          },
+          "left: 50%;",
+        ],
+      ],
+      [
+        "bottom-start",
+        [
+          {
+            left: `${offsetX}px`,
+            top: `${verticalY}px`,
+          },
+          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`,
+        ],
+      ],
+      [
+        "bottom-end",
+        [
+          {
+            right: `${offsetX}px`,
+            top: `${verticalY}px`,
+          },
+          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`,
+        ],
+      ],
+      // 左
+      [
+        "left",
+        [
+          {
+            right: `${horizontalX}px`,
+            top: `${horizontalY}px`,
+            transform: "translateY(-50%)",
+          },
+          "top: 50%",
+        ],
+      ],
+      [
+        "left-start",
+        [
+          {
+            right: `${horizontalX}px`,
+            top: `${offsetY}px`,
+          },
+          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`,
+        ],
+      ],
+      [
+        "left-end",
+        [
+          {
+            right: `${horizontalX}px`,
+            bottom: `${offsetY}px`,
+          },
+          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`,
+        ],
+      ],
+      // 右
+      [
+        "right",
+        [
+          {
+            left: `${horizontalX}px`,
+            top: `${horizontalY}px`,
+            transform: "translateY(-50%)",
+          },
+          "top: 50%",
+        ],
+      ],
+      [
+        "right-start",
+        [
+          {
+            left: `${horizontalX}px`,
+            top: `${offsetY}px`,
+          },
+          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`,
+        ],
+      ],
+      [
+        "right-end",
+        [
+          {
+            left: `${horizontalX}px`,
+            bottom: `${offsetY}px`,
+          },
+          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`,
+        ],
+      ],
+    ]);
+    popStyle.value = placements.get(placement)![0] as CSSProperties;
+    arrowStyle.value = placements.get(placement)![1] as string;
+  }
+
+  return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop };
+}

package/composables/useQueue.ts

@@ -1,52 +1,53 @@
-import { type Ref, provide, ref } from 'vue'
-
-export const queueKey = '__QUEUE_KEY__'
-
-export interface Queue {
-  queue: Ref<any[]>
-  pushToQueue: (comp: any) => void
-  removeFromQueue: (comp: any) => void
-  closeOther: (comp: any) => void
-  closeOutside: () => void
-}
-
-export function useQueue() {
-  const queue = ref<any[]>([])
-
-  function pushToQueue(comp: any) {
-    queue.value.push(comp)
-  }
-
-  function removeFromQueue(comp: any) {
-    queue.value = queue.value.filter((item) => {
-      return item.$.uid !== comp.$.uid
-    })
-  }
-
-  function closeOther(comp: any) {
-    queue.value.forEach((item) => {
-      if (item.$.uid !== comp.$.uid) {
-        item.$.exposed.close()
-      }
-    })
-  }
-
-  function closeOutside() {
-    queue.value.forEach((item) => {
-      item.$.exposed.close()
-    })
-  }
-
-  provide(queueKey, {
-    queue,
-    pushToQueue,
-    removeFromQueue,
-    closeOther,
-    closeOutside
-  })
-
-  return {
-    closeOther,
-    closeOutside
-  }
-}
+import { provide, ref } from "vue";
+import type { Ref } from "vue";
+
+export const queueKey = "__QUEUE_KEY__";
+
+export interface Queue {
+  queue: Ref<any[]>;
+  pushToQueue: (comp: any) => void;
+  removeFromQueue: (comp: any) => void;
+  closeOther: (comp: any) => void;
+  closeOutside: () => void;
+}
+
+export function useQueue() {
+  const queue = ref<any[]>([]);
+
+  function pushToQueue(comp: any) {
+    queue.value.push(comp);
+  }
+
+  function removeFromQueue(comp: any) {
+    queue.value = queue.value.filter((item) => {
+      return item.$.uid !== comp.$.uid;
+    });
+  }
+
+  function closeOther(comp: any) {
+    queue.value.forEach((item) => {
+      if (item.$.uid !== comp.$.uid) {
+        item.$.exposed.close();
+      }
+    });
+  }
+
+  function closeOutside() {
+    queue.value.forEach((item) => {
+      item.$.exposed.close();
+    });
+  }
+
+  provide(queueKey, {
+    queue,
+    pushToQueue,
+    removeFromQueue,
+    closeOther,
+    closeOutside,
+  });
+
+  return {
+    closeOther,
+    closeOutside,
+  };
+}

package/global.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     HyDropdown: (typeof import('./components/hy-dropdown/hy-dropdown.vue'))['default']
     HyDropdownItem: (typeof import('./components/hy-dropdown-item/hy-dropdown-item.vue'))['default']
     HyEmpty: (typeof import('./components/hy-empty/hy-empty.vue'))['default']
+    HyFlex: (typeof import('./components/hy-flex/hy-flex.vue'))['default']
     HyFloatButton: (typeof import('./components/hy-float-button/hy-float-button.vue'))['default']
     HyFloatingPanel: (typeof import('./components/hy-floating-panel/hy-floating-panel.vue'))['default']
     HyForm: (typeof import('@/package/components/hy-form-group/hy-form.vue'))['default']

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.3.0",
-  "description": "添加分离式表单组件",
+  "version": "0.3.2",
+  "description": "修复上传提示功能",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/store/index.ts

@@ -1 +1,9 @@
-export * from "./userInfo";
+import { createPinia } from "pinia";
+import { createUnistorage } from "pinia-plugin-unistorage"; // 数据持久化
+
+const store = createPinia();
+store.use(createUnistorage());
+
+export default store;
+
+export * from "./userInfo";

package/theme.scss

@@ -40,14 +40,14 @@ $hy-text-color--hover: var(--hy-text-color--hover, #58595b)!default; // 点击
 /* 背景色 */
 $hy-background: var(--hy-background, #f8f8f8) !default; // 背景色
 $hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
-$hy-background--3: var(--hy-background--3, #646566) !default; // 弹窗背景色
+$hy-background--3: var(--hy-background--3, rgb(238, 238, 239)) !default; // 弹窗背景色
 $hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
-$hy-background--disabled: var(--hy-background--disabled, #F5F5F5); // 禁用背景色
+$hy-background--disabled: var(--hy-background--disabled, rgba(0, 0, 0, 0.04)); // 禁用背景色
 $hy-background--track: var(--hy-background--track, #F6F6F6) !default; // 轨道背景色
 $hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索背景色
-$hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.1)) !default; // 点击状态
+$hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.05)) !default; // 点击状态
 $hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
-$hy-background--active: var(--hy-background--active, #131313); // 选中背景色
+$hy-background--active: var(--hy-background--active, #FFFFFF); // 选中背景色
 $hy-background--close: var(--hy-background--close, #f0f0f0); // 选中背景色
 
 /* 文字尺寸 */
@@ -88,4 +88,4 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1rpx solid rgba(0, 0, 0, 0.02)) !default;
+$hy-border-line: var(--hy-border-line, 1rpx solid #e8e8e8) !default;

package/typing/index.ts

@@ -3,4 +3,3 @@ export * from "./modules/dialog";
 export * from "./modules/http";
 export * from "./modules/enum";
 export * from "./modules/rect";
-// export * from "./modules/common";

package/typing/modules/common.d.ts

@@ -1,5 +1,3 @@
-import type { IFieldNames } from "@/package/components/hy-check-button/typing";
-
 declare namespace HyApp {
   /**
    * @description dark:暗色、light:亮色