@ramathibodi/nuxt-commons 0.1.56 → 0.1.58

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.56",
+  "version": "0.1.58",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

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

@@ -3,14 +3,20 @@ 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 {cloneDeep , filter} from "lodash-es";
+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"
+  title: "Document Template",
+  disableAdvanceMode: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -157,9 +163,10 @@ const notRequireLabel = ref(['Separator', 'CustomCode', 'FormFile', 'FormHidden'
 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 notRequireInputAttributes = ref(['CustomCode','Header','DocumentForm'])
 const notRequireColumnAttributes = ref(['Separator', 'FormHidden','DocumentForm'])
-const notRequireAdvancedSetting = ref(['Separator','CustomCode', 'FormHidden'])
+const notRequireAdvancedSetting = ref(['Separator','CustomCode'])
+const notRequireClassAndStyle = ref(['FormHidden'])
 
 const hasSpecificOption = ref(['FormHidden','FormTable','FormTableData'])
 
@@ -189,6 +196,7 @@ const ruleOptions = (inputType: string) => (value: any) => {
         color="primary"
         variant="flat"
         @click="convertToAdvanceMode()"
+        v-if="!disableAdvanceMode"
       >
         Convert To Advance
       </VBtn>
@@ -249,6 +257,9 @@ const ruleOptions = (inputType: string) => (value: any) => {
                             <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>
@@ -263,106 +274,71 @@ const ruleOptions = (inputType: string) => (value: any) => {
               <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">
-                              <template-builder title="Template" v-model="headerData.template"></template-builder>
-                              </v-col>
-                          </v-row>
-                          <v-row dense>
-                            <v-col cols="12">
-                              <template-builder title="Header Template" v-model="headerData.headerTemplate"></template-builder>
-                            </v-col>
-                          </v-row>
-                          <v-expansion-panels>
-
-                            <v-expansion-panel >
-                              <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="headerData.inputAttributes"
-                                          label="Input Attributes"
-                                      />
-                                    </v-col>
-
-                                    <v-col cols="12" md="6">
-                                      <v-text-field
-                                          v-model="headerData.conditionalDisplay"
-                                          label="Conditional Display"
-                                      />
-                                    </v-col>
-                                    <v-col cols="12" md="6">
-                                      <v-text-field
-                                          v-model="headerData.computedValue"
-                                          label="Computed Value"
-                                      />
-                                    </v-col>
-                                    <v-col cols="12" md="6">
-                                      <v-text-field
-                                          v-model="headerData.retrievedValue"
-                                          label="Retrieved Value"
-                                      />
-                                    </v-col>
-                                  </v-row>
-                                </v-container>
-                              </v-expansion-panel-text>
-                            </v-expansion-panel>
-                          </v-expansion-panels>
-                        </v-container>
+                    <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>
-                    </form-table>
+                      <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"
-                                hide-default-footer
-                                :importable="false"
-                                :exportable="false"
-                                :searchable="false"
-                                :headers="optionData.headers" title="Data">
-                      <template #form="{data: headerData,rules}">
-                        <v-container fluid>
-                          <v-row dense>
-                            <v-col v-for="header of optionData.headers" cols="12">
-                              <v-text-field v-if="header.key != 'action' && !header.template"
-                                            v-model="headerData[header.title]"
-                                            :label="header.title">
-
-                              </v-text-field></v-col>
-                          </v-row>
-                        </v-container>
-                      </template>
-
-                      <template  v-for="header of filter(optionData.headers,(item)=> item.template)" #[`item.${header.key}`]="{item}">
-                        <form-pad
-                                  :template="header.template"
-                                  v-model="item[header.key]">
-                        </form-pad>
-
+                    <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>
-                      <template  v-for="header of filter(optionData.headers,(item)=> item.headerTemplate)" #[`header.${header.key}`]="{item}">
-                        <form-pad
-                            :template="header.headerTemplate"
-                            >
-                        </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}">
@@ -371,7 +347,6 @@ const ruleOptions = (inputType: string) => (value: any) => {
                     <v-text-field
                         v-model="optionData.hook"
                         label="Hook"
-                        :rules="[rules.require()]"
                     />
                   </v-col>
                   <v-col cols="12">
@@ -473,37 +448,73 @@ const ruleOptions = (inputType: string) => (value: any) => {
                   </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">
-      <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 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
+          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

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

@@ -16,6 +16,7 @@ import {isObject} from 'lodash-es'
 import {watchDebounced} from '@vueuse/core'
 import {useRules} from '../../composables/utils/validation'
 import {useDocumentTemplate} from '../../composables/document/template'
+import { isArray, isString, isPlainObject } from 'lodash-es'
 import FormPad from './Pad.vue'
 
 defineOptions({
@@ -78,7 +79,44 @@ const formInjected = ref()
 
 const formData = ref<any>({})
 
+function isBlankString(v: unknown): v is string {
+  return isString(v) && v.length === 0
+}
+
+function sanitizeBlankStrings(val: any): boolean {
+  let changed = false
+
+  if (isArray(val)) {
+    for (let i = val.length - 1; i >= 0; i--) {
+      const item = val[i]
+      if (isBlankString(item)) {
+        val.splice(i, 1) // remove array element
+        changed = true
+      } else if (isPlainObject(item) || isArray(item)) {
+        if (sanitizeBlankStrings(item)) changed = true
+      }
+    }
+    return changed
+  }
+
+  if (isPlainObject(val)) {
+    for (const key of Object.keys(val)) {
+      const v = val[key]
+      if (isBlankString(v)) {
+        delete val[key] // remove property directly
+        changed = true
+      } else if (isPlainObject(v) || isArray(v)) {
+        if (sanitizeBlankStrings(v)) changed = true
+      }
+    }
+    return changed
+  }
+
+  return false
+}
+
 watch(formData, (newValue) => {
+  sanitizeBlankStrings(newValue)
   emit('update:modelValue', newValue)
 }, { deep: true })
 
@@ -109,6 +147,7 @@ function buildFormComponent() {
         const formComponentData = ref<any>({})
         const formPadTemplate = ref<any>({})
         watch(formComponentData, (newValue) => {
+          sanitizeBlankStrings(newValue)
           ctx.emit('update:modelValue', newValue)
         }, { deep: true })
         watch(() => props.modelValue, (newValue) => {

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

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