@mapomodule/form 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/runtime/components/fields/MapoRepeaterItem.vue

@@ -0,0 +1,346 @@
+<script setup>
+import { ref, computed, watch, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
+import { useMapoForm, injectMapoForm } from "../../composables/useMapoForm.js";
+import { useFocusMode } from "../../composables/useFocusMode.js";
+import MapoFormField from "../MapoFormField.vue";
+const { t } = useI18n();
+const props = defineProps({
+  uid: { type: String, required: false },
+  item: { type: Object, required: true },
+  fields: { type: Array, required: true },
+  index: { type: Number, required: true },
+  errorPrefix: { type: String, required: true },
+  parentErrors: { type: Object, required: true },
+  languages: { type: Array, required: true },
+  currentLang: { type: String, required: true },
+  readonly: { type: Boolean, required: true },
+  registry: { type: Object, required: true },
+  previewLabel: { type: Function, required: false },
+  defaultExpanded: { type: Boolean, required: true },
+  allowDuplicate: { type: Boolean, required: false },
+  repeaterDescriptor: { type: Object, required: false },
+  totalItems: { type: Number, required: false },
+  selected: { type: Boolean, required: false },
+  selectionMode: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:item", "delete", "duplicate", "move-up", "move-down", "move-to", "toggle-select"]);
+function toggleSelectFromEvent(e) {
+  emit("toggle-select", e.shiftKey === true);
+}
+const expanded = ref(props.defaultExpanded);
+const localModel = ref({ ...props.item });
+watch(
+  () => props.item,
+  (next) => {
+    if (next === localModel.value) return;
+    localModel.value = { ...next };
+  }
+);
+watch(
+  localModel,
+  (val) => {
+    emit("update:item", val);
+  },
+  { deep: true }
+);
+const itemErrors = computed(() => {
+  const result = {};
+  const prefix = `${props.errorPrefix}.`;
+  for (const [k, v] of Object.entries(props.parentErrors)) {
+    if (k.startsWith(prefix)) result[k.slice(prefix.length)] = v;
+  }
+  return result;
+});
+const hasErrors = computed(() => Object.keys(itemErrors.value).length > 0);
+const currentLangRef = computed(() => props.currentLang);
+const readonly = computed(() => props.readonly);
+const parentCtx = injectMapoForm();
+const form = useMapoForm({
+  model: localModel,
+  fields: computed(() => props.fields),
+  errors: itemErrors,
+  languages: props.languages,
+  currentLang: currentLangRef,
+  immediate: parentCtx?.immediate ?? false,
+  debounce: parentCtx?.debounce ?? 300,
+  notifyErrors: false,
+  registry: props.registry
+});
+watchEffect(() => {
+  form.readonly.value = props.readonly;
+  if (parentCtx) form.ctx.submitted.value = parentCtx.submitted.value;
+});
+const label = computed(
+  () => props.previewLabel?.(localModel.value, props.index) ?? `Item ${props.index + 1}`
+);
+const miniCardAttrs = computed(() => props.repeaterDescriptor?.attrs);
+const isCompressed = computed(() => {
+  if (expanded.value) return false;
+  const threshold = miniCardAttrs.value?.compressThreshold ?? 3;
+  const hasMiniCard = !!miniCardAttrs.value?.miniCard;
+  return hasMiniCard && (props.totalItems ?? 0) >= threshold;
+});
+const miniCard = computed(
+  () => miniCardAttrs.value?.miniCard?.(localModel.value, props.index)
+);
+const statusColorClass = computed(
+  () => ({
+    success: "bg-green-500",
+    info: "bg-blue-500",
+    warning: "bg-yellow-500",
+    error: "bg-red-500",
+    neutral: "bg-gray-400"
+  })[miniCard.value?.statusColor ?? "neutral"]
+);
+const focusMode = useFocusMode();
+function enterFocusMode() {
+  focusMode.enter({
+    descriptor: props.repeaterDescriptor,
+    fields: props.fields,
+    model: { ...localModel.value },
+    errors: itemErrors,
+    onUpdate: (val) => {
+      localModel.value = { ...val };
+      emit("update:item", localModel.value);
+    },
+    registry: props.registry,
+    languages: props.languages,
+    currentLang: props.currentLang,
+    breadcrumb: [
+      props.repeaterDescriptor?.label ?? t("mapo.repeater.repeater"),
+      label.value
+    ]
+  });
+}
+</script>
+
+<template>
+  <div
+    class="mapo-repeater-item rounded border transition-all"
+    :class="[
+  hasErrors ? 'border-red-300' : 'border-gray-200',
+  selected && selectionMode ? 'ring-2 ring-primary-500 ring-offset-1' : ''
+]"
+  >
+    <!-- ── Mini-card (contextual scaling) ──────────────────────────────────── -->
+    <div
+      v-if="isCompressed && miniCard"
+      class="flex cursor-pointer items-center gap-3 px-3 py-2 transition-colors hover:bg-gray-50"
+      @click="selectionMode ? toggleSelectFromEvent($event) : expanded = true"
+    >
+      <!-- Bulk selection checkbox -->
+      <UCheckbox
+        v-if="selectionMode"
+        :model-value="selected"
+        @update:model-value="emit('toggle-select', false)"
+        @click.stop
+      />
+
+      <!-- Optional thumbnail -->
+      <img
+        v-if="miniCard.thumbnail"
+        :src="miniCard.thumbnail"
+        class="h-9 w-9 rounded object-cover"
+        alt=""
+      />
+
+      <!-- Status dot -->
+      <span
+        v-if="miniCard.statusColor"
+        class="h-2 w-2 shrink-0 rounded-full"
+        :class="statusColorClass"
+      />
+
+      <!-- Drag handle (mousedown.stop prevents the parent click handler from firing on drag start) -->
+      <UIcon
+        name="i-lucide-grip-vertical"
+        class="drag-handle h-4 w-4 shrink-0 cursor-grab text-gray-300 active:cursor-grabbing"
+        @mousedown.stop
+        @click.stop
+      />
+
+      <!-- Contenuto testuale -->
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm font-medium text-gray-700">
+          {{ miniCard.title }}
+        </p>
+        <p v-if="miniCard.subtitle" class="truncate text-xs text-gray-400">
+          {{ miniCard.subtitle }}
+        </p>
+      </div>
+
+      <!-- Error badge -->
+      <UBadge v-if="hasErrors" color="error" variant="soft" size="xs">
+        errors
+      </UBadge>
+
+      <!-- Quick actions (delete only in mini mode) -->
+      <div class="flex items-center gap-1">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="error"
+          icon="i-lucide-trash-2"
+          :disabled="readonly"
+          :title="t('mapo.delete')"
+          @click.stop="$emit('delete')"
+        />
+        <UIcon name="i-lucide-chevron-down" class="h-4 w-4 text-gray-400" />
+      </div>
+    </div>
+
+    <!-- ── Item header (expanded mode) ─────────────────────────────────────── -->
+    <div
+      v-else
+      class="flex items-center gap-2 bg-gray-50 px-3 py-2"
+      :class="selectionMode ? 'cursor-pointer hover:bg-gray-100' : ''"
+      @click="selectionMode && toggleSelectFromEvent($event)"
+    >
+      <!-- Bulk selection checkbox -->
+      <UCheckbox
+        v-if="selectionMode"
+        :model-value="selected"
+        @update:model-value="emit('toggle-select', false)"
+        @click.stop
+      />
+
+      <!-- Drag handle (mousedown.stop avoids triggering row-click selection on drag start) -->
+      <UIcon
+        name="i-lucide-grip-vertical"
+        class="drag-handle h-4 w-4 cursor-grab text-gray-400 active:cursor-grabbing"
+        @mousedown.stop
+        @click.stop
+      />
+
+      <!-- Collapsed label / error badge. In selection mode the row click handles selection,
+           so this button only toggles expansion when not selecting. -->
+      <button
+        type="button"
+        class="flex flex-1 items-center gap-2 text-left text-sm font-medium text-gray-700"
+        @click.stop="
+  selectionMode ? toggleSelectFromEvent($event) : expanded = !expanded
+"
+      >
+        <span class="truncate">{{ label }}</span>
+        <UBadge v-if="hasErrors" color="error" variant="soft" size="xs">
+          errors
+        </UBadge>
+      </button>
+
+      <!-- Action buttons. All buttons stop propagation so the row-click selection handler
+           does not also toggle selection when the user clicks an action. -->
+      <div class="flex items-center gap-1" @click.stop>
+        <slot name="actions" />
+
+        <!-- Numeric position field (enabled via repeaterDescriptor.attrs.showPositionField) -->
+        <template
+          v-if="repeaterDescriptor?.attrs?.showPositionField && !readonly"
+        >
+          <UInput
+            :model-value="index + 1"
+            type="number"
+            :min="1"
+            :max="totalItems"
+            size="xs"
+            class="w-14 text-center"
+            :title="t('mapo.repeater.position')"
+            @change="
+  $emit(
+    'move-to',
+    Math.max(
+      0,
+      Math.min(
+        totalItems - 1,
+        Number($event.target.value) - 1
+      )
+    )
+  )
+"
+          />
+        </template>
+
+        <!-- Focus mode -->
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-maximize-2"
+          :title="t('mapo.repeater.editFullScreen')"
+          @click="enterFocusMode"
+        />
+
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-chevron-up"
+          :disabled="readonly"
+          :title="t('mapo.repeater.moveUp')"
+          @click="$emit('move-up')"
+        />
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-chevron-down"
+          :disabled="readonly"
+          :title="t('mapo.repeater.moveDown')"
+          @click="$emit('move-down')"
+        />
+
+        <UButton
+          v-if="allowDuplicate"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-copy"
+          :disabled="readonly"
+          :title="t('mapo.duplicate')"
+          @click="$emit('duplicate')"
+        />
+
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="error"
+          icon="i-lucide-trash-2"
+          :disabled="readonly"
+          :title="t('mapo.delete')"
+          @click="$emit('delete')"
+        />
+
+        <UIcon
+          :name="expanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+          class="h-4 w-4 text-gray-400"
+          @click="expanded = !expanded"
+        />
+      </div>
+    </div>
+
+    <!-- ── Item body (fields) ──────────────────────────────────────────────── -->
+    <!-- COL_SPAN: Tailwind v4 requires static classes — do not use dynamic template literals. -->
+    <div v-if="expanded && !isCompressed" class="grid grid-cols-12 gap-5 p-4">
+      <div
+        v-for="field in fields"
+        :key="field.key"
+        :class="{
+  'col-span-1': field.cols === 1,
+  'col-span-2': field.cols === 2,
+  'col-span-3': field.cols === 3,
+  'col-span-4': field.cols === 4,
+  'col-span-5': field.cols === 5,
+  'col-span-6': field.cols === 6,
+  'col-span-7': field.cols === 7,
+  'col-span-8': field.cols === 8,
+  'col-span-9': field.cols === 9,
+  'col-span-10': field.cols === 10,
+  'col-span-11': field.cols === 11,
+  'col-span-12': !field.cols || field.cols === 12
+}"
+      >
+        <MapoFormField :descriptor="field" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoRepeaterItem.vue.d.ts

@@ -0,0 +1,55 @@
+import type { AnyFieldDescriptor, FieldRegistry, RepeaterDescriptor } from "../../types/index.js";
+type __VLS_Props = {
+    /** Stable identity-based UID assigned by the parent repeater. */
+    uid?: string;
+    item: Record<string, unknown>;
+    fields: AnyFieldDescriptor[];
+    index: number;
+    errorPrefix: string;
+    parentErrors: Record<string, string[]>;
+    languages: string[];
+    currentLang: string;
+    readonly: boolean;
+    registry: FieldRegistry;
+    previewLabel?: (item: unknown, index: number) => string;
+    defaultExpanded: boolean;
+    allowDuplicate?: boolean;
+    /** Descriptor of the parent repeater (for miniCard and other attrs). */
+    repeaterDescriptor?: RepeaterDescriptor;
+    /** Total number of items in the repeater (used to compute contextual scaling). */
+    totalItems?: number;
+    /** true = this item is selected in bulk mode. */
+    selected?: boolean;
+    /** true = bulk selection mode is active in the parent repeater. */
+    selectionMode?: boolean;
+};
+declare var __VLS_53: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_53) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    "update:item": (value: Record<string, unknown>) => any;
+    duplicate: () => any;
+    "move-up": () => any;
+    "move-down": () => any;
+    "move-to": (index: number) => any;
+    "toggle-select": (withShift: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    "onUpdate:item"?: ((value: Record<string, unknown>) => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    "onMove-up"?: (() => any) | undefined;
+    "onMove-down"?: (() => any) | undefined;
+    "onMove-to"?: ((index: number) => any) | undefined;
+    "onToggle-select"?: ((withShift: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MapoRepeaterItem.vue.d.ts.map

package/dist/runtime/components/fields/MapoRepeaterItem.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoRepeaterItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoRepeaterItem.vue"],"names":[],"mappings":"AAoaA,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,WAAW,GAAG;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACvC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAszBF,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/runtime/components/fields/MapoSeoPreview.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRequestURL } from "#app";
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const value = computed(() => {
+  const v = props.modelValue;
+  if (!v || typeof v !== "object")
+    return { title: "", description: "", permalink: "" };
+  return v;
+});
+function update(field, val) {
+  emit("update:modelValue", { ...value.value, [field]: val });
+}
+const titleLen = computed(() => (value.value.title ?? "").length);
+const descLen = computed(() => (value.value.description ?? "").length);
+const titleColor = computed(() => {
+  if (titleLen.value > 60) return "text-red-500";
+  if (titleLen.value > 50) return "text-amber-500";
+  return "text-green-600";
+});
+const descColor = computed(() => {
+  if (descLen.value > 155) return "text-red-500";
+  if (descLen.value > 130) return "text-amber-500";
+  return "text-green-600";
+});
+const requestUrl = useRequestURL();
+const displayUrl = computed(() => value.value.permalink || requestUrl.host);
+</script>
+
+<template>
+  <div class="mapo-seo-preview space-y-4">
+    <!-- Input fields -->
+    <div class="space-y-3">
+      <div>
+        <div class="mb-1 flex items-center justify-between">
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.url")
+          }}</label>
+        </div>
+        <UInput
+          :model-value="value.permalink"
+          :readonly="readonly"
+          :disabled="disabled"
+          placeholder="https://example.com/slug"
+          class="w-full"
+          @update:model-value="update('permalink', $event)"
+        />
+      </div>
+
+      <div>
+        <div class="mb-1 flex items-center justify-between">
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.seoPreview.seoTitle")
+          }}</label>
+          <span class="text-xs" :class="titleColor">{{ titleLen }} / 60</span>
+        </div>
+        <UInput
+          :model-value="value.title"
+          :readonly="readonly"
+          :disabled="disabled"
+          :placeholder="t('mapo.seoPreview.titlePlaceholder')"
+          class="w-full"
+          @update:model-value="update('title', $event)"
+        />
+      </div>
+
+      <div>
+        <div class="mb-1 flex items-center justify-between">
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.seoPreview.metaDescription")
+          }}</label>
+          <span class="text-xs" :class="descColor">{{ descLen }} / 155</span>
+        </div>
+        <UTextarea
+          :model-value="value.description"
+          :rows="3"
+          :readonly="readonly"
+          :disabled="disabled"
+          :placeholder="t('mapo.seoPreview.descriptionPlaceholder')"
+          class="w-full"
+          @update:model-value="update('description', $event)"
+        />
+      </div>
+    </div>
+
+    <!-- SERP preview -->
+    <div class="rounded border border-gray-200 bg-gray-50 p-4">
+      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
+        {{ t("mapo.seoPreview.googlePreview") }}
+      </p>
+      <div class="max-w-lg">
+        <p class="truncate text-sm text-green-700">
+          {{ displayUrl }}
+        </p>
+        <p class="truncate text-lg text-blue-700 underline">
+          {{ value.title || t("mapo.seoPreview.defaultTitle") }}
+        </p>
+        <p class="mt-1 line-clamp-2 text-sm text-gray-600">
+          {{ value.description || t("mapo.seoPreview.defaultDescription") }}
+        </p>
+      </div>
+    </div>
+
+    <p
+      v-for="err in errors"
+      :key="err"
+      class="text-sm text-red-500"
+      role="alert"
+    >
+      {{ err }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoSeoPreview.vue.d.ts

@@ -0,0 +1,22 @@
+import type { SeoDescriptor } from "../../types/index.js";
+interface SeoValue {
+    title?: string;
+    description?: string;
+    /** Matches v1 key. `url` is accepted as alias via the registry accessor. */
+    permalink?: string;
+}
+type __VLS_Props = {
+    modelValue: unknown;
+    descriptor: SeoDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SeoValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SeoValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoSeoPreview.vue.d.ts.map

package/dist/runtime/components/fields/MapoSeoPreview.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoSeoPreview.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoSeoPreview.vue"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,UAAU,QAAQ;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAySF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/components/fields/MapoTimeField.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from "vue";
+import { parseDateTime, CalendarDateTime } from "@internationalized/date";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const calendarValue = computed(() => {
+  const v = props.modelValue;
+  if (!v) return void 0;
+  const normalized = v.includes("T") ? v : `1970-01-01T${v}`;
+  try {
+    return parseDateTime(normalized);
+  } catch {
+    return void 0;
+  }
+});
+function onUpdate(val) {
+  const time = val;
+  if (!time || typeof time.hour !== "number" || typeof time.minute !== "number") {
+    emit("update:modelValue", null);
+    return;
+  }
+  const h = String(time.hour).padStart(2, "0");
+  const m = String(time.minute).padStart(2, "0");
+  emit("update:modelValue", `${h}:${m}`);
+}
+</script>
+
+<template>
+  <UInputDate
+    :model-value="calendarValue"
+    granularity="minute"
+    hide-time-zone
+    :readonly="readonly"
+    :disabled="disabled"
+    :highlight="!!errors?.length"
+    @update:model-value="onUpdate"
+  />
+</template>

package/dist/runtime/components/fields/MapoTimeField.vue.d.ts

@@ -0,0 +1,17 @@
+import type { DateDescriptor } from "../../types/index.js";
+/** Time-only field backed by `UInputDate` with minute granularity. */
+type __VLS_Props = {
+    modelValue: unknown;
+    descriptor: DateDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoTimeField.vue.d.ts.map

package/dist/runtime/components/fields/MapoTimeField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoTimeField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoTimeField.vue"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,sEAAsE;AACtE,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2FF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}