ninemoon-ui 0.0.1

package/dist/js/popover/popover.js

@@ -0,0 +1,193 @@
+import { defineComponent, ref, computed, watch, nextTick, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { u as usePotion, t as throttle } from "../index/index.js";
+const _hoisted_1 = ["onMouseenter"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "popover",
+  props: {
+    trigger: { default: "click" },
+    width: {},
+    placement: { default: "topleft" },
+    insertClass: {},
+    beforeHidden: {},
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: emitAct }) {
+    const props = __props;
+    const base = ref();
+    const pop = ref();
+    const showPop = ref(false);
+    const showPopFlag = computed(() => {
+      if (props.trigger === "native") {
+        return props.modelValue;
+      } else {
+        return showPop.value;
+      }
+    });
+    const marginClass = computed(() => {
+      let margin = "";
+      switch (props.placement) {
+        case "topleft":
+        case "topmiddle":
+        case "topright":
+          margin = "-mt-3";
+          break;
+        case "bottomleft":
+        case "bottommiddle":
+        case "bottomright":
+          margin = "mt-3";
+          break;
+        case "centerleft":
+          margin = "-ml-3";
+          break;
+        case "centerright":
+          margin = "ml-3";
+          break;
+      }
+      return margin;
+    });
+    const showHandle = () => {
+      showPop.value = true;
+    };
+    const hovershowHandle = () => {
+      if (props.trigger === "hover") {
+        showPop.value = true;
+      }
+    };
+    const Left = ref(0);
+    const Top = ref(0);
+    watch(showPopFlag, (n) => {
+      if (n === true) {
+        nextTick(() => {
+          setPosition();
+          nextTick(() => {
+            if (props.trigger === "hover")
+              return;
+            window.addEventListener("resize", setPosition);
+            window.addEventListener("scroll", setPosition, true);
+          });
+        });
+      } else {
+        window.removeEventListener("resize", setPosition);
+        window.removeEventListener("scroll", setPosition, true);
+      }
+    });
+    const setPosition = () => {
+      let { top, bottom } = base.value.getBoundingClientRect();
+      if (top < 0 || bottom > window.innerHeight) {
+        if (props.trigger === "native") {
+          emitAct("update:modelValue", false);
+        } else {
+          showPop.value = false;
+        }
+        return;
+      }
+      const position = usePotion(base.value, pop.value, {
+        position: props.placement
+      });
+      Top.value = position.Top;
+      Left.value = position.Left;
+    };
+    const vClickoutside = {
+      mounted(el, binding) {
+        function documentHandler(e) {
+          if ((el == null ? void 0 : el.contains) && (el == null ? void 0 : el.contains(e.target))) {
+            return false;
+          } else if (base.value.contains(e.target)) {
+            return false;
+          } else {
+            binding.value && binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = throttle(documentHandler, 100);
+        document.addEventListener("click", el._vueClickOutside_);
+        switch (props.trigger) {
+          case "hover":
+            document.addEventListener("mousemove", el._vueClickOutside_);
+            break;
+        }
+      },
+      beforeUnmount(el) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        switch (props.trigger) {
+          case "hover":
+            document.removeEventListener("mousemove", el._vueClickOutside_);
+            break;
+        }
+        delete el._vueClickOutside_;
+      }
+    };
+    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 {
+          showPop.value = false;
+        }
+      }
+    };
+    const widthNum = computed(() => {
+      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";
+      }
+    });
+    __expose({
+      hideHandle
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "tdd-inline-block",
+        ref_key: "base",
+        ref: base,
+        onClick: showHandle,
+        onMouseenter: withModifiers(hovershowHandle, ["prevent"])
+      }, [
+        renderSlot(_ctx.$slots, "reference"),
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !showPopFlag.value
+        }, [
+          createVNode(Transition, { name: "opecity" }, {
+            default: withCtx(() => [
+              showPopFlag.value ? withDirectives((openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "pop",
+                ref: pop,
+                class: normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow", [marginClass.value, _ctx.insertClass]]),
+                style: normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 6)), [
+                [vClickoutside, closeCenter]
+              ]) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 40, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/js/radio/radiobox.js

@@ -0,0 +1,16 @@
+import { defineComponent, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "radiobox",
+  props: {
+    label: {},
+    class: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/js/radio/radiogroup.js

@@ -0,0 +1,99 @@
+import { defineComponent, inject, useSlots, openBlock, createBlock, h, withDirectives, vModelRadio } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "radiogroup",
+  props: {
+    modelValue: {},
+    showinput: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const ParentGetChangeHandle = inject("changHandle", () => null);
+    const slots = useSlots();
+    const renderBoxs = () => {
+      return h(
+        "div",
+        {},
+        slots.default().map((MySlot) => {
+          var _a, _b;
+          if (MySlot.type.toString().includes("Symbol")) {
+            if (MySlot.children && MySlot.children instanceof Array) {
+              return MySlot.children.map((trueSlot) => {
+                var _a2;
+                return h(
+                  "label",
+                  {
+                    class: "radioGroup " + // @ts-ignore
+                    (trueSlot.props.class || "") + // @ts-ignore
+                    (props.modelValue == trueSlot.props.label ? " tdd-bg-wordblue" : "")
+                  },
+                  [
+                    withDirectives(
+                      h("input", {
+                        type: "radio",
+                        // @ts-ignore
+                        value: trueSlot.props.label,
+                        "onUpdate:modelValue": (value) => {
+                          ParentGetChangeHandle(value);
+                          emit("update:modelValue", value);
+                        },
+                        class: "hiddeninput form-tick" + // @ts-ignore
+                        (props.showinput ? "" : " tdd-hidden")
+                      }),
+                      [[vModelRadio, props.modelValue]]
+                    ),
+                    h(
+                      "span",
+                      {
+                        class: "tdd-text-sm " + // @ts-ignore
+                        (props.modelValue == trueSlot.props.label ? " tdd-text-white" : " tdd-text-word6")
+                      },
+                      // @ts-ignore
+                      ((_a2 = trueSlot.children) == null ? void 0 : _a2.default()) || trueSlot.props.label
+                    )
+                  ]
+                );
+              });
+            }
+          } else {
+            return h(
+              "label",
+              {
+                class: "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: "hiddeninput form-tick" + (props.showinput ? "" : " tdd-hidden")
+                  }),
+                  [[vModelRadio, props.modelValue]]
+                ),
+                h(
+                  "span",
+                  {
+                    class: "tdd-text-sm " + (props.modelValue == MySlot.props.label ? " tdd-text-white" : " tdd-text-word6")
+                  },
+                  // @ts-ignore
+                  ((_b = MySlot.children) == null ? void 0 : _b.default()) || MySlot.props.label
+                )
+              ]
+            );
+          }
+        })
+      );
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(renderBoxs);
+    };
+  }
+});
+const radiogroup_vue_vue_type_style_index_0_lang = "";
+export {
+  _sfc_main as default
+};

package/dist/js/scrollBar/scrollBar.js

@@ -0,0 +1,208 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, onMounted, nextTick, onUnmounted, renderSlot, createVNode } from "vue";
+import { o as on, a as off, b as getScrollWidth, c as addResizeListener, r as removeResizeListener } from "../index/index.js";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "movebar",
+  props: {
+    vertical: { type: Boolean, default: false },
+    move: {},
+    size: {},
+    parent: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const BAR_MAP = {
+      //  垂直滚动块的属性
+      vertical: {
+        offset: "offsetHeight",
+        scroll: "scrollTop",
+        scrollSize: "scrollHeight",
+        size: "height",
+        key: "vertical",
+        axis: "Y",
+        client: "clientY",
+        direction: "top"
+      },
+      //  水平滚动块的属性
+      horizontal: {
+        offset: "offsetWidth",
+        scroll: "scrollLeft",
+        scrollSize: "scrollWidth",
+        size: "width",
+        key: "horizontal",
+        axis: "X",
+        client: "clientX",
+        direction: "left"
+      }
+    };
+    const el = ref();
+    const thumb = ref();
+    const bar = computed(() => {
+      return BAR_MAP[props.vertical ? "vertical" : "horizontal"];
+    });
+    const wrap = computed(() => props.parent);
+    let baraxis = 0;
+    const clickTrackHandler = (e) => {
+      const offset = Math.abs(
+        // @ts-ignore
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      );
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 / el.value[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    const clickThumbHandler = (e) => {
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      startDrag(e);
+      baraxis = // @ts-ignore
+      //  滑块的高度
+      e.currentTarget[bar.value.offset] - //  点击滑块距离顶部的位置 减去 滑块元素距离顶部的位置
+      // @ts-ignore
+      (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+    };
+    const cursorDown = ref(false);
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      on(document, "mousemove", mouseMoveDocumentHandler);
+      on(document, "mouseup", mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (cursorDown.value === false)
+        return;
+      const prevPage = baraxis;
+      if (!prevPage)
+        return;
+      const offset = (el.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / el.value[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown.value = false;
+      baraxis = 0;
+      off(document, "mousemove", mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    };
+    const renderThumbstyle = () => {
+      const style = {};
+      const translate = `translate${bar.value.axis}(${props.move}%)`;
+      style[bar.value.size] = props.size;
+      style.transform = translate;
+      style.msTransform = translate;
+      style.webkitTransform = translate;
+      return style;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        onMousedown: clickTrackHandler,
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass(["tdd-absolute tdd-right-0.5 tdd-bottom-0.5 tdd-rounded tdd-transition-transform", [
+          _ctx.vertical ? "isver" : "ishor"
+        ]])
+      }, [
+        createElementVNode("div", {
+          onMousedown: clickThumbHandler,
+          ref_key: "thumb",
+          ref: thumb,
+          class: "thumb",
+          style: normalizeStyle(renderThumbstyle())
+        }, null, 36)
+      ], 34);
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 1,
+  class: "tdd-group/scroll tdd-relative tdd-h-full tdd-w-full tdd-overflow-hidden pageScroll"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "scrollBar",
+  props: {
+    native: { type: Boolean, default: false },
+    noresize: { type: Boolean, default: false },
+    vertical: { type: Boolean, default: false },
+    isSelectdom: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const marginnum = ref(0);
+    onMounted(() => {
+      if (props.native)
+        return;
+      marginnum.value = getScrollWidth();
+    });
+    const wrap = ref();
+    const resize = ref();
+    const moveX = ref(0);
+    const moveY = ref(0);
+    const sizeHeight = ref("");
+    const sizeWidth = ref("");
+    const handleScroll = () => {
+      moveY.value = wrap.value.scrollTop / wrap.value.clientHeight * 100;
+      moveX.value = wrap.value.scrollLeft / wrap.value.clientWidth * 100;
+    };
+    const update = () => {
+      let heightPercentage, widthPercentage;
+      if (!wrap.value)
+        return;
+      heightPercentage = wrap.value.clientHeight * 100 / wrap.value.scrollHeight;
+      widthPercentage = wrap.value.clientWidth * 100 / wrap.value.scrollWidth;
+      sizeHeight.value = heightPercentage < 100 ? heightPercentage + "%" : "";
+      sizeWidth.value = widthPercentage < 100 ? widthPercentage + "%" : "";
+    };
+    onMounted(() => {
+      if (props.native)
+        return;
+      nextTick(() => update);
+      !props.noresize && addResizeListener(resize.value, update);
+    });
+    onUnmounted(() => {
+      if (props.native)
+        return;
+      !props.noresize && removeResizeListener(resize.value, update);
+    });
+    return (_ctx, _cache) => {
+      return _ctx.native ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "wrap",
+          ref: wrap,
+          onScroll: handleScroll,
+          class: normalizeClass([{ "tdd-max-h-[300px]": _ctx.isSelectdom }, "tddScroll tdd-h-full tdd-overscroll-contain tdd-overflow-scroll"]),
+          style: normalizeStyle({
+            marginRight: `-${marginnum.value}px`,
+            marginBottom: `-${marginnum.value}px`
+          })
+        }, [
+          createElementVNode("div", {
+            ref_key: "resize",
+            ref: resize,
+            class: "block"
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 512)
+        ], 38),
+        createVNode(_sfc_main$1, {
+          move: moveX.value,
+          size: sizeWidth.value,
+          parent: wrap.value,
+          class: "tdd-opacity-0 group-hover/scroll:tdd-opacity-100"
+        }, null, 8, ["move", "size", "parent"]),
+        createVNode(_sfc_main$1, {
+          vertical: "",
+          move: moveY.value,
+          size: sizeHeight.value,
+          parent: wrap.value,
+          class: "tdd-opacity-0 group-hover/scroll:tdd-opacity-100"
+        }, null, 8, ["move", "size", "parent"])
+      ]));
+    };
+  }
+});
+const scrollBar_vue_vue_type_style_index_0_lang = "";
+export {
+  _sfc_main as default
+};

package/dist/js/select/select.js

@@ -0,0 +1,133 @@
+import { defineComponent, defineAsyncComponent, inject, useSlots, ref, computed, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, h } from "vue";
+const _hoisted_1 = { class: "tdd-absolute tdd-z-2000 tdd-rounded-sm tdd-bg-white tdd-text-sm tdd-drop-shadow tdd-mt-1" };
+const _hoisted_2 = ["value", "disabled", "readonly", "placeholder"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "select",
+  props: {
+    modelValue: {},
+    filter: { type: Boolean, default: false },
+    placeHolder: { default: "点击选择" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const LibScrollBar = defineAsyncComponent(() => import("../scrollBar/scrollBar.js"));
+    const Pop = defineAsyncComponent(() => import("../popover/popover.js"));
+    const ParentGetChangeHandle = inject(
+      "changHandle",
+      (_params) => null
+      // false
+    );
+    const slots = useSlots();
+    const showOption = ref(false);
+    const showHandle = () => {
+      if (props.disabled === true)
+        return;
+      showOption.value = !showOption.value;
+    };
+    const inputLabel = computed(() => {
+      const isThis = optionList.value.filter((v) => v.value === props.modelValue);
+      if (isThis.length > 0) {
+        return isThis[0].label;
+      } else {
+        return null;
+      }
+    });
+    const optionList = ref([]);
+    const renderOption = () => {
+      return h(
+        "div",
+        {
+          class: "selectOption"
+        },
+        slots.default().map((i, j) => {
+          if (i.type.toString().includes("Symbol")) {
+            return i.children.map((it, k) => {
+              optionList.value.push({
+                value: it.props.value,
+                label: it.props.label
+              });
+              return h(
+                "div",
+                {
+                  class: `label ${props.modelValue === it.props.value ? "labelselect" : ""}`,
+                  key: `${j}-${k}`,
+                  onClick: () => {
+                    emit("update:modelValue", it.props.value);
+                    showOption.value = false;
+                  }
+                },
+                it.children || it.props.label
+              );
+            });
+          } else {
+            optionList.value.push({
+              value: i.props.value,
+              label: i.props.label
+            });
+            return h(
+              "div",
+              {
+                class: `label ${props.modelValue === i.props.value ? "labelselect" : ""}`,
+                key: j,
+                onClick: () => {
+                  emit("update:modelValue", i.props.value);
+                  showOption.value = false;
+                }
+              },
+              i.children || i.props.label
+            );
+          }
+        })
+      );
+    };
+    watch(
+      () => props.modelValue,
+      (n) => {
+        ParentGetChangeHandle && ParentGetChangeHandle(n);
+        emit("change", n);
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Pop), {
+        trigger: "native",
+        modelValue: showOption.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showOption.value = $event),
+        insertClass: "tdd-min-w-[200px]",
+        placement: "bottomleft"
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("div", {
+            class: "tdd-relative tdd-flex tdd-h-full tdd-w-full tdd-items-center tdd-overflow-hidden tdd-rounded tdd-border tdd-border-solid",
+            onClick: showHandle
+          }, [
+            createElementVNode("input", {
+              value: inputLabel.value,
+              type: "text",
+              disabled: _ctx.disabled,
+              readonly: !_ctx.filter,
+              class: "tdd-h-full tdd-w-full tdd-cursor-pointer tdd-appearance-none tdd-p-2 tdd-text-sm tdd-outline-none",
+              placeholder: _ctx.placeHolder
+            }, null, 8, _hoisted_2)
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(LibScrollBar), { isSelectdom: true }, {
+              default: withCtx(() => [
+                createVNode(renderOption)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const select_vue_vue_type_style_index_0_lang = "";
+export {
+  _sfc_main as default
+};

package/dist/js/select/selectoption.js

@@ -0,0 +1,16 @@
+import { defineComponent, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "selectoption",
+  props: {
+    value: {},
+    label: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  _sfc_main as default
+};