ninemoon-ui 0.1.14 → 0.2.1

package/dist/js/popover.vue_vue_type_script_setup_true_lang/popover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,249 @@
+import { defineComponent, h, normalizeClass, normalizeStyle, ref, computed, nextTick, watch, getCurrentInstance, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, unref, createVNode, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, vShow } from "vue";
+import { z as zIndexManager, u as usePotion, h as createScrollDirective, i as createBgClickDirective, c as createEscapeDirective, s as selector } from "../index/index.js";
+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 },
+    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;
+    };
+    return () => h("span", {
+      class: normalizeClass(getArrowClasses()),
+      style: normalizeStyle(getArrowStyles())
+    });
+  }
+});
+const defaultWidth = "200px";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "popover",
+  props: {
+    trigger: { default: "click" },
+    width: {},
+    placement: { default: "topleft" },
+    insertClass: {},
+    beforeHidden: {},
+    modelValue: { type: Boolean },
+    beforebgcolor: {},
+    arrowshow: { type: Boolean, default: true },
+    renderType: { default: "show" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const base = ref();
+    const pop = ref();
+    const isLocalOpen = ref(false);
+    const currentZIndex = ref(zIndexManager.getCurrentZIndex());
+    const shouldShow = computed(() => {
+      if (isLocalOpen.value || props.trigger === "native" && props.modelValue) {
+        nextTick(setPosition);
+      }
+      if (props.trigger === "native") {
+        return props.modelValue;
+      } else {
+        return isLocalOpen.value;
+      }
+    });
+    watch(shouldShow, (newVal) => {
+      if (newVal) {
+        currentZIndex.value = zIndexManager.getNextZIndex();
+      }
+    });
+    const emitAct = __emit;
+    const marginClass = computed(() => {
+      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 showHandle = () => {
+      isLocalOpen.value = true;
+    };
+    const hovershowHandle = () => {
+      if (props.trigger === "hover") {
+        isLocalOpen.value = true;
+      }
+    };
+    const Left = ref(0);
+    const Top = ref(0);
+    const arrowLeft = ref(0);
+    const arrowTop = ref(0);
+    const exChange = ref(false);
+    const setPosition = () => {
+      const { top, bottom } = base.value.getBoundingClientRect();
+      if (top < 0 || bottom > window.innerHeight) {
+        hideHandle();
+        return;
+      }
+      const position = usePotion(base.value, pop.value, {
+        position: props.placement
+      });
+      Top.value = position.Top;
+      Left.value = position.Left;
+      arrowTop.value = position.arrowTop;
+      arrowLeft.value = position.arrowLeft;
+      exChange.value = position.exChange;
+    };
+    const { proxy } = getCurrentInstance();
+    const vScroll = createScrollDirective({
+      onMove: () => {
+        setPosition();
+      },
+      scrollContainerId: (proxy == null ? void 0 : proxy.gloablScrollBar) ? proxy == null ? void 0 : proxy.gloablScrollBar : void 0
+    });
+    const vClickoutside = createBgClickDirective({
+      onCheckOut: (event, el) => {
+        if (el.contains(event.target)) {
+          return;
+        } else if (base.value.contains(event.target)) {
+          return;
+        } else {
+          closeCenter();
+        }
+      },
+      moveModel: props.trigger === "hover"
+    });
+    const vEsc = createEscapeDirective({
+      onEscape: () => {
+        hideHandle();
+      }
+    });
+    const closeCenter = () => {
+      if (props.beforeHidden) {
+        props.beforeHidden(hideHandle);
+      } else {
+        hideHandle();
+      }
+    };
+    const hideHandle = (disablecancelflag) => {
+      if (disablecancelflag === true) {
+        return;
+      } else {
+        if (props.trigger === "native") {
+          emitAct("update:modelValue", false);
+        } else {
+          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 validUnit = /^(?:\d+(?:\.\d+)?)(?:px|%|em|rem|vw|vh)$/.test(
+          props.width
+        );
+        return validUnit ? props.width : `${props.width}px`;
+      }
+      return defaultWidth;
+    });
+    __expose({
+      hideHandle
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "inline-block",
+        ref_key: "base",
+        ref: base,
+        onClick: showHandle,
+        onMouseenter: withModifiers(hovershowHandle, ["prevent"])
+      }, [
+        renderSlot(_ctx.$slots, "reference"),
+        (openBlock(), createBlock(Teleport, {
+          to: `#${unref(selector)}`
+        }, [
+          createVNode(Transition, { name: "opacity" }, {
+            default: withCtx(() => [
+              withDirectives((openBlock(), createElementBlock("div", {
+                ref_key: "pop",
+                ref: pop,
+                class: normalizeClass(["absolute rounded bg-white p-4 drop-shadow border border-gray-300 box-border", [marginClass.value, __props.insertClass]]),
+                style: normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px`, "z-index": currentZIndex.value })
+              }, [
+                renderSlot(_ctx.$slots, "default"),
+                __props.arrowshow ? (openBlock(), createBlock(resolveDynamicComponent(unref(arrowComponent)), {
+                  key: 0,
+                  arrowLeft: arrowLeft.value,
+                  arrowTop: arrowTop.value,
+                  exChange: exChange.value,
+                  beforebgcolor: __props.beforebgcolor,
+                  placement: __props.placement
+                }, null, 8, ["arrowLeft", "arrowTop", "exChange", "beforebgcolor", "placement"])) : createCommentVNode("", true)
+              ], 6)), [
+                [vShow, shouldShow.value],
+                [unref(vClickoutside), shouldShow.value],
+                [unref(vEsc), shouldShow.value],
+                [unref(vScroll), shouldShow.value]
+              ])
+            ]),
+            _: 3
+          })
+        ], 8, ["to"]))
+      ], 544);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/js/radio/radiobox.js

@@ -28,18 +28,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
-        class: normalizeClass(["select-none text-sm inline-flex items-center cursor-pointer first:rounded-l-md last:rounded-r-md border-t border-b border-l last:border-r overflow-hidden", { "cursor-not-allowed": _ctx.disabled }])
+        class: normalizeClass(["select-none text-sm inline-flex items-center cursor-pointer first:rounded-l-md last:rounded-r-md border-t border-b border-l last:border-r overflow-hidden", { "cursor-not-allowed": __props.disabled }])
       }, [
         withDirectives(createElementVNode("input", {
           type: "radio",
-          value: _ctx.value,
+          value: __props.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checkedState.value = $event),
-          disabled: _ctx.disabled,
+          disabled: __props.disabled,
           class: "peer hidden 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("div", _hoisted_2, toDisplayString(_ctx.label), 1)
+        createElementVNode("div", _hoisted_2, toDisplayString(__props.label), 1)
       ], 2);
     };
   }

package/dist/js/scrollBar/scrollBar.js

@@ -113,13 +113,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onMousedown: clickTrackHandler,
         ref_key: "el",
         ref: el,
-        class: normalizeClass(["absolute right-0.5 bottom-0.5 rounded transition-transform", [_ctx.vertical ? "top-0.5 w-1.5" : "left-0.5 h-1.5"]])
+        class: normalizeClass(["absolute right-0.5 bottom-0.5 rounded transition-transform", [__props.vertical ? "top-0.5 w-1.5" : "left-0.5 h-1.5"]])
       }, [
         createElementVNode("div", {
           onMousedown: clickThumbHandler,
           ref_key: "thumb",
           ref: thumb,
-          class: normalizeClass([_ctx.vertical ? "w-full" : "h-full", "bg-[#9092984d] cursor-pointer rounded"]),
+          class: normalizeClass([__props.vertical ? "w-full" : "h-full", "bg-[#9092984d] cursor-pointer rounded"]),
           style: normalizeStyle(renderThumbstyle())
         }, null, 38)
       ], 34);
@@ -213,7 +213,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setScrollLeft
     });
     return (_ctx, _cache) => {
-      return !_ctx.native ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return !__props.native ? (openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
           ref_key: "wrap",
           ref: wrap,
@@ -222,7 +222,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(warpStyle.value),
           onTouchstart: _cache[0] || (_cache[0] = ($event) => isTouching.value = true),
           onTouchend: _cache[1] || (_cache[1] = ($event) => isTouching.value = false),
-          id: _ctx.id
+          id: __props.id
         }, [
           createElementVNode("div", {
             ref_key: "contentBox",

package/dist/js/select/select.js

@@ -104,18 +104,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "inputbox",
             ref: inputbox,
             class: normalizeClass([{
-              "bg-gray-100 cursor-default": _ctx.disabled,
-              "cursor-pointer": !_ctx.disabled
+              "bg-gray-100 cursor-default": __props.disabled,
+              "cursor-pointer": !__props.disabled
             }, "relative flex h-full w-full items-center overflow-hidden rounded border border-solid"]),
             onClick: showHandle
           }, [
             createElementVNode("input", {
               value: inputLabel.value,
               type: "text",
-              disabled: _ctx.disabled,
-              readonly: !_ctx.filter,
+              disabled: __props.disabled,
+              readonly: !__props.filter,
               class: normalizeClass(["w-full cursor-pointer appearance-none pl-2 text-sm outline-none disabled:cursor-default text-word3", heightClass.value]),
-              placeholder: _ctx.placeHolder
+              placeholder: __props.placeHolder
             }, null, 10, _hoisted_1),
             createVNode(ArrowIcon, {
               class: normalizeClass(["w-3 h-3 fill-gray-300 inline-block transform transition-all mx-1", { "-rotate-90": showOption.value, "rotate-90": !showOption.value }])

package/dist/js/select/selectoption.js

@@ -42,12 +42,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onMouseenter: moveIn,
         class: normalizeClass(["px-1 py-2 cursor-pointer", {
           "text-blue-light": isSelected.value,
-          "opacity-50 cursor-not-allowed": _ctx.disabled,
-          "bg-gray-100": !_ctx.disabled && isHovered.value,
+          "opacity-50 cursor-not-allowed": __props.disabled,
+          "bg-gray-100": !__props.disabled && isHovered.value,
           "bg-inherit": !isHovered.value
         }])
       }, [
-        !hasSlot.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.label || _ctx.value), 1)) : renderSlot(_ctx.$slots, "default", { key: 1 })
+        !hasSlot.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.label || __props.value), 1)) : renderSlot(_ctx.$slots, "default", { key: 1 })
       ], 34);
     };
   }

package/dist/js/switch/switch.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, toDisplayString } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, toDisplayString } from "vue";
 const _hoisted_1 = { class: "inline-block cursor-pointer select-none text-xs relative" };
 const _hoisted_2 = {
   key: 0,
@@ -15,7 +15,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     uncheckedLabel: {},
     checkedColor: { default: "#25b9e9" },
     uncheckedColor: { default: "#666666" },
-    modelValue: { type: Boolean, default: false }
+    modelValue: { type: Boolean, default: false },
+    width: { default: "40px" },
+    height: { default: "20px" }
   },
   emits: ["update:modelValue", "switchChange"],
   setup(__props, { emit: __emit }) {
@@ -25,6 +27,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", !props.modelValue);
       emit("switchChange", !props.modelValue);
     };
+    const containerStyle = computed(() => {
+      const width = typeof props.width === "number" ? props.width + "px" : props.width;
+      const height = typeof props.height === "number" ? props.height + "px" : props.height;
+      return {
+        backgroundColor: props.modelValue ? props.checkedColor : props.uncheckedColor,
+        width,
+        height,
+        minWidth: width,
+        borderRadius: typeof props.height === "number" ? props.height / 2 + "px" : `calc(${props.height} / 2)`
+      };
+    });
+    const handleStyle = computed(() => {
+      const height = typeof props.height === "number" ? props.height + "px" : props.height;
+      return {
+        width: height,
+        height,
+        borderRadius: height
+      };
+    });
+    const handleClass = computed(() => {
+      const height = typeof props.height === "number" ? props.height + "px" : props.height;
+      return props.modelValue ? "left-[calc(100%-" + height + ")]" : "left-0";
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", _hoisted_1, [
         createElementVNode("input", {
@@ -33,13 +58,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onChange: togglehandle
         }, null, 32),
         createElementVNode("div", {
-          class: "relative box-border block h-5 min-w-10 select-none overflow-hidden rounded-xl outline-0 ring-2 ring-gray-300",
-          style: normalizeStyle({ backgroundColor: _ctx.modelValue ? _ctx.checkedColor : _ctx.uncheckedColor })
+          class: "relative box-border block select-none overflow-hidden outline-0 ring-2 ring-gray-300",
+          style: normalizeStyle(containerStyle.value)
         }, [
           createElementVNode("div", {
-            class: normalizeClass(["absolute top-0 z-10 block h-5 w-5 transform rounded-full bg-slate-50 transition-all", [_ctx.modelValue ? "left-[calc(100%-20px)]" : "left-0"]])
-          }, null, 2),
-          _ctx.modelValue ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.checkedLabel), 1)) : (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(_ctx.uncheckedLabel), 1))
+            class: normalizeClass(["absolute top-0 z-10 block bg-slate-50 transition-all", handleClass.value]),
+            style: normalizeStyle(handleStyle.value)
+          }, null, 6),
+          __props.modelValue ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.checkedLabel), 1)) : (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.uncheckedLabel), 1))
         ], 4)
       ]);
     };