ninemoon-ui 0.0.26 → 0.1.0

package/dist/js/select-b5bbb138.js

@@ -0,0 +1,203 @@
+import { defineComponent, defineAsyncComponent, computed, inject, ref, watch, provide, toRef, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, withDirectives, createElementBlock, renderSlot } from "vue";
+import { A as ArrowIcon } from "./arrow-ebe47bd0.js";
+import "./index-b4e420ce.js";
+const directionMap = {
+  ArrowUp: "up",
+  Up: "up",
+  // IE/Edge 兼容
+  ArrowDown: "down",
+  Down: "down",
+  // IE/Edge 兼容
+  ArrowLeft: "left",
+  Left: "left",
+  // IE/Edge 兼容
+  ArrowRight: "right",
+  Right: "right"
+  // IE/Edge 兼容
+};
+const createArrowKeysDirective = (options) => {
+  const config = {
+    // 默认配置
+    up: () => {
+    },
+    down: () => {
+    },
+    left: () => {
+    },
+    right: () => {
+    },
+    ...options
+  };
+  const bindEvents = (el, binding) => {
+    const handler = (e) => {
+      var _a;
+      const direction = directionMap[e.key];
+      if (direction && config[direction]) {
+        e.preventDefault();
+        (_a = config[direction]) == null ? void 0 : _a.call(config, e);
+      }
+    };
+    el._arrowKeysHandler = handler;
+    document.addEventListener("keydown", handler);
+  };
+  const unbindEvents = (el) => {
+    if (el._arrowKeysHandler) {
+      document.removeEventListener("keydown", el._arrowKeysHandler);
+    }
+    delete el._arrowKeysHandler;
+  };
+  return {
+    mounted(el, binding) {
+      bindEvents(el);
+    },
+    updated(el, binding) {
+      unbindEvents(el);
+      bindEvents(el);
+    },
+    unmounted(el) {
+      unbindEvents(el);
+    }
+  };
+};
+const _hoisted_1 = ["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 },
+    size: { default: "default" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const Pop = defineAsyncComponent(() => import("./popover-45f75f86.js"));
+    const LibScrollBar = defineAsyncComponent(() => import("./scrollBar-07906042.js"));
+    const props = __props;
+    const heightClass = computed(() => ({
+      "h-8": props.size === "large",
+      "h-7": props.size === "default",
+      "h-6": props.size === "small"
+    }));
+    const ParentGetChangeHandle = inject("changHandle", (_params) => null);
+    const inputbox = ref();
+    const popwidth = computed(() => {
+      var _a;
+      return ((_a = inputbox.value) == null ? void 0 : _a.clientWidth) || 200;
+    });
+    const scrollRef = ref();
+    const vArrowKeys = createArrowKeysDirective({
+      up: () => {
+        if (showOption.value) {
+          const newIndex = (inputLabelIndex.value - 1 + totalNum.value) % totalNum.value;
+          updateModelvalue(selectDataArr.value[newIndex].value);
+        }
+      },
+      down: () => {
+        if (showOption.value) {
+          const newIndex = (inputLabelIndex.value + 1 + totalNum.value) % totalNum.value;
+          updateModelvalue(selectDataArr.value[newIndex].value);
+        }
+      }
+    });
+    const emit = __emit;
+    const showOption = ref(false);
+    const showHandle = () => {
+      if (props.disabled === true)
+        return;
+      showOption.value = !showOption.value;
+    };
+    const selectDataArr = ref([]);
+    const insertData = (data) => {
+      selectDataArr.value.push(data);
+    };
+    watch(showOption, (newval) => {
+      if (newval === false) {
+        LastChildSelect(props.modelValue);
+      }
+    });
+    const updateModelvalue = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+      LastChildSelect(value);
+      ParentGetChangeHandle && ParentGetChangeHandle(value);
+    };
+    provide("_SelectItemPush_", insertData);
+    provide("_UpdateSelectData_", (value) => {
+      updateModelvalue(value);
+      showOption.value = false;
+    });
+    provide("_SelectModelValue_", toRef(props, "modelValue"));
+    const lastMouseEnterValue = toRef(props.modelValue);
+    const LastChildSelect = (value) => {
+      lastMouseEnterValue.value = value;
+    };
+    provide("_LastSelectValue_", lastMouseEnterValue);
+    provide("_LastChildSelect_", LastChildSelect);
+    const inputLabel = computed(() => {
+      const isThis = selectDataArr.value.find((v) => v.value === props.modelValue);
+      return isThis ? isThis.label : props.modelValue;
+    });
+    const inputLabelIndex = computed(() => {
+      return selectDataArr.value.findIndex((v) => v.value === props.modelValue);
+    });
+    const totalNum = computed(() => {
+      return selectDataArr.value.length;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Pop), {
+        isselectMode: "",
+        trigger: "native",
+        modelValue: showOption.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showOption.value = $event),
+        width: popwidth.value,
+        insertClass: "z-2000 text-sm py-0.5 px-0",
+        placement: "bottommiddle"
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "inputbox",
+            ref: inputbox,
+            class: normalizeClass([{
+              "bg-gray-100 cursor-default": _ctx.disabled,
+              "cursor-pointer": !_ctx.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,
+              class: normalizeClass(["w-full cursor-pointer appearance-none px-2 text-sm outline-none disabled:cursor-default text-word3", heightClass.value]),
+              placeholder: _ctx.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 }])
+            }, null, 8, ["class"])
+          ], 2)
+        ]),
+        default: withCtx(() => [
+          withDirectives((openBlock(), createElementBlock("div", null, [
+            createVNode(unref(LibScrollBar), {
+              ref_key: "scrollRef",
+              ref: scrollRef,
+              maxHeight: "274px"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+            }, 512)
+          ])), [
+            [unref(vArrowKeys)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["modelValue", "width"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/js/selectoption-00c8f06d.js

@@ -0,0 +1,57 @@
+import { defineComponent, ref, inject, computed, useSlots, openBlock, createElementBlock, normalizeClass, toDisplayString, renderSlot } from "vue";
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "selectoption",
+  props: {
+    value: {},
+    label: {},
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const elRef = ref();
+    const modelValue = inject("_SelectModelValue_");
+    const isSelected = computed(() => modelValue.value === props.value);
+    const slots = useSlots();
+    const pushData = inject("_SelectItemPush_", (_params) => {
+    });
+    const selectHandle = inject("_UpdateSelectData_", (_params) => {
+    });
+    const hoverValue = inject("_LastSelectValue_");
+    const hoverHandle = inject("_LastChildSelect_", (_params) => {
+    });
+    const clickMeHandle = () => {
+      if (props.disabled)
+        return;
+      selectHandle(props.value);
+    };
+    pushData({ ...props });
+    const hasSlot = computed(() => !!slots.default);
+    const isHovered = computed(() => hoverValue.value === props.value);
+    const moveIn = () => {
+      hoverHandle(props.value);
+    };
+    __expose({
+      el: elRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "elRef",
+        ref: elRef,
+        onClick: clickMeHandle,
+        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,
+          "bg-inherit": !isHovered.value
+        }])
+      }, [
+        !hasSlot.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.label || _ctx.value), 1)) : renderSlot(_ctx.$slots, "default", { key: 1 })
+      ], 34);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/js/shapeFlag-8cf4bcf1.js

@@ -0,0 +1,17 @@
+var ShapeFlags = /* @__PURE__ */ ((ShapeFlags2) => {
+  ShapeFlags2[ShapeFlags2["ELEMENT"] = 1] = "ELEMENT";
+  ShapeFlags2[ShapeFlags2["FUNCTIONAL_COMPONENT"] = 2] = "FUNCTIONAL_COMPONENT";
+  ShapeFlags2[ShapeFlags2["STATEFUL_COMPONENT"] = 4] = "STATEFUL_COMPONENT";
+  ShapeFlags2[ShapeFlags2["TEXT_CHILDREN"] = 8] = "TEXT_CHILDREN";
+  ShapeFlags2[ShapeFlags2["ARRAY_CHILDREN"] = 16] = "ARRAY_CHILDREN";
+  ShapeFlags2[ShapeFlags2["SLOTS_CHILDREN"] = 32] = "SLOTS_CHILDREN";
+  ShapeFlags2[ShapeFlags2["TELEPORT"] = 64] = "TELEPORT";
+  ShapeFlags2[ShapeFlags2["SUSPENSE"] = 128] = "SUSPENSE";
+  ShapeFlags2[ShapeFlags2["COMPONENT_SHOULD_KEEP_ALIVE"] = 256] = "COMPONENT_SHOULD_KEEP_ALIVE";
+  ShapeFlags2[ShapeFlags2["COMPONENT_KEPT_ALIVE"] = 512] = "COMPONENT_KEPT_ALIVE";
+  ShapeFlags2[ShapeFlags2["COMPONENT"] = 6] = "COMPONENT";
+  return ShapeFlags2;
+})(ShapeFlags || {});
+export {
+  ShapeFlags as S
+};

package/dist/js/switch-06ae74cc.js

@@ -0,0 +1,50 @@
+import { defineComponent, 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,
+  class: "z-10 font-semibold text-white leading-5 mr-6 pl-1"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "z-10 font-semibold text-white leading-5 ml-6 pr-1"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "switch",
+  props: {
+    checkedLabel: {},
+    uncheckedLabel: {},
+    checkedColor: { default: "#25b9e9" },
+    uncheckedColor: { default: "#666666" },
+    modelValue: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "switchChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const togglehandle = () => {
+      emit("update:modelValue", !props.modelValue);
+      emit("switchChange", !props.modelValue);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", _hoisted_1, [
+        createElementVNode("input", {
+          type: "checkbox",
+          class: "hidden",
+          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 })
+        }, [
+          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))
+        ], 4)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/js/table-9bb52630.js

@@ -0,0 +1,270 @@
+import { defineComponent, computed, useSlots, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, createVNode, withDirectives, vShow, h, vModelCheckbox, withModifiers } from "vue";
+import { S as ShapeFlags } from "./shapeFlag-8cf4bcf1.js";
+const _hoisted_1 = { class: "text-center text-word6 text-base" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table",
+  props: {
+    data: {},
+    whiteword: { default: "" },
+    showHead: { type: Boolean, default: true },
+    headclass: {},
+    cellclass: {},
+    tableclass: {},
+    idKey: {}
+  },
+  emits: ["rowClick", "selectionChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const hasData = computed(() => {
+      return props.data.length > 0;
+    });
+    const emit = __emit;
+    const slots = useSlots();
+    const validSlots = computed(() => {
+      return slots.default().reduce((pre, cur) => {
+        if (cur.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          pre = pre.concat(cur.children);
+        } else if (cur.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+          pre.push(cur);
+        }
+        return pre;
+      }, []);
+    });
+    const appendSlots = computed(
+      () => validSlots.value.filter((slot) => slot.props.type === "append")
+    );
+    const prependSlots = computed(
+      () => validSlots.value.filter((slot) => slot.props.type === "prepend")
+    );
+    const restSlots = computed(
+      () => validSlots.value.filter(
+        (slot) => slot.props.type !== "append" && slot.props.type !== "prepend"
+      )
+    );
+    const renderColGroup = () => {
+      return h(
+        "colgroup",
+        null,
+        restSlots.value.map((it, _index) => {
+          return colitemHandle(it);
+        })
+      );
+    };
+    const colitemHandle = (it) => {
+      return h("col", {
+        width: it.props.width || null
+      });
+    };
+    const renderHead = () => {
+      return h(
+        "thead",
+        {
+          class: normalizeClass(["text-word6", [props.headclass]])
+        },
+        restSlots.value.map((it) => {
+          return headitemHandle(it);
+        })
+      );
+    };
+    const headitemHandle = (it) => {
+      var _a;
+      return h(
+        "th",
+        {
+          class: "font-normal h-10 border-b "
+        },
+        it.children && it.children.head ? it.children.head() : ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
+          "label",
+          {
+            class: "px-1 flex"
+          },
+          withDirectives(
+            h("input", {
+              type: "checkbox",
+              "onUpdate:modelValue": (value) => allSelect.value = value,
+              class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 text-red-600 focus:outline-none"
+            }),
+            [[vModelCheckbox, allSelect.value]]
+          )
+        ) : it.props.label
+      );
+    };
+    const allSelect = computed({
+      set(flag) {
+        if (flag) {
+          allSelection();
+        } else {
+          clearSelection();
+        }
+      },
+      get() {
+        return hasData.value && choosedKeys.value.length == props.data.length;
+      }
+    });
+    const MapData = computed(() => {
+      return props.data.reduce((map, item, index) => {
+        const key = props.idKey ? item[props.idKey] : index;
+        if (map.has(key)) {
+          console.warn(`重复键 ${key}，已合并为数组`);
+          map.set(key, [...map.get(key), item]);
+        } else {
+          map.set(key, [item]);
+        }
+        return map;
+      }, /* @__PURE__ */ new Map());
+    });
+    const choosedSet = ref(/* @__PURE__ */ new Set());
+    const choosedKeys = computed(() => Array.from(choosedSet.value));
+    const resultArray = computed(() => {
+      return choosedKeys.value.map((key) => {
+        const mapKey = props.idKey ? key : Number(key);
+        return MapData.value.get(mapKey) || [];
+      }).flat();
+    });
+    const clearSelection = () => {
+      choosedSet.value = /* @__PURE__ */ new Set();
+    };
+    const allSelection = () => {
+      choosedSet.value = new Set(MapData.value.keys());
+    };
+    watch(choosedKeys, () => {
+      emit("selectionChange", resultArray.value);
+    });
+    const renderSlotRows = (slots2, row, index, colSpan, modify) => {
+      const rowKey = getRowKey(row, index);
+      return slots2.map(
+        (slot) => h(
+          "tr",
+          { key: `${modify}-${rowKey}` },
+          h("td", { colSpan }, trRenderHandle(row, slot, index))
+        )
+      );
+    };
+    const renderMainRow = (row, index) => {
+      const rowKey = getRowKey(row, index);
+      return h(
+        "tr",
+        {
+          class: "border-b hover:bg-gray-100 transition-colors",
+          key: rowKey,
+          // 使用唯一键替代索引
+          onClick: withModifiers(() => emit("rowClick", { row, index }), ["stop"])
+        },
+        restSlots.value.map(
+          (slot, colIndex) => bodyCellRenderer(row, slot, index, colIndex)
+        )
+      );
+    };
+    const bodyCellRenderer = (row, slot, rowIndex, colIndex) => {
+      return h(
+        "td",
+        {
+          class: cellClasses(slot.props),
+          // 提取样式生成逻辑
+          key: `${getRowKey(row, rowIndex)}-${colIndex}`
+          // 复合键
+        },
+        renderCellContent(row, slot, rowIndex)
+      );
+    };
+    const renderCellContent = (row, slot, rowIndex) => {
+      var _a;
+      return ((_a = slot.props) == null ? void 0 : _a.type) === "selection" ? h(
+        "label",
+        {
+          class: "px-1 flex",
+          for: "checkbox"
+        },
+        h("input", {
+          type: "checkbox",
+          value: props.idKey ? row[props.idKey] : rowIndex,
+          onChange: (event) => {
+            const target = event.target;
+            const rowKey = props.idKey ? row[props.idKey] : rowIndex;
+            target.checked ? choosedSet.value.add(rowKey) : choosedSet.value.delete(rowKey);
+          },
+          checked: choosedSet.value.has(
+            props.idKey ? row[props.idKey] : rowIndex
+          ),
+          class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 text-red-600 focus:outline-none "
+        })
+      ) : trRenderHandle(row, slot, rowIndex);
+    };
+    const cellClasses = (props2) => {
+      return normalizeClass([
+        "text-center py-2",
+        props2 == null ? void 0 : props2.cellclass,
+        (props2 == null ? void 0 : props2.align) === "right" ? "text-right" : "text-left"
+      ]);
+    };
+    const getRowKey = (row, index) => {
+      return props.idKey ? row[props.idKey] : `row-${index}`;
+    };
+    const renderBody = () => {
+      const { data } = props;
+      const prepend = prependSlots.value;
+      const append = appendSlots.value;
+      const rest = restSlots.value;
+      const colSpan = rest.length;
+      const renderRow = (row, index) => {
+        return [
+          // 前置插槽渲染
+          ...renderSlotRows(prepend, row, index, colSpan, "pre"),
+          // 主体行
+          renderMainRow(row, index),
+          // 后置插槽渲染
+          ...renderSlotRows(append, row, index, colSpan, "next")
+        ];
+      };
+      return h("tbody", data.map(renderRow));
+    };
+    const trRenderHandle = (row, it, i) => {
+      return h(
+        "div",
+        null,
+        it.children && it.children.default ? it.children.default({
+          row,
+          index: i
+        }) : row[it.props.prop] || props.whiteword
+      );
+    };
+    __expose({
+      clearSelection,
+      allSelection,
+      toggleSelection: () => {
+        if (choosedSet.value.size === MapData.value.size) {
+          clearSelection();
+          return;
+        }
+        const newSet = /* @__PURE__ */ new Set();
+        for (const key of MapData.value.keys()) {
+          if (!choosedSet.value.has(key))
+            newSet.add(key);
+        }
+        choosedSet.value = newSet;
+      },
+      setSelection: (arr) => {
+        choosedSet.value = new Set(arr);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("table", {
+          class: normalizeClass(["w-full text-sm", _ctx.tableclass])
+        }, [
+          createVNode(renderColGroup),
+          withDirectives(createVNode(renderHead, null, null, 512), [
+            [vShow, _ctx.showHead]
+          ]),
+          createVNode(renderBody)
+        ], 2),
+        withDirectives(createElementVNode("div", _hoisted_1, "暂无数据", 512), [
+          [vShow, !hasData.value]
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/js/{table/tableItem.js → tableItem-7d8bf2db.js}

@@ -6,7 +6,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     width: {},
     label: {},
     fixed: {},
-    type: {},
+    type: { default: "default" },
     sortable: { type: Boolean },
     row: {},
     index: {}