@fangzhongya/fang-ui 0.1.72 → 0.1.74

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

@@ -0,0 +1,71 @@
+import { buildProps } from "../../../utils/vues/buildProps.js";
+import { dataProps as dataProps$1 } from "../../box-teleport/src/data.js";
+const name = "right-key-no";
+const dataProps = buildProps({
+  ...dataProps$1,
+  /**
+   * @props { Array<string> } options= ( )
+   * 选择列表
+   */
+  options: {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+  /**
+   * @props { String } domClass='' ( DOMString )
+   * 可以右键的元素的样式
+   */
+  domClass: {
+    type: [String],
+    default: ""
+  },
+  /**
+   * @props { Number } level=5
+   * 向上查询层级
+   */
+  level: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * @props { String, Function } label=label
+   * 列表中展示名称
+   */
+  label: {
+    type: [String, Function],
+    default: "label"
+  },
+  /**
+   * @props { String } boxClass
+   * 添加弹框的样式
+   */
+  boxClass: {
+    type: [String]
+  },
+  // /**
+  //  * @props { String, Function } prop=value 列表中对比的内容
+  //  */
+  // prop: {
+  // 	type: [String, Function],
+  // 	default: 'value',
+  // },
+  isSingle: {
+    type: Boolean,
+    default: false
+  }
+});
+const dataEmits = ["click-key", "click-right"];
+const dataSlot = {
+  default: "default",
+  list: "list"
+};
+const dataExpose = {};
+export {
+  dataEmits,
+  dataExpose,
+  dataProps,
+  dataSlot,
+  name
+};

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index2.cjs");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

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

@@ -0,0 +1,4 @@
+import _sfc_main from "./index2.js";
+export {
+  _sfc_main as default
+};

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",