@ramathibodi/nuxt-commons 0.1.47 → 0.1.49

package/dist/module.json

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

@@ -1,9 +1,11 @@
 <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 type {GraphqlModelProps} from '../../composables/graphqlModel'
+import type {FormDialogCallback} from "../../types/formDialog";
 
 defineOptions({
   inheritAttrs: false,
@@ -45,6 +47,7 @@ const plainAttrs = computed(() => {
   if (props.headers) returnAttrs['headers'] = props.headers
   return returnAttrs
 })
+
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
 
@@ -62,6 +65,11 @@ function openDialog(item?: object) {
   })
 }
 
+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 operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
 
 const computedInitialData = computed(() => {
@@ -191,7 +199,7 @@ defineExpose({ reload,operation })
           variant="flat"
           density="compact"
           icon="mdi mdi-delete"
-          @click="deleteItem(item)"
+          @click="confirmDeleteItem(item)"
         />
       </template>
     </v-data-table-server>
@@ -232,7 +240,7 @@ defineExpose({ reload,operation })
           variant="flat"
           density="compact"
           icon="mdi mdi-delete"
-          @click="deleteItem(item)"
+          @click="confirmDeleteItem(item)"
         />
       </template>
     </v-data-table>

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;
@@ -112,13 +115,27 @@ export function escapeObjectForInlineBinding(obj) {
 export function buildValidationRules(validationString) {
   validationString = validationString.replace(/^\[|]$/g, "").trim();
   if (!validationRulesRegex.test(validationString)) return "";
-  const rules = validationString.split(",").map((rule) => {
+  const rules = [];
+  let current = "";
+  let depth = 0;
+  for (let char of validationString) {
+    if (char === "," && depth === 0) {
+      if (current.trim()) rules.push(current.trim());
+      current = "";
+    } else {
+      if (char === "(") depth++;
+      if (char === ")") depth--;
+      current += char;
+    }
+  }
+  if (current.trim()) rules.push(current.trim());
+  const formatted = rules.map((rule) => {
     rule = rule.trim();
     if (!rule.startsWith("rules.")) rule = `rules.${rule}`;
     if (!/\(.+\)$/.test(rule)) rule += "()";
     return rule.replace(/"/g, "'");
   });
-  return `:rules="[${rules.join(",")}]"`;
+  return `:rules="[${formatted.join(",")}]"`;
 }
 export function processDefaultTemplate(item, insideTemplate, optionString, validationRules) {
   if (!validationRules) validationRules = item.validationRules ? buildValidationRules(item.validationRules) || "" : "";

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

@@ -5,5 +5,46 @@ import {
 } from "./template.js";
 export function processTemplateFormTable(item, parentTemplates) {
   let tableOptions = Object.assign({ title: item.inputLabel || "", formTemplate: "" }, item.inputOptions);
-  return processDefaultTemplate(item, `<template #form="{data,rules}">${useDocumentTemplate(tableOptions.formTemplate)}</template>`, `title="${tableOptions.title}" :headers='${escapeObjectForInlineBinding(tableOptions.headers || {})}'`);
+  let tableHeader = tableOptions.headers || [];
+  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/utils/validation.js

@@ -7,7 +7,7 @@ export function useRules() {
   const requireIf = (conditionIf, customError = "This field is required") => (value) => condition(!!value || value === false || value === 0 || !conditionIf, customError);
   const requireTrue = (customError = "This field must be true") => (value) => condition(!!value, customError);
   const requireTrueIf = (conditionIf, customError = "This field must be true") => (value) => condition(!!value || !conditionIf, customError);
-  const numeric = (customError = "This field must be a number") => (value) => condition(!value || !Number.isNaN(value), customError);
+  const numeric = (customError = "This field must be a number") => (value) => condition(!value || !isNaN(Number(value)), customError);
   const range = (minValue, maxValue, customError = `Value is out of range (${minValue}-${maxValue})`) => (value) => condition(!value || value >= minValue && value <= maxValue, customError);
   const integer = (customError = "This field must be an integer") => (value) => condition(!value || isInteger(value) || /^\+?-?\d+$/.test(value), customError);
   const unique = (data, fieldName, customError = "This field must be unique") => (value) => condition(!value || !data || !find(data, [fieldName, value]), customError);

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "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"
+  }
 }