@ramathibodi/nuxt-commons 0.1.34 → 0.1.36

package/dist/module.json

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

package/dist/runtime/components/SplitterPanel.vue

@@ -31,7 +31,7 @@ const resize = (event: MouseEvent) => {
   <v-card :="$attrs">
     <v-sheet
       border
-      :height="height"
+      :height="props.height"
     >
       <div
         ref="containerRef"

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

@@ -73,10 +73,14 @@ async function convertToAdvanceMode() {
   }
 }
 
-const inputTypeChoice = ref(['VTextField', 'VTextarea', 'VSelect', 'VAutocomplete', 'FormDate', 'FormTime', 'FormDateTime', 'VCombobox', 'VRadio', 'VRadioInline', 'VCheckbox', 'VSwitch', 'MasterAutocomplete', 'Header', 'Separator', 'CustomCode'])
+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'])
+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 choiceOption = ref(['VSelect', 'VRadio', 'VRadioInline'])
 
@@ -128,25 +132,23 @@ const ruleOptions = (inputType: string) => (value: any) => {
               type="number"
             />
           </v-col>
-          <v-col cols="4">
+          <v-col cols="4" v-if="!notRequireLabel.includes(data.inputType)">
             <v-text-field
-              v-if="!notRequireLabel.includes(data.inputType)"
-              v-model="data.inputLabel"
-              label="Input Label"
-              :rules="[rules.require()]"
+                v-model="data.inputLabel"
+                label="Input Label"
+                :rules="[rules.require()]"
             />
           </v-col>
-          <v-col cols="4">
+          <v-col cols="4" v-if="!notRequireVariable.includes(data.inputType)">
             <v-text-field
-              v-if="!notRequireVariable.includes(data.inputType)"
-              v-model="data.variableName"
-              label="Variable Name"
-              :rules="[rules.require()]"
+                v-model="data.variableName"
+                label="Variable Name"
+                :rules="[rules.require()]"
             />
           </v-col>
           <v-col
-            v-if="data.inputType!='CustomCode'"
-            cols="12"
+              v-if="!notRequireOptions.includes(data.inputType)"
+              cols="12"
           >
             <v-textarea
               v-model="data.inputOptions"
@@ -179,9 +181,29 @@ const ruleOptions = (inputType: string) => (value: any) => {
             cols="12"
           >
             <FormCodeEditor
-              v-model="data.inputCustomCode"
-              label="Custom Code"
-              :rules="[rules.require()]"
+                v-model="data.inputCustomCode"
+                label="Custom Code"
+                :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-col>
         </v-row>
@@ -201,10 +223,18 @@ 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
-    v-else
-    v-model="modelValue"
+      v-else
+      v-model="modelValue"
   />
 </template>

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

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import {computed, defineExpose, ref, watchEffect} from 'vue'
+import {cloneDeep, isEqual} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+
+interface Props {
+  title?: string
+  initialData?: object
+  createCaption?: string
+  updateCaption?: string
+  cancelCaption?: string
+  showTitle?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  createCaption: 'Add',
+  updateCaption: 'Save',
+  cancelCaption: 'Cancel',
+  showTitle: false,
+})
+
+const isSaving = ref<boolean>(false)
+const formPadRef = ref()
+const formOriginalData = ref<object>()
+const formData = ref<object>({})
+
+const emit = defineEmits(['create', 'update'])
+
+function save() {
+  if (formPadRef.value.isValid) {
+    isSaving.value = true
+    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), callback)
+  }
+}
+
+function cancel() {
+  reset()
+}
+
+function reset() {
+  formOriginalData.value = undefined
+  loadFormData()
+}
+
+const callback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    reset()
+  },
+  error: function () {
+    isSaving.value = false
+  },
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formOriginalData.value))
+})
+
+const isCreating = computed(() => {
+  return !formOriginalData.value
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (formOriginalData.value) {
+    formData.value = cloneDeep(formOriginalData.value)
+  }
+  else {
+    formData.value = Object.assign({}, props.initialData)
+  }
+}
+
+watchEffect(loadFormData)
+
+function setOriginalData(originalData?: object) {
+  formOriginalData.value = originalData
+}
+
+defineExpose({setOriginalData,reset})
+</script>
+
+<template>
+  <VCard flat>
+    <VToolbar v-if="showTitle">
+      <VToolbarTitle>
+        <slot name="title">
+          {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+        </slot>
+      </VToolbarTitle>
+      <VSpacer />
+    </VToolbar>
+    <VCardText>
+      <form-pad
+          ref="formPadRef"
+          v-model="formData"
+          isolated
+      >
+        <template #default="slotData">
+          <slot
+              v-bind="slotData"
+              :is-creating="isCreating"
+              :is-data-change="isDataChange"
+          />
+        </template>
+      </form-pad>
+    </VCardText>
+    <VCardActions>
+      <slot name="action" :save="save" :cancel="cancel">
+        <VSpacer />
+        <VBtn
+            color="primary"
+            variant="flat"
+            :loading="isSaving"
+            :disabled="!isDataChange"
+            @click="save"
+        >
+          {{ (isCreating) ? createCaption : updateCaption }}
+        </VBtn>
+        <VBtn
+            color="error"
+            variant="flat"
+            :disabled="isSaving"
+            @click="cancel"
+        >
+          {{ cancelCaption }}
+        </VBtn>
+      </slot>
+    </VCardActions>
+  </VCard>
+</template>

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

@@ -70,8 +70,7 @@ const loadFormData = () => {
 watchEffect(loadFormData)
 
 watch(() => isShowing.value, (newValue) => {
-  if (!newValue) formPadRef.value.reset()
-  else loadFormData()
+  if (newValue) loadFormData()
 })
 </script>
 

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

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { uniqWith, isEqual } from 'lodash-es'
-import { ref, watch } from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import { useAlert } from '../../composables/alert'
+import {isEqual, uniqWith} from 'lodash-es'
+import {ref, watch} from 'vue'
+import {VTextField} from 'vuetify/components/VTextField'
+import {useAlert} from '../../composables/alert'
 
 const alert = useAlert()
 
 interface Base64String {
   base64String?: string
   fileName: string
+  originalFileName?: string
   id?: number
 }
 
@@ -16,22 +17,24 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props
   accept?: string
   multiple?: boolean
   maxSize?: number
-  modelValue?: Base64String[]
+  modelValue?: Base64String | Base64String[]
+  downloadable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   accept: '*',
   multiple: false,
   maxSize: 5,
+  downloadable: false
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Base64String[]): void
+  (e: 'update:modelValue', value: Base64String | Base64String[]): void
 }>()
 
 const allFiles = ref<File[]>([])
 const allAssets = ref<Base64String[]>([])
-const combinedBase64String = ref<Base64String[]>([])
+const combinedBase64String = ref<Base64String[] | Base64String>([])
 const fileInput = ref()
 
 function openWindowUpload() {
@@ -47,141 +50,172 @@ function addFiles(files: File | File[]) {
 
 function removeFileByIndex(i: number | string) {
   const index = Number(i)
-  if (Array.isArray(allFiles.value) && allFiles.value.length) {
-    if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
-  }
+  if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
 }
 
 function removeAssetByIndex(i: number | string) {
   const index = Number(i)
-  if (Array.isArray(allAssets.value) && allAssets.value.length) {
-    if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
-  }
+  if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
 }
 
 function fileToBase64(file: File) {
   const maxSize = props.maxSize * 1048576
 
   return new Promise<Base64String>((resolve, reject) => {
-    if (file.size > maxSize) reject (`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
+    if (file.size > maxSize) reject(`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
 
     const reader = new FileReader()
-    reader.onload = function (event) {
+    reader.onload = (event) => {
       resolve({ fileName: file.name, base64String: event.target?.result as string })
     }
-    reader.onerror = function (error) {
-      reject(error)
-    }
+    reader.onerror = reject
     reader.readAsDataURL(file)
   })
 }
 
-function base64ToFile(base64Data: string, filename: string) {
-  // Extract content type and base64 payload from the Base64 string
-  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/)
-  if (matchResult === null) {
-    return undefined
+function base64ToFile(base64Data: string, filename: string, defaultContentType: string = "application/octet-stream") {
+  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/);
+  let contentType: string;
+  let base64Payload: string;
+
+  if (matchResult) {
+    [contentType, base64Payload] = matchResult.slice(1)
+  } else {
+    contentType = defaultContentType
+    base64Payload = base64Data
   }
-  const [contentType, base64Payload] = matchResult.slice(1)
-
-  // Convert base64 to a Uint8Array
-  const binaryStr = atob(base64Payload)
-  const len = binaryStr.length
-  const bytes = new Uint8Array(len)
-  for (let i = 0; i < len; i++) {
-    bytes[i] = binaryStr.charCodeAt(i)
+
+  try {
+    const binaryStr = atob(base64Payload)
+    const bytes = new Uint8Array(binaryStr.length)
+    for (let i = 0; i < binaryStr.length; i++) {
+      bytes[i] = binaryStr.charCodeAt(i)
+    }
+    return new File([bytes], filename, { type: contentType });
+  } catch (error) {
+    console.error("Invalid base64 data", error);
+    return undefined;
   }
+}
+
+function downloadBase64File(base64Data: string, filename: string): void {
+  const file = base64ToFile(base64Data,filename)
 
-  return new File([bytes], filename, { type: contentType })
+  if (file) {
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(file);
+    link.download = filename;
+
+    // Append the link to the body temporarily and trigger the download
+    document.body.appendChild(link);
+    link.click();
+
+    // Cleanup
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+  }
 }
 
+
 watch(
-  () => props.modelValue,
-  () => {
-    if (props.modelValue && Array.isArray(props.modelValue)) {
-      allAssets.value = props.modelValue.filter((item: Base64String) => item.id !== undefined)
-      allFiles.value = props.modelValue.filter((item: Base64String) => item.id === undefined && item.base64String !== undefined).map((base64: Base64String) => base64ToFile(base64.base64String as string, base64.fileName)).filter((item: File | undefined) => item !== undefined) as File[]
-    }
-    else {
-      allAssets.value = []
-      allFiles.value = []
-    }
-  },
-  { deep: true, immediate: true },
+    () => props.modelValue,
+    () => {
+      if (Array.isArray(props.modelValue)) {
+        allAssets.value = props.modelValue.filter((item) => item.id !== undefined)
+        allFiles.value = props.modelValue
+            .filter((item) => item.id === undefined && item.base64String !== undefined)
+            .map((base64) => base64ToFile(base64.base64String as string, base64.fileName))
+            .filter((item) => item !== undefined) as File[]
+      } else if (props.modelValue) {
+        allAssets.value = props.modelValue.id !== undefined ? [props.modelValue] : []
+        allFiles.value =
+            props.modelValue.id === undefined && props.modelValue.base64String !== undefined
+                ? [base64ToFile(props.modelValue.base64String, props.modelValue.fileName)].filter(
+                    (item) => item !== undefined
+                ) as File[]
+                : []
+      } else {
+        allAssets.value = []
+        allFiles.value = []
+      }
+    },
+    { deep: true, immediate: true }
 )
 
 watch([allAssets, allFiles], () => {
-  if (allFiles.value && allFiles.value?.length) {
-    const base64Promises = allFiles.value?.map(file => fileToBase64(file))
-
-    Promise.all(base64Promises).then((base64Strings) => {
-      combinedBase64String.value = [...allAssets.value, ...base64Strings]
-    }).catch((error) => {
-      alert?.addAlert({ message: error, alertType: 'error' })
-      allFiles.value = []
-    })
-  }
-  else {
-    combinedBase64String.value = [...allAssets.value]
+  if (allFiles.value.length) {
+    const base64Promises = allFiles.value.map(fileToBase64)
+    Promise.all(base64Promises)
+        .then((base64Strings) => {
+          combinedBase64String.value = props.multiple
+              ? [...allAssets.value, ...base64Strings]
+              : base64Strings[0] || allAssets.value[0] || null
+        })
+        .catch((error) => {
+          alert?.addAlert({ message: error, alertType: 'error' })
+          allFiles.value = []
+        })
+  } else {
+    combinedBase64String.value = props.multiple
+        ? [...allAssets.value]
+        : allAssets.value[0] || null
   }
 }, { deep: true, immediate: true })
 
 watch(combinedBase64String, (newValue, oldValue) => {
   if (!isEqual(newValue, oldValue)) {
-    emit('update:modelValue', uniqWith(newValue, isEqual))
+    emit('update:modelValue', props.multiple ? uniqWith(newValue as Base64String[], isEqual) : newValue)
   }
 }, { deep: true })
 </script>
 
 <template>
   <v-text-field
-    v-bind="$attrs"
-    label="Upload files"
-    readonly
-    :dirty="combinedBase64String.length>0"
-    v-on="(combinedBase64String.length>0) ? {} : { click: openWindowUpload }"
+      v-bind="$attrs"
+      label="Upload files"
+      readonly
+      :dirty="Array.isArray(combinedBase64String) ? combinedBase64String.length > 0 : !!combinedBase64String"
+      v-on="Array.isArray(combinedBase64String) && combinedBase64String.length > 0 ? {} : { click: openWindowUpload }"
   >
     <template #default>
       <v-chip
-        v-for="(asset, index) in allAssets"
-        :key="asset"
-        color="green"
-        variant="flat"
-        closable
-        @click:close="removeAssetByIndex(index)"
+          v-for="(asset, index) in allAssets"
+          :key="asset.fileName"
+          color="green"
+          variant="flat"
+          closable
+          @click:close="removeAssetByIndex(index)"
       >
-        {{ asset.fileName }}
+        {{ asset.originalFileName || asset.fileName }}
+        <template #append v-if="downloadable">
+          <slot name="download" :item="asset">
+            <v-icon @click="downloadBase64File(asset.base64String || '',asset.originalFileName || asset.fileName)" v-if="asset.base64String">mdi mdi-download</v-icon>
+          </slot>
+        </template>
       </v-chip>
       <v-chip
-        v-for="(file, index) in allFiles"
-        :key="file"
-        color="primary"
-        variant="flat"
-        closable
-        @click:close="removeFileByIndex(index)"
+          v-for="(file, index) in allFiles"
+          :key="file.name"
+          color="primary"
+          variant="flat"
+          closable
+          @click:close="removeFileByIndex(index)"
       >
         {{ file.name }}
       </v-chip>
     </template>
 
-    <template
-      v-if="combinedBase64String.length>0 && props.multiple"
-      #append-inner
-    >
-      <VBtn
-        variant="text"
-        :icon="true"
-        @click="openWindowUpload"
-      >
+    <template v-if="props.multiple && Array.isArray(combinedBase64String) && combinedBase64String.length > 0" #append-inner>
+      <VBtn variant="text" :icon="true" @click="openWindowUpload">
         <v-icon>mdi mdi-plus</v-icon>
       </VBtn>
     </template>
   </v-text-field>
   <v-file-input
-    ref="fileInput"
-    :accept="props.accept"
-    :multiple="props.multiple"
-    style="display: none"
-    @update:model-value="addFiles"
+      ref="fileInput"
+      :accept="props.accept"
+      :multiple="props.multiple"
+      style="display: none"
+      @update:model-value="addFiles"
   />
 </template>

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

@@ -22,6 +22,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   insertable?: boolean
   searchable?: boolean
 
+  loading?: boolean
+
   viewSwitch?: boolean
   viewSwitchMultiple?: boolean
 
@@ -44,6 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
   insertable: true,
   searchable: true,
 
+  loading: false,
+
   viewSwitch: false,
   viewSwitchMultiple:false,
 
@@ -208,6 +212,7 @@ defineExpose({operation})
         :items="items"
         :item-value="modelKey"
         :search="search"
+        :loading="loading"
     >
       <template #default="defaultProps" v-if="viewType.includes('iterator')">
         <slot
@@ -244,7 +249,7 @@ defineExpose({operation})
           <v-container fluid>
             <v-row>
               <v-col
-                  v-for="key in computedSkeletonPerPage"
+                  v-for="key in itemsPerPage"
                   :key="key"
                   :cols="cols"
                   :sm="sm"
@@ -340,6 +345,7 @@ defineExpose({operation})
             color="primary"
             :items="items"
             :search="search"
+            :loading="loading"
             v-if="viewType.includes('table')"
         >
           <!-- @ts-ignore -->