@astryx-vue/core 0.1.1 → 0.2.0

package/dist/CommandPalette-BD2iODF5.js

@@ -0,0 +1,489 @@
+import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { n as useAsyncSource } from "./useAsyncSource-Gk0VtE7_.js";
+import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$7 } from "./Dialog-rfUt3y8P.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { t as _sfc_main$8 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$9 } from "./Kbd-BB-Dw6zE.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, onMounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/command-palette.css";
+//#region src/CommandPalette/CommandPaletteEmpty.vue
+const _hoisted_1$6 = { class: "astryx-command-palette-empty" };
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPaletteEmpty",
+	__name: "CommandPaletteEmpty",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/CommandPalette/CommandPaletteFooter.vue
+const _hoisted_1$5 = { class: "astryx-command-palette-footer" };
+const _hoisted_2$3 = { class: "astryx-command-palette-hint" };
+const _hoisted_3$2 = { class: "astryx-command-palette-hint" };
+const _hoisted_4 = { class: "astryx-command-palette-hint" };
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPaletteFooter",
+	__name: "CommandPaletteFooter",
+	setup(__props) {
+		const messages = useAstryxMessages();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default", {}, () => [
+				createElementVNode("span", _hoisted_2$3, [
+					createVNode(_sfc_main$9, { keys: "up" }),
+					createVNode(_sfc_main$9, { keys: "down" }),
+					createTextVNode(" " + toDisplayString(unref(messages).commandPalette.navigate), 1)
+				]),
+				createElementVNode("span", _hoisted_3$2, [createVNode(_sfc_main$9, { keys: "enter" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.select), 1)]),
+				createElementVNode("span", _hoisted_4, [createVNode(_sfc_main$9, { keys: "escape" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.close), 1)])
+			])]);
+		};
+	}
+});
+//#endregion
+//#region src/CommandPalette/CommandPaletteGroup.vue
+const _hoisted_1$4 = ["aria-label"];
+const _hoisted_2$2 = {
+	class: "astryx-command-palette-group-heading",
+	"aria-hidden": "true"
+};
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPaletteGroup",
+	__name: "CommandPaletteGroup",
+	props: { heading: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-command-palette-group",
+				role: "group",
+				"aria-label": __props.heading
+			}, [createElementVNode("div", _hoisted_2$2, toDisplayString(__props.heading), 1), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$4);
+		};
+	}
+});
+//#endregion
+//#region src/CommandPalette/context.ts
+const commandPaletteKey = Symbol("commandPalette");
+//#endregion
+//#region src/CommandPalette/CommandPaletteInput.vue
+const _hoisted_1$3 = { class: "astryx-command-palette-input" };
+const _hoisted_2$1 = [
+	"aria-activedescendant",
+	"aria-controls",
+	"aria-expanded",
+	"aria-label",
+	"placeholder",
+	"value"
+];
+const _hoisted_3$1 = { class: "astryx-command-palette-end" };
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPaletteInput",
+	__name: "CommandPaletteInput",
+	props: {
+		placeholder: {},
+		label: {},
+		hasAutoFocus: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const palette = inject(commandPaletteKey, null);
+		const dialog = inject(DIALOG_CONTEXT_KEY, null);
+		const messages = useAstryxMessages();
+		const inputRef = useTemplateRef("input");
+		const placeholder = computed(() => props.placeholder ?? messages.value.commandPalette.placeholder);
+		const label = computed(() => props.label ?? placeholder.value);
+		const value = computed(() => palette?.search.value ?? "");
+		const activeDescendant = computed(() => {
+			const index = palette?.highlightedIndex.value ?? -1;
+			if (palette == null || index < 0) return void 0;
+			return `${palette.listId}-item-${index}`;
+		});
+		const shouldFocus = computed(() => props.hasAutoFocus && dialog?.isInline.value !== true);
+		function onInput(event) {
+			palette?.setSearch(event.target.value);
+		}
+		onMounted(() => {
+			if (shouldFocus.value) requestAnimationFrame(() => inputRef.value?.focus());
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$3, [
+				_cache[1] || (_cache[1] = createElementVNode("span", {
+					class: "astryx-command-palette-search",
+					"aria-hidden": "true"
+				}, null, -1)),
+				createElementVNode("input", {
+					ref: "input",
+					"aria-activedescendant": activeDescendant.value,
+					"aria-autocomplete": "list",
+					"aria-controls": unref(palette)?.listId,
+					"aria-expanded": unref(palette) ? true : void 0,
+					"aria-label": label.value,
+					class: "astryx-command-palette-field",
+					placeholder: placeholder.value,
+					role: "combobox",
+					type: "text",
+					value: value.value,
+					onInput,
+					onKeydown: _cache[0] || (_cache[0] = (...args) => unref(palette)?.onKeyDown && unref(palette)?.onKeyDown(...args))
+				}, null, 40, _hoisted_2$1),
+				createElementVNode("span", _hoisted_3$1, [unref(palette)?.isBusy.value ? (openBlock(), createBlock(_sfc_main$8, {
+					key: 0,
+					class: "astryx-command-palette-spinner",
+					size: "sm"
+				})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "end")])
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/CommandPalette/CommandPaletteItem.vue
+const _hoisted_1$2 = [
+	"id",
+	"aria-disabled",
+	"aria-selected",
+	"data-disabled",
+	"data-highlighted",
+	"data-selected",
+	"data-value"
+];
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPaletteItem",
+	__name: "CommandPaletteItem",
+	props: {
+		value: {},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const palette = inject(commandPaletteKey, null);
+		const index = computed(() => palette?.items.value.findIndex((item) => item.id === props.value) ?? -1);
+		const isHighlighted = computed(() => index.value >= 0 && palette?.highlightedIndex.value === index.value);
+		const isSelected = computed(() => palette?.value.value != null && palette.value.value === props.value);
+		function onKeyDown(event) {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			select();
+		}
+		function select() {
+			if (props.isDisabled || palette == null || index.value < 0) return;
+			const item = palette.items.value[index.value];
+			if (item != null) palette.selectItem(item);
+		}
+		function highlight() {
+			if (!props.isDisabled && index.value >= 0) palette?.setHighlightedIndex(index.value);
+		}
+		function scrollIntoView(element) {
+			if (!(element instanceof HTMLElement)) return;
+			if (palette?.isInline.value && palette.highlightedIndex.value === index.value && index.value === 0) return;
+			element.scrollIntoView({ block: "nearest" });
+		}
+		onMounted(() => {});
+		watch(isHighlighted, (highlighted, _previous, onCleanup) => {
+			if (!highlighted) return;
+			const id = `${palette?.listId}-item-${index.value}`;
+			const element = document.getElementById(id);
+			if (element == null) return;
+			const frame = requestAnimationFrame(() => scrollIntoView(element));
+			onCleanup(() => cancelAnimationFrame(frame));
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: index.value >= 0 && unref(palette) ? `${unref(palette).listId}-item-${index.value}` : void 0,
+				class: "astryx-command-palette-item",
+				role: "option",
+				tabindex: "-1",
+				"aria-disabled": __props.isDisabled || void 0,
+				"aria-selected": isSelected.value,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-highlighted": isHighlighted.value || void 0,
+				"data-selected": isSelected.value || void 0,
+				"data-value": __props.value,
+				onClick: select,
+				onFocus: highlight,
+				onKeydown: onKeyDown,
+				onMouseenter: highlight
+			}, [renderSlot(_ctx.$slots, "default")], 40, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/CommandPalette/CommandPaletteList.vue
+const _hoisted_1$1 = ["id", "aria-label"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPaletteList",
+	__name: "CommandPaletteList",
+	props: { label: {} },
+	setup(__props) {
+		const props = __props;
+		const palette = inject(commandPaletteKey, null);
+		const messages = useAstryxMessages();
+		const label = computed(() => props.label ?? messages.value.commandPalette.listLabel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(palette)?.listId,
+				class: "astryx-command-palette-list",
+				role: "listbox",
+				"aria-label": label.value
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/CommandPalette/keyboard.ts
+function enabledIndexes(items) {
+	const indexes = [];
+	items.forEach((item, index) => {
+		if (!item.disabled) indexes.push(index);
+	});
+	return indexes;
+}
+/**
+* 命令面板的高亮移动。输入框已经在过滤，这里不再做首字母跳转，也不绕回。
+* 当前没有高亮时，向下到第一项，向上到最后一项。
+*/
+function moveHighlight(items, current, direction) {
+	const enabled = enabledIndexes(items);
+	if (enabled.length === 0) return -1;
+	if (direction === "first") return enabled[0] ?? -1;
+	if (direction === "last") return enabled[enabled.length - 1] ?? -1;
+	if (current < 0) return direction === "next" ? enabled[0] ?? -1 : enabled[enabled.length - 1] ?? -1;
+	if (direction === "next") return enabled.find((index) => index > current) ?? current;
+	return [...enabled].reverse().find((index) => index < current) ?? current;
+}
+//#endregion
+//#region src/CommandPalette/CommandPalette.vue
+const _hoisted_1 = { class: "astryx-command-palette" };
+const _hoisted_2 = { class: "astryx-command-palette-header" };
+const _hoisted_3 = { class: "astryx-command-palette-footer-wrap" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxCommandPalette",
+	__name: "CommandPalette",
+	props: /*@__PURE__*/ mergeModels({
+		isOpen: { type: Boolean },
+		searchSource: {},
+		isInline: {
+			type: Boolean,
+			default: false
+		},
+		label: {},
+		width: { default: 640 },
+		maxHeight: { default: 480 },
+		emptySearchText: {},
+		emptyBootstrapText: {},
+		value: {}
+	}, {
+		"value": { default: void 0 },
+		"valueModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["openChange"], ["update:value"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const value = useModel(__props, "value");
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const search = ref("");
+		const highlightedIndex = ref(-1);
+		const listId = `astryx-command-palette-${useId()}`;
+		const enabled = computed(() => props.isOpen);
+		const source = computed(() => props.searchSource);
+		const results = useAsyncSource({
+			debounceMs: 0,
+			enabled,
+			query: search,
+			source
+		});
+		const items = computed(() => results.items.value);
+		const isBusy = computed(() => results.status.value === "loading");
+		const isInline = computed(() => props.isInline);
+		const label = computed(() => props.label ?? messages.value.commandPalette.label);
+		function groupName(item) {
+			const data = item.auxiliaryData;
+			if (data == null || typeof data !== "object" || !("group" in data)) return null;
+			const group = data.group;
+			return typeof group === "string" && group !== "" ? group : null;
+		}
+		const sections = computed(() => {
+			const groups = [];
+			const loose = [];
+			for (const item of items.value) {
+				const heading = groupName(item);
+				if (heading == null) {
+					loose.push(item);
+					continue;
+				}
+				const existing = groups.find((group) => group.heading === heading);
+				if (existing) existing.items.push(item);
+				else groups.push({
+					heading,
+					items: [item]
+				});
+			}
+			return {
+				groups,
+				loose,
+				grouped: groups.length > 0
+			};
+		});
+		const showEmpty = computed(() => items.value.length === 0 && results.status.value !== "loading" && results.status.value !== "idle");
+		const emptyText = computed(() => {
+			if (search.value.trim() === "") return props.emptyBootstrapText ?? messages.value.commandPalette.emptyBootstrap;
+			return props.emptySearchText ?? messages.value.commandPalette.emptySearch;
+		});
+		function setSearch(next) {
+			search.value = next;
+		}
+		function setHighlightedIndex(index) {
+			highlightedIndex.value = index;
+		}
+		function close() {
+			results.cancel();
+			search.value = "";
+			highlightedIndex.value = -1;
+			announce("");
+			emit("openChange", false);
+		}
+		function selectItem(item) {
+			if (item.disabled) return;
+			value.value = item.id;
+			close();
+		}
+		function onKeyDown(event) {
+			if (event.isComposing || event.key === "Process") return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				close();
+				return;
+			}
+			if (event.key === " ") return;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				const item = items.value[highlightedIndex.value];
+				if (item != null) selectItem(item);
+				return;
+			}
+			const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "previous" : event.key === "Home" || event.key === "PageUp" ? "first" : event.key === "End" || event.key === "PageDown" ? "last" : null;
+			if (direction == null) return;
+			event.preventDefault();
+			highlightedIndex.value = moveHighlight(items.value, highlightedIndex.value, direction);
+		}
+		function onOpenChange(open) {
+			if (!open) close();
+			else emit("openChange", true);
+		}
+		watch(items, (list) => {
+			if (search.value.trim() === "" && value.value) {
+				highlightedIndex.value = list.findIndex((item) => item.id === value.value && !item.disabled);
+				return;
+			}
+			highlightedIndex.value = -1;
+		});
+		watch([
+			() => results.status.value,
+			items,
+			search
+		], () => {
+			if (!props.isOpen || search.value.trim() === "") return;
+			if (results.status.value === "loading") {
+				announce(messages.value.commandPalette.loading);
+				return;
+			}
+			if (results.status.value === "empty") announce(messages.value.commandPalette.noResultsFor(search.value));
+			else if (results.status.value === "ready") announce(messages.value.commandPalette.resultCount(items.value.length));
+		});
+		watch(() => props.isOpen, (open) => {
+			if (!open) {
+				results.cancel();
+				search.value = "";
+				highlightedIndex.value = -1;
+			}
+		});
+		provide(commandPaletteKey, {
+			highlightedIndex,
+			isBusy,
+			isInline,
+			items,
+			listId,
+			onKeyDown,
+			search,
+			selectItem,
+			setHighlightedIndex,
+			setSearch,
+			value: computed(() => value.value)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$7, {
+				"aria-label": label.value,
+				"is-inline": isInline.value,
+				"is-open": __props.isOpen,
+				"max-height": __props.maxHeight,
+				padding: 0,
+				purpose: "info",
+				role: isInline.value ? "dialog" : void 0,
+				width: __props.width,
+				onOpenChange
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "input", {}, () => [createVNode(_sfc_main$3)])]),
+					createVNode(_sfc_main$1, null, {
+						default: withCtx(() => [showEmpty.value ? (openBlock(), createBlock(_sfc_main$6, { key: 0 }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(emptyText.value), 1)]),
+							_: 1
+						})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(sections.value.groups, (group) => {
+							return openBlock(), createBlock(_sfc_main$4, {
+								key: group.heading,
+								heading: group.heading
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+									return openBlock(), createBlock(_sfc_main$2, {
+										key: item.id,
+										"is-disabled": item.disabled,
+										value: item.id
+									}, {
+										default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+											isSelected: item.id === value.value,
+											item
+										}, () => [createTextVNode(toDisplayString(item.label), 1)])]),
+										_: 2
+									}, 1032, ["is-disabled", "value"]);
+								}), 128))]),
+								_: 2
+							}, 1032, ["heading"]);
+						}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(sections.value.loose, (item) => {
+							return openBlock(), createBlock(_sfc_main$2, {
+								key: item.id,
+								"is-disabled": item.disabled,
+								value: item.id
+							}, {
+								default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+									isSelected: item.id === value.value,
+									item
+								}, () => [createTextVNode(toDisplayString(item.label), 1)])]),
+								_: 2
+							}, 1032, ["is-disabled", "value"]);
+						}), 128))], 64))]),
+						_: 3
+					}),
+					createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "footer", {}, () => [createVNode(_sfc_main$5)])])
+				])]),
+				_: 3
+			}, 8, [
+				"aria-label",
+				"is-inline",
+				"is-open",
+				"max-height",
+				"role",
+				"width"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$4 as a, _sfc_main$3 as i, _sfc_main$1 as n, _sfc_main$5 as o, _sfc_main$2 as r, _sfc_main$6 as s, _sfc_main as t };

package/dist/ComplexSelector/index.d.ts

@@ -0,0 +1,2 @@
+import { a as ComplexSelectorProps, c as ComplexSelectorState, i as ComplexSelectorHandleRef, l as ComplexSelectorTriggerProps, n as ComplexSelectorEmits, o as ComplexSelectorSlotProps, r as ComplexSelectorHandle, s as ComplexSelectorSlots, t as _default, u as ComplexSelectorVariant } from "../index-C59PdX9L.js";
+export { _default as ComplexSelector, _default as default, type ComplexSelectorEmits, type ComplexSelectorHandle, type ComplexSelectorHandleRef, type ComplexSelectorProps, type ComplexSelectorSlotProps, type ComplexSelectorSlots, type ComplexSelectorState, type ComplexSelectorTriggerProps, type ComplexSelectorVariant };

package/dist/ComplexSelector/index.js

@@ -0,0 +1,2 @@
+import { n as _sfc_main, t as ComplexSelector_default } from "../ComplexSelector-D9iXd5cH.js";
+export { _sfc_main as ComplexSelector, ComplexSelector_default as default };