ninemoon-ui 0.0.27 → 0.1.1

package/dist/js/input/input.js

@@ -1,5 +1,7 @@
-import { defineComponent, computed, inject, openBlock, createElementBlock, renderSlot, withDirectives, createElementVNode, vModelDynamic, vShow } from "vue";
-const _hoisted_1 = { class: "tdd-relative tdd-flex tdd-h-full tdd-w-full tdd-items-center tdd-overflow-hidden tdd-rounded tdd-border tdd-border-solid" };
+import { defineComponent, computed, inject, openBlock, createElementBlock, renderSlot, withDirectives, createElementVNode, normalizeClass, vModelDynamic, createVNode, vShow } from "vue";
+import { d as delIcon } from "../delete/delete.js";
+import "../index/index.js";
+const _hoisted_1 = { class: "relative flex h-full w-full items-center overflow-hidden rounded border border-solid" };
 const _hoisted_2 = ["placeholder", "type"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "input",
@@ -8,76 +10,91 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     modelModifiers: {},
     type: { default: "text" },
     placeHolder: {},
-    clearable: { type: Boolean, default: false }
+    clearable: { type: Boolean, default: false },
+    size: { default: "default" }
   },
   emits: ["update:modelValue", "blur", "input", "change"],
   setup(__props, { emit: __emit }) {
-    const prop = __props;
+    const props = __props;
+    const heightClass = computed(() => ({
+      "h-8": props.size === "large",
+      "h-7": props.size === "default",
+      "h-6": props.size === "small"
+    }));
     const inputValue = computed({
       get() {
-        return prop.modelValue;
+        return props.modelValue;
       },
       set(value) {
-        var _a;
-        if ((_a = prop == null ? void 0 : prop.modelModifiers) == null ? void 0 : _a.number) {
-          updateValue("update:modelValue", isNaN(Number(value)) ? prop.modelValue : Number(value));
-        } else {
-          updateValue("update:modelValue", value);
+        var _a, _b;
+        let processedValue = value;
+        if ((_a = props.modelModifiers) == null ? void 0 : _a.trim) {
+          if (typeof processedValue === "string") {
+            processedValue = processedValue.trim();
+          }
         }
+        if ((_b = props.modelModifiers) == null ? void 0 : _b.number) {
+          processedValue = processedValue ? Number(processedValue) : null;
+        }
+        emit("update:modelValue", processedValue);
       }
     });
-    const updateValue = __emit;
+    const emit = __emit;
     const ParentGetInputHandle = inject("inputHandle", () => null);
     const ParentGetBlurHandle = inject("blurHandle", () => null);
     const clearHandle = () => {
-      updateValue("update:modelValue", null);
+      emit("update:modelValue", null);
+      emit("change", null);
     };
     const showcloseico = computed(() => {
-      return prop.clearable && prop.modelValue;
+      return props.clearable && props.modelValue !== null && props.modelValue !== "";
     });
-    const defaultEvent = async ({ target, type }) => {
-      var _a;
-      if ((_a = prop == null ? void 0 : prop.modelModifiers) == null ? void 0 : _a.number) {
-        if (type == "blur") {
-          ParentGetBlurHandle(isNaN(Number(target.value)) ? prop.modelValue : Number(target.value));
-        } else {
-          ParentGetInputHandle(isNaN(Number(target.value)) ? prop.modelValue : Number(target.value));
-        }
+    const processValue = (rawValue, methodStr) => {
+      var _a, _b;
+      let value = ((_a = props.modelModifiers) == null ? void 0 : _a.trim) ? rawValue.trim() : rawValue;
+      if ((_b = props.modelModifiers) == null ? void 0 : _b.number) {
+        return value ? Number(value) : null;
+      }
+      if (methodStr === "blur") {
+        ParentGetBlurHandle(value || null);
       } else {
-        if (type == "blur") {
-          ParentGetBlurHandle(target.value);
-        } else {
-          ParentGetInputHandle(target.value);
-        }
+        ParentGetInputHandle(value || null);
       }
+      return value || null;
+    };
+    const handleBlur = (event) => {
+      const target = event.target;
+      emit("blur", processValue(target.value, "blur"));
+    };
+    const handleInput = (event) => {
+      const target = event.target;
+      emit("input", processValue(target.value, "input"));
+    };
+    const handleChange = (event) => {
+      const target = event.target;
+      emit("change", processValue(target.value, "change"));
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         renderSlot(_ctx.$slots, "prepend"),
         withDirectives(createElementVNode("input", {
-          class: "tdd-h-full tdd-w-full tdd-p-2 tdd-outline-none",
+          class: normalizeClass(["w-full px-2 outline-none appearance-none", heightClass.value]),
           placeholder: _ctx.placeHolder,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
           type: _ctx.type,
-          onBlur: defaultEvent,
-          onInput: defaultEvent,
-          onChange: defaultEvent
-        }, null, 40, _hoisted_2), [
+          onBlur: handleBlur,
+          onInput: handleInput,
+          onChange: handleChange
+        }, null, 42, _hoisted_2), [
           [vModelDynamic, inputValue.value]
         ]),
-        withDirectives((openBlock(), createElementBlock("svg", {
+        withDirectives(createElementVNode("button", {
+          type: "button",
           onClick: clearHandle,
-          viewBox: "64 64 896 896",
-          class: "tdd-mr-2 tdd-cursor-pointer",
-          focusable: "false",
-          "data-icon": "close",
-          width: "1em",
-          height: "1em",
-          fill: "currentColor",
-          "aria-hidden": "true"
-        }, _cache[1] || (_cache[1] = [
-          createElementVNode("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null, -1)
-        ]), 512)), [
+          class: "mr-2 flex-grow-0"
+        }, [
+          createVNode(delIcon, { class: "w-3 h-3" })
+        ], 512), [
           [vShow, showcloseico.value]
         ]),
         renderSlot(_ctx.$slots, "append")

package/dist/js/menu/menu.js

@@ -1,36 +1,63 @@
-import { defineComponent, ref, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, withDirectives, vModelRadio, normalizeClass, toDisplayString, normalizeStyle } from "vue";
+import { defineComponent, computed, ref, openBlock, createElementBlock, createElementVNode, Fragment, renderList, withDirectives, vModelRadio, normalizeClass, toDisplayString, normalizeStyle } from "vue";
 const _hoisted_1 = ["value"];
-const _hoisted_2 = { class: "tdd-w-full tdd-border-t-2 tdd-border-gray-200 tdd-border-solid tdd-mt-2 tdd-relative" };
+const _hoisted_2 = { class: "w-full border-t-2 border-gray-200 border-solid mt-2 relative" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "menu",
   props: {
-    menulist: {}
+    menulist: {},
+    activeIndex: { default: 1 }
   },
-  emits: ["updatemenu"],
+  emits: ["updatemenu", "update:activeIndex"],
   setup(__props, { emit: __emit }) {
-    const bigIndex = ref(-1);
-    const arrowNum = ref(0);
+    const props = __props;
+    const bigIndex = computed({
+      set(val) {
+        emit("update:activeIndex", val);
+        emit("updatemenu", val);
+      },
+      get() {
+        updateIndicatorPosition();
+        if (props.menulist.length === 0)
+          return 0;
+        if (props.menulist.length <= props.activeIndex)
+          return props.menulist.length - 1;
+        return props.activeIndex;
+      }
+    });
     const emit = __emit;
-    const baseclass = ref();
-    watch(bigIndex, (n) => {
+    const menuListRef = ref();
+    const indicatorPosition = ref(0);
+    const indicatorStyle = computed(() => ({
+      transform: `translateX(${indicatorPosition.value}px)`,
+      width: `${currentItemWidth.value}px`
+    }));
+    const currentItemWidth = computed(() => {
       var _a;
-      let dom = (_a = baseclass.value) == null ? void 0 : _a.children[n];
-      if (dom) {
-        arrowNum.value = dom.offsetLeft - baseclass.value.offsetLeft;
-      }
-      emit("updatemenu", n);
+      if (!menuListRef.value)
+        return 0;
+      return ((_a = menuListRef.value.children[props.activeIndex]) == null ? void 0 : _a.clientWidth) || 0;
     });
+    const updateIndicatorPosition = () => {
+      if (!menuListRef.value)
+        return;
+      const currentItem = menuListRef.value.children[props.activeIndex];
+      if (currentItem) {
+        const containerRect = menuListRef.value.getBoundingClientRect();
+        const itemRect = currentItem.getBoundingClientRect();
+        indicatorPosition.value = itemRect.left - containerRect.left;
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
         createElementVNode("div", {
-          class: "tdd-w-full tdd-flex tdd-text-word6",
-          ref_key: "baseclass",
-          ref: baseclass
+          class: "w-full flex text-word6 space-x-4",
+          ref_key: "menuListRef",
+          ref: menuListRef
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menulist, (item, i) => {
             return openBlock(), createElementBlock("label", { key: item }, [
               withDirectives(createElementVNode("input", {
-                class: "tdd-hidden",
+                class: "hidden",
                 name: "classone",
                 type: "radio",
                 value: i,
@@ -39,15 +66,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 [vModelRadio, bigIndex.value]
               ]),
               createElementVNode("span", {
-                class: normalizeClass(["hover:tdd-text-blue-brand tdd-text-sm tdd-mr-4 tdd-cursor-pointer tdd-inline-block tdd-w-14 tdd-text-center", { "tdd-text-blue-brand": bigIndex.value == i }])
+                class: normalizeClass(["hover:text-blue-brand text-sm cursor-pointer inline-block text-center px-2", { "text-blue-brand": bigIndex.value == i }])
               }, toDisplayString(item), 3)
             ]);
           }), 128))
         ], 512),
         createElementVNode("div", _hoisted_2, [
           createElementVNode("div", {
-            class: "tdd-absolute tdd-w-14 tdd-border-t-2 tdd-border-solid tdd-border-blue-brand tdd-bottom-0 tdd-transition",
-            style: normalizeStyle({ transform: `translateX(${arrowNum.value}px` })
+            class: "absolute w-14 border-t-2 border-solid border-blue-brand bottom-0 transition",
+            style: normalizeStyle(indicatorStyle.value)
           }, null, 4)
         ])
       ]);

package/dist/js/numberInput/numberinput.js

@@ -1,12 +1,37 @@
-import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, withDirectives, vModelText } from "vue";
-const _hoisted_1 = { class: "tdd-inline-flex tdd-w-full tdd-rounded-sm tdd-border tdd-border-gray-400 focus-within:tdd-border-blue-300" };
+import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, normalizeClass, createVNode, withDirectives, vModelText } from "vue";
+import { _ as _export_sfc } from "../index/index.js";
+const _sfc_main$2 = {};
+const _hoisted_1$2 = {
+  viewBox: "0 0 1024 1024",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M853.333333 544H170.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h682.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" }, null, -1)
+  ]));
+}
+const minusIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
+const _sfc_main$1 = {};
+const _hoisted_1$1 = {
+  viewBox: "0 0 1024 1024",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" }, null, -1)
+  ]));
+}
+const addIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const _hoisted_1 = { class: "inline-flex w-full rounded-sm border border-solid" };
 const _hoisted_2 = ["disabled"];
 const _hoisted_3 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "numberinput",
   props: {
     modelValue: {},
-    size: { default: "normal" },
+    size: { default: "default" },
     min: {},
     max: {},
     strict: { type: Boolean, default: false },
@@ -16,6 +41,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue", "NumChange"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const sizeClass = computed(() => ({
+      "h-8 w-8": props.size === "large",
+      "h-7 w-7": props.size === "default",
+      "h-6 w-6": props.size === "small"
+    }));
+    const bounds = computed(() => ({
+      min: props.min ?? -Infinity,
+      max: props.max ?? Infinity
+    }));
+    const isMinReached = computed(() => props.modelValue <= bounds.value.min);
+    const isMaxReached = computed(() => props.modelValue >= bounds.value.max);
     function updateModelValueAndEmit(value) {
       const formattedValue = value.toFixed(lastLen.value);
       emitAct("update:modelValue", Number(formattedValue));
@@ -23,8 +59,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const emitAct = __emit;
     const lastLen = computed(() => {
-      var _a;
-      return (_a = props.step.toString().split(".")[1]) == null ? void 0 : _a.length;
+      const stepString = props.step.toString();
+      return stepString.includes(".") ? stepString.split(".")[1].length : 0;
     });
     const addHandle = () => {
       let result = props.modelValue + props.step;
@@ -49,51 +85,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     });
-    const reduceDisable = computed(() => {
-      if (props.min !== void 0) {
-        if (Number(props.modelValue) <= props.min) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return false;
-      }
-    });
-    const addDisable = computed(() => {
-      if (props.max !== void 0) {
-        if (Number(props.modelValue) >= props.max) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return false;
-      }
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("button", {
           type: "button",
-          disabled: reduceDisable.value,
+          disabled: isMinReached.value,
           onClick: reduceHandle,
-          class: normalizeClass(["tdd-flex-none tdd-bg-gray-200 tdd-text-xs", {
-            "tdd-h-8 tdd-w-8": _ctx.size == "normal",
-            "tdd-h-6 tdd-w-6": _ctx.size != "normal",
-            "tdd-cursor-not-allowed": reduceDisable.value
-          }])
-        }, _cache[1] || (_cache[1] = [
-          createElementVNode("svg", {
-            class: "tdd-h-4 tdd-w-4 tdd-fill-word6 tdd-inline-block",
-            viewBox: "0 0 1024 1024",
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            createElementVNode("path", { d: "M853.333333 544H170.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h682.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" })
-          ], -1)
-        ]), 10, _hoisted_2),
+          class: normalizeClass(["disabled:cursor-not-allowed flex-none bg-gray-200 text-xs", sizeClass.value])
+        }, [
+          createVNode(minusIcon, { class: "h-4 w-4 fill-word6 inline-block" })
+        ], 10, _hoisted_2),
         withDirectives(createElementVNode("input", {
-          class: "tdd-w-full tdd-px-1 tdd-text-center tdd-outline-none",
+          class: "w-full px-1 text-center outline-none text-word3",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
           type: "text"
         }, null, 512), [
@@ -101,23 +104,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         createElementVNode("button", {
           type: "button",
-          disabled: addDisable.value,
+          disabled: isMaxReached.value,
           onClick: addHandle,
-          class: normalizeClass(["tdd-flex-none tdd-bg-gray-200 tdd-text-xs", {
-            "tdd-h-8 tdd-w-8": _ctx.size == "normal",
-            "tdd-h-6 tdd-w-6": _ctx.size != "normal",
-            "tdd-cursor-not-allowed": addDisable.value
-          }])
-        }, _cache[2] || (_cache[2] = [
-          createElementVNode("svg", {
-            class: "tdd-h-4 tdd-w-4 tdd-fill-word6 tdd-inline-block",
-            viewBox: "0 0 1024 1024",
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, [
-            createElementVNode("path", { d: "M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" })
-          ], -1)
-        ]), 10, _hoisted_3)
+          class: normalizeClass(["disabled:cursor-not-allowed flex-none bg-gray-200 text-xs", sizeClass.value])
+        }, [
+          createVNode(addIcon, { class: "h-4 w-4 fill-word6 inline-block" })
+        ], 10, _hoisted_3)
       ]);
     };
   }