@chelone/vue 0.5.0 → 0.7.0

package/dist/components/admin/inputs/datagrid-input.vue.d.ts

@@ -1,3 +1,4 @@
+import type { LooseRecord, SourceProp } from "@chelone/core";
 import type { ChoiceRecord } from "../../../choices/use-choices.js";
 import type { ChoiceInputBaseProps } from "./choice-input-props.js";
 /**
@@ -6,20 +7,25 @@ import type { ChoiceInputBaseProps } from "./choice-input-props.js";
  * `disableValue` comes in through the shared base and is unused: a datagrid row
  * is never disabled. The React twin has no `disableValue` prop at all.
  */
-export interface DatagridInputProps<TChoice extends ChoiceRecord = ChoiceRecord> extends ChoiceInputBaseProps<TChoice> {
+export interface DatagridInputProps<TRecord = LooseRecord, TPath extends SourceProp<TRecord> = SourceProp<TRecord>, TChoice extends ChoiceRecord = ChoiceRecord> extends ChoiceInputBaseProps<TRecord, TPath, TChoice> {
     /** Column header for the choice column. Default empty. */
     optionLabel?: string;
 }
-declare const _default: <TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DatagridInputProps<TChoice> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TRecord = LooseRecord, TPath extends SourceProp<TRecord> = SourceProp<TRecord>, TChoice extends ChoiceRecord = ChoiceRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DatagridInputProps<TRecord, TPath, TChoice>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/inputs/datagrid-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,153 @@
+import { useInput } from "../../../form/use-input.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import checkbox_default from "../../ui/checkbox.js";
+import { FieldDescription, FieldError } from "../../ui/field.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.js";
+import validation_error_default from "../common/validation-error.js";
+import { useChoiceInput } from "./use-choice-input.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { isIdentifier, toIdentifierList } from "@chelone/core";
+// src/components/admin/inputs/datagrid-input.vue?vue&type=script&setup=true&lang.ts
+var datagrid_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "datagrid-input",
+	props: {
+		optionLabel: {},
+		source: {},
+		choices: {},
+		optionText: { type: Function },
+		optionValue: {},
+		disableValue: {},
+		translateChoice: { type: Boolean },
+		label: { type: [String, Boolean] },
+		helperText: {},
+		defaultValue: {},
+		validate: { type: [Function, Array] },
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<DatagridInput>` — renders the choices as a selectable table: the user ticks
+		* row checkboxes and the form value is the array of selected record ids. The Vue
+		* analog of `@chelone/react`'s `inputs/datagrid-input.tsx`.
+		*
+		* Typically a child of `<ReferenceArrayInput>` (choices + resource come from the
+		* ambient choices context via {@link useChoiceInput}); can also take an inline
+		* `choices` prop. The selection lives on the form value — a single
+		* {@link useInput} id-array binding — so no list-selection store / DataTable
+		* controller is needed. A header checkbox toggles select-all.
+		*
+		* @experimental A simplified port: row selection + select-all only (no
+		* filtering / pagination / create-suggestion flow), matching the React twin.
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const { source, allChoices, getChoiceText, getChoiceValue } = useChoiceInput({
+			componentName: "DatagridInput",
+			choices: props.choices,
+			source: props.source,
+			optionText: props.optionText ?? "name",
+			optionValue: props.optionValue,
+			disableValue: props.disableValue,
+			translateChoice: props.translateChoice
+		});
+		const { id, value, setValue, blur, error, touched } = useInput({
+			source,
+			defaultValue: props.defaultValue,
+			validate: props.validate,
+			format: toIdentifierList
+		});
+		const invalid = computed(() => touched.value && error.value != null);
+		const selectedIds = computed(() => toIdentifierList(value.value));
+		const rows = computed(() => allChoices.value.flatMap((choice) => {
+			const rowId = getChoiceValue(choice);
+			return isIdentifier(rowId) ? [{
+				choice,
+				rowId
+			}] : [];
+		}));
+		const allIds = computed(() => rows.value.map((row) => row.rowId));
+		const allSelected = computed(() => allIds.value.length > 0 && allIds.value.every((rowId) => isSelected(rowId)));
+		const helper = computed(() => props.helperText);
+		function isSelected(rowId) {
+			return selectedIds.value.some((v) => String(v) === String(rowId));
+		}
+		function toggle(rowId) {
+			setValue(isSelected(rowId) ? selectedIds.value.filter((v) => String(v) !== String(rowId)) : [...selectedIds.value, rowId]);
+			blur();
+		}
+		function toggleAll() {
+			setValue(allSelected.value ? [] : allIds.value);
+			blur();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(props.class),
+				"data-slot": "datagrid-input"
+			}, [
+				createVNode(unref(Table), null, {
+					default: withCtx(() => [createVNode(unref(TableHeader), null, {
+						default: withCtx(() => [createVNode(unref(TableRow), null, {
+							default: withCtx(() => [createVNode(unref(TableHead), { class: "w-10" }, {
+								default: withCtx(() => [createVNode(checkbox_default, {
+									"model-value": allSelected.value,
+									"aria-label": unref(translate)("ra.action.select_all", { _: "Select all" }),
+									"aria-invalid": invalid.value || void 0,
+									"onUpdate:modelValue": toggleAll
+								}, null, 8, [
+									"model-value",
+									"aria-label",
+									"aria-invalid"
+								])]),
+								_: 1
+							}), createVNode(unref(TableHead), null, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.optionLabel), 1)]),
+								_: 1
+							})]),
+							_: 1
+						})]),
+						_: 1
+					}), createVNode(unref(TableBody), null, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, ({ choice, rowId }) => {
+							return openBlock(), createBlock(unref(TableRow), {
+								key: String(rowId),
+								"data-state": isSelected(rowId) ? "selected" : void 0
+							}, {
+								default: withCtx(() => [createVNode(unref(TableCell), null, {
+									default: withCtx(() => [createVNode(checkbox_default, {
+										id: `${unref(id)}-${String(rowId)}`,
+										"model-value": isSelected(rowId),
+										"aria-label": unref(translate)("ra.action.select_row", { _: "Select this row" }),
+										"onUpdate:modelValue": ($event) => toggle(rowId)
+									}, null, 8, [
+										"id",
+										"model-value",
+										"aria-label",
+										"onUpdate:modelValue"
+									])]),
+									_: 2
+								}, 1024), createVNode(unref(TableCell), null, {
+									default: withCtx(() => [createTextVNode(toDisplayString(unref(getChoiceText)(choice)), 1)]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1032, ["data-state"]);
+						}), 128))]),
+						_: 1
+					})]),
+					_: 1
+				}),
+				helper.value ? (openBlock(), createBlock(unref(FieldDescription), { key: 0 }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(helper.value), 1)]),
+					_: 1
+				})) : createCommentVNode("", true),
+				invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+					default: withCtx(() => [createVNode(validation_error_default, { error: unref(error) }, null, 8, ["error"])]),
+					_: 1
+				})) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+export { datagrid_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/inputs/date-input-format.d.ts

@@ -1,40 +1,5 @@
 /**
- * Pure date/time format + parse helpers shared by `<DateInput>`,
- * `<DateTimeInput>`, and `<TimeInput>` — the Vue analog of the inline
- * `convertDateToString` / `formatX` / `parseX` functions in `@chelone/react`'s
- * `inputs/{date,date-time,time}-input.tsx`. Extracted to a sibling `.ts` so the
- * three SFCs share one implementation (and so the formatters stay unit-testable
- * without mounting a component).
+ * The date, date-time and time format and parse helpers live in
+ * `@chelone/core`; this file keeps the three SFCs' import path.
  */
-/**
- * Format a form value (string / ISO / `Date` / timestamp / "") to a bare
- * "YYYY-MM-DD" string for `<input type="date">`. Returns `null` for nullish/empty.
- */
-export declare function formatDate(value: unknown): string | null;
-/** Whether a raw `<input type="date">` string is empty or a valid date. */
-export declare function isValidDate(raw: string): boolean;
-/**
- * Format a form value (ISO string / `Date` / timestamp) to the local
- * `datetime-local` display string. Empty → "" (keeps the input controlled).
- */
-export declare function formatDateTime(value: unknown): string;
-/**
- * Parse a local `datetime-local` string back to an ISO 8601 string (browser
- * timezone). Returns `null` for empty/unparseable so a required validator fires.
- */
-export declare function parseDateTimeToISO(value: unknown): string | null;
-/** Whether a raw `datetime-local` string is empty or parses to a valid date. */
-export declare function isValidDateTime(raw: string): boolean;
-/**
- * Format a form value (`Date` / "HH:mm" string) to the "HH:mm" display string.
- * Empty → "" (keeps the input controlled).
- */
-export declare function formatTime(value: unknown): string;
-/**
- * Parse a "HH:mm"/"HH:mm:ss" string to a `Date` (today at that local time), for
- * dataProvider compatibility. Returns `null` for empty/unparseable so a required
- * validator still fires.
- */
-export declare function parseTimeToDate(value: unknown): Date | null;
-/** Whether a raw `<input type="time">` string is empty or a valid time. */
-export declare function isValidTime(raw: string): boolean;
+export { formatDate, formatDateTime, formatTime, isValidDate, isValidDateTime, isValidTime, parseDateTimeToISO, parseTimeToDate, } from "@chelone/core";

package/dist/components/admin/inputs/date-input-format.js

@@ -1,87 +1 @@
-const leftPad = (nb = 2) => (value) => ("0".repeat(nb) + value).slice(-nb);
-const leftPad4 = leftPad(4);
-const leftPad2 = leftPad(2);
-const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-function dateToYmd(value) {
-  if (!(value instanceof Date) || Number.isNaN(value.getDate())) return "";
-  const yyyy = value.getFullYear().toString();
-  const MM = leftPad2(value.getMonth() + 1);
-  const dd = leftPad2(value.getDate());
-  return `${yyyy}-${MM}-${dd}`;
-}
-function formatDate(value) {
-  if (value == null || value === "") return null;
-  if (value instanceof Date) return dateToYmd(value);
-  if (typeof value === "string" && dateRegex.test(value)) return value;
-  return dateToYmd(new Date(value));
-}
-function isValidDate(raw) {
-  if (raw === "") return true;
-  return dateRegex.test(raw) && !Number.isNaN(new Date(raw).getTime());
-}
-const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
-function dateToLocalDateTime(value) {
-  if (!(value instanceof Date) || Number.isNaN(value.getDate())) return "";
-  const yyyy = leftPad4(value.getFullYear());
-  const MM = leftPad2(value.getMonth() + 1);
-  const dd = leftPad2(value.getDate());
-  const hh = leftPad2(value.getHours());
-  const mm = leftPad2(value.getMinutes());
-  return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
-}
-function formatDateTime(value) {
-  if (value == null || value === "") return "";
-  if (value instanceof Date) return dateToLocalDateTime(value);
-  if (typeof value === "string" && dateTimeRegex.test(value)) return value;
-  return dateToLocalDateTime(new Date(value));
-}
-function parseDateTimeToISO(value) {
-  if (value == null || value === "") return null;
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? null : date.toISOString();
-}
-function isValidDateTime(raw) {
-  if (raw === "") return true;
-  return !Number.isNaN(new Date(raw).getTime());
-}
-const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
-function dateToHm(value) {
-  if (!(value instanceof Date) || Number.isNaN(value.getDate())) return "";
-  const hh = leftPad2(value.getHours());
-  const mm = leftPad2(value.getMinutes());
-  return `${hh}:${mm}`;
-}
-function formatTime(value) {
-  if (value == null || value === "") return "";
-  if (value instanceof Date) return dateToHm(value);
-  if (typeof value === "string" && timeRegex.test(value)) return value;
-  return dateToHm(new Date(value));
-}
-function parseTimeToDate(value) {
-  if (value == null || value === "") return null;
-  if (typeof value === "string" && timeRegex.test(value)) {
-    const [hh = "0", mm = "0", ss = "0"] = value.split(":");
-    const d = /* @__PURE__ */ new Date();
-    d.setHours(
-      Number.parseInt(hh, 10),
-      Number.parseInt(mm, 10),
-      Number.parseInt(ss, 10),
-      0
-    );
-    return d;
-  }
-  return null;
-}
-function isValidTime(raw) {
-  return raw === "" || timeRegex.test(raw);
-}
-export {
-  formatDate,
-  formatDateTime,
-  formatTime,
-  isValidDate,
-  isValidDateTime,
-  isValidTime,
-  parseDateTimeToISO,
-  parseTimeToDate
-};
+export { formatDate, formatDateTime, formatTime, isValidDate, isValidDateTime, isValidTime, parseDateTimeToISO, parseTimeToDate } from "@chelone/core";

package/dist/components/admin/inputs/date-input.js

@@ -0,0 +1,4 @@
+import date_input_vue_vue_type_script_setup_true_lang_default from "./date-input.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/inputs/date-input.vue
+var date_input_default = date_input_vue_vue_type_script_setup_true_lang_default;
+export { date_input_default as default };

package/dist/components/admin/inputs/date-input.vue.d.ts

@@ -1,31 +1,32 @@
-/**
- * `<DateInput>` — native date picker for a "YYYY-MM-DD" value, the Vue analog of
- * `@chelone/react`'s `inputs/date-input.tsx`. Formats an incoming string / ISO /
- * `Date` / timestamp to a bare date string and stores the typed date string
- * (empty → `null` via core's default parse, so a required validator fires).
- *
- * Like `<NumberInput>`, it keeps a LOCAL string buffer so a partial entry isn't
- * clobbered while typing — the twin's uncontrolled `defaultValue` + `key`-remount
- * dance (born of RHF's `field.ref`) maps to a focused-buffer + external re-sync.
- */
-import type { SourceProp, Validator } from "@chelone/core";
+import type { DateInputValue, LooseRecord, SourceProp } from "@chelone/core";
+import type { SourceInputProps } from "./source-input-props.js";
 /** Props for {@link DateInput}. */
-export interface DateInputProps {
-    source: SourceProp;
-    label?: string | false;
-    defaultValue?: unknown;
-    validate?: Validator | readonly Validator[];
+export interface DateInputProps<RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>> extends SourceInputProps<RecordType, TPath> {
     /** Read transform (form value → display string). Default {@link formatDate}. */
-    format?: (value: unknown) => unknown;
+    format?: (value: DateInputValue) => string | null;
     /** Write transform (display string → stored value). Default core parse (""→null). */
-    parse?: (input: unknown) => unknown;
+    parse?: (input: string) => unknown;
     helperText?: string;
     disabled?: boolean;
     readonly?: boolean;
     inputClass?: string;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<DateInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DateInputProps> & Readonly<{}>, {
-    label: string | false;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DateInputProps<RecordType, TPath>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/inputs/date-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,109 @@
+import { useInput } from "../../../form/use-input.js";
+import { Field, FieldError, FieldLabel } from "../../ui/field.js";
+import input_default from "../../ui/input.js";
+import validation_error_default from "../common/validation-error.js";
+import { formatDate, isValidDate } from "./date-input-format.js";
+import { humanizeSource } from "./label-text.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { textOf, toDateInputValue, toTextValue } from "@chelone/core";
+// src/components/admin/inputs/date-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var date_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "date-input",
+	props: {
+		format: {},
+		parse: {},
+		helperText: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		inputClass: {},
+		class: {},
+		source: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		defaultValue: {},
+		validate: {}
+	},
+	setup(__props) {
+		/**
+		* `<DateInput>` — native date picker for a "YYYY-MM-DD" value, the Vue analog of
+		* `@chelone/react`'s `inputs/date-input.tsx`. Formats an incoming string / ISO /
+		* `Date` / timestamp to a bare date string and stores the typed date string
+		* (empty → `null` via core's default parse, so a required validator fires).
+		*
+		* Like `<NumberInput>`, it keeps a LOCAL string buffer so a partial entry isn't
+		* clobbered while typing — the twin's uncontrolled `defaultValue` + `key`-remount
+		* dance (born of RHF's `field.ref`) maps to a focused-buffer + external re-sync.
+		*/
+		const props = __props;
+		const format = computed(() => props.format ?? formatDate);
+		const userParse = props.parse;
+		const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+			source: props.source,
+			defaultValue: props.defaultValue,
+			validate: props.validate,
+			format: (v) => format.value(toDateInputValue(v)),
+			parse: userParse && ((v) => userParse(toTextValue(v)))
+		});
+		const buffer = ref(textOf(value.value));
+		const focused = ref(false);
+		watch(value, (next) => {
+			if (!focused.value) buffer.value = textOf(next);
+		});
+		const invalid = computed(() => touched.value && error.value != null);
+		const labelText = computed(() => props.label === false ? null : props.label ?? humanizeSource(props.source));
+		function onInput(raw) {
+			buffer.value = raw;
+			if (raw !== "" && isValidDate(raw)) setValue(raw);
+		}
+		function onBlur() {
+			focused.value = false;
+			if (isValidDate(buffer.value)) setValue(buffer.value);
+			blur();
+			buffer.value = textOf(value.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				class: normalizeClass(props.class),
+				"data-invalid": invalid.value
+			}, {
+				default: withCtx(() => [
+					labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+						key: 0,
+						"html-for": unref(id)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(labelText.value), 1), unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)]),
+						_: 1
+					}, 8, ["html-for"])) : createCommentVNode("", true),
+					createVNode(input_default, {
+						id: unref(id),
+						type: "date",
+						"model-value": buffer.value,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-invalid": invalid.value,
+						class: normalizeClass(__props.inputClass),
+						onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+						"onUpdate:modelValue": onInput,
+						onBlur
+					}, null, 8, [
+						"id",
+						"model-value",
+						"disabled",
+						"readonly",
+						"aria-invalid",
+						"class"
+					]),
+					invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+						default: withCtx(() => [createVNode(validation_error_default, { error: unref(error) }, null, 8, ["error"])]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, ["class", "data-invalid"]);
+		};
+	}
+});
+export { date_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/inputs/date-time-input.js

@@ -0,0 +1,4 @@
+import date_time_input_vue_vue_type_script_setup_true_lang_default from "./date-time-input.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/inputs/date-time-input.vue
+var date_time_input_default = date_time_input_vue_vue_type_script_setup_true_lang_default;
+export { date_time_input_default as default };

package/dist/components/admin/inputs/date-time-input.vue.d.ts

@@ -1,29 +1,32 @@
-/**
- * `<DateTimeInput>` — native `datetime-local` picker, the Vue analog of
- * `@chelone/react`'s `inputs/date-time-input.tsx`. Formats an incoming ISO
- * string / `Date` / timestamp to the local `yyyy-MM-ddThh:mm` display value and
- * parses the entered value back to an ISO 8601 string (browser timezone). Empty
- * → `null`, so a required validator fires. Same focused-buffer pattern as
- * `<DateInput>`.
- */
-import type { SourceProp, Validator } from "@chelone/core";
+import type { DateInputValue, LooseRecord, SourceProp } from "@chelone/core";
+import type { SourceInputProps } from "./source-input-props.js";
 /** Props for {@link DateTimeInput}. */
-export interface DateTimeInputProps {
-    source: SourceProp;
-    label?: string | false;
-    defaultValue?: unknown;
-    validate?: Validator | readonly Validator[];
+export interface DateTimeInputProps<RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>> extends SourceInputProps<RecordType, TPath> {
     /** Read transform (form value → display string). Default {@link formatDateTime}. */
-    format?: (value: unknown) => unknown;
+    format?: (value: DateInputValue) => string;
     /** Write transform (display string → stored value). Default {@link parseDateTimeToISO}. */
-    parse?: (input: unknown) => unknown;
+    parse?: (input: string) => unknown;
     helperText?: string;
     disabled?: boolean;
     readonly?: boolean;
     inputClass?: string;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<DateTimeInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DateTimeInputProps> & Readonly<{}>, {
-    label: string | false;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DateTimeInputProps<RecordType, TPath>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/admin/inputs/date-time-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import { useInput } from "../../../form/use-input.js";
+import { Field, FieldError, FieldLabel } from "../../ui/field.js";
+import input_default from "../../ui/input.js";
+import validation_error_default from "../common/validation-error.js";
+import { formatDateTime, isValidDateTime, parseDateTimeToISO } from "./date-input-format.js";
+import { humanizeSource } from "./label-text.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { textOf, toDateInputValue, toTextValue } from "@chelone/core";
+// src/components/admin/inputs/date-time-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var date_time_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "date-time-input",
+	props: {
+		format: {},
+		parse: {},
+		helperText: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		inputClass: {},
+		class: {},
+		source: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		defaultValue: {},
+		validate: {}
+	},
+	setup(__props) {
+		/**
+		* `<DateTimeInput>` — native `datetime-local` picker, the Vue analog of
+		* `@chelone/react`'s `inputs/date-time-input.tsx`. Formats an incoming ISO
+		* string / `Date` / timestamp to the local `yyyy-MM-ddThh:mm` display value and
+		* parses the entered value back to an ISO 8601 string (browser timezone). Empty
+		* → `null`, so a required validator fires. Same focused-buffer pattern as
+		* `<DateInput>`.
+		*/
+		const props = __props;
+		const format = computed(() => props.format ?? formatDateTime);
+		const parse = computed(() => props.parse ?? parseDateTimeToISO);
+		const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+			source: props.source,
+			defaultValue: props.defaultValue,
+			validate: props.validate,
+			format: (v) => format.value(toDateInputValue(v)),
+			parse: (v) => parse.value(toTextValue(v))
+		});
+		const buffer = ref(textOf(value.value));
+		const focused = ref(false);
+		watch(value, (next) => {
+			if (!focused.value) buffer.value = textOf(next);
+		});
+		const invalid = computed(() => touched.value && error.value != null);
+		const labelText = computed(() => props.label === false ? null : props.label ?? humanizeSource(props.source));
+		function onInput(raw) {
+			buffer.value = raw;
+			if (raw !== "" && isValidDateTime(raw)) setValue(raw);
+		}
+		function onBlur() {
+			focused.value = false;
+			if (isValidDateTime(buffer.value)) setValue(buffer.value);
+			blur();
+			buffer.value = textOf(value.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				class: normalizeClass(props.class),
+				"data-invalid": invalid.value
+			}, {
+				default: withCtx(() => [
+					labelText.value != null ? (openBlock(), createBlock(unref(FieldLabel), {
+						key: 0,
+						"html-for": unref(id)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(labelText.value), 1), unref(isRequired) ? (openBlock(), createElementBlock("span", _hoisted_1, " *")) : createCommentVNode("", true)]),
+						_: 1
+					}, 8, ["html-for"])) : createCommentVNode("", true),
+					createVNode(input_default, {
+						id: unref(id),
+						type: "datetime-local",
+						"model-value": buffer.value,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-invalid": invalid.value,
+						class: normalizeClass(__props.inputClass),
+						onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+						"onUpdate:modelValue": onInput,
+						onBlur
+					}, null, 8, [
+						"id",
+						"model-value",
+						"disabled",
+						"readonly",
+						"aria-invalid",
+						"class"
+					]),
+					invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+						default: withCtx(() => [createVNode(validation_error_default, { error: unref(error) }, null, 8, ["error"])]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, ["class", "data-invalid"]);
+		};
+	}
+});
+export { date_time_input_vue_vue_type_script_setup_true_lang_default as default };