@ramathibodi/nuxt-commons 0.1.49 → 0.1.51

package/dist/module.json

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

package/dist/module.mjs

@@ -27,7 +27,7 @@ const module = defineNuxtModule({
       src: resolver.resolve("runtime/plugins/dialogManager"),
       mode: "client"
     });
-    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager"];
+    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission"];
     for (const file of typeFiles) {
       addTypeTemplate({
         src: resolver.resolve(`runtime/types/${file}.d.ts`),

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/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/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/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/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/components/model/Table.vue

@@ -4,8 +4,10 @@ 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,
@@ -24,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>(), {
@@ -39,6 +43,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   modelBy: undefined,
   fields: () => [],
   stringFields: ()=>[],
+  onlyOwnerEdit: false,
 })
 
 const attrs = useAttrs()
@@ -48,8 +53,15 @@ const plainAttrs = computed(() => {
   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,
@@ -59,6 +71,15 @@ 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
@@ -70,7 +91,16 @@ async function confirmDeleteItem(item: Record<string, any>, callback?: FormDialo
   if (confirm) deleteItem(item,callback)
 }
 
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+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)
@@ -188,14 +218,21 @@ 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"
@@ -253,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/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/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/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/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.49",
+  "version": "0.1.51",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",