@fangzhongya/fang-ui 0.1.55 → 0.1.56

package/dist/components/right-key/src/index2.cjs

@@ -8,6 +8,7 @@ const index$3 = require("../../box-teleport/index.cjs");
 const data = require("./data.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
+const getBoxDom = require("../../../utils/vues/getBoxDom.cjs");
 const index$2 = require("../../../hooks/props-default/index.cjs");
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -23,73 +24,145 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const flag = vue.ref(false);
     const refRightKey = vue.ref();
     const refRightKeyBox = vue.ref();
-    const topx = vue.ref("");
-    const lefty = vue.ref("");
+    const position = vue.ref({ x: 0, y: 0 });
     const dom = vue.ref();
-    vue.onMounted(() => {
-      globalThis.addEventListener("mousedown", watchContextmenu);
-    });
-    vue.onUnmounted(() => {
-      globalThis.removeEventListener("mousedown", watchContextmenu);
+    const boxStyle = vue.computed(() => {
+      if (!refRightKeyBox.value) return {};
+      const rect = refRightKeyBox.value.getBoundingClientRect();
+      const { innerWidth, innerHeight } = window;
+      let x = position.value.x;
+      let y = position.value.y;
+      if (x + rect.width > innerWidth) {
+        x = x - rect.width;
+      }
+      if (y + rect.height > innerHeight) {
+        y = y - rect.height;
+      }
+      return {
+        top: `${y}px`,
+        left: `${x}px`
+      };
     });
-    function watchContextmenu(event) {
-      if (refRightKeyBox.value.contains(event.target)) {
+    function handleGlobalMousedown(event) {
+      var _a;
+      if ((_a = refRightKeyBox.value) == null ? void 0 : _a.contains(event.target)) {
         return;
       }
-      if (!refRightKey.value.contains(event.target) || event.button !== 2) {
+      flag.value = false;
+    }
+    function handleGlobalClick(event) {
+      var _a;
+      if (event.button === 2) return;
+      if (!((_a = refRightKeyBox.value) == null ? void 0 : _a.contains(event.target))) {
+        flag.value = false;
+      }
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape" && flag.value) {
         flag.value = false;
       }
     }
     function isDomClass(dom2) {
-      if (dom2) {
-        if (props.domClass) {
-          const v = getPrentClass.getPrentClass(
-            dom2,
-            props.domClass,
-            props.level
-          );
-          if (v && refRightKey.value.contains(v)) {
-            return v;
-          }
-        } else {
-          return dom2;
+      var _a, _b;
+      if (!dom2) return null;
+      if (props.domClass) {
+        const element = getPrentClass.getPrentClass(
+          dom2,
+          props.domClass,
+          props.level
+        );
+        if (element && ((_a = refRightKey.value) == null ? void 0 : _a.contains(element))) {
+          return element;
         }
+      } else if ((_b = refRightKey.value) == null ? void 0 : _b.contains(dom2)) {
+        return dom2;
       }
+      return null;
     }
     function handleContextmenu(event) {
-      let target = event.target;
-      target = isDomClass(target);
-      if (target) {
-        dom.value = target;
-        let x = 0, y = 0;
-        if (event.x || event.y) {
-          x = event.x;
-          y = event.y;
-        } else if (event.pageX || event.pageY) {
-          x = event.pageX - 1;
-          y = event.pageY - 1;
-        }
-        let ww = globalThis ? globalThis.innerWidth : 0;
-        let kw = 0;
-        if (ww != 0 && x + 120 > ww) {
-          kw = 0 - (x + 120 - ww);
-        }
-        topx.value = x + kw + "px";
-        lefty.value = y + "px";
-        flag.value = true;
-        event.preventDefault();
-        event.stopPropagation();
-        emit("click-right", target);
-      } else {
+      const target = isDomClass(event.target);
+      if (!target) {
         flag.value = false;
+        return;
       }
+      dom.value = target;
+      let x = event.clientX;
+      let y = event.clientY;
+      flag.value = true;
+      event.preventDefault();
+      event.stopPropagation();
+      emit("click-right", target);
+      vue.nextTick(() => {
+        position.value = { x, y };
+      });
     }
     function onClick(v) {
       flag.value = false;
       emit("click-key", v, dom.value);
     }
+    const toDom = vue.ref();
+    vue.watch(
+      () => flag.value,
+      () => {
+        if (props.isSingle) {
+          if (flag.value) {
+            if (toDom.value) {
+              toDom.value.querySelectorAll("." + cs.z("box")).forEach((v) => {
+                v.style.display = "none";
+              });
+            }
+            vue.nextTick(() => {
+              refRightKeyBox.value.style.display = "block";
+            });
+          } else {
+            refRightKeyBox.value.style.display = "none";
+          }
+        } else {
+          refRightKeyBox.value.style.display = flag.value ? "block" : "none";
+        }
+      }
+    );
+    vue.onMounted(() => {
+      toDom.value = getBoxDom.getBoxDom();
+      document.addEventListener("mousedown", handleGlobalMousedown, true);
+      document.addEventListener("click", handleGlobalClick, true);
+      document.addEventListener("keydown", handleKeydown);
+      window.addEventListener("resize", () => {
+        if (flag.value) {
+          flag.value = false;
+        }
+      });
+      window.addEventListener(
+        "scroll",
+        () => {
+          if (flag.value) {
+            flag.value = false;
+          }
+        },
+        true
+      );
+    });
+    vue.onUnmounted(() => {
+      document.removeEventListener("mousedown", handleGlobalMousedown, true);
+      document.removeEventListener("click", handleGlobalClick, true);
+      document.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener("resize", () => {
+      });
+      window.removeEventListener("scroll", () => {
+      }, true);
+    });
     __expose({
-      ...data.dataExpose
+      ...data.dataExpose,
+      // 提供关闭菜单的方法
+      close: () => {
+        flag.value = false;
+      },
+      // 提供打开菜单的方法
+      open: (x, y, target) => {
+        position.value = { x, y };
+        dom.value = target;
+        flag.value = true;
+      }
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -108,11 +181,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               class: vue.normalizeClass([vue.unref(cs).z("box"), vue.unref(props).boxClass]),
               ref_key: "refRightKeyBox",
               ref: refRightKeyBox,
-              style: vue.normalizeStyle({
-                position: "fixed",
-                top: lefty.value,
-                left: topx.value
-              })
+              style: vue.normalizeStyle(boxStyle.value)
             }, [
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(vue.unref(cs).z("box-list"))
@@ -123,13 +192,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     onClick: vue.withModifiers(($event) => onClick(v), ["stop"]),
                     class: vue.normalizeClass(vue.unref(cs).z("box-list-li"))
                   }, [
-                    v.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.Icon), { key: 0 }, {
-                      default: vue.withCtx(() => [
-                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(v.icon)))
-                      ]),
-                      _: 2
-                    }, 1024)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(use.useVueValue)(v, vue.unref(props).label)), 1)
+                    vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).list, {
+                      value: v,
+                      index: k
+                    }, () => [
+                      v.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.Icon), { key: 0 }, {
+                        default: vue.withCtx(() => [
+                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(v.icon)))
+                        ]),
+                        _: 2
+                      }, 1024)) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(use.useVueValue)(v, vue.unref(props).label)), 1)
+                    ])
                   ], 10, _hoisted_1);
                 }), 128))
               ], 2)
@@ -137,7 +211,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               [vue.vShow, flag.value]
             ])
           ]),
-          _: 1
+          _: 3
         }, 8, ["disabled", "to"])
       ], 34);
     };

package/dist/components/right-key/src/index2.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, renderSlot, createVNode, withCtx, withDirectives, createElementVNode, normalizeStyle, Fragment, renderList, withModifiers, createBlock, createCommentVNode, resolveDynamicComponent, toDisplayString, vShow } from "vue";
+import { defineComponent, ref, computed, nextTick, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, renderSlot, createVNode, withCtx, withDirectives, createElementVNode, normalizeStyle, Fragment, renderList, withModifiers, createBlock, createCommentVNode, resolveDynamicComponent, toDisplayString, vShow } from "vue";
 import { getPrentClass } from "@fangzhongya/utils/css/getPrentClass";
 import { useVueValue } from "../../common/use.js";
 import { Icon } from "../../icon/index.js";
@@ -6,6 +6,7 @@ import { BoxTeleport } from "../../box-teleport/index.js";
 import { name, dataProps, dataExpose, dataSlot, dataEmits } from "./data.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { useLocale } from "../../../hooks/locale/index.js";
+import { getBoxDom } from "../../../utils/vues/getBoxDom.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -21,73 +22,145 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const flag = ref(false);
     const refRightKey = ref();
     const refRightKeyBox = ref();
-    const topx = ref("");
-    const lefty = ref("");
+    const position = ref({ x: 0, y: 0 });
     const dom = ref();
-    onMounted(() => {
-      globalThis.addEventListener("mousedown", watchContextmenu);
-    });
-    onUnmounted(() => {
-      globalThis.removeEventListener("mousedown", watchContextmenu);
+    const boxStyle = computed(() => {
+      if (!refRightKeyBox.value) return {};
+      const rect = refRightKeyBox.value.getBoundingClientRect();
+      const { innerWidth, innerHeight } = window;
+      let x = position.value.x;
+      let y = position.value.y;
+      if (x + rect.width > innerWidth) {
+        x = x - rect.width;
+      }
+      if (y + rect.height > innerHeight) {
+        y = y - rect.height;
+      }
+      return {
+        top: `${y}px`,
+        left: `${x}px`
+      };
     });
-    function watchContextmenu(event) {
-      if (refRightKeyBox.value.contains(event.target)) {
+    function handleGlobalMousedown(event) {
+      var _a;
+      if ((_a = refRightKeyBox.value) == null ? void 0 : _a.contains(event.target)) {
         return;
       }
-      if (!refRightKey.value.contains(event.target) || event.button !== 2) {
+      flag.value = false;
+    }
+    function handleGlobalClick(event) {
+      var _a;
+      if (event.button === 2) return;
+      if (!((_a = refRightKeyBox.value) == null ? void 0 : _a.contains(event.target))) {
+        flag.value = false;
+      }
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape" && flag.value) {
         flag.value = false;
       }
     }
     function isDomClass(dom2) {
-      if (dom2) {
-        if (props.domClass) {
-          const v = getPrentClass(
-            dom2,
-            props.domClass,
-            props.level
-          );
-          if (v && refRightKey.value.contains(v)) {
-            return v;
-          }
-        } else {
-          return dom2;
+      var _a, _b;
+      if (!dom2) return null;
+      if (props.domClass) {
+        const element = getPrentClass(
+          dom2,
+          props.domClass,
+          props.level
+        );
+        if (element && ((_a = refRightKey.value) == null ? void 0 : _a.contains(element))) {
+          return element;
         }
+      } else if ((_b = refRightKey.value) == null ? void 0 : _b.contains(dom2)) {
+        return dom2;
       }
+      return null;
     }
     function handleContextmenu(event) {
-      let target = event.target;
-      target = isDomClass(target);
-      if (target) {
-        dom.value = target;
-        let x = 0, y = 0;
-        if (event.x || event.y) {
-          x = event.x;
-          y = event.y;
-        } else if (event.pageX || event.pageY) {
-          x = event.pageX - 1;
-          y = event.pageY - 1;
-        }
-        let ww = globalThis ? globalThis.innerWidth : 0;
-        let kw = 0;
-        if (ww != 0 && x + 120 > ww) {
-          kw = 0 - (x + 120 - ww);
-        }
-        topx.value = x + kw + "px";
-        lefty.value = y + "px";
-        flag.value = true;
-        event.preventDefault();
-        event.stopPropagation();
-        emit("click-right", target);
-      } else {
+      const target = isDomClass(event.target);
+      if (!target) {
         flag.value = false;
+        return;
       }
+      dom.value = target;
+      let x = event.clientX;
+      let y = event.clientY;
+      flag.value = true;
+      event.preventDefault();
+      event.stopPropagation();
+      emit("click-right", target);
+      nextTick(() => {
+        position.value = { x, y };
+      });
     }
     function onClick(v) {
       flag.value = false;
       emit("click-key", v, dom.value);
     }
+    const toDom = ref();
+    watch(
+      () => flag.value,
+      () => {
+        if (props.isSingle) {
+          if (flag.value) {
+            if (toDom.value) {
+              toDom.value.querySelectorAll("." + cs.z("box")).forEach((v) => {
+                v.style.display = "none";
+              });
+            }
+            nextTick(() => {
+              refRightKeyBox.value.style.display = "block";
+            });
+          } else {
+            refRightKeyBox.value.style.display = "none";
+          }
+        } else {
+          refRightKeyBox.value.style.display = flag.value ? "block" : "none";
+        }
+      }
+    );
+    onMounted(() => {
+      toDom.value = getBoxDom();
+      document.addEventListener("mousedown", handleGlobalMousedown, true);
+      document.addEventListener("click", handleGlobalClick, true);
+      document.addEventListener("keydown", handleKeydown);
+      window.addEventListener("resize", () => {
+        if (flag.value) {
+          flag.value = false;
+        }
+      });
+      window.addEventListener(
+        "scroll",
+        () => {
+          if (flag.value) {
+            flag.value = false;
+          }
+        },
+        true
+      );
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mousedown", handleGlobalMousedown, true);
+      document.removeEventListener("click", handleGlobalClick, true);
+      document.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener("resize", () => {
+      });
+      window.removeEventListener("scroll", () => {
+      }, true);
+    });
     __expose({
-      ...dataExpose
+      ...dataExpose,
+      // 提供关闭菜单的方法
+      close: () => {
+        flag.value = false;
+      },
+      // 提供打开菜单的方法
+      open: (x, y, target) => {
+        position.value = { x, y };
+        dom.value = target;
+        flag.value = true;
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -106,11 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass([unref(cs).z("box"), unref(props).boxClass]),
               ref_key: "refRightKeyBox",
               ref: refRightKeyBox,
-              style: normalizeStyle({
-                position: "fixed",
-                top: lefty.value,
-                left: topx.value
-              })
+              style: normalizeStyle(boxStyle.value)
             }, [
               createElementVNode("div", {
                 class: normalizeClass(unref(cs).z("box-list"))
@@ -121,13 +190,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onClick: withModifiers(($event) => onClick(v), ["stop"]),
                     class: normalizeClass(unref(cs).z("box-list-li"))
                   }, [
-                    v.icon ? (openBlock(), createBlock(unref(Icon), { key: 0 }, {
-                      default: withCtx(() => [
-                        (openBlock(), createBlock(resolveDynamicComponent(v.icon)))
-                      ]),
-                      _: 2
-                    }, 1024)) : createCommentVNode("", true),
-                    createElementVNode("span", null, toDisplayString(unref(useVueValue)(v, unref(props).label)), 1)
+                    renderSlot(_ctx.$slots, unref(dataSlot).list, {
+                      value: v,
+                      index: k
+                    }, () => [
+                      v.icon ? (openBlock(), createBlock(unref(Icon), { key: 0 }, {
+                        default: withCtx(() => [
+                          (openBlock(), createBlock(resolveDynamicComponent(v.icon)))
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true),
+                      createElementVNode("span", null, toDisplayString(unref(useVueValue)(v, unref(props).label)), 1)
+                    ])
                   ], 10, _hoisted_1);
                 }), 128))
               ], 2)
@@ -135,7 +209,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               [vShow, flag.value]
             ])
           ]),
-          _: 1
+          _: 3
         }, 8, ["disabled", "to"])
       ], 34);
     };

package/dist/components/selects/src/data.d.ts

@@ -1,5 +1,5 @@
 import { ExtractPropTypes } from 'vue';
-import { comHandle } from '../../common/list';
+import { comHandle, Options } from '../../common/list';
 /**
  * @title {h3}
  */
@@ -18,10 +18,10 @@ export declare const dataProps: {
     };
     options: {
         type: {
-            (arrayLength: number): (string | number | boolean | ObjAny)[];
-            (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
-            new (arrayLength: number): (string | number | boolean | ObjAny)[];
-            new (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
+            (arrayLength: number): Options[];
+            (...items: Options[]): Options[];
+            new (arrayLength: number): Options[];
+            new (...items: Options[]): Options[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];

package/dist/components/stick-window/src/index2.cjs

@@ -4,11 +4,12 @@ const vue = require("vue");
 const index$3 = require("../../box-teleport/index.cjs");
 const data = require("./data.cjs");
 const index$4 = require("../../icon/index.cjs");
-const close = require("../../../icons/vue/close.cjs");
+require("../../../icons/vue/close.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
 const index$5 = require("../../../directives/stick/index.cjs");
 const index$2 = require("../../../hooks/props-default/index.cjs");
+const close_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/close2.cjs");
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -87,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     title: vue.unref(getLocale)("close")
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(close.default)
+                      vue.createVNode(close_vue_vue_type_script_setup_true_lang.default)
                     ]),
                     _: 1
                   }, 8, ["onClick", "class", "title"])

package/dist/components/stick-window/src/index2.js

@@ -2,11 +2,12 @@ import { defineComponent, ref, createBlock, openBlock, unref, withCtx, withDirec
 import { BoxTeleport } from "../../box-teleport/index.js";
 import { name, dataProps, dataExpose, dataSlot, dataEmits } from "./data.js";
 import { Icon } from "../../icon/index.js";
-import Close from "../../../icons/vue/close.js";
+import "../../../icons/vue/close.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { useLocale } from "../../../hooks/locale/index.js";
 import vStick from "../../../directives/stick/index.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
+import _sfc_main$1 from "../../../icons/vue/close2.js";
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -85,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     title: unref(getLocale)("close")
                   }, {
                     default: withCtx(() => [
-                      createVNode(Close)
+                      createVNode(_sfc_main$1)
                     ]),
                     _: 1
                   }, 8, ["onClick", "class", "title"])

package/dist/components/switchs/src/data.d.ts

@@ -1,4 +1,5 @@
 import { ExtractPropTypes } from 'vue';
+import { Options } from '../../common/list';
 /**
  * @title {h3} switchs 开关列表
  * @text value: '' 在@change中会返回 true
@@ -14,10 +15,10 @@ export declare const dataProps: {
     };
     options: {
         type: {
-            (arrayLength: number): (string | number | boolean | ObjAny)[];
-            (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
-            new (arrayLength: number): (string | number | boolean | ObjAny)[];
-            new (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
+            (arrayLength: number): Options[];
+            (...items: Options[]): Options[];
+            new (arrayLength: number): Options[];
+            new (...items: Options[]): Options[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];

package/dist/components/uploads/src/data.d.ts

@@ -1,5 +1,5 @@
 import { ExtractPublicPropTypes } from 'vue';
-import { comHandle } from '../../common/list';
+import { comHandle, Options } from '../../common/list';
 /**
  * @title {h3} uploads
  */
@@ -78,10 +78,10 @@ export declare const dataProps: {
     };
     options: {
         type: {
-            (arrayLength: number): (string | number | boolean | ObjAny)[];
-            (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
-            new (arrayLength: number): (string | number | boolean | ObjAny)[];
-            new (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
+            (arrayLength: number): Options[];
+            (...items: Options[]): Options[];
+            new (arrayLength: number): Options[];
+            new (...items: Options[]): Options[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];