@fangzhongya/fang-ui 0.1.73 → 0.1.74

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

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const getPrentClass = require("@fangzhongya/utils/css/getPrentClass");
+const use = require("../../common/use.cjs");
+const index$4 = require("../../icon/index.cjs");
+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({
+  __name: "index",
+  props: index$2.getProps(data.dataProps),
+  emits: data.dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const slots = vue.useSlots();
+    const { getLocale } = index.useLocale();
+    const cs = index$1.useCssName(data.name);
+    const prs = __props;
+    const props = index$2.usePropsDefault(data.name, prs, data.dataProps);
+    const emit = __emit;
+    const flag = vue.ref(false);
+    const refDom = vue.ref();
+    const refRightKeyBox = vue.ref();
+    const position = vue.ref({ x: 0, y: 0 });
+    const targetElement = vue.ref();
+    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 = Math.max(0, x - rect.width);
+      }
+      if (y + rect.height > innerHeight) {
+        y = Math.max(0, y - rect.height);
+      }
+      return {
+        top: `${y}px`,
+        left: `${x}px`,
+        zIndex: 9999
+      };
+    });
+    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(dom) {
+      if (!dom) return null;
+      const rootElement = getRootElement();
+      if (!rootElement) return null;
+      if (props.domClass) {
+        const element = getPrentClass.getPrentClass(
+          dom,
+          props.domClass,
+          props.level
+        );
+        if (element && rootElement.contains(element)) {
+          return element;
+        }
+      } else if (rootElement.contains(dom)) {
+        return dom;
+      }
+      return null;
+    }
+    function getRootElement() {
+      var _a, _b, _c;
+      if ((_a = refDom.value) == null ? void 0 : _a.$el) {
+        return refDom.value.$el;
+      } else if (refDom.value instanceof HTMLElement) {
+        return refDom.value;
+      } else if ((_b = refDom.value) == null ? void 0 : _b.nextSibling) {
+        return (_c = refDom.value) == null ? void 0 : _c.nextSibling;
+      }
+      return null;
+    }
+    function handleContextmenu(event) {
+      const target = isDomClass(event.target);
+      if (!target) {
+        flag.value = false;
+        return;
+      }
+      targetElement.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, targetElement.value);
+    }
+    const toDom = vue.ref();
+    vue.watch(
+      () => flag.value,
+      () => {
+        if (!refRightKeyBox.value) return;
+        if (props.isSingle && toDom.value) {
+          if (flag.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";
+        }
+      }
+    );
+    function bindEvent() {
+      const rootElement = getRootElement();
+      if (rootElement) {
+        rootElement.addEventListener("contextmenu", handleContextmenu);
+      }
+    }
+    vue.onMounted(() => {
+      toDom.value = getBoxDom.getBoxDom();
+      vue.nextTick(() => {
+        bindEvent();
+      });
+      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("click", handleGlobalClick, true);
+      document.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener("resize", () => {
+      });
+      window.removeEventListener("scroll", () => {
+      }, true);
+    });
+    __expose({
+      ...data.dataExpose,
+      // 提供关闭菜单的方法
+      close: () => {
+        flag.value = false;
+      },
+      // 提供打开菜单的方法
+      open: (x, y, target) => {
+        position.value = { x, y };
+        targetElement.value = target;
+        flag.value = true;
+      },
+      // 重新绑定事件（用于动态内容）
+      rebind: () => {
+        vue.nextTick(() => {
+          bindEvent();
+        });
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(slots).default), {
+          class: vue.normalizeClass(vue.unref(cs).z()),
+          ref_key: "refDom",
+          ref: refDom
+        }, null, 8, ["class"])),
+        vue.createVNode(vue.unref(index$3.BoxTeleport), {
+          disabled: vue.unref(props).disabled,
+          to: vue.unref(props).to
+        }, {
+          default: vue.withCtx(() => [
+            vue.withDirectives(vue.createElementVNode("div", {
+              class: vue.normalizeClass([vue.unref(cs).z("box"), vue.unref(props).boxClass]),
+              ref_key: "refRightKeyBox",
+              ref: refRightKeyBox,
+              style: vue.normalizeStyle(boxStyle.value),
+              onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("box-list"))
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(props).options, (v, k) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: k,
+                    onClick: vue.withModifiers(($event) => onClick(v), ["stop"]),
+                    class: vue.normalizeClass(vue.unref(cs).z("box-list-li"))
+                  }, [
+                    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)
+            ], 6), [
+              [vue.vShow, flag.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["disabled", "to"])
+      ], 64);
+    };
+  }
+});
+exports.default = _sfc_main;

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

@@ -0,0 +1,240 @@
+import { defineComponent, useSlots, ref, computed, nextTick, watch, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createBlock, createVNode, resolveDynamicComponent, unref, normalizeClass, withCtx, withDirectives, createElementVNode, withModifiers, normalizeStyle, renderList, renderSlot, createCommentVNode, toDisplayString, vShow } from "vue";
+import { getPrentClass } from "@fangzhongya/utils/css/getPrentClass";
+import { useVueValue } from "../../common/use.js";
+import { Icon } from "../../icon/index.js";
+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({
+  __name: "index",
+  props: getProps(dataProps),
+  emits: dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const slots = useSlots();
+    const { getLocale } = useLocale();
+    const cs = useCssName(name);
+    const prs = __props;
+    const props = usePropsDefault(name, prs, dataProps);
+    const emit = __emit;
+    const flag = ref(false);
+    const refDom = ref();
+    const refRightKeyBox = ref();
+    const position = ref({ x: 0, y: 0 });
+    const targetElement = ref();
+    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 = Math.max(0, x - rect.width);
+      }
+      if (y + rect.height > innerHeight) {
+        y = Math.max(0, y - rect.height);
+      }
+      return {
+        top: `${y}px`,
+        left: `${x}px`,
+        zIndex: 9999
+      };
+    });
+    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(dom) {
+      if (!dom) return null;
+      const rootElement = getRootElement();
+      if (!rootElement) return null;
+      if (props.domClass) {
+        const element = getPrentClass(
+          dom,
+          props.domClass,
+          props.level
+        );
+        if (element && rootElement.contains(element)) {
+          return element;
+        }
+      } else if (rootElement.contains(dom)) {
+        return dom;
+      }
+      return null;
+    }
+    function getRootElement() {
+      var _a, _b, _c;
+      if ((_a = refDom.value) == null ? void 0 : _a.$el) {
+        return refDom.value.$el;
+      } else if (refDom.value instanceof HTMLElement) {
+        return refDom.value;
+      } else if ((_b = refDom.value) == null ? void 0 : _b.nextSibling) {
+        return (_c = refDom.value) == null ? void 0 : _c.nextSibling;
+      }
+      return null;
+    }
+    function handleContextmenu(event) {
+      const target = isDomClass(event.target);
+      if (!target) {
+        flag.value = false;
+        return;
+      }
+      targetElement.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, targetElement.value);
+    }
+    const toDom = ref();
+    watch(
+      () => flag.value,
+      () => {
+        if (!refRightKeyBox.value) return;
+        if (props.isSingle && toDom.value) {
+          if (flag.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";
+        }
+      }
+    );
+    function bindEvent() {
+      const rootElement = getRootElement();
+      if (rootElement) {
+        rootElement.addEventListener("contextmenu", handleContextmenu);
+      }
+    }
+    onMounted(() => {
+      toDom.value = getBoxDom();
+      nextTick(() => {
+        bindEvent();
+      });
+      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("click", handleGlobalClick, true);
+      document.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener("resize", () => {
+      });
+      window.removeEventListener("scroll", () => {
+      }, true);
+    });
+    __expose({
+      ...dataExpose,
+      // 提供关闭菜单的方法
+      close: () => {
+        flag.value = false;
+      },
+      // 提供打开菜单的方法
+      open: (x, y, target) => {
+        position.value = { x, y };
+        targetElement.value = target;
+        flag.value = true;
+      },
+      // 重新绑定事件（用于动态内容）
+      rebind: () => {
+        nextTick(() => {
+          bindEvent();
+        });
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(), createBlock(resolveDynamicComponent(unref(slots).default), {
+          class: normalizeClass(unref(cs).z()),
+          ref_key: "refDom",
+          ref: refDom
+        }, null, 8, ["class"])),
+        createVNode(unref(BoxTeleport), {
+          disabled: unref(props).disabled,
+          to: unref(props).to
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              class: normalizeClass([unref(cs).z("box"), unref(props).boxClass]),
+              ref_key: "refRightKeyBox",
+              ref: refRightKeyBox,
+              style: normalizeStyle(boxStyle.value),
+              onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(unref(cs).z("box-list"))
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(props).options, (v, k) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: k,
+                    onClick: withModifiers(($event) => onClick(v), ["stop"]),
+                    class: normalizeClass(unref(cs).z("box-list-li"))
+                  }, [
+                    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)
+            ], 6), [
+              [vShow, flag.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["disabled", "to"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/right-key-no/style/index2.scss

@@ -0,0 +1 @@
+@use '../index.scss' as *;

package/dist/css/index.css

@@ -790,6 +790,35 @@
   justify-content: center;
 }
 
+.right-key-no-box {
+  width: 140px;
+  position: fixed;
+  padding: 10px;
+  z-index: 9999;
+  background: #ffffff;
+  border: 1px solid #cfd7e5;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.right-key-no-box-list-li:hover {
+  background: #ecf5ff;
+  color: #66b1ff;
+}
+.right-key-no-box-list-li {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px 14px 8px 10px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.right-key-no-box-list-li i {
+  margin-right: 10px;
+}
+
 .right-key-box {
   width: 140px;
   position: fixed;

package/dist/css/right-key-no.css

@@ -0,0 +1,52 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #ffffff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+  --lable-array-height: 20px;
+}
+
+.com-footer {
+  border-top: 1px solid var(--border);
+  padding: 20px 20px;
+}
+
+.com-lable-array {
+  line-height: var(--lable-array-height);
+}
+
+.right-key-no-box {
+  width: 140px;
+  position: fixed;
+  padding: 10px;
+  z-index: 9999;
+  background: #ffffff;
+  border: 1px solid #cfd7e5;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.right-key-no-box-list-li:hover {
+  background: #ecf5ff;
+  color: #66b1ff;
+}
+.right-key-no-box-list-li {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px 14px 8px 10px;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.right-key-no-box-list-li i {
+  margin-right: 10px;
+}

package/dist/expand/{chunk-OJ66KIK7.cjs → chunk-KYX3DANL.cjs}

@@ -80,6 +80,7 @@ var config_default = {
     "no-data",
     "popup",
     "right-key",
+    "right-key-no",
     "seamless-scroll",
     "stick-div",
     "stick-edge",
@@ -171,6 +172,7 @@ var config_default = {
     "no-data",
     "popup",
     "right-key",
+    "right-key-no",
     "seamless-scroll",
     "window",
     "icon",

package/dist/expand/{chunk-WDSWWSNJ.js → chunk-PMWCTNN6.js}

@@ -80,6 +80,7 @@ var config_default = {
     "no-data",
     "popup",
     "right-key",
+    "right-key-no",
     "seamless-scroll",
     "stick-div",
     "stick-edge",
@@ -171,6 +172,7 @@ var config_default = {
     "no-data",
     "popup",
     "right-key",
+    "right-key-no",
     "seamless-scroll",
     "window",
     "icon",

package/dist/expand/components.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOJ66KIK7cjs = require('./chunk-OJ66KIK7.cjs');
+var _chunkKYX3DANLcjs = require('./chunk-KYX3DANL.cjs');
 
 // expand/components.ts
 var _humpToLine = require('@fangzhongya/utils/name/humpToLine');
@@ -35,11 +35,11 @@ function getFrom(mc, type, conf) {
   const p = config.prefix ? config.prefix + "-" : "";
   const filename = p ? mc.replace(new RegExp("^" + p), "") : mc;
   if (type == 1) {
-    if (_chunkOJ66KIK7cjs.config_default.components.includes(filename)) {
+    if (_chunkKYX3DANLcjs.config_default.components.includes(filename)) {
       const name = _lineToLargeHump.lineToLargeHump.call(void 0, mc);
       const from = `${config.name}/components/${filename}/index`;
       let sideEffects;
-      if (_chunkOJ66KIK7cjs.config_default.sideEffects.includes(filename)) {
+      if (_chunkKYX3DANLcjs.config_default.sideEffects.includes(filename)) {
         if (conf.css) {
           sideEffects = `${config.name}/components/${filename}/style/index${conf.css || 2}.scss`;
         } else {
@@ -55,14 +55,14 @@ function getFrom(mc, type, conf) {
       return;
     }
   } else {
-    if (_chunkOJ66KIK7cjs.config_default.directives.includes(filename)) {
+    if (_chunkKYX3DANLcjs.config_default.directives.includes(filename)) {
       const name = "default";
       const from = `${config.name}/directives/${filename}/index`;
       return {
         name,
         from
       };
-    } else if (_chunkOJ66KIK7cjs.config_default.directives.includes("v-" + filename)) {
+    } else if (_chunkKYX3DANLcjs.config_default.directives.includes("v-" + filename)) {
       const name = "default";
       const from = `${config.name}/directives/${"v-" + filename}/index`;
       return {

package/dist/expand/components.js

@@ -1,6 +1,6 @@
 import {
   config_default
-} from "./chunk-WDSWWSNJ.js";
+} from "./chunk-PMWCTNN6.js";
 
 // expand/components.ts
 import { humpToLine } from "@fangzhongya/utils/name/humpToLine";

package/dist/expand/config.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOJ66KIK7cjs = require('./chunk-OJ66KIK7.cjs');
+var _chunkKYX3DANLcjs = require('./chunk-KYX3DANL.cjs');
 
 
-exports.default = _chunkOJ66KIK7cjs.config_default;
+exports.default = _chunkKYX3DANLcjs.config_default;

package/dist/expand/config.js

@@ -1,6 +1,6 @@
 import {
   config_default
-} from "./chunk-WDSWWSNJ.js";
+} from "./chunk-PMWCTNN6.js";
 export {
   config_default as default
 };

package/dist/icons/index.json

@@ -1,7 +1,7 @@
 {
     "prefix": "fang-ui",
     "info": {},
-    "lastModified": 1768973064466,
+    "lastModified": 1769256430840,
     "icons": {
         "bar": {
             "body": " <path fill=\"currentColor\" d=\"M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z\" ></path> "