@mantine-vue/spotlight 2.4.0 → 3.1.0

package/esm/index.mjs

@@ -1,5 +1,5 @@
 import { createStore } from "@mantine-vue/store";
-import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, withCtx } from "vue";
 import { Box, Highlight, Input, Modal, ScrollAreaAutosize, UnstyledButton, getDefaultZIndex, hasNode, rem, resolveNode, useProps, useStyles } from "@mantine-vue/core";
 import { useHotkeys, useId } from "@mantine-vue/hooks";
 //#region src/spotlight.store.ts
@@ -140,73 +140,6 @@ function isActionsGroup(item) {
 	return group.group !== void 0 && Array.isArray(group.actions);
 }
 //#endregion
-//#region src/default-spotlight-filter.ts
-function getKeywords(keywords) {
-	if (Array.isArray(keywords)) return keywords.map((keyword) => keyword.trim()).join(",").toLowerCase().trim();
-	if (typeof keywords === "string") return keywords.toLowerCase().trim();
-	return "";
-}
-function getFlatActions(data) {
-	return data.reduce((acc, item) => {
-		if ("actions" in item) return [...acc, ...item.actions.map((action) => ({
-			...action,
-			group: item.group
-		}))];
-		return [...acc, item];
-	}, []);
-}
-function flatActionsToGroups(data) {
-	const groups = {};
-	const result = [];
-	data.forEach((action) => {
-		if (action.group) {
-			if (!groups[action.group]) groups[action.group] = {
-				pushed: false,
-				data: {
-					group: action.group,
-					actions: []
-				}
-			};
-			groups[action.group].data.actions.push(action);
-			if (!groups[action.group].pushed) {
-				groups[action.group].pushed = true;
-				result.push(groups[action.group].data);
-			}
-		} else result.push(action);
-	});
-	return result;
-}
-var defaultSpotlightFilter = (_query, data) => {
-	const query = _query.trim().toLowerCase();
-	const priorityMatrix = [[], []];
-	getFlatActions(data).forEach((item) => {
-		if (item.label?.toLowerCase().includes(query)) priorityMatrix[0].push(item);
-		else if (item.description?.toLowerCase().includes(query) || getKeywords(item.keywords).includes(query)) priorityMatrix[1].push(item);
-	});
-	return flatActionsToGroups(priorityMatrix.flat());
-};
-//#endregion
-//#region src/limit-actions.ts
-function limitActions(actions, limit) {
-	if (!Array.isArray(actions)) return [];
-	let count = 0;
-	return actions.reduce((acc, item) => {
-		if (count >= limit) return acc;
-		if (isActionsGroup(item)) {
-			const groupActions = limitActions(item.actions, limit - count);
-			acc.push({
-				group: item.group,
-				actions: groupActions
-			});
-			count += groupActions.length;
-		} else {
-			acc.push(item);
-			count += 1;
-		}
-		return acc;
-	}, []);
-}
-//#endregion
 //#region src/Spotlight.context.ts
 var SpotlightContextKey = Symbol("SpotlightContext");
 function provideSpotlightContext(value) {
@@ -217,294 +150,228 @@ function useSpotlightContext() {
 	if (ctx === null) throw new Error("Spotlight component was not found in tree");
 	return ctx;
 }
-var Spotlight_module_default = {
-	root: "_root_87n7g_1",
-	content: "_content_87n7g_7",
-	body: "_body_87n7g_13",
-	search: "_search_87n7g_19",
-	actionsList: "_actionsList_87n7g_24",
-	action: "_action_87n7g_24",
-	actionBody: "_actionBody_87n7g_73",
-	actionSection: "_actionSection_87n7g_77",
-	actionLabel: "_actionLabel_87n7g_99",
-	actionDescription: "_actionDescription_87n7g_103",
-	empty: "_empty_87n7g_110",
-	footer: "_footer_87n7g_116",
-	actionsGroup: "_actionsGroup_87n7g_129"
-};
 //#endregion
-//#region src/SpotlightAction.ts
-var defaultProps$3 = {
-	dimmedSections: true,
-	highlightQuery: false
-};
-var SpotlightAction = defineComponent({
+//#region src/components/SpotlightAction/SpotlightAction.vue
+var SpotlightAction_default = /* @__PURE__ */ defineComponent({
 	name: "SpotlightAction",
 	inheritAttrs: false,
-	slots: Object,
+	__name: "SpotlightAction",
 	props: {
-		label: {
-			type: String,
-			default: void 0
-		},
-		description: {
-			type: String,
-			default: void 0
-		},
-		leftSection: {
-			type: null,
-			default: void 0
-		},
-		rightSection: {
-			type: null,
-			default: void 0
-		},
+		label: {},
+		description: {},
+		leftSection: {},
+		rightSection: {},
 		dimmedSections: {
 			type: Boolean,
-			default: void 0
+			default: true
 		},
 		highlightQuery: {
 			type: Boolean,
-			default: void 0
-		},
-		highlightColor: {
-			type: String,
-			default: void 0
+			default: false
 		},
+		highlightColor: {},
 		closeSpotlightOnTrigger: {
 			type: Boolean,
 			default: void 0
 		},
-		keywords: {
-			type: [String, Array],
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		keywords: {},
+		classNames: {},
+		styles: {},
+		vars: {}
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("SpotlightAction", defaultProps$3, rawProps);
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const props = useProps("SpotlightAction", null, rawProps);
 		const ctx = useSpotlightContext();
-		return () => {
-			const stylesApi = {
-				classNames: props.classNames,
-				styles: props.styles
-			};
-			const leftSection = resolveNode(props.leftSection, slots.leftSection);
-			const rightSection = resolveNode(props.rightSection, slots.rightSection);
-			const labelNode = props.highlightQuery && typeof props.label === "string" ? h(Highlight, {
-				component: "span",
-				highlight: ctx.query,
-				color: props.highlightColor,
-				...ctx.getStyles("actionLabel", stylesApi)
-			}, () => props.label) : h("span", ctx.getStyles("actionLabel", stylesApi), props.label);
-			return h(UnstyledButton, {
-				...attrs,
-				"data-action": true,
-				...ctx.getStyles("action", {
-					className: attrs.class,
-					style: attrs.style,
-					...stylesApi
-				}),
-				onMousedown: (event) => {
-					event.preventDefault();
-					attrs.onMousedown?.(event);
-				},
-				onClick: (event) => {
-					attrs.onClick?.(event);
-					if (props.closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) spotlightActions.close(ctx.store);
-				},
-				tabindex: -1
-			}, () => slots.default?.() ?? [
-				hasNode(leftSection) ? h(Box, {
-					component: "span",
-					mod: {
-						position: "left",
-						dimmed: props.dimmedSections
-					},
-					...ctx.getStyles("actionSection", stylesApi)
-				}, () => leftSection) : null,
-				h("span", ctx.getStyles("actionBody", stylesApi), [labelNode, h("span", ctx.getStyles("actionDescription", stylesApi), props.description)]),
-				hasNode(rightSection) ? h(Box, {
-					component: "span",
-					mod: {
-						position: "right",
-						dimmed: props.dimmedSections
-					},
-					...ctx.getStyles("actionSection", stylesApi)
-				}, () => rightSection) : null
-			]);
+		const stylesApi = computed(() => ({
+			classNames: props.classNames,
+			styles: props.styles
+		}));
+		const leftSection = computed(() => resolveNode(props.leftSection, slots.leftSection));
+		const rightSection = computed(() => resolveNode(props.rightSection, slots.rightSection));
+		const renderLeftSection = () => leftSection.value;
+		const renderRightSection = () => rightSection.value;
+		const forwardedAttrs = computed(() => {
+			const value = { ...attrs };
+			delete value.onClick;
+			delete value.onMousedown;
+			return value;
+		});
+		function mousedown(event) {
+			event.preventDefault();
+			attrs.onMousedown?.(event);
+		}
+		function click(event) {
+			attrs.onClick?.(event);
+			if (props.closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) spotlightActions.close(ctx.store);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UnstyledButton), mergeProps({
+				...forwardedAttrs.value,
+				...unref(ctx).getStyles("action", {
+					className: unref(attrs).class,
+					style: unref(attrs).style,
+					...stylesApi.value
+				})
+			}, {
+				"data-action": "",
+				tabindex: -1,
+				onMousedown: mousedown,
+				onClick: click
+			}), {
+				default: withCtx(() => [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					unref(hasNode)(leftSection.value) ? (openBlock(), createBlock(unref(Box), mergeProps({
+						key: 0,
+						component: "span",
+						mod: {
+							position: "left",
+							dimmed: unref(props).dimmedSections
+						}
+					}, unref(ctx).getStyles("actionSection", stylesApi.value)), {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderLeftSection)))]),
+						_: 1
+					}, 16, ["mod"])) : createCommentVNode("", true),
+					createElementVNode("span", normalizeProps(guardReactiveProps(unref(ctx).getStyles("actionBody", stylesApi.value))), [unref(props).highlightQuery && typeof unref(props).label === "string" ? (openBlock(), createBlock(unref(Highlight), mergeProps({
+						key: 0,
+						component: "span",
+						highlight: unref(ctx).query,
+						color: unref(props).highlightColor
+					}, unref(ctx).getStyles("actionLabel", stylesApi.value)), {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(props).label), 1)]),
+						_: 1
+					}, 16, ["highlight", "color"])) : (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, unref(ctx).getStyles("actionLabel", stylesApi.value))), toDisplayString(unref(props).label), 17)), createElementVNode("span", normalizeProps(guardReactiveProps(unref(ctx).getStyles("actionDescription", stylesApi.value))), toDisplayString(unref(props).description), 17)], 16),
+					unref(hasNode)(rightSection.value) ? (openBlock(), createBlock(unref(Box), mergeProps({
+						key: 1,
+						component: "span",
+						mod: {
+							position: "right",
+							dimmed: unref(props).dimmedSections
+						}
+					}, unref(ctx).getStyles("actionSection", stylesApi.value)), {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderRightSection)))]),
+						_: 1
+					}, 16, ["mod"])) : createCommentVNode("", true)
+				], 64))]),
+				_: 3
+			}, 16);
 		};
 	}
 });
-Object.assign(SpotlightAction, { classes: Spotlight_module_default });
 //#endregion
-//#region src/SpotlightActionsGroup.ts
-var SpotlightActionsGroup = defineComponent({
+//#region src/components/SpotlightActionsGroup/SpotlightActionsGroup.vue
+var SpotlightActionsGroup_default = /* @__PURE__ */ defineComponent({
 	name: "SpotlightActionsGroup",
 	inheritAttrs: false,
+	__name: "SpotlightActionsGroup",
 	props: {
-		label: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		label: {},
+		classNames: {},
+		styles: {},
+		vars: {}
 	},
-	setup(rawProps, { attrs, slots }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
 		const props = useProps("SpotlightActionsGroup", null, rawProps);
 		const ctx = useSpotlightContext();
-		return () => h(Box, {
-			...attrs,
-			...ctx.getStyles("actionsGroup", {
-				className: attrs.class,
-				style: attrs.style,
-				classNames: props.classNames,
-				styles: props.styles
-			}),
-			style: [
-				ctx.getStyles("actionsGroup", { styles: props.styles }).style,
-				attrs.style,
-				{ "--spotlight-label": `'${props.label?.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'` }
-			]
-		}, () => slots.default?.());
+		const groupStyles = computed(() => ctx.getStyles("actionsGroup", {
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles
+		}));
+		const labelVariable = computed(() => ({ "--spotlight-label": `'${props.label?.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'` }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), mergeProps({
+				...unref(attrs),
+				...groupStyles.value
+			}, { style: [
+				groupStyles.value.style,
+				unref(attrs).style,
+				labelVariable.value
+			] }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["style"]);
+		};
 	}
 });
-Object.assign(SpotlightActionsGroup, { classes: Spotlight_module_default });
 //#endregion
-//#region src/SpotlightActionsList.ts
-var SpotlightActionsList = defineComponent({
+//#region src/components/SpotlightActionsList/SpotlightActionsList.vue
+var SpotlightActionsList_default = /* @__PURE__ */ defineComponent({
 	name: "SpotlightActionsList",
 	inheritAttrs: false,
+	__name: "SpotlightActionsList",
 	props: {
-		id: {
-			type: String,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		id: {},
+		classNames: {},
+		styles: {},
+		vars: {}
 	},
-	setup(rawProps, { attrs, slots }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
 		const props = useProps("SpotlightActionsList", null, rawProps);
 		const ctx = useSpotlightContext();
 		const generatedId = useId();
 		const listId = props.id || `mantine-${generatedId.value.replace(/:/g, "")}`;
 		onMounted(() => spotlightActions.setListId(listId, ctx.store));
 		onBeforeUnmount(() => spotlightActions.setListId("", ctx.store));
-		return () => h(ScrollAreaAutosize, {
-			...attrs,
-			...ctx.getStyles("actionsList", {
-				className: attrs.class,
-				style: attrs.style,
-				classNames: props.classNames,
-				styles: props.styles
-			}),
-			type: "scroll",
-			scrollbarSize: "var(--spotlight-actions-list-padding)",
-			offsetScrollbars: "y",
-			id: listId
-		}, () => slots.default?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScrollAreaAutosize), mergeProps({
+				...unref(attrs),
+				...unref(ctx).getStyles("actionsList", {
+					className: unref(attrs).class,
+					style: unref(attrs).style,
+					classNames: unref(props).classNames,
+					styles: unref(props).styles
+				})
+			}, {
+				type: "scroll",
+				"scrollbar-size": "var(--spotlight-actions-list-padding)",
+				"offset-scrollbars": "y",
+				id: unref(listId)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["id"]);
+		};
 	}
 });
-Object.assign(SpotlightActionsList, { classes: Spotlight_module_default });
 //#endregion
-//#region src/SpotlightEmpty.ts
-var SpotlightEmpty = defineComponent({
+//#region src/components/SpotlightEmpty/SpotlightEmpty.vue
+var SpotlightEmpty_default = /* @__PURE__ */ defineComponent({
 	name: "SpotlightEmpty",
 	inheritAttrs: false,
+	__name: "SpotlightEmpty",
 	props: {
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		classNames: {},
+		styles: {},
+		vars: {}
 	},
-	setup(rawProps, { attrs, slots }) {
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
 		const props = useProps("SpotlightEmpty", null, rawProps);
 		const ctx = useSpotlightContext();
-		return () => h(Box, {
-			...attrs,
-			...ctx.getStyles("empty", {
-				className: attrs.class,
-				style: attrs.style,
-				classNames: props.classNames,
-				styles: props.styles
-			})
-		}, () => slots.default?.());
-	}
-});
-Object.assign(SpotlightEmpty, { classes: Spotlight_module_default });
-//#endregion
-//#region src/SpotlightFooter.ts
-var SpotlightFooter = defineComponent({
-	name: "SpotlightFooter",
-	inheritAttrs: false,
-	props: {
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
-	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("SpotlightFooter", null, rawProps);
-		const ctx = useSpotlightContext();
-		return () => h(Box, {
-			...attrs,
-			...ctx.getStyles("footer", {
-				className: attrs.class,
-				style: attrs.style,
-				classNames: props.classNames,
-				styles: props.styles
-			})
-		}, () => slots.default?.());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), normalizeProps(guardReactiveProps({
+				...unref(attrs),
+				...unref(ctx).getStyles("empty", {
+					className: unref(attrs).class,
+					style: unref(attrs).style,
+					classNames: unref(props).classNames,
+					styles: unref(props).styles
+				})
+			})), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
 	}
 });
-Object.assign(SpotlightFooter, { classes: Spotlight_module_default });
 //#endregion
 //#region src/get-hotkeys.ts
 function getHotkeys(hotkeys, store) {
@@ -533,116 +400,91 @@ function mergeStyles(...items) {
 		return acc;
 	}, {});
 }
-//#endregion
-//#region src/SpotlightRoot.ts
-var defaultProps$2 = {
-	size: 600,
-	yOffset: 80,
-	zIndex: getDefaultZIndex("max"),
-	overlayProps: {
-		backgroundOpacity: .35,
-		blur: 7
-	},
-	transitionProps: {
-		duration: 200,
-		transition: "pop"
-	},
-	store: spotlightStore,
-	clearQueryOnClose: true,
-	closeOnActionTrigger: true,
-	shortcut: "mod + K",
-	maxHeight: 400
+var Spotlight_module_default = {
+	root: "_root_87n7g_1",
+	content: "_content_87n7g_7",
+	body: "_body_87n7g_13",
+	search: "_search_87n7g_19",
+	actionsList: "_actionsList_87n7g_24",
+	action: "_action_87n7g_24",
+	actionBody: "_actionBody_87n7g_73",
+	actionSection: "_actionSection_87n7g_77",
+	actionLabel: "_actionLabel_87n7g_99",
+	actionDescription: "_actionDescription_87n7g_103",
+	empty: "_empty_87n7g_110",
+	footer: "_footer_87n7g_116",
+	actionsGroup: "_actionsGroup_87n7g_129"
 };
-var SpotlightRoot = defineComponent({
+//#endregion
+//#region src/components/SpotlightRoot/SpotlightRoot.vue
+var SpotlightRoot_default = /* @__PURE__ */ defineComponent({
 	name: "SpotlightRoot",
 	inheritAttrs: false,
+	__name: "SpotlightRoot",
 	props: {
-		store: {
-			type: Object,
-			default: void 0
-		},
-		query: {
-			type: String,
-			default: void 0
-		},
-		onQueryChange: {
-			type: Function,
-			default: void 0
-		},
+		store: { default: () => spotlightStore },
+		query: {},
 		clearQueryOnClose: {
 			type: Boolean,
-			default: void 0
-		},
-		shortcut: {
-			type: [
-				String,
-				Array,
-				null
-			],
-			default: void 0
-		},
-		tagsToIgnore: {
-			type: Array,
-			default: void 0
-		},
-		triggerOnContentEditable: {
-			type: Boolean,
-			default: void 0
+			default: true
 		},
+		shortcut: { default: "mod + K" },
+		tagsToIgnore: {},
+		triggerOnContentEditable: { type: Boolean },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		onSpotlightOpen: {
-			type: Function,
-			default: void 0
-		},
-		onSpotlightClose: {
-			type: Function,
-			default: void 0
-		},
 		forceOpened: {
 			type: Boolean,
 			default: false
 		},
 		closeOnActionTrigger: {
 			type: Boolean,
-			default: void 0
-		},
-		maxHeight: {
-			type: [String, Number],
-			default: void 0
+			default: true
 		},
+		maxHeight: { default: 400 },
 		scrollable: {
 			type: Boolean,
 			default: false
 		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean }
 	},
-	setup(rawProps, { attrs, slots }) {
-		const props = useProps("SpotlightRoot", defaultProps$2, rawProps);
+	emits: [
+		"update:query",
+		"query-change",
+		"spotlight-open",
+		"spotlight-close",
+		"exit-transition-end"
+	],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const props = useProps("SpotlightRoot", {
+			size: 600,
+			yOffset: 80,
+			zIndex: getDefaultZIndex("max"),
+			overlayProps: {
+				backgroundOpacity: .35,
+				blur: 7
+			},
+			transitionProps: {
+				duration: 200,
+				transition: "pop"
+			}
+		}, rawProps);
 		const state = useSpotlight(props.store);
 		const previousOpened = ref(state.value.opened);
 		const currentQuery = computed(() => typeof props.query === "string" ? props.query : state.value.query);
-		const setQuery = (query) => {
-			props.onQueryChange?.(query);
+		function setQuery(query) {
+			emit("update:query", query);
+			emit("query-change", query);
 			spotlightActions.setQuery(query, props.store);
-		};
+		}
 		const getStyles = useStyles({
 			name: "Spotlight",
 			classes: Spotlight_module_default,
@@ -668,88 +510,122 @@ var SpotlightRoot = defineComponent({
 		useHotkeys(() => getHotkeys(props.shortcut, props.store), () => props.tagsToIgnore, () => props.triggerOnContentEditable);
 		watch(() => state.value.opened, (opened) => {
 			if (opened === previousOpened.value) return;
-			if (opened) props.onSpotlightOpen?.();
-			else props.onSpotlightClose?.();
+			if (opened) emit("spotlight-open");
+			else emit("spotlight-close");
 			previousOpened.value = opened;
 		});
-		return () => {
-			if (props.disabled) return null;
-			const rootStyles = getStyles("root", {
-				className: attrs.class,
-				style: attrs.style
-			});
-			const { classNames: _classNames, styles: _styles, vars: _vars, unstyled: _unstyled, store: _store, query: _query, onQueryChange: _onQueryChange, clearQueryOnClose: _clearQueryOnClose, shortcut: _shortcut, tagsToIgnore: _tagsToIgnore, triggerOnContentEditable: _triggerOnContentEditable, disabled: _disabled, onSpotlightOpen: _onSpotlightOpen, onSpotlightClose: _onSpotlightClose, forceOpened: _forceOpened, closeOnActionTrigger: _closeOnActionTrigger, maxHeight: _maxHeight, scrollable: _scrollable, ...modalAttrs } = {
+		const rootStyles = computed(() => getStyles("root", {
+			className: attrs.class,
+			style: attrs.style
+		}));
+		const modalAttrs = computed(() => {
+			const value = {
 				...attrs,
 				...props
 			};
-			return h(Modal, {
-				...modalAttrs,
-				withCloseButton: false,
-				opened: state.value.opened || !!props.forceOpened,
+			for (const key of [
+				"classNames",
+				"styles",
+				"vars",
+				"unstyled",
+				"store",
+				"query",
+				"clearQueryOnClose",
+				"shortcut",
+				"tagsToIgnore",
+				"triggerOnContentEditable",
+				"disabled",
+				"forceOpened",
+				"closeOnActionTrigger",
+				"maxHeight",
+				"scrollable",
+				"class",
+				"style"
+			]) delete value[key];
+			return value;
+		});
+		function close() {
+			spotlightActions.close(props.store);
+		}
+		function exitTransitionEnd() {
+			if (props.clearQueryOnClose) setQuery("");
+			spotlightActions.clearSpotlightState({ clearQuery: props.clearQueryOnClose }, props.store);
+			props.transitionProps?.onExited?.();
+			emit("exit-transition-end");
+		}
+		return (_ctx, _cache) => {
+			return !unref(props).disabled ? (openBlock(), createBlock(unref(Modal), mergeProps({ key: 0 }, modalAttrs.value, {
+				"with-close-button": false,
+				opened: unref(state).opened || unref(props).forceOpened,
 				padding: 0,
-				onClose: () => spotlightActions.close(props.store),
-				class: rootStyles.class,
-				style: rootStyles.style,
-				classNames: mergeClassNames({
-					body: Spotlight_module_default.body,
-					content: Spotlight_module_default.content
-				}, props.classNames),
-				styles: mergeStyles(props.styles),
-				vars: mergeStyles({ root: { "--spotlight-max-height": props.scrollable ? rem(props.maxHeight) : void 0 } }, props.vars),
-				onExitTransitionEnd: () => {
-					if (props.clearQueryOnClose) setQuery("");
-					spotlightActions.clearSpotlightState({ clearQuery: props.clearQueryOnClose }, props.store);
-					props.transitionProps?.onExited?.();
-					props.onExitTransitionEnd?.();
-				},
-				"data-scrollable": props.scrollable || void 0
-			}, slots);
+				class: rootStyles.value.class,
+				style: rootStyles.value.style,
+				"class-names": unref(mergeClassNames)({
+					body: unref(Spotlight_module_default).body,
+					content: unref(Spotlight_module_default).content
+				}, unref(props).classNames),
+				styles: unref(mergeStyles)(unref(props).styles),
+				vars: unref(mergeStyles)({ root: { "--spotlight-max-height": unref(props).scrollable ? unref(rem)(unref(props).maxHeight) : void 0 } }, unref(props).vars),
+				"data-scrollable": unref(props).scrollable || void 0,
+				onClose: close,
+				onExitTransitionEnd: exitTransitionEnd
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"opened",
+				"class",
+				"style",
+				"class-names",
+				"styles",
+				"vars",
+				"data-scrollable"
+			])) : createCommentVNode("", true);
 		};
 	}
 });
-Object.assign(SpotlightRoot, { classes: Spotlight_module_default });
 //#endregion
-//#region src/SpotlightSearch.ts
-var defaultProps$1 = { size: "lg" };
-var SpotlightSearch = defineComponent({
+//#region src/components/SpotlightSearch/SpotlightSearch.vue
+var SpotlightSearch_default = /* @__PURE__ */ defineComponent({
 	name: "SpotlightSearch",
 	inheritAttrs: false,
+	__name: "SpotlightSearch",
 	props: {
-		size: {
-			type: [String, Number],
-			default: void 0
-		},
-		value: {
-			type: String,
-			default: void 0
-		},
-		onChange: {
-			type: Function,
-			default: void 0
-		},
-		onKeydown: {
-			type: Function,
-			default: void 0
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		}
+		size: { default: "lg" },
+		modelValue: {},
+		classNames: {},
+		styles: {},
+		vars: {}
 	},
-	setup(rawProps, { attrs }) {
-		const props = useProps("SpotlightSearch", defaultProps$1, rawProps);
+	emits: [
+		"update:modelValue",
+		"change",
+		"keydown"
+	],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const props = useProps("SpotlightSearch", null, rawProps);
 		const ctx = useSpotlightContext();
 		const isComposing = ref(false);
-		const handleKeydown = (event) => {
-			props.onKeydown?.(event);
+		const inputStyles = computed(() => ctx.getStyles("search"));
+		const forwardedAttrs = computed(() => {
+			const value = { ...attrs };
+			delete value.onInput;
+			delete value.onKeydown;
+			delete value.onCompositionstart;
+			delete value.onCompositionend;
+			return value;
+		});
+		function input(event) {
+			const value = event.currentTarget.value;
+			ctx.setQuery(value);
+			emit("update:modelValue", value);
+			emit("change", value);
+		}
+		function keydown(event) {
+			emit("keydown", event);
 			if (isComposing.value) return;
 			if (event.code === "ArrowDown") {
 				event.preventDefault();
@@ -763,206 +639,276 @@ var SpotlightSearch = defineComponent({
 				event.preventDefault();
 				spotlightActions.triggerSelectedAction(ctx.store);
 			}
-		};
-		return () => {
-			const inputStyles = ctx.getStyles("search");
-			return h(Input, {
-				...attrs,
-				size: props.size,
-				value: props.value ?? ctx.query,
-				classNames: mergeClassNames({ input: inputStyles.class }, props.classNames),
-				styles: mergeStyles({ input: inputStyles.style }, props.styles),
-				vars: props.vars,
-				onInput: (event) => {
-					ctx.setQuery(event.currentTarget.value);
-					props.onChange?.(event);
-				},
-				onKeydown: handleKeydown,
-				onCompositionstart: () => {
-					isComposing.value = true;
-				},
-				onCompositionend: () => {
-					isComposing.value = false;
-				}
-			});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Input), mergeProps(forwardedAttrs.value, {
+				size: unref(props).size,
+				value: unref(props).modelValue ?? unref(ctx).query,
+				"class-names": unref(mergeClassNames)({ input: inputStyles.value.class }, unref(props).classNames),
+				styles: unref(mergeStyles)({ input: inputStyles.value.style }, unref(props).styles),
+				vars: unref(props).vars,
+				onInput: input,
+				onKeydown: keydown,
+				onCompositionstart: _cache[0] || (_cache[0] = ($event) => isComposing.value = true),
+				onCompositionend: _cache[1] || (_cache[1] = ($event) => isComposing.value = false)
+			}), null, 16, [
+				"size",
+				"value",
+				"class-names",
+				"styles",
+				"vars"
+			]);
 		};
 	}
 });
-Object.assign(SpotlightSearch, { classes: Spotlight_module_default });
 //#endregion
-//#region src/Spotlight.ts
-var defaultProps = {
-	size: 600,
-	yOffset: 80,
-	limit: Infinity,
-	zIndex: getDefaultZIndex("max"),
-	overlayProps: {
-		backgroundOpacity: .35,
-		blur: 7
-	},
-	transitionProps: {
-		duration: 200,
-		transition: "pop"
-	},
-	store: spotlightStore,
-	filter: defaultSpotlightFilter,
-	clearQueryOnClose: true,
-	closeOnActionTrigger: true,
-	shortcut: "mod + K"
+//#region src/default-spotlight-filter.ts
+function getKeywords(keywords) {
+	if (Array.isArray(keywords)) return keywords.map((keyword) => keyword.trim()).join(",").toLowerCase().trim();
+	if (typeof keywords === "string") return keywords.toLowerCase().trim();
+	return "";
+}
+function getFlatActions(data) {
+	return data.reduce((acc, item) => {
+		if ("actions" in item) return [...acc, ...item.actions.map((action) => ({
+			...action,
+			group: item.group
+		}))];
+		return [...acc, item];
+	}, []);
+}
+function flatActionsToGroups(data) {
+	const groups = {};
+	const result = [];
+	data.forEach((action) => {
+		if (action.group) {
+			if (!groups[action.group]) groups[action.group] = {
+				pushed: false,
+				data: {
+					group: action.group,
+					actions: []
+				}
+			};
+			groups[action.group].data.actions.push(action);
+			if (!groups[action.group].pushed) {
+				groups[action.group].pushed = true;
+				result.push(groups[action.group].data);
+			}
+		} else result.push(action);
+	});
+	return result;
+}
+var defaultSpotlightFilter = (_query, data) => {
+	const query = _query.trim().toLowerCase();
+	const priorityMatrix = [[], []];
+	getFlatActions(data).forEach((item) => {
+		if (item.label?.toLowerCase().includes(query)) priorityMatrix[0].push(item);
+		else if (item.description?.toLowerCase().includes(query) || getKeywords(item.keywords).includes(query)) priorityMatrix[1].push(item);
+	});
+	return flatActionsToGroups(priorityMatrix.flat());
 };
-function renderContent(value) {
-	return typeof value === "function" ? value() : value;
+//#endregion
+//#region src/limit-actions.ts
+function limitActions(actions, limit) {
+	if (!Array.isArray(actions)) return [];
+	let count = 0;
+	return actions.reduce((acc, item) => {
+		if (count >= limit) return acc;
+		if (isActionsGroup(item)) {
+			const groupActions = limitActions(item.actions, limit - count);
+			acc.push({
+				group: item.group,
+				actions: groupActions
+			});
+			count += groupActions.length;
+		} else {
+			acc.push(item);
+			count += 1;
+		}
+		return acc;
+	}, []);
 }
-var SpotlightBase = defineComponent({
+//#endregion
+//#region src/components/Spotlight/Spotlight.vue
+var Spotlight_default = /* @__PURE__ */ defineComponent({
 	name: "Spotlight",
 	inheritAttrs: false,
+	__name: "Spotlight",
 	props: {
-		searchProps: {
-			type: Object,
-			default: void 0
-		},
-		actions: {
-			type: Array,
-			required: true
-		},
+		searchProps: {},
+		actions: {},
 		filter: {
 			type: Function,
-			default: void 0
-		},
-		nothingFound: {
-			type: [
-				String,
-				Number,
-				Object,
-				Function
-			],
-			default: void 0
+			default: defaultSpotlightFilter
 		},
+		nothingFound: {},
 		highlightQuery: {
 			type: Boolean,
 			default: false
 		},
-		limit: {
-			type: Number,
-			default: void 0
-		},
-		scrollAreaProps: {
-			type: Object,
-			default: void 0
-		},
-		query: {
-			type: String,
-			default: void 0
-		},
-		onQueryChange: {
-			type: Function,
-			default: void 0
-		},
-		store: {
-			type: Object,
-			default: void 0
-		},
+		limit: { default: Infinity },
+		scrollAreaProps: {},
+		store: { default: () => spotlightStore },
+		query: {},
 		clearQueryOnClose: {
 			type: Boolean,
-			default: void 0
-		},
-		shortcut: {
-			type: [String, Array],
-			default: void 0
-		},
-		tagsToIgnore: {
-			type: Array,
-			default: void 0
-		},
-		triggerOnContentEditable: {
-			type: Boolean,
-			default: void 0
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		onSpotlightOpen: {
-			type: Function,
-			default: void 0
-		},
-		onSpotlightClose: {
-			type: Function,
-			default: void 0
-		},
-		forceOpened: {
-			type: Boolean,
-			default: false
+			default: true
 		},
+		shortcut: { default: "mod + K" },
+		tagsToIgnore: {},
+		triggerOnContentEditable: { type: Boolean },
+		disabled: { type: Boolean },
+		forceOpened: { type: Boolean },
 		closeOnActionTrigger: {
 			type: Boolean,
-			default: void 0
-		},
-		maxHeight: {
-			type: [String, Number],
-			default: void 0
-		},
-		scrollable: {
-			type: Boolean,
-			default: false
-		},
-		classNames: {
-			type: [Object, Function],
-			default: void 0
-		},
-		styles: {
-			type: [Object, Function],
-			default: void 0
-		},
-		vars: {
-			type: [Object, Function],
-			default: void 0
-		},
-		unstyled: {
-			type: Boolean,
-			default: false
-		}
+			default: true
+		},
+		maxHeight: {},
+		scrollable: { type: Boolean },
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: { type: Boolean }
 	},
-	setup(rawProps, { attrs }) {
-		const props = useProps("Spotlight", defaultProps, rawProps);
+	emits: [
+		"update:query",
+		"query-change",
+		"spotlight-open",
+		"spotlight-close",
+		"exit-transition-end"
+	],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const props = useProps("Spotlight", {
+			size: 600,
+			yOffset: 80,
+			zIndex: getDefaultZIndex("max"),
+			overlayProps: {
+				backgroundOpacity: .35,
+				blur: 7
+			},
+			transitionProps: {
+				duration: 200,
+				transition: "pop"
+			}
+		}, rawProps);
 		const uncontrolledQuery = ref("");
 		const currentQuery = computed(() => typeof props.query === "string" ? props.query : uncontrolledQuery.value);
-		const setQuery = (query) => {
-			if (typeof props.query !== "string") uncontrolledQuery.value = query;
-			props.onQueryChange?.(query);
-		};
-		return () => {
-			const renderedActions = limitActions(props.filter(currentQuery.value, props.actions), props.limit).map((item) => {
-				if (isActionsGroup(item)) return h(SpotlightActionsGroup, {
-					key: item.group,
-					label: item.group
-				}, () => item.actions.map(({ id, ...actionData }) => h(SpotlightAction, {
-					key: id,
-					highlightQuery: props.highlightQuery,
-					...actionData
-				})));
-				const { id, ...actionData } = item;
-				return h(SpotlightAction, {
-					key: id,
-					highlightQuery: props.highlightQuery,
-					...actionData
-				});
-			});
-			const { searchProps: _searchProps, actions: _actions, filter: _filter, nothingFound: _nothingFound, highlightQuery: _highlightQuery, limit: _limit, scrollAreaProps: _scrollAreaProps, query: _query, onQueryChange: _onQueryChange, ...rootProps } = props;
-			return h(SpotlightRoot, {
+		const filteredActions = computed(() => limitActions(props.filter(currentQuery.value, props.actions), props.limit));
+		const rootProps = computed(() => {
+			const value = {
 				...attrs,
-				...rootProps,
+				...props
+			};
+			for (const key of [
+				"searchProps",
+				"actions",
+				"filter",
+				"nothingFound",
+				"highlightQuery",
+				"limit",
+				"scrollAreaProps",
+				"query"
+			]) delete value[key];
+			return value;
+		});
+		function setQuery(query) {
+			if (typeof props.query !== "string") uncontrolledQuery.value = query;
+			emit("update:query", query);
+			emit("query-change", query);
+		}
+		function actionProps(action) {
+			const value = { ...action };
+			delete value.id;
+			delete value.group;
+			return value;
+		}
+		const renderNothingFound = () => typeof props.nothingFound === "function" ? props.nothingFound() : props.nothingFound;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SpotlightRoot_default, mergeProps(rootProps.value, {
 				query: currentQuery.value,
 				onQueryChange: setQuery
-			}, () => [
-				h(SpotlightSearch, props.searchProps),
-				renderedActions.length > 0 ? h(SpotlightActionsList, props.scrollAreaProps, () => renderedActions) : null,
-				renderedActions.length === 0 && props.nothingFound ? h(SpotlightEmpty, null, () => renderContent(props.nothingFound)) : null
-			]);
+			}), {
+				default: withCtx(() => [createVNode(SpotlightSearch_default, normalizeProps(guardReactiveProps(unref(props).searchProps)), null, 16), filteredActions.value.length ? (openBlock(), createBlock(SpotlightActionsList_default, normalizeProps(mergeProps({ key: 0 }, unref(props).scrollAreaProps)), {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredActions.value, (item) => {
+						return openBlock(), createElementBlock(Fragment, { key: unref(isActionsGroup)(item) ? item.group : item.id }, [unref(isActionsGroup)(item) ? (openBlock(), createBlock(SpotlightActionsGroup_default, {
+							key: 0,
+							label: item.group
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.actions, (action) => {
+								return openBlock(), createBlock(SpotlightAction_default, mergeProps({ key: action.id }, { ref_for: true }, actionProps(action), { "highlight-query": unref(props).highlightQuery }), null, 16, ["highlight-query"]);
+							}), 128))]),
+							_: 2
+						}, 1032, ["label"])) : (openBlock(), createBlock(SpotlightAction_default, mergeProps({
+							key: 1,
+							ref_for: true
+						}, actionProps(item), { "highlight-query": unref(props).highlightQuery }), null, 16, ["highlight-query"]))], 64);
+					}), 128))]),
+					_: 1
+				}, 16)) : unref(props).nothingFound ? (openBlock(), createBlock(SpotlightEmpty_default, { key: 1 }, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderNothingFound)))]),
+					_: 1
+				})) : createCommentVNode("", true)]),
+				_: 1
+			}, 16, ["query"]);
 		};
 	}
 });
-var Spotlight = Object.assign(SpotlightBase, {
+//#endregion
+//#region src/components/SpotlightAction/index.ts
+var SpotlightAction = Object.assign(SpotlightAction_default, { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/SpotlightActionsGroup/index.ts
+var SpotlightActionsGroup = Object.assign(SpotlightActionsGroup_default, { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/SpotlightActionsList/index.ts
+var SpotlightActionsList = Object.assign(SpotlightActionsList_default, { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/SpotlightEmpty/index.ts
+var SpotlightEmpty = Object.assign(SpotlightEmpty_default, { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/SpotlightFooter/index.ts
+var SpotlightFooter = Object.assign(/* @__PURE__ */ defineComponent({
+	name: "SpotlightFooter",
+	inheritAttrs: false,
+	__name: "SpotlightFooter",
+	props: {
+		classNames: {},
+		styles: {},
+		vars: {}
+	},
+	setup(__props) {
+		const rawProps = __props;
+		const attrs = useAttrs();
+		const props = useProps("SpotlightFooter", null, rawProps);
+		const ctx = useSpotlightContext();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), normalizeProps(guardReactiveProps({
+				...unref(attrs),
+				...unref(ctx).getStyles("footer", {
+					className: unref(attrs).class,
+					style: unref(attrs).style,
+					classNames: unref(props).classNames,
+					styles: unref(props).styles
+				})
+			})), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+}), { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/SpotlightRoot/index.ts
+var SpotlightRoot = Object.assign(SpotlightRoot_default, { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/SpotlightSearch/index.ts
+var SpotlightSearch = Object.assign(SpotlightSearch_default, { classes: Spotlight_module_default });
+//#endregion
+//#region src/components/Spotlight/index.ts
+var Spotlight = Object.assign(Spotlight_default, {
 	classes: Spotlight_module_default,
 	Search: SpotlightSearch,
 	ActionsList: SpotlightActionsList,