@ramathibodi/nuxt-commons 0.1.50 → 0.1.51

package/dist/module.json

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

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

@@ -6,23 +6,23 @@ import type {FormDialogCallback} from '../../types/formDialog'
 interface Props {
   title?: string
   initialData?: object
-  createCaption?: string
-  updateCaption?: string
+  saveCaption?: string
   cancelCaption?: string
+  readonly?: boolean
   showTitle?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  createCaption: 'Add',
-  updateCaption: 'Save',
-  cancelCaption: 'Cancel',
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+  readonly: false,
   showTitle: false,
 })
 
 const isSaving = ref<boolean>(false)
 const formPadRef = ref()
-const formOriginalData = ref<object>()
 const formData = ref<object>({})
+const formDataOriginalValue = ref<object>()
 
 const emit = defineEmits(['create', 'update'])
 
@@ -38,7 +38,8 @@ function cancel() {
 }
 
 function reset() {
-  formOriginalData.value = undefined
+  formDataOriginalValue.value = undefined
+  formPadRef.value.reset()
   loadFormData()
 }
 
@@ -53,11 +54,11 @@ const callback: FormDialogCallback = {
 }
 
 const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formOriginalData.value))
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
 })
 
 const isCreating = computed(() => {
-  return !formOriginalData.value
+  return !formDataOriginalValue.value
 })
 
 const createOriginalValue = computed(() => {
@@ -65,69 +66,74 @@ const createOriginalValue = computed(() => {
 })
 
 const loadFormData = () => {
-  if (formOriginalData.value) {
-    formData.value = cloneDeep(formOriginalData.value)
+  if (formDataOriginalValue.value) {
+    formData.value = cloneDeep(formDataOriginalValue.value)
   }
   else {
     formData.value = Object.assign({}, props.initialData)
   }
 }
 
+const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
+
 watchEffect(loadFormData)
 
 function setOriginalData(originalData?: object) {
-  formOriginalData.value = originalData
+  formDataOriginalValue.value = originalData
 }
 
-defineExpose({setOriginalData,reset})
+defineExpose({setOriginalData,operation})
 </script>
 
 <template>
-  <VCard flat>
-    <VToolbar v-if="showTitle">
-      <VToolbarTitle>
-        <slot name="title">
-          {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+    <VCard flat>
+      <VToolbar v-if="showTitle">
+        <slot name="titleToolbar" :operation="operation">
+          <VToolbarTitle>
+            <slot name="title" :operation="operation">
+              {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+            </slot>
+          </VToolbarTitle>
         </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"
+      </VToolbar>
+      <VCardText>
+        <form-pad
+            ref="formPadRef"
+            v-model="formData"
+            :readonly="readonly"
+            isolated
         >
-          {{ cancelCaption }}
-        </VBtn>
-      </slot>
-    </VCardActions>
-  </VCard>
+          <template #default="slotData">
+            <slot
+                v-bind="slotData"
+                :is-creating="isCreating"
+                :is-data-change="isDataChange"
+            />
+          </template>
+        </form-pad>
+      </VCardText>
+      <VCardActions>
+        <slot name="action" :operation="operation">
+          <VSpacer />
+          <VBtn
+              color="primary"
+              variant="flat"
+              :loading="isSaving"
+              :disabled="!isDataChange"
+              @click="save"
+              v-if="!readonly"
+          >
+            {{ saveCaption }}
+          </VBtn>
+          <VBtn
+              color="error"
+              variant="flat"
+              :disabled="isSaving"
+              @click="cancel"
+          >
+            {{ cancelCaption }}
+          </VBtn>
+        </slot>
+      </VCardActions>
+    </VCard>
 </template>

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

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import {computed, ref, watchEffect} from 'vue'
+import {cloneDeep, isEqual} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+
+interface Props {
+  title?: string
+  initialData?: object
+  formData?: object
+  saveCaption?: string
+  cancelCaption?: string
+  readonly?: boolean
+  showTitle?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+  readonly: false,
+  showTitle: false,
+})
+
+const isSaving = ref<boolean>(false)
+const formPadRef = ref()
+const formData = ref<object>({})
+const formDataOriginalValue = 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() {
+  formDataOriginalValue.value = undefined
+  formPadRef.value.reset()
+  loadFormData()
+}
+
+const callback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+  },
+  error: function () {
+    isSaving.value = false
+  },
+  setData: function (item: object) {
+    formData.value = cloneDeep(item)
+    formDataOriginalValue.value = cloneDeep(item)
+  }
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, formDataOriginalValue.value))
+})
+
+const isCreating = computed(() => {
+  return !props.formData
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (props.formData) {
+    formData.value = cloneDeep(props.formData)
+    formDataOriginalValue.value = cloneDeep(props.formData)
+  }
+  else {
+    formData.value = Object.assign({}, props.initialData)
+  }
+}
+
+const operation = ref({ isDataChange, isCreating, isSaving, save, cancel })
+
+watchEffect(loadFormData)
+
+defineExpose({operation})
+</script>
+
+<template>
+  <VCard flat>
+    <VToolbar v-if="showTitle">
+      <slot name="titleToolbar" :operation="operation">
+        <VToolbarTitle>
+          <slot name="title" :operation="operation">
+            {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+          </slot>
+        </VToolbarTitle>
+      </slot>
+    </VToolbar>
+    <VCardText>
+      <form-pad
+          ref="formPadRef"
+          v-model="formData"
+          :readonly="readonly"
+          isolated
+      >
+        <template #default="slotData">
+          <slot
+              v-bind="slotData"
+              :is-creating="isCreating"
+              :is-data-change="isDataChange"
+          />
+        </template>
+      </form-pad>
+    </VCardText>
+    <VCardActions>
+      <slot name="action" :operation="operation">
+        <VSpacer />
+        <VBtn
+            color="primary"
+            variant="flat"
+            :loading="isSaving"
+            :disabled="!isDataChange"
+            @click="save"
+            v-if="!readonly"
+        >
+          {{ saveCaption }}
+        </VBtn>
+        <VBtn
+            color="error"
+            variant="flat"
+            :disabled="isSaving"
+            @click="cancel"
+        >
+          {{ cancelCaption }}
+        </VBtn>
+      </slot>
+    </VCardActions>
+  </VCard>
+</template>

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

@@ -26,7 +26,6 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   inputPadOnly?: boolean
   saveAndStay?: boolean
   stringFields?: Array<string>
-  items?: Record<string, any>[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -85,11 +84,6 @@ watch(items, (newValue) => {
   emit('update:modelValue', newValue)
 }, { deep: true })
 
-onMounted(()=>{
-  if (props.items){
-    items.value = props.items
-  }
-})
 
 function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
   if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {computed, onMounted, ref, useAttrs, watch} from 'vue'
+import {omit} from "lodash-es";
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string
+  modelValue?: Record<string, any>[]
+  modelKey?: string
+  toolbarColor?: string
+  items : Record<string, any>
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelKey: 'id',
+})
+
+const emit = defineEmits(['update:modelValue'])
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+})
+const modelValue = ref()
+const setDataItems = ()=>{
+  modelValue.value = props.items
+}
+watch(() => props.modelValue, (newValue) => {
+  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
+    modelValue.value = []
+  }
+  else {
+    let maxKey = 0
+
+    newValue.forEach((item) => {
+      if (!item.hasOwnProperty(props.modelKey)) {
+        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
+        item[props.modelKey] = maxKey + 1
+      }
+    })
+
+    modelValue.value = newValue
+  }
+}, { immediate: true })
+
+watch(modelValue, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+onMounted(()=>{
+  setDataItems()
+})
+
+</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>
+
+<style scoped>
+
+</style>

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

@@ -1,17 +1,13 @@
 <script lang="ts" setup>
-import { computed, ref, watchEffect } from 'vue'
-import { cloneDeep, isEqual } from 'lodash-es'
+import { computed, useTemplateRef } from 'vue'
 import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
+import EditPad from '../form/EditPad.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-interface Props {
-  title?: string
-  initialData?: object
-  saveCaption?: string
-  cancelCaption?: string
+interface Props extends /* @vue-ignore */ InstanceType<typeof EditPad['$props']> {
 }
 
 const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
@@ -25,92 +21,43 @@ const { item,
   createItem, updateItem,
   reload, isLoading } = useGraphqlModelItem(props)
 
-const formPadRef = ref()
-const formData = ref<object>({})
+const editPad = useTemplateRef<typeof EditPad>("editPadRef")
 
-const canSave = computed(() => { return (canCreate.value && isCreating.value) || canUpdate.value })
+const canSave = computed<boolean>(() => { return ((canCreate.value && editPad.value?.operation?.isCreating?.value) || canUpdate.value) as boolean})
 
-const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, item.value))
+const operation : any = computed(()=>{
+  return Object.assign({},editPad.value?.operation,{canSave,reload,item})
 })
 
-const isCreating = computed(() => {
-  return !item.value
-})
-
-const createOriginalValue = computed(() => {
-  return Object.assign({}, props.initialData)
-})
-
-const loadFormData = () => {
-  if (item.value) {
-    formData.value = cloneDeep(item.value)
-  }
-  else {
-    formData.value = Object.assign({}, props.initialData)
-  }
-}
-
-watchEffect(loadFormData)
-
-function save() {
-  if (formPadRef.value.isValid) {
-    if (isCreating.value) createItem(formData.value)
-    else updateItem(formData.value)
-  }
-}
-
-function cancel() {
-  formPadRef.value.reset()
-  loadFormData()
-}
-
-const operation = ref({save, cancel, reload, item, canSave, isLoading,isDataChange,isCreating})
-
-defineExpose({ save, cancel, reload, item, isLoading })
+defineExpose({ operation })
 </script>
 
 <template>
-  <VCard>
-    <VToolbar>
+  <FormEditPad :form-data="item" ref="editPadRef" @create="createItem" @update="updateItem">
+    <template #titleToolbar="slotData">
       <slot name="titleToolbar" :operation="operation">
         <VToolbarTitle>
           <slot name="title" :operation="operation">
             {{ title }}
             <v-icon
-              size="small"
-              @click="reload"
+                size="small"
+                @click="reload"
             >
               mdi mdi-refresh
             </v-icon>
           </slot>
         </VToolbarTitle>
       </slot>
-    </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>
+    </template>
+    <template #action="slotData">
       <slot name="action" :operation="operation">
         <VSpacer />
         <VBtn
             color="primary"
             variant="flat"
             :loading="isLoading"
-            :disabled="!isDataChange || !canSave"
-            @click="save"
+            :disabled="!slotData.operation?.isDataChange || !canSave"
+            @click="slotData.operation?.save"
         >
           {{ saveCaption }}
         </VBtn>
@@ -118,11 +65,18 @@ defineExpose({ save, cancel, reload, item, isLoading })
             color="error"
             variant="flat"
             :disabled="isLoading"
-            @click="cancel"
+            @click="slotData.operation?.cancel"
         >
           {{ cancelCaption }}
         </VBtn>
       </slot>
-    </VCardActions>
-  </VCard>
+    </template>
+    <template #default="slotData">
+      <slot
+          v-bind="slotData"
+          :is-creating="isCreating"
+          :is-data-change="isDataChange"
+      />
+    </template>
+  </FormEditPad>
 </template>

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

@@ -37,7 +37,7 @@ export function processTemplateFormTableData(item, parentTemplates) {
                               </template>`;
     }
   }
-  item.inputType = "FormTable";
+  item.inputType = "FormTableData";
   return processDefaultTemplate(item, tableTemplate, `title="${tableOptions.title}" 
                 :headers='${escapeObjectForInlineBinding(tableHeader)}' 
                 :items='${escapeObjectForInlineBinding(tableItems)}'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",