@ramathibodi/nuxt-commons 0.1.38 → 0.1.39

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.38",
+  "version": "0.1.39",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import {ref, withDefaults,watch,computed} from 'vue'
+import {graphqlOperation} from '#imports'
+
+interface Props {
+  templateCode: string
+  parentTemplates?: string|string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  parentTemplates: (): string[] => [],
+})
+
+const template = ref<any>()
+const templateScript = ref<string>()
+
+const parentTemplates = computed(()=>{
+  if (typeof props.parentTemplates === 'string') {
+    if (props.parentTemplates && props.parentTemplates!="") return props.parentTemplates.split("|")
+    else return []
+  } else {
+    return props.parentTemplates
+  }
+})
+
+const parentTemplatesNext = computed(()=>{
+  return [...parentTemplates.value,props.templateCode]
+})
+
+watch(()=>props.templateCode,()=>{
+  if (!parentTemplates.value.includes(props.templateCode) && props.templateCode) {
+    if (graphqlOperation["documentTemplateByTemplateCode"]) {
+      graphqlOperation["documentTemplateByTemplateCode"].call(["*"],{templateCode: props.templateCode}).then((result: any)=>{
+        template.value = result.editTemplate
+        templateScript.value = result.templateScript
+      })
+    }
+  }
+},{immediate: true})
+</script>
+<template>
+  <form-pad :template="template" :template-script="templateScript" :parent-templates="parentTemplatesNext"></form-pad>
+</template>

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

@@ -2,7 +2,15 @@
 import {computed, ref, watch} from 'vue'
 import * as prettier from 'prettier'
 import prettierPluginHtml from 'prettier/plugins/html'
-import {useDocumentTemplate, validationRulesRegex} from '../../composables/document/template'
+import {useDocumentTemplate, validationRulesRegex,optionStringToChoiceObject} from '../../composables/document/template'
+
+interface Props {
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Document Template"
+})
 
 const emit = defineEmits(['update:modelValue'])
 const modelValue = defineModel<string>()
@@ -49,6 +57,33 @@ const headers = ref([
   },
 ])
 
+const formTableHeaders = ref([
+  {
+    title: 'Title',
+    key: 'title',
+  },
+  {
+    title: 'Key',
+    key: 'key',
+  },
+  {
+    title: 'Width',
+    key: 'width',
+  },
+])
+
+const choiceHeaders = ref([
+  {
+    title: 'Label',
+    key: 'label',
+  },
+  {
+    title: 'Value',
+    key: 'value',
+  },
+])
+
+
 function isValidJsonArrayOfObjects(str: string | undefined) {
   try {
     const parsed = JSON.parse(str as string)
@@ -72,17 +107,48 @@ 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: 'Switch', value: 'VSwitch' },
+  { label: 'File Upload', value: 'FormFile' },
+  { label: 'Signature Pad', value: 'FormSignPad' },
+  { label: 'Table', value: 'FormTable' },
+  { 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','DocumentForm'])
+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', 'FormHidden','DocumentForm'])
+const notRequireColumnAttributes = ref(['Separator', 'FormHidden','DocumentForm'])
+const notRequireAdvancedSetting = ref(['Separator','CustomCode', 'FormHidden'])
 
-const inputTypeChoice = ref(['VTextField', 'VTextarea', 'VSelect', 'VAutocomplete', 'FormDate', 'FormTime', 'FormDateTime', 'VCombobox', 'VRadio', 'VRadioInline', 'VCheckbox', 'VSwitch', 'MasterAutocomplete', 'Header', 'Separator', 'CustomCode', 'FormTable', 'FormHidden', 'FormFile', 'FormSignPad'])
-const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete'])
-const notRequireVariable = ref(['Header', 'Separator', 'CustomCode'])
-const notRequireLabel = ref(['Separator', 'CustomCode', 'FormFile', 'FormSignPad', 'FormTable', 'FormHidden'])
-const notRequireOptions = ref(['CustomCode', 'FormSignPad', 'FormFile', 'FormTable'])
-const notRequireRules = ref(['CustomCode', 'FormSignPad', 'FormFile', 'FormTable' ,'FormHidden'])
-const notRequireInputAttributes = ref(['CustomCode', 'FormHidden'])
-const notRequireColumnAttributes = ref(['Separator', 'FormHidden'])
+const hasSpecificOption = ref(['FormHidden','FormTable'])
 
-const choiceOption = ref(['VSelect', 'VRadio', 'VRadioInline'])
+const choiceOption = ref(['VRadio', 'VRadioInline','VSelect', 'VAutocomplete', 'VCombobox'])
+const inputOptionsLabel = ref<Record<string,string>>({
+  'MasterAutocomplete' : "Group Key",
+  'Header' : "Class",
+  'DocumentForm': "Template Code",
+})
 
 const ruleOptions = (inputType: string) => (value: any) => {
   if (choiceOption.value.includes(inputType) && !(/^[^'",]+(,[^'",]+)*$/.test(value))) return 'Invalid options format'
@@ -96,7 +162,7 @@ const ruleOptions = (inputType: string) => (value: any) => {
     v-if="!isAdvanceMode"
     v-model="templateItems"
     :headers="headers"
-    title="Document Template"
+    :title="props.title"
   >
     <template #toolbarItems>
       <VBtn
@@ -118,19 +184,20 @@ const ruleOptions = (inputType: string) => (value: any) => {
               v-model="data.inputType"
               label="Input Type"
               :items="inputTypeChoice"
+              item-title="label"
+              item-value="value"
+              :return-object="false"
               :rules="[rules.require()]"
             />
           </v-col>
-          <v-col
-            v-if="data.inputType!='Separator'"
-            cols="1"
-          >
+          <v-col cols="1" v-if="!notRequireWidth.includes(data.inputType)">
             <v-text-field
               v-model="data.width"
               label="Width"
               :rules="[rules.require()]"
               type="number"
             />
+            <form-hidden v-model="data.inputOptions" :item-value="data.inputType" :hook="()=>undefined"></form-hidden>
           </v-col>
           <v-col cols="4" v-if="!notRequireLabel.includes(data.inputType)">
             <v-text-field
@@ -150,32 +217,67 @@ const ruleOptions = (inputType: string) => (value: any) => {
               v-if="!notRequireOptions.includes(data.inputType)"
               cols="12"
           >
+            <form-pad v-model="data.inputOptions" v-if="data.inputType=='FormTable'">
+              <template #default="{data: optionData}">
+                <v-row dense>
+                  <v-col cols="12">
+                    <form-table v-model="optionData.headers" :headers="formTableHeaders" title="Headers">
+                      <template #form="{data: headerData,rules}">
+                        <v-container fluid>
+                          <v-row dense>
+                            <v-col cols="6"><v-text-field v-model="headerData.title" label="Title"></v-text-field></v-col>
+                            <v-col cols="3"><v-text-field v-model="headerData.key" label="Key" :rules="[rules.require()]"></v-text-field></v-col>
+                            <v-col cols="3"><v-text-field v-model="headerData.width" label="Width"></v-text-field></v-col>
+                          </v-row>
+                        </v-container>
+                      </template>
+                    </form-table>
+                  </v-col>
+                  <v-col cols="12">
+                    <document-template-builder v-model="optionData.formTemplate" title="Form Template"></document-template-builder>
+                  </v-col>
+                </v-row>
+              </template>
+            </form-pad>
+            <form-pad v-model="data.inputOptions" v-if="data.inputType=='FormHidden'">
+              <template #default="{data: optionData}">
+                <v-row dense>
+                  <v-col cols="12">
+                    <v-text-field
+                        v-model="optionData.hook"
+                        label="Hook"
+                        :rules="[rules.require()]"
+                    />
+                  </v-col>
+                  <v-col cols="12">
+                    <v-text-field
+                        v-model="optionData.itemValue"
+                        label="Item Value"
+                    />
+                  </v-col>
+                </v-row>
+              </template>
+            </form-pad>
+            <form-table v-model="data.inputOptions" :headers="choiceHeaders" title="Choices" v-if="choiceOption.includes(data.inputType) && (!data.inputOptions || typeof data.inputOptions === 'object')">
+              <template #form="{data: optionData,rules}">
+                <v-container fluid>
+                  <v-row dense>
+                    <v-col cols="6"><v-text-field v-model="optionData.label" label="Label"></v-text-field></v-col>
+                    <v-col cols="6"><v-text-field v-model="optionData.value" label="Value" :rules="[rules.require()]"></v-text-field></v-col>
+                  </v-row>
+                </v-container>
+              </template>
+            </form-table>
+            <form-hidden v-model="data.inputOptions" :itemValue="data.inputOptions" :hook="(option: any)=>optionStringToChoiceObject(option)" v-if="choiceOption.includes(data.inputType) && data.inputOptions && typeof data.inputOptions === 'string'"></form-hidden>
             <v-textarea
               v-model="data.inputOptions"
-              label="Input Options"
+              :label="inputOptionsLabel[data.inputType] || 'Input Options'"
               auto-grow
               :rules="[rules.requireIf(requireOption.includes(data.inputType)), ruleOptions(data.inputType)]"
+              v-if="!hasSpecificOption.includes(data.inputType) && !choiceOption.includes(data.inputType)"
             />
           </v-col>
-          <v-col v-if="data.inputType!='CustomCode'">
-            <v-text-field
-              v-model="data.validationRules"
-              label="Validation Rules"
-              :rules="[rules.regex(validationRulesRegex)]"
-            />
-          </v-col>
-          <v-col v-if="data.inputType!='CustomCode'">
-            <v-text-field
-              v-model="data.inputAttributes"
-              label="Input Attributes"
-            />
-          </v-col>
-          <v-col v-if="data.inputType!='Separator'">
-            <v-text-field
-              v-model="data.columnAttributes"
-              label="Column Attributes"
-            />
-          </v-col>
+
           <v-col
             v-if="data.inputType=='CustomCode'"
             cols="12"
@@ -186,25 +288,67 @@ const ruleOptions = (inputType: string) => (value: any) => {
                 :rules="[rules.require()]"
             />
           </v-col>
-          <v-col
-              v-if="data.inputType=='FormTable'"
-              cols="12"
-          >
-            <FormCodeEditor
-                v-model="data.inputFormTable"
-                label="Form Table"
-                :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col
-              v-if="data.inputType=='FormHidden'"
-              cols="12"
-          >
-            <FormCodeEditor
-                v-model="data.inputFormHidden"
-                label="Form Table"
-                :rules="[rules.require()]"
-            />
+        </v-row>
+        <v-row dense>
+          <v-col>
+            <v-expansion-panels>
+              <v-expansion-panel v-if="!notRequireRules.includes(data.inputType)">
+                <v-expansion-panel-title collapse-icon="mdi mdi-minus" expand-icon="mdi mdi-plus" class="font-weight-bold">Validations</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-container fluid>
+                    <v-row dense>
+                      <v-col cols="12">
+                        <v-text-field
+                            v-model="data.validationRules"
+                            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)
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+              <v-expansion-panel v-if="!notRequireAdvancedSetting.includes(data.inputType)">
+                <v-expansion-panel-title collapse-icon="mdi mdi-minus" expand-icon="mdi mdi-plus" class="font-weight-bold">Advanced settings</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-container fluid>
+                    <v-row dense>
+                      <v-col cols="12" md="6" v-if="!notRequireInputAttributes.includes(data.inputType)">
+                        <v-text-field
+                            v-model="data.inputAttributes"
+                            label="Input Attributes"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6" v-if="!notRequireColumnAttributes.includes(data.inputType)">
+                        <v-text-field
+                            v-model="data.columnAttributes"
+                            label="Column Attributes"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-text-field
+                            v-model="data.conditionalDisplay"
+                            label="Conditional Display"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-text-field
+                            v-model="data.computedValue"
+                            label="Computed Value"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-text-field
+                            v-model="data.retrievedValue"
+                            label="Retrieved Value"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
           </v-col>
         </v-row>
       </v-container>
@@ -223,14 +367,6 @@ const ruleOptions = (inputType: string) => (value: any) => {
       <template v-if="props.item.inputAttributes">
         <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
       </template>
-      <template v-if="props.item.inputType=='FormTable'">
-        <b>Form Table :</b><br>
-        <span style="white-space: pre-line">{{ props.item.inputFormTable }}</span>
-      </template>
-      <template v-if="props.item.inputType=='FormHidden'">
-        <b>Form Hidden :</b><br>
-        <span style="white-space: pre-line">{{ props.item.inputFormHidden }}</span>
-      </template>
     </template>
   </FormTable>
   <FormCodeEditor

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

@@ -30,6 +30,7 @@ interface Props {
   readonly?: boolean
   isolated?: boolean
   decoration?: object
+  parentTemplates?: string|string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   readonly: false,
   isolated: false,
   decoration: () => { return {} },
+  parentTemplates: (): string[] => [],
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -89,7 +91,7 @@ const formComponent = shallowRef()
 function buildFormComponent() {
   if (!trimmedTemplate.value) return
   const originalConsoleError = console.warn
-  console.warn = (error) => { throw new Error(error) } // eslint-disable-line
+  console.warn = (error: any) => { throw new Error(error) } // eslint-disable-line
   try {
     const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly" :decoration="decoration" :isolated="isolated"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided,decoration }">' + trimmedTemplate.value + '</template></form-pad>'
     compile(componentTemplate)
@@ -159,7 +161,7 @@ onMounted(() => {
 })
 
 watchDebounced(() => props.template, (newValue) => {
-  trimmedTemplate.value = useDocumentTemplate(newValue).trim() || ''
+  trimmedTemplate.value = useDocumentTemplate(newValue,props.parentTemplates).trim() || ''
   buildFormComponent()
 }, { debounce: 500, maxWait: 5000, deep: true, immediate: true })
 watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 500, maxWait: 5000 })

package/dist/runtime/components/master/Autocomplete.vue

@@ -1,113 +1,56 @@
 <script lang="ts" setup>
 import {VAutocomplete} from 'vuetify/components/VAutocomplete'
-import {concat, isEmpty, sortBy} from 'lodash-es'
-import {computed, ref, watch,watchEffect} from 'vue'
-import {watchDebounced} from '@vueuse/core'
-import {useFuzzy} from '../../composables/utils/fuzzy'
-import {useGraphQl} from '../../composables/graphql'
+import {concat} from 'lodash-es'
+import {computed} from 'vue'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
-  fuzzy?: boolean
+  sortBy?: 'itemCode' | 'itemValue'
+  showCode?: boolean
+
   groupKey: string
+  itemCodes?: string[]
   lang?: 'TH' | 'EN'
-  fields?: string[]
+  fields?: Array<string | object>
   noDataText?: string
   filterText?: string
   waitForFilter?: boolean
   waitForFilterText?: string
-  modelValue?: string
-  sortBy?: 'itemCode' | 'itemValue'
-  showCode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  fuzzy: false,
-  noDataText: 'ไม่พบข้อมูล',
+  sortBy: 'itemValue',
+  showCode: false,
+
   lang: 'TH',
+  noDataText: 'ไม่พบข้อมูล',
   waitForFilter: false,
-  sortBy: 'itemValue',
-  showCode: false
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-const masterItems = ref<Array<any>>([])
-const items = ref<Array<any>>([])
-const selectedItem = ref<any>()
-
-const searchData = ref<string>('')
-
-const isLoading = ref(false)
-const isErrorLoading = ref(false)
-
-function query(groupKey: string, filterText: string | undefined) {
+const computedModelName = computed(()=>{
   let operation = 'masterItemByGroupKey'
+  if (props.filterText) operation = 'masterItemByGroupKeyAndFilterText'
+  if (props.itemCodes && props.itemCodes.length>0) operation = 'masterItemByGroupKeyAndItemCodeIn'
+  if (props.waitForFilter && !props.filterText) operation = ""
+  return operation
+})
 
-  const variables: Record<string, any> = { groupKey: { value: groupKey, required: true } }
-  if (filterText) {
-    variables['filterText'] = { value: filterText }
-    operation = 'masterItemByGroupKeyAndFilterText'
+const computedModelBy = computed(()=>{
+  let modelBy : Record<string,any> = {groupKey: props.groupKey}
+  if (props.filterText) {
+    modelBy["filterText"] = props.filterText
   }
-
-  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-  if (props.fields) fields = concat(fields, props.fields)
-
-  isLoading.value = true
-
-  useGraphQl().queryPromise(operation, fields, variables).then((result: any) => {
-    masterItems.value = result
-    items.value = result
-    isErrorLoading.value = false
-  }).catch((_error) => {
-    isErrorLoading.value = true
-  }).finally(() => {
-    isLoading.value = false
-  })
-}
-
-watchEffect(()=>{
-  if (props.waitForFilter && !props.filterText) {
-    masterItems.value = []
-    items.value = []
-    selectedItem.value = undefined
-  } else {
-    query(props.groupKey, props.filterText)
+  if (props.itemCodes && props.itemCodes.length>0) {
+    modelBy["itemCodes"] = props.itemCodes
   }
+  return modelBy
 })
 
-watch(() => props.modelValue, (newValue) => {
-  selectedItem.value = newValue
-}, { immediate: true })
-
-watch(selectedItem, (newValue) => {
-  emit('update:modelValue', newValue)
+const computedFields = computed(()=>{
+  return concat(['itemCode', 'itemValue', 'itemValueAlternative'],props.fields)
 })
 
-async function fuzzySearch() {
-  if (props.fuzzy) {
-    if (isEmpty(searchData.value)) {
-      items.value = masterItems.value
-    }
-    else {
-      let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-      if (props.fields) fields = concat(fields, props.fields)
-
-      const results: any = useFuzzy(searchData.value, masterItems.value, fields)
-      items.value = []
-      if (results.value.length) {
-        for (let i = 0; results.value.length > i; i++) {
-          if (results.value[i].item) items.value.push(results.value[i].item)
-        }
-      }
-    }
-  }
-}
-
-watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
-
 const itemTitleField = computed(() => {
-  if (props.lang == 'TH') return 'itemValue'
-  else return 'itemValueAlternative'
+  return (props.lang == 'TH') ? 'itemValue' : 'itemValueAlternative'
 })
 
 const computedNoDataText = computed(() => {
@@ -116,64 +59,34 @@ const computedNoDataText = computed(() => {
 })
 
 const computedSortBy = computed(()=>{
-  let sortByField = props.sortBy
-  if (sortByField == 'itemValue') {
+  if (props.sortBy == 'itemValue') {
     if (props.showCode) return ['itemCode']
     else return [itemTitleField.value,'itemValue','itemCode']
   } else {
-    return [sortByField]
-  }
-})
-
-const computedItems = computed(()=>{
-  if (props.fuzzy && !isEmpty(searchData.value)) {
-    return items.value
-  } else {
-    return sortBy(items.value, computedSortBy.value)
+    return [props.sortBy]
   }
 })
 </script>
 
 <template>
-  <v-autocomplete
-    v-model="selectedItem"
-    v-model:search="searchData"
-    v-bind="$attrs"
-    :items="computedItems"
-    :no-filter="props.fuzzy"
-    :item-title="itemTitleField"
-    item-value="itemCode"
-    :no-data-text="computedNoDataText"
-    :loading="isLoading"
+  <model-autocomplete
+      :model-name="computedModelName"
+      :model-by="computedModelBy"
+      :fields="computedFields"
+      :sort-by="computedSortBy"
+      :item-title="itemTitleField"
+      item-value="itemCode"
+      :no-data-text="computedNoDataText"
+      :show-code="props.showCode"
   >
-    <!-- @ts-ignore -->
     <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
-        :operation="operation"
-      />
-    </template>
-    <template
-      v-if="!$slots.item"
-      #item="{ props, item }"
+        v-if="!$slots.item"
+        #item="{ props, item }"
     >
       <v-list-item
-        v-bind="props"
-        :title="(showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)"
+          v-bind="props"
+          :title="(showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)"
       />
     </template>
-    <template
-      v-if="isErrorLoading"
-      #append
-    >
-      <v-icon color="error">
-        mdi mdi-alert
-      </v-icon>
-    </template>
-  </v-autocomplete>
+  </model-autocomplete>
 </template>

package/dist/runtime/components/master/label.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { computedAsync } from '@vueuse/core'
-import { useGraphQl } from '../../composables/graphql'
-
 interface Props {
   groupKey?: string | null
   itemCode?: string | null
   locale?: string
+
   notFoundText?: string
   placeholder?: string
 }
@@ -14,24 +12,27 @@ const props = withDefaults(defineProps<Props>(), {
   locale: 'TH',
 })
 
-const masterItemValue = computedAsync<string>(async () => {
-  if (props.groupKey && props.itemCode) {
-    try {
-      const result = await useGraphQl().queryPromise<any>("masterItemByGroupKeyAndItemCode",['itemValue', 'itemValueAlternative'],{ groupKey: props.groupKey, itemCode: props.itemCode })
-
-      if (result) {
-        return props.locale === 'TH'
-          ? result.itemValue
-          : result.itemValueAlternative || result.itemValue
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
+const computedNotFoundText =  computed(()=>{
   return props.notFoundText || `${props.itemCode}`
-}, props.placeholder || `${props.groupKey}(${props.itemCode})`)
+})
+
+const computedPlaceholder = computed(()=>{
+  return props.placeholder || `${props.groupKey}(${props.itemCode})`
+})
+
+const computedItemTitle = computed(()=>{
+  return (props.locale == 'TH')
+      ? "itemValue"
+      :  (result : Record<string,any>) => result["itemValueAlternative"] || result["itemValue"]
+})
 </script>
 
 <template>
-  {{ masterItemValue }}
+  <model-label
+      model-name="masterItemByGroupKeyAndItemCode"
+      :model-by="{groupKey: props.groupKey, itemCode: props.itemCode}"
+      :item-title="computedItemTitle"
+      :not-found-text="computedNotFoundText"
+      :placeholder="computedPlaceholder"
+  ></model-label>
 </template>

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

@@ -8,7 +8,7 @@ import {useGraphQlOperation} from "../../composables/graphqlOperation";
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
   fuzzy?: boolean
-  sortBy?: string
+  sortBy?: string | string[]
   showCode?: boolean
 
   modelName: string
@@ -48,21 +48,28 @@ watchEffect(()=>{
     variables[props.serverSearchKey] = searchData.value
   }
 
-  isLoading.value = true
+  if (props.modelName) {
+    isLoading.value = true
 
-  useGraphQlOperation('Query',props.modelName,fields,variables,props.cache).then((result: any) => {
-    if (isArray(result)) {
-      modelItems.value = result
-      items.value = result
-      isErrorLoading.value = false
-    } else {
+    useGraphQlOperation('Query',props.modelName,fields,variables,props.cache).then((result: any) => {
+      if (isArray(result)) {
+        modelItems.value = result
+        items.value = result
+        isErrorLoading.value = false
+      } else {
+        isErrorLoading.value = true
+      }
+    }).catch((_error) => {
+      modelItems.value = []
+      items.value = []
       isErrorLoading.value = true
-    }
-  }).catch((_error) => {
-    isErrorLoading.value = true
-  }).finally(() => {
-    isLoading.value = false
-  })
+    }).finally(() => {
+      isLoading.value = false
+    })
+  } else {
+    modelItems.value = []
+    items.value = []
+  }
 })
 
 async function fuzzySearch() {
@@ -88,12 +95,12 @@ async function fuzzySearch() {
 watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
 
 const computedItems = computed(()=>{
-  let sortByField = props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)
+  let sortByField = (!props.sortBy || typeof props.sortBy === "string") ?  [props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)] : props.sortBy
 
   if (props.fuzzy && !isEmpty(searchData.value)) {
     return items.value
   } else {
-    return sortBy(items.value, [sortByField])
+    return sortBy(items.value, sortByField)
   }
 })
 </script>
@@ -117,7 +124,6 @@ const computedItems = computed(()=>{
       <slot
           :name="name"
           v-bind="((slotData || {}) as object)"
-          :operation="operation"
       />
     </template>
     <template

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { computedAsync } from '@vueuse/core'
 import { useGraphQlOperation } from '../../composables/graphqlOperation'
+import {concat} from "lodash-es";
 
 interface Props {
   modelName: string
   modelBy?: object
-  itemTitle: string
+  itemTitle: string | ((result:Record<string,any>)=>void)
   fields?: Array<string | object>
   cache?: boolean
 
@@ -19,14 +20,16 @@ const props = withDefaults(defineProps<Props>(), {
 
 const modelItemValue = computedAsync<string>(async () => {
   if (props.modelName && props.itemTitle) {
-    let fields: any[] = [props.itemTitle]
+    let fields: any[] = (typeof props.itemTitle === "string") ? [props.itemTitle] : []
+    if (props.fields) fields = concat(fields, props.fields)
+
     const variables: Record<string, any> = Object.assign({},props.modelBy)
+    const result : Record<string, any> = await useGraphQlOperation('Query',props.modelName,fields,variables,props.cache)
 
     try {
-      const result : Record<string, any> = await useGraphQlOperation('Query',props.modelName,fields,variables,props.cache)
-
       if (result) {
-        return result[props.itemTitle]
+        if (typeof props.itemTitle === "string") return result[props.itemTitle]
+        else return props.itemTitle(result)
       }
     } catch (e) {
       console.error(e)

package/dist/runtime/composables/document/template.d.ts

@@ -1,2 +1,24 @@
+export interface DocumentTemplateItem {
+    inputType: string;
+    width?: string | number;
+    inputLabel?: string;
+    variableName?: string;
+    validationRules?: string;
+    inputOptions?: string | object;
+    inputAttributes?: string;
+    inputCustomCode?: string;
+    columnAttributes?: string;
+    conditionalDisplay?: string;
+    computedValue?: string;
+    retrievedValue?: string;
+}
+export interface ChoiceItem {
+    label: string;
+    value: string;
+}
 export declare const validationRulesRegex: RegExp;
-export declare function useDocumentTemplate(items: string | object): string;
+export declare function useDocumentTemplate(items: string | object, parentTemplates?: string | string[]): string;
+export declare function optionStringToChoiceObject(option: string | object): ChoiceItem[];
+export declare function escapeObjectForInlineBinding(obj: object): string;
+export declare function buildValidationRules(validationString: string): string;
+export declare function processDefaultTemplate(item: DocumentTemplateItem, insideTemplate?: string, optionString?: string, validationRules?: string): string;

package/dist/runtime/composables/document/template.js

@@ -1,5 +1,7 @@
+import { processTemplateFormTable } from "./templateFormTable.js";
+import { processTemplateFormHidden } from "./templateFormHidden.js";
 export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?)(,(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?))*$/;
-export function useDocumentTemplate(items) {
+export function useDocumentTemplate(items, parentTemplates) {
   if (!items) return "";
   if (typeof items === "string") {
     try {
@@ -11,94 +13,108 @@ export function useDocumentTemplate(items) {
   if (!Array.isArray(items) || !items.every((item) => typeof item === "object" && item !== null)) {
     return "";
   }
-  let templateString = items.map((item) => templateItemToString(item)).join("");
-  templateString = `<v-container fluid><v-row dense>${templateString}</v-row></v-container>`;
-  return templateString;
+  const templateString = items.map((item) => templateItemToString(item, parentTemplates || [])).join("");
+  return !parentTemplates || parentTemplates.length == 0 ? `<v-container fluid><v-row dense>${templateString}</v-row></v-container>` : `<v-row dense>${templateString}</v-row>`;
 }
-function templateItemToString(item) {
+function templateItemToString(item, parentTemplates) {
   let optionString = "";
-  let validationRules = "";
   if (item.inputOptions) {
-    if (item.inputType == "MasterAutocomplete") {
-      optionString += 'groupKey="' + item.inputOptions + '" ';
+    if (item.inputType === "MasterAutocomplete") {
+      optionString += `groupKey="${item.inputOptions}" `;
     }
-    if (item.inputType == "VSelect" || item.inputType == "VAutocomplete" || item.inputType == "VCombobox") {
+    if (["VSelect", "VAutocomplete", "VCombobox"].includes(item.inputType)) {
       const choice = optionStringToChoiceObject(item.inputOptions);
-      optionString = `item-value="value" item-title="label" :items='` + JSON.stringify(choice).replaceAll("'", "&#39;") + "' ";
+      optionString = `item-value="value" item-title="label" :items='${escapeObjectForInlineBinding(choice)}' `;
     }
-    if (item.inputType == "VRadio" || item.inputType == "VRadioInline") {
+    if (["VRadio", "VRadioInline"].includes(item.inputType)) {
       const choice = optionStringToChoiceObject(item.inputOptions);
-      optionString = choice.map((choiceItem) => `<v-radio label="${choiceItem.label}" value="${choiceItem.value}" ${item.inputAttributes ? " " + item.inputAttributes : ""}></v-radio>`).join("");
+      optionString = choice.map((choiceItem) => `<v-radio label="${choiceItem.label || ""}" value="${choiceItem.value || ""}" ${item.inputAttributes ? " " + item.inputAttributes : ""}></v-radio>`).join("");
     }
-    if (item.inputType == "Header") {
-      optionString = item.inputOptions.split(",").join(" ");
+    if (item.inputType === "Header") {
+      if (typeof item.inputOptions === "string") optionString = item.inputOptions.split(",").join(" ");
     }
   }
-  if (item.inputType == "FormDateTime" && !item.inputAttributes?.includes("dense")) item.inputAttributes = (item.inputAttributes?.trim() + " dense").trim();
-  if (item.validationRules) validationRules = buildValidationRules(item.validationRules);
+  if (item.conditionalDisplay) {
+    item.inputAttributes = `${item.inputAttributes?.trim() || ""} v-if="${item.conditionalDisplay}"`.trim();
+  }
+  if (item.inputType === "FormDateTime" && !item.inputAttributes?.includes("dense")) {
+    item.inputAttributes = `${item.inputAttributes?.trim() || ""} dense`.trim();
+  }
   let templateString;
   switch (item.inputType) {
     case "CustomCode":
-      templateString = `${item.inputCustomCode}`;
+      templateString = item.inputCustomCode || "";
       break;
     case "VRadio":
-      templateString = `<v-radio-group v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
-      break;
     case "VRadioInline":
-      templateString = `<v-radio-group v-model="data.${item.variableName}" inline${validationRules ? " " + validationRules.trim() : ""}><template #prepend>${item.inputLabel || item.variableName}</template>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      const inlineAttr = item.inputType === "VRadioInline" ? " inline" : "";
+      const validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
+      templateString = `<v-radio-group v-model="data.${item.variableName || ""}"${inlineAttr}${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend>${item.inputLabel}</template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "Separator":
-      templateString = `</v-row><v-row dense>`;
+      templateString = "</v-row><v-row dense>";
       break;
     case "Header":
-      templateString = `<div class="${optionString ? optionString.trim() : "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName}</div>`;
+      templateString = `<div class="${optionString || "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName || ""}</div>`;
       break;
     case "FormTable":
-      templateString = `<form-table v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${validationRules ? " " + validationRules.trim() : ""} ${item.inputAttributes ? " " + item.inputAttributes : ""}>${optionString ? " " + optionString.trim() : ""}
-                            <template #form>${item.inputFormTable}</template>
-                        </form-table>`;
+      templateString = processTemplateFormTable(item, parentTemplates);
       break;
     case "FormHidden":
-      templateString = `${item.inputOptions} / ${item.inputFormHidden} <form-hidden v-model="data.${item.variableName}" :item-value="${item.inputOptions ? item.inputOptions : "data"}" :hook="() => {${item.inputFormHidden}}">
-                        </form-hidden>`;
+      templateString = processTemplateFormHidden(item, parentTemplates);
+      break;
+    case "DocumentForm":
+      const parentTemplatesString = typeof parentTemplates === "string" ? parentTemplates : parentTemplates.join("|");
+      templateString = `<document-form v-model="data" templateCode="${item.inputOptions || ""}" parent-templates="${parentTemplatesString}"></document-form>`;
       break;
     default:
-      templateString = `<${item.inputType} v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}></${item.inputType}>`;
+      templateString = processDefaultTemplate(item, void 0, optionString);
+  }
+  if (!["Separator"].includes(item.inputType)) templateString = `<v-col${item.width ? ` cols="${item.width}"` : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
+  if (["Header", "DocumentForm"].includes(item.inputType)) templateString = `</v-row><v-row dense>${templateString}</v-row><v-row dense>`;
+  if (item.computedValue && item.variableName) {
+    templateString = `${templateString || ""}<FormHidden v-model="data.${item.variableName}" :item-value="data" :hook="()=>${item.computedValue}"/>`.trim();
   }
-  if (!["Separator", "Header"].includes(item.inputType)) templateString = `<v-col${item.width ? ' cols="' + item.width + '"' : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
-  if (["Header"].includes(item.inputType)) templateString = `</v-row><v-row dense><v-col${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col></v-row><v-row dense>`;
-  return templateString;
+  return templateString || "";
 }
-function optionStringToChoiceObject(option) {
-  let returnObject = [];
-  if (/^[^'",]+(,[^'",]+)*$/.test(option.trim())) {
-    returnObject = option.split(",").map((item) => {
+export function optionStringToChoiceObject(option) {
+  if (typeof option === "string") {
+    if (!/^[^'",]+(,[^'",]+)*$/.test(option.trim())) return [];
+    return option.split(",").map((item) => {
       item = item.trim();
       if (item.includes("|")) {
         const [label, value] = item.split("|").map((str) => str.trim().replace(/^['"]|['"]$/g, ""));
-        return { label, value };
-      } else {
-        item = item.replace(/^['"]|['"]$/g, "");
-        return { label: item, value: item };
+        return { label: label || "", value: value || "" };
       }
+      item = item.replace(/^['"]|['"]$/g, "");
+      return { label: item, value: item };
     });
   }
-  return returnObject;
+  if (Array.isArray(option) && option.every((item) => typeof item === "object" && item !== null)) {
+    return option.sort((a, b) => (a.id ?? Infinity) - (b.id ?? Infinity)).map((item) => ({
+      label: item.label || item.value || "",
+      // Default to empty string if label is undefined
+      value: item.value || ""
+      // Default to empty string if value is undefined
+    }));
+  }
+  return [];
+}
+export function escapeObjectForInlineBinding(obj) {
+  return JSON.stringify(obj).replace(/'/g, "&#39;");
 }
-function buildValidationRules(validationString) {
-  validationString = validationString.trim();
-  if (validationString.startsWith("[")) validationString = validationString.substring(1);
-  if (validationString.endsWith("]")) validationString = validationString.substring(0, validationString.length - 1);
+export function buildValidationRules(validationString) {
+  validationString = validationString.replace(/^\[|]$/g, "").trim();
   if (!validationRulesRegex.test(validationString)) return "";
-  validationString = validationString.split(",").map((rule) => {
+  const rules = validationString.split(",").map((rule) => {
     rule = rule.trim();
-    if (!rule.startsWith("rules.")) {
-      rule = "rules." + rule;
-    }
-    if (!/\(.+\)$/.test(rule)) {
-      rule = rule + "()";
-    }
-    return rule.replaceAll('"', "'");
-  }).join(",");
-  return `:rules="[${validationString}]"`;
+    if (!rule.startsWith("rules.")) rule = `rules.${rule}`;
+    if (!/\(.+\)$/.test(rule)) rule += "()";
+    return rule.replace(/"/g, "'");
+  });
+  return `:rules="[${rules.join(",")}]"`;
+}
+export function processDefaultTemplate(item, insideTemplate, optionString, validationRules) {
+  if (!validationRules) validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";
+  return `<${item.inputType} v-model="data.${item.variableName || ""}" label="${item.inputLabel || item.variableName || ""}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}>${insideTemplate || ""}</${item.inputType}>`;
 }

package/dist/runtime/composables/document/templateFormHidden.d.ts

@@ -0,0 +1,2 @@
+import { type DocumentTemplateItem } from './template.js';
+export declare function processTemplateFormHidden(item: DocumentTemplateItem, parentTemplates: string | string[]): string;

package/dist/runtime/composables/document/templateFormHidden.js

@@ -0,0 +1,10 @@
+export function processTemplateFormHidden(item, parentTemplates) {
+  let formHiddenOptions = Object.assign({ itemValue: "", hook: "" }, item.inputOptions);
+  if (formHiddenOptions.hook.trim()) {
+    formHiddenOptions.hook = formHiddenOptions.hook.replace(/\n/g, ";").trim();
+    if (!/^return\s/.test(formHiddenOptions.hook)) {
+      formHiddenOptions.hook = `return ${formHiddenOptions.hook}`;
+    }
+  }
+  return `<form-hidden v-model="data.${item.variableName || ""}" :item-value="${formHiddenOptions.itemValue || "data"}" :hook="(data,modelValue) => {${formHiddenOptions.hook}}"></form-hidden>`;
+}

package/dist/runtime/composables/document/templateFormTable.d.ts

@@ -0,0 +1,2 @@
+import { type DocumentTemplateItem } from './template.js';
+export declare function processTemplateFormTable(item: DocumentTemplateItem, parentTemplates: string | string[]): string;

package/dist/runtime/composables/document/templateFormTable.js

@@ -0,0 +1,9 @@
+import {
+  escapeObjectForInlineBinding,
+  processDefaultTemplate,
+  useDocumentTemplate
+} from "./template.js";
+export function processTemplateFormTable(item, parentTemplates) {
+  let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
+  return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableOptions.headers || {})}'`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",