@hina-ui/vue 1.7.9 → 1.7.10

package/dist/index.js

@@ -3540,7 +3540,7 @@ var _hoisted_1$122 = [
 	"onLoad"
 ];
 var _hoisted_2$70 = ["src"];
-var _hoisted_3$37 = [
+var _hoisted_3$38 = [
 	"src",
 	"alt",
 	"onLoad"
@@ -3636,7 +3636,7 @@ var LightboxStrip_default = /* @__PURE__ */ defineComponent({
 							draggable: "false",
 							class: "block size-full object-contain",
 							onLoad: ($event) => emit("learn", slide.item.id, $event.target)
-						}, null, 40, _hoisted_3$37)]),
+						}, null, 40, _hoisted_3$38)]),
 						_: 2
 					}, 1032, [
 						"style",
@@ -6340,9 +6340,9 @@ function useScrollFocus(host, viewport, options) {
 //#region src/components/scroll-area/ScrollArea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$121 = ["dir"];
 var _hoisted_2$69 = ["data-visible"];
-var _hoisted_3$36 = ["data-visible"];
-var _hoisted_4$30 = ["data-visible"];
-var _hoisted_5$23 = ["data-visible"];
+var _hoisted_3$37 = ["data-visible"];
+var _hoisted_4$31 = ["data-visible"];
+var _hoisted_5$24 = ["data-visible"];
 //#endregion
 //#region src/components/scroll-area/ScrollArea.vue
 var ScrollArea_default = /* @__PURE__ */ defineComponent({
@@ -6437,21 +6437,21 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 					"data-side": "x-end",
 					"data-visible": unref(showXEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_3$36)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_3$37)) : createCommentVNode("", true),
 				props.direction !== "horizontal" ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					class: "hn-scroll-shadow",
 					"data-side": "y-start",
 					"data-visible": unref(showYStart) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_4$30)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_4$31)) : createCommentVNode("", true),
 				props.direction !== "horizontal" ? (openBlock(), createElementBlock("div", {
 					key: 3,
 					class: "hn-scroll-shadow",
 					"data-side": "y-end",
 					"data-visible": unref(showYEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_5$23)) : createCommentVNode("", true)
+				}, null, 8, _hoisted_5$24)) : createCommentVNode("", true)
 			], 64)) : createCommentVNode("", true)], 10, _hoisted_1$121);
 		};
 	}
@@ -6519,7 +6519,7 @@ var _hoisted_2$68 = [
 	"aria-current",
 	"onClick"
 ];
-var _hoisted_3$35 = ["src"];
+var _hoisted_3$36 = ["src"];
 //#endregion
 //#region src/components/lightbox/LightboxThumbs.vue
 var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
@@ -6572,7 +6572,7 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 							alt: "",
 							draggable: "false",
 							class: "relative -z-10 size-full object-cover"
-						}, null, 8, _hoisted_3$35),
+						}, null, 8, _hoisted_3$36),
 						at === props.index ? (openBlock(), createBlock(Highlight_default, {
 							key: 0,
 							id: unref(highlightId),
@@ -9199,9 +9199,9 @@ var _hoisted_1$114 = {
 	class: "hn-collapse"
 };
 var _hoisted_2$64 = { class: "hn-collapse-body" };
-var _hoisted_3$34 = ["role"];
-var _hoisted_4$29 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-var _hoisted_5$22 = {
+var _hoisted_3$35 = ["role"];
+var _hoisted_4$30 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
+var _hoisted_5$23 = {
 	key: 0,
 	class: "text-fg font-medium"
 };
@@ -9258,7 +9258,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(calloutIcon)({ tone: props.tone })),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_4$29, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$22, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+					createElementVNode("div", _hoisted_4$30, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$23, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
 					unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_6$15, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
 					props.closable ? (openBlock(), createBlock(CloseButton_default, {
 						key: 1,
@@ -9266,7 +9266,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: "-my-0.5 -me-1",
 						onClick: close
 					})) : createCommentVNode("", true)
-				], 10, _hoisted_3$34)])])) : createCommentVNode("", true)]),
+				], 10, _hoisted_3$35)])])) : createCommentVNode("", true)]),
 				_: 3
 			}, 16);
 		};
@@ -10979,6 +10979,7 @@ function choiceRows(items, query, contains) {
 			result.push({
 				key: `group:${groupIndex}`,
 				label: item.label,
+				source: item,
 				position: 0
 			});
 			for (const option of options) result.push({
@@ -11255,6 +11256,8 @@ var virtualListContent = tv({
 		horizontal: "flex-row"
 	} }
 });
+var virtualChoiceHeadings = tv({ base: "pointer-events-none absolute inset-0 z-1 p-[inherit]" });
+var virtualChoiceHeading = tv({ base: "pointer-events-auto absolute inset-x-0" });
 var virtualListItem = tv({
 	base: "flow-root min-w-0 shrink-0",
 	variants: { orientation: {
@@ -11267,6 +11270,9 @@ var virtualListStatus = tv({ base: "text-muted flex shrink-0 items-center justif
 //#region src/components/virtual-list/VirtualChoices.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$111 = ["data-index"];
 var _hoisted_2$62 = ["id"];
+var _hoisted_3$34 = ["id"];
+var _hoisted_4$29 = { class: "relative" };
+var _hoisted_5$22 = ["data-index"];
 //#endregion
 //#region src/components/virtual-list/VirtualChoices.vue
 var VirtualChoices_default = /* @__PURE__ */ defineComponent({
@@ -11286,6 +11292,9 @@ var VirtualChoices_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const t = useUiLocale();
 		const { area, body, rows, entries, bodyStyle, measure, itemAttrs, labelId } = useVirtualChoices(props);
+		const slots = useSlots();
+		const held = (index) => !!slots.group && !rows.value[index].option;
+		const origin = computed(() => entries.value[0] ? entries.value[0].start - parseFloat(bodyStyle.value.paddingBlockStart) : 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ScrollArea_default, {
 				ref_key: "area",
@@ -11293,7 +11302,7 @@ var VirtualChoices_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(props.class),
 				style: normalizeStyle({ maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight })
 			}, {
-				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(props.padded === false ? void 0 : "p-1") }, [createElementVNode("div", mergeProps({
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cn)(slots.group && "relative", props.padded !== false && "p-1") || void 0) }, [createElementVNode("div", mergeProps({
 					ref_key: "body",
 					ref: body
 				}, _ctx.$attrs, {
@@ -11304,23 +11313,42 @@ var VirtualChoices_default = /* @__PURE__ */ defineComponent({
 					return openBlock(), createElementBlock("div", {
 						key: entry.key,
 						ref_for: true,
-						ref: unref(measure),
+						ref: held(entry.index) ? void 0 : unref(measure),
 						"data-index": entry.index,
 						role: "presentation",
 						class: normalizeClass(unref(virtualListItem)({ orientation: "vertical" })),
-						style: normalizeStyle({ marginBlockStart: `${entry.gapBefore}px` })
+						style: normalizeStyle({
+							marginBlockStart: `${entry.gapBefore}px`,
+							height: held(entry.index) ? `${entry.size}px` : void 0
+						})
 					}, [unref(rows)[entry.index].option ? renderSlot(_ctx.$slots, "default", {
 						option: unref(rows)[entry.index].option,
 						attrs: unref(itemAttrs)(entry.index)
-					}, void 0, void 0, 0) : (openBlock(), createElementBlock("div", {
+					}, void 0, void 0, 0) : slots.group ? (openBlock(), createElementBlock("span", {
 						key: 1,
 						id: unref(labelId)(entry.index),
+						hidden: ""
+					}, toDisplayString(unref(rows)[entry.index].label), 9, _hoisted_2$62)) : (openBlock(), createElementBlock("div", {
+						key: 2,
+						id: unref(labelId)(entry.index),
 						class: normalizeClass(unref(selectLabel)())
-					}, toDisplayString(unref(rows)[entry.index].label), 11, _hoisted_2$62))], 14, _hoisted_1$111);
+					}, toDisplayString(unref(rows)[entry.index].label), 11, _hoisted_3$34))], 14, _hoisted_1$111);
 				}), 128))], 16), !unref(rows).length ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(unref(selectEmpty)())
-				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t).select.empty), 1)])], 2)) : createCommentVNode("", true)], 2)]),
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t).select.empty), 1)])], 2)) : slots.group ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(virtualChoiceHeadings)())
+				}, [createElementVNode("div", _hoisted_4$29, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(entries), (entry) => {
+					return openBlock(), createElementBlock(Fragment, { key: entry.key }, [unref(rows)[entry.index].source ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_for: true,
+						ref: unref(measure),
+						"data-index": entry.index,
+						class: normalizeClass(unref(virtualChoiceHeading)()),
+						style: normalizeStyle({ top: `${entry.start - origin.value}px` })
+					}, [renderSlot(_ctx.$slots, "group", { group: unref(rows)[entry.index].source })], 14, _hoisted_5$22)) : createCommentVNode("", true)], 64);
+				}), 128))])], 2)) : createCommentVNode("", true)], 2)]),
 				_: 3
 			}, 8, ["class", "style"]);
 		};
@@ -16029,6 +16057,9 @@ var commandItemBody = tv({ base: "flex min-w-0 flex-1 flex-col" });
 var commandItemMatch = tv({ base: "text-accent-text font-medium" });
 var commandItemHint = tv({ base: "ms-auto flex shrink-0 items-center gap-1" });
 var commandEmpty = tv({ base: "text-muted px-4 py-8 text-center text-sm" });
+var commandHeading = tv({ base: "text-muted flex min-h-7 items-center justify-between gap-2 px-2.5 text-xs font-medium" });
+var commandGrid = tv({ base: "grid grid-cols-[minmax(0,1fr)] p-1" });
+var commandGridRows = tv({ base: "col-start-1 grid grid-rows-subgrid" });
 var commandStatus = tv({ base: "border-line text-muted shrink-0 border-t px-4 py-2 text-center text-sm" });
 //#endregion
 //#region src/components/command-palette/context.ts
@@ -16221,16 +16252,34 @@ function score(item, query) {
 function rank(items, query) {
 	return items.map((item) => score(item, query)).filter((match) => match !== null).sort((a, b) => b.score - a.score);
 }
+function layoutCommandSections(sections) {
+	let row = 1;
+	const placed = sections.map((section) => {
+		const span = section.matches.length + (section.group ? 1 : 0);
+		const entry = {
+			section,
+			row,
+			span
+		};
+		row += span;
+		return entry;
+	});
+	return {
+		rows: Math.max(row - 1, 1),
+		sections: placed
+	};
+}
 function filterCommands(items, query) {
 	const q = query.trim().toLowerCase();
 	const sections = [];
 	let loose = [];
-	const push = (label, entries) => {
+	const push = (group, entries) => {
 		const ranked = rank(entries, q);
 		if (ranked.length === 0) return;
 		sections.push({
 			key: String(sections.length),
-			label,
+			label: group?.label,
+			group,
 			best: ranked[0].score,
 			matches: ranked.map(({ item, start, end }) => ({
 				item,
@@ -16250,13 +16299,14 @@ function filterCommands(items, query) {
 			continue;
 		}
 		flush();
-		push(entry.label, entry.items);
+		push(entry, entry.items);
 	}
 	flush();
 	if (q) sections.sort((a, b) => b.best - a.best);
-	return sections.map(({ key, label, matches }) => ({
+	return sections.map(({ key, label, group, matches }) => ({
 		key,
 		label,
+		group,
 		matches
 	}));
 }
@@ -16280,9 +16330,10 @@ function useCommandItems(props, search) {
 				description: match.item.description,
 				match
 			}));
-			return section.label ? [{
-				label: section.label,
-				options
+			return section.group ? [{
+				label: section.group.label,
+				options,
+				group: section.group
 			}] : options;
 		}))
 	};
@@ -16311,10 +16362,19 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const slots = useSlots();
 		const search = useModel(__props, "search");
 		const t = useUiLocale();
 		const input = shallowRef();
 		const { sections, options } = useCommandItems(props, () => search.value);
+		const layout = computed(() => slots.heading ? layoutCommandSections(sections.value) : void 0);
+		function returnFocus() {
+			nextTick(() => {
+				const field = input.value;
+				const active = document.activeElement;
+				if (field?.isConnected && (!active || active === document.body || active.contains(field))) field.focus({ preventScroll: true });
+			});
+		}
 		function select(item) {
 			const field = input.value;
 			const panel = field?.closest("[data-hn-command-palette]");
@@ -16362,7 +16422,7 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 								input: input.value,
 								kind: "listbox",
 								class: normalizeClass(unref(commandList)())
-							}, {
+							}, createSlots({
 								default: withCtx(({ option, attrs }) => [createVNode(CommandPaletteItem_default, mergeProps(attrs, {
 									match: option.match,
 									onSelect: ($event) => select(option.match.item)
@@ -16375,8 +16435,17 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 									key: "0"
 								} : void 0]), 1040, ["match", "onSelect"])]),
 								empty: withCtx(() => [props.loading ? renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(t).common.loading), 1)], void 0, 0) : renderSlot(_ctx.$slots, "empty", { search: search.value }, () => [createTextVNode(toDisplayString(unref(t).command.empty), 1)], void 0, 1)]),
-								_: 3
-							}, 8, [
+								_: 2
+							}, [_ctx.$slots.heading ? {
+								name: "group",
+								fn: withCtx(({ group }) => [createElementVNode("div", {
+									"data-hn-command-heading": "",
+									class: normalizeClass(unref(commandHeading)()),
+									onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+									onClick: returnFocus
+								}, [renderSlot(_ctx.$slots, "heading", { group: group.group })], 34)]),
+								key: "0"
+							} : void 0]), 1032, [
 								"options",
 								"virtualize",
 								"input",
@@ -16387,7 +16456,87 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 							key: 3,
 							class: normalizeClass(unref(commandList)())
 						}, {
-							default: withCtx(() => [createVNode(unref(ListboxContent), {
+							default: withCtx(() => [layout.value ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								class: normalizeClass(unref(commandGrid)())
+							}, [createVNode(unref(ListboxContent), {
+								"aria-label": props.label,
+								"aria-busy": props.loading || void 0,
+								class: normalizeClass(unref(commandGridRows)()),
+								style: normalizeStyle({ gridRow: `1 / span ${layout.value.rows}` })
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.sections, ({ section, row, span }) => {
+									return openBlock(), createElementBlock(Fragment, { key: section.key }, [section.group ? (openBlock(), createBlock(unref(ListboxGroup), {
+										key: 0,
+										"aria-label": section.group.label,
+										"aria-labelledby": void 0,
+										class: normalizeClass(unref(commandGridRows)()),
+										style: normalizeStyle({ gridRow: `${row} / span ${span}` })
+									}, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(section.matches, (match, index) => {
+											return openBlock(), createBlock(CommandPaletteItem_default, {
+												key: match.item.id,
+												match,
+												style: normalizeStyle({ gridRow: index + 2 }),
+												onSelect: ($event) => select(match.item)
+											}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
+												name: "default",
+												fn: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+													item: match.item,
+													match: unref(commandMatchRange)(match)
+												})]),
+												key: "0"
+											} : void 0]), 1032, [
+												"match",
+												"style",
+												"onSelect"
+											]);
+										}), 128))]),
+										_: 2
+									}, 1032, [
+										"aria-label",
+										"class",
+										"style"
+									])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(section.matches, (match, index) => {
+										return openBlock(), createBlock(CommandPaletteItem_default, {
+											key: match.item.id,
+											match,
+											style: normalizeStyle({ gridRow: row + index }),
+											onSelect: ($event) => select(match.item)
+										}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
+											name: "default",
+											fn: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+												item: match.item,
+												match: unref(commandMatchRange)(match)
+											})]),
+											key: "0"
+										} : void 0]), 1032, [
+											"match",
+											"style",
+											"onSelect"
+										]);
+									}), 128))], 64);
+								}), 128))]),
+								_: 3
+							}, 8, [
+								"aria-label",
+								"aria-busy",
+								"class",
+								"style"
+							]), (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.sections, ({ section, row }) => {
+								return openBlock(), createElementBlock(Fragment, { key: section.key }, [section.group ? (openBlock(), createElementBlock("div", {
+									key: 0,
+									"data-hn-command-heading": "",
+									class: normalizeClass(unref(commandHeading)()),
+									style: normalizeStyle({
+										gridRow: row,
+										gridColumn: 1
+									}),
+									onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+									onClick: returnFocus
+								}, [renderSlot(_ctx.$slots, "heading", { group: section.group })], 38)) : createCommentVNode("", true)], 64);
+							}), 128))], 2)) : (openBlock(), createBlock(unref(ListboxContent), {
+								key: 1,
 								"aria-label": props.label,
 								"aria-busy": props.loading || void 0,
 								class: normalizeClass(unref(selectListBody)())
@@ -16432,8 +16581,8 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 								"aria-label",
 								"aria-busy",
 								"class"
-							]), unref(sections).length === 0 ? (openBlock(), createElementBlock("div", {
-								key: 0,
+							])), unref(sections).length === 0 ? (openBlock(), createElementBlock("div", {
+								key: 2,
 								role: "status",
 								class: normalizeClass(unref(commandEmpty)())
 							}, [props.loading ? renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(t).common.loading), 1)], void 0, 0) : renderSlot(_ctx.$slots, "empty", { search: search.value }, () => [createTextVNode(toDisplayString(unref(t).command.empty), 1)], void 0, 1)], 2)) : createCommentVNode("", true)]),
@@ -16554,15 +16703,20 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
 					key: "1"
 				} : void 0,
+				_ctx.$slots.heading ? {
+					name: "heading",
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "heading", normalizeProps(guardReactiveProps(slotProps)))]),
+					key: "2"
+				} : void 0,
 				_ctx.$slots.loading ? {
 					name: "loading",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "loading")]),
-					key: "2"
+					key: "3"
 				} : void 0,
 				_ctx.$slots.empty ? {
 					name: "empty",
 					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps(slotProps)))]),
-					key: "3"
+					key: "4"
 				} : void 0
 			]), 1040, [
 				"search",
@@ -16618,15 +16772,20 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 								fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
 								key: "1"
 							} : void 0,
+							_ctx.$slots.heading ? {
+								name: "heading",
+								fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "heading", normalizeProps(guardReactiveProps(slotProps)))]),
+								key: "2"
+							} : void 0,
 							_ctx.$slots.loading ? {
 								name: "loading",
 								fn: withCtx(() => [renderSlot(_ctx.$slots, "loading")]),
-								key: "2"
+								key: "3"
 							} : void 0,
 							_ctx.$slots.empty ? {
 								name: "empty",
 								fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps(slotProps)))]),
-								key: "3"
+								key: "4"
 							} : void 0
 						]), 1040, [
 							"search",