@ramathibodi/nuxt-commons 0.1.14 → 0.1.16

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

@@ -1,216 +1,203 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import * as prettier from 'prettier'
-import prettierPluginHtml from 'prettier/plugins/html'
-import { useDocumentTemplate, validationRulesRegex } from '../../composables/document/template'
-
-interface Props {
-  modelValue?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const isAdvanceMode = computed(() => {
-  return props.modelValue && !isValidJsonArrayOfObjects(props.modelValue)
-})
-
-const templateItems = ref<Record<string, any>>([])
-const templateAdvanceCode = ref<string | undefined>()
-
-const headers = ref([
-  { title: '',
-    key: 'operation',
-    width: '100px',
-  },
-  {
-    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',
-  },
-])
-
-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) emit('update:modelValue', JSON.stringify(newValue))
-}, { deep: true })
-
-watch(templateAdvanceCode, (newValue) => {
-  if (isAdvanceMode.value) emit('update:modelValue', newValue)
-})
-
-watch(() => props.modelValue, (newValue) => {
-  if (isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
-  else templateAdvanceCode.value = newValue
-}, { deep: true, immediate: true })
-
-async function convertToAdvanceMode() {
-  if (!isAdvanceMode.value) {
-    emit('update:modelValue', await prettier.format(useDocumentTemplate(templateItems.value).replaceAll('>', '>\n'), { parser: 'html', plugins: [prettierPluginHtml] }))
-  }
-}
-
-const inputTypeChoice = ref(['VTextField', 'VTextarea', 'VSelect', 'VAutocomplete', 'FormDate', 'FormTime', 'FormDateTime', 'VCombobox', 'VRadio', 'VRadioInline', 'VCheckbox', 'VSwitch', 'MasterAutocomplete', 'Header', 'Separator', 'CustomCode'])
-const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete'])
-const notRequireVariable = ref(['Header', 'Separator', 'CustomCode'])
-const notRequireLabel = ref(['Separator', 'CustomCode'])
-
-const choiceOption = ref(['VSelect', 'VRadio', 'VRadioInline'])
-
-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="Document Template"
-  >
-    <template #toolbarItems>
-      <VBtn
-        color="primary"
-        variant="flat"
-        @click="convertToAdvanceMode()"
-      >
-        Convert To Advance
-      </VBtn>
-    </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"
-              :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col
-            v-if="data.inputType!='Separator'"
-            cols="1"
-          >
-            <v-text-field
-              v-model="data.width"
-              label="Width"
-              :rules="[rules.require()]"
-              type="number"
-            />
-          </v-col>
-          <v-col cols="4">
-            <v-text-field
-              v-if="!notRequireLabel.includes(data.inputType)"
-              v-model="data.inputLabel"
-              label="Input Label"
-              :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col cols="4">
-            <v-text-field
-              v-if="!notRequireVariable.includes(data.inputType)"
-              v-model="data.variableName"
-              label="Variable Name"
-              :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col
-            v-if="data.inputType!='CustomCode'"
-            cols="12"
-          >
-            <v-textarea
-              v-model="data.inputOptions"
-              label="Input Options"
-              auto-grow
-              :rules="[rules.requireIf(requireOption.includes(data.inputType)), ruleOptions(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"
-          >
-            <FormCodeEditor
-              v-model="data.inputCustomCode"
-              label="Custom Code"
-              :rules="[rules.require()]"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </template>
-    <template #item.configuration="props">
-      <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> {{ props.item.inputOptions }}<br>
-      </template>
-      <template v-if="props.item.inputAttributes">
-        <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
-      </template>
-    </template>
-  </FormTable>
-  <FormCodeEditor
-    v-else
-    v-model="templateAdvanceCode"
-  />
-</template>
+<script lang="ts" setup>
+import {computed, ref, watch} from 'vue'
+import * as prettier from 'prettier'
+import prettierPluginHtml from 'prettier/plugins/html'
+import {useDocumentTemplate, validationRulesRegex} from '../../composables/document/template'
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = defineModel<string>()
+
+const isAdvanceMode = computed(() => {
+  return modelValue.value && !isValidJsonArrayOfObjects(modelValue.value)
+})
+
+const templateItems = ref<Record<string, any>>([])
+
+const headers = ref([
+  { title: '',
+    key: 'operation',
+    width: '120px',
+  },
+  {
+    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',
+  },
+])
+
+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 (isValidJsonArrayOfObjects(newValue)) templateItems.value = JSON.parse(newValue as string)
+}, { deep: true, immediate: true })
+
+async function convertToAdvanceMode() {
+  if (!isAdvanceMode.value) {
+    modelValue.value = await prettier.format(useDocumentTemplate(templateItems.value).replaceAll('>', '>\n'), { parser: 'html', plugins: [prettierPluginHtml] })
+  }
+}
+
+const inputTypeChoice = ref(['VTextField', 'VTextarea', 'VSelect', 'VAutocomplete', 'FormDate', 'FormTime', 'FormDateTime', 'VCombobox', 'VRadio', 'VRadioInline', 'VCheckbox', 'VSwitch', 'MasterAutocomplete', 'Header', 'Separator', 'CustomCode'])
+const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete'])
+const notRequireVariable = ref(['Header', 'Separator', 'CustomCode'])
+const notRequireLabel = ref(['Separator', 'CustomCode'])
+
+const choiceOption = ref(['VSelect', 'VRadio', 'VRadioInline'])
+
+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="Document Template"
+  >
+    <template #toolbarItems>
+      <VBtn
+        color="primary"
+        variant="flat"
+        @click="convertToAdvanceMode()"
+      >
+        Convert To Advance
+      </VBtn>
+    </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"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col
+            v-if="data.inputType!='Separator'"
+            cols="1"
+          >
+            <v-text-field
+              v-model="data.width"
+              label="Width"
+              :rules="[rules.require()]"
+              type="number"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              v-if="!notRequireLabel.includes(data.inputType)"
+              v-model="data.inputLabel"
+              label="Input Label"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              v-if="!notRequireVariable.includes(data.inputType)"
+              v-model="data.variableName"
+              label="Variable Name"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+          <v-col
+            v-if="data.inputType!='CustomCode'"
+            cols="12"
+          >
+            <v-textarea
+              v-model="data.inputOptions"
+              label="Input Options"
+              auto-grow
+              :rules="[rules.requireIf(requireOption.includes(data.inputType)), ruleOptions(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"
+          >
+            <FormCodeEditor
+              v-model="data.inputCustomCode"
+              label="Custom Code"
+              :rules="[rules.require()]"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </template>
+    <template #item.configuration="props">
+      <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> {{ props.item.inputOptions }}<br>
+      </template>
+      <template v-if="props.item.inputAttributes">
+        <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
+      </template>
+    </template>
+  </FormTable>
+  <FormCodeEditor
+    v-else
+    v-model="modelValue"
+  />
+</template>