@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,524 +1,536 @@
-<script lang="ts" setup>
-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 {autoActionHeader,templateToHeader} from "../../composables/document/templateFormTable";
-import {cloneDeep} from "lodash-es";
-import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
-import {safeParseJSONDeep} from "../../utils/object";
-
-interface Props {
-  title?: string
-  disableAdvanceMode?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Document Template",
-  disableAdvanceMode: false,
-})
-
-const emit = defineEmits(['update:modelValue'])
-const modelValue = defineModel<string|Record<string, any>[]>()
-
-const advanceModeCode = ref<string>()
-const isAdvanceMode = computed(() => {
-  return modelValue.value && ((typeof modelValue.value === "string") && !isValidJsonArrayOfObjects(modelValue.value))
-})
-
-const templateItems = ref<Record<string, any>[]>([])
-
-const headers = ref([
-  { title: '',
-    key: 'operation',
-    width: '120px',
-  },
-  {
-    title: 'Rec No.',
-    key: 'recNo',
-  },
-  {
-    title: 'Input Type',
-    key: 'inputType',
-  },
-  {
-    title: 'Width',
-    key: 'width',
-  },
-  {
-    title: 'Input Label',
-    key: 'inputLabel',
-  },
-  {
-    title: 'Variable Name',
-    key: 'variableName',
-  },
-  {
-    title: 'Configuration',
-    key: 'configuration',
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    width: '120px',
-  },
-])
-
-const formTableHeaders = ref([
-  {
-    title: 'Title',
-    key: 'title',
-  },
-  {
-    title: 'Key',
-    key: 'key',
-  },
-  {
-    title: 'Width',
-    key: 'width',
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    width: '120px',
-  },
-])
-
-const choiceHeaders = ref([
-  {
-    title: 'Label',
-    key: 'label',
-  },
-  {
-    title: 'Value',
-    key: 'value',
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    width: '120px',
-  },
-])
-
-
-function isValidJsonArrayOfObjects(str: string | undefined) {
-  try {
-    const parsed = JSON.parse(str as string)
-    return Array.isArray(parsed) && parsed.every(item => typeof item === 'object' && item !== null && !Array.isArray(item))
-  }
-  catch (e) {
-    return false
-  }
-}
-
-watch(templateItems, (newValue) => {
-  if (!isAdvanceMode.value) modelValue.value = JSON.stringify(newValue)
-}, { deep: true })
-
-watch(modelValue, (newValue) => {
-  if (typeof newValue === "string" && isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
-  else if (typeof newValue === "string") advanceModeCode.value = newValue
-  else if (newValue) templateItems.value = cloneDeep(newValue)
-}, { deep: true, immediate: true })
-
-watch(advanceModeCode, (newValue)=>{
-  if (isAdvanceMode.value) modelValue.value = newValue
-})
-
-async function convertToAdvanceMode() {
-  if (!isAdvanceMode.value) {
-    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<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'
-
-  return true
-}
-</script>
-
-<template>
-  <FormTable
-    v-if="!isAdvanceMode"
-    v-model="templateItems"
-    :headers="headers"
-    :title="props.title"
-  >
-    <template #toolbarItems>
-      <VBtn
-        color="primary"
-        variant="flat"
-        @click="convertToAdvanceMode()"
-        v-if="!disableAdvanceMode"
-      >
-        Convert To Advance
-      </VBtn>
-    </template>
-    <template #item.recNo="{internalItem}">
-      {{ internalItem.index }}
-    </template>
-    <template #form="{ data, rules }">
-      <v-container fluid>
-        <v-row dense>
-          <v-col cols="3">
-            <v-combobox
-              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 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="(_result: any,model: any,newValue: any,oldValue: any)=>{return (newValue && oldValue) ? undefined : model}"></form-hidden>
-          </v-col>
-          <v-col cols="4" v-if="!notRequireLabel.includes(data.inputType)">
-            <v-text-field
-                v-model="data.inputLabel"
-                label="Input Label"
-                :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col cols="4" v-if="!notRequireVariable.includes(data.inputType)">
-            <v-text-field
-                v-model="data.variableName"
-                label="Variable Name"
-                :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col
-              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-row dense>
-                            <v-col cols="12"><v-textarea v-model="headerData.template" label="Item Template"></v-textarea></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=='FormTableData'">
-              <template #default="{data: optionData}">
-                <v-row dense>
-                  <v-col cols="12">
-                    <tabs-group>
-                      <template #tabs>
-                        <v-tab value="itemTemplate">Item Template</v-tab>
-                        <v-tab value="dataTemplate">Data Template</v-tab>
-                        <v-tab value="header">Header</v-tab>
-                      </template>
-                      <template #items>
-                        <v-tabs-window-item value="itemTemplate">
-                          <document-template-builder v-model="optionData.itemTemplate" title="Item Template" disable-advance-mode></document-template-builder>
-                        </v-tabs-window-item>
-                        <v-tabs-window-item value="dataTemplate">
-                          <document-template-builder v-model="optionData.dataTemplate" title="Data Template" disable-advance-mode></document-template-builder>
-                        </v-tabs-window-item>
-                        <v-tabs-window-item value="header">
-                          <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-row dense>
-                                  <v-col cols="12"><v-text-field v-model="headerData.value" label="Value"></v-text-field></v-col>
-                                  <v-col cols="12"><v-textarea v-model="headerData.template" label="Item Template"></v-textarea></v-col>
-                                </v-row>
-                              </v-container>
-                            </template>
-                          </form-table>
-                        </v-tabs-window-item>
-                      </template>
-                    </tabs-group>
-                  </v-col>
-                  <v-col cols="12">
-                    <form-table v-model="optionData.items" :headers="(optionData.headers && optionData.headers.length>0) ? autoActionHeader(optionData.headers) : autoActionHeader(templateToHeader(optionData.itemTemplate))" title="Items">
-                      <template #form="{data}">
-                        <form-pad :model-value="data" :template="optionData.itemTemplate"></form-pad>
-                      </template>
-                    </form-table>
-                  </v-col>
-                  <v-col cols="12">
-                    <v-row dense>
-                      <v-col cols="4">
-                        <v-radio-group v-model="optionData.disableApplyToAll" inline>
-                          <template #prepend>
-                            <span class="opacity-60"> Disable Apply to All</span>
-                          </template>
-                          <v-radio label="No" value="false" hide-details> </v-radio>
-                          <v-radio label="Yes" value="true" hide-details> </v-radio>
-                          <v-radio label="Partial" value="partial" hide-details> </v-radio>
-                        </v-radio-group>
-                      </v-col>
-                      <v-col cols="8">
-                        <VTextField
-                            variant="underlined"
-                            v-model="optionData.disableApplyToAllPartial"
-                            label="Disable Apply To All Column"
-                            v-if="optionData.disableApplyToAll=='partial'"
-                        >
-                        </VTextField>
-                      </v-col>
-                    </v-row>
-                  </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"
-                    />
-                  </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="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'"
-            cols="12"
-          >
-            <FormCodeEditor
-                v-model="data.inputCustomCode"
-                label="Custom Code"
-                :rules="[rules.require()]"
-            />
-          </v-col>
-        </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-panel v-if="!notRequireClassAndStyle.includes(data.inputType)">
-                <v-expansion-panel-title collapse-icon="mdi mdi-minus" expand-icon="mdi mdi-plus" class="font-weight-bold">Class and Styles</v-expansion-panel-title>
-                <v-expansion-panel-text>
-                  <v-container fluid>
-                    <v-row dense>
-                      <v-col cols="12">
-                        <v-text-field
-                            v-model="data.customClass"
-                            label="Custom Class"
-                        />
-                      </v-col>
-                      <v-col cols="12">
-                        <v-text-field
-                            v-model="data.customStyle"
-                            label="Custom Styles"
-                        />
-                      </v-col>
-                    </v-row>
-                  </v-container>
-                </v-expansion-panel-text>
-              </v-expansion-panel>
-            </v-expansion-panels>
-          </v-col>
-        </v-row>
-      </v-container>
-    </template>
-    <template #item.configuration="props">
-      <v-sheet
-          elevation="1"
-          max-height="250"
-          class="overflow-y-auto my-1 pa-2"
-          v-if="props.item.inputType=='CustomCode'
-            || props.item.validationRules
-            || props.item.inputOptions
-            || props.item.inputAttributes
-            || props.item.columnAttributes
-            || props.item.conditionalDisplay
-            || props.item.computedValue
-            || props.item.retrievedValue"
-      >
-        <template v-if="props.item.inputType=='CustomCode'">
-          <b>Custom Code :</b><br>
-          <span style="white-space: pre-line">{{ props.item.inputCustomCode }}</span>
-        </template>
-        <template v-if="props.item.validationRules">
-          <b>Validation Rules :</b> {{ props.item.validationRules }}<br>
-        </template>
-        <template v-if="props.item.inputOptions">
-          <b>Input Options :</b>
-          <vue-json-pretty :data="safeParseJSONDeep(props.item.inputOptions)" />
-        </template>
-        <template v-if="props.item.inputAttributes">
-          <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
-        </template>
-        <template v-if="props.item.columnAttributes">
-          <b>Column Attributes :</b> {{ props.item.columnAttributes }}<br>
-        </template>
-        <template v-if="props.item.conditionalDisplay">
-          <b>Conditional Display :</b> {{ props.item.conditionalDisplay }}<br>
-        </template>
-        <template v-if="props.item.computedValue">
-          <b>Computed Value :</b> {{ props.item.computedValue }}<br>
-        </template>
-        <template v-if="props.item.retrievedValue">
-          <b>Retrieved Value :</b> {{ props.item.retrievedValue }}<br>
-        </template>
-      </v-sheet>
-    </template>
-  </FormTable>
-  <FormCodeEditor
-      v-else
-      v-model="advanceModeCode"
-  />
-</template>
+<script lang="ts" setup>
+/**
+ * DocumentTemplateBuilder supports document-template rendering and synchronizes template-defined field behavior with runtime data.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+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 {autoActionHeader,templateToHeader} from "../../composables/document/templateFormTable";
+import {cloneDeep} from "lodash-es";
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+import {safeParseJSONDeep} from "../../utils/object";
+
+interface Props {
+  title?: string // Title text displayed in the component header or dialog.
+  disableAdvanceMode?: boolean // Disables advanced editor mode toggles and actions.
+}
+
+/**
+ * Public props accepted by DocumentTemplateBuilder.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  title: "Document Template",
+  disableAdvanceMode: false,
+})
+
+/**
+ * Custom events emitted by DocumentTemplateBuilder.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+const modelValue = defineModel<string|Record<string, any>[]>()
+
+const advanceModeCode = ref<string>()
+const isAdvanceMode = computed(() => {
+  return modelValue.value && ((typeof modelValue.value === "string") && !isValidJsonArrayOfObjects(modelValue.value))
+})
+
+const templateItems = ref<Record<string, any>[]>([])
+
+const headers = ref([
+  { title: '',
+    key: 'operation',
+    width: '120px',
+  },
+  {
+    title: 'Rec No.',
+    key: 'recNo',
+  },
+  {
+    title: 'Input Type',
+    key: 'inputType',
+  },
+  {
+    title: 'Width',
+    key: 'width',
+  },
+  {
+    title: 'Input Label',
+    key: 'inputLabel',
+  },
+  {
+    title: 'Variable Name',
+    key: 'variableName',
+  },
+  {
+    title: 'Configuration',
+    key: 'configuration',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    width: '120px',
+  },
+])
+
+const formTableHeaders = ref([
+  {
+    title: 'Title',
+    key: 'title',
+  },
+  {
+    title: 'Key',
+    key: 'key',
+  },
+  {
+    title: 'Width',
+    key: 'width',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    width: '120px',
+  },
+])
+
+const choiceHeaders = ref([
+  {
+    title: 'Label',
+    key: 'label',
+  },
+  {
+    title: 'Value',
+    key: 'value',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    width: '120px',
+  },
+])
+
+
+function isValidJsonArrayOfObjects(str: string | undefined) {
+  try {
+    const parsed = JSON.parse(str as string)
+    return Array.isArray(parsed) && parsed.every(item => typeof item === 'object' && item !== null && !Array.isArray(item))
+  }
+  catch (e) {
+    return false
+  }
+}
+
+watch(templateItems, (newValue) => {
+  if (!isAdvanceMode.value) modelValue.value = JSON.stringify(newValue)
+}, { deep: true })
+
+watch(modelValue, (newValue) => {
+  if (typeof newValue === "string" && isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
+  else if (typeof newValue === "string") advanceModeCode.value = newValue
+  else if (newValue) templateItems.value = cloneDeep(newValue)
+}, { deep: true, immediate: true })
+
+watch(advanceModeCode, (newValue)=>{
+  if (isAdvanceMode.value) modelValue.value = newValue
+})
+
+async function convertToAdvanceMode() {
+  if (!isAdvanceMode.value) {
+    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<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'
+
+  return true
+}
+</script>
+
+<template>
+  <FormTable
+    v-if="!isAdvanceMode"
+    v-model="templateItems"
+    :headers="headers"
+    :title="props.title"
+  >
+    <template #toolbarItems>
+      <VBtn
+        color="primary"
+        variant="flat"
+        @click="convertToAdvanceMode()"
+        v-if="!disableAdvanceMode"
+      >
+        Convert To Advance
+      </VBtn>
+    </template>
+    <template #item.recNo="{internalItem}">
+      {{ internalItem.index }}
+    </template>
+    <template #form="{ data, rules }">
+      <v-container fluid>
+        <v-row dense>
+          <v-col cols="3">
+            <v-combobox
+              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 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="(_result: any,model: any,newValue: any,oldValue: any)=>{return (newValue && oldValue) ? undefined : model}"></form-hidden>
+          </v-col>
+          <v-col cols="4" v-if="!notRequireLabel.includes(data.inputType)">
+            <v-text-field
+                v-model="data.inputLabel"
+                label="Input Label"
+                :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col cols="4" v-if="!notRequireVariable.includes(data.inputType)">
+            <v-text-field
+                v-model="data.variableName"
+                label="Variable Name"
+                :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col
+              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-row dense>
+                            <v-col cols="12"><v-textarea v-model="headerData.template" label="Item Template"></v-textarea></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=='FormTableData'">
+              <template #default="{data: optionData}">
+                <v-row dense>
+                  <v-col cols="12">
+                    <tabs-group>
+                      <template #tabs>
+                        <v-tab value="itemTemplate">Item Template</v-tab>
+                        <v-tab value="dataTemplate">Data Template</v-tab>
+                        <v-tab value="header">Header</v-tab>
+                      </template>
+                      <template #items>
+                        <v-tabs-window-item value="itemTemplate">
+                          <document-template-builder v-model="optionData.itemTemplate" title="Item Template" disable-advance-mode></document-template-builder>
+                        </v-tabs-window-item>
+                        <v-tabs-window-item value="dataTemplate">
+                          <document-template-builder v-model="optionData.dataTemplate" title="Data Template" disable-advance-mode></document-template-builder>
+                        </v-tabs-window-item>
+                        <v-tabs-window-item value="header">
+                          <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-row dense>
+                                  <v-col cols="12"><v-text-field v-model="headerData.value" label="Value"></v-text-field></v-col>
+                                  <v-col cols="12"><v-textarea v-model="headerData.template" label="Item Template"></v-textarea></v-col>
+                                </v-row>
+                              </v-container>
+                            </template>
+                          </form-table>
+                        </v-tabs-window-item>
+                      </template>
+                    </tabs-group>
+                  </v-col>
+                  <v-col cols="12">
+                    <form-table v-model="optionData.items" :headers="(optionData.headers && optionData.headers.length>0) ? autoActionHeader(optionData.headers) : autoActionHeader(templateToHeader(optionData.itemTemplate))" title="Items">
+                      <template #form="{data}">
+                        <form-pad :model-value="data" :template="optionData.itemTemplate"></form-pad>
+                      </template>
+                    </form-table>
+                  </v-col>
+                  <v-col cols="12">
+                    <v-row dense>
+                      <v-col cols="4">
+                        <v-radio-group v-model="optionData.disableApplyToAll" inline>
+                          <template #prepend>
+                            <span class="opacity-60"> Disable Apply to All</span>
+                          </template>
+                          <v-radio label="No" value="false" hide-details> </v-radio>
+                          <v-radio label="Yes" value="true" hide-details> </v-radio>
+                          <v-radio label="Partial" value="partial" hide-details> </v-radio>
+                        </v-radio-group>
+                      </v-col>
+                      <v-col cols="8">
+                        <VTextField
+                            variant="underlined"
+                            v-model="optionData.disableApplyToAllPartial"
+                            label="Disable Apply To All Column"
+                            v-if="optionData.disableApplyToAll=='partial'"
+                        >
+                        </VTextField>
+                      </v-col>
+                    </v-row>
+                  </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"
+                    />
+                  </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="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'"
+            cols="12"
+          >
+            <FormCodeEditor
+                v-model="data.inputCustomCode"
+                label="Custom Code"
+                :rules="[rules.require()]"
+            />
+          </v-col>
+        </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-panel v-if="!notRequireClassAndStyle.includes(data.inputType)">
+                <v-expansion-panel-title collapse-icon="mdi mdi-minus" expand-icon="mdi mdi-plus" class="font-weight-bold">Class and Styles</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-container fluid>
+                    <v-row dense>
+                      <v-col cols="12">
+                        <v-text-field
+                            v-model="data.customClass"
+                            label="Custom Class"
+                        />
+                      </v-col>
+                      <v-col cols="12">
+                        <v-text-field
+                            v-model="data.customStyle"
+                            label="Custom Styles"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-col>
+        </v-row>
+      </v-container>
+    </template>
+    <template #item.configuration="props">
+      <v-sheet
+          elevation="1"
+          max-height="250"
+          class="overflow-y-auto my-1 pa-2"
+          v-if="props.item.inputType=='CustomCode'
+            || props.item.validationRules
+            || props.item.inputOptions
+            || props.item.inputAttributes
+            || props.item.columnAttributes
+            || props.item.conditionalDisplay
+            || props.item.computedValue
+            || props.item.retrievedValue"
+      >
+        <template v-if="props.item.inputType=='CustomCode'">
+          <b>Custom Code :</b><br>
+          <span style="white-space: pre-line">{{ props.item.inputCustomCode }}</span>
+        </template>
+        <template v-if="props.item.validationRules">
+          <b>Validation Rules :</b> {{ props.item.validationRules }}<br>
+        </template>
+        <template v-if="props.item.inputOptions">
+          <b>Input Options :</b>
+          <vue-json-pretty :data="safeParseJSONDeep(props.item.inputOptions)" />
+        </template>
+        <template v-if="props.item.inputAttributes">
+          <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
+        </template>
+        <template v-if="props.item.columnAttributes">
+          <b>Column Attributes :</b> {{ props.item.columnAttributes }}<br>
+        </template>
+        <template v-if="props.item.conditionalDisplay">
+          <b>Conditional Display :</b> {{ props.item.conditionalDisplay }}<br>
+        </template>
+        <template v-if="props.item.computedValue">
+          <b>Computed Value :</b> {{ props.item.computedValue }}<br>
+        </template>
+        <template v-if="props.item.retrievedValue">
+          <b>Retrieved Value :</b> {{ props.item.retrievedValue }}<br>
+        </template>
+      </v-sheet>
+    </template>
+  </FormTable>
+  <FormCodeEditor
+      v-else
+      v-model="advanceModeCode"
+  />
+</template>