@astryx-vue/core 0.2.5 → 0.3.0

package/dist/{TreeList-C9xvMpJZ.js → TreeList-BUz-KZJd.js}

@@ -1,7 +1,8 @@
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { n as useLinkComponent } from "./context-C_peZbXf.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { t as _sfc_main$2 } from "./Badge-CjDQPF5g.js";
 import { s as isIconGlyph, t as _sfc_main$3 } from "./Icon-bteSId7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, renderSlot, resolveComponent, toDisplayString, unref, useId, vShow, withCtx, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, useId, vShow, withCtx, withDirectives } from "vue";
 import "../styles/tree-list.css";
 //#region src/TreeList/TreeListItem.vue
 const _hoisted_1$1 = [
@@ -38,36 +39,35 @@ const _hoisted_7 = {
 	key: 1,
 	class: "astryx-tree-list__icon"
 };
-const _hoisted_8 = ["href", "target"];
-const _hoisted_9 = { class: "astryx-tree-list__label" };
-const _hoisted_10 = {
+const _hoisted_8 = { class: "astryx-tree-list__label" };
+const _hoisted_9 = {
 	key: 0,
 	class: "astryx-tree-list__description"
 };
-const _hoisted_11 = ["disabled"];
-const _hoisted_12 = { class: "astryx-tree-list__label" };
-const _hoisted_13 = {
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = { class: "astryx-tree-list__label" };
+const _hoisted_12 = {
 	key: 0,
 	class: "astryx-tree-list__description"
 };
-const _hoisted_14 = {
+const _hoisted_13 = {
 	key: 4,
 	class: "astryx-tree-list__main"
 };
-const _hoisted_15 = { class: "astryx-tree-list__label" };
-const _hoisted_16 = {
+const _hoisted_14 = { class: "astryx-tree-list__label" };
+const _hoisted_15 = {
 	key: 0,
 	class: "astryx-tree-list__description"
 };
-const _hoisted_17 = {
+const _hoisted_16 = {
 	key: 5,
 	class: "astryx-tree-list__end"
 };
-const _hoisted_18 = {
+const _hoisted_17 = {
 	key: 2,
 	class: "astryx-tree-list__icon"
 };
-const _hoisted_19 = {
+const _hoisted_18 = {
 	key: 1,
 	class: "astryx-tree-list__group",
 	role: "group"
@@ -94,6 +94,9 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const messages = useAstryxMessages();
+		const linkComponent = useLinkComponent();
+		/** 有链接时用的根组件，没有 provider 时还是 `<a>`。 */
+		const linkRoot = computed(() => linkComponent.value == null ? "a" : toRaw(linkComponent.value));
 		const hasChildren = computed(() => (props.item.children?.length ?? 0) > 0);
 		const isExpanded = computed(() => hasChildren.value && props.expanded[props.item.id] === true);
 		const reservesChevron = computed(() => !hasChildren.value && props.hasExpandableItems);
@@ -179,33 +182,41 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						class: normalizeClass(__props.item.icon),
 						"aria-hidden": "true"
 					}, null, 2)]))])) : createCommentVNode("v-if", true),
-					__props.item.href ? (openBlock(), createElementBlock("a", {
+					__props.item.href ? (openBlock(), createBlock(resolveDynamicComponent(linkRoot.value), {
 						key: 2,
 						class: "astryx-tree-list__action",
 						href: __props.item.href,
+						to: linkRoot.value === "a" ? void 0 : __props.item.href,
 						target: __props.item.target,
 						tabindex: "-1"
-					}, [createElementVNode("span", _hoisted_9, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_8)) : __props.item.onClick ? (openBlock(), createElementBlock("button", {
+					}, {
+						default: withCtx(() => [createElementVNode("span", _hoisted_8, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)]),
+						_: 1
+					}, 8, [
+						"href",
+						"to",
+						"target"
+					])) : __props.item.onClick ? (openBlock(), createElementBlock("button", {
 						key: 3,
 						type: "button",
 						class: "astryx-tree-list__action",
 						disabled: __props.item.isDisabled,
 						tabindex: "-1",
 						onClick: _cache[0] || (_cache[0] = ($event) => __props.item.onClick($event))
-					}, [createElementVNode("span", _hoisted_12, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_11)) : (openBlock(), createElementBlock("span", _hoisted_14, [createElementVNode("span", _hoisted_15, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)])),
-					__props.item.badge || __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_17, [__props.item.badge ? (openBlock(), createBlock(_sfc_main$2, { key: 0 }, {
+					}, [createElementVNode("span", _hoisted_11, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_10)) : (openBlock(), createElementBlock("span", _hoisted_13, [createElementVNode("span", _hoisted_14, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)])),
+					__props.item.badge || __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_16, [__props.item.badge ? (openBlock(), createBlock(_sfc_main$2, { key: 0 }, {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.item.badge), 1)]),
 						_: 1
 					})) : __props.item.endIcon && unref(isIconGlyph)(__props.item.endIcon) ? (openBlock(), createBlock(_sfc_main$3, {
 						key: 1,
 						icon: __props.item.endIcon,
 						size: "sm"
-					}, null, 8, ["icon"])) : __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("i", {
+					}, null, 8, ["icon"])) : __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_17, [createElementVNode("i", {
 						class: normalizeClass(__props.item.endIcon),
 						"aria-hidden": "true"
 					}, null, 2)])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 				], 12, _hoisted_4)]),
-				hasChildren.value && isExpanded.value ? (openBlock(), createElementBlock("ul", _hoisted_19, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child, index) => {
+				hasChildren.value && isExpanded.value ? (openBlock(), createElementBlock("ul", _hoisted_18, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child, index) => {
 					return openBlock(), createBlock(_component_TreeListItem, {
 						key: child.id,
 						item: child,
@@ -240,6 +251,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/TreeList/useTreeFocus.ts
+const DEFAULT_ITEM_SELECTOR = "[role=\"treeitem\"]";
+const TYPEAHEAD_RESET_MS = 500;
 const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 	"ArrowDown",
 	"ArrowUp",
@@ -253,26 +266,48 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 function isRtl(element) {
 	return element != null && getComputedStyle(element).direction === "rtl";
 }
+/**
+* 树形控件的方向键焦点：上下 Home End 在可见节点间线性走（跳过停用项），
+* 左右走树的语义（展开收起、进第一个子节点、回父节点），Enter 和空格激活，
+* 敲字符走 typeahead。方向键横过来时看容器的书写方向，RTL 里左右对调。
+*/
 function useTreeFocus(options) {
 	const treeRef = ref(null);
 	const typeahead = {
 		buffer: "",
 		timer: void 0
 	};
+	const hasRovingTabIndex = options.hasRovingTabIndex === true;
 	function items() {
 		const root = treeRef.value;
 		if (root == null) return [];
-		return [...root.querySelectorAll("[role=\"treeitem\"]")];
+		return [...root.querySelectorAll(options.itemSelector ?? DEFAULT_ITEM_SELECTOR)];
 	}
 	function disabled(item) {
+		if (options.isItemDisabled != null) return options.isItemDisabled(item);
 		return item.dataset.treeDisabled === "true" || item.getAttribute("aria-disabled") === "true";
 	}
 	function levelOf(item) {
+		if (options.getLevel != null) return options.getLevel(item);
 		return Number(item.getAttribute("aria-level") ?? "1");
 	}
+	/** 树节点的 id：优先 `data-tree-id`，退回元素自己的 `id`。 */
+	function idOf(item) {
+		const id = item.dataset.treeId ?? item.id;
+		return id == null || id === "" ? void 0 : id;
+	}
+	function syncTabStops() {
+		const list = items();
+		const active = document.activeElement;
+		const selector = options.itemSelector ?? DEFAULT_ITEM_SELECTOR;
+		const current = active instanceof Element ? active.closest(selector) : null;
+		const owned = current != null && list.includes(current) ? current : list.find((item) => item.tabIndex === 0) ?? list.find((item) => !disabled(item));
+		for (const item of list) item.tabIndex = item === owned ? 0 : -1;
+	}
 	function focusItem(item) {
-		for (const candidate of items()) candidate.tabIndex = candidate === item ? 0 : -1;
+		if (hasRovingTabIndex) for (const candidate of items()) candidate.tabIndex = candidate === item ? 0 : -1;
 		item.focus();
+		options.onActiveChange?.(idOf(item));
 	}
 	function focusEnabledFrom(list, start, step) {
 		for (let index = start; index >= 0 && index < list.length; index += step) {
@@ -283,27 +318,21 @@ function useTreeFocus(options) {
 			}
 		}
 	}
-	function syncTabStops() {
-		const list = items();
-		const active = document.activeElement;
-		const current = active instanceof Element ? active.closest("[role=\"treeitem\"]") : null;
-		const owned = current != null && list.includes(current) ? current : list.find((item) => item.tabIndex === 0) ?? list.find((item) => !disabled(item));
-		for (const item of list) item.tabIndex = item === owned ? 0 : -1;
-	}
-	onMounted(syncTabStops);
+	if (hasRovingTabIndex) onMounted(syncTabStops);
 	function handleKeyDown(event) {
 		const list = items();
 		if (list.length === 0) return;
 		const active = document.activeElement;
-		const activeItem = active instanceof Element ? active.closest("[role=\"treeitem\"]") : null;
+		const selector = options.itemSelector ?? DEFAULT_ITEM_SELECTOR;
+		const activeItem = active instanceof Element ? active.closest(selector) : null;
 		const currentIndex = list.findIndex((item) => item === activeItem);
 		const current = currentIndex >= 0 ? list[currentIndex] : void 0;
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && !NAVIGATION_KEYS.has(event.key)) {
+		if ((options.typeahead ?? true) && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && !NAVIGATION_KEYS.has(event.key)) {
 			typeahead.buffer += event.key.toLowerCase();
 			clearTimeout(typeahead.timer);
 			typeahead.timer = setTimeout(() => {
 				typeahead.buffer = "";
-			}, 500);
+			}, TYPEAHEAD_RESET_MS);
 			const query = typeahead.buffer;
 			const match = [...list.slice(currentIndex + 1), ...list.slice(0, currentIndex + 1)].find((item) => !disabled(item) && (item.textContent ?? "").trim().toLowerCase().startsWith(query));
 			if (match != null) {
@@ -328,8 +357,10 @@ function useTreeFocus(options) {
 				if (current == null) break;
 				event.preventDefault();
 				const expanded = current.getAttribute("aria-expanded");
-				if (expanded === "false") options.onToggleExpand?.(current.dataset.treeId ?? "");
-				else if (expanded === "true") {
+				if (expanded === "false") {
+					const id = idOf(current);
+					if (id != null) options.onToggleExpand?.(id);
+				} else if (expanded === "true") {
 					const next = list[currentIndex + 1];
 					if (next != null && levelOf(next) > levelOf(current)) focusItem(next);
 				}
@@ -338,8 +369,10 @@ function useTreeFocus(options) {
 			case "ArrowLeft":
 				if (current == null) break;
 				event.preventDefault();
-				if (current.getAttribute("aria-expanded") === "true") options.onToggleExpand?.(current.dataset.treeId ?? "");
-				else {
+				if (current.getAttribute("aria-expanded") === "true") {
+					const id = idOf(current);
+					if (id != null) options.onToggleExpand?.(id);
+				} else {
 					const currentLevel = levelOf(current);
 					for (let index = currentIndex - 1; index >= 0; index -= 1) {
 						const candidate = list[index];
@@ -362,16 +395,32 @@ function useTreeFocus(options) {
 			case " ":
 				if (current == null || disabled(current)) break;
 				event.preventDefault();
-				if (!(options.onActivate?.(current) === true) && current.getAttribute("aria-expanded") != null) options.onToggleExpand?.(current.dataset.treeId ?? "");
+				if (!(options.onActivate?.(current, idOf(current)) === true) && current.getAttribute("aria-expanded") != null) {
+					const id = idOf(current);
+					if (id != null) options.onToggleExpand?.(id);
+				}
 		}
 	}
+	/** roving tabindex 打开时，点击或程序聚焦之后把停靠点对齐到当前项。 */
 	function handleFocus() {
+		if (!hasRovingTabIndex) return;
 		syncTabStops();
 	}
+	/** 聚焦第一个可用节点。 */
+	function focusFirst() {
+		focusEnabledFrom(items(), 0, 1);
+	}
+	/** 聚焦最后一个可用节点。 */
+	function focusLast() {
+		const list = items();
+		focusEnabledFrom(list, list.length - 1, -1);
+	}
 	return {
 		treeRef,
-		handleKeyDown,
-		handleFocus
+		focusFirst,
+		focusLast,
+		handleFocus,
+		handleKeyDown
 	};
 }
 //#endregion
@@ -440,6 +489,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		const tabbableId = computed(() => initialTabbable(props.items));
 		const { treeRef, handleKeyDown, handleFocus } = useTreeFocus({
+			hasRovingTabIndex: true,
 			onToggleExpand: toggle,
 			onActivate: (current) => {
 				const candidates = current.querySelectorAll("a[href], button:not([data-tree-toggle])");

package/dist/Typeahead/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TypeaheadEmits, c as TypeaheadSize, i as BaseTypeaheadProps, l as TypeaheadSlots, n as _default$1, o as TypeaheadItemProps, r as _default, s as TypeaheadProps, t as _default$2, u as TypeaheadStatus } from "../index-DxR1FChm.js";
+import { a as TypeaheadEmits, c as TypeaheadSize, i as BaseTypeaheadProps, l as TypeaheadSlots, n as _default$1, o as TypeaheadItemProps, r as _default, s as TypeaheadProps, t as _default$2, u as TypeaheadStatus } from "../index-Bu8NA2SD.js";
 export { _default as BaseTypeahead, type BaseTypeaheadProps, _default$1 as Typeahead, type TypeaheadEmits, _default$2 as TypeaheadItem, type TypeaheadItemProps, type TypeaheadProps, type TypeaheadSize, type TypeaheadSlots, type TypeaheadStatus };

package/dist/Typeahead/index.js

@@ -1,3 +1,3 @@
-import { n as _sfc_main$2 } from "../TypeaheadMenu-BEObzonz.js";
-import { n as _sfc_main, t as _sfc_main$1 } from "../Typeahead-_V11btpv.js";
+import { n as _sfc_main$2 } from "../TypeaheadMenu-DBW6rHeO.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../Typeahead-JP9RT87x.js";
 export { _sfc_main as BaseTypeahead, _sfc_main$1 as Typeahead, _sfc_main$2 as TypeaheadItem };