@alfakit/vue 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,200 @@
+import { useDirection as e, useFormatter as t, useLocalization as n, useT as r } from "../../context.js";
+import { cn as i } from "../../lib/utils.js";
+import a from "../ui/Button2.js";
+import { useField as o } from "../form/form-context.js";
+import s from "../ui/Input.js";
+import ee from "../ui/Popover.js";
+import te from "../ui/PopoverContent.js";
+import ne from "../ui/PopoverTrigger.js";
+import { lazyComponent as c } from "../../lib/lazy.js";
+import l from "../schema/FieldWrapper.js";
+import { phpToDateFnsFormat as u } from "./date-format.js";
+import d from "./SelectAffixes.js";
+import { LocaleFormatter as f, formatPhpDate as re, timeInputStep as p, wallClockNow as m } from "@alfakit/core";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createTextVNode as ie, createVNode as b, defineComponent as x, h as S, mergeProps as ae, normalizeClass as oe, openBlock as C, ref as se, renderList as ce, toDisplayString as le, unref as w, withCtx as T } from "vue";
+import { CalendarIcon as E } from "@lucide/vue";
+import { CalendarDate as D } from "@internationalized/date";
+import { format as O, isValid as k, parse as A } from "date-fns";
+//#region src/components/fields/DatePickerField.vue?vue&type=script&setup=true&lang.ts
+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({
+	name: "AlfakitCalendarLoading",
+	inheritAttrs: !1,
+	render: () => S("div", {
+		"aria-busy": "true",
+		class: "h-[18.5rem] w-[15.5rem]"
+	})
+})), N = /*@__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, {
+			...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 ?? "");
+		function X(e) {
+			let t = A(e, V.value, /* @__PURE__ */ new Date());
+			return k(t) ? O(t, q.value) : void 0;
+		}
+		function Z(e) {
+			return A(e, V.value, /* @__PURE__ */ new Date());
+		}
+		let ve = (e) => {
+			if (e === "") {
+				N(null);
+				return;
+			}
+			let t = A(e, q.value, /* @__PURE__ */ new Date());
+			N(k(t) ? O(t, V.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);
+				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());
+		}, 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));
+		}, Oe = g(() => x.component.firstDayOfWeek ?? 1);
+		return (e, t) => (C(), _(l, {
+			field: x.component,
+			"html-for": w(I),
+			error: w(F)
+		}, {
+			default: T(() => [b(d, {
+				component: x.component,
+				error: w(F)
+			}, {
+				default: T(() => [x.component.native || !x.component.hasDate ? (C(), _(s, ae({
+					key: 0,
+					id: w(I),
+					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),
+					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"]
+				}, x.component.extraInputAttributes, {
+					"onUpdate:modelValue": ve,
+					onBlur: w(P)
+				}), null, 16, [
+					"id",
+					"type",
+					"name",
+					"model-value",
+					"step",
+					"min",
+					"max",
+					"disabled",
+					"readonly",
+					"required",
+					"lang",
+					"list",
+					"aria-invalid",
+					"aria-describedby",
+					"aria-required",
+					"onBlur"
+				])) : (C(), _(ee, {
+					key: 1,
+					open: B.value,
+					"onUpdate:open": t[1] ||= (e) => B.value = e && !w(R)
+				}, {
+					default: T(() => [b(ne, { "as-child": "" }, {
+						default: T(() => [b(a, {
+							id: w(I),
+							type: "button",
+							"data-input": "",
+							variant: "outline",
+							disabled: w(L),
+							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"))
+						}, {
+							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)]),
+							_: 1
+						}, 8, [
+							"id",
+							"disabled",
+							"aria-invalid",
+							"aria-describedby",
+							"class"
+						])]),
+						_: 1
+					}), b(te, {
+						class: "w-auto p-0",
+						align: "start"
+					}, {
+						default: T(() => [b(w(M), {
+							"model-value": ye.value,
+							locale: W.value,
+							dir: w(H),
+							today: Q(w(m)(x.component.timezone)),
+							"week-starts-on": Oe.value,
+							"min-value": be.value,
+							"max-value": xe.value,
+							"default-placeholder": we.value,
+							"is-date-disabled": Ce,
+							"initial-focus": "",
+							"onUpdate:modelValue": t[0] ||= (e) => Te(e)
+						}, null, 8, [
+							"model-value",
+							"locale",
+							"dir",
+							"today",
+							"week-starts-on",
+							"min-value",
+							"max-value",
+							"default-placeholder"
+						]), x.component.hasTime ? (C(), y("div", ue, [b(s, {
+							type: "time",
+							step: $.value,
+							"model-value": Ee.value,
+							"onUpdate:modelValue": De,
+							onBlur: w(P)
+						}, null, 8, [
+							"step",
+							"model-value",
+							"onBlur"
+						])])) : v("", !0)]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open"])), (x.component.native || !x.component.hasDate) && x.component.datalist ? (C(), y("datalist", {
+					key: 2,
+					id: G.value
+				}, [(C(!0), y(h, null, ce(x.component.datalist, (e) => (C(), y("option", {
+					key: e,
+					value: X(e) ?? e
+				}, null, 8, fe))), 128))], 8, de)) : v("", !0)]),
+				_: 1
+			}, 8, ["component", "error"])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { N 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

@@ -0,0 +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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"}

package/dist/components/fields/FieldPlaceholder.js

@@ -0,0 +1,7 @@
+import e from "./FieldPlaceholder.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/fields/FieldPlaceholder.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=FieldPlaceholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPlaceholder.js","names":["_sfc_main","FieldPlaceholder_vue_vue_type_script_setup_true_lang_default","FieldPlaceholder_default"],"sources":["../../../src/components/fields/FieldPlaceholder.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { FieldSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Skeleton from '../ui/Skeleton.vue'\n\n/**\n * What the server renders and hydration show for a field whose code loads the first time\n * one is shown in the browser: its label and a placeholder.\n */\nconst props = defineProps<{ component: object; height?: string }>()\n// Every lazily loaded field schema carries the base field keys.\nconst field = computed(() => props.component as FieldSchema)\nconst { error, id } = useField<unknown>(() => field.value)\n</script>\n\n<template>\n  <FieldWrapper :field=\"field\" :html-for=\"id\" :error=\"error\">\n    <Skeleton aria-busy=\"true\" data-slot=\"field-placeholder\" :class=\"props.height ?? 'h-9'\" />\n  </FieldWrapper>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,11 @@
+/**
+ * What the server renders and hydration show for a field whose code loads the first time
+ * one is shown in the browser: its label and a placeholder.
+ */
+type __VLS_Props = {
+    component: object;
+    height?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=FieldPlaceholder.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPlaceholder.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/FieldPlaceholder.vue"],"names":[],"mappings":"AA8BA;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;;AAiE1D,wBAMG"}

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

@@ -0,0 +1,35 @@
+import { useField as e } from "../form/form-context.js";
+import t from "../ui/Skeleton.js";
+import n from "../schema/FieldWrapper.js";
+import { computed as r, createBlock as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, unref as l, withCtx as u } from "vue";
+//#region src/components/fields/FieldPlaceholder.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ o({
+	__name: "FieldPlaceholder",
+	props: {
+		component: {},
+		height: {}
+	},
+	setup(o) {
+		let d = o, f = r(() => d.component), { error: p, id: m } = e(() => f.value);
+		return (e, r) => (c(), i(n, {
+			field: f.value,
+			"html-for": l(m),
+			error: l(p)
+		}, {
+			default: u(() => [a(t, {
+				"aria-busy": "true",
+				"data-slot": "field-placeholder",
+				class: s(d.height ?? "h-9")
+			}, null, 8, ["class"])]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=FieldPlaceholder.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPlaceholder.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createVNode","Skeleton","_normalizeClass","Skeleton_default","FieldWrapper_default","FieldPlaceholder_vue_vue_type_script_setup_true_lang_default","props","__props","field","computed","useField","openBlock","createBlock","unref","id","error","withCtx","createVNode","normalizeClass"],"sources":["../../../src/components/fields/FieldPlaceholder.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { FieldSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Skeleton from '../ui/Skeleton.vue'\n\n/**\n * What the server renders and hydration show for a field whose code loads the first time\n * one is shown in the browser: its label and a placeholder.\n */\nconst props = defineProps<{ component: object; height?: string }>()\n// Every lazily loaded field schema carries the base field keys.\nconst field = computed(() => props.component as FieldSchema)\nconst { error, id } = useField<unknown>(() => field.value)\n</script>\n\n<template>\n  <FieldWrapper :field=\"field\" :html-for=\"id\" :error=\"error\">\n    <Skeleton aria-busy=\"true\" data-slot=\"field-placeholder\" :class=\"props.height ?? 'h-9'\" />\n  </FieldWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;EAWA,IAAMW,IAAQC,GAERC,IAAQC,QAAeH,EAAM,SAAwB,GACrD,EAAE,UAAO,UAAOI,QAAwBF,EAAM,KAAK;oBAIvDb,EAAA,GAAAC,EAEeC,GAAA;GAFA,OAAOW,EAAA;GAAQ,YAAUV,EAAAgB,CAAA;GAAK,OAAOhB,EAAAiB,CAAA;;GAClD,SAAAhB,QAA0F,CAA1FC,EAA0FC,GAAA;IAAhF,aAAU;IAAO,aAAU;IAAqB,OAAKC,EAAEI,EAAM,UAAM,KAAA"}

package/dist/components/fields/FileUploadField.js

@@ -0,0 +1,7 @@
+import e from "./FileUploadField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/fields/FileUploadField.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=FileUploadField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadField.js","names":["_sfc_main","FileUploadField_vue_vue_type_script_setup_true_lang_default","FileUploadField_default"],"sources":["../../../src/components/fields/FileUploadField.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The image editor's code loads with the first image to edit, not with the form.\nconst ImageEditorDialog = lazyComponent(\n  'ImageEditorDialog',\n  () => import('./ImageEditorDialog.vue').then((module) => module.default),\n  defineComponent({ name: 'ImageEditorDialogLoading', render: () => null }),\n)\n</script>\n\n<script setup lang=\"ts\">\nimport type { FileUploadSchema, UploadedFile } from '@alfakit/core'\nimport {\n  canEditImage,\n  concurrencyLimiter,\n  cssAspectRatio,\n  editableImageName,\n  fetchEditableImage,\n  fieldMemory,\n  fileUploadAccept,\n  filesFromClipboard,\n  fileUploadPaths,\n  formatBytes,\n  insertUploadedFile,\n  moveRepeaterItem,\n  requestJson,\n  transformImage,\n  uploadedFileLinks,\n  panelUploadOptions,\n  uploadTemporaryFile,\n} from '@alfakit/core'\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  DownloadIcon,\n  ExternalLinkIcon,\n  FileIcon,\n  PencilIcon,\n  UploadCloudIcon,\n  XIcon,\n} from '@lucide/vue'\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useChoice, usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField, useFormStore } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport type { ImageEditRequest } from './ImageEditorDialog.vue'\n\ninterface LocalFile extends UploadedFile {\n  progress?: number\n  error?: string\n  preview?: string\n}\n\nconst props = defineProps<{ component: FileUploadSchema }>()\nconst t = useT()\nconst choice = useChoice()\nconst panel = usePanel()\nconst {\n  value,\n  setValue,\n  error,\n  id,\n  disabled: fieldDisabled,\n  readOnly,\n  aria,\n} = useField<string | string[] | null>(() => props.component)\n// Read-only keeps open/download links but hides upload and remove controls.\nconst disabled = computed(() => fieldDisabled.value || readOnly.value)\nconst store = useFormStore()\n// In-flight uploads and the metadata of files uploaded in this session (the server schema\n// only knows about saved files) live in the form's field memory, not in component state:\n// a virtualised Repeater item unmounts when scrolled out of view and finds them again,\n// local image previews included, when it mounts back.\nconst uploadingStore = fieldMemory<LocalFile[]>(\n  store,\n  `${props.component.statePath}:uploading`,\n  () => [],\n)\nconst uploadedStore = fieldMemory<FileUploadSchema['files']>(\n  store,\n  `${props.component.statePath}:uploaded`,\n  () => [],\n)\nconst uploadingState = useStore(uploadingStore)\nconst uploadedState = useStore(uploadedStore)\nconst uploading = computed({\n  get: () => uploadingState.value,\n  set: (next: LocalFile[]) => uploadingStore.set(next),\n})\nconst uploaded = computed({\n  get: () => uploadedState.value,\n  set: (next: FileUploadSchema['files']) => uploadedStore.set(next),\n})\nconst dragging = ref(false)\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst dragPath = ref<string | null>(null)\n// The image open in the editor (`imageEditor()`), one at a time.\nconst editing = shallowRef<ImageEditRequest | null>(null)\nconst editorRequested = ref(false)\n\nwatch(editing, (request) => {\n  if (request) editorRequested.value = true\n})\nconst editImage = (file: File) =>\n  new Promise<File | null>((resolve) => {\n    editing.value = {\n      file,\n      resolve: (edited) => {\n        editing.value = null\n        resolve(edited)\n      },\n    }\n  })\n// Object URLs made for local image previews; released when the file is removed.\nconst objectUrls = fieldMemory<Set<string>>(\n  store,\n  `${props.component.statePath}:previews`,\n  () => new Set(),\n).get()\n\nconst releasePreview = (url: string | undefined) => {\n  if (url && objectUrls.delete(url)) URL.revokeObjectURL(url)\n}\n\nconst paths = computed(() => fileUploadPaths(value.value))\nconst files = computed<LocalFile[]>(() =>\n  paths.value.map(\n    (path) =>\n      [...props.component.files, ...uploaded.value].find((file) => file.path === path) ?? {\n        path,\n        name: path.replace(/^tmp:/, ''),\n      },\n  ),\n)\nconst maxFiles = computed(() =>\n  props.component.multiple ? (props.component.maxFiles ?? Infinity) : 1,\n)\nconst canAddMore = computed(() => files.value.length + uploading.value.length < maxFiles.value)\nconst circle = computed(() => props.component.panelLayout === 'circle' || props.component.avatar)\nconst integrated = computed(() => props.component.panelLayout === 'integrated' && !circle.value)\nconst removeAtStart = computed(() => props.component.positions?.removeButton === 'start')\nconst progressAtStart = computed(() => props.component.positions?.progressIndicator === 'start')\nconst uploadAlign = computed(() => props.component.positions?.uploadButton ?? 'center')\n\nconst commit = (next: string[]) => setValue(props.component.multiple ? next : (next[0] ?? null))\n\nconst upload = async (list: FileList | File[]) => {\n  const endpoint = panel.value.endpoints.upload\n\n  if (!endpoint) {\n    return\n  }\n\n  const accepted = Array.from(list).slice(\n    0,\n    Math.max(0, maxFiles.value - files.value.length - uploading.value.length),\n  )\n\n  // `maxParallelUploads()`: files are prepared (edited, resized) one by one and then\n  // queued, so at most that many upload at once.\n  const limit = concurrencyLimiter(props.component.maxParallelUploads ?? 1)\n  const queued: Promise<void>[] = []\n\n  for (const [position, picked] of accepted.entries()) {\n    let original = picked\n    const edit = Boolean(props.component.imageEditor && canEditImage(picked))\n\n    if (edit) {\n      const edited = await editImage(picked)\n\n      // Cancelled: the file is not uploaded.\n      if (!edited) continue\n\n      original = edited\n    }\n\n    const file = await prepare(original, edit)\n\n    if (!file) continue\n\n    const local = pendingFile(file, position)\n    uploading.value = [...uploading.value, local]\n\n    queued.push(limit(() => send(endpoint, file, local)))\n  }\n\n  await Promise.all(queued)\n}\n\n/** Resize and orient a picked (or edited) file, and check its size. Null when rejected. */\nconst prepare = async (original: File, edited: boolean): Promise<File | null> => {\n  const file =\n    props.component.imageCropAspectRatio ||\n    props.component.imageResizeTargetWidth ||\n    props.component.imageResizeTargetHeight ||\n    props.component.orientImagesFromExif\n      ? await transformImage(original, {\n          // The editor already cropped the image.\n          aspectRatio: edited ? null : props.component.imageCropAspectRatio,\n          mode: props.component.imageResizeMode,\n          width: props.component.imageResizeTargetWidth,\n          height: props.component.imageResizeTargetHeight,\n          orient: props.component.orientImagesFromExif,\n        })\n      : original\n\n  if (props.component.minSize && file.size < props.component.minSize * 1024) {\n    uploading.value = [\n      ...uploading.value,\n      {\n        path: file.name,\n        name: file.name,\n        size: file.size,\n        error: t('form.file_too_small', {}, 'This file is too small.'),\n      },\n    ]\n\n    return null\n  }\n\n  if (props.component.maxSize && file.size > props.component.maxSize * 1024) {\n    uploading.value = [\n      ...uploading.value,\n      {\n        path: file.name,\n        name: file.name,\n        size: file.size,\n        error: t('form.file_too_large', {}, 'This file is too large.'),\n      },\n    ]\n\n    return null\n  }\n\n  return file\n}\n\n/** The in-progress entry shown while `file` uploads. */\nconst pendingFile = (file: File, position: number | string): LocalFile => {\n  const local: LocalFile = {\n    // Unique within the batch and across re-picks of a changed file.\n    path: `pending:${position}:${file.lastModified}:${file.size}:${file.name}`,\n    name: file.name,\n    size: file.size,\n    progress: 0,\n    preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,\n  }\n  if (local.preview) objectUrls.add(local.preview)\n\n  return local\n}\n\n// `imageEditor()`: uploaded JPEG, PNG and WebP images can be edited again.\nconst canEditExisting = (file: LocalFile, index: number) =>\n  Boolean(props.component.imageEditor) &&\n  !disabled.value &&\n  index < files.value.length &&\n  !file.missing &&\n  Boolean(file.url ?? file.preview) &&\n  editableImageName(file) !== null\n\n/**\n * The \"Edit\" button on an uploaded image: open it in the editor and upload the result\n * in its place (the old file goes like any removed one: a temporary upload is deleted\n * now, a stored file when the form is saved with `deleteRemovedFiles()`).\n */\nconst editExisting = async (existing: LocalFile) => {\n  const endpoint = panel.value.endpoints.upload\n  const url = existing.url ?? existing.preview\n  const name = editableImageName(existing)\n\n  if (!endpoint || !url || !name) return\n\n  const source = await fetchEditableImage(url, name)\n\n  if (!source) {\n    uploading.value = [\n      ...uploading.value,\n      {\n        path: `failed:${existing.path}`,\n        name: existing.name,\n        error: t('image_editor.load_failed', {}, 'The image could not be opened.'),\n      },\n    ]\n\n    return\n  }\n\n  const edited = await editImage(source)\n\n  // Cancelled, or the editor couldn't decode it: keep the file as it is.\n  if (!edited || edited === source) return\n\n  const file = await prepare(edited, true)\n\n  if (!file) return\n\n  const local = pendingFile(file, `edit:${existing.path}`)\n  uploading.value = [...uploading.value, local]\n  await send(endpoint, file, local, existing.path)\n}\n\nconst send = async (endpoint: string, file: File, local: LocalFile, replacing?: string) => {\n  try {\n    // Large files go in resumable chunks; progress covers the whole file.\n    const response = await uploadTemporaryFile(endpoint, file, {\n      ...panelUploadOptions(panel.value, props.component.uploadPolicy),\n      onProgress: (progress) => {\n        uploading.value = uploading.value.map((item) =>\n          item.path === local.path ? { ...item, progress } : item,\n        )\n      },\n    })\n\n    uploaded.value = [\n      ...uploaded.value,\n      {\n        path: response.key,\n        name: response.name,\n        size: response.size,\n        temporary: true,\n        url: local.preview,\n      },\n    ]\n    uploading.value = uploading.value.filter((item) => item.path !== local.path)\n    // Read the store, not `value`: it may lag behind within a batch.\n    const current = fileUploadPaths(\n      store.getValue<string | string[] | null>(props.component.statePath, null),\n    )\n\n    if (replacing !== undefined && current.includes(replacing)) {\n      // An edited image takes the old one's place.\n      commit(current.map((path) => (path === replacing ? response.key : path)))\n      discard(replacing)\n    } else {\n      commit(insertUploadedFile(current, response.key, props.component, maxFiles.value))\n    }\n  } catch (uploadError) {\n    const message =\n      (uploadError as { errors?: Record<string, string[]> }).errors?.file?.[0] ??\n      (uploadError as Error).message\n    uploading.value = uploading.value.map((item) =>\n      item.path === local.path ? { ...item, error: message, progress: undefined } : item,\n    )\n  }\n}\n\nconst remove = (path: string) => {\n  commit(paths.value.filter((item) => item !== path))\n  discard(path)\n}\n\n/** Release a file that left the field: its preview, and a temporary upload's file. */\nconst discard = (path: string) => {\n  releasePreview(uploadedStore.get().find((file) => file.path === path)?.url)\n\n  if (path.startsWith('tmp:') && panel.value.endpoints.uploadDestroy) {\n    void requestJson(panel.value.endpoints.uploadDestroy, {\n      method: 'DELETE',\n      body: { key: path },\n    }).catch(() => undefined)\n  }\n}\n\nconst removeEntry = (file: LocalFile) => {\n  if (file.error || file.progress !== undefined) {\n    releasePreview(file.preview)\n    uploading.value = uploading.value.filter((item) => item.path !== file.path)\n  } else {\n    remove(file.path)\n  }\n}\n\nconst onDrop = (event: DragEvent) => {\n  event.preventDefault()\n  dragging.value = false\n\n  if (!disabled.value && event.dataTransfer && event.dataTransfer.files.length > 0) {\n    void upload(event.dataTransfer.files)\n  }\n}\n\n// `pasteable()`: images and files pasted while the drop zone has focus.\nconst onPaste = (event: ClipboardEvent) => {\n  if (disabled.value || props.component.pasteable === false) return\n\n  const pasted = filesFromClipboard(event.clipboardData)\n\n  if (pasted.length > 0) {\n    event.preventDefault()\n    void upload(pasted)\n  }\n}\n\nconst onPick = (event: Event) => {\n  const input = event.target as HTMLInputElement\n  // Copy the list: clearing the input empties it while the editor is open.\n  const picked = input.files ? Array.from(input.files) : []\n  input.value = ''\n  void upload(picked)\n}\n\nconst move = (from: number, to: number) =>\n  commit(moveRepeaterItem(paths.value, from, to) as string[])\nconst reorderable = computed(() =>\n  Boolean(props.component.reorderable && props.component.multiple && !disabled.value),\n)\n\nconst onItemDrop = (event: DragEvent, index: number) => {\n  if (!reorderable.value || dragPath.value === null) return\n  event.preventDefault()\n  event.stopPropagation()\n  const from = paths.value.indexOf(dragPath.value)\n  if (from !== -1 && index < files.value.length) move(from, index)\n  dragPath.value = null\n}\n\nconst hints = computed(() =>\n  [\n    props.component.acceptedFileTypes?.join(', '),\n    props.component.maxSize ? `≤ ${formatBytes(props.component.maxSize * 1024, 0)}` : null,\n    props.component.minFiles\n      ? choice(\n          'form.min_files',\n          props.component.minFiles,\n          {},\n          'At least :count file|At least :count files',\n        )\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' · '),\n)\n\n// `previewable(false)` shows every file as a name and icon, without the image.\nconst isImage = (file: LocalFile) =>\n  props.component.previewable !== false &&\n  (props.component.image || /\\.(png|jpe?g|gif|webp|svg|avif)$/i.test(file.name))\n\n// Previews whose image failed to load (missing or unreachable file) show the file icon.\nconst brokenPreviews = ref<ReadonlySet<string>>(new Set())\n\n/** `imagePreviewHeight()`: numbers are pixels, strings are CSS lengths (`'250px'`, `'10rem'`). */\nfunction cssLength(value: number | string): string {\n  return typeof value === 'number' || /^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value\n}\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div\n      data-slot=\"file-upload\"\n      :data-layout=\"props.component.panelLayout\"\n      :class=\"cn('flex flex-col gap-3', integrated && 'rounded-md border p-2')\"\n    >\n      <ul\n        v-if=\"files.length > 0 || uploading.length > 0\"\n        :class=\"\n          cn(\n            'grid gap-2',\n            props.component.panelLayout === 'grid' && 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4',\n            circle && 'justify-items-center',\n          )\n        \"\n      >\n        <li\n          v-for=\"(file, index) in [...files, ...uploading]\"\n          :key=\"file.path\"\n          :draggable=\"reorderable && index < files.length\"\n          :class=\"\n            cn(\n              dragPath === file.path && 'opacity-50',\n              'bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm',\n              circle && 'size-28 justify-center rounded-full border-0 p-0',\n              file.error && 'border-destructive',\n            )\n          \"\n          @dragstart=\"dragPath = file.path\"\n          @dragover=\"reorderable && $event.preventDefault()\"\n          @drop=\"onItemDrop($event, index)\"\n          @dragend=\"dragPath = null\"\n        >\n          <Button\n            v-if=\"!circle && removeAtStart && props.component.deletable && !disabled\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-xs\"\n            :aria-label=\"t('remove', {}, 'Remove')\"\n            @click=\"removeEntry(file)\"\n            ><XIcon\n          /></Button>\n          <Spinner\n            v-if=\"!circle && progressAtStart && file.progress !== undefined && !file.error\"\n          />\n          <img\n            v-if=\"isImage(file) && (file.url || file.preview) && !brokenPreviews.has(file.path)\"\n            :src=\"file.url ?? file.preview\"\n            alt=\"\"\n            :class=\"cn('size-12 shrink-0 rounded object-cover', circle && 'size-28 rounded-full')\"\n            :style=\"\n              !circle && props.component.imagePreviewHeight\n                ? {\n                    height: cssLength(props.component.imagePreviewHeight),\n                    width: 'auto',\n                    maxWidth: '50%',\n                  }\n                : undefined\n            \"\n            @error=\"brokenPreviews = new Set(brokenPreviews).add(file.path)\"\n          />\n          <FileIcon v-else-if=\"!circle\" class=\"text-muted-foreground size-6 shrink-0\" />\n          <div v-if=\"!circle\" class=\"min-w-0 flex-1\">\n            <p class=\"truncate font-medium\">{{ file.name }}</p>\n            <p :class=\"cn('text-muted-foreground text-xs', file.missing && 'text-destructive')\">\n              {{\n                file.error ??\n                (file.missing\n                  ? t('form.file_missing', {}, 'This file no longer exists.')\n                  : file.progress !== undefined && !file.error\n                    ? (props.component.uploadingMessage ?? t('form.uploading', {}, 'Uploading…'))\n                    : file.size\n                      ? formatBytes(file.size)\n                      : file.temporary\n                        ? t('form.uploading', {}, 'Pending')\n                        : '')\n              }}\n            </p>\n          </div>\n          <div :class=\"cn('flex items-center gap-1', circle && 'absolute -end-1 -bottom-1')\">\n            <Spinner\n              v-if=\"(circle || !progressAtStart) && file.progress !== undefined && !file.error\"\n            />\n            <template v-if=\"reorderable && index < files.length\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :aria-label=\"t('form.move_up', {}, 'Move up')\"\n                :disabled=\"index === 0\"\n                @click=\"move(index, index - 1)\"\n                ><ChevronUpIcon\n              /></Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                :aria-label=\"t('form.move_down', {}, 'Move down')\"\n                :disabled=\"index === files.length - 1\"\n                @click=\"move(index, index + 1)\"\n                ><ChevronDownIcon\n              /></Button>\n            </template>\n            <Button\n              v-if=\"canEditExisting(file, index)\"\n              type=\"button\"\n              :variant=\"circle ? 'secondary' : 'ghost'\"\n              size=\"icon-xs\"\n              :class=\"cn(circle && 'rounded-full shadow')\"\n              :aria-label=\"t('image_editor.title', {}, 'Edit image')\"\n              :title=\"t('image_editor.title', {}, 'Edit image')\"\n              data-action=\"edit-image\"\n              @click=\"void editExisting(file)\"\n              ><PencilIcon\n            /></Button>\n            <Button\n              v-if=\"props.component.openable && uploadedFileLinks(file).open\"\n              as-child\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-xs\"\n            >\n              <a\n                :href=\"uploadedFileLinks(file).open\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                :aria-label=\"`${t('open', {}, 'Open')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`\"\n                ><ExternalLinkIcon\n              /></a>\n            </Button>\n            <Button\n              v-if=\"props.component.downloadable && uploadedFileLinks(file).download\"\n              as-child\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-xs\"\n            >\n              <a\n                :href=\"uploadedFileLinks(file).download\"\n                download\n                :aria-label=\"t('download', {}, 'Download')\"\n                ><DownloadIcon\n              /></a>\n            </Button>\n            <Button\n              v-if=\"props.component.deletable && !disabled && (circle || !removeAtStart)\"\n              type=\"button\"\n              :variant=\"circle ? 'secondary' : 'ghost'\"\n              size=\"icon-xs\"\n              :class=\"cn(circle && 'rounded-full shadow')\"\n              :aria-label=\"t('remove', {}, 'Remove')\"\n              @click=\"removeEntry(file)\"\n              ><XIcon\n            /></Button>\n          </div>\n        </li>\n      </ul>\n      <div\n        v-if=\"canAddMore && !disabled\"\n        role=\"button\"\n        tabindex=\"0\"\n        :data-align=\"uploadAlign\"\n        :style=\"\n          !circle && props.component.panelAspectRatio\n            ? { aspectRatio: cssAspectRatio(props.component.panelAspectRatio) }\n            : undefined\n        \"\n        :class=\"\n          cn(\n            'text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors',\n            uploadAlign === 'start'\n              ? 'items-start text-start'\n              : uploadAlign === 'end'\n                ? 'items-end text-end'\n                : 'items-center text-center',\n            integrated && 'border-transparent',\n            dragging && 'border-ring bg-accent',\n            circle && 'size-28 items-center rounded-full py-0',\n          )\n        \"\n        :aria-describedby=\"aria['aria-describedby']\"\n        @click=\"inputRef?.click()\"\n        @keydown.enter.prevent=\"inputRef?.click()\"\n        @keydown.space.prevent=\"inputRef?.click()\"\n        @dragover.prevent=\"dragging = true\"\n        @dragleave=\"dragging = false\"\n        @drop=\"onDrop\"\n        @paste=\"onPaste\"\n      >\n        <UploadCloudIcon class=\"size-5\" />\n        <span v-if=\"!circle\">{{\n          props.component.placeholder ??\n          t('form.drop_files', {}, 'Drop files here or click to browse')\n        }}</span>\n        <span v-if=\"!circle && hints\" class=\"text-muted-foreground text-xs\">{{ hints }}</span>\n      </div>\n      <input\n        :id=\"id\"\n        ref=\"inputRef\"\n        type=\"file\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        :aria-invalid=\"aria['aria-invalid']\"\n        :aria-describedby=\"aria['aria-describedby']\"\n        :aria-required=\"aria['aria-required']\"\n        :multiple=\"props.component.multiple\"\n        :accept=\"fileUploadAccept(props.component)\"\n        :disabled=\"disabled\"\n        @change=\"onPick\"\n      />\n      <!-- Mounted from the first edit on (it stays for its closing animation). -->\n      <ImageEditorDialog\n        v-if=\"props.component.imageEditor && (editing || editorRequested)\"\n        :request=\"editing\"\n        :options=\"props.component.imageEditor\"\n      />\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,8 @@
+import type { FileUploadSchema } from '@alfakit/core';
+declare const _default: import("vue").DefineComponent<{
+    component: FileUploadSchema;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    component: FileUploadSchema;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=FileUploadField.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/FileUploadField.vue"],"names":[],"mappings":"AAoqBA,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,eAAe,CAAA;;eA0DnC,gBAAgB;;eAAhB,gBAAgB;;AAPhD,wBAs9BK"}