@ramathibodi/nuxt-commons 4.0.10 → 4.0.12

package/README.md

@@ -6,6 +6,14 @@ Nuxt module for Nuxt 3 and Nuxt 4 that provides shared runtime building blocks f
 - runtime plugins for permission/dialog/default behavior
 - utility and lab exports
 
+## Documentation & playground
+
+The live playground is the project's documentation site — every component has a real demo page running the real module against the real Vuetify theme, with a Vuetify-docs-style API panel (Props / Emits / Slots / Exposed) sourced from `docs/ai-summary.json`. Bug-repro fixtures live under *Scenarios*.
+
+→ **https://ramacare.gitlab.rama.mahidol.ac.th/frontend/rama-modules/** _(published from `master` by the `pages` CI job; if the project later moves to a unique Pages domain, update `NUXT_APP_BASE_URL` in the CI job accordingly)_
+
+Run it locally with `pnpm run dev`. See `CLAUDE.md` > *Playground* for the conventions every new/modified component must follow.
+
 ## Install
 
 ```bash

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.3.1"
   },
-  "version": "4.0.10",
+  "version": "4.0.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/document/TemplateBuilder.d.vue.ts

@@ -5,7 +5,12 @@ interface Props {
 }
 /**
  * Public props accepted by DocumentTemplateBuilder.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ *
+ * To extend the Input Type dropdown with app-specific entries, call
+ * `registerDocumentTemplateInputType()` from a Nuxt plugin (app-wide) or
+ * `useDocumentTemplateInputType()` inside `<script setup>` of a page
+ * (page-scoped, auto-cleanup on unmount). Both flow through the same
+ * runtime registry that this component reads via `useDocumentTemplateInputTypes()`.
  */
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
@@ -13,9 +18,9 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
+    "update:modelValue": (value: string | Record<string, any>[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | Record<string, any>[] | undefined) => any) | undefined;
 }>, {
     title: string;
     disableAdvanceMode: boolean;

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -3,6 +3,9 @@ import { computed, ref, watch } from "vue";
 import * as prettier from "prettier";
 import prettierPluginHtml from "prettier/plugins/html";
 import { useDocumentTemplate, validationRulesRegex, optionStringToChoiceObject } from "../../composables/document/template";
+import {
+  useDocumentTemplateInputTypes
+} from "../../composables/document/templateInputTypes";
 import { autoActionHeader, templateToHeader } from "../../composables/document/templateFormTable";
 import { cloneDeep } from "lodash-es";
 import VueJsonPretty from "vue-json-pretty";
@@ -113,47 +116,24 @@ async function convertToAdvanceMode() {
     modelValue.value = await prettier.format(useDocumentTemplate(templateItems.value).replaceAll(">", ">\n"), { parser: "html", plugins: [prettierPluginHtml] });
   }
 }
-const inputTypeChoice = ref([
-  { label: "Text Field", value: "VTextField" },
-  { label: "Text Area", value: "VTextarea" },
-  { label: "Text Date Picker", value: "FormDate" },
-  { label: "Text Time Picker", value: "FormTime" },
-  { label: "Text Date & Time Picker", value: "FormDateTime" },
-  { label: "Select Dropdown", value: "VSelect" },
-  { label: "Select Combobox", value: "VCombobox" },
-  { label: "Autocomplete", value: "VAutocomplete" },
-  { label: "Autocomplete from Master", value: "MasterAutocomplete" },
-  { label: "Radio Buttons", value: "VRadio" },
-  { label: "Radio Buttons Inline", value: "VRadioInline" },
-  { label: "Checkbox", value: "VCheckbox" },
-  { label: "Checkbox Group", value: "FormCheckboxGroup" },
-  { label: "Switch", value: "VSwitch" },
-  { label: "File Upload", value: "FormFile" },
-  { label: "Signature Pad", value: "FormSignPad" },
-  { label: "Table", value: "FormTable" },
-  { label: "Table Data", value: "FormTableData" },
-  { label: "[Decoration] Header", value: "Header" },
-  { label: "[Decoration] Separator", value: "Separator" },
-  { label: "[Advanced] Hidden Field", value: "FormHidden" },
-  { label: "[Advanced] Inherit Form", value: "DocumentForm" },
-  { label: "[Advanced] Custom Code", value: "CustomCode" }
-]);
-const requireOption = ref(["VSelect", "VAutocomplete", "VCombobox", "VRadio", "VRadioInline", "MasterAutocomplete", "FormTable", "FormTableData", "DocumentForm", "FormCheckboxGroup"]);
-const notRequireVariable = ref(["Header", "Separator", "CustomCode", "DocumentForm"]);
-const notRequireLabel = ref(["Separator", "CustomCode", "FormFile", "FormHidden", "DocumentForm"]);
-const notRequireWidth = ref(["Separator", "FormHidden", "DocumentForm"]);
-const notRequireOptions = ref(["Separator", "CustomCode", "FormFile"]);
-const notRequireRules = ref(["Separator", "Header", "CustomCode", "FormHidden", "DocumentForm"]);
-const notRequireInputAttributes = ref(["CustomCode", "Header", "DocumentForm"]);
-const notRequireColumnAttributes = ref(["Separator", "FormHidden", "DocumentForm"]);
-const notRequireAdvancedSetting = ref(["Separator", "CustomCode"]);
-const notRequireClassAndStyle = ref(["FormHidden"]);
-const hasSpecificOption = ref(["FormHidden", "FormTable", "FormTableData"]);
-const choiceOption = ref(["VRadio", "VRadioInline", "VSelect", "VAutocomplete", "VCombobox", "FormCheckboxGroup"]);
-const inputOptionsLabel = ref({
-  "MasterAutocomplete": "Group Key",
-  "Header": "Class",
-  "DocumentForm": "Template Code"
+const inputTypes = computed(() => useDocumentTemplateInputTypes());
+const inputTypeChoice = computed(() => inputTypes.value.map((t) => ({ label: t.label, value: t.value })));
+const requireOption = computed(() => inputTypes.value.filter((t) => t.requiresOptions).map((t) => t.value));
+const notRequireVariable = computed(() => inputTypes.value.filter((t) => t.needsVariableName === false).map((t) => t.value));
+const notRequireLabel = computed(() => inputTypes.value.filter((t) => t.needsLabel === false).map((t) => t.value));
+const notRequireWidth = computed(() => inputTypes.value.filter((t) => t.needsWidth === false).map((t) => t.value));
+const notRequireOptions = computed(() => inputTypes.value.filter((t) => t.showsOptions === false).map((t) => t.value));
+const notRequireRules = computed(() => inputTypes.value.filter((t) => t.hidesValidationRules).map((t) => t.value));
+const notRequireInputAttributes = computed(() => inputTypes.value.filter((t) => t.hidesInputAttributes).map((t) => t.value));
+const notRequireColumnAttributes = computed(() => inputTypes.value.filter((t) => t.hidesColumnAttributes).map((t) => t.value));
+const notRequireAdvancedSetting = computed(() => inputTypes.value.filter((t) => t.hidesAdvancedSettings).map((t) => t.value));
+const notRequireClassAndStyle = computed(() => inputTypes.value.filter((t) => t.hidesClassAndStyle).map((t) => t.value));
+const hasSpecificOption = computed(() => inputTypes.value.filter((t) => t.hasSpecificOptionEditor).map((t) => t.value));
+const choiceOption = computed(() => inputTypes.value.filter((t) => t.optionsAsChoice).map((t) => t.value));
+const inputOptionsLabel = computed(() => {
+  const acc = {};
+  for (const t of inputTypes.value) if (t.optionsLabel) acc[t.value] = t.optionsLabel;
+  return acc;
 });
 const ruleOptions = (inputType) => (value) => {
   if (choiceOption.value.includes(inputType) && !/^[^'",]+(,[^'",]+)*$/.test(value)) return "Invalid options format";
@@ -382,7 +362,7 @@ const ruleOptions = (inputType) => (value) => {
                             label="Validation Rules"
                             :rules="[rules.regex(validationRulesRegex)]"
                         />
-                        <b>Available rules :</b>     require, requireIf(condition), requireTrue, requireTrueIf(condition), numeric, range(min,max), integer, unique, length(length), lengthGreater(length), lengthLess(length), telephone, email, regex(regex), idcard, DateFuture, DatetimeFuture, DateHappen, DatetimeHappen, DateAfter(date), DateBefore(Date), DateEqual(date)
+                        <b>Available rules :</b>     require, requireIf(condition), requireTrue, requireTrueIf(condition), requireNotEmpty, numeric, range(min,max), integer, unique, length(length), lengthGreater(length), lengthLess(length), telephone, email, regex(regex), idcard, DateFuture, DatetimeFuture, DateHappen, DatetimeHappen, DateAfter(date), DateBefore(Date), DateEqual(date)
                       </v-col>
                     </v-row>
                   </v-container>

package/dist/runtime/components/document/TemplateBuilder.vue.d.ts

@@ -5,7 +5,12 @@ interface Props {
 }
 /**
  * Public props accepted by DocumentTemplateBuilder.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ *
+ * To extend the Input Type dropdown with app-specific entries, call
+ * `registerDocumentTemplateInputType()` from a Nuxt plugin (app-wide) or
+ * `useDocumentTemplateInputType()` inside `<script setup>` of a page
+ * (page-scoped, auto-cleanup on unmount). Both flow through the same
+ * runtime registry that this component reads via `useDocumentTemplateInputTypes()`.
  */
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
@@ -13,9 +18,9 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
+    "update:modelValue": (value: string | Record<string, any>[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | Record<string, any>[] | undefined) => any) | undefined;
 }>, {
     title: string;
     disableAdvanceMode: boolean;

package/dist/runtime/components/form/ActionPad.vue

@@ -17,6 +17,7 @@ const formData = ref({});
 const formDataOriginalValue = ref();
 const emit = defineEmits(["create", "update"]);
 function save() {
+  formPadRef.value?.flushSanitize?.();
   if (props.skipValidation || formPadRef.value?.isValid) {
     isSaving.value = true;
     emit(isCreating.value ? "create" : "update", cloneDeep(formData.value), callback);

package/dist/runtime/components/form/Birthdate.d.vue.ts

@@ -26,10 +26,10 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-    "update:dobPrecision": (value: "year" | "yearMonthDay" | "yearMonth" | "estimated" | undefined) => void;
+    "update:modelValue": (value: string | undefined) => any;
+    "update:dobPrecision": (value: "year" | "yearMonthDay" | "yearMonth" | "estimated" | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:dobPrecision"?: ((value: "year" | "yearMonthDay" | "yearMonth" | "estimated" | undefined) => any) | undefined;
 }>, {
     flow: ("month" | "year" | "calendar" | "time" | "minutes" | "hours" | "seconds")[];

package/dist/runtime/components/form/Birthdate.vue.d.ts

@@ -26,10 +26,10 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-    "update:dobPrecision": (value: "year" | "yearMonthDay" | "yearMonth" | "estimated" | undefined) => void;
+    "update:modelValue": (value: string | undefined) => any;
+    "update:dobPrecision": (value: "year" | "yearMonthDay" | "yearMonth" | "estimated" | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:dobPrecision"?: ((value: "year" | "yearMonthDay" | "yearMonth" | "estimated" | undefined) => any) | undefined;
 }>, {
     flow: ("month" | "year" | "calendar" | "time" | "minutes" | "hours" | "seconds")[];

package/dist/runtime/components/form/Date.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref, watch, watchEffect, nextTick, computed } from "vue";
 import { VTextField } from "vuetify/components/VTextField";
-import Datepicker from "@vuepic/vue-datepicker";
+import { VueDatePicker as Datepicker } from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 import { isArray, isString } from "lodash-es";
 import { Datetime } from "../../utils/datetime";
 import { useRules } from "../../composables/utils/validation";
-import { th } from "date-fns/locale";
+import { th, enUS } from "date-fns/locale";
 const props = defineProps({
   locale: { type: String, required: false, default: "TH" },
   format: { type: String, required: false, default: "shortDate" },
@@ -60,6 +60,8 @@ const computedRules = computed(() => {
 });
 const selectedDate = ref(null);
 const displayedDate = ref(null);
+const datepickerLocale = computed(() => props.locale === "TH" ? th : enUS);
+const datepickerFlow = computed(() => props.flow.length ? { steps: props.flow, partial: true } : void 0);
 const isMenuOpen = ref(false);
 const isTextFieldFocused = ref(false);
 const hasTextFieldInput = ref(false);
@@ -197,14 +199,13 @@ defineExpose({
     <Datepicker
         v-model="selectedDate"
         model-type="yyyy-MM-dd"
-        :enable-time-picker="false"
-        :flow="flow"
+        :time-config="{ enableTimePicker: false }"
+        :flow="datepickerFlow"
         :min-date="props.minDate"
         :max-date="props.maxDate"
         auto-apply
         inline
-        :locale="locale"
-        :format-locale="locale == 'TH' ? th : void 0"
+        :locale="datepickerLocale"
         @update:model-value="updateDatePicker"
     >
       <template #year="{ value }" v-if="locale == 'TH'">
@@ -216,3 +217,7 @@ defineExpose({
     </Datepicker>
   </v-menu>
 </template>
+
+<style scoped>
+:deep(.dp__button.dp__overlay_action){display:none}
+</style>

package/dist/runtime/components/form/Dialog.d.vue.ts

@@ -45,13 +45,9 @@ type __VLS_Slots = {} & {
     action?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    create: (...args: any[]) => void;
-    update: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onCreate?: ((...args: any[]) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {
     readonly: boolean;
     saveCaption: string;

package/dist/runtime/components/form/Dialog.vue

@@ -20,6 +20,7 @@ const formData = ref({});
 const formDataOriginalValue = ref();
 const emit = defineEmits(["create", "update"]);
 function save() {
+  formPadRef.value?.flushSanitize?.();
   if (formPadRef.value.isValid) {
     isSaving.value = true;
     emit(isCreating.value ? "create" : "update", cloneDeep(formData.value), props.saveAndStay ? stayCallback : callback);

package/dist/runtime/components/form/Dialog.vue.d.ts

@@ -45,13 +45,9 @@ type __VLS_Slots = {} & {
     action?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    create: (...args: any[]) => void;
-    update: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onCreate?: ((...args: any[]) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {
     readonly: boolean;
     saveCaption: string;

package/dist/runtime/components/form/EditPad.vue

@@ -18,6 +18,7 @@ const formData = ref({});
 const formDataOriginalValue = ref();
 const emit = defineEmits(["create", "update"]);
 function save() {
+  formPadRef.value?.flushSanitize?.();
   if (props.skipValidation || formPadRef.value?.isValid) {
     isSaving.value = true;
     emit(isCreating.value ? "create" : "update", cloneDeep(formData.value), callback);

package/dist/runtime/components/form/Pad.d.vue.ts

@@ -12,6 +12,7 @@ interface Props {
     dirtyOnCreate?: boolean;
     sanitizeDelay?: number;
 }
+declare function flushSanitize(): void;
 declare function reset(): void;
 declare function validate(): void;
 declare function resetValidate(): void;
@@ -75,6 +76,17 @@ declare var __VLS_10: {
          * This doc block is consumed by vue-docgen for generated API documentation.
          */
         ) => string | true;
+        requireNotEmpty: (customError?: string) => (
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        value: any
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        ) => string | true;
         numeric: (customError?: string) => (
         /**
          * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
@@ -381,6 +393,17 @@ declare var __VLS_10: {
          * This doc block is consumed by vue-docgen for generated API documentation.
          */
         ) => string | true;
+        requireNotEmpty: (customError?: string) => (
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        value: any
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        ) => string | true;
         numeric: (customError?: string) => (
         /**
          * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
@@ -650,6 +673,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
     reset: typeof reset;
     validate: typeof validate;
     resetValidate: typeof resetValidate;
+    flushSanitize: typeof flushSanitize;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{

package/dist/runtime/components/form/Pad.vue

@@ -61,11 +61,11 @@ function scheduleIdle(fn) {
   }
 }
 const sanitizeBlankStrings = debounce((val, original) => {
-  scheduleIdle(() => sanitizeBlankStringsRaw(val, original));
+  scheduleIdle(() => sanitizeBlankStringsSync(val, original));
 }, props.sanitizeDelay);
-function sanitizeBlankStringsRaw(val, original) {
+function sanitizeBlankStringsSync(val, original) {
   if (!original && props.originalData) {
-    sanitizeBlankStrings(val, props.originalData);
+    sanitizeBlankStringsSync(val, props.originalData);
     return;
   }
   if (isArray(val)) {
@@ -74,7 +74,7 @@ function sanitizeBlankStringsRaw(val, original) {
       if (isBlankString(item)) {
         val.splice(i, 1);
       } else if (isPlainObject(item) || isArray(item)) {
-        sanitizeBlankStrings(item, {});
+        sanitizeBlankStringsSync(item, {});
       } else {
         if (item && typeof item === "string") val[i] = item.replace(/[ \t]+$/, "");
       }
@@ -89,13 +89,17 @@ function sanitizeBlankStringsRaw(val, original) {
         else val[key] = null;
       } else if (isPlainObject(v) || isArray(v)) {
         let originalChild = original && (isPlainObject(original[key]) || isArray(original[key])) ? original[key] : {};
-        sanitizeBlankStrings(v, originalChild);
+        sanitizeBlankStringsSync(v, originalChild);
       } else {
         if (v && typeof v === "string") val[key] = v.replace(/[ \t]+$/, "");
       }
     }
   }
 }
+function flushSanitize() {
+  sanitizeBlankStrings.cancel();
+  sanitizeBlankStringsSync(formData.value, props.originalData ?? {});
+}
 function autoSanitizedDisplay(item, separator = ",") {
   const isEmptyScalar = (v) => v === null || v === void 0 || typeof v === "string" && v.trim() === "" || typeof v === "number" && Number.isNaN(v);
   const toStr = (v) => {
@@ -257,7 +261,8 @@ defineExpose({
   readonly,
   reset,
   validate,
-  resetValidate
+  resetValidate,
+  flushSanitize
 });
 </script>
 
@@ -308,5 +313,5 @@ defineExpose({
 </template>
 
 <style>
-.form-data-dirty:not(.v-input--error) :not(.v-chip):not(.v-chip *){color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
+.form-data-dirty:not(.v-input--error) :not(.v-chip):not(.v-chip *):not(.v-toolbar):not(.v-toolbar *){color:color-mix(in srgb,currentColor 70%,rgb(var(--v-theme-primary)))!important;text-shadow:0 0 .02em currentColor}
 </style>

package/dist/runtime/components/form/Pad.vue.d.ts

@@ -12,6 +12,7 @@ interface Props {
     dirtyOnCreate?: boolean;
     sanitizeDelay?: number;
 }
+declare function flushSanitize(): void;
 declare function reset(): void;
 declare function validate(): void;
 declare function resetValidate(): void;
@@ -75,6 +76,17 @@ declare var __VLS_10: {
          * This doc block is consumed by vue-docgen for generated API documentation.
          */
         ) => string | true;
+        requireNotEmpty: (customError?: string) => (
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        value: any
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        ) => string | true;
         numeric: (customError?: string) => (
         /**
          * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
@@ -381,6 +393,17 @@ declare var __VLS_10: {
          * This doc block is consumed by vue-docgen for generated API documentation.
          */
         ) => string | true;
+        requireNotEmpty: (customError?: string) => (
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        value: any
+        /**
+         * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+         * This doc block is consumed by vue-docgen for generated API documentation.
+         */
+        ) => string | true;
         numeric: (customError?: string) => (
         /**
          * FormPad is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
@@ -650,6 +673,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
     reset: typeof reset;
     validate: typeof validate;
     resetValidate: typeof resetValidate;
+    flushSanitize: typeof flushSanitize;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{

package/dist/runtime/components/form/Time.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, watch, watchEffect, nextTick } from "vue";
+import { ref, watch, watchEffect, nextTick, computed } from "vue";
 import { VTextField } from "vuetify/components/VTextField";
-import Datepicker from "@vuepic/vue-datepicker";
+import { VueDatePicker as Datepicker } from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
+import { th, enUS } from "date-fns/locale";
 import { Datetime } from "../../utils/datetime";
 const props = defineProps({
   enableSeconds: { type: Boolean, required: false, default: false },
@@ -13,6 +14,11 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 const time = ref(null);
 const tempTime = ref(null);
+const datepickerLocale = computed(() => props.locale === "TH" ? th : enUS);
+const datepickerTimeConfig = computed(() => ({
+  enableSeconds: props.enableSeconds,
+  minutesGridIncrement: 1
+}));
 const isMenuOpen = ref(false);
 const isTextFieldFocused = ref(false);
 const isTextFieldTyped = ref(false);
@@ -130,13 +136,12 @@ defineExpose({
     <Datepicker
         v-model="time"
         model-type="HH:mm:ss"
-        :enable-seconds="enableSeconds"
-        minutes-grid-increment="1"
+        :time-config="datepickerTimeConfig"
         time-picker
         auto-apply
         :close-on-auto-apply="false"
         inline
-        :locale="locale"
+        :locale="datepickerLocale"
         @update:model-value="setDatePicker"
     />
   </v-menu>

package/dist/runtime/components/form/images/Edit.d.vue.ts

@@ -16,11 +16,9 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
-    "update:modelValue": (value: string | undefined) => void;
+    "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     maxWidth: string | number;
     imageFormat: ImageFormat;

package/dist/runtime/components/form/images/Edit.vue.d.ts

@@ -16,11 +16,9 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
-    "update:modelValue": (value: string | undefined) => void;
+    "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     maxWidth: string | number;
     imageFormat: ImageFormat;

package/dist/runtime/components/model/AutoRefreshChip.d.vue.ts

@@ -0,0 +1,16 @@
+/**
+ * ModelAutoRefreshChip renders the toolbar countdown/pause chip for ModelTable and
+ * ModelIterator. Pass the handle returned by `useAutoRefresh` as `control`. Renders
+ * nothing unless auto-refresh is enabled, so callers can mount it unconditionally.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import type { UseAutoRefreshHandle } from '../../composables/autoRefresh.js';
+interface Props {
+    control: UseAutoRefreshHandle;
+    color?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/model/AutoRefreshChip.vue

@@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+  control: { type: Object, required: true },
+  color: { type: String, required: false, default: "primary" }
+});
+</script>
+
+<template>
+  <v-chip
+    v-if="props.control.enabled.value"
+    class="ml-2"
+    density="compact"
+    :color="props.color"
+    variant="elevated"
+  >
+    <v-icon
+      size="small"
+      start
+    >
+      mdi mdi-autorenew
+    </v-icon>
+    <span v-if="props.control.isLoading.value">—</span>
+    <span v-else-if="!props.control.isActive.value">paused</span>
+    <span v-else>{{ props.control.remainingSeconds.value }}s</span>
+    <v-btn
+      class="ml-1"
+      density="compact"
+      variant="text"
+      size="x-small"
+      :icon="props.control.isUserPaused.value ? 'mdi mdi-play' : 'mdi mdi-pause'"
+      @click="props.control.togglePause"
+    />
+  </v-chip>
+</template>

package/dist/runtime/components/model/AutoRefreshChip.vue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * ModelAutoRefreshChip renders the toolbar countdown/pause chip for ModelTable and
+ * ModelIterator. Pass the handle returned by `useAutoRefresh` as `control`. Renders
+ * nothing unless auto-refresh is enabled, so callers can mount it unconditionally.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import type { UseAutoRefreshHandle } from '../../composables/autoRefresh.js';
+interface Props {
+    control: UseAutoRefreshHandle;
+    color?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;