@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.DG3K9DCE.d.ts

@@ -0,0 +1,439 @@
+import { PropType, InjectionKey, Ref, VNode, defineComponent, inject, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, createVNode, createBlock, Fragment, createTextVNode, toDisplayString, renderList, createCommentVNode, useSlots, ref, watch, provide, nextTick } from 'vue';
+import { a as Icon } from './components.C6sLxXPo.js';
+import { _ as _export_sfc } from './components.OJRSZE6i.js';
+
+/**
+ * QmTree 组件类型定义（03-数据展示）
+ * 树：层级数据 / 展开折叠 / 选中 / 节点插槽
+ */
+
+/** 树节点数据结构 */
+interface TreeNode {
+    /** 节点唯一标识（选中/展开/收起依据） */
+    key: string | number;
+    /** 节点展示文案（默认插槽可自定义） */
+    label: string;
+    /** 子节点（缺省为叶子节点） */
+    children?: TreeNode[];
+    /** 禁用（不可选中，箭头仍可展开） */
+    disabled?: boolean;
+}
+declare const treeProps: {
+    /** 树节点数据 */
+    readonly data: {
+        readonly type: PropType<TreeNode[]>;
+        readonly default: () => never[];
+    };
+    /** 选中节点 key（v-model，null 表示无选中；缺省走内部默认选中） */
+    readonly modelValue: {
+        readonly type: PropType<string | number | null>;
+        readonly default: null;
+    };
+    /** 非受控模式的初始选中节点 key（未绑定 v-model 时作为默认选中） */
+    readonly defaultSelectedKey: {
+        readonly type: PropType<string | number | null>;
+        readonly default: null;
+    };
+    /** 默认展开节点 key 列表 */
+    readonly defaultExpandedKeys: {
+        readonly type: PropType<Array<string | number>>;
+        readonly default: () => never[];
+    };
+    /** 默认展开全部（优先于 defaultExpandedKeys） */
+    readonly expandAll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 层级缩进（px） */
+    readonly indent: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+};
+/** emits 声明 */
+interface TreeEmits {
+    'update:modelValue': [key: string | number | null];
+    /** 节点点击（选中时触发；disabled 节点不触发） */
+    'nodeClick': [node: TreeNode];
+    /** 展开状态变化 */
+    'expandChange': [node: TreeNode, expanded: boolean];
+}
+/** QmTree 向内部 QmTreeItem 提供的上下文 */
+interface TreeContext {
+    /** 层级缩进（px） */
+    indent: Ref<number>;
+    /** 当前选中 key */
+    selectedKey: Ref<string | number | null>;
+    /** roving tabindex 激活项 key（tabindex=0 的节点） */
+    rovingKey: Ref<string | number | null>;
+    /** 设置聚焦节点（更新内部聚焦态并落焦到 DOM） */
+    focusKey: (key: string | number | null) => void;
+    /** 是否展开 */
+    isExpanded: (node: TreeNode) => boolean;
+    /** 展开/收起切换 */
+    toggleExpand: (node: TreeNode) => void;
+    /** 选中节点 */
+    selectNode: (node: TreeNode) => void;
+    /** 是否有自定义节点渲染（决定是否调用 renderLabel） */
+    hasCustomLabel: Ref<boolean>;
+    /** 自定义节点渲染函数（由 QmTree 默认插槽生成，避免递归组件插槽循环类型） */
+    renderLabel: (node: TreeNode) => VNode[] | string | null;
+}
+declare const treeContextKey: InjectionKey<TreeContext>;
+
+var _sfc_main$1 = /* @__PURE__ */ 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 = inject(treeContextKey);
+    const RenderLabel = (p) => ctx.renderLabel(p.node);
+    const expanded = computed(() => ctx.isExpanded(props.node));
+    const hasChildren = computed(() => Boolean(props.node.children?.length));
+    const selected = computed(() => ctx.selectedKey.value === props.node.key);
+    const isRoving = computed(() => ctx.rovingKey.value === props.node.key);
+    const rowStyle = 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;
+    } };
+    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 = resolveComponent("QmTreeItem");
+	return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+		class: normalizeClass(["qm-tree__row", {
+			"qm-tree__row--selected": $setup.selected,
+			"qm-tree__row--disabled": $props.node.disabled
+		}]),
+		style: 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
+	}, [createElementVNode(
+		"span",
+		{
+			class: normalizeClass(["qm-tree__arrow", {
+				"qm-tree__arrow--expanded": $setup.expanded,
+				"qm-tree__arrow--leaf": !$setup.hasChildren
+			}]),
+			"aria-hidden": "true",
+			onClick: $setup.onArrowClick
+		},
+		[createVNode($setup["QmIcon"], {
+			name: "chevron-right",
+			class: "qm-tree__arrow-icon"
+		})],
+		2
+		/* CLASS */
+	), createElementVNode("div", _hoisted_3, [$setup.ctx.hasCustomLabel.value ? (openBlock(), createBlock($setup["RenderLabel"], {
+		key: 0,
+		node: $props.node
+	}, null, 8, ["node"])) : (openBlock(), createElementBlock(
+		Fragment,
+		{ key: 1 },
+		[createTextVNode(
+			toDisplayString($props.node.label),
+			1
+			/* TEXT */
+		)],
+		64
+		/* STABLE_FRAGMENT */
+	))])], 14, _hoisted_2), $setup.expanded && $setup.hasChildren ? (openBlock(true), createElementBlock(
+		Fragment,
+		{ key: 0 },
+		renderList($props.node.children, (child) => {
+			return openBlock(), createBlock(_component_QmTreeItem, {
+				key: child.key,
+				node: child,
+				level: $props.level + 1
+			}, null, 8, ["node", "level"]);
+		}),
+		128
+		/* KEYED_FRAGMENT */
+	)) : createCommentVNode("v-if", true)]);
+}
+var QmTreeItem = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tree\\tree-item.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ 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 = useSlots();
+    const expandedKeys = ref(/* @__PURE__ */ new Set());
+    const hasCustomLabel = computed(() => Boolean(slots.default));
+    const innerSelectedKey = ref(props.defaultSelectedKey ?? null);
+    const effectiveSelectedKey = computed(
+      () => props.modelValue ?? innerSelectedKey.value
+    );
+    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);
+    }
+    watch(
+      () => [props.defaultExpandedKeys, props.expandAll],
+      () => {
+        expandedKeys.value = initExpandedKeys();
+      },
+      { immediate: true }
+    );
+    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 = 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 = ref(null);
+    const rovingKey = 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 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 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;
+        }
+      }
+    }
+    provide(treeContextKey, {
+      indent: 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 openBlock(), createElementBlock(
+		"div",
+		{
+			class: "qm-tree",
+			"data-qm": "tree",
+			role: "tree",
+			onKeydown: $setup.onTreeKeydown
+		},
+		[(openBlock(true), createElementBlock(
+			Fragment,
+			null,
+			renderList(_ctx.data, (node) => {
+				return openBlock(), createBlock($setup["QmTreeItem"], {
+					key: node.key,
+					node,
+					level: 0
+				}, null, 8, ["node"]);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		))],
+		32
+		/* NEED_HYDRATION */
+	);
+}
+var Tree = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tree\\tree.vue"]]);
+
+export { Tree as T, treeProps as d, treeContextKey as t };
+export type { TreeContext as a, TreeEmits as b, TreeNode as c };