@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,224 +1,236 @@
-<script lang="ts" setup>
-import {VDataTable} from 'vuetify/components/VDataTable'
-import {VInput} from 'vuetify/components/VInput'
-import {computed, defineOptions,defineExpose, ref, useAttrs, watch, useTemplateRef} from 'vue'
-import {cloneDeep, isEqual, omit, isArray, isString} from 'lodash-es'
-import {templateItemToString} from "../../composables/document/template";
-import {templateToHeader} from "../../composables/document/templateFormTable";
-import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-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[]
-}
-
-const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  modelKey: 'id',
-  toolbarColor: 'primary',
-  disableApplyToAll: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  return omit(attrs, ['modelValue','items','onUpdate:modelValue','itemsInitial','dataTemplate'])
-})
-
-const inputRef = useTemplateRef<VInput>("inputRef")
-
-const itemsInternal = ref<Record<string, any>[]>([])
-const itemsApplyAll = ref<Record<string, any>>({})
-
-useLocalStorageModel(itemsInternal,props)
-
-const computedDisableApplyToAll = computed(()=>{
-  if (isString(props.disableApplyToAll)) {
-    return props.disableApplyToAll.split(',').map(i=>i.trim())
-  }
-  return props.disableApplyToAll
-})
-const canApplyAll = (variableName: string) => {
-  if (isArray(computedDisableApplyToAll.value)) return !computedDisableApplyToAll.value.includes(variableName)
-  return !computedDisableApplyToAll.value
-}
-
-watch(() => props.modelValue, (newValue) => {
-  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
-    itemsInternal.value = cloneDeep(props.itemsInitial)
-  }
-  else {
-    let maxKey = 0
-
-    newValue.forEach((item) => {
-      if (!item.hasOwnProperty(props.modelKey)) {
-        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
-        item[props.modelKey] = maxKey + 1
-      }
-    })
-
-    itemsInternal.value = newValue
-  }
-}, { immediate: true })
-
-watch(()=>props.itemsInitial, (newValue,oldValue)=>{
-  if (!isEqual(newValue,oldValue)) itemsInternal.value = cloneDeep(props.itemsInitial)
-},{immediate:true,deep:true})
-
-watch(itemsInternal, () => {
-  emit('update:modelValue', itemsInternal.value)
-}, { deep: true })
-
-watch(itemsApplyAll, () => {
-  itemsInternal.value = itemsInternal.value?.map((item) => {
-    return Object.assign(item, itemsApplyAll.value)
-  })
-},{deep:true})
-
-const computedHeaders = computed(()=>{
-  let dataHeaders = templateToHeader(props.dataTemplate)
-  let combinedHeaders = [...props.headers, ...dataHeaders]
-  return combinedHeaders.map((header: any) => {
-    return {...header,headerProps:
-          {
-            style: 'font-weight: 800'
-          }
-    }
-  })
-})
-
-const computedDataTemplate = computed(()=>{
-  let template = cloneDeep(props.dataTemplate)
-  if (isString(props.dataTemplate)) {
-    try {
-      template = JSON.parse(props.dataTemplate)
-    } catch (e) {
-      void e
-    }
-  }
-  if (isArray(template)) {
-    return template.map((t: any) => {
-      const out = { ...t }
-      let s = out.inputAttributes?.trim() || ""
-      if (!/(^|\s)hide-details(\s|$)/.test(s) && !/(^|\s)hideDetails(\s|$)/.test(s)) {
-        s = `${s} hide-details`.trim()
-      }
-      out.inputAttributes = s
-      return out
-    })
-  }
-  return []
-})
-
-const reset = ()=>{
-  inputRef.value?.reset()
-  itemsApplyAll.value = {}
-}
-
-const isValid = computed(()=>{
-  return inputRef.value?.isValid
-})
-
-const errorMessages = computed(()=>{
-  return inputRef.value?.errorMessages
-})
-
-const operation = ref({reset})
-
-defineExpose({
-  errorMessages,
-  isValid,
-  reset,
-  resetValidation : ()=>inputRef.value?.resetValidation(),
-  validate : ()=>inputRef.value?.validate(),
-  operation
-})
-</script>
-
-<template>
-  <v-input v-model="itemsInternal" v-bind="plainAttrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-container fluid class="ma-0 pa-0">
-        <v-card>
-          <slot
-              name="header"
-              :items="itemsInternal"
-              :operation="operation"
-          >
-            <VToolbar :color="toolbarColor">
-              <v-row
-                  justify="end"
-                  class="ma-1"
-                  dense
-                  no-gutters
-                  align="center"
-              >
-                <v-col>
-                  <VToolbarTitle class="pl-3">
-                    <slot name="title">
-                      {{ title }}
-                    </slot>
-                  </VToolbarTitle>
-                </v-col>
-              </v-row>
-
-              <VToolbarItems>
-                <slot name="toolbarItems" :items="itemsInternal" :operation="operation"/>
-                <VBtn
-                    :color="toolbarColor"
-                    icon="mdi:mdi-restore"
-                    variant="flat"
-                    @click="reset()"
-                >
-                </VBtn>
-              </VToolbarItems>
-            </VToolbar>
-          </slot>
-          <v-data-table
-              v-bind="plainAttrs"
-              color="primary"
-              :items="itemsInternal"
-              :headers="computedHeaders"
-              disable-sort
-              hide-default-footer
-          >
-            <!-- @ts-ignore -->
-            <template
-                v-for="(_, name, index) in ($slots as {})"
-                :key="index"
-                #[name]="slotData"
-            >
-              <slot
-                  :name="name"
-                  v-bind="((slotData || {}) as object)"
-                  :operation="operation"
-                  :isReadonly="isReadonly"
-                  :isDisabled="isDisabled"
-              />
-            </template>
-
-            <template v-for="template in computedDataTemplate" :key="template.variableName" #[`header.${template.variableName}`]="props">
-              <form-pad v-model="itemsApplyAll" :template="templateItemToString(template,[])" v-if="canApplyAll(template.variableName)"></form-pad>
-              <template v-else>{{props.column.title}}</template>
-            </template>
-
-            <template v-for="template in computedDataTemplate" :key="template.variableName" #[`item.${template.variableName}`]="{index}">
-              <form-pad v-model="itemsInternal[index]" :template="templateItemToString(template,[])"></form-pad>
-            </template>
-          </v-data-table>
-        </v-card>
-      </v-container>
-    </template>
-  </v-input>
-</template>
+<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'
+import {cloneDeep, isEqual, omit, isArray, isString} from 'lodash-es'
+import {templateItemToString} from "../../composables/document/template";
+import {templateToHeader} from "../../composables/document/templateFormTable";
+import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  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',
+  toolbarColor: 'primary',
+  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(() => {
+  return omit(attrs, ['modelValue','items','onUpdate:modelValue','itemsInitial','dataTemplate'])
+})
+
+const inputRef = useTemplateRef<VInput>("inputRef")
+
+const itemsInternal = ref<Record<string, any>[]>([])
+const itemsApplyAll = ref<Record<string, any>>({})
+
+useLocalStorageModel(itemsInternal,props)
+
+const computedDisableApplyToAll = computed(()=>{
+  if (isString(props.disableApplyToAll)) {
+    return props.disableApplyToAll.split(',').map(i=>i.trim())
+  }
+  return props.disableApplyToAll
+})
+const canApplyAll = (variableName: string) => {
+  if (isArray(computedDisableApplyToAll.value)) return !computedDisableApplyToAll.value.includes(variableName)
+  return !computedDisableApplyToAll.value
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
+    itemsInternal.value = cloneDeep(props.itemsInitial)
+  }
+  else {
+    let maxKey = 0
+
+    newValue.forEach((item) => {
+      if (!item.hasOwnProperty(props.modelKey)) {
+        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
+        item[props.modelKey] = maxKey + 1
+      }
+    })
+
+    itemsInternal.value = newValue
+  }
+}, { immediate: true })
+
+watch(()=>props.itemsInitial, (newValue,oldValue)=>{
+  if (!isEqual(newValue,oldValue)) itemsInternal.value = cloneDeep(props.itemsInitial)
+},{immediate:true,deep:true})
+
+watch(itemsInternal, () => {
+  emit('update:modelValue', itemsInternal.value)
+}, { deep: true })
+
+watch(itemsApplyAll, () => {
+  itemsInternal.value = itemsInternal.value?.map((item) => {
+    return Object.assign(item, itemsApplyAll.value)
+  })
+},{deep:true})
+
+const computedHeaders = computed(()=>{
+  let dataHeaders = templateToHeader(props.dataTemplate)
+  let combinedHeaders = [...props.headers, ...dataHeaders]
+  return combinedHeaders.map((header: any) => {
+    return {...header,headerProps:
+          {
+            style: 'font-weight: 800'
+          }
+    }
+  })
+})
+
+const computedDataTemplate = computed(()=>{
+  let template = cloneDeep(props.dataTemplate)
+  if (isString(props.dataTemplate)) {
+    try {
+      template = JSON.parse(props.dataTemplate)
+    } catch (e) {
+      void e
+    }
+  }
+  if (isArray(template)) {
+    return template.map((t: any) => {
+      const out = { ...t }
+      let s = out.inputAttributes?.trim() || ""
+      if (!/(^|\s)hide-details(\s|$)/.test(s) && !/(^|\s)hideDetails(\s|$)/.test(s)) {
+        s = `${s} hide-details`.trim()
+      }
+      out.inputAttributes = s
+      return out
+    })
+  }
+  return []
+})
+
+const reset = ()=>{
+  inputRef.value?.reset()
+  itemsApplyAll.value = {}
+}
+
+const isValid = computed(()=>{
+  return inputRef.value?.isValid
+})
+
+const errorMessages = computed(()=>{
+  return inputRef.value?.errorMessages
+})
+
+const operation = ref({reset})
+
+defineExpose({
+  errorMessages,
+  isValid,
+  reset,
+  resetValidation : ()=>inputRef.value?.resetValidation(),
+  validate : ()=>inputRef.value?.validate(),
+  operation
+})
+</script>
+
+<template>
+  <v-input v-model="itemsInternal" v-bind="plainAttrs" ref="inputRef">
+    <template #default="{isReadonly,isDisabled}">
+      <v-container fluid class="ma-0 pa-0">
+        <v-card>
+          <slot
+              name="header"
+              :items="itemsInternal"
+              :operation="operation"
+          >
+            <VToolbar :color="toolbarColor">
+              <v-row
+                  justify="end"
+                  class="ma-1"
+                  dense
+                  no-gutters
+                  align="center"
+              >
+                <v-col>
+                  <VToolbarTitle class="pl-3">
+                    <slot name="title">
+                      {{ title }}
+                    </slot>
+                  </VToolbarTitle>
+                </v-col>
+              </v-row>
+
+              <VToolbarItems>
+                <slot name="toolbarItems" :items="itemsInternal" :operation="operation"/>
+                <VBtn
+                    :color="toolbarColor"
+                    icon="mdi:mdi-restore"
+                    variant="flat"
+                    @click="reset()"
+                >
+                </VBtn>
+              </VToolbarItems>
+            </VToolbar>
+          </slot>
+          <v-data-table
+              v-bind="plainAttrs"
+              color="primary"
+              :items="itemsInternal"
+              :headers="computedHeaders"
+              disable-sort
+              hide-default-footer
+          >
+            <!-- @ts-ignore -->
+            <template
+                v-for="(_, name, index) in ($slots as {})"
+                :key="index"
+                #[name]="slotData"
+            >
+              <slot
+                  :name="name"
+                  v-bind="((slotData || {}) as object)"
+                  :operation="operation"
+                  :isReadonly="isReadonly"
+                  :isDisabled="isDisabled"
+              />
+            </template>
+
+            <template v-for="template in computedDataTemplate" :key="template.variableName" #[`header.${template.variableName}`]="props">
+              <form-pad v-model="itemsApplyAll" :template="templateItemToString(template,[])" v-if="canApplyAll(template.variableName)"></form-pad>
+              <template v-else>{{props.column.title}}</template>
+            </template>
+
+            <template v-for="template in computedDataTemplate" :key="template.variableName" #[`item.${template.variableName}`]="{index}">
+              <form-pad v-model="itemsInternal[index]" :template="templateItemToString(template,[])"></form-pad>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-container>
+    </template>
+  </v-input>
+</template>