@fangzhongya/fang-ui 0.1.54 → 0.1.56

package/dist/components/retract/index.scss

@@ -3,6 +3,9 @@
 $retract: 'retract';
 @include b($retract) {
 	position: relative;
+	#{vdm('width', $retract)}: 12px;
+	#{vdm('height', $retract)}: 40px;
+	#{vdm('width-adjust', $retract)}: 8px;
 	&-div {
 		&.left,
 		&.right {
@@ -34,12 +37,16 @@ $retract: 'retract';
 		}
 		&.is-left {
 			top: 50%;
-			width: 20px;
-			height: 50px;
-			margin-top: -25px;
-			left: -20px;
+			height: var(#{vdm('height', $retract)});
+			margin-top: calc(var(#{vdm('height', $retract)}) / 2 * -1);
+			width: var(#{vdm('width', $retract)});
+			left: calc(0 - var(#{vdm('width', $retract)}));
 			&.#{is('adjust')} {
-				left: -10px;
+				left: calc(
+					var(#{vdm('width-adjust', $retract)}) - var(
+							#{vdm('width', $retract)}
+						)
+				);
 			}
 			.#{$retract}-icon {
 				transform: rotate(0);
@@ -50,12 +57,16 @@ $retract: 'retract';
 		}
 		&.is-right {
 			top: 50%;
-			width: 20px;
-			height: 50px;
-			margin-top: -25px;
-			right: -20px;
+			height: var(#{vdm('height', $retract)});
+			margin-top: calc(var(#{vdm('height', $retract)}) / 2 * -1);
+			width: var(#{vdm('width', $retract)});
+			right: calc(0 - var(#{vdm('width', $retract)}));
 			&.#{is('adjust')} {
-				right: -10px;
+				right: calc(
+					var(#{vdm('width-adjust', $retract)}) - var(
+							#{vdm('width', $retract)}
+						)
+				);
 			}
 			.#{$retract}-icon {
 				transform: rotate(-180deg);
@@ -66,12 +77,16 @@ $retract: 'retract';
 		}
 		&.is-top {
 			left: 50%;
-			width: 50px;
-			height: 20px;
-			margin-left: -25px;
-			top: -20px;
+			width: var(#{vdm('height', $retract)});
+			margin-left: calc(var(#{vdm('height', $retract)}) / 2 * -1);
+			height: var(#{vdm('width', $retract)});
+			top: calc(0 - var(#{vdm('width', $retract)}));
 			&.#{is('adjust')} {
-				top: -10px;
+				top: calc(
+					var(#{vdm('width-adjust', $retract)}) - var(
+							#{vdm('width', $retract)}
+						)
+				);
 			}
 			.#{$retract}-icon {
 				transform: rotate(90deg);
@@ -82,12 +97,16 @@ $retract: 'retract';
 		}
 		&.is-bottom {
 			left: 50%;
-			width: 50px;
-			height: 20px;
-			margin-left: -25px;
-			bottom: -20px;
+			width: var(#{vdm('height', $retract)});
+			margin-left: calc(var(#{vdm('height', $retract)}) / 2 * -1);
+			height: var(#{vdm('width', $retract)});
+			bottom: calc(0 - var(#{vdm('width', $retract)}));
 			&.#{is('adjust')} {
-				bottom: -10px;
+				bottom: calc(
+					var(#{vdm('width-adjust', $retract)}) - var(
+							#{vdm('width', $retract)}
+						)
+				);
 			}
 			.#{$retract}-icon {
 				transform: rotate(-90deg);

package/dist/components/retract/src/data.cjs

@@ -20,9 +20,12 @@ const dataProps = buildProps.buildProps({
   },
   isAdjust: {
     type: Boolean
+  },
+  modelValue: {
+    type: Boolean
   }
 });
-const dataEmits = {};
+const dataEmits = ["update:modelValue"];
 const dataSlot = {
   default: "default",
   icon: "icon"

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

@@ -23,11 +23,14 @@ export declare const dataProps: {
     isAdjust: {
         type: BooleanConstructor;
     };
+    modelValue: {
+        type: BooleanConstructor;
+    };
 };
 export type DataProps = ExtractPropTypes<typeof dataProps>;
 /**
  */
-export declare const dataEmits: {};
+export declare const dataEmits: string[];
 export type DataEmits = typeof dataEmits;
 /**
  * @slot default 默认插槽

package/dist/components/retract/src/data.js

@@ -18,9 +18,12 @@ const dataProps = buildProps({
   },
   isAdjust: {
     type: Boolean
+  },
+  modelValue: {
+    type: Boolean
   }
 });
-const dataEmits = {};
+const dataEmits = ["update:modelValue"];
 const dataSlot = {
   default: "default",
   icon: "icon"

package/dist/components/retract/src/index2.cjs

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const index$4 = require("../../icon/index.cjs");
-const right = require("../../../icons/vue/right.cjs");
-const index$3 = require("../../../directives/adjustment/index.cjs");
+const index$5 = require("../../icon/index.cjs");
+require("../../../icons/vue/right.cjs");
+const index$4 = require("../../../directives/adjustment/index.cjs");
 const data = require("./data.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
 const index$2 = require("../../../hooks/props-default/index.cjs");
+const index$3 = require("../../../hooks/model/index.cjs");
+const right_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/right2.cjs");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: index$2.getProps(data.dataProps),
@@ -18,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const prs = __props;
     const props = index$2.usePropsDefault(data.name, prs, data.dataProps);
     const emit = __emit;
-    const visible = vue.ref(false);
+    const visible = index$3.useModel(props, emit);
     function onClick() {
       visible.value = !visible.value;
     }
@@ -34,13 +36,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }, [
           vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).default)
         ], 2)), [
-          [vue.vShow, !visible.value],
-          [vue.unref(index$3.default), {
+          [vue.vShow, !vue.unref(visible)],
+          [vue.unref(index$4.default), {
             is: vue.unref(props).isAdjust,
             often: vue.unref(props).often,
             dom: "div",
             [vue.unref(props).direction]: {
-              interval: 10
+              interval: 8
               // adjoin: 'div',
             }
           }]
@@ -53,12 +55,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             vue.unref(cs).is(vue.unref(props).direction, true)
           ])
         }, [
-          vue.createVNode(vue.unref(index$4.Icon), {
-            class: vue.normalizeClass([vue.unref(cs).z("icon"), vue.unref(cs).is("reverse", visible.value)])
+          vue.createVNode(vue.unref(index$5.Icon), {
+            class: vue.normalizeClass([vue.unref(cs).z("icon"), vue.unref(cs).is("reverse", vue.unref(visible))])
           }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).icon, {}, () => [
-                vue.createVNode(right.default)
+                vue.createVNode(right_vue_vue_type_script_setup_true_lang.default)
               ])
             ]),
             _: 3

package/dist/components/retract/src/index2.js

@@ -1,11 +1,13 @@
-import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, unref, withDirectives, createElementVNode, renderSlot, vShow, withModifiers, createVNode, withCtx } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, withDirectives, createElementVNode, renderSlot, vShow, withModifiers, createVNode, withCtx } from "vue";
 import { Icon } from "../../icon/index.js";
-import Right from "../../../icons/vue/right.js";
+import "../../../icons/vue/right.js";
 import vAdjustment from "../../../directives/adjustment/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 { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
+import { useModel } from "../../../hooks/model/index.js";
+import _sfc_main$1 from "../../../icons/vue/right2.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: getProps(dataProps),
@@ -16,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const prs = __props;
     const props = usePropsDefault(name, prs, dataProps);
     const emit = __emit;
-    const visible = ref(false);
+    const visible = useModel(props, emit);
     function onClick() {
       visible.value = !visible.value;
     }
@@ -32,13 +34,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, unref(dataSlot).default)
         ], 2)), [
-          [vShow, !visible.value],
+          [vShow, !unref(visible)],
           [unref(vAdjustment), {
             is: unref(props).isAdjust,
             often: unref(props).often,
             dom: "div",
             [unref(props).direction]: {
-              interval: 10
+              interval: 8
               // adjoin: 'div',
             }
           }]
@@ -52,11 +54,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         }, [
           createVNode(unref(Icon), {
-            class: normalizeClass([unref(cs).z("icon"), unref(cs).is("reverse", visible.value)])
+            class: normalizeClass([unref(cs).z("icon"), unref(cs).is("reverse", unref(visible))])
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, unref(dataSlot).icon, {}, () => [
-                createVNode(Right)
+                createVNode(_sfc_main$1)
               ])
             ]),
             _: 3

package/dist/components/right-key/index.css

@@ -24,7 +24,7 @@
 
 .right-key-box {
   width: 140px;
-  position: absolute;
+  position: fixed;
   padding: 10px;
   z-index: 9999;
   background: #ffffff;
@@ -40,6 +40,7 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
+  box-sizing: border-box;
   height: 40px;
   padding: 8px 14px 8px 10px;
   border-radius: 4px;

package/dist/components/right-key/index.scss

@@ -4,7 +4,7 @@ $right-key: 'right-key';
 @include b($right-key) {
 	&-box {
 		width: 140px;
-		position: absolute;
+		position: fixed;
 		padding: 10px;
 		z-index: 9999;
 		background: #ffffff;
@@ -20,6 +20,7 @@ $right-key: 'right-key';
 				white-space: nowrap;
 				display: flex;
 				align-items: center;
+				box-sizing: border-box;
 				height: 40px;
 				padding: 8px 14px 8px 10px;
 				border-radius: 4px;

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

@@ -45,7 +45,7 @@ const dataProps = buildProps.buildProps({
    */
   boxClass: {
     type: [String]
-  }
+  },
   // /**
   //  * @props { String, Function } prop=value 列表中对比的内容
   //  */
@@ -53,10 +53,15 @@ const dataProps = buildProps.buildProps({
   // 	type: [String, Function],
   // 	default: 'value',
   // },
+  isSingle: {
+    type: Boolean,
+    default: false
+  }
 });
 const dataEmits = ["click-key", "click-right"];
 const dataSlot = {
-  default: "default"
+  default: "default",
+  list: "list"
 };
 const dataExpose = {};
 exports.dataEmits = dataEmits;

package/dist/components/right-key/src/data.d.ts

@@ -60,6 +60,10 @@ export declare const dataProps: {
     boxClass: {
         type: StringConstructor[];
     };
+    isSingle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     to: {
         type: StringConstructor;
         default: FunctConfig;
@@ -84,6 +88,7 @@ export type DataEmits = typeof dataEmits;
  */
 export declare const dataSlot: {
     default: string;
+    list: string;
 };
 /**
  */

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

@@ -43,7 +43,7 @@ const dataProps = buildProps({
    */
   boxClass: {
     type: [String]
-  }
+  },
   // /**
   //  * @props { String, Function } prop=value 列表中对比的内容
   //  */
@@ -51,10 +51,15 @@ const dataProps = buildProps({
   // 	type: [String, Function],
   // 	default: 'value',
   // },
+  isSingle: {
+    type: Boolean,
+    default: false
+  }
 });
 const dataEmits = ["click-key", "click-right"];
 const dataSlot = {
-  default: "default"
+  default: "default",
+  list: "list"
 };
 const dataExpose = {};
 export {

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);
     };