@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.C9TEQ_29.cjs

@@ -0,0 +1,385 @@
+'use strict';
+
+const vue = require('vue');
+const icon = require('./components.CRtd1JMp.cjs');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const treeProps = {
+  /** 树节点数据 */
+  data: { type: Array, default: () => [] },
+  /** 选中节点 key（v-model，null 表示无选中；缺省走内部默认选中） */
+  modelValue: { type: [String, Number], default: null },
+  /** 非受控模式的初始选中节点 key（未绑定 v-model 时作为默认选中） */
+  defaultSelectedKey: {
+    type: [String, Number],
+    default: null
+  },
+  /** 默认展开节点 key 列表 */
+  defaultExpandedKeys: {
+    type: Array,
+    default: () => []
+  },
+  /** 默认展开全部（优先于 defaultExpandedKeys） */
+  expandAll: { type: Boolean, default: false },
+  /** 层级缩进（px） */
+  indent: { type: Number, default: 20 }
+};
+const treeContextKey = Symbol("qm-tree");
+
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmTreeItem" },
+  __name: "tree-item",
+  props: {
+    node: { type: Object, required: true },
+    level: { type: Number, required: true }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const ctx = vue.inject(treeContextKey);
+    const RenderLabel = (p) => ctx.renderLabel(p.node);
+    const expanded = vue.computed(() => ctx.isExpanded(props.node));
+    const hasChildren = vue.computed(() => Boolean(props.node.children?.length));
+    const selected = vue.computed(() => ctx.selectedKey.value === props.node.key);
+    const isRoving = vue.computed(() => ctx.rovingKey.value === props.node.key);
+    const rowStyle = vue.computed(() => ({
+      paddingLeft: `${props.level * ctx.indent.value}px`
+    }));
+    function onArrowClick(event) {
+      event.stopPropagation();
+      if (hasChildren.value)
+        ctx.toggleExpand(props.node);
+    }
+    function onRowClick() {
+      ctx.selectNode(props.node);
+    }
+    const __returned__ = { props, ctx, RenderLabel, expanded, hasChildren, selected, isRoving, rowStyle, onArrowClick, onRowClick, get QmIcon() {
+      return icon.Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	class: "qm-tree__node",
+	role: "none"
+};
+const _hoisted_2 = [
+	"data-qm-tree-key",
+	"tabindex",
+	"aria-expanded",
+	"aria-selected",
+	"aria-disabled"
+];
+const _hoisted_3 = { class: "qm-tree__content" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_QmTreeItem = vue.resolveComponent("QmTreeItem");
+	return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createElementVNode("div", {
+		class: vue.normalizeClass(["qm-tree__row", {
+			"qm-tree__row--selected": $setup.selected,
+			"qm-tree__row--disabled": $props.node.disabled
+		}]),
+		style: vue.normalizeStyle($setup.rowStyle),
+		role: "treeitem",
+		"data-qm-tree-key": String($props.node.key),
+		tabindex: $setup.isRoving ? 0 : -1,
+		"aria-expanded": $setup.hasChildren ? $setup.expanded : undefined,
+		"aria-selected": $setup.selected,
+		"aria-disabled": $props.node.disabled || undefined,
+		onClick: $setup.onRowClick
+	}, [vue.createElementVNode(
+		"span",
+		{
+			class: vue.normalizeClass(["qm-tree__arrow", {
+				"qm-tree__arrow--expanded": $setup.expanded,
+				"qm-tree__arrow--leaf": !$setup.hasChildren
+			}]),
+			"aria-hidden": "true",
+			onClick: $setup.onArrowClick
+		},
+		[vue.createVNode($setup["QmIcon"], {
+			name: "chevron-right",
+			class: "qm-tree__arrow-icon"
+		})],
+		2
+		/* CLASS */
+	), vue.createElementVNode("div", _hoisted_3, [$setup.ctx.hasCustomLabel.value ? (vue.openBlock(), vue.createBlock($setup["RenderLabel"], {
+		key: 0,
+		node: $props.node
+	}, null, 8, ["node"])) : (vue.openBlock(), vue.createElementBlock(
+		vue.Fragment,
+		{ key: 1 },
+		[vue.createTextVNode(
+			vue.toDisplayString($props.node.label),
+			1
+			/* TEXT */
+		)],
+		64
+		/* STABLE_FRAGMENT */
+	))])], 14, _hoisted_2), $setup.expanded && $setup.hasChildren ? (vue.openBlock(true), vue.createElementBlock(
+		vue.Fragment,
+		{ key: 0 },
+		vue.renderList($props.node.children, (child) => {
+			return vue.openBlock(), vue.createBlock(_component_QmTreeItem, {
+				key: child.key,
+				node: child,
+				level: $props.level + 1
+			}, null, 8, ["node", "level"]);
+		}),
+		128
+		/* KEYED_FRAGMENT */
+	)) : vue.createCommentVNode("v-if", true)]);
+}
+const QmTreeItem = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tree\\tree-item.vue"]]);
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmTree" },
+  __name: "tree",
+  props: treeProps,
+  emits: ["update:modelValue", "nodeClick", "expandChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    const expandedKeys = vue.ref(/* @__PURE__ */ new Set());
+    const hasCustomLabel = vue.computed(() => Boolean(slots.default));
+    const innerSelectedKey = vue.ref(props.defaultSelectedKey ?? null);
+    const effectiveSelectedKey = vue.computed(
+      () => props.modelValue ?? innerSelectedKey.value
+    );
+    vue.watch(
+      () => props.modelValue,
+      (v) => {
+        if (v !== void 0 && v !== null)
+          innerSelectedKey.value = v;
+      }
+    );
+    function selectNode(node) {
+      if (node.disabled)
+        return;
+      innerSelectedKey.value = node.key;
+      emit("update:modelValue", node.key);
+      emit("nodeClick", node);
+    }
+    function collectAllKeys(nodes, acc) {
+      for (const node of nodes) {
+        if (node.children?.length) {
+          acc.add(node.key);
+          collectAllKeys(node.children, acc);
+        }
+      }
+      return acc;
+    }
+    function initExpandedKeys() {
+      if (props.expandAll)
+        return collectAllKeys(props.data, /* @__PURE__ */ new Set());
+      return new Set(props.defaultExpandedKeys);
+    }
+    vue.watch(
+      () => [props.defaultExpandedKeys, props.expandAll],
+      () => {
+        expandedKeys.value = initExpandedKeys();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props.data,
+      () => {
+        if (props.expandAll) {
+          expandedKeys.value = collectAllKeys(props.data, /* @__PURE__ */ new Set());
+          return;
+        }
+        const existing = /* @__PURE__ */ new Set();
+        collectAllKeys(props.data, existing);
+        const next = new Set([...expandedKeys.value].filter((k) => existing.has(k)));
+        expandedKeys.value = next;
+      }
+    );
+    function isExpanded(node) {
+      return expandedKeys.value.has(node.key);
+    }
+    function toggleExpand(node) {
+      if (!node.children?.length)
+        return;
+      const next = new Set(expandedKeys.value);
+      const expanded = !next.has(node.key);
+      if (expanded)
+        next.add(node.key);
+      else next.delete(node.key);
+      expandedKeys.value = next;
+      emit("expandChange", node, expanded);
+    }
+    const flatNodes = vue.computed(() => {
+      const result = [];
+      const walk = (nodes, parentKey) => {
+        for (const node of nodes) {
+          result.push({ node, parentKey });
+          if (node.children?.length && expandedKeys.value.has(node.key))
+            walk(node.children, node.key);
+        }
+      };
+      walk(props.data, null);
+      return result;
+    });
+    const focusedKey = vue.ref(null);
+    const rovingKey = vue.computed(() => {
+      if (focusedKey.value !== null && flatNodes.value.some((f) => f.node.key === focusedKey.value))
+        return focusedKey.value;
+      if (effectiveSelectedKey.value !== null && flatNodes.value.some((f) => f.node.key === effectiveSelectedKey.value)) {
+        return effectiveSelectedKey.value;
+      }
+      return flatNodes.value[0]?.node.key ?? null;
+    });
+    function findIndex(key) {
+      if (key === null)
+        return -1;
+      return flatNodes.value.findIndex((f) => f.node.key === key);
+    }
+    function currentFocusedIndex() {
+      const active = document.activeElement;
+      const activeKey = active?.dataset.qmTreeKey;
+      if (activeKey !== void 0 && activeKey !== "") {
+        const i = flatNodes.value.findIndex((f) => String(f.node.key) === activeKey);
+        if (i >= 0)
+          return i;
+      }
+      return findIndex(focusedKey.value ?? effectiveSelectedKey.value);
+    }
+    function focusKey(key) {
+      if (key === null)
+        return;
+      focusedKey.value = key;
+      void vue.nextTick(() => {
+        const el = document.querySelector(`[data-qm-tree-key="${cssEscape(String(key))}"]`);
+        el?.focus();
+      });
+    }
+    function cssEscape(value) {
+      if (typeof CSS !== "undefined" && typeof CSS.escape === "function")
+        return CSS.escape(value);
+      return value.replace(/["\\]/g, "\\$&");
+    }
+    function onTreeKeydown(event) {
+      const key = event.key;
+      const currentIndex = currentFocusedIndex();
+      const current = currentIndex >= 0 ? flatNodes.value[currentIndex] : void 0;
+      switch (key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          const next = flatNodes.value[currentIndex + 1];
+          if (next)
+            focusKey(next.node.key);
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          const prev = flatNodes.value[currentIndex - 1];
+          if (prev)
+            focusKey(prev.node.key);
+          break;
+        }
+        case "ArrowRight": {
+          if (!current)
+            return;
+          event.preventDefault();
+          if (current.node.children?.length && !isExpanded(current.node)) {
+            toggleExpand(current.node);
+            void vue.nextTick(() => {
+              const child = flatNodes.value[currentIndex + 1];
+              if (child)
+                focusKey(child.node.key);
+            });
+          } else if (current.node.children?.length) {
+            const child = flatNodes.value[currentIndex + 1];
+            if (child)
+              focusKey(child.node.key);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          if (!current)
+            return;
+          event.preventDefault();
+          if (current.node.children?.length && isExpanded(current.node)) {
+            toggleExpand(current.node);
+          } else if (current.parentKey !== null) {
+            focusKey(current.parentKey);
+          }
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          const first = flatNodes.value[0];
+          if (first)
+            focusKey(first.node.key);
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          const last = flatNodes.value[flatNodes.value.length - 1];
+          if (last)
+            focusKey(last.node.key);
+          break;
+        }
+        case "Enter":
+        case " ":
+        case "Spacebar": {
+          if (!current || current.node.disabled)
+            return;
+          event.preventDefault();
+          selectNode(current.node);
+          focusedKey.value = current.node.key;
+          break;
+        }
+      }
+    }
+    vue.provide(treeContextKey, {
+      indent: vue.computed(() => props.indent),
+      selectedKey: effectiveSelectedKey,
+      rovingKey,
+      focusKey,
+      isExpanded,
+      toggleExpand,
+      selectNode,
+      hasCustomLabel,
+      renderLabel: (node) => slots.default?.({ node }) ?? null
+    });
+    const __returned__ = { props, emit, slots, expandedKeys, hasCustomLabel, innerSelectedKey, effectiveSelectedKey, selectNode, collectAllKeys, initExpandedKeys, isExpanded, toggleExpand, flatNodes, focusedKey, rovingKey, findIndex, currentFocusedIndex, focusKey, cssEscape, onTreeKeydown, QmTreeItem };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		"div",
+		{
+			class: "qm-tree",
+			"data-qm": "tree",
+			role: "tree",
+			onKeydown: $setup.onTreeKeydown
+		},
+		[(vue.openBlock(true), vue.createElementBlock(
+			vue.Fragment,
+			null,
+			vue.renderList(_ctx.data, (node) => {
+				return vue.openBlock(), vue.createBlock($setup["QmTreeItem"], {
+					key: node.key,
+					node,
+					level: 0
+				}, null, 8, ["node"]);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		))],
+		32
+		/* NEED_HYDRATION */
+	);
+}
+const Tree = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tree\\tree.vue"]]);
+
+exports.Tree = Tree;
+exports.treeContextKey = treeContextKey;
+exports.treeProps = treeProps;

package/es/shared/components.C9WJVmII.mjs

@@ -0,0 +1,71 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, toDisplayString, createCommentVNode } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const badgeProps = {
+  /** 显示值：number 参与 max 封顶；string 原样展示 */
+  value: { type: [String, Number], default: "" },
+  /** 最大值封顶：number 且 value > max 时显示 max+ */
+  max: { type: Number, default: 99 },
+  /** 圆点模式：不显示数字 */
+  dot: { type: Boolean, default: false },
+  /** 隐藏徽标 */
+  hidden: { type: Boolean, default: false },
+  /** 语义类型：primary / success / warning / error */
+  type: { type: String, default: "error" }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmBadge" },
+  __name: "badge",
+  props: badgeProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const visible = computed(() => {
+      if (props.hidden)
+        return false;
+      if (props.dot)
+        return true;
+      return props.value !== "" && props.value !== null && props.value !== void 0;
+    });
+    const displayValue = computed(() => {
+      if (props.dot)
+        return "";
+      if (typeof props.value === "number" && props.max != null && props.value > props.max)
+        return `${props.max}+`;
+      return String(props.value);
+    });
+    const typeClass = computed(() => `qm-badge--${props.type}`);
+    const __returned__ = { props, visible, displayValue, typeClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"span",
+		{
+			class: normalizeClass(["qm-badge", [$setup.typeClass, {
+				"qm-badge--fixed": _ctx.$slots.default,
+				"qm-badge--dot": _ctx.dot
+			}]]),
+			"data-qm": "badge"
+		},
+		[renderSlot(_ctx.$slots, "default"), $setup.visible ? (openBlock(), createElementBlock(
+			"sup",
+			{
+				key: 0,
+				class: normalizeClass(["qm-badge__content", { "qm-badge__content--dot": _ctx.dot }])
+			},
+			toDisplayString($setup.displayValue),
+			3
+			/* TEXT, CLASS */
+		)) : createCommentVNode("v-if", true)],
+		2
+		/* CLASS */
+	);
+}
+const Badge = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\badge\\badge.vue"]]);
+
+export { Badge as B, badgeProps as b };

package/es/shared/components.CAVYcOKF.cjs

@@ -0,0 +1,132 @@
+'use strict';
+
+const vue = require('vue');
+
+let bodyLockCount = 0;
+let originalOverflow = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined")
+    return;
+  if (bodyLockCount === 0)
+    originalOverflow = document.body.style.overflow;
+  bodyLockCount++;
+  document.body.style.overflow = "hidden";
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || bodyLockCount === 0)
+    return;
+  bodyLockCount--;
+  if (bodyLockCount === 0)
+    document.body.style.overflow = originalOverflow;
+}
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function getFocusable(container) {
+  return [...container.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+    (el) => el.getAttribute("aria-hidden") !== "true" && !el.hasAttribute("disabled") && el.style.display !== "none" && el.style.visibility !== "hidden"
+  );
+}
+function createFocusTrap(container, getTrigger) {
+  let trigger = null;
+  function focusable() {
+    const el = container();
+    return el ? getFocusable(el) : [];
+  }
+  function trap(event) {
+    if (event.key !== "Tab")
+      return;
+    const list = focusable();
+    if (list.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = list[0];
+    const last = list[list.length - 1];
+    const active = document.activeElement;
+    const inside = active !== null && container()?.contains(active) === true;
+    if (event.shiftKey) {
+      if (active === first || !inside) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else if (active === last || !inside) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  function focusFirst() {
+    const list = focusable();
+    if (list.length > 0)
+      list[0].focus();
+    else container()?.focus();
+  }
+  function record() {
+    trigger = getTrigger();
+  }
+  function restore() {
+    if (trigger && trigger.isConnected)
+      trigger.focus();
+    trigger = null;
+  }
+  return { trap, focusFirst, record, restore };
+}
+function useDialog(options) {
+  const { modelValue, closeOnEsc, panelRef, emitClose, getTrigger } = options;
+  let leaving = false;
+  const trap = createFocusTrap(
+    () => panelRef.value,
+    getTrigger ?? (() => document.activeElement)
+  );
+  function open() {
+    vue.nextTick(() => trap.focusFirst());
+  }
+  function close(reason) {
+    if (leaving)
+      return;
+    leaving = true;
+    emitClose(reason);
+    vue.nextTick(() => {
+      if (modelValue.value)
+        leaving = false;
+    });
+  }
+  function handleKeydown(event) {
+    if (!modelValue.value)
+      return;
+    event.stopPropagation();
+    if (event.key === "Escape" && closeOnEsc.value) {
+      event.preventDefault();
+      close("esc");
+    } else {
+      trap.trap(event);
+    }
+  }
+  function dispose() {
+    unlockBodyScroll();
+    leaving = false;
+  }
+  function clearLeaving() {
+    leaving = false;
+  }
+  vue.watch(modelValue, (val) => {
+    if (val) {
+      leaving = false;
+      lockBodyScroll();
+      trap.record();
+      open();
+    }
+  });
+  return { open, close, handleKeydown, trap, dispose, clearLeaving };
+}
+
+exports.createFocusTrap = createFocusTrap;
+exports.getFocusable = getFocusable;
+exports.lockBodyScroll = lockBodyScroll;
+exports.unlockBodyScroll = unlockBodyScroll;
+exports.useDialog = useDialog;