@alfakit/vue 0.1.9 → 0.1.10

package/dist/components/fields/DatePickerField.vue_vue_type_script_setup_true_lang.js

@@ -19,80 +19,80 @@ import { format as O, isValid as k, parse as A } from "date-fns";
 var ue = {
 	key: 0,
 	class: "border-t p-3"
-}, de = ["id"], fe = ["value"], j = () => import("../ui/Calendar.js").then((e) => e.default), M = c("AlfakitCalendar", j, x({
+}, de = ["id"], fe = ["value"], j = () => import("../ui/Calendar.js").then((e) => e.default), pe = c("AlfakitCalendar", j, x({
 	name: "AlfakitCalendarLoading",
 	inheritAttrs: !1,
 	render: () => S("div", {
 		"aria-busy": "true",
 		class: "h-[18.5rem] w-[15.5rem]"
 	})
-})), N = /*@__PURE__*/ x({
+})), M = /*@__PURE__*/ x({
 	__name: "DatePickerField",
 	props: { component: {} },
 	setup(c) {
-		let x = c, { value: S, setValue: N, blur: P, error: F, id: I, disabled: L, readOnly: R, aria: z } = o(() => x.component), B = se(!1), V = g(() => u(x.component.format)), pe = r(), H = e(), U = t(), me = n(), W = g(() => x.component.locale ?? me.value?.tag ?? "en"), he = g(() => x.component.locale ? new f(x.component.locale, U.value.currencyCode, U.value.timeZone) : U.value), G = g(() => x.component.datalist ? `${I}-list` : void 0), ge = (e) => x.component.displayFormat ? re(e, x.component.displayFormat, W.value) : he.value.date(e, {
+		let x = c, { value: S, setValue: M, blur: N, error: P, id: F, disabled: I, readOnly: L, aria: R } = o(() => x.component), z = se(!1), B = g(() => u(x.component.format)), V = r(), H = e(), U = t(), me = n(), W = g(() => x.component.locale ?? me.value?.tag ?? "en"), he = g(() => x.component.locale ? new f(x.component.locale, U.value.currencyCode, U.value.timeZone) : U.value), G = g(() => x.component.datalist ? `${F}-list` : void 0), ge = (e) => x.component.displayFormat ? re(e, x.component.displayFormat, W.value) : he.value.date(e, {
 			...x.component.hasDate ? { dateStyle: "medium" } : {},
 			...x.component.hasTime ? { timeStyle: "short" } : {},
 			timeZone: void 0
-		}), K = g(() => x.component.hasDate ? x.component.hasTime ? "datetime-local" : "date" : "time"), q = g(() => K.value === "time" ? x.component.hasSeconds ? "HH:mm:ss" : "HH:mm" : K.value === "datetime-local" ? x.component.hasSeconds ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd'T'HH:mm" : "yyyy-MM-dd"), J = g(() => S.value ? A(S.value, V.value, /* @__PURE__ */ new Date()) : null), Y = g(() => J.value && k(J.value) ? J.value : void 0), _e = g(() => Y.value ? O(Y.value, q.value) : S.value ?? "");
+		}), K = g(() => x.component.hasDate ? x.component.hasTime ? "datetime-local" : "date" : "time"), q = g(() => K.value === "time" ? x.component.hasSeconds ? "HH:mm:ss" : "HH:mm" : K.value === "datetime-local" ? x.component.hasSeconds ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd'T'HH:mm" : "yyyy-MM-dd"), J = g(() => S.value ? A(S.value, B.value, /* @__PURE__ */ new Date()) : null), Y = g(() => J.value && k(J.value) ? J.value : void 0), _e = g(() => Y.value ? O(Y.value, q.value) : S.value ?? "");
 		function X(e) {
-			let t = A(e, V.value, /* @__PURE__ */ new Date());
+			let t = A(e, B.value, /* @__PURE__ */ new Date());
 			return k(t) ? O(t, q.value) : void 0;
 		}
 		function Z(e) {
-			return A(e, V.value, /* @__PURE__ */ new Date());
+			return A(e, B.value, /* @__PURE__ */ new Date());
 		}
 		let ve = (e) => {
 			if (e === "") {
-				N(null);
+				M(null);
 				return;
 			}
 			let t = A(e, q.value, /* @__PURE__ */ new Date());
-			N(k(t) ? O(t, V.value) : e);
+			M(k(t) ? O(t, B.value) : e);
 		}, Q = (e) => new D(e.getFullYear(), e.getMonth() + 1, e.getDate()), ye = g(() => Y.value ? Q(Y.value) : void 0), be = g(() => x.component.minDate ? Q(Z(x.component.minDate)) : void 0), xe = g(() => x.component.maxDate ? Q(Z(x.component.maxDate)) : void 0), Se = g(() => (x.component.disabledDates ?? []).map((e) => Q(Z(e)).toString())), Ce = (e) => Se.value.includes(e.toString()), we = g(() => {
 			if (!x.component.defaultFocusedDate) return;
 			let e = Z(x.component.defaultFocusedDate);
 			return k(e) ? Q(e) : void 0;
 		}), $ = g(() => p(x.component)), Te = (e) => {
 			if (!e) {
-				N(null);
+				M(null);
 				return;
 			}
 			let t = Y.value, n = new Date(e.year, e.month - 1, e.day, t?.getHours() ?? 0, t?.getMinutes() ?? 0, t?.getSeconds() ?? 0);
-			N(O(n, V.value)), x.component.closeOnDateSelection && !x.component.hasTime && (B.value = !1, P());
+			M(O(n, B.value)), x.component.closeOnDateSelection && !x.component.hasTime && (z.value = !1, N());
 		}, Ee = g(() => Y.value ? O(Y.value, x.component.hasSeconds ? "HH:mm:ss" : "HH:mm") : ""), De = (e) => {
 			let t = Y.value ?? m(x.component.timezone), [n = "0", r = "0", i = "0"] = e.split(":"), a = new Date(t.getFullYear(), t.getMonth(), t.getDate(), Number(n), Number(r), Number(i));
-			N(O(a, V.value));
+			M(O(a, B.value));
 		}, Oe = g(() => x.component.firstDayOfWeek ?? 1);
 		return (e, t) => (C(), _(l, {
 			field: x.component,
-			"html-for": w(I),
-			error: w(F)
+			"html-for": w(F),
+			error: w(P)
 		}, {
 			default: T(() => [b(d, {
 				component: x.component,
-				error: w(F)
+				error: w(P)
 			}, {
 				default: T(() => [x.component.native || !x.component.hasDate ? (C(), _(s, ae({
 					key: 0,
-					id: w(I),
+					id: w(F),
 					type: K.value,
 					name: x.component.name,
 					"model-value": _e.value,
 					step: $.value,
 					min: x.component.minDate ? X(x.component.minDate) : void 0,
 					max: x.component.maxDate ? X(x.component.maxDate) : void 0,
-					disabled: w(L),
-					readonly: w(R),
+					disabled: w(I),
+					readonly: w(L),
 					required: x.component.required,
 					lang: x.component.locale,
 					list: G.value,
-					"aria-invalid": w(z)["aria-invalid"],
-					"aria-describedby": w(z)["aria-describedby"],
-					"aria-required": w(z)["aria-required"]
+					"aria-invalid": w(R)["aria-invalid"],
+					"aria-describedby": w(R)["aria-describedby"],
+					"aria-required": w(R)["aria-required"]
 				}, x.component.extraInputAttributes, {
 					"onUpdate:modelValue": ve,
-					onBlur: w(P)
+					onBlur: w(N)
 				}), null, 16, [
 					"id",
 					"type",
@@ -112,23 +112,23 @@ var ue = {
 					"onBlur"
 				])) : (C(), _(ee, {
 					key: 1,
-					open: B.value,
-					"onUpdate:open": t[1] ||= (e) => B.value = e && !w(R)
+					open: z.value,
+					"onUpdate:open": t[1] ||= (e) => z.value = e && !w(L)
 				}, {
 					default: T(() => [b(ne, { "as-child": "" }, {
 						default: T(() => [b(a, {
-							id: w(I),
+							id: w(F),
 							type: "button",
 							"data-input": "",
 							variant: "outline",
-							disabled: w(L),
+							disabled: w(I),
 							onPointerenter: j,
 							onFocus: j,
-							"aria-invalid": w(z)["aria-invalid"],
-							"aria-describedby": w(z)["aria-describedby"],
-							class: oe(w(i)("w-full justify-start font-normal", !Y.value && "text-muted-foreground", w(F) && "border-destructive"))
+							"aria-invalid": w(R)["aria-invalid"],
+							"aria-describedby": w(R)["aria-describedby"],
+							class: oe(w(i)("w-full justify-start font-normal", !Y.value && "text-muted-foreground", w(P) && "border-destructive"))
 						}, {
-							default: T(() => [b(w(E), { class: "size-4" }), ie(" " + le(Y.value ? ge(Y.value) : x.component.placeholder ?? w(pe)("form.pick_date", {}, "Pick a date")), 1)]),
+							default: T(() => [b(w(E), { class: "size-4" }), ie(" " + le(Y.value ? ge(Y.value) : x.component.placeholder ?? w(V)("form.pick_date", {}, "Pick a date")), 1)]),
 							_: 1
 						}, 8, [
 							"id",
@@ -142,8 +142,9 @@ var ue = {
 						class: "w-auto p-0",
 						align: "start"
 					}, {
-						default: T(() => [b(w(M), {
+						default: T(() => [b(w(pe), {
 							"model-value": ye.value,
+							"calendar-label": x.component.label || w(V)("form.pick_date", {}, "Pick a date"),
 							locale: W.value,
 							dir: w(H),
 							today: Q(w(m)(x.component.timezone)),
@@ -156,6 +157,7 @@ var ue = {
 							"onUpdate:modelValue": t[0] ||= (e) => Te(e)
 						}, null, 8, [
 							"model-value",
+							"calendar-label",
 							"locale",
 							"dir",
 							"today",
@@ -168,7 +170,7 @@ var ue = {
 							step: $.value,
 							"model-value": Ee.value,
 							"onUpdate:modelValue": De,
-							onBlur: w(P)
+							onBlur: w(N)
 						}, null, 8, [
 							"step",
 							"model-value",
@@ -195,6 +197,6 @@ var ue = {
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };
 
 //# sourceMappingURL=DatePickerField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/DatePickerField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerField.vue_vue_type_script_setup_true_lang.js","names":["format","formatDate","_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","SelectAffixes","Input","_mergeProps","Popover","PopoverTrigger","Button","_normalizeClass","_createTextVNode","_toDisplayString","PopoverContent","_createElementBlock","_createCommentVNode","_Fragment","_renderList","Button_default","Input_default","Popover_default","PopoverContent_default","PopoverTrigger_default","FieldWrapper_default","SelectAffixes_default","_hoisted_1","_hoisted_2","_hoisted_3","loadCalendar","module","Calendar","lazyComponent","defineComponent","h","DatePickerField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","open","ref","storageFormat","computed","phpToDateFnsFormat","t","useT","direction","useDirection","panelFormat","useFormatter","localization","useLocalization","locale","format$1","LocaleFormatter","listId","id","display","formatPhpDate","date","nativeType","nativeFormat","parsed","value","parse","selectedDate","isValid","nativeValue","format","toNative","raw","parseStored","onNativeInput","toCalendarDate","CalendarDate","calendarValue","minValue","maxValue","disabledDates","isDateDisabled","focusedPlaceholder","step","timeInputStep","onSelect","next","base","withTime","setValue","blur","timeValue","onTimeInput","wallClockNow","hours","minutes","seconds","weekStartsOn","openBlock","createBlock","unref","error","withCtx","createVNode","mergeProps","disabled","readOnly","aria","_cache","$event","normalizeClass","cn","CalendarIcon","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","Fragment","renderList","option"],"sources":["../../../src/components/fields/DatePickerField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The month grid (reka-ui) loads the first time a picker opens (or is hovered or focused),\n// not with the form.\nconst loadCalendar = () => import('../ui/Calendar.vue').then((module) => module.default)\nconst Calendar = lazyComponent(\n  'AlfakitCalendar',\n  loadCalendar,\n  defineComponent({\n    name: 'AlfakitCalendarLoading',\n    inheritAttrs: false,\n    render: () => h('div', { 'aria-busy': 'true', class: 'h-[18.5rem] w-[15.5rem]' }),\n  }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  formatPhpDate,\n  LocaleFormatter,\n  timeInputStep,\n  wallClockNow,\n  type DatePickerSchema,\n} from '@alfakit/core'\nimport { CalendarDate, type DateValue } from '@internationalized/date'\nimport { CalendarIcon } from '@lucide/vue'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport { phpToDateFnsFormat } from './date-format'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: DatePickerSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n  () => props.component,\n)\nconst open = ref(false)\n\nconst storageFormat = computed(() => phpToDateFnsFormat(props.component.format))\nconst t = useT()\nconst direction = useDirection()\nconst panelFormat = useFormatter()\nconst localization = useLocalization()\n// `locale()` overrides the panel's language for this picker only.\nconst locale = computed(() => props.component.locale ?? localization.value?.tag ?? 'en')\nconst format = computed(() =>\n  props.component.locale\n    ? new LocaleFormatter(\n        props.component.locale,\n        panelFormat.value.currencyCode,\n        panelFormat.value.timeZone,\n      )\n    : panelFormat.value,\n)\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\n\n// Month and weekday names come from Intl, so they follow the user's language.\nconst display = (date: Date): string =>\n  props.component.displayFormat\n    ? formatPhpDate(date, props.component.displayFormat, locale.value)\n    : format.value.date(date, {\n        ...(props.component.hasDate ? { dateStyle: 'medium' as const } : {}),\n        ...(props.component.hasTime ? { timeStyle: 'short' as const } : {}),\n        timeZone: undefined,\n      })\n\nconst nativeType = computed(() =>\n  !props.component.hasDate ? 'time' : props.component.hasTime ? 'datetime-local' : 'date',\n)\nconst nativeFormat = computed(() =>\n  nativeType.value === 'time'\n    ? props.component.hasSeconds\n      ? 'HH:mm:ss'\n      : 'HH:mm'\n    : nativeType.value === 'datetime-local'\n      ? props.component.hasSeconds\n        ? \"yyyy-MM-dd'T'HH:mm:ss\"\n        : \"yyyy-MM-dd'T'HH:mm\"\n      : 'yyyy-MM-dd',\n)\n\nconst parsed = computed(() =>\n  value.value ? parse(value.value, storageFormat.value, new Date()) : null,\n)\nconst selectedDate = computed(() =>\n  parsed.value && isValid(parsed.value) ? parsed.value : undefined,\n)\nconst nativeValue = computed(() =>\n  selectedDate.value ? formatDate(selectedDate.value, nativeFormat.value) : (value.value ?? ''),\n)\n\nfunction toNative(raw: string): string | undefined {\n  const date = parse(raw, storageFormat.value, new Date())\n\n  return isValid(date) ? formatDate(date, nativeFormat.value) : undefined\n}\n\nfunction parseStored(raw: string): Date {\n  return parse(raw, storageFormat.value, new Date())\n}\n\nconst onNativeInput = (raw: string) => {\n  if (raw === '') {\n    setValue(null)\n\n    return\n  }\n\n  const date = parse(raw, nativeFormat.value, new Date())\n  setValue(isValid(date) ? formatDate(date, storageFormat.value) : raw)\n}\n\n// Calendar (reka-ui) works with @internationalized/date values.\nconst toCalendarDate = (date: Date): CalendarDate =>\n  new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())\nconst calendarValue = computed(() =>\n  selectedDate.value ? toCalendarDate(selectedDate.value) : undefined,\n)\nconst minValue = computed(() =>\n  props.component.minDate ? toCalendarDate(parseStored(props.component.minDate)) : undefined,\n)\nconst maxValue = computed(() =>\n  props.component.maxDate ? toCalendarDate(parseStored(props.component.maxDate)) : undefined,\n)\nconst disabledDates = computed(() =>\n  (props.component.disabledDates ?? []).map((date) => toCalendarDate(parseStored(date)).toString()),\n)\nconst isDateDisabled = (date: DateValue) => disabledDates.value.includes(date.toString())\n// `defaultFocusedDate()`: the month the calendar opens on while the field is empty.\nconst focusedPlaceholder = computed(() => {\n  if (!props.component.defaultFocusedDate) return undefined\n\n  const date = parseStored(props.component.defaultFocusedDate)\n\n  return isValid(date) ? toCalendarDate(date) : undefined\n})\nconst step = computed(() => timeInputStep(props.component))\n\nconst onSelect = (next: DateValue | undefined) => {\n  if (!next) {\n    setValue(null)\n\n    return\n  }\n\n  const base = selectedDate.value\n  const withTime = new Date(\n    next.year,\n    next.month - 1,\n    next.day,\n    base?.getHours() ?? 0,\n    base?.getMinutes() ?? 0,\n    base?.getSeconds() ?? 0,\n  )\n  setValue(formatDate(withTime, storageFormat.value))\n\n  if (props.component.closeOnDateSelection && !props.component.hasTime) {\n    open.value = false\n    blur()\n  }\n}\n\nconst timeValue = computed(() =>\n  selectedDate.value\n    ? formatDate(selectedDate.value, props.component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n    : '',\n)\n\nconst onTimeInput = (raw: string) => {\n  const base = selectedDate.value ?? wallClockNow(props.component.timezone)\n  const [hours = '0', minutes = '0', seconds = '0'] = raw.split(':')\n  const next = new Date(\n    base.getFullYear(),\n    base.getMonth(),\n    base.getDate(),\n    Number(hours),\n    Number(minutes),\n    Number(seconds),\n  )\n  setValue(formatDate(next, storageFormat.value))\n}\n\n// Kept out of the template: a `|` union there is parsed as a (removed) Vue 2 filter.\nconst weekStartsOn = computed(\n  () => (props.component.firstDayOfWeek ?? 1) as 0 | 1 | 2 | 3 | 4 | 5 | 6,\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <SelectAffixes :component=\"props.component\" :error=\"error\">\n      <Input\n        v-if=\"props.component.native || !props.component.hasDate\"\n        :id=\"id\"\n        :type=\"nativeType\"\n        :name=\"props.component.name\"\n        :model-value=\"nativeValue\"\n        :step=\"step\"\n        :min=\"props.component.minDate ? toNative(props.component.minDate) : undefined\"\n        :max=\"props.component.maxDate ? toNative(props.component.maxDate) : undefined\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :required=\"props.component.required\"\n        :lang=\"props.component.locale\"\n        :list=\"listId\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        v-bind=\"props.component.extraInputAttributes\"\n        @update:model-value=\"onNativeInput\"\n        @blur=\"blur\"\n      />\n      <Popover v-else :open=\"open\" @update:open=\"open = $event && !readOnly\">\n        <PopoverTrigger as-child>\n          <Button\n            :id=\"id\"\n            type=\"button\"\n            data-input=\"\"\n            variant=\"outline\"\n            :disabled=\"disabled\"\n            @pointerenter=\"loadCalendar\"\n            @focus=\"loadCalendar\"\n            :aria-invalid=\"aria['aria-invalid']\"\n            :aria-describedby=\"aria['aria-describedby']\"\n            :class=\"\n              cn(\n                'w-full justify-start font-normal',\n                !selectedDate && 'text-muted-foreground',\n                error && 'border-destructive',\n              )\n            \"\n          >\n            <CalendarIcon class=\"size-4\" />\n            {{\n              selectedDate\n                ? display(selectedDate)\n                : (props.component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))\n            }}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            :model-value=\"calendarValue\"\n            :locale=\"locale\"\n            :dir=\"direction\"\n            :today=\"toCalendarDate(wallClockNow(props.component.timezone))\"\n            :week-starts-on=\"weekStartsOn\"\n            :min-value=\"minValue\"\n            :max-value=\"maxValue\"\n            :default-placeholder=\"focusedPlaceholder\"\n            :is-date-disabled=\"isDateDisabled\"\n            initial-focus\n            @update:model-value=\"onSelect($event as DateValue | undefined)\"\n          />\n          <div v-if=\"props.component.hasTime\" class=\"border-t p-3\">\n            <Input\n              type=\"time\"\n              :step=\"step\"\n              :model-value=\"timeValue\"\n              @update:model-value=\"onTimeInput\"\n              @blur=\"blur\"\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n      <datalist\n        v-if=\"(props.component.native || !props.component.hasDate) && props.component.datalist\"\n        :id=\"listId\"\n      >\n        <option\n          v-for=\"option in props.component.datalist\"\n          :key=\"option\"\n          :value=\"toNative(option) ?? option\"\n        />\n      </datalist>\n    </SelectAffixes>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerField.vue_vue_type_script_setup_true_lang.js","names":["format","formatDate","_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","SelectAffixes","Input","_mergeProps","Popover","PopoverTrigger","Button","_normalizeClass","_createTextVNode","_toDisplayString","PopoverContent","_createElementBlock","_createCommentVNode","_Fragment","_renderList","Button_default","Input_default","Popover_default","PopoverContent_default","PopoverTrigger_default","FieldWrapper_default","SelectAffixes_default","_hoisted_1","_hoisted_2","_hoisted_3","loadCalendar","module","Calendar","lazyComponent","defineComponent","h","DatePickerField_vue_vue_type_script_setup_true_lang_default","props","__props","useField","open","ref","storageFormat","computed","phpToDateFnsFormat","t","useT","direction","useDirection","panelFormat","useFormatter","localization","useLocalization","locale","format$1","LocaleFormatter","listId","id","display","formatPhpDate","date","nativeType","nativeFormat","parsed","value","parse","selectedDate","isValid","nativeValue","format","toNative","raw","parseStored","onNativeInput","toCalendarDate","CalendarDate","calendarValue","minValue","maxValue","disabledDates","isDateDisabled","focusedPlaceholder","step","timeInputStep","onSelect","next","base","withTime","setValue","blur","timeValue","onTimeInput","wallClockNow","hours","minutes","seconds","weekStartsOn","openBlock","createBlock","unref","error","withCtx","createVNode","mergeProps","disabled","readOnly","aria","_cache","$event","normalizeClass","cn","CalendarIcon","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","Fragment","renderList","option"],"sources":["../../../src/components/fields/DatePickerField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The month grid (reka-ui) loads the first time a picker opens (or is hovered or focused),\n// not with the form.\nconst loadCalendar = () => import('../ui/Calendar.vue').then((module) => module.default)\nconst Calendar = lazyComponent(\n  'AlfakitCalendar',\n  loadCalendar,\n  defineComponent({\n    name: 'AlfakitCalendarLoading',\n    inheritAttrs: false,\n    render: () => h('div', { 'aria-busy': 'true', class: 'h-[18.5rem] w-[15.5rem]' }),\n  }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  formatPhpDate,\n  LocaleFormatter,\n  timeInputStep,\n  wallClockNow,\n  type DatePickerSchema,\n} from '@alfakit/core'\nimport { CalendarDate, type DateValue } from '@internationalized/date'\nimport { CalendarIcon } from '@lucide/vue'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { computed, ref } from 'vue'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport { phpToDateFnsFormat } from './date-format'\nimport SelectAffixes from './SelectAffixes.vue'\n\nconst props = defineProps<{ component: DatePickerSchema }>()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n  () => props.component,\n)\nconst open = ref(false)\n\nconst storageFormat = computed(() => phpToDateFnsFormat(props.component.format))\nconst t = useT()\nconst direction = useDirection()\nconst panelFormat = useFormatter()\nconst localization = useLocalization()\n// `locale()` overrides the panel's language for this picker only.\nconst locale = computed(() => props.component.locale ?? localization.value?.tag ?? 'en')\nconst format = computed(() =>\n  props.component.locale\n    ? new LocaleFormatter(\n        props.component.locale,\n        panelFormat.value.currencyCode,\n        panelFormat.value.timeZone,\n      )\n    : panelFormat.value,\n)\nconst listId = computed(() => (props.component.datalist ? `${id}-list` : undefined))\n\n// Month and weekday names come from Intl, so they follow the user's language.\nconst display = (date: Date): string =>\n  props.component.displayFormat\n    ? formatPhpDate(date, props.component.displayFormat, locale.value)\n    : format.value.date(date, {\n        ...(props.component.hasDate ? { dateStyle: 'medium' as const } : {}),\n        ...(props.component.hasTime ? { timeStyle: 'short' as const } : {}),\n        timeZone: undefined,\n      })\n\nconst nativeType = computed(() =>\n  !props.component.hasDate ? 'time' : props.component.hasTime ? 'datetime-local' : 'date',\n)\nconst nativeFormat = computed(() =>\n  nativeType.value === 'time'\n    ? props.component.hasSeconds\n      ? 'HH:mm:ss'\n      : 'HH:mm'\n    : nativeType.value === 'datetime-local'\n      ? props.component.hasSeconds\n        ? \"yyyy-MM-dd'T'HH:mm:ss\"\n        : \"yyyy-MM-dd'T'HH:mm\"\n      : 'yyyy-MM-dd',\n)\n\nconst parsed = computed(() =>\n  value.value ? parse(value.value, storageFormat.value, new Date()) : null,\n)\nconst selectedDate = computed(() =>\n  parsed.value && isValid(parsed.value) ? parsed.value : undefined,\n)\nconst nativeValue = computed(() =>\n  selectedDate.value ? formatDate(selectedDate.value, nativeFormat.value) : (value.value ?? ''),\n)\n\nfunction toNative(raw: string): string | undefined {\n  const date = parse(raw, storageFormat.value, new Date())\n\n  return isValid(date) ? formatDate(date, nativeFormat.value) : undefined\n}\n\nfunction parseStored(raw: string): Date {\n  return parse(raw, storageFormat.value, new Date())\n}\n\nconst onNativeInput = (raw: string) => {\n  if (raw === '') {\n    setValue(null)\n\n    return\n  }\n\n  const date = parse(raw, nativeFormat.value, new Date())\n  setValue(isValid(date) ? formatDate(date, storageFormat.value) : raw)\n}\n\n// Calendar (reka-ui) works with @internationalized/date values.\nconst toCalendarDate = (date: Date): CalendarDate =>\n  new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())\nconst calendarValue = computed(() =>\n  selectedDate.value ? toCalendarDate(selectedDate.value) : undefined,\n)\nconst minValue = computed(() =>\n  props.component.minDate ? toCalendarDate(parseStored(props.component.minDate)) : undefined,\n)\nconst maxValue = computed(() =>\n  props.component.maxDate ? toCalendarDate(parseStored(props.component.maxDate)) : undefined,\n)\nconst disabledDates = computed(() =>\n  (props.component.disabledDates ?? []).map((date) => toCalendarDate(parseStored(date)).toString()),\n)\nconst isDateDisabled = (date: DateValue) => disabledDates.value.includes(date.toString())\n// `defaultFocusedDate()`: the month the calendar opens on while the field is empty.\nconst focusedPlaceholder = computed(() => {\n  if (!props.component.defaultFocusedDate) return undefined\n\n  const date = parseStored(props.component.defaultFocusedDate)\n\n  return isValid(date) ? toCalendarDate(date) : undefined\n})\nconst step = computed(() => timeInputStep(props.component))\n\nconst onSelect = (next: DateValue | undefined) => {\n  if (!next) {\n    setValue(null)\n\n    return\n  }\n\n  const base = selectedDate.value\n  const withTime = new Date(\n    next.year,\n    next.month - 1,\n    next.day,\n    base?.getHours() ?? 0,\n    base?.getMinutes() ?? 0,\n    base?.getSeconds() ?? 0,\n  )\n  setValue(formatDate(withTime, storageFormat.value))\n\n  if (props.component.closeOnDateSelection && !props.component.hasTime) {\n    open.value = false\n    blur()\n  }\n}\n\nconst timeValue = computed(() =>\n  selectedDate.value\n    ? formatDate(selectedDate.value, props.component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n    : '',\n)\n\nconst onTimeInput = (raw: string) => {\n  const base = selectedDate.value ?? wallClockNow(props.component.timezone)\n  const [hours = '0', minutes = '0', seconds = '0'] = raw.split(':')\n  const next = new Date(\n    base.getFullYear(),\n    base.getMonth(),\n    base.getDate(),\n    Number(hours),\n    Number(minutes),\n    Number(seconds),\n  )\n  setValue(formatDate(next, storageFormat.value))\n}\n\n// Kept out of the template: a `|` union there is parsed as a (removed) Vue 2 filter.\nconst weekStartsOn = computed(\n  () => (props.component.firstDayOfWeek ?? 1) as 0 | 1 | 2 | 3 | 4 | 5 | 6,\n)\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <SelectAffixes :component=\"props.component\" :error=\"error\">\n      <Input\n        v-if=\"props.component.native || !props.component.hasDate\"\n        :id=\"id\"\n        :type=\"nativeType\"\n        :name=\"props.component.name\"\n        :model-value=\"nativeValue\"\n        :step=\"step\"\n        :min=\"props.component.minDate ? toNative(props.component.minDate) : undefined\"\n        :max=\"props.component.maxDate ? toNative(props.component.maxDate) : undefined\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :required=\"props.component.required\"\n        :lang=\"props.component.locale\"\n        :list=\"listId\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        v-bind=\"props.component.extraInputAttributes\"\n        @update:model-value=\"onNativeInput\"\n        @blur=\"blur\"\n      />\n      <Popover v-else :open=\"open\" @update:open=\"open = $event && !readOnly\">\n        <PopoverTrigger as-child>\n          <Button\n            :id=\"id\"\n            type=\"button\"\n            data-input=\"\"\n            variant=\"outline\"\n            :disabled=\"disabled\"\n            @pointerenter=\"loadCalendar\"\n            @focus=\"loadCalendar\"\n            :aria-invalid=\"aria['aria-invalid']\"\n            :aria-describedby=\"aria['aria-describedby']\"\n            :class=\"\n              cn(\n                'w-full justify-start font-normal',\n                !selectedDate && 'text-muted-foreground',\n                error && 'border-destructive',\n              )\n            \"\n          >\n            <CalendarIcon class=\"size-4\" />\n            {{\n              selectedDate\n                ? display(selectedDate)\n                : (props.component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))\n            }}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            :model-value=\"calendarValue\"\n            :calendar-label=\"props.component.label || t('form.pick_date', {}, 'Pick a date')\"\n            :locale=\"locale\"\n            :dir=\"direction\"\n            :today=\"toCalendarDate(wallClockNow(props.component.timezone))\"\n            :week-starts-on=\"weekStartsOn\"\n            :min-value=\"minValue\"\n            :max-value=\"maxValue\"\n            :default-placeholder=\"focusedPlaceholder\"\n            :is-date-disabled=\"isDateDisabled\"\n            initial-focus\n            @update:model-value=\"onSelect($event as DateValue | undefined)\"\n          />\n          <div v-if=\"props.component.hasTime\" class=\"border-t p-3\">\n            <Input\n              type=\"time\"\n              :step=\"step\"\n              :model-value=\"timeValue\"\n              @update:model-value=\"onTimeInput\"\n              @blur=\"blur\"\n            />\n          </div>\n        </PopoverContent>\n      </Popover>\n      <datalist\n        v-if=\"(props.component.native || !props.component.hasDate) && props.component.datalist\"\n        :id=\"listId\"\n      >\n        <option\n          v-for=\"option in props.component.datalist\"\n          :key=\"option\"\n          :value=\"toNative(option) ?? option\"\n        />\n      </datalist>\n    </SelectAffixes>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/RichEditorSuggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditorSuggestions.js","names":["_sfc_main","RichEditorSuggestions_vue_vue_type_script_setup_true_lang_default","RichEditorSuggestions_default"],"sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EditorSuggestions } from '@alfakit/core'\nimport type { Editor } from '@tiptap/vue-3'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useStore } from '../../composables/use-store'\n\n/** The mention / merge tag listbox under the trigger. */\nconst props = defineProps<{\n  suggestions: EditorSuggestions\n  editor: Editor | undefined\n  id: string\n}>()\nconst t = useT()\nconst state = useStore(props.suggestions.store)\n</script>\n\n<template>\n  <div\n    v-if=\"state.open && props.editor\"\n    :id=\"props.id\"\n    role=\"listbox\"\n    :aria-label=\"t('editor.suggestions', {}, 'Suggestions')\"\n    data-slot=\"rich-editor-suggestions\"\n    class=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n    :style=\"\n      state.coords\n        ? { left: `${state.coords.left}px`, top: `${state.coords.bottom + 4}px` }\n        : undefined\n    \"\n  >\n    <div\n      v-if=\"state.loading && state.items.length === 0\"\n      class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n    >\n      {{ t('loading', {}, 'Loading…') }}\n    </div>\n    <div v-else-if=\"state.items.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n      {{ t('no_results', {}, 'No results.') }}\n    </div>\n    <template v-else>\n      <div\n        v-for=\"(item, index) in state.items\"\n        :id=\"`${props.id}-${index}`\"\n        :key=\"item.id\"\n        role=\"option\"\n        :aria-selected=\"index === state.index\"\n        :class=\"\n          cn(\n            'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n            index === state.index && 'bg-accent text-accent-foreground',\n          )\n        \"\n        @mousedown.prevent\n        @mouseenter=\"props.suggestions.highlight(index)\"\n        @click=\"props.editor && props.suggestions.select(index, props.editor)\"\n      >\n        {{ state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label }}\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RichEditorSuggestions.js","names":["_sfc_main","RichEditorSuggestions_vue_vue_type_script_setup_true_lang_default","RichEditorSuggestions_default"],"sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { fixedContainingBlockOffset, type EditorSuggestions } from '@alfakit/core'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useStore } from '../../composables/use-store'\n\n/** The mention / merge tag listbox under the trigger. */\nconst props = defineProps<{\n  suggestions: EditorSuggestions\n  editor: Editor | undefined\n  id: string\n}>()\nconst t = useT()\nconst state = useStore(props.suggestions.store)\n// Inside a modal the dialog's transform is the containing block of this fixed list.\nconst position = computed(() => {\n  const coords = state.value.coords\n\n  if (!coords) return undefined\n\n  const offset = fixedContainingBlockOffset(props.editor?.view.dom)\n\n  return { left: `${coords.left - offset.x}px`, top: `${coords.bottom + 4 - offset.y}px` }\n})\n</script>\n\n<template>\n  <div\n    v-if=\"state.open && props.editor\"\n    :id=\"props.id\"\n    role=\"listbox\"\n    :aria-label=\"t('editor.suggestions', {}, 'Suggestions')\"\n    data-slot=\"rich-editor-suggestions\"\n    class=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n    :style=\"position\"\n  >\n    <div\n      v-if=\"state.loading && state.items.length === 0\"\n      class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n    >\n      {{ t('loading', {}, 'Loading…') }}\n    </div>\n    <div v-else-if=\"state.items.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n      {{ t('no_results', {}, 'No results.') }}\n    </div>\n    <template v-else>\n      <div\n        v-for=\"(item, index) in state.items\"\n        :id=\"`${props.id}-${index}`\"\n        :key=\"item.id\"\n        role=\"option\"\n        :aria-selected=\"index === state.index\"\n        :class=\"\n          cn(\n            'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n            index === state.index && 'bg-accent text-accent-foreground',\n          )\n        \"\n        @mousedown.prevent\n        @mouseenter=\"props.suggestions.highlight(index)\"\n        @click=\"props.editor && props.suggestions.select(index, props.editor)\"\n      >\n        {{ state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label }}\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/fields/RichEditorSuggestions.vue.d.ts

@@ -1,4 +1,4 @@
-import type { EditorSuggestions } from '@alfakit/core';
+import { type EditorSuggestions } from '@alfakit/core';
 import type { Editor } from '@tiptap/vue-3';
 /** The mention / merge tag listbox under the trigger. */
 type __VLS_Props = {

package/dist/components/fields/RichEditorSuggestions.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditorSuggestions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAK3C,yDAAyD;AACzD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,iBAAiB,CAAA;IAC9B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,EAAE,EAAE,MAAM,CAAA;CACX,CAAC;;AA6GF,wBAMG"}
+{"version":3,"file":"RichEditorSuggestions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"names":[],"mappings":"AAuEA,OAAO,EAA8B,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAM3C,yDAAyD;AACzD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,iBAAiB,CAAA;IAC9B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,EAAE,EAAE,MAAM,CAAA;CACX,CAAC;;AAoHF,wBAMG"}

package/dist/components/fields/RichEditorSuggestions.vue_vue_type_script_setup_true_lang.js

@@ -1,52 +1,58 @@
 import { useT as e } from "../../context.js";
 import { cn as t } from "../../lib/utils.js";
 import { useStore as n } from "../../composables/use-store.js";
-import { Fragment as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, withModifiers as p } from "vue";
+import { fixedContainingBlockOffset as r } from "@alfakit/core";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, toDisplayString as p, unref as m, withModifiers as h } from "vue";
 //#region src/components/fields/RichEditorSuggestions.vue?vue&type=script&setup=true&lang.ts
-var m = ["id", "aria-label"], h = {
+var g = ["id", "aria-label"], _ = {
 	key: 0,
 	class: "text-muted-foreground px-2 py-1.5 text-sm"
-}, g = {
+}, v = {
 	key: 1,
 	class: "text-muted-foreground px-2 py-1.5 text-sm"
-}, _ = [
+}, y = [
 	"id",
 	"aria-selected",
 	"onMouseenter",
 	"onClick"
-], v = /*@__PURE__*/ o({
+], b = /*@__PURE__*/ c({
 	__name: "RichEditorSuggestions",
 	props: {
 		suggestions: {},
 		editor: {},
 		id: {}
 	},
-	setup(o) {
-		let v = o, y = e(), b = n(v.suggestions.store);
-		return (e, n) => f(b).open && v.editor ? (l(), a("div", {
+	setup(c) {
+		let b = c, x = e(), S = n(b.suggestions.store), C = a(() => {
+			let e = S.value.coords;
+			if (!e) return;
+			let t = r(b.editor?.view.dom);
+			return {
+				left: `${e.left - t.x}px`,
+				top: `${e.bottom + 4 - t.y}px`
+			};
+		});
+		return (e, n) => m(S).open && b.editor ? (d(), s("div", {
 			key: 0,
-			id: v.id,
+			id: b.id,
 			role: "listbox",
-			"aria-label": f(y)("editor.suggestions", {}, "Suggestions"),
+			"aria-label": m(x)("editor.suggestions", {}, "Suggestions"),
 			"data-slot": "rich-editor-suggestions",
 			class: "bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
-			style: c(f(b).coords ? {
-				left: `${f(b).coords.left}px`,
-				top: `${f(b).coords.bottom + 4}px`
-			} : void 0)
-		}, [f(b).loading && f(b).items.length === 0 ? (l(), a("div", h, d(f(y)("loading", {}, "Loading…")), 1)) : f(b).items.length === 0 ? (l(), a("div", g, d(f(y)("no_results", {}, "No results.")), 1)) : (l(!0), a(r, { key: 2 }, u(f(b).items, (e, r) => (l(), a("div", {
-			id: `${v.id}-${r}`,
+			style: u(C.value)
+		}, [m(S).loading && m(S).items.length === 0 ? (d(), s("div", _, p(m(x)("loading", {}, "Loading…")), 1)) : m(S).items.length === 0 ? (d(), s("div", v, p(m(x)("no_results", {}, "No results.")), 1)) : (d(!0), s(i, { key: 2 }, f(m(S).items, (e, r) => (d(), s("div", {
+			id: `${b.id}-${r}`,
 			key: e.id,
 			role: "option",
-			"aria-selected": r === f(b).index,
-			class: s(f(t)("cursor-pointer rounded-sm px-2 py-1.5 text-sm", r === f(b).index && "bg-accent text-accent-foreground")),
-			onMousedown: n[0] ||= p(() => {}, ["prevent"]),
-			onMouseenter: (e) => v.suggestions.highlight(r),
-			onClick: (e) => v.editor && v.suggestions.select(r, v.editor)
-		}, d(f(b).kind === "mention" ? `${f(b).trigger}${e.label}` : e.label), 43, _))), 128))], 12, m)) : i("", !0);
+			"aria-selected": r === m(S).index,
+			class: l(m(t)("cursor-pointer rounded-sm px-2 py-1.5 text-sm", r === m(S).index && "bg-accent text-accent-foreground")),
+			onMousedown: n[0] ||= h(() => {}, ["prevent"]),
+			onMouseenter: (e) => b.suggestions.highlight(r),
+			onClick: (e) => b.editor && b.suggestions.select(r, b.editor)
+		}, p(m(S).kind === "mention" ? `${m(S).trigger}${e.label}` : e.label), 43, y))), 128))], 12, g)) : o("", !0);
 	}
 });
 //#endregion
-export { v as default };
+export { b as default };
 
 //# sourceMappingURL=RichEditorSuggestions.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/RichEditorSuggestions.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditorSuggestions.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_normalizeStyle","_toDisplayString","_Fragment","_renderList","_normalizeClass","_withModifiers","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","RichEditorSuggestions_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","state","useStore","unref","openBlock","createElementBlock","normalizeStyle","toDisplayString","Fragment","renderList","index","item","normalizeClass","cn","_cache","withModifiers","createCommentVNode"],"sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EditorSuggestions } from '@alfakit/core'\nimport type { Editor } from '@tiptap/vue-3'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useStore } from '../../composables/use-store'\n\n/** The mention / merge tag listbox under the trigger. */\nconst props = defineProps<{\n  suggestions: EditorSuggestions\n  editor: Editor | undefined\n  id: string\n}>()\nconst t = useT()\nconst state = useStore(props.suggestions.store)\n</script>\n\n<template>\n  <div\n    v-if=\"state.open && props.editor\"\n    :id=\"props.id\"\n    role=\"listbox\"\n    :aria-label=\"t('editor.suggestions', {}, 'Suggestions')\"\n    data-slot=\"rich-editor-suggestions\"\n    class=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n    :style=\"\n      state.coords\n        ? { left: `${state.coords.left}px`, top: `${state.coords.bottom + 4}px` }\n        : undefined\n    \"\n  >\n    <div\n      v-if=\"state.loading && state.items.length === 0\"\n      class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n    >\n      {{ t('loading', {}, 'Loading…') }}\n    </div>\n    <div v-else-if=\"state.items.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n      {{ t('no_results', {}, 'No results.') }}\n    </div>\n    <template v-else>\n      <div\n        v-for=\"(item, index) in state.items\"\n        :id=\"`${props.id}-${index}`\"\n        :key=\"item.id\"\n        role=\"option\"\n        :aria-selected=\"index === state.index\"\n        :class=\"\n          cn(\n            'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n            index === state.index && 'bg-accent text-accent-foreground',\n          )\n        \"\n        @mousedown.prevent\n        @mouseenter=\"props.suggestions.highlight(index)\"\n        @click=\"props.editor && props.suggestions.select(index, props.editor)\"\n      >\n        {{ state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label }}\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAQA,IAAMe,IAAQC,GAKRC,IAAIC,EAAK,GACTC,IAAQC,EAASL,EAAM,YAAY,KAAK;mBAKpCf,EAAAmB,CAAA,CAAK,CAAC,QAAQJ,EAAM,UAD5Bd,EAAA,GAAAC,EA0CM,OAAA;;GAxCH,IAAIa,EAAM;GACX,MAAK;GACJ,cAAYf,EAAAiB,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,aAAA;GACd,aAAU;GACV,OAAM;GACL,OAAKd,EAASH,EAAAmB,CAAA,CAAK,CAAC,SAA4B;IAAA,MAAA,GAAAnB,EAAAmB,CAAA,CAAK,CAAC,OAAO,KAAI;IAAA,KAAA,GAAcnB,EAAAmB,CAAA,CAAK,CAAC,OAAO,SAAM,EAAA;GAAA,IAAqB,KAAA,CAAA;EAOhHnB,GAAAA,CAAAA,EAAAmB,CAAA,CAAK,CAAC,WAAWnB,EAAAmB,CAAA,CAAK,CAAC,MAAM,WAAM,KAD3ClB,EAAA,GAAAC,EAKM,OALNS,GAKMP,EADDJ,EAAAiB,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,UAAA,CAAA,GAAA,CAAA,KAEUjB,EAAAmB,CAAA,CAAK,CAAC,MAAM,WAAM,KAAlClB,EAAA,GAAAC,EAEM,OAFNU,GAEMR,EADDJ,EAAAiB,CAAA,CAAC,CAAA,cAAA,CAAA,GAAA,aAAA,CAAA,GAAA,CAAA,MAGJhB,EAAA,EAAA,GAAAC,EAiBMG,GAAA,EAAA,KAAA,EAAA,GAAAC,EAhBoBN,EAAAmB,CAAA,CAAK,CAAC,QAAtB,GAAM,OADhBlB,EAAA,GAAAC,EAiBM,OAAA;GAfH,IAAE,GAAKa,EAAM,GAAE,GAAIa;GACnB,KAAKC,EAAK;GACX,MAAK;GACJ,iBAAeD,MAAU5B,EAAAmB,CAAA,CAAK,CAAC;GAC/B,OAAKZ,EAAaP,EAAA+B,CAAA,CAAE,CAAA,iDAA2EH,MAAU5B,EAAAmB,CAAA,CAAK,CAAC,SAAK,kCAAA,CAAA;GAMpH,aAAS,AAAAa,EAAA,OAAAxB,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;GACjB,eAAU,MAAEO,EAAM,YAAY,UAAUa,CAAK;GAC7C,UAAK,MAAEb,EAAM,UAAUA,EAAM,YAAY,OAAOa,GAAOb,EAAM,MAAM;EAEjE,GAAAX,EAAAJ,EAAAmB,CAAA,CAAK,CAAC,SAAI,YAAA,GAAoBnB,EAAAmB,CAAA,CAAK,CAAC,UAAUU,EAAK,UAAUA,EAAK,KAAK,GAAA,IAAAhB,CAAA"}
+{"version":3,"file":"RichEditorSuggestions.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_normalizeStyle","_toDisplayString","_Fragment","_renderList","_normalizeClass","_withModifiers","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","RichEditorSuggestions_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","state","useStore","position","computed","coords","offset","fixedContainingBlockOffset","unref","openBlock","createElementBlock","normalizeStyle","toDisplayString","Fragment","renderList","index","item","normalizeClass","cn","_cache","withModifiers","createCommentVNode"],"sources":["../../../src/components/fields/RichEditorSuggestions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { fixedContainingBlockOffset, type EditorSuggestions } from '@alfakit/core'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useStore } from '../../composables/use-store'\n\n/** The mention / merge tag listbox under the trigger. */\nconst props = defineProps<{\n  suggestions: EditorSuggestions\n  editor: Editor | undefined\n  id: string\n}>()\nconst t = useT()\nconst state = useStore(props.suggestions.store)\n// Inside a modal the dialog's transform is the containing block of this fixed list.\nconst position = computed(() => {\n  const coords = state.value.coords\n\n  if (!coords) return undefined\n\n  const offset = fixedContainingBlockOffset(props.editor?.view.dom)\n\n  return { left: `${coords.left - offset.x}px`, top: `${coords.bottom + 4 - offset.y}px` }\n})\n</script>\n\n<template>\n  <div\n    v-if=\"state.open && props.editor\"\n    :id=\"props.id\"\n    role=\"listbox\"\n    :aria-label=\"t('editor.suggestions', {}, 'Suggestions')\"\n    data-slot=\"rich-editor-suggestions\"\n    class=\"bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md\"\n    :style=\"position\"\n  >\n    <div\n      v-if=\"state.loading && state.items.length === 0\"\n      class=\"text-muted-foreground px-2 py-1.5 text-sm\"\n    >\n      {{ t('loading', {}, 'Loading…') }}\n    </div>\n    <div v-else-if=\"state.items.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n      {{ t('no_results', {}, 'No results.') }}\n    </div>\n    <template v-else>\n      <div\n        v-for=\"(item, index) in state.items\"\n        :id=\"`${props.id}-${index}`\"\n        :key=\"item.id\"\n        role=\"option\"\n        :aria-selected=\"index === state.index\"\n        :class=\"\n          cn(\n            'cursor-pointer rounded-sm px-2 py-1.5 text-sm',\n            index === state.index && 'bg-accent text-accent-foreground',\n          )\n        \"\n        @mousedown.prevent\n        @mouseenter=\"props.suggestions.highlight(index)\"\n        @click=\"props.editor && props.suggestions.select(index, props.editor)\"\n      >\n        {{ state.kind === 'mention' ? `${state.trigger}${item.label}` : item.label }}\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMe,IAAQC,GAKRC,IAAIC,EAAK,GACTC,IAAQC,EAASL,EAAM,YAAY,KAAK,GAExCM,IAAWC,QAAe;GAC9B,IAAMC,IAASJ,EAAM,MAAM;GAE3B,IAAI,CAACI,GAAQ;GAEb,IAAMC,IAASC,EAA2BV,EAAM,QAAQ,KAAK,GAAG;GAEhE,OAAO;IAAE,MAAM,GAAGQ,EAAO,OAAOC,EAAO,EAAE;IAAK,KAAK,GAAGD,EAAO,SAAS,IAAIC,EAAO,EAAE;GAAI;EACzF,CAAC;mBAKSxB,EAAAmB,CAAA,CAAK,CAAC,QAAQJ,EAAM,UAD5Bd,EAAA,GAAAC,EAsCM,OAAA;;GApCH,IAAIa,EAAM;GACX,MAAK;GACJ,cAAYf,EAAAiB,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,aAAA;GACd,aAAU;GACV,OAAM;GACL,OAAKd,EAAEkB,EAAA,KAAQ;EAGRrB,GAAAA,CAAAA,EAAAmB,CAAA,CAAK,CAAC,WAAWnB,EAAAmB,CAAA,CAAK,CAAC,MAAM,WAAM,KAD3ClB,EAAA,GAAAC,EAKM,OALNS,GAKMP,EADDJ,EAAAiB,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,UAAA,CAAA,GAAA,CAAA,KAEUjB,EAAAmB,CAAA,CAAK,CAAC,MAAM,WAAM,KAAlClB,EAAA,GAAAC,EAEM,OAFNU,GAEMR,EADDJ,EAAAiB,CAAA,CAAC,CAAA,cAAA,CAAA,GAAA,aAAA,CAAA,GAAA,CAAA,MAGJhB,EAAA,EAAA,GAAAC,EAiBMG,GAAA,EAAA,KAAA,EAAA,GAAAC,EAhBoBN,EAAAmB,CAAA,CAAK,CAAC,QAAtB,GAAM,OADhBlB,EAAA,GAAAC,EAiBM,OAAA;GAfH,IAAE,GAAKa,EAAM,GAAE,GAAIkB;GACnB,KAAKC,EAAK;GACX,MAAK;GACJ,iBAAeD,MAAUjC,EAAAmB,CAAA,CAAK,CAAC;GAC/B,OAAKZ,EAAaP,EAAAoC,CAAA,CAAE,CAAA,iDAA2EH,MAAUjC,EAAAmB,CAAA,CAAK,CAAC,SAAK,kCAAA,CAAA;GAMpH,aAAS,AAAAkB,EAAA,OAAA7B,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;GACjB,eAAU,MAAEO,EAAM,YAAY,UAAUkB,CAAK;GAC7C,UAAK,MAAElB,EAAM,UAAUA,EAAM,YAAY,OAAOkB,GAAOlB,EAAM,MAAM;EAEjE,GAAAX,EAAAJ,EAAAmB,CAAA,CAAK,CAAC,SAAI,YAAA,GAAoBnB,EAAAmB,CAAA,CAAK,CAAC,UAAUe,EAAK,UAAUA,EAAK,KAAK,GAAA,IAAArB,CAAA"}

package/dist/components/fields/RichEditorToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditorToolbarGroup.js","names":["_sfc_main","RichEditorToolbarGroup_vue_vue_type_script_setup_true_lang_default","RichEditorToolbarGroup_default"],"sources":["../../../src/components/fields/RichEditorToolbarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  RichEditorToolbarGroupSchema,\n  RichEditorToolSchema,\n  ToolbarCommand,\n} from '@alfakit/core'\nimport { commandLabel, groupTriggerButton } from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport RichEditorToolIcon from './RichEditorToolIcon.vue'\n\n/** A `ToolbarButtonGroup`: a dropdown of buttons (icons, or labels with `textualButtons()`). */\nconst props = defineProps<{\n  group: RichEditorToolbarGroupSchema\n  editor: Editor\n  editable: boolean\n  commands: Record<string, ToolbarCommand>\n  tools?: RichEditorToolSchema[] | null\n  /** Bumped on every transaction so active states follow the cursor. */\n  tick: number\n}>()\nconst emit = defineEmits<{ run: [name: string] }>()\nconst t = useT()\nconst translate = (key: string, fallback: string) => t(key, {}, fallback)\n\nconst buttons = computed(() => props.group.buttons.filter((name) => props.commands[name]))\nconst trigger = computed(() => {\n  void props.tick\n\n  return groupTriggerButton(buttons.value, props.editor, props.commands)\n})\nconst active = computed(() => {\n  void props.tick\n\n  return buttons.value.some((name) => props.commands[name]?.active?.(props.editor))\n})\nconst label = (name: string) => commandLabel(name, props.commands, translate)\nconst pressed = (name: string) => {\n  void props.tick\n\n  return Boolean(props.commands[name]?.active?.(props.editor))\n}\n</script>\n\n<template>\n  <DropdownMenu v-if=\"buttons.length > 0\">\n    <DropdownMenuTrigger as-child>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        :aria-label=\"props.group.label\"\n        :title=\"props.group.label\"\n        :disabled=\"!props.editable\"\n        :class=\"cn('h-8 gap-0.5 px-1.5', active && 'bg-accent text-accent-foreground')\"\n        @mousedown.prevent\n      >\n        <Icon v-if=\"props.group.icon\" :name=\"props.group.icon\" />\n        <RichEditorToolIcon\n          v-else-if=\"trigger\"\n          :name=\"trigger\"\n          :label=\"label(trigger)\"\n          :tools=\"props.tools\"\n        />\n        <template v-else>{{ props.group.label }}</template>\n        <ChevronDownIcon class=\"size-3 opacity-60\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      align=\"start\"\n      :aria-label=\"props.group.label\"\n      :class=\"cn(!props.group.textual && 'flex min-w-0 flex-row gap-0.5')\"\n    >\n      <DropdownMenuItem\n        v-for=\"name in buttons\"\n        :key=\"name\"\n        :aria-label=\"props.group.textual ? undefined : label(name)\"\n        :title=\"label(name)\"\n        :class=\"cn(pressed(name) && 'bg-accent text-accent-foreground')\"\n        @select=\"emit('run', name)\"\n      >\n        <RichEditorToolIcon :name=\"name\" :label=\"label(name)\" :tools=\"props.tools\" />\n        <span v-if=\"props.group.textual\">{{ label(name) }}</span>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RichEditorToolbarGroup.js","names":["_sfc_main","RichEditorToolbarGroup_vue_vue_type_script_setup_true_lang_default","RichEditorToolbarGroup_default"],"sources":["../../../src/components/fields/RichEditorToolbarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  RichEditorToolbarGroupSchema,\n  RichEditorToolSchema,\n  ToolbarCommand,\n} from '@alfakit/core'\nimport { commandLabel, groupTriggerButton } from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport RichEditorToolIcon from './RichEditorToolIcon.vue'\n\n/** A `ToolbarButtonGroup`: a dropdown of buttons (icons, or labels with `textualButtons()`). */\nconst props = defineProps<{\n  group: RichEditorToolbarGroupSchema\n  editor: Editor\n  editable: boolean\n  commands: Record<string, ToolbarCommand>\n  tools?: RichEditorToolSchema[] | null\n  /** Bumped on every transaction so active states follow the cursor. */\n  tick: number\n}>()\nconst emit = defineEmits<{ run: [name: string] }>()\nconst t = useT()\nconst translate = (key: string, fallback: string) => t(key, {}, fallback)\n\nconst buttons = computed(() => props.group.buttons.filter((name) => props.commands[name]))\nconst trigger = computed(() => {\n  void props.tick\n\n  return groupTriggerButton(buttons.value, props.editor, props.commands)\n})\nconst active = computed(() => {\n  void props.tick\n\n  return buttons.value.some((name) => props.commands[name]?.active?.(props.editor))\n})\nconst label = (name: string) => commandLabel(name, props.commands, translate)\n// After a pick, typing goes on in the editor (the command focused it); the menu would\n// otherwise return focus to its trigger. Closing without a pick (Escape) still does.\nlet picked = false\nconst pick = (name: string) => {\n  picked = true\n  emit('run', name)\n}\nconst closeAutoFocus = (event: Event) => {\n  if (!picked) return\n\n  picked = false\n  event.preventDefault()\n  props.editor.commands.focus()\n}\nconst pressed = (name: string) => {\n  void props.tick\n\n  return Boolean(props.commands[name]?.active?.(props.editor))\n}\n</script>\n\n<template>\n  <DropdownMenu v-if=\"buttons.length > 0\">\n    <DropdownMenuTrigger as-child>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        :aria-label=\"props.group.label\"\n        :title=\"props.group.label\"\n        :disabled=\"!props.editable\"\n        :class=\"cn('h-8 gap-0.5 px-1.5', active && 'bg-accent text-accent-foreground')\"\n        @mousedown.prevent\n      >\n        <Icon v-if=\"props.group.icon\" :name=\"props.group.icon\" />\n        <RichEditorToolIcon\n          v-else-if=\"trigger\"\n          :name=\"trigger\"\n          :label=\"label(trigger)\"\n          :tools=\"props.tools\"\n        />\n        <template v-else>{{ props.group.label }}</template>\n        <ChevronDownIcon class=\"size-3 opacity-60\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      align=\"start\"\n      :aria-label=\"props.group.label\"\n      :class=\"cn(!props.group.textual && 'flex min-w-0 flex-row gap-0.5')\"\n      @close-auto-focus=\"closeAutoFocus\"\n    >\n      <DropdownMenuItem\n        v-for=\"name in buttons\"\n        :key=\"name\"\n        :aria-label=\"props.group.textual ? undefined : label(name)\"\n        :title=\"label(name)\"\n        :class=\"cn(pressed(name) && 'bg-accent text-accent-foreground')\"\n        @select=\"pick(name)\"\n      >\n        <RichEditorToolIcon :name=\"name\" :label=\"label(name)\" :tools=\"props.tools\" />\n        <span v-if=\"props.group.textual\">{{ label(name) }}</span>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":""}

package/dist/components/fields/RichEditorToolbarGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditorToolbarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorToolbarGroup.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EACV,4BAA4B,EAC5B,oBAAoB,EACpB,cAAc,EACf,MAAM,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAY3C,gGAAgG;AAChG,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,4BAA4B,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAA;IACrC,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAA;CACb,CAAC;;;;;;AAwNF,wBAOG"}
+{"version":3,"file":"RichEditorToolbarGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorToolbarGroup.vue"],"names":[],"mappings":"AAiHA,OAAO,KAAK,EACV,4BAA4B,EAC5B,oBAAoB,EACpB,cAAc,EACf,MAAM,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAY3C,gGAAgG;AAChG,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,4BAA4B,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAA;IACrC,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAA;CACb,CAAC;;;;;;AA8OF,wBAOG"}

package/dist/components/fields/RichEditorToolbarGroup.vue_vue_type_script_setup_true_lang.js

@@ -23,7 +23,11 @@ var D = { key: 0 }, O = /*@__PURE__*/ v({
 	},
 	emits: ["run"],
 	setup(v, { emit: O }) {
-		let k = v, A = O, j = e(), M = (e, t) => j(e, {}, t), N = f(() => k.group.buttons.filter((e) => k.commands[e])), P = f(() => (k.tick, u(N.value, k.editor, k.commands))), F = f(() => (k.tick, N.value.some((e) => k.commands[e]?.active?.(k.editor)))), I = (e) => l(e, k.commands, M), L = (e) => (k.tick, !!k.commands[e]?.active?.(k.editor));
+		let k = v, A = O, j = e(), M = (e, t) => j(e, {}, t), N = f(() => k.group.buttons.filter((e) => k.commands[e])), P = f(() => (k.tick, u(N.value, k.editor, k.commands))), F = f(() => (k.tick, N.value.some((e) => k.commands[e]?.active?.(k.editor)))), I = (e) => l(e, k.commands, M), L = !1, R = (e) => {
+			L = !0, A("run", e);
+		}, z = (e) => {
+			L && (L = !1, e.preventDefault(), k.editor.commands.focus());
+		}, B = (e) => (k.tick, !!k.commands[e]?.active?.(k.editor));
 		return (e, l) => N.value.length > 0 ? (b(), p(i, { key: 0 }, {
 			default: w(() => [_(s, { "as-child": "" }, {
 				default: w(() => [_(r, {
@@ -60,14 +64,15 @@ var D = { key: 0 }, O = /*@__PURE__*/ v({
 			}), _(a, {
 				align: "start",
 				"aria-label": k.group.label,
-				class: y(C(t)(!k.group.textual && "flex min-w-0 flex-row gap-0.5"))
+				class: y(C(t)(!k.group.textual && "flex min-w-0 flex-row gap-0.5")),
+				onCloseAutoFocus: z
 			}, {
 				default: w(() => [(b(!0), h(d, null, x(N.value, (e) => (b(), p(o, {
 					key: e,
 					"aria-label": k.group.textual ? void 0 : I(e),
 					title: I(e),
-					class: y(C(t)(L(e) && "bg-accent text-accent-foreground")),
-					onSelect: (t) => A("run", e)
+					class: y(C(t)(B(e) && "bg-accent text-accent-foreground")),
+					onSelect: (t) => R(e)
 				}, {
 					default: w(() => [_(c, {
 						name: e,

package/dist/components/fields/RichEditorToolbarGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditorToolbarGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","DropdownMenu","_withCtx","_createVNode","DropdownMenuTrigger","Button","_normalizeClass","_unref","_withModifiers","Icon","RichEditorToolIcon","_createElementBlock","_Fragment","_createTextVNode","_toDisplayString","DropdownMenuContent","_renderList","DropdownMenuItem","_createCommentVNode","Icon_default","Button_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuTrigger_default","RichEditorToolIcon_default","_hoisted_1","RichEditorToolbarGroup_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","translate","key","fallback","buttons","computed","name","trigger","groupTriggerButton","active","label","commandLabel","pressed","openBlock","createBlock","withCtx","createVNode","normalizeClass","unref","cn","_cache","withModifiers","createElementBlock","Fragment","createTextVNode","toDisplayString","ChevronDownIcon","renderList","createCommentVNode"],"sources":["../../../src/components/fields/RichEditorToolbarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  RichEditorToolbarGroupSchema,\n  RichEditorToolSchema,\n  ToolbarCommand,\n} from '@alfakit/core'\nimport { commandLabel, groupTriggerButton } from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport RichEditorToolIcon from './RichEditorToolIcon.vue'\n\n/** A `ToolbarButtonGroup`: a dropdown of buttons (icons, or labels with `textualButtons()`). */\nconst props = defineProps<{\n  group: RichEditorToolbarGroupSchema\n  editor: Editor\n  editable: boolean\n  commands: Record<string, ToolbarCommand>\n  tools?: RichEditorToolSchema[] | null\n  /** Bumped on every transaction so active states follow the cursor. */\n  tick: number\n}>()\nconst emit = defineEmits<{ run: [name: string] }>()\nconst t = useT()\nconst translate = (key: string, fallback: string) => t(key, {}, fallback)\n\nconst buttons = computed(() => props.group.buttons.filter((name) => props.commands[name]))\nconst trigger = computed(() => {\n  void props.tick\n\n  return groupTriggerButton(buttons.value, props.editor, props.commands)\n})\nconst active = computed(() => {\n  void props.tick\n\n  return buttons.value.some((name) => props.commands[name]?.active?.(props.editor))\n})\nconst label = (name: string) => commandLabel(name, props.commands, translate)\nconst pressed = (name: string) => {\n  void props.tick\n\n  return Boolean(props.commands[name]?.active?.(props.editor))\n}\n</script>\n\n<template>\n  <DropdownMenu v-if=\"buttons.length > 0\">\n    <DropdownMenuTrigger as-child>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        :aria-label=\"props.group.label\"\n        :title=\"props.group.label\"\n        :disabled=\"!props.editable\"\n        :class=\"cn('h-8 gap-0.5 px-1.5', active && 'bg-accent text-accent-foreground')\"\n        @mousedown.prevent\n      >\n        <Icon v-if=\"props.group.icon\" :name=\"props.group.icon\" />\n        <RichEditorToolIcon\n          v-else-if=\"trigger\"\n          :name=\"trigger\"\n          :label=\"label(trigger)\"\n          :tools=\"props.tools\"\n        />\n        <template v-else>{{ props.group.label }}</template>\n        <ChevronDownIcon class=\"size-3 opacity-60\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      align=\"start\"\n      :aria-label=\"props.group.label\"\n      :class=\"cn(!props.group.textual && 'flex min-w-0 flex-row gap-0.5')\"\n    >\n      <DropdownMenuItem\n        v-for=\"name in buttons\"\n        :key=\"name\"\n        :aria-label=\"props.group.textual ? undefined : label(name)\"\n        :title=\"label(name)\"\n        :class=\"cn(pressed(name) && 'bg-accent text-accent-foreground')\"\n        @select=\"emit('run', name)\"\n      >\n        <RichEditorToolIcon :name=\"name\" :label=\"label(name)\" :tools=\"props.tools\" />\n        <span v-if=\"props.group.textual\">{{ label(name) }}</span>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,IAAM8B,IAAQC,GASRC,IAAOH,GACPI,IAAIC,EAAK,GACTC,KAAa,GAAa,MAAqBF,EAAEG,GAAK,CAAC,GAAGC,CAAQ,GAElEC,IAAUC,QAAeT,EAAM,MAAM,QAAQ,QAAQ,MAASA,EAAM,SAASU,EAAK,CAAC,GACnFC,IAAUF,SACdT,EAAW,MAEJY,EAAmBJ,EAAQ,OAAOR,EAAM,QAAQA,EAAM,QAAQ,EACtE,GACKa,IAASJ,SACbT,EAAW,MAEJQ,EAAQ,MAAM,MAAM,MAASR,EAAM,SAASU,EAAK,EAAE,SAASV,EAAM,MAAM,CAAC,EACjF,GACKc,KAAS,MAAiBC,EAAaL,GAAMV,EAAM,UAAUK,CAAS,GACtEW,KAAW,OACfhB,EAAW,MAEJ,EAAQA,EAAM,SAASU,EAAK,EAAE,SAASV,EAAM,MAAM;mBAKtCQ,EAAA,MAAQ,SAAM,KAAlCtC,EAAA,GAAAC,EAwCeC,GAAA,EAAA,KAAA,EAAA,GAAA;GAvCb,SAAAC,QAqBsB,CArBtBC,EAqBsBC,GAAA,EArBD,YAAA,GAAQ,GAAA;IAC3B,SAAAF,QAmBS,CAnBTC,EAmBSE,GAAA;KAlBP,MAAK;KACL,SAAQ;KACR,MAAK;KACJ,cAAYwB,EAAM,MAAM;KACxB,OAAOA,EAAM,MAAM;KACnB,UAAQ,CAAGA,EAAM;KACjB,OAAKvB,EAAEC,EAAA6C,CAAA,CAAE,CAAA,sBAAuBV,EAAA,SAAM,kCAAA,CAAA;KACtC,aAAS,AAAAW,EAAA,OAAA7C,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;;KAElB,SAAAN,QAAyD,CAA7C2B,EAAM,MAAM,QAAxB9B,EAAA,GAAAC,EAAyDO,EAAAE,CAAA,GAAA;;MAA1B,MAAMoB,EAAM,MAAM;KAEpC,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,KAAAW,EAAA,SADbzC,EAAA,GAAAC,EAKEU,GAAA;;MAHC,MAAM8B,EAAA;MACN,OAAOG,EAAMH,EAAA,KAAO;MACpB,OAAOX,EAAM;;;;;KAEhB9B,CAAAA,MAAAA,EAAA,GAAAY,EAAmDC,GAAA,EAAA,KAAA,EAAA,GAAA,CAA/BC,EAAAC,EAAAe,EAAM,MAAM,KAAK,GAAA,CAAA,CAAA,GAAA,EAAA,IACrC1B,EAA6CI,EAAAoD,CAAA,GAAA,EAA5B,OAAM,oBAAmB,CAAA,CAAA,CAAA;;;;;;;;;GAG9CxD,CAAAA,GAAAA,EAgBsBY,GAAA;IAfpB,OAAM;IACL,cAAYc,EAAM,MAAM;IACxB,OAAKvB,EAAEC,EAAA6C,CAAA,CAAE,CAAA,CAAEvB,EAAM,MAAM,WAAO,+BAAA,CAAA;;IAG7B,SAAA3B,QAAuB,EADzBH,EAAA,EAAA,GAAAY,EAUmBC,GAAA,MAAAI,EATFqB,EAAA,QAAR,OADTtC,EAAA,GAAAC,EAUmBiB,GAAA;KARhB,KAAKsB;KACL,cAAYV,EAAM,MAAM,UAAU,KAAA,IAAYc,EAAMJ,CAAI;KACxD,OAAOI,EAAMJ,CAAI;KACjB,OAAKjC,EAAEC,EAAA6C,CAAA,CAAE,CAACP,EAAQN,CAAI,KAAA,kCAAA,CAAA;KACtB,WAAM,MAAER,EAAI,OAAQQ,CAAI;;KAEzB,SAAArC,QAA6E,CAA7EC,EAA6EO,GAAA;MAAlD;MAAO,OAAOiC,EAAMJ,CAAI;MAAI,OAAOV,EAAM;;;;;KACxD,CAAA,GAAAA,EAAM,MAAM,WAAxB9B,EAAA,GAAAY,EAAyD,QAAAe,GAAAZ,EAArB6B,EAAMJ,CAAI,CAAA,GAAA,CAAA,KAAAsB,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"RichEditorToolbarGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","DropdownMenu","_withCtx","_createVNode","DropdownMenuTrigger","Button","_normalizeClass","_unref","_withModifiers","Icon","RichEditorToolIcon","_createElementBlock","_Fragment","_createTextVNode","_toDisplayString","DropdownMenuContent","_renderList","DropdownMenuItem","_createCommentVNode","Icon_default","Button_default","DropdownMenu_default","DropdownMenuContent_default","DropdownMenuItem_default","DropdownMenuTrigger_default","RichEditorToolIcon_default","_hoisted_1","RichEditorToolbarGroup_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useT","translate","key","fallback","buttons","computed","name","trigger","groupTriggerButton","active","label","commandLabel","picked","pick","closeAutoFocus","event","pressed","openBlock","createBlock","withCtx","createVNode","normalizeClass","unref","cn","_cache","withModifiers","createElementBlock","Fragment","createTextVNode","toDisplayString","ChevronDownIcon","renderList","createCommentVNode"],"sources":["../../../src/components/fields/RichEditorToolbarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  RichEditorToolbarGroupSchema,\n  RichEditorToolSchema,\n  ToolbarCommand,\n} from '@alfakit/core'\nimport { commandLabel, groupTriggerButton } from '@alfakit/core'\nimport { ChevronDownIcon } from '@lucide/vue'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport DropdownMenu from '../ui/DropdownMenu.vue'\nimport DropdownMenuContent from '../ui/DropdownMenuContent.vue'\nimport DropdownMenuItem from '../ui/DropdownMenuItem.vue'\nimport DropdownMenuTrigger from '../ui/DropdownMenuTrigger.vue'\nimport RichEditorToolIcon from './RichEditorToolIcon.vue'\n\n/** A `ToolbarButtonGroup`: a dropdown of buttons (icons, or labels with `textualButtons()`). */\nconst props = defineProps<{\n  group: RichEditorToolbarGroupSchema\n  editor: Editor\n  editable: boolean\n  commands: Record<string, ToolbarCommand>\n  tools?: RichEditorToolSchema[] | null\n  /** Bumped on every transaction so active states follow the cursor. */\n  tick: number\n}>()\nconst emit = defineEmits<{ run: [name: string] }>()\nconst t = useT()\nconst translate = (key: string, fallback: string) => t(key, {}, fallback)\n\nconst buttons = computed(() => props.group.buttons.filter((name) => props.commands[name]))\nconst trigger = computed(() => {\n  void props.tick\n\n  return groupTriggerButton(buttons.value, props.editor, props.commands)\n})\nconst active = computed(() => {\n  void props.tick\n\n  return buttons.value.some((name) => props.commands[name]?.active?.(props.editor))\n})\nconst label = (name: string) => commandLabel(name, props.commands, translate)\n// After a pick, typing goes on in the editor (the command focused it); the menu would\n// otherwise return focus to its trigger. Closing without a pick (Escape) still does.\nlet picked = false\nconst pick = (name: string) => {\n  picked = true\n  emit('run', name)\n}\nconst closeAutoFocus = (event: Event) => {\n  if (!picked) return\n\n  picked = false\n  event.preventDefault()\n  props.editor.commands.focus()\n}\nconst pressed = (name: string) => {\n  void props.tick\n\n  return Boolean(props.commands[name]?.active?.(props.editor))\n}\n</script>\n\n<template>\n  <DropdownMenu v-if=\"buttons.length > 0\">\n    <DropdownMenuTrigger as-child>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        :aria-label=\"props.group.label\"\n        :title=\"props.group.label\"\n        :disabled=\"!props.editable\"\n        :class=\"cn('h-8 gap-0.5 px-1.5', active && 'bg-accent text-accent-foreground')\"\n        @mousedown.prevent\n      >\n        <Icon v-if=\"props.group.icon\" :name=\"props.group.icon\" />\n        <RichEditorToolIcon\n          v-else-if=\"trigger\"\n          :name=\"trigger\"\n          :label=\"label(trigger)\"\n          :tools=\"props.tools\"\n        />\n        <template v-else>{{ props.group.label }}</template>\n        <ChevronDownIcon class=\"size-3 opacity-60\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      align=\"start\"\n      :aria-label=\"props.group.label\"\n      :class=\"cn(!props.group.textual && 'flex min-w-0 flex-row gap-0.5')\"\n      @close-auto-focus=\"closeAutoFocus\"\n    >\n      <DropdownMenuItem\n        v-for=\"name in buttons\"\n        :key=\"name\"\n        :aria-label=\"props.group.textual ? undefined : label(name)\"\n        :title=\"label(name)\"\n        :class=\"cn(pressed(name) && 'bg-accent text-accent-foreground')\"\n        @select=\"pick(name)\"\n      >\n        <RichEditorToolIcon :name=\"name\" :label=\"label(name)\" :tools=\"props.tools\" />\n        <span v-if=\"props.group.textual\">{{ label(name) }}</span>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n"],"mappings":"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"}