@ramathibodi/nuxt-commons 0.1.72 → 0.1.74

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * FormDateTime 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.
+ */
 import {ref, computed, watch, watchEffect, nextTick, useAttrs} from 'vue'
 import {union, isBoolean, isArray, isString, omit} from 'lodash-es'
 import { VTextField } from 'vuetify/components/VTextField'
@@ -6,25 +10,29 @@ import { type dateFormat, Datetime } from '../../utils/datetime'
 import { useRules } from '../../composables/utils/validation'
 
 interface Props {
-  modelValue?: string | null
-  format?: dateFormat | string
-  label?: string
-  enableSeconds?: boolean
-  rules?: typeof import('vuetify/components')['VTextField']['rules']
-  dateRules?: typeof import('vuetify/components')['VTextField']['rules']
-  timeRules?: typeof import('vuetify/components')['VTextField']['rules']
-  dense?: boolean
-  pickerOnly?: boolean
-  minDate?: Date | string
-  maxDate?: Date | string
-  readonly?: boolean
-  locale?: 'TH' | 'EN'
-
-  defaultDate?: boolean | string,
-  defaultDateTime?: boolean | string,
-  fixedDate?: boolean
+  modelValue?: string | null // Bound value for v-model synchronization with the parent component.
+  format?: dateFormat | string // Output format used when converting the value for display or emit.
+  label?: string // UI label displayed to end users
+  enableSeconds?: boolean // Includes seconds selector in the time picker.
+  rules?: typeof import('vuetify/components')['VTextField']['rules'] // validation rules applied before accepting input
+  dateRules?: typeof import('vuetify/components')['VTextField']['rules'] // date value used by component logic and display
+  timeRules?: typeof import('vuetify/components')['VTextField']['rules'] // time value used by component logic and display
+  dense?: boolean // Configuration option used by DateTime.
+  pickerOnly?: boolean // forces value selection through picker interaction only
+  minDate?: Date | string // earliest selectable date allowed by business rules
+  maxDate?: Date | string // latest selectable date allowed by business rules
+  readonly?: boolean // renders as read-only while keeping value visible
+  locale?: 'TH' | 'EN' // Locale used for date/time formatting and localized labels.
+
+  defaultDate?: boolean | string, // default date behavior/value when model is initially empty
+  defaultDateTime?: boolean | string, // date value used by component logic and display
+  fixedDate?: boolean // date value used by component logic and display
 }
 
+/**
+ * Public props accepted by FormDateTime.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   dense: false,
   locale: 'TH',
@@ -37,6 +45,10 @@ const props = withDefaults(defineProps<Props>(), {
   fixedDate: false,
 })
 
+/**
+ * Custom events emitted by FormDateTime.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 
 const attrs = useAttrs()

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

@@ -1,20 +1,28 @@
 <script lang="ts" setup>
+/**
+ * FormDialog 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.
+ */
 import {computed, defineModel, ref, watch, watchEffect} from 'vue'
 import {cloneDeep, isEqual} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 
 interface Props {
-  fullscreen?: boolean
-  title?: string
-  initialData?: object
-  formData?: object
-  saveCaption?: string
-  cancelCaption?: string
-  closeCaption?: string
-  saveAndStay?: boolean
-  readonly?: boolean
+  fullscreen?: boolean // Opens the dialog in fullscreen mode.
+  title?: string // Title text displayed in the component header or dialog.
+  initialData?: object // Initial form/object values used when creating a new record.
+  formData?: object // Configuration option used by Dialog.
+  saveCaption?: string // Label text for the save/confirm action button.
+  cancelCaption?: string // Label text for the cancel action button.
+  closeCaption?: string // Label text for the close action button.
+  saveAndStay?: boolean // Keeps editing context open after save for consecutive updates.
+  readonly?: boolean // renders as read-only while keeping value visible
 }
 
+/**
+ * Public props accepted by FormDialog.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   saveCaption: 'บันทึก',
   cancelCaption: 'ยกเลิก',
@@ -30,6 +38,10 @@ const formPadRef = ref()
 const formData = ref<object>({})
 const formDataOriginalValue = ref<object>()
 
+/**
+ * Custom events emitted by FormDialog.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['create', 'update'])
 
 function save() {

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

@@ -1,20 +1,28 @@
 <script lang="ts" setup>
+/**
+ * FormEditPad 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.
+ */
 import {computed, defineExpose, ref, watchEffect} from 'vue'
 import {cloneDeep, isEqual} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 import FormPadComponent from './Pad.vue'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof FormPadComponent['$props']> {
-  title?: string
-  initialData?: object
-  formData?: object
-  saveCaption?: string
-  cancelCaption?: string
-  readonly?: boolean
-  showTitle?: boolean
-  skipValidation?:boolean
+  title?: string // Title text displayed in the component header or dialog.
+  initialData?: object // Initial form/object values used when creating a new record.
+  formData?: object // Configuration option used by EditPad.
+  saveCaption?: string // Label text for the save/confirm action button.
+  cancelCaption?: string // Label text for the cancel action button.
+  readonly?: boolean // renders as read-only while keeping value visible
+  showTitle?: boolean // Shows or hides the component title/header area.
+  skipValidation?: boolean // Skips form validation before emitting save actions.
 }
 
+/**
+ * Public props accepted by FormEditPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   saveCaption: 'บันทึก',
   cancelCaption: 'ยกเลิก',
@@ -28,6 +36,10 @@ const formPadRef = ref()
 const formData = ref<object>({})
 const formDataOriginalValue = ref<object>()
 
+/**
+ * Custom events emitted by FormEditPad.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['create', 'update'])
 
 function save() {

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * FormFile 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.
+ */
 import { castArray } from 'lodash-es'
 import { ref, shallowRef, watch, computed } from 'vue'
 import { VTextField } from 'vuetify/components/VTextField'
@@ -12,14 +16,18 @@ const { hydrateAssetFile, base64ToFile, fileToBase64, downloadBase64File } = use
 const fileToBase64WithMaxSize = (file: File) => fileToBase64(file, props.maxSize)
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
-  accept?: string
-  multiple?: boolean
-  maxSize?: number
-  modelValue?: Base64File | Base64File[] | null
-  downloadable?: boolean
-  autoHydrate?: boolean
+  accept?: string // Accepted file MIME types or extensions for file selection.
+  multiple?: boolean // Allows selecting or uploading more than one file.
+  maxSize?: number // Maximum allowed output size (MB) before upload is blocked.
+  modelValue?: Base64File | Base64File[] | null // Bound value for v-model synchronization with the parent component.
+  downloadable?: boolean // Shows download actions for selected/loaded files.
+  autoHydrate?: boolean // Converts incoming serialized values into component runtime format on mount/watch.
 }
 
+/**
+ * Public props accepted by FormFile.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   accept: '*',
   multiple: false,
@@ -28,6 +36,10 @@ const props = withDefaults(defineProps<Props>(), {
   autoHydrate: false,
 })
 
+/**
+ * Custom events emitted by FormFile.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits<{
   (e: 'update:modelValue', value: Base64File | Base64File[] | null): void
 }>()

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

@@ -1,14 +1,26 @@
 <script lang="ts" setup>
+/**
+ * FormHidden 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.
+ */
 import { watch } from 'vue'
 import { cloneDeep } from 'lodash-es'
 
 interface Props {
-  itemValue?: any
-  hook?: Function
-  modelValue?: any
+  itemValue?: any // Internal hidden value to emit/store from this field.
+  hook?: Function // Callback function executed before emitting the final value.
+  modelValue?: any // Bound value for v-model synchronization with the parent component.
 }
 
+/**
+ * Public props accepted by FormHidden.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = defineProps<Props>()
+/**
+ * Custom events emitted by FormHidden.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 
 watch(() => props.itemValue, (newValue,oldValue) => {

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * FormIterator 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.
+ */
 import {computed, defineExpose, defineOptions, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch} from 'vue'
 import {omit} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
@@ -12,39 +16,43 @@ defineOptions({
 })
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']>,/* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  modelValue?: Record<string, any>[]
-  modelKey?: string
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-  insertable?: boolean
-  searchable?: boolean
-
-  loading?: boolean
-
-  viewSwitch?: boolean
-  viewSwitchMultiple?: boolean
-
-  cols?: string | number | boolean
-  xxl?: string | number | boolean
-  xl?: string | number | boolean
-  lg?: string | number | boolean
-  md?: string | number | boolean
-  sm?: string | number | boolean
-  itemsPerPage?: string | number
-
-  preferTable?: string | number | boolean
-  preferTableXxl?: string | number | boolean
-  preferTableXl?: string | number | boolean
-  preferTableLg?: string | number | boolean
-  preferTableMd?: string | number | boolean
-  preferTableSm?: string | number | boolean
+  title: string // Toolbar title shown above iterator/table view.
+  noDataText?: string // Message shown when no rows are available to render.
+  modelValue?: Record<string, any>[] // Parent-provided rows; component emits reordered/edited rows back via v-model.
+  modelKey?: string // Row identity key used for edit/delete/move operations and table item-value.
+  dialogFullscreen?: boolean // Opens item editor dialog in fullscreen mode by default.
+  initialData?: Record<string, any> // Default payload merged into a new item before editing.
+  toolbarColor?: string // Toolbar/action color theme token.
+  importable?: boolean // Shows import action and allows creating rows from imported records.
+  exportable?: boolean // Shows export action for the current iterator dataset.
+  insertable?: boolean // Enables add/create action for new rows.
+  searchable?: boolean // Shows search control and applies client-side filtering keyword.
+
+  loading?: boolean // External loading state passed through to iterator/table rendering.
+
+  viewSwitch?: boolean // Enables UI control that lets users switch between card iterator and table view.
+  viewSwitchMultiple?: boolean // Allows multi-select behavior in view switch control when enabled.
+
+  cols?: string | number | boolean // Base grid columns for iterator card items.
+  xxl?: string | number | boolean // Card grid columns at `xxl` breakpoint.
+  xl?: string | number | boolean // Card grid columns at `xl` breakpoint.
+  lg?: string | number | boolean // Card grid columns at `lg` breakpoint.
+  md?: string | number | boolean // Card grid columns at `md` breakpoint.
+  sm?: string | number | boolean // Card grid columns at `sm` breakpoint.
+  itemsPerPage?: string | number // Page size for iterator/table; supports `'all'` semantics.
+
+  preferTable?: string | number | boolean // Global auto-switch rule: `true` always table, number means table when item count reaches threshold.
+  preferTableXxl?: string | number | boolean // Breakpoint-specific override for `preferTable` at `xxl`.
+  preferTableXl?: string | number | boolean // Breakpoint-specific override for `preferTable` at `xl`.
+  preferTableLg?: string | number | boolean // Breakpoint-specific override for `preferTable` at `lg`.
+  preferTableMd?: string | number | boolean // Breakpoint-specific override for `preferTable` at `md`.
+  preferTableSm?: string | number | boolean // Breakpoint-specific override for `preferTable` at `sm`.
 }
 
+/**
+ * Public props accepted by FormIterator.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   noDataText: 'ไม่พบข้อมูล',
   dialogFullscreen: false,
@@ -69,6 +77,10 @@ const props = withDefaults(defineProps<Props>(), {
   itemsPerPage: 12,
 })
 
+/**
+ * Custom events emitted by FormIterator.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 
 const attrs = useAttrs()

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

@@ -1,15 +1,23 @@
 <script lang="ts" setup>
+/**
+ * FormLogin 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.
+ */
 import { ref, watch, withDefaults } from 'vue'
 
 interface Props {
-  title?: string
-  btnSubmit?: string
-  imgLogo?: string
-  errorMessages?: string
-  loading?: boolean
-  hint?: string
+  title?: string // Title text displayed in the component header or dialog.
+  btnSubmit?: string // Label text displayed on the login submit button.
+  imgLogo?: string // Logo image URL shown above the login form.
+  errorMessages?: string // Validation or authentication error message displayed to the user.
+  loading?: boolean // Displays loading state and disables actions while pending.
+  hint?: string // Helper text displayed under input fields.
 }
 
+/**
+ * Public props accepted by FormLogin.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   title: 'Login Ramathibodi',
   btnSubmit: 'เข้าสู่ระบบ',
@@ -26,6 +34,10 @@ interface LoginData {
 
 const formValid = ref<boolean>(false)
 const loginData = ref<LoginData>({ username: '', password: '' })
+/**
+ * Custom events emitted by FormLogin.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 
 const errorText = ref<string>('')

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * 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.
+ */
 /* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
 import {
   compile,
@@ -23,20 +27,24 @@ defineOptions({
 })
 
 interface Props {
-  modelValue?: object
-  originalData?: object
-  template?: any
-  templateScript?: string
-  disabled?: boolean
-  readonly?: boolean
-  isolated?: boolean
-  decoration?: object
-  parentTemplates?: string|string[]
-  dirtyClass?: string
-  dirtyOnCreate?: boolean
-  sanitizeDelay?: number
+  modelValue?: object // Bound value for v-model synchronization with the parent component.
+  originalData?: object // Original baseline data used for dirty-checking and reset behavior.
+  template?: any // Template object used to render dynamic form/pad structure.
+  templateScript?: string // Optional script expression used to post-process template behavior.
+  disabled?: boolean // disables user interaction for this field
+  readonly?: boolean // renders as read-only while keeping value visible
+  isolated?: boolean // boolean flag controlling runtime behavior
+  decoration?: object // Decoration config used to style or annotate generated fields.
+  parentTemplates?: string|string[] // Parent template code(s) used for template inheritance/extension.
+  dirtyClass?: string // CSS class applied when form state differs from original data.
+  dirtyOnCreate?: boolean // Marks new forms as dirty immediately on first render.
+  sanitizeDelay?: number // Debounce delay before sanitizing emitted form values.
 }
 
+/**
+ * Public props accepted by FormPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   readonly: false,
@@ -48,6 +56,10 @@ const props = withDefaults(defineProps<Props>(), {
   sanitizeDelay: 2000,
 })
 
+/**
+ * Custom events emitted by FormPad.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 
 const disabled = ref(props.disabled)

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

@@ -1,18 +1,26 @@
 <script lang="ts" setup>
+/**
+ * FormSignPad 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.
+ */
 import { VueSignaturePad } from 'vue-signature-pad'
 import { VInput } from 'vuetify/components/VInput'
 import { ref, computed, withDefaults, defineProps, defineExpose, watch } from 'vue'
 import { useAssetFile, type Base64Asset, type Base64File } from '../../composables/assetFile'
 
 interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
-  title?: string
-  btnName?: string
-  titleConfirm?: string
-  penColor?: string
+  title?: string // Title text displayed in the component header or dialog.
+  btnName?: string // Button label used to open the signature pad dialog.
+  titleConfirm?: string // Confirmation text shown before accepting the signature.
+  penColor?: string // Pen stroke color used while drawing the signature.
   /** hydrate when id is present but base64String is missing */
-  autoHydrate?: boolean
+  autoHydrate?: boolean // Converts incoming serialized values into component runtime format on mount/watch.
 }
 
+/**
+ * Public props accepted by FormSignPad.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<SignatureProps>(), {
   title: 'Signature',
   btnName: 'Draw Your Signature',

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

@@ -1,13 +1,21 @@
 <script lang="ts" setup>
+/**
+ * FormSystem 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.
+ */
 import Pad from './Pad.vue'
 import { watch } from 'vue'
 import { useGraphQlOperation } from '../../composables/graphqlOperation'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof Pad['$props']> {
-  templateId: string;
-  cache?: boolean | number
+  templateId: string; // identifier value used to resolve business data
+  cache?: boolean | number // Enables cached requests; number values represent cache TTL in milliseconds.
 }
 
+/**
+ * Public props accepted by FormSystem.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(),{
   cache: false
 })

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * FormTable 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.
+ */
 import {VDataTable} from 'vuetify/components/VDataTable'
 import {VInput} from 'vuetify/components/VInput'
 import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch, useTemplateRef} from 'vue'
@@ -12,27 +16,31 @@ defineOptions({
 })
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  modelValue?: Record<string, any>[]
-  modelKey?: string
-  dialogWidth?: string | number
-  dialogMaxWidth?: string | number
-  dialogHeight?: string | number
-  dialogMaxHeight?: string | number
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-  insertable?: boolean
-  searchable?: boolean
-  inputPad?: boolean
-  inputPadOnly?: boolean
-  saveAndStay?: boolean
-  stringFields?: Array<string>
+  title: string // Toolbar title and default export file name shown for this table section.
+  noDataText?: string // Text rendered by the data table when `items` is empty after filtering/loading.
+  modelValue?: Record<string, any>[] // Source rows from parent; component normalizes, mutates order, then emits updated rows.
+  modelKey?: string // Unique row key used for update/delete/reorder; missing keys are auto-generated incrementally.
+  dialogWidth?: string | number // Passed to row edit dialog width to control normal (non-fullscreen) modal size.
+  dialogMaxWidth?: string | number // Upper width bound for the edit dialog on large screens.
+  dialogHeight?: string | number // Passed to row edit dialog height to control vertical editing space.
+  dialogMaxHeight?: string | number // Upper height bound for the edit dialog before internal scrolling.
+  dialogFullscreen?: boolean // Default open mode for row editor dialog (`true` opens full screen).
+  initialData?: Record<string, any> // Seed object merged into new rows before user input.
+  toolbarColor?: string // Vuetify color applied to toolbar and default action buttons.
+  importable?: boolean // Enables Import button and `@import` flow for adding multiple rows from file.
+  exportable?: boolean // Enables Export button for current `items` dataset.
+  insertable?: boolean // Enables Add button and creation flow for new rows.
+  searchable?: boolean // Shows toolbar search input and binds keyword to table filtering.
+  inputPad?: boolean // Enables embedded pad editing workflow instead of relying only on dialog.
+  inputPadOnly?: boolean // Uses pad editor exclusively and skips dialog open/close behavior.
+  saveAndStay?: boolean // Forwards to child editor to keep it open after save (batch editing).
+  stringFields?: Array<string> // Dot-path fields preserved as string during import/export flattening and parsing.
 }
 
+/**
+ * Public props accepted by FormTable.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
   noDataText: 'ไม่พบข้อมูล',
   dialogFullscreen: false,
@@ -48,6 +56,10 @@ const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
   stringFields: ()=>[],
 })
 
+/**
+ * Custom events emitted by FormTable.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue','open:dialog','close:dialog'])
 const attrs = useAttrs()
 const plainAttrs = computed(() => {

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * FormTableData 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.
+ */
 import {VDataTable} from 'vuetify/components/VDataTable'
 import {VInput} from 'vuetify/components/VInput'
 import {computed, defineOptions,defineExpose, ref, useAttrs, watch, useTemplateRef} from 'vue'
@@ -12,17 +16,21 @@ defineOptions({
 })
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  modelValue?: Record<string, any>[]
-  modelKey?: string
-  toolbarColor?: string
-  headers : Record<string, any>[]
-  itemsInitial : Record<string, any>[]
-  dataTemplate?: string | object
-  disableApplyToAll?: boolean | string | string[]
+  title: string // Title text displayed in the component header or dialog.
+  noDataText?: string // Fallback message shown when there is no data to display.
+  modelValue?: Record<string, any>[] // Bound value for v-model synchronization with the parent component.
+  modelKey?: string // Primary key field name used to track row identity.
+  toolbarColor?: string // Vuetify color name applied to toolbar and action areas.
+  headers: Record<string, any>[] // Column definitions used to render table headers and field mapping.
+  itemsInitial: Record<string, any>[] // Initial rows used before external data is loaded.
+  dataTemplate?: string | object // Template object/string used to seed new row data.
+  disableApplyToAll?: boolean | string | string[] // Disables apply-to-all behavior globally or for selected field keys.
 }
 
+/**
+ * Public props accepted by FormTableData.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
   noDataText: 'ไม่พบข้อมูล',
   modelKey: 'id',
@@ -30,6 +38,10 @@ const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
   disableApplyToAll: false,
 })
 
+/**
+ * Custom events emitted by FormTableData.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 const attrs = useAttrs()
 const plainAttrs = computed(() => {

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+/**
+ * FormTime 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.
+ */
 import { ref, watch, watchEffect, nextTick, defineExpose } from 'vue'
 import { VTextField } from 'vuetify/components/VTextField'
 import Datepicker from '@vuepic/vue-datepicker'
@@ -6,18 +10,26 @@ import '@vuepic/vue-datepicker/dist/main.css'
 import { Datetime } from '../../utils/datetime'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
-  enableSeconds?: boolean
-  locale?: 'TH' | 'EN'
-  pickerOnly?: boolean
-  modelValue?: string | null
+  enableSeconds?: boolean // Includes seconds selector in the time picker.
+  locale?: 'TH' | 'EN' // Locale used for date/time formatting and localized labels.
+  pickerOnly?: boolean // forces value selection through picker interaction only
+  modelValue?: string | null // Bound value for v-model synchronization with the parent component.
 }
 
+/**
+ * Public props accepted by FormTime.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
 const props = withDefaults(defineProps<Props>(), {
   locale: 'TH',
   pickerOnly: false,
   enableSeconds: false,
 })
 
+/**
+ * Custom events emitted by FormTime.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
 const emit = defineEmits(['update:modelValue'])
 
 const time = ref<string | null>(null)