ninemoon-ui 0.0.27 → 0.1.1

package/dist/js/popover/popover.js

@@ -1,5 +1,170 @@
-import { defineComponent, ref, computed, nextTick, onUnmounted, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createCommentVNode, vShow, h } from "vue";
-import { c as createAndAppendElementWithId, u as usePotion, d as debounce } from "../index/index.js";
+import { defineComponent, h, normalizeClass, normalizeStyle, ref, computed, nextTick, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, unref, vShow } from "vue";
+import { d as debounce, u as usePotion, c as createEscapeDirective } from "../index/index.js";
+const DEFAULT_DEBOUNCE_WAIT$1 = 100;
+const createBgClickDirective = (options) => {
+  const config = {
+    debounceWait: DEFAULT_DEBOUNCE_WAIT$1,
+    moveModel: false,
+    onCheckOut: () => {
+    },
+    ...options
+  };
+  const bindEvents = (el, binding) => {
+    if (el._checkout_handlers_)
+      return;
+    const clickDom = debounce((e) => {
+      e.preventDefault();
+      config.onCheckOut(e, el);
+    }, config.debounceWait);
+    el._checkout_handlers_ = {
+      click: clickDom
+    };
+    if (config.moveModel) {
+      document.addEventListener("mousemove", clickDom);
+    } else {
+      document.addEventListener("click", clickDom);
+    }
+  };
+  const unbindEvents = (el) => {
+    if (el._checkout_handlers_) {
+      if (config.moveModel) {
+        document.removeEventListener("mousemove", el._checkout_handlers_.click);
+      } else {
+        document.removeEventListener("click", el._checkout_handlers_.click);
+      }
+      delete el._checkout_handlers_;
+    }
+  };
+  return {
+    mounted(el, binding) {
+      bindEvents(el);
+    },
+    beforeUnmount(el) {
+      unbindEvents(el);
+    },
+    // 添加 updated 钩子处理配置变化
+    updated(el, binding) {
+      if (binding.value !== binding.oldValue) {
+        unbindEvents(el);
+        bindEvents(el);
+      }
+    }
+  };
+};
+const DEFAULT_DEBOUNCE_WAIT = 100;
+const createScrollDirective = (options) => {
+  const config = {
+    debounceWait: DEFAULT_DEBOUNCE_WAIT,
+    onMove: () => {
+    },
+    ...options
+  };
+  const bindEvents = (el, binding) => {
+    if (el._watchwindow_handlers_) {
+      return;
+    }
+    const moveDom = debounce((e) => {
+      e.preventDefault();
+      config.onMove();
+    }, config.debounceWait);
+    el._watchwindow_handlers_ = {
+      move: moveDom
+    };
+    window.addEventListener("resize", el._watchwindow_handlers_.move);
+    window.addEventListener("scroll", el._watchwindow_handlers_.move);
+  };
+  const unbindEvents = (el) => {
+    if (el._watchwindow_handlers_) {
+      window.removeEventListener("resize", el._watchwindow_handlers_.move);
+      window.removeEventListener("scroll", el._watchwindow_handlers_.move);
+      delete el._watchwindow_handlers_;
+    }
+  };
+  return {
+    mounted(el, binding) {
+      bindEvents(el);
+    },
+    beforeUnmount(el) {
+      unbindEvents(el);
+    },
+    // 添加 updated 钩子处理配置变化
+    updated(el, binding) {
+      if (binding.value !== binding.oldValue) {
+        unbindEvents(el);
+        bindEvents(el);
+      }
+    }
+  };
+};
+const PLACEMENT_GROUPS = {
+  top: ["topleft", "topmiddle", "topright"],
+  bottom: ["bottomleft", "bottommiddle", "bottomright"],
+  center: ["centerleft", "centerright"]
+};
+const ARROW_CLASSES = {
+  base: 'absolute w-2.5 h-2.5 before:z-[-1] before:border before:border-gray-300 before:bg-white before:content-border before:rotate-45 before:content-[" "] before:w-2.5 before:h-2.5 before:absolute',
+  top: {
+    normal: "before:border-t-transparent before:border-l-transparent before:rounded-br",
+    exchange: "before:border-b-transparent before:border-r-transparent before:rounded-tl"
+  },
+  bottom: {
+    normal: "before:border-b-transparent before:border-r-transparent before:rounded-tl",
+    exchange: "before:border-t-transparent before:border-l-transparent before:rounded-br"
+  },
+  center: {
+    right: "before:border-r-transparent before:border-t-transparent before:rounded-bl",
+    left: "before:border-l-transparent before:border-b-transparent before:rounded-tr"
+  }
+};
+const arrowComponent = defineComponent({
+  name: "PopArrow",
+  props: {
+    arrowLeft: { type: Number, required: true },
+    arrowTop: { type: Number, required: true },
+    placement: { type: String, required: true },
+    arrowshow: { type: Boolean, required: true },
+    exChange: { type: Boolean, required: true },
+    beforebgcolor: { type: String }
+  },
+  setup(props) {
+    const getArrowStyles = () => {
+      const { placement, exChange, arrowLeft, arrowTop } = props;
+      const isTopGroup = PLACEMENT_GROUPS.top.includes(placement);
+      const isBottomGroup = PLACEMENT_GROUPS.bottom.includes(placement);
+      const isCenterGroup = PLACEMENT_GROUPS.center.includes(placement);
+      return {
+        left: isTopGroup || isBottomGroup ? `${arrowLeft}px` : placement === "centerright" ? "-5px" : null,
+        right: placement === "centerleft" ? "-5px" : null,
+        top: isCenterGroup ? `${arrowTop}px` : isBottomGroup && !exChange || isTopGroup && exChange ? "-5px" : null,
+        bottom: isTopGroup && !exChange || isBottomGroup && exChange ? "-5px" : null
+      };
+    };
+    const getArrowClasses = () => {
+      const { placement, exChange, beforebgcolor } = props;
+      const classes = [ARROW_CLASSES.base, beforebgcolor];
+      if (PLACEMENT_GROUPS.top.includes(placement)) {
+        classes.push(exChange ? ARROW_CLASSES.top.exchange : ARROW_CLASSES.top.normal);
+      }
+      if (PLACEMENT_GROUPS.bottom.includes(placement)) {
+        classes.push(exChange ? ARROW_CLASSES.bottom.exchange : ARROW_CLASSES.bottom.normal);
+      }
+      if (placement === "centerright") {
+        classes.push(ARROW_CLASSES.center.right);
+      }
+      if (placement === "centerleft") {
+        classes.push(ARROW_CLASSES.center.left);
+      }
+      return classes;
+    };
+    if (!props.arrowshow)
+      return;
+    return () => h("span", {
+      class: normalizeClass(getArrowClasses()),
+      style: normalizeStyle(getArrowStyles())
+    });
+  }
+});
+const defaultWidth = "200px";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "popover",
   props: {
@@ -10,99 +175,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     beforeHidden: {},
     modelValue: { type: Boolean },
     beforebgcolor: {},
-    arrowshow: { type: Boolean, default: true }
+    arrowshow: { type: Boolean, default: true },
+    isselectMode: { type: Boolean, default: false }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
-    const bindName = ref("body");
     const base = ref();
     const pop = ref();
-    const showPop = ref(false);
-    createAndAppendElementWithId("tdd-pop");
-    bindName.value = "#tdd-pop";
-    const trueFlag = computed(() => {
-      if (showPop.value || props.trigger === "native" && props.modelValue) {
-        nextTick(() => {
-          setPosition();
-        });
-      } else {
-        window.removeEventListener("resize", setPosition);
-        window.removeEventListener("scroll", setPosition, true);
+    const isLocalOpen = ref(false);
+    const shouldShow = computed(() => {
+      if (isLocalOpen.value || props.trigger === "native" && props.modelValue) {
+        nextTick(setPosition);
       }
       if (props.trigger === "native") {
         return props.modelValue;
       } else {
-        return showPop.value;
+        return isLocalOpen.value;
       }
     });
     const emitAct = __emit;
     const marginClass = computed(() => {
-      let margin = "";
-      switch (props.placement) {
-        case "topleft":
-        case "topmiddle":
-        case "topright":
-          margin = "-tdd-mt-3";
-          break;
-        case "bottomleft":
-        case "bottommiddle":
-        case "bottomright":
-          margin = "tdd-mt-3";
-          break;
-        case "centerleft":
-          margin = "-tdd-ml-3";
-          break;
-        case "centerright":
-          margin = "tdd-ml-3";
-          break;
-      }
-      return margin;
+      const marginMap = {
+        topleft: "-mt-3",
+        topmiddle: "-mt-3",
+        topright: "-mt-3",
+        bottomleft: "mt-3",
+        bottommiddle: "mt-3",
+        bottomright: "mt-3",
+        centerleft: "-ml-3",
+        centerright: "ml-3"
+      };
+      return marginMap[props.placement];
     });
-    const styleConditions = {
-      left: (placement) => ["topleft", "topmiddle", "topright", "bottomleft", "bottommiddle", "bottomright"].includes(placement) ? `${arrowLeft.value}px` : "centerright" == placement ? "-5px" : null,
-      right: (placement) => "centerleft" == placement ? "-5px" : null,
-      top: (placement, exChange2) => ["bottomleft", "bottommiddle", "bottomright"].includes(placement) && !exChange2 ? "-5px" : ["topleft", "topmiddle", "topright"].includes(placement) && exChange2 ? "-5px" : ["centerright", "centerleft"].includes(placement) ? `${arrowTop.value}px` : null,
-      bottom: (placement, exChange2) => ["topleft", "topmiddle", "topright"].includes(placement) && !exChange2 ? "-5px" : ["bottomleft", "bottommiddle", "bottomright"].includes(placement) && exChange2 ? "-5px" : null
-    };
-    const arrowHandle = () => {
-      const resultStyles = {};
-      for (const styleName in styleConditions) {
-        const condition = styleConditions[styleName];
-        if (typeof condition === "function") {
-          resultStyles[styleName] = condition(props.placement, exChange.value);
-        } else if (condition) {
-          resultStyles[styleName] = condition;
-        }
-      }
-      const publicClass = "tdd-absolute tdd-z-1000 tdd-w-2.5 tdd-h-2.5 before:tdd-z-[-1] before:tdd-border before:tdd-border-gray-300 before:tdd-bg-white before:tdd-content-border before:tdd-rotate-45 before:tdd-content-[' '] before:tdd-w-2.5 before:tdd-h-2.5 before:tdd-absolute";
-      return h(
-        "span",
-        {
-          class: normalizeClass(
-            [
-              publicClass,
-              ["topleft", "topmiddle", "topright"].includes(props.placement) && !exChange.value ? "before:tdd-border-t-transparent before:tdd-border-l-transparent before:tdd-rounded-br" : "",
-              ["topleft", "topmiddle", "topright"].includes(props.placement) && exChange.value ? "before:tdd-border-b-transparent before:tdd-border-r-transparent before:tdd-rounded-tl" : "",
-              ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) && !exChange.value ? "before:tdd-border-b-transparent before:tdd-border-r-transparent before:tdd-rounded-tl" : "",
-              ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) && exChange.value ? "before:tdd-border-t-transparent before:tdd-border-l-transparent before:tdd-rounded-br" : "",
-              "centerright" == props.placement ? "before:tdd-border-r-transparent before:tdd-border-t-transparent before:tdd-rounded-bl" : "",
-              "centerleft" == props.placement ? "before:tdd-border-l-transparent before:tdd-border-b-transparent before:tdd-rounded-tr" : "",
-              props.beforebgcolor
-            ]
-          ),
-          style: normalizeStyle(
-            resultStyles
-          )
-        }
-      );
-    };
     const showHandle = () => {
-      showPop.value = true;
+      isLocalOpen.value = true;
     };
     const hovershowHandle = () => {
       if (props.trigger === "hover") {
-        showPop.value = true;
+        isLocalOpen.value = true;
       }
     };
     const Left = ref(0);
@@ -113,11 +224,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const setPosition = () => {
       const { top, bottom } = base.value.getBoundingClientRect();
       if (top < 0 || bottom > window.innerHeight) {
-        if (props.trigger === "native") {
-          emitAct("update:modelValue", false);
-        } else {
-          showPop.value = false;
-        }
+        hideHandle();
         return;
       }
       const position = usePotion(base.value, pop.value, {
@@ -128,41 +235,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       arrowTop.value = position.arrowTop;
       arrowLeft.value = position.arrowLeft;
       exChange.value = position.exChange;
-      window.addEventListener("resize", setPosition);
-      window.addEventListener("scroll", setPosition, true);
     };
-    const vClickoutside = {
-      mounted(el, binding) {
-        function documentHandler(e) {
-          var _a;
-          if (trueFlag.value == false)
-            return;
-          if (el.contains(e.target)) {
-            return false;
-          } else if ((_a = base.value) == null ? void 0 : _a.contains(e.target)) {
-            return false;
-          } else {
-            binding.value && binding.value(e);
-          }
-        }
-        el._vueClickOutside_ = debounce(documentHandler, 80);
-        document.addEventListener("click", el._vueClickOutside_);
-        switch (props.trigger) {
-          case "hover":
-            document.addEventListener("mousemove", el._vueClickOutside_);
-            break;
+    const vScroll = createScrollDirective({
+      onMove: () => {
+        if (shouldShow.value == false)
+          return;
+        setPosition();
+      }
+    });
+    const vClickoutside = createBgClickDirective({
+      onCheckOut: (event, el) => {
+        if (shouldShow.value == false)
+          return;
+        if (el.contains(event.target)) {
+          return;
+        } else if (base.value.contains(event.target)) {
+          return;
+        } else {
+          closeCenter();
         }
       },
-      beforeUnmount(el) {
-        document.removeEventListener("click", el._vueClickOutside_);
-        switch (props.trigger) {
-          case "hover":
-            document.removeEventListener("mousemove", el._vueClickOutside_);
-            break;
-        }
-        delete el._vueClickOutside_;
+      moveModel: props.trigger === "hover"
+    });
+    const vEsc = createEscapeDirective({
+      onEscape: () => {
+        if (shouldShow.value == false)
+          return;
+        console.log("work");
+        hideHandle();
       }
-    };
+    });
     const closeCenter = () => {
       if (props.beforeHidden) {
         props.beforeHidden(hideHandle);
@@ -177,61 +279,63 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (props.trigger === "native") {
           emitAct("update:modelValue", false);
         } else {
-          showPop.value = false;
+          isLocalOpen.value = false;
         }
       }
     };
     const widthNum = computed(() => {
+      if (!props.width)
+        return defaultWidth;
       if (typeof props.width === "number") {
         return `${props.width}px`;
       } else if (typeof props.width === "string") {
-        const defaultCheckArr = ["em", "px", "rem", "%"];
-        if (defaultCheckArr.some((i) => props.width.includes(i))) {
-          return props.width;
-        } else if (isNaN(Number(props.width))) {
-          return "200px";
-        } else {
-          return `${Number(props.width)}px`;
-        }
-      } else {
-        return "200px";
+        const validUnit = /^(?:\d+(?:\.\d+)?)(?:px|%|em|rem|vw|vh)$/.test(
+          props.width
+        );
+        return validUnit ? props.width : `${props.width}px`;
       }
-    });
-    onUnmounted(() => {
-      window.removeEventListener("resize", setPosition);
-      window.removeEventListener("scroll", setPosition, true);
+      return defaultWidth;
     });
     __expose({
       hideHandle
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "tdd-inline-block",
+        class: "inline-block w-full h-full",
         ref_key: "base",
         ref: base,
         onClick: showHandle,
         onMouseenter: withModifiers(hovershowHandle, ["prevent"])
       }, [
         renderSlot(_ctx.$slots, "reference"),
-        (openBlock(), createBlock(Teleport, { to: bindName.value }, [
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
           createVNode(Transition, { name: "opecity" }, {
             default: withCtx(() => [
               withDirectives((openBlock(), createElementBlock("div", {
                 ref_key: "pop",
                 ref: pop,
-                class: normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow tdd-border tdd-border-gray-300 tdd-box-border", [marginClass.value, _ctx.insertClass]]),
+                class: normalizeClass(["absolute z-1000 rounded bg-white p-4 drop-shadow border border-gray-300 box-border", [marginClass.value, _ctx.insertClass]]),
                 style: normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
               }, [
                 renderSlot(_ctx.$slots, "default"),
-                _ctx.arrowshow ? (openBlock(), createBlock(arrowHandle, { key: 0 })) : createCommentVNode("", true)
+                createVNode(unref(arrowComponent), {
+                  arrowLeft: arrowLeft.value,
+                  arrowTop: arrowTop.value,
+                  exChange: exChange.value,
+                  beforebgcolor: _ctx.beforebgcolor,
+                  placement: _ctx.placement,
+                  arrowshow: _ctx.arrowshow
+                }, null, 8, ["arrowLeft", "arrowTop", "exChange", "beforebgcolor", "placement", "arrowshow"])
               ], 6)), [
-                [vShow, trueFlag.value],
-                [vClickoutside, closeCenter]
+                [vShow, shouldShow.value],
+                [unref(vClickoutside)],
+                [unref(vEsc)],
+                [unref(vScroll)]
               ])
             ]),
             _: 3
           })
-        ], 8, ["to"]))
+        ]))
       ], 544);
     };
   }

package/dist/js/radio/radiobox.js

@@ -1,13 +1,46 @@
-import { defineComponent, renderSlot } from "vue";
+import { defineComponent, inject, ref, computed, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, vModelRadio, toDisplayString } from "vue";
+const _hoisted_1 = ["value", "disabled"];
+const _hoisted_2 = { class: "pl-2 peer-disabled:text-word9" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "radiobox",
   props: {
     label: {},
-    class: {}
+    value: {},
+    modelValue: {},
+    disabled: { type: Boolean, default: false },
+    button: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const changeHandle = inject("_changeHandle_", (_) => {
+    });
+    const checkedValues = inject("_checkedValues_", ref());
+    const checkedState = computed({
+      get: () => {
+        return props.modelValue || (checkedValues == null ? void 0 : checkedValues.value);
+      },
+      set: (val) => {
+        emit("update:modelValue", val);
+        changeHandle(val);
+      }
+    });
+    const emit = __emit;
     return (_ctx, _cache) => {
-      return renderSlot(_ctx.$slots, "default");
+      return openBlock(), createElementBlock("label", {
+        class: normalizeClass(["select-none inline-flex items-center", { "cursor-not-allowed": _ctx.disabled }])
+      }, [
+        withDirectives(createElementVNode("input", {
+          type: "radio",
+          value: _ctx.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checkedState.value = $event),
+          disabled: _ctx.disabled,
+          class: "peer disabled:cursor-not-allowed form-tick appearance-none h-4 w-4 rounded-full border border-gray-300 checked:border-transparent checked:bg-blue-600 focus:outline-none"
+        }, null, 8, _hoisted_1), [
+          [vModelRadio, checkedState.value]
+        ]),
+        createElementVNode("span", _hoisted_2, toDisplayString(_ctx.label), 1)
+      ], 2);
     };
   }
 });

package/dist/js/radio/radiogroup.js

@@ -1,69 +1,33 @@
-import { defineComponent, inject, useSlots, openBlock, createBlock, h, normalizeClass, withDirectives, vModelRadio } from "vue";
+import { defineComponent, inject, provide, computed, openBlock, createElementBlock, renderSlot } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "radiogroup",
   props: {
     modelValue: {},
-    showinput: { type: Boolean, default: false }
+    showinput: { type: Boolean, default: false },
+    disabled: { type: Boolean }
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const ParentGetChangeHandle = inject("changHandle", () => null);
     const emit = __emit;
-    const slots = useSlots();
-    const BoxHandle = (MySlot) => {
-      var _a, _b;
-      return h(
-        "label",
-        {
-          class: normalizeClass(["radioGroup", [(_a = MySlot.props) == null ? void 0 : _a.class, props.modelValue == MySlot.props.label ? "tdd-bg-wordblue" : ""]])
-        },
-        [
-          withDirectives(
-            h("input", {
-              type: "radio",
-              value: MySlot.props.label,
-              "onUpdate:modelValue": (value) => {
-                ParentGetChangeHandle(value);
-                emit("update:modelValue", value);
-              },
-              class: normalizeClass(["hiddeninput form-tick", [props.showinput ? "" : "tdd-hidden"]])
-            }),
-            [[vModelRadio, props.modelValue]]
-          ),
-          h(
-            "span",
-            {
-              class: normalizeClass(["tdd-text-sm", [props.modelValue == MySlot.props.label ? "tdd-text-white" : "tdd-text-word6"]])
-            },
-            ((_b = MySlot.children) == null ? void 0 : _b.default()) || MySlot.props.label
-          )
-        ]
-      );
-    };
-    const renderBoxs = () => {
-      return h(
-        "div",
-        {},
-        slots.default().map((MySlot) => {
-          if (typeof MySlot.children === "string")
-            return null;
-          if (Array.isArray(MySlot.children)) {
-            return MySlot.children.map((slot) => {
-              return BoxHandle(slot);
-            });
-          } else {
-            return BoxHandle(MySlot);
-          }
-        })
-      );
+    const changeHandle = (newVal) => {
+      emit("update:modelValue", newVal);
+      emit("change", newVal);
+      ParentGetChangeHandle(newVal);
     };
+    provide("_changeHandle_", changeHandle);
+    provide(
+      "_checkedValues_",
+      computed(() => props.modelValue)
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(renderBoxs);
+      return openBlock(), createElementBlock("div", null, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
     };
   }
 });
-const radiogroup_vue_vue_type_style_index_0_lang = "";
 export {
   _sfc_main as default
 };