@ramathibodi/nuxt-commons 0.1.48 → 0.1.50

package/dist/module.json

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

package/dist/module.mjs

@@ -9,10 +9,12 @@ const module = defineNuxtModule({
     }
   },
   // Default configuration options of the Nuxt module
-  defaults: {},
+  defaults: {
+    // default empty, will use fallback if not provided
+  },
   async setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url);
-    await addComponentsDir({
+    addComponentsDir({
       path: resolver.resolve("runtime/components"),
       pathPrefix: true,
       global: true
@@ -21,26 +23,22 @@ const module = defineNuxtModule({
     addPlugin({
       src: resolver.resolve("runtime/plugins/permission")
     });
-    addTypeTemplate({
-      src: resolver.resolve("runtime/types/modules.d.ts"),
-      filename: "types/modules.d.ts"
-    });
-    addTypeTemplate({
-      src: resolver.resolve("runtime/types/alert.d.ts"),
-      filename: "types/alert.d.ts"
-    });
-    addTypeTemplate({
-      src: resolver.resolve("runtime/types/menu.d.ts"),
-      filename: "types/menu.d.ts"
-    });
-    addTypeTemplate({
-      src: resolver.resolve("runtime/types/graphqlOperation.d.ts"),
-      filename: "types/graphqlOperation.d.ts"
-    });
-    addTypeTemplate({
-      src: resolver.resolve("runtime/types/formDialog.d.ts"),
-      filename: "types/formDialog.d.ts"
+    addPlugin({
+      src: resolver.resolve("runtime/plugins/dialogManager"),
+      mode: "client"
     });
+    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission"];
+    for (const file of typeFiles) {
+      addTypeTemplate({
+        src: resolver.resolve(`runtime/types/${file}.d.ts`),
+        filename: `types/${file}.d.ts`
+      });
+    }
+    const runtimeConfig = _nuxt.options.runtimeConfig.public["nuxt-commons"] || {};
+    _nuxt.options.runtimeConfig.public["nuxt-commons"] = {
+      ...runtimeConfig,
+      ..._options
+    };
   }
 });
 

package/dist/runtime/components/dialog/Host.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {shallowReactive, onMounted} from 'vue'
+import {useDialog} from "../../composables/dialog"
+import type {DialogOpenResult} from "../../types/dialogManager";
+
+interface DialogEntry {
+  id: number
+  component: any
+  props: Record<string, any>
+  resolve: (val: any) => void
+  reject: (val: any) => void
+}
+
+const dialogs = shallowReactive<DialogEntry[]>([])
+let idCounter = 0
+
+function open(component: any, inputProps: Record<string, any> = {}) : DialogOpenResult  {
+  const id = ++idCounter
+
+  const promise = new Promise<any>((resolve,reject) => {
+    const dialogProps = {
+      ...inputProps,
+      modelValue: true,
+      'onUpdate:modelValue': (v: boolean) => {
+        if (!v) close(id, null)
+      },
+      onResolve: (val: any) => close(id, val),
+      onReject: (val: any) => closeWithReject(id, val)
+    }
+
+    dialogs.push({
+      id,
+      component,
+      props: dialogProps,
+      resolve,
+      reject
+    })
+  })
+
+  const closeInstance = (val?: any) => {
+    close(id,val)
+  }
+
+  const rejectInstance = (val?: any) => {
+    closeWithReject(id,val)
+  }
+
+  return { id, promise, closeInstance, rejectInstance}
+}
+
+function close(id: number, val: any) {
+  const index = dialogs.findIndex((d) => d.id === id)
+  if (index !== -1) {
+    dialogs[index].resolve(val)
+    dialogs.splice(index, 1)
+  }
+}
+
+function closeWithReject(id: number, val: any) {
+  const index = dialogs.findIndex((d) => d.id === id)
+  if (index !== -1) {
+    dialogs[index].reject(val)
+    dialogs.splice(index, 1)
+  }
+}
+
+onMounted(() => {
+  useDialog()?.setDialogHost(open, close)
+})
+
+defineExpose({ open, close })
+</script>
+<template>
+  <Teleport to="body">
+    <div>
+      <component
+          v-for="dialog in dialogs"
+          :key="dialog.id"
+          :is="dialog.component"
+          v-bind="dialog.props"
+      />
+    </div>
+  </Teleport>
+</template>

package/dist/runtime/components/dialog/default/Confirm.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref, watch, computed, type Ref } from 'vue'
+import { isEqual, isUndefined, isEmpty } from 'lodash-es'
+
+interface DialogProps {
+  title?: string
+  modelValue: boolean
+  message?: string
+  buttonTrueText?: string
+  buttonFalseText?: string
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'error'
+  confirmData?: string
+  width?: string
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'Confirm',
+  message: 'Do you want to proceed?',
+  buttonTrueText: 'Ok',
+  buttonFalseText: 'Cancel',
+  type: 'primary',
+  width: 'auto',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'resolve', value: boolean): void
+  (e: 'reject', value: any): void
+}>()
+
+const dialogVisible: Ref<boolean> = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+
+watch(dialogVisible, (val) => {
+  if (!val) emit('update:modelValue', false)
+})
+
+const txtConfirm = ref<string>('')
+
+const isDisabled = computed(() => {
+  if (isUndefined(props.confirmData)) return false
+  if (isEmpty(props.confirmData)) return true
+  return !isEqual(txtConfirm.value, props.confirmData)
+})
+
+const handleResult = (result: boolean) => {
+  dialogVisible.value = false
+  emit('resolve', result) // emit back to dialog-manager
+}
+</script>
+
+<template>
+  <v-row justify="center">
+    <v-dialog
+        v-model="dialogVisible"
+        persistent
+        :width="props.width"
+    >
+      <v-card>
+        <v-toolbar
+            :color="props.type"
+            :title="props.title"
+        />
+        <v-card-text>{{ props.message }}</v-card-text>
+        <v-card-text v-if="props.confirmData">
+          <v-text-field
+              v-model="txtConfirm"
+              variant="underlined"
+          >
+            <template #label>
+              <slot
+                  name="labelTextConfirm"
+                  :text="props.confirmData"
+              />
+            </template>
+          </v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+              variant="text"
+              @click="handleResult(false)"
+          >
+            {{ props.buttonFalseText }}
+          </v-btn>
+          <v-btn
+              :color="props.type"
+              variant="text"
+              :disabled="isDisabled"
+              @click="handleResult(true)"
+          >
+            {{ props.buttonTrueText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>

package/dist/runtime/components/dialog/default/Loading.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface DialogProps {
+  modelValue: boolean
+  color?: string
+}
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps<DialogProps>()
+const dialogVisible = ref<boolean>(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+
+watch(() => dialogVisible.value, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialogVisible"
+      persistent
+      max-width="400"
+      class="rounded-xl"
+  >
+    <v-card :color="props.color || 'surface'" elevation="10" class="pa-4 rounded-xl">
+      <v-card-title class="text-h6 text-center">
+        <slot name="title">Please wait</slot>
+      </v-card-title>
+
+      <v-card-text class="text-center">
+        <v-progress-circular
+            indeterminate
+            size="40"
+            width="4"
+            color="primary"
+            class="mb-4"
+        />
+        <div>
+          <slot>Loading data, please wait...</slot>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>

package/dist/runtime/components/dialog/default/Notify.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { ref, watch, type Ref } from 'vue'
+
+interface DialogProps {
+  title?: string
+  modelValue: boolean
+  message?: string
+  buttonText?: string
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'error'
+  width?: string
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'Notice',
+  message: 'Something happened.',
+  buttonText: 'OK',
+  type: 'primary',
+  width: 'auto',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'resolve', value: boolean): void
+}>()
+
+const dialogVisible: Ref<boolean> = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+
+watch(dialogVisible, (val) => {
+  if (!val) emit('update:modelValue', false)
+})
+
+const handleClose = () => {
+  dialogVisible.value = false
+  emit('resolve', true)
+}
+</script>
+
+<template>
+  <v-row justify="center">
+    <v-dialog
+        v-model="dialogVisible"
+        persistent
+        :width="props.width"
+    >
+      <v-card>
+        <v-toolbar
+            :color="props.type"
+            :title="props.title"
+            density="compact"
+        />
+        <v-card-text class="text-body-2 text-center py-4">
+          {{ props.message }}
+        </v-card-text>
+        <v-card-actions class="justify-center">
+          <v-btn
+              :color="props.type"
+              variant="elevated"
+              @click="handleClose"
+          >
+            {{ props.buttonText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>

package/dist/runtime/components/dialog/default/Printing.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface DialogProps {
+  modelValue: boolean
+  color?: string
+}
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps<DialogProps>()
+const dialogVisible = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+
+watch(() => dialogVisible.value, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialogVisible"
+      persistent
+      max-width="320"
+      class="rounded-lg"
+  >
+    <v-card :color="props.color || 'surface'" class="pa-3 rounded-lg d-flex flex-column align-center">
+      <v-icon size="36" color="primary" class="mb-2">mdi mdi-printer</v-icon>
+      <div class="text-center text-body-2">
+        <slot>Preparing to print...</slot>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>

package/dist/runtime/components/dialog/default/VerifyUser.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import {computed, ref, type Ref, watch} from 'vue'
+import {useDialog} from "../../../composables/dialog"
+import {useGraphQlOperation} from "../../../composables/graphqlOperation";
+import {type AuthenticationState, useState} from '#imports'
+
+interface DialogProps {
+  title?: string
+  modelValue: boolean
+  message?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'error'
+  fixedUsername?: boolean | string
+  width?: string
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: 'Verify User',
+  message: 'Please enter your credentials to continue.',
+  confirmButtonText: 'Verify',
+  cancelButtonText: 'Cancel',
+  type: 'primary',
+  fixedUsername: true,
+  width: '400',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'resolve', value: string): void
+  (e: 'reject', value: any): void
+}>()
+
+const authenState = useState<AuthenticationState>("authentication")
+
+const dialogVisible: Ref<boolean> = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  dialogVisible.value = val
+})
+
+watch(dialogVisible, (val) => {
+  if (!val) emit('update:modelValue', false)
+})
+
+const username = ref<string>('')
+const password = ref<string>('')
+
+watch(()=>props.fixedUsername, (fixedUsername) => {
+  if (fixedUsername === true) {
+    let userProfile =  authenState.value?.userProfile as {username: string}
+    username.value = userProfile?.username ?? ""
+  } else {
+    username.value =  (fixedUsername) ? fixedUsername as string : ""
+  }
+},{immediate: true})
+
+const isDisabled = computed(() => {
+  return !username.value || !password.value
+})
+
+const verifyUser = async (username: string, password: string): Promise<boolean> => {
+  try {
+    let result: any = await useGraphQlOperation('Mutation',"verifyUser",["success"], {username: username, password: password})
+    return result.success
+  } catch (_error) {
+    return false
+  }
+}
+
+const handleConfirm = async () => {
+  const verified = await verifyUser(username.value, password.value)
+  if (verified) {
+    dialogVisible.value = false
+    emit('resolve', username.value)
+  } else {
+    useDialog().notify({message: "Invalid username or password",type: 'warning',title:"Error"})
+  }
+}
+
+const handleCancel = () => {
+  dialogVisible.value = false
+  emit('reject', 'User cancelled')
+}
+</script>
+
+<template>
+  <v-row justify="center">
+    <v-dialog
+        v-model="dialogVisible"
+        :width="props.width"
+        persistent
+    >
+      <v-card>
+        <v-toolbar
+            :color="props.type"
+            :title="props.title"
+            density="compact"
+        />
+        <v-card-text>
+          <div class="mb-2">{{ props.message }}</div>
+          <v-text-field
+              v-model="username"
+              :readonly="!!props.fixedUsername"
+              label="Username"
+              variant="underlined"
+          />
+          <v-text-field
+              v-model="password"
+              label="Password"
+              type="password"
+              variant="underlined"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="handleCancel">
+            {{ props.cancelButtonText }}
+          </v-btn>
+          <v-btn
+              :color="props.type"
+              :disabled="isDisabled"
+              variant="text"
+              @click="handleConfirm"
+          >
+            {{ props.confirmButtonText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>

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

@@ -143,6 +143,7 @@ const inputTypeChoice = ref([
   { label: 'File Upload', value: 'FormFile' },
   { label: 'Signature Pad', value: 'FormSignPad' },
   { label: 'Table', value: 'FormTable' },
+  { label: 'Table Data', value: 'FormTableData' },
   { label: '[Decoration] Header', value: 'Header' },
   { label: '[Decoration] Separator', value: 'Separator' },
   { label: '[Advanced] Hidden Field', value: 'FormHidden' },
@@ -150,7 +151,7 @@ const inputTypeChoice = ref([
   { label: '[Advanced] Custom Code', value: 'CustomCode' },
 ]);
 
-const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete','FormTable','DocumentForm','FormCheckboxGroup'])
+const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete','FormTable','FormTableData','DocumentForm','FormCheckboxGroup'])
 const notRequireVariable = ref(['Header', 'Separator', 'CustomCode','DocumentForm'])
 const notRequireLabel = ref(['Separator', 'CustomCode', 'FormFile', 'FormHidden','DocumentForm'])
 const notRequireWidth = ref(['Separator', 'FormHidden','DocumentForm'])
@@ -160,7 +161,7 @@ const notRequireInputAttributes = ref(['CustomCode','Header', 'FormHidden','Docu
 const notRequireColumnAttributes = ref(['Separator', 'FormHidden','DocumentForm'])
 const notRequireAdvancedSetting = ref(['Separator','CustomCode', 'FormHidden'])
 
-const hasSpecificOption = ref(['FormHidden','FormTable'])
+const hasSpecificOption = ref(['FormHidden','FormTable','FormTableData'])
 
 const choiceOption = ref(['VRadio', 'VRadioInline','VSelect', 'VAutocomplete', 'VCombobox','FormCheckboxGroup'])
 const inputOptionsLabel = ref<Record<string,string>>({
@@ -258,6 +259,112 @@ const ruleOptions = (inputType: string) => (value: any) => {
                 </v-row>
               </template>
             </form-pad>
+            <form-pad v-model="data.inputOptions" v-if="data.inputType=='FormTableData'">
+              <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>
+                      </template>
+                    </form-table>
+                  </v-col>
+                  <v-col cols="12">
+                    {{optionData}}
+                    <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 useFilter(optionData.headers,(item)=> item.template)" #[`item.${header.key}`]="{item}">
+                        <form-pad
+                                  :template="header.template"
+                                  v-model="item[header.key]">
+                        </form-pad>
+
+                      </template>
+                      <template  v-for="header of useFilter(optionData.headers,(item)=> item.headerTemplate)" #[`header.${header.key}`]="{item}">
+                        <form-pad
+                            :template="header.headerTemplate"
+                            >
+                        </form-pad>
+
+                      </template>
+
+                    </form-table>
+
+                  </v-col>
+                </v-row>
+              </template>
+
+            </form-pad>
             <form-pad v-model="data.inputOptions" v-if="data.inputType=='FormHidden'">
               <template #default="{data: optionData}">
                 <v-row dense>

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

@@ -13,6 +13,7 @@ interface Props {
   cancelCaption?: string
   closeCaption?: string
   saveAndStay?: boolean
+  readonly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   cancelCaption: 'ยกเลิก',
   closeCaption: 'ปิด',
   saveAndStay: false,
+  readonly: false,
 })
 
 const isShowing = defineModel<boolean>({ default: false })
@@ -125,6 +127,7 @@ watch(() => isShowing.value, (newValue) => {
         <form-pad
           ref="formPadRef"
           v-model="formData"
+          :readonly="readonly"
           isolated
         >
           <template #default="slotData">
@@ -145,6 +148,7 @@ watch(() => isShowing.value, (newValue) => {
               :loading="isSaving"
               :disabled="!isDataChange"
               @click="save"
+              v-if="!readonly"
           >
             {{ saveCaption }}
           </VBtn>

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

@@ -3,6 +3,7 @@ import {VDataTable} from 'vuetify/components/VDataTable'
 import {VInput} from 'vuetify/components/VInput'
 import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch, useTemplateRef} from 'vue'
 import {omit} from 'lodash-es'
+import {useDialog} from "../../composables/dialog"
 import type {FormDialogCallback} from '../../types/formDialog'
 
 defineOptions({
@@ -25,6 +26,7 @@ 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>(), {
@@ -83,6 +85,12 @@ 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
   else item[props.modelKey] = 1
@@ -155,14 +163,16 @@ function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallb
   if (callback) callback.done();
 }
 
-function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
+async function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
   const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
 
   if (index !== -1) {
-    items.value.splice(index, 1)
+    let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
+    if (confirm) {
+      items.value.splice(index, 1)
+      if (callback) callback.done()
+    }
   }
-
-  if (callback) callback.done()
 }
 
 function openDialog(item?: object) {

package/dist/runtime/components/master/Autocomplete.vue

@@ -102,7 +102,7 @@ const computedSortBy = computed(()=>{
     >
       <v-list-item
           v-bind="props"
-          :title="(showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)"
+          :title="item.title"
       />
     </template>
   </model-autocomplete>

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

@@ -97,11 +97,16 @@ watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
 const computedItems = computed(()=>{
   let sortByField = (!props.sortBy || typeof props.sortBy === "string") ?  [props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)] : props.sortBy
 
-  if (props.fuzzy && !isEmpty(searchData.value)) {
-    return items.value
-  } else {
-    return sortBy(items.value, sortByField)
-  }
+  const baseItems = props.fuzzy && !isEmpty(searchData.value)
+      ? items.value
+      : sortBy(items.value, sortByField)
+
+  return baseItems.map(item => ({
+    ...item,
+    [props.itemTitle]: props.showCode
+        ? `${item[props.itemValue]}-${item[props.itemTitle]}`
+        : item[props.itemTitle]
+  }))
 })
 </script>
 
@@ -126,14 +131,8 @@ const computedItems = computed(()=>{
           v-bind="((slotData || {}) as object)"
       />
     </template>
-    <template
-        v-if="!$slots.item"
-        #item="{ props, item }"
-    >
-      <v-list-item
-          v-bind="props"
-          :title="(showCode ? item.value+'-' : '')+item.title"
-      />
+    <template v-if="!$slots.item" #item="{ props, item }">
+      <v-list-item v-bind="props" :title="(item as Record<string, any>)[String(props.itemTitle)]" />
     </template>
     <template
         v-if="isErrorLoading"

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

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
-import { computed,watch, nextTick, ref, useAttrs } from 'vue'
-import { VDataTable } from 'vuetify/components/VDataTable'
-import { clone } from 'lodash-es'
-import type { GraphqlModelProps } from '../../composables/graphqlModel'
-import { useGraphqlModel } from '../../composables/graphqlModel'
+import {computed,watch, nextTick, ref, useAttrs} from 'vue'
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {clone} from 'lodash-es'
+import {useGraphqlModel} from '../../composables/graphqlModel'
+import {useDialog} from "../../composables/dialog"
+import {useUserPermission} from "../../composables/userPermission"
+import type {GraphqlModelProps} from '../../composables/graphqlModel'
+import type {FormDialogCallback} from "../../types/formDialog";
+import {type AuthenticationState, useState} from "#imports";
 
 defineOptions({
   inheritAttrs: false,
@@ -22,6 +26,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   search?: string
   saveAndStay?: boolean
   stringFields?: Array<string>
+  onlyOwnerEdit?: boolean
+  onlyOwnerOverridePermission?: string | string[]
 }
 
 const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
@@ -37,6 +43,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   modelBy: undefined,
   fields: () => [],
   stringFields: ()=>[],
+  onlyOwnerEdit: false,
 })
 
 const attrs = useAttrs()
@@ -45,8 +52,16 @@ const plainAttrs = computed(() => {
   if (props.headers) returnAttrs['headers'] = props.headers
   return returnAttrs
 })
+
+const authenState = useState<AuthenticationState>("authentication")
+const currentUsername = computed(()=>{
+  let userProfile =  authenState.value?.userProfile as {username: string}
+  return userProfile?.username ?? ""
+})
+
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
+const isDialogReadonly = ref<boolean>(false)
 
 const { items, itemsLength,
   search,setSearch,
@@ -56,13 +71,36 @@ const { items, itemsLength,
   isLoading } = useGraphqlModel(props)
 
 function openDialog(item?: object) {
+  isDialogReadonly.value = false
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+function openDialogReadonly(item?: object) {
+  isDialogReadonly.value = true
   currentItem.value = item
   nextTick(() => {
     isDialogOpen.value = true
   })
 }
 
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+async function confirmDeleteItem(item: Record<string, any>, callback?: FormDialogCallback) {
+  let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
+  if (confirm) deleteItem(item,callback)
+}
+
+const canEditRow = function (item: Record<string, any>) {
+  if (props.onlyOwnerEdit) {
+    if (item?.userstampField?.createdBy && item?.userstampField?.createdBy==currentUsername.value) return true
+    if (!!props.onlyOwnerOverridePermission && useUserPermission().check(props.onlyOwnerOverridePermission)) return true
+    return !item?.userstampField?.createdBy
+  }
+  return true
+}
+
+const operation = ref({ openDialog, openDialogReadonly, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, canEditRow, onlyOwnerEdit: props.onlyOwnerEdit, onlyOwnerOverridePermission: props.onlyOwnerOverridePermission })
 
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy)
@@ -180,18 +218,25 @@ defineExpose({ reload,operation })
         #item.action="{ item }"
       >
         <v-btn
-          v-if="canUpdate"
+            v-if="!canUpdate || !canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-search"
+            @click="openDialogReadonly(item)"
+        />
+        <v-btn
+          v-if="canUpdate && canEditRow(item)"
           variant="flat"
           density="compact"
           icon="mdi mdi-note-edit"
           @click="openDialog(item)"
         />
         <v-btn
-          v-if="canDelete"
+          v-if="canDelete && canEditRow(item)"
           variant="flat"
           density="compact"
           icon="mdi mdi-delete"
-          @click="deleteItem(item)"
+          @click="confirmDeleteItem(item)"
         />
       </template>
     </v-data-table-server>
@@ -232,7 +277,7 @@ defineExpose({ reload,operation })
           variant="flat"
           density="compact"
           icon="mdi mdi-delete"
-          @click="deleteItem(item)"
+          @click="confirmDeleteItem(item)"
         />
       </template>
     </v-data-table>
@@ -245,22 +290,29 @@ defineExpose({ reload,operation })
       @create="createItem"
       @update="updateItem"
       :saveAndStay="saveAndStay"
+      :readonly="isDialogReadonly"
     >
       <template #default="slotData">
         <slot
           name="form"
+          :tableItems="items"
+          :tableOperation="operation"
           v-bind="slotData"
         />
       </template>
       <template #title="slotData">
         <slot
             name="formTitle"
+            :tableItems="items"
+            :tableOperation="operation"
             v-bind="slotData"
         />
       </template>
       <template #action="slotData">
         <slot
             name="formAction"
+            :tableItems="items"
+            :tableOperation="operation"
             v-bind="slotData"
         />
       </template>

package/dist/runtime/composables/dialog.d.ts

@@ -0,0 +1 @@
+export declare const useDialog: () => import("../types/dialogManager").DialogPlugin;

package/dist/runtime/composables/dialog.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#app";
+export const useDialog = () => {
+  const { $dialog } = useNuxtApp();
+  return $dialog;
+};

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

@@ -1,4 +1,4 @@
-import { processTemplateFormTable } from "./templateFormTable.js";
+import { processTemplateFormTable, processTemplateFormTableData } from "./templateFormTable.js";
 import { processTemplateFormHidden } from "./templateFormHidden.js";
 import { some, includes } from "lodash-es";
 export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\))(,(require(?:\([^)]*\))?|requireIf\([^)]*\)|requireTrue(?:\([^)]*\))?|requireTrueIf\([^)]*\)|numeric(?:\([^)]*\))?|range\([^)]*\)|integer(?:\([^)]*\))?|unique\([^)]*\)|length(?:\([^)]*\))?|lengthGreater\([^)]*\)|lengthLess\([^)]*\)|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex\([^)]*\)|idcard(?:\([^)]*\))?|DateFuture(?:\([^)]*\))?|DatetimeFuture(?:\([^)]*\))?|DateHappen(?:\([^)]*\))?|DatetimeHappen(?:\([^)]*\))?|DateAfter\([^)]*\)|DateBefore\([^)]*\)|DateEqual\([^)]*\)))*$/;
@@ -52,10 +52,10 @@ function templateItemToString(item, parentTemplates) {
       templateString = item.inputCustomCode || "";
       break;
     case "VRadio":
-      templateString = `${item.inputLabel ? `<p class="opacity-60">${item.inputLabel}</p>` : ""} <v-radio-group v-model="data.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      templateString = `${item.inputLabel ? `<p class="opacity-60">${item.inputLabel}</p>` : ""} <v-radio-group ${item.inputAttributes?.trim()} v-model="data.${item.variableName || ""}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "VRadioInline":
-      templateString = `<v-radio-group v-model="data.${item.variableName || ""}" inline ${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend><span class="opacity-60">${item.inputLabel}</span></template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      templateString = `<v-radio-group ${item.inputAttributes?.trim()} v-model="data.${item.variableName || ""}" inline ${validationRules ? " " + validationRules.trim() : ""}>${item.inputLabel ? `<template #prepend><span class="opacity-60">${item.inputLabel}</span></template>` : ""}${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
       break;
     case "Separator":
       templateString = "</v-row><v-row dense>";
@@ -66,6 +66,9 @@ function templateItemToString(item, parentTemplates) {
     case "FormTable":
       templateString = processTemplateFormTable(item, parentTemplates);
       break;
+    case "FormTableData":
+      templateString = processTemplateFormTableData(item, parentTemplates);
+      break;
     case "FormHidden":
       templateString = processTemplateFormHidden(item, parentTemplates);
       break;

package/dist/runtime/composables/document/templateFormTable.d.ts

@@ -1,2 +1,3 @@
 import { type DocumentTemplateItem } from './template.js';
 export declare function processTemplateFormTable(item: DocumentTemplateItem, parentTemplates: string | string[]): string;
+export declare function processTemplateFormTableData(item: DocumentTemplateItem, parentTemplates: string | string[]): string;

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

@@ -9,3 +9,42 @@ export function processTemplateFormTable(item, parentTemplates) {
   if (!tableHeader.some((h) => h.key === "action")) tableHeader.push({ title: "Action", key: "action", width: "100px" });
   return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableHeader)}'`);
 }
+export function processTemplateFormTableData(item, parentTemplates) {
+  let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
+  let tableHeader = tableOptions.headers || [];
+  let tableItems = tableOptions.items || [];
+  let tableTemplate = "";
+  if (item.conditionalDisplay) {
+    item.inputAttributes = `${item.inputAttributes?.trim() || ""} v-if="${item.conditionalDisplay}"`.trim();
+  }
+  for (const header of tableHeader) {
+    const inputAttributes = header.conditionalDisplay ? `v-if="${header.conditionalDisplay}"`.trim() : "";
+    if (header.template) {
+      tableTemplate += `<template #item.${header.key}="{item}">
+                                <form-pad ${inputAttributes} template='${header.template}' v-model="item.${header.key}">
+                                </form-pad>
+                              </template>`;
+    }
+    if (header.headerTemplate) {
+      tableTemplate += `<template #header.${header.key}> 
+                                <form-pad ${inputAttributes} template='${header.headerTemplate}' 
+                                @update:model-value='(value) =>{
+                                                                    for (const t of data.${item.variableName}) {
+                                                                        t.${header.key} = {...value}
+                                                                        }
+                                                                   }'>
+                                </form-pad>
+                              </template>`;
+    }
+  }
+  item.inputType = "FormTable";
+  return processDefaultTemplate(item, tableTemplate, `title="${tableOptions.title}" 
+                :headers='${escapeObjectForInlineBinding(tableHeader)}' 
+                :items='${escapeObjectForInlineBinding(tableItems)}'
+                :insertable="false"
+                :importable="false"
+                :exportable="false"
+                :searchable="false"
+                hide-default-footer
+                `);
+}

package/dist/runtime/composables/userPermission.d.ts

@@ -0,0 +1 @@
+export declare const useUserPermission: () => unknown;

package/dist/runtime/composables/userPermission.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#app";
+export const useUserPermission = () => {
+  const { $permission } = useNuxtApp();
+  return $permission;
+};

package/dist/runtime/plugins/dialogManager.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/dialogManager.js

@@ -0,0 +1,72 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { h, render } from "vue";
+import DialogHost from "../components/dialog/Host.vue";
+import DialogDefaultConfirm from "../components/dialog/default/Confirm.vue";
+import DialogDefaultNotify from "../components/dialog/default/Notify.vue";
+import DialogDefaultLoading from "../components/dialog/default/Loading.vue";
+import DialogDefaultPrinting from "../components/dialog/default/Printing.vue";
+import DialogDefaultVerifyUser from "../components/dialog/default/VerifyUser.vue";
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const dialogComponents = {
+    confirmDialog: DialogDefaultConfirm,
+    notifyDialog: DialogDefaultNotify,
+    loadingDialog: DialogDefaultLoading,
+    printingDialog: DialogDefaultPrinting,
+    verifyUserDialog: DialogDefaultVerifyUser
+  };
+  let hostOpenFn = null;
+  let hostCloseFn = null;
+  const setDialogHost = (openFn, closeFn) => {
+    hostOpenFn = openFn;
+    hostCloseFn = closeFn;
+  };
+  const setDialogComponents = (components) => {
+    Object.assign(dialogComponents, components);
+  };
+  const open = (component, props = {}) => {
+    return hostOpenFn?.(component, props).promise ?? Promise.reject("No dialog host registered");
+  };
+  const openPromise = async (component, promiseInput, props = {}) => {
+    const dialogInstance = hostOpenFn?.(component, props);
+    try {
+      if (promiseInput instanceof Promise) {
+        return await promiseInput;
+      }
+      if (Array.isArray(promiseInput)) {
+        const promises = promiseInput.map((item) => {
+          if (typeof item === "function") {
+            try {
+              return Promise.resolve(item());
+            } catch (err) {
+              return Promise.reject(err);
+            }
+          } else {
+            return Promise.resolve(item);
+          }
+        });
+        return await Promise.all(promises);
+      }
+      try {
+        return await Promise.resolve(promiseInput());
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    } finally {
+      dialogInstance?.closeInstance();
+    }
+  };
+  const confirm = (props = {}) => open(dialogComponents.confirmDialog, props);
+  const notify = (props = {}) => open(dialogComponents.notifyDialog, props);
+  const verifyUser = (props = {}) => open(dialogComponents.verifyUserDialog, props);
+  const loading = async (promiseInput, props = {}) => openPromise(dialogComponents.loadingDialog, promiseInput, props);
+  const printing = async (promiseInput, props = {}) => openPromise(dialogComponents.printingDialog, promiseInput, props);
+  nuxtApp.hook("app:mounted", () => {
+    const el = document.createElement("div");
+    el.id = "__nuxt_dialog_host";
+    document.body.appendChild(el);
+    const vnode = h(DialogHost);
+    vnode.appContext = nuxtApp.vueApp._context;
+    render(vnode, el);
+  });
+  nuxtApp.provide("dialog", { open, confirm, notify, verifyUser, loading, printing, setDialogHost, setDialogComponents });
+});

package/dist/runtime/plugins/permission.js

@@ -1,21 +1,42 @@
 import { defineNuxtPlugin } from "nuxt/app";
 import { useAuthentication } from "#imports";
-export default defineNuxtPlugin(async (nuxtApp) => {
-  function permission(permissionId) {
-    if (!permissionId || useAuthentication()?.hasPermission(permissionId) === void 0) return true;
-    return useAuthentication()?.hasPermission(permissionId);
+export default defineNuxtPlugin((nuxtApp) => {
+  function normalize(input) {
+    if (!input) return [];
+    if (Array.isArray(input)) return input;
+    return [input];
+  }
+  function isBlank(input) {
+    if (!input) return true;
+    const arr = normalize(input);
+    return arr.length === 0 || arr.every((v) => v.trim() === "");
+  }
+  function check(permissionIds) {
+    if (isBlank(permissionIds)) return true;
+    const auth = useAuthentication();
+    const perms = normalize(permissionIds);
+    return perms.some((id) => auth?.hasPermission(id));
+  }
+  function checkAll(permissionIds) {
+    if (isBlank(permissionIds)) return true;
+    const auth = useAuthentication();
+    const perms = normalize(permissionIds);
+    return perms.every((id) => auth?.hasPermission(id));
   }
-  nuxtApp.vueApp.config.globalProperties.$permission = permission;
   nuxtApp.vueApp.directive("permission", (el, binding, vnode) => {
-    if (!permission(binding.value)) {
-      if (vnode) {
-        if (vnode.um?.length) {
-          vnode.um.forEach((um) => {
-            um();
-          });
-        }
-        if (el.parentElement) el.parentElement.removeChild(el);
-      }
+    if (!check(binding.value)) {
+      vnode?.um?.forEach?.((um) => um());
+      el.parentElement?.removeChild(el);
     }
   });
+  nuxtApp.vueApp.directive("permission-all", (el, binding, vnode) => {
+    if (!checkAll(binding.value)) {
+      vnode?.um?.forEach?.((um) => um());
+      el.parentElement?.removeChild(el);
+    }
+  });
+  nuxtApp.provide("permission", {
+    check,
+    checkAll
+  });
 });

package/dist/runtime/types/dialogManager.d.ts

@@ -0,0 +1,36 @@
+export interface DialogPlugin {
+    open: (component: any,props?: Record<string, any>) => Promise<any>
+    openPromise: (component: any, promiseInput: Promise<any> | (() => any | Promise<any>) | (Promise<any> | (() => any | Promise<any>))[], props?: Record<string, any>) => Promise<any | any[]>
+    confirm: (props?: Record<string, any>) => Promise<boolean>
+    notify: (props?: Record<string, any>) => Promise<boolean>
+    verifyUser: (props?: Record<string, any>) => Promise<boolean>
+    loading: <T>(promiseInput: Promise<any> | (() => any | Promise<any>) | (Promise<any> | (() => any | Promise<any>))[],props?: Record<string, any>) => Promise<any | any[]>
+    printing: <T>(promiseInput: Promise<any> | (() => any | Promise<any>) | (Promise<any> | (() => any | Promise<any>))[],props?: Record<string, any>) => Promise<any | any[]>
+    setDialogHost: (openFn: DialogOpenFn,closeFn: DialogCloseFn) => void
+    setDialogComponents: (components:object) => void
+}
+
+export interface DialogOpenResult<T = any> {
+    id: number
+    promise: Promise<T>
+    closeInstance: (value?: T) => void
+    rejectInstance: (value?: T) => void
+}
+
+export interface DialogOpenFn {
+    (component: any, props?: Record<string, any>): DialogOpenResult
+}
+
+export interface DialogCloseFn {
+    (id: number, value?: any): void
+}
+
+declare module '#app' {
+    interface NuxtApp {
+        $dialog: DialogPlugin
+    }
+
+    interface RuntimeNuxtApp {
+        $dialog: DialogPlugin
+    }
+}

package/dist/runtime/types/menu.d.ts

@@ -8,7 +8,7 @@ declare global {
   interface MenuMeta {
     title: string
     icon: string
-    role: string
+    role?: string
     image? : string
     active? : boolean
   }

package/dist/runtime/types/permission.d.ts

@@ -0,0 +1,14 @@
+export interface PermissionPlugin {
+    check: (permission: string | string[] | null | undefined) => boolean
+    checkAll: (permission: string | string[] | null | undefined) => boolean
+}
+
+declare module '#app' {
+    interface NuxtApp {
+        $permission: PermissionPlugin
+    }
+
+    interface RuntimeNuxtApp {
+        $permission: PermissionPlugin
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -116,6 +116,5 @@
     "typescript": "^5.8.2",
     "vitest": "^1.6.1",
     "vue-tsc": "^2.2.10"
-  },
-  "packageManager": "pnpm@9.15.9+sha512.68046141893c66fad01c079231128e9afb89ef87e2691d69e4d40eee228988295fd4682181bae55b58418c3a253bde65a505ec7c5f9403ece5cc3cd37dcf2531"
+  }
 }