@ramathibodi/nuxt-commons 0.1.35 → 0.1.36

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.35",
+  "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/Table.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {VDataTable} from 'vuetify/components/VDataTable'
-import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch} from 'vue'
+import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch, useTemplateRef} from 'vue'
 import {omit} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 
@@ -20,6 +20,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   exportable?: boolean
   insertable?: boolean
   searchable?: boolean
+  inputPad?: boolean
+  inputPadOnly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -31,6 +33,8 @@ const props = withDefaults(defineProps<Props>(), {
   exportable: true,
   insertable: true,
   searchable: true,
+  inputPad: false,
+  inputPadOnly: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -153,11 +157,15 @@ function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallba
 }
 
 function openDialog(item?: object) {
-  currentItem.value = item
-  nextTick(() => {
-    isDialogOpen.value = true
-  })
+  if (props.inputPadOnly) inputPadRef.value?.setOriginalData(item)
+  else {
+    currentItem.value = item
+    nextTick(() => {
+      isDialogOpen.value = true
+    })
+  }
 }
+const inputPadRef = useTemplateRef("inputPadRef")
 
 const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
 
@@ -219,7 +227,7 @@ defineExpose({operation})
               :color="toolbarColor"
           />
           <VBtn
-              v-if="props.insertable"
+              v-if="props.insertable && !props.inputPadOnly"
               :color="toolbarColor"
               prepend-icon="mdi:mdi-plus"
               variant="flat"
@@ -282,6 +290,7 @@ defineExpose({operation})
         :form-data="currentItem"
         @create="createItem"
         @update="updateItem"
+        v-if="!props.inputPadOnly"
     >
       <template #default="slotData">
         <slot
@@ -291,4 +300,16 @@ defineExpose({operation})
       </template>
     </FormDialog>
   </v-card>
+  <slot name="inputPad" :operation="operation">
+    <v-sheet border rounded class="mt-1" v-if="inputPad">
+      <form-action-pad ref="inputPadRef" :title="props.title" @create="createItem" @update="updateItem" :initial-data="initialData">
+        <template #default="slotData">
+          <slot
+              name="form"
+              v-bind="slotData"
+          />
+        </template>
+      </form-action-pad>
+    </v-sheet>
+  </slot>
 </template>

package/dist/runtime/components/form/images/Field.vue

@@ -223,7 +223,7 @@ onMounted(() => {
             </VToolbar>
             <v-img
                 :src="image.data"
-                @click="() => { (readonly) ? openImageFullScreen(image) : setDataUpdate(image)}"
+                @click="() => { (props.readonly) ? openImageFullScreen(image) : setDataUpdate(image)}"
                 height="250"
             />
           </VCard>

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

@@ -53,6 +53,15 @@ function templateItemToString(item) {
     case "Header":
       templateString = `<div class="${optionString ? optionString.trim() : "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName}</div>`;
       break;
+    case "FormTable":
+      templateString = `<form-table v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${validationRules ? " " + validationRules.trim() : ""} ${item.inputAttributes ? " " + item.inputAttributes : ""}>${optionString ? " " + optionString.trim() : ""}
+                            <template #form>${item.inputFormTable}</template>
+                        </form-table>`;
+      break;
+    case "FormHidden":
+      templateString = `${item.inputOptions} / ${item.inputFormHidden} <form-hidden v-model="data.${item.variableName}" :item-value="${item.inputOptions ? item.inputOptions : "data"}" :hook="() => {${item.inputFormHidden}}">
+                        </form-hidden>`;
+      break;
     default:
       templateString = `<${item.inputType} v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}></${item.inputType}>`;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -115,5 +115,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }