@mythpe/quasar-ui-qui 0.1.19 → 0.1.21

package/src/components/datatable/MDatatable.vue

@@ -10,44 +10,15 @@
   lang="ts"
   setup
 >
-import type {
-  ApiServiceParams,
-  FetchRowsArgs,
-  MDatatableDialogsOptions,
-  MDatatableFilterForm,
-  MDatatableMetaServer,
-  MDatatableOptions,
-  MDatatablePagination,
-  MDatatableProps,
-  MDatatableScope,
-  MDtExportOptions,
-  MDtItem,
-  MDtItemIndex,
-  MDtMythApiServicesSchema
-} from '../../types'
-import type { AxiosRequestConfig } from 'axios'
+import type { MDatatableProps } from '../../types'
 import type { InvalidSubmissionHandler, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
-import { computed, nextTick, onMounted, reactive, ref, toRef, toValue, useSlots, watch } from 'vue'
+import { onMounted, ref, toValue, watch } from 'vue'
 import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import lodash from 'lodash'
-import { useRoute, useRouter } from 'vue-router'
-import { useMyth } from '../../composable'
+import { useDtHelpers, useMyth } from '../../composable'
 import { useI18n } from 'vue-i18n'
 
-const initPaginationOptions: MDatatablePagination = {
-  sortBy: undefined,
-  descending: undefined,
-  page: 1,
-  rowsPerPage: 50,
-  rowsNumber: 0
-}
-const initMetaServer: MDatatableMetaServer = {
-  current_page: null,
-  last_page: null,
-  total: null
-}
-
 type Props = {
   controlKey?: MDatatableProps['controlKey'];
   defaultItem?: MDatatableProps['defaultItem'];
@@ -175,115 +146,120 @@ const emit = defineEmits<Emits>()
 const {
   __,
   parseHeaders,
-  pascalCase,
-  pluralize,
   alertError,
-  confirmMessage,
   alertSuccess,
   scrollToElementFromErrors,
-  downloadFromResponse,
   props: pluginOptions,
   theme,
-  isSmall,
-  api
+  isSmall
 } = useMyth()
 
-const slots = useSlots()
-const router = useRouter()
-const route = useRoute()
 const $q = useQuasar()
 const { te } = useI18n({ useScope: 'global' })
-const defaultItem = computed(() => props.defaultItem)
-const getTableTitle = computed(() => {
-  if (props.title) {
-    if (te(props.title)) {
-      return __(props.title)
-    }
-    return __('replace.index', { name: __(props.title) })
-  }
-  return undefined
-})
 const useFormContext = useForm<any, any>()
-// const formScope = reactive(useFormContext)
-const { resetForm: resetDialogForm, setValues, handleSubmit } = useFormContext
-watch(() => props.defaultItem, (v) => {
-  resetDialogForm({ values: { ...v || {} } }, { force: !0 })
-}, { immediate: !0, deep: !0 })
-const resetVeeForm = async (attrs?: Record<string, any>) => {
-  const init: any = {}
-  for (const k in props.defaultItem) {
-    init[k] = attrs && k in attrs ? attrs[k] : props.defaultItem[k]
-  }
-  resetDialogForm({ values: init || {} }, { force: !0 })
-  attrs && setValues(attrs, !1)
-}
-const serviceName = computed(() => props.serviceName)
-const exportToBlob = computed(() => {
-  if (props.exportUrl === undefined && pluginOptions.value.datatable?.exportUrl === undefined) {
-    return !0
-  }
-  const t = props.exportUrl === undefined ? pluginOptions.value.datatable?.exportUrl : props.exportUrl
-  if (t !== undefined) {
-    if (t.toString() === 'true' || t.toString() === '') {
-      return !1
-    }
-    if (t.toString() === 'pdf') {
-      return 'excel'
-    }
-    if (t.toString() === 'excel') {
-      return 'pdf'
-    }
-  }
-  return !0
-})
+const { resetForm: resetDialogForm, handleSubmit } = useFormContext
+
+const {
+  onRowContextmenu,
+  getRowsPerPageOptions,
+  getShowSelection,
+  defaultTopBtnProps,
+  getProp,
+  getSlots,
+  onClickTopMenu,
+  getRows,
+  defaultItem,
+  getTableTitle,
+  showDialogModel,
+  formDialogModel,
+  dialogItem,
+  dialogItemIndex,
+  dialogErrors,
+  resetDialogs,
+  getHeaders,
+  visibleHeaders,
+  contextmenu,
+  selected,
+  onUpdateSelectedItems,
+  pagination,
+  search,
+  searchColumnsRef,
+  searchPlaceholder,
+  loading,
+  filterForm,
+  tempFilterForm,
+  hasAction,
+  fullscreen,
+  hasAddBtn,
+  hasUpdateBtn,
+  hasCloneBtn,
+  hasShowBtn,
+  hasDestroyBtn,
+  hasFilterDialog,
+  isUpdateMode,
+  isSingleSelectedItem,
+  hasSelectedItem,
+  getShowTitle,
+  getFormTitle,
+  isGrid,
+  getMythApiServicesSchema,
+  updateSelectedItems,
+  onScroll,
+  loadMore,
+  refreshNoUpdate,
+  refresh,
+  getRequestWith,
+  getDatatableParams,
+  fetchDatatableItems,
+  exportData,
+  openDialogTimeout,
+  openFilterDialog,
+  saveFilterDialog,
+  closeFilterDialog,
+  onRemoveFilter,
+  updateFilterOptions,
+  openShowDialogNoIndex,
+  openShowDialog,
+  closeShowDialog,
+  openUpdateDialogNoIndex,
+  openUpdateDialog,
+  openCreateDialog,
+  closeFormDialog,
+  ignoreKeysProps,
+  updateDatatableItem,
+  tableOptions,
+  removeDtItem,
+  onDeleteItem,
+  deleteSelectionItem,
+  logoutDatatable,
+  contextmenuItems,
+  datatableItemsScope,
+  onCloneItem,
+  imageDialog,
+  openImageDialog,
+  closeImageDialog
+} = useDtHelpers(() => props)
+
 // Prevent user from back
 /* router.beforeResolve(() => {
-  if (dialogs.filter) {
+  if (filterDialogModel.value) {
     closeFilterDialog()
     return !1
-  } else if (dialogs.show) {
+  } else if (showDialogModel.value) {
     closeShowDialog()
     return !1
-  } else if (dialogs.form) {
+  } else if (formDialogModel.value) {
     closeFormDialog()
     return !1
   }
   return !hasAction.value
 }) */
-const getRows = ref<MDtItem[]>([])
-watch(() => getRows.value, (v) => emit('update:rows', v), { deep: !0 })
-const filterDialogModel = ref(!1)
-const showDialogModel = ref(!1)
-const formDialogModel = ref(!1)
-const isUpdateDialog = ref(!1)
-const dialogItem = ref<MDtItem | undefined>(undefined)
-const dialogItemIndex = ref<MDtItemIndex | undefined>()
-const dialogErrors = ref<any>({})
-const dialogs = reactive<MDatatableDialogsOptions>({
-  filter: filterDialogModel,
-  show: showDialogModel,
-  form: formDialogModel,
-  isUpdate: isUpdateDialog,
-  item: dialogItem,
-  index: dialogItemIndex,
-  errors: dialogErrors
-})
-const resetDialogs = () => {
-  console.log('resetDialogs')
-  dialogs.filter = !1
-  dialogs.show = !1
-  dialogs.form = !1
-  dialogs.isUpdate = !1
-  dialogs.item = undefined
-  dialogs.index = undefined
-  dialogs.errors = {}
-}
 
-/** Table */
+watch(defaultItem, (v) => {
+  resetDialogForm({ values: { ...v || {} } }, { force: !0 })
+}, { immediate: !0, deep: !0 })
 
-/** --- */
-const getHeaders = computed<any[]>(() => parseHeaders(toValue(props.headers), { noSort: props.imageColumns }) || [])
-const visibleHeaders = ref<string[]>([])
+watch(() => getRows.value, (v) => emit('update:rows', v), { deep: !0 })
 watch([
   () => toValue(props.visibleColumns),
   () => toValue(props.headers)
@@ -293,19 +269,6 @@ watch([
   }
   visibleHeaders.value = v ? parseHeaders(v).map(e => e.name) : []
 }, { deep: !0, immediate: !0 })
-/** --- */
-
-const selected = ref<MDtItem[]>([])
-const onUpdateSelectedItems = () => {
-  if (contextmenu.value) {
-    contextmenu.value = !1
-  }
-}
-
-const meta = ref<MDatatableMetaServer>({ ...initMetaServer })
-const pagination = ref<MDatatablePagination>({ ...initPaginationOptions })
-const search = ref<string | null>(null)
-const searchColumnsRef = ref<string[]>([])
 watch([
   () => toValue(props.searchColumns),
   () => toValue(props.headers)
@@ -317,547 +280,6 @@ watch([
     .filter(e => e?.field !== props.controlKey)
     .map(e => e.name)
 }, { deep: !0, immediate: !0 })
-const searchPlaceholder = computed<string>(() => {
-  if (searchColumnsRef.value.length > 0) {
-    return __('myth.datatable.searchInputPlaceholder',
-      {
-        v: getHeaders.value.filter(e => e?.field !== props.controlKey && searchColumnsRef.value.indexOf(e.name) !== -1)
-          .map(e => e.label)
-          .join(', ')
-      })
-  }
-  return 'myth.datatable.searchInput'
-})
-const loading = ref<boolean>(!1)
-const filterForm = ref<MDatatableFilterForm>({})
-const tempFilterForm = ref<MDatatableFilterForm>({})
-const hasAction = ref<boolean>(!1)
-const fullscreen = ref(!1)
-const tableOptions = reactive<MDatatableOptions>({
-  search,
-  loading,
-  pagination,
-  meta,
-  filter: filterForm,
-  tempFilter: tempFilterForm,
-  selected,
-  hasAction,
-  fullscreen,
-  getHeaders,
-  visibleHeaders
-})
-/** Table */
-
-/** --- */
-/* const addListBtnComputed = computed(() => {
-  if (props.addListBtn !== undefined) {
-    return props.addListBtn
-  }
-  if (pluginOptions.value.datatable?.addListBtn !== undefined) {
-    return pluginOptions.value.datatable?.addListBtn
-  }
-  return !1
-}) */
-const hasAddBtn = computed<boolean>(() => {
-  if (props.hideAddBtn) {
-    return !1
-  }
-  return !!slots.form || !!props.storeRoute
-})
-const hasUpdateBtn = computed<boolean>(() => {
-  if (props.hideUpdateBtn) {
-    return !1
-  }
-  return !!slots.form || !!props.updateRoute || props.updateQueryParams
-})
-const hasCloneBtn = computed<boolean>(() => Boolean(props.cloneBtn))
-const hasShowBtn = computed<boolean>(() => {
-  if (props.hideShowBtn) {
-    return !1
-  }
-  return !!slots.show || !!props.showRoute || props.showQueryParams
-})
-const hasDestroyBtn = computed<boolean>(() => !props.hideDestroyBtn)
-const hasFilterDialog = computed<boolean>(() => !!slots.filter)
-/* const hasMenu = computed<boolean>(() => {
-  const pdf = props.pdf && getRows.value.length > 0
-  const excel = props.excel && getRows.value.length > 0
-  if (pdf || excel) {
-    return !0
-  }
-  return hasAddBtn.value && !!addListBtnComputed.value
-}) */
-
-const isUpdateMode = ref<boolean>(!1)
-const formMode = computed<'update' | 'store'>(() => isUpdateMode.value ? 'update' : 'store')
-const isSingleSelectedItem = computed<boolean>(() => selected.value.length === 1)
-const firstSelectedItem = computed(() => selected.value[0] as MDtItem)
-const hasSelectedItem = computed<boolean>(() => selected.value.length > 0)
-
-/* Titles */
-const getShowTitle = computed(() => {
-  if (serviceName.value && typeof serviceName.value !== 'function') {
-    const c = pascalCase(pluralize(serviceName.value.split('/').pop()))
-    return __('replace.show_details', { name: __(`choice.${c}`, 1) })
-  }
-  return __('show_details')
-})
-const getFormTitle = computed(() => {
-  const name = serviceName.value && typeof serviceName.value !== 'function' ? __(`choice.${pascalCase(pluralize(
-    serviceName.value.split(
-      '/').pop()))}`, 1) : ''
-  return __(`replace.${formMode.value}`, { name })
-})
-const isGrid = computed(() => {
-  if (props.grid !== undefined) {
-    return props.grid
-  }
-  return $q.screen.lt.md
-})
-/* Titles */
-
-/** Methods */
-const getMythApiServicesSchema = (): MDtMythApiServicesSchema => {
-  if (typeof serviceName.value === 'function') {
-    return serviceName.value() as MDtMythApiServicesSchema
-  }
-  const c = api.value.services[serviceName.value]
-  if (!c) {
-    throw Error(`No Service: ${serviceName.value}`)
-  }
-  return c
-}
-const updateSelectedItems = (items: MDtItem[]) => {
-  selected.value = items as any
-}
-const onScroll = ({ index, to }: any) => {
-  if (index && to && index === to) {
-    loadMore()
-  }
-}
-const loadMore = () => {
-  nextTick(() => {
-    fetchDatatableItems({
-      pagination: {
-        ...pagination.value,
-        page: (pagination.value.page ?? 0) + 1
-      },
-      filter: search.value
-    })
-  })
-}
-const refreshNoUpdate = (done?: () => void) => {
-  if (contextmenu.value) {
-    contextmenu.value = !1
-  }
-  meta.value = { ...initMetaServer }
-  pagination.value.page = 1
-  pagination.value.rowsNumber = 0
-  getRows.value = []
-  nextTick(() => {
-    fetchDatatableItems({
-      pagination: pagination.value,
-      filter: search.value
-    })
-    if (done) {
-      done()
-    }
-  })
-}
-const refresh = (done?: () => void) => refreshNoUpdate(done)
-const getRequestWith = (type: 'withIndex' | 'withShow' | 'withUpdate' | 'withStore'): string | null => {
-  let v: any = []
-  const params: { [k: string]: string } & string | (() => string | object) = props[type] as any
-  if (params) {
-    if (typeof params === 'string') {
-      v = params.split(',')
-    }
-
-    if (lodash.isArray(params)) {
-      v = [...params]
-    } else if (lodash.isObject(params) && typeof params !== 'function') {
-      let e
-      for (const k in params) {
-        e = params[k]
-        v.push(`${k}=${e}`)
-      }
-    } else if (lodash.isFunction(params)) {
-      const f = params()
-      v = typeof f === 'string' ? f.split(',') : f
-    }
-  }
-  return v.join(',') ?? null
-}
-const getDatatableParams = ({
-  pagination,
-  filter
-}: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
-  const headerItems = getHeaders.value.map((e: any) => e.name).join(',')
-  // console.log(headerItems)
-  let params: ApiServiceParams = {
-    headerItems,
-    indexType: 'index',
-    fdt: 'i',
-    itemsPerPage: pagination?.rowsPerPage === 0 ? -1 : (pagination?.rowsPerPage !== undefined ? pagination?.rowsPerPage : 0),
-    page: pagination?.page !== undefined ? pagination.page : 0,
-    sortBy: pagination?.sortBy !== undefined ? pagination.sortBy : undefined,
-    sortDesc: !pagination?.sortBy ? undefined : (pagination?.descending === !0 ? 1 : (pagination?.descending === !1 ? 0 : undefined))
-  }
-  if (filter) {
-    params.search = filter
-  }
-  if (Object.keys(filterForm.value).length > 0) {
-    const TempFilter = { ...filterForm.value } as any
-    for (const fKey in TempFilter) {
-      if (lodash.isArray(TempFilter[fKey])) {
-        TempFilter[fKey] = TempFilter[fKey].map((elm: any) => {
-          if (elm.id) {
-            return elm.id
-          } else if (elm.value) {
-            return elm.value
-          }
-          return elm
-        })
-      } else if (lodash.isPlainObject(TempFilter[fKey])) {
-        if (TempFilter[fKey].id) {
-          TempFilter[fKey] = TempFilter[fKey].id
-        } else if (TempFilter[fKey].value) {
-          TempFilter[fKey] = TempFilter[fKey].value
-        }
-      }
-    }
-    // console.log(JSON.stringify(filterForm.value))
-    // params.filter = filterForm.value
-    // console.log(TempFilter)
-    params.filter = TempFilter
-  }
-  if (searchColumnsRef.value.length > 0) {
-    params.searchColumns = searchColumnsRef.value.join(',')
-  }
-  if (props.requestParams) {
-    if (typeof props.requestParams === 'function') {
-      params = props.requestParams(params) as ApiServiceParams
-    } else {
-      params = {
-        ...params,
-        ...props.requestParams
-      }
-    }
-  }
-  return { ...params, ...merge }
-}
-const fetchDatatableItems = (opts: FetchRowsArgs = {}) => {
-  if (props.endReach && meta.value.last_page && pagination.value.page >= meta.value.last_page) {
-    return
-  }
-  if (loading.value || !serviceName.value) return
-  loading.value = !0
-  selected.value = []
-  nextTick(() => {
-    const params = getDatatableParams(opts)
-    const requestWith = getRequestWith('withIndex')
-    if (requestWith) {
-      params.requestWith = requestWith
-    }
-    // console.log({ params })
-    getMythApiServicesSchema().index({ params })
-      .then((result: any) => {
-        const { _data, _meta } = result
-        pagination.value = {
-          page: parseInt((_meta?.current_page || 1).toString()) || 1,
-          rowsPerPage: parseInt(_meta?.per_page) || 0,
-          rowsNumber: parseInt((_meta?.total || 0).toString()) || 0,
-          sortBy: opts?.pagination?.sortBy || undefined,
-          descending: opts?.pagination?.descending || undefined
-        }
-        _meta && (meta.value = _meta)
-        if (props.endReach) {
-          getRows.value = [...getRows.value, ...(_data || [])]
-        } else {
-          getRows.value = _data || []
-        }
-      })
-      .catch((e) => {
-        // console.log(e)
-        if (e?.response?.status === 401) {
-          logoutDatatable()
-          return e
-        }
-        if (e?._message) {
-          alertError(e._message)
-        } else if (e?.message) {
-          alertError(e.message)
-        }
-      })
-      .finally(() => {
-        loading.value = !1
-      })
-  })
-}
-const exportData = (type: MDtExportOptions) => {
-  if (loading.value) {
-    return
-  }
-  const ex = async () => {
-    loading.value = !0
-    const toBLob = exportToBlob.value === !0 || exportToBlob.value === type
-    const headerItems = getHeaders.value.filter(e => e?.field !== props.controlKey && visibleHeaders.value.indexOf(e.name) !== -1)
-    const data = getDatatableParams({
-      pagination: pagination.value,
-      filter: search.value
-    }, {
-      indexType: type,
-      fdt: 'e',
-      toUrl: toBLob === !0 ? !1 : exportToBlob.value !== type,
-      headerItems
-    })
-    if (selected.value.length > 0) {
-      data.ids = selected.value.map((e: any) => e.id)
-    }
-    // console.log(3)
-    const config: AxiosRequestConfig = {}
-    if (toBLob) {
-      config.responseType = 'blob'
-    }
-    getMythApiServicesSchema().export(data, config)
-      .then(async (response) => {
-        const { _message } = response || {}
-        _message && (alertSuccess(_message))
-        try {
-          await downloadFromResponse(response)
-        } catch (e: any) {
-          if (response.status === 200 && response.headers['content-type'] === 'application/json') {
-            return response
-          }
-          if (e?.code) {
-            alertError(__(`messages.${e.code}`))
-          } else if (e?.message) {
-            alertError(e.message)
-          }
-          console.log(e)
-        }
-        return response
-      })
-      .catch((e) => {
-        alertError(e?._message || e?.message || 'Error')
-      })
-      .finally(() => {
-        loading.value = !1
-      })
-  }
-  if (!selected.value.length) {
-    confirmMessage(__('messages.export_all')).onOk(() => ex())
-  } else {
-    ex()
-  }
-}
-/** Methods */
-
-const openDialogTimeout = 100
-/**
- * Filter Dialog
- */
-const openFilterDialog = () => {
-  resetDialogForm({ values: {}, errors: {} }, { force: !0 })
-  nextTick(() => {
-    tempFilterForm.value = { ...filterForm.value }
-    dialogs.filter = !0
-  })
-}
-const saveFilterDialog = () => {
-  dialogs.filter = !1
-  nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
-}
-const closeFilterDialog = () => {
-  dialogs.filter = !1
-  tempFilterForm.value = { ...filterForm.value }
-}
-const onRemoveFilter = (key: string | number) => {
-  const filter = filterForm.value
-  delete filter[key]
-  filterForm.value = { ...filter }
-  if (route.query[key]) {
-    const query = { ...route.query }
-    delete query[key]
-    router.push({ query })
-  }
-}
-const updateFilterOptions = (data: Record<string, any>) => {
-  filterForm.value = {
-    ...filterForm.value,
-    ...data
-  }
-}
-/**
- * Filter Dialog
- */
-
-/**
- * Show Dialog
- */
-const openShowDialogNoIndex = async (i: MDtItem) => {
-  const item = toRef(i)
-  const index = getRows.value.findIndex(e => e.id === item.value.id)
-  return openShowDialog(item.value, index)
-}
-const openShowDialog = async (i: MDtItem, index: MDtItemIndex) => {
-  const fdt = 's'
-  const item = toRef(i)
-  if (props.showQueryParams) {
-    router.push({ query: { ...route.query, id: item.value.id, fdt } })
-    return
-  }
-  if (props.showRoute) {
-    if (typeof props.showRoute === 'string') {
-      router.push({ name: props.showRoute, params: { id: item.value.id }, query: route.query })
-    } else {
-      router.push(props.showRoute)
-    }
-    return
-  }
-  if (loading.value) {
-    return
-  }
-  loading.value = !0
-  const params: any = { fdt }
-  if (getRequestWith('withShow')) {
-    params.requestWith = getRequestWith('withShow')
-  }
-
-  getMythApiServicesSchema().show(item.value.id, { params })
-    .then(({ _data }) => {
-      dialogs.item = _data
-      dialogs.index = index
-      getRows.value[index as any] = _data as any
-      nextTick(() => setTimeout(() => (selected.value = [getRows.value[index] as any]), openDialogTimeout))
-      setTimeout(() => (dialogs.show = !0), openDialogTimeout)
-    })
-    .catch((e: any) => {
-      const message = e?._message || e?.message
-      message && alertError(message)
-    })
-    .finally(() => (loading.value = !1))
-}
-const closeShowDialog = () => {
-  dialogs.show = !1
-  dialogs.item = undefined
-  dialogs.index = undefined
-}
-/**
- * Show Dialog
- */
-
-/**
- * Form Dialog
- */
-const updateRouteProp = computed(() => props.updateRoute)
-const openUpdateDialogNoIndex = (i: MDtItem) => {
-  const item = toRef(i)
-  const index = getRows.value.findIndex(e => e.id === item.value.id)
-  return openUpdateDialog(item.value, index)
-}
-const openUpdateDialog = (i: MDtItem, index: MDtItemIndex) => {
-  const fdt = 'u'
-  const item = { ...toValue(i) }
-  if (props.updateQueryParams) {
-    router.push({ query: { ...route.query, id: item.id, fdt } })
-    return
-  }
-  if (updateRouteProp.value) {
-    if (typeof updateRouteProp.value === 'string') {
-      router.push({ name: updateRouteProp.value, params: { id: item.id }, query: route.query })
-    } else {
-      router.push(updateRouteProp.value)
-    }
-    return
-  }
-  if (loading.value) {
-    return
-  }
-  loading.value = !0
-  isUpdateMode.value = !0
-  const params: any = { fdt }
-  if (getRequestWith('withUpdate')) {
-    params.requestWith = getRequestWith('withUpdate')
-  }
-  getMythApiServicesSchema().show(item.id, { params })
-    .then(({ _data }) => {
-      dialogs.item = _data
-      dialogs.index = index
-      if (_data) {
-        getRows.value[index] = { ..._data } as any
-        nextTick(() => setTimeout(() => (selected.value = [getRows.value[index] as any]), openDialogTimeout))
-      }
-      setTimeout(() => {
-        resetVeeForm(_data)
-        nextTick(() => {
-          dialogs.form = !0
-        })
-      }, openDialogTimeout)
-    })
-    .catch((e: any) => {
-      const message = e?._message || e?.message
-      message && alertError(message)
-    })
-    .finally(() => (loading.value = !1))
-}
-const openCreateDialog = (dtItem?: MDtItem) => {
-  const fdt = 'c'
-  if (props.storeQueryParams) {
-    router.push({ query: { ...route.query, id: undefined, fdt } })
-    return
-  }
-  if (props.storeRoute) {
-    if (typeof props.storeRoute === 'string') {
-      router.push({ name: props.storeRoute, query: route.query })
-    } else {
-      router.push(props.storeRoute)
-    }
-    return
-  }
-  isUpdateMode.value = !1
-  dialogs.item = { ...defaultItem.value, ...dtItem } as MDtItem
-  dialogs.index = undefined
-  setTimeout(() => {
-    resetVeeForm(dtItem)
-    dialogs.form = !0
-  }, openDialogTimeout)
-}
-const closeFormDialog = () => {
-  dialogs.form = !1
-  isUpdateMode.value = !1
-  dialogs.item = undefined
-  dialogs.index = undefined
-  setTimeout(() => resetVeeForm(), openDialogTimeout)
-}
-/**
- * Form Dialog
- */
-
-const updateDatatableItem = (i: MDtItem, index?: MDtItemIndex) => {
-  const item = { ...toValue(i) }
-  if (item) {
-    if (index !== undefined) {
-      getRows.value[index] = item
-    } else {
-      const findIndex = getRows.value.findIndex(e => parseInt(e.id?.toString?.() ?? '') === parseInt(item?.id?.toString?.() ?? ''))
-      if (findIndex >= 0) {
-        getRows.value[findIndex] = item
-      }
-    }
-    selected.value.length === 1 && updateSelectedItems([item])
-  }
-}
-const removeDtItem = (i: MDtItem | number) => {
-  const item = toRef<MDtItem | number>(i)
-  const id: string | number = typeof item.value !== 'object' ? item.value : item.value.id as string
-  if (typeof item.value !== 'object') {
-    getRows.value = getRows.value.filter((e, i) => i !== id)
-  } else {
-    getRows.value = getRows.value.filter((e) => parseInt(e.id?.toString() ?? '') !== parseInt(id.toString()))
-  }
-}
-const ignoreKeysProps = computed(() => props.ignoreKeys)
 
 const formDialogCartSection = ref<InstanceType<typeof QCardSection> | null>(null)
 const onSuccess: SubmissionHandler = async (form) => {
@@ -899,7 +321,7 @@ const onSuccess: SubmissionHandler = async (form) => {
       requestWith: getRequestWith(isUpdateMode.value ? 'withUpdate' : 'withStore') || undefined
     }
   }
-  const method = async () => isUpdateMode.value ? await apiServices.update(dialogs.item?.id || '',
+  const method = async () => isUpdateMode.value ? await apiServices.update(dialogItem.value?.id || '',
     form,
     _conf) : await apiServices.store(form, _conf)
   try {
@@ -908,7 +330,7 @@ const onSuccess: SubmissionHandler = async (form) => {
     if (_success) {
       if (isUpdateMode.value) {
         if (_data) {
-          updateDatatableItem(_data, dialogs.index)
+          updateDatatableItem(_data, dialogItemIndex.value)
         }
       } else {
         setTimeout(() => refresh(), openDialogTimeout)
@@ -918,7 +340,7 @@ const onSuccess: SubmissionHandler = async (form) => {
     }
   } catch (e: any) {
     const { _message, _errors } = e || {}
-    dialogs.errors = _errors || {}
+    dialogErrors.value = _errors || {}
     scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
     _message && alertError(_message)
     if (_errors) {
@@ -937,195 +359,7 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
 }
 const defaultSubmitItem = handleSubmit.withControlled(onSuccess, onInvalidSubmit)
 
-const hideAutoMessage = computed(() => props.hideAutoMessage)
-const onDeleteItem = (i: MDtItem, index: number) => {
-  const item = toRef(i)
-  if (loading.value || !item.value?.id) {
-    return
-  }
-  hasAction.value = !0
-  confirmMessage(__('messages.confirm_delete')).onOk(async () => {
-    loading.value = !0
-    try {
-      const { _message, _success } = await getMythApiServicesSchema().destroy(item.value.id)
-      if (!hideAutoMessage.value && _success && _message) {
-        _message && alertSuccess(_message)
-      }
-      if (_success) {
-        if (pagination.value.rowsNumber !== undefined) {
-          --pagination.value.rowsNumber
-          selected.value = []
-        }
-        removeDtItem(index)
-      }
-    } catch (e: any) {
-      e?._message && alertError(e._message)
-    } finally {
-      loading.value = !1
-    }
-  }).onDismiss(() => {
-    hasAction.value = !1
-  })
-}
-const deleteSelectionItem = () => {
-  if (!selected.value.length) return
-  if (loading.value || !selected.value.length) {
-    return
-  }
-  if (selected.value.length === 1) {
-    const dtItem = selected.value[0] as MDtItem
-    const index = getRows.value.findIndex((e: any) => parseInt(e.id) === parseInt(dtItem?.id?.toString() || ''))
-    return onDeleteItem(dtItem, index)
-  }
-  if (!props.multiDestroy) {
-    return
-  }
-  hasAction.value = !0
-  confirmMessage(__('messages.confirm_delete')).onOk(async () => {
-    loading.value = !0
-    try {
-      const {
-        _message,
-        _success
-      } = await getMythApiServicesSchema().destroyAll(selected.value.map((e: MDtItem) => e.id))
-      if (!hideAutoMessage.value && _success && _message) {
-        _message && alertSuccess(_message)
-      }
-      if (_success) {
-        refresh()
-      }
-    } catch (e: any) {
-      e?._message && alertError(e._message)
-    } finally {
-      loading.value = !1
-      nextTick()
-      selected.value = []
-    }
-  }).onDismiss(() => {
-    hasAction.value = !1
-  })
-}
-const logoutDatatable = () => {
-  //
-}
-/**
- * ---
- */
-
-/**
- * Dom
- */
-const contextmenu = ref(!1)
-const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | undefined) => {
-  e.preventDefault?.()
-  row = toValue(row)
-  if (index === dialogs.index) {
-    selected.value = []
-    dialogs.item = undefined
-    dialogs.index = undefined
-    if (contextmenu.value) {
-      contextmenu.value = !1
-    }
-    return
-  }
-  selected.value = [row]
-  dialogs.item = row
-  dialogs.index = index
-  if (isGrid.value) {
-    contextmenu.value = !0
-  }
-}
-const contextmenuItems = computed<any>(() => ([
-  {
-    name: 'show',
-    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
-    click: (item: MDtItem, index: MDtItemIndex) => {
-      openShowDialog(item, index)
-    },
-    showIf: hasShowBtn.value,
-    order: 100
-  },
-  {
-    name: 'clone',
-    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.clone' : undefined,
-    click: onCloneItem,
-    showIf: hasCloneBtn.value,
-    order: 200
-  },
-  {
-    name: 'update',
-    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.update' : undefined,
-    click: (item: MDtItem, index: MDtItemIndex) => {
-      openUpdateDialog(item, index)
-    },
-    showIf: hasUpdateBtn.value,
-    order: 300
-  },
-  {
-    name: 'destroy',
-    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.destroy' : undefined,
-    click: (item: MDtItem, index: MDtItemIndex) => {
-      selected.value = [item]
-      onDeleteItem(item, index)
-    },
-    showIf: hasDestroyBtn.value,
-    attr: {
-      color: 'negative'
-    },
-    order: 400
-  },
-  ...(props.contextItems || [])
-].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))))
-const onCloneItem = (item: MDtItem) => {
-  item = toValue(item)
-  confirmMessage()
-    .onOk(() => {
-      $q.loading.show()
-      getMythApiServicesSchema().clone(item.id)
-        .then(({ _message }) => {
-          _message && alertSuccess(_message)
-          refreshNoUpdate()
-        })
-        .catch(({ _message }) => {
-          _message && alertError(_message)
-        })
-        .finally(() => {
-          $q.loading.hide()
-        })
-    })
-}
-const endReach = computed<boolean>(() => Boolean(props.endReach))
-const rowsPerPageOptions = computed(() => props.rowsPerPageOptions)
-const getRowsPerPageOptions = computed<any[]>(() => endReach.value ? [0] : (rowsPerPageOptions.value || [0]))
-
-/**
- * Image Dialog Start.
- */
-const imageDialog = reactive<MDatatableScope['imageDialog']>({
-  value: !1,
-  src: undefined,
-  asAttachment: undefined
-})
-const openImageDialog = (src: string, opts?: { asAttachment?: boolean }) => {
-  imageDialog.src = src
-  imageDialog.asAttachment = opts?.asAttachment
-  nextTick(() => {
-    imageDialog.value = !0
-  })
-}
-const closeImageDialog = () => {
-  imageDialog.value = !1
-  nextTick(() => {
-    imageDialog.src = undefined
-    imageDialog.asAttachment = undefined
-  })
-}
-/**
- * Image Dialog End.
- */
-
 onMounted(() => refresh())
-
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
     if (v) {
@@ -1139,42 +373,15 @@ watch(loading, v => {
 watch([filterForm, () => $q.lang.nativeName], () => refreshNoUpdate(), { deep: !0 })
 watch(formDialogModel, (v) => {
   if (!v) {
-    dialogs.errors = {}
+    dialogErrors.value = {}
   }
 })
 
-const datatableItemsScope = reactive({
-  openShowDialog,
-  openShowDialogNoIndex,
-  closeShowDialog,
-  openUpdateDialog,
-  openUpdateDialogNoIndex,
-  openCreateDialog,
-  closeFormDialog,
-  onDeleteItem,
-  refresh,
-  refreshNoUpdate,
-  tableOptions,
-  isSingleSelectedItem,
-  firstSelectedItem,
-  updateDatatableItem,
-  updateSelectedItems,
-  imageDialog,
-  openImageDialog,
-  closeImageDialog
-})
-
-const getShowSelection = computed<boolean | undefined>(() => {
-  if (props.hideSelection) {
-    return !1
-  }
-  return props.showSelection
-})
-const defaultTopBtnProps: any = {
-  dense: !0,
-  flat: !0
-}
 const table = ref<InstanceType<typeof QTable>>()
+defineOptions({
+  name: 'MDatatable',
+  inheritAttrs: !1
+})
 defineExpose({
   resetDialogs,
   tableOptions,
@@ -1208,37 +415,6 @@ defineExpose({
   openImageDialog,
   closeImageDialog
 })
-
-const getProp = computed(() => (k: keyof Props) => {
-  if (props[k] !== undefined) {
-    return props[k]
-  }
-  if (pluginOptions.value.datatable?.[k] !== undefined) {
-    return pluginOptions.value.datatable?.[k]
-  }
-  return props[k]
-})
-const componentSlots = useSlots()
-const skipSlots = ['default', 'top', 'title']
-const getSlots = computed(() => {
-  const keys = Object.keys(componentSlots || {})
-  return keys.filter(e => !skipSlots.includes(e))
-})
-
-const onClickTopMenu = (item: any) => {
-  if (item.multiClick && selected.value.length > 1) {
-    item.multiClick(selected.value)
-    return
-  }
-
-  if (item.click) {
-    item.click(selected.value[0], 0)
-  }
-}
-defineOptions({
-  name: 'MDatatable',
-  inheritAttrs: !1
-})
 </script>
 
 <template>
@@ -1261,7 +437,7 @@ defineOptions({
       v-bind="pluginOptions.dt?.contextmenu?.menu"
     >
       <q-list
-        v-if="dialogs.item"
+        v-if="dialogItem"
         :separator="!isSmall"
         style="min-width: 280px;"
         v-bind="pluginOptions.dt?.contextmenu?.list"
@@ -1271,13 +447,13 @@ defineOptions({
           :key="i"
         >
           <MDtBtn
-            v-if="typeof contextmenuItem.showIf === 'function' ? contextmenuItem.showIf(dialogs.item,dialogs.index) : contextmenuItem.showIf"
+            v-if="typeof contextmenuItem.showIf === 'function' ? contextmenuItem.showIf(dialogItem,dialogItemIndex) : contextmenuItem.showIf"
             :[contextmenuItem.name]="!0"
             :dense="dense === undefined ? (theme.buttons.dense !== undefined ? theme.buttons.dense : pluginOptions.datatable?.dense) : dense"
             :label="contextmenuItem.contextLabel !== undefined ? (contextmenuItem.contextLabel === null ? undefined : __(contextmenuItem.contextLabel)) : __(contextmenuItem.label || contextmenuItem.name) "
             list-item
             v-bind="contextmenuItem.attr"
-            @click="contextmenuItem.click ? contextmenuItem.click(dialogs.item,dialogs.index) : undefined"
+            @click="contextmenuItem.click ? contextmenuItem.click(dialogItem,dialogItemIndex) : undefined"
           />
         </template>
       </q-list>
@@ -1308,13 +484,13 @@ defineOptions({
         v-bind="{
           virtualScroll: !0,
           wrapCells:!0,
-          ...pluginOptions.datatable,
-          ...$attrs,
+          ...pluginOptions.datatable as any,
+          ...$attrs as any,
           title: getTableTitle,
           bordered: bordered === undefined ? pluginOptions.datatable?.bordered : bordered,
           dense: dense === undefined ? ( theme.inputs.dense !== undefined ? theme.inputs.dense : pluginOptions.datatable?.dense) : dense,
           flat: flat === undefined ? pluginOptions.datatable?.flat : flat,
-        }"
+        } as any"
         @request="fetchDatatableItems"
         @update:selected="onUpdateSelectedItems"
         @virtual-scroll="endReach ? onScroll : undefined"
@@ -1508,7 +684,7 @@ defineOptions({
                   name="top-search"
                 />
                 <MInput
-                  v-if="!hideSearch && !dialogs.form"
+                  v-if="!hideSearch && !formDialogModel"
                   v-model="search"
                   :debounce="searchDebounce"
                   :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
@@ -1618,7 +794,9 @@ defineOptions({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
                   @click="exportData('pdf')"
                 >
-                  <q-tooltip>{{ __('myth.titles.exportPdf') }}</q-tooltip>
+                  <q-tooltip class="m--dt-btn-tooltip">
+                    {{ __('myth.titles.exportPdf') }}
+                  </q-tooltip>
                 </MDtBtn>
 
                 <!-- Export Excel-->
@@ -1629,7 +807,9 @@ defineOptions({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
                   @click="exportData('excel')"
                 >
-                  <q-tooltip>{{ __('myth.titles.exportExcel') }}</q-tooltip>
+                  <q-tooltip class="m--dt-btn-tooltip">
+                    {{ __('myth.titles.exportExcel') }}
+                  </q-tooltip>
                 </MDtBtn>
 
                 <!-- Filter dialog -->
@@ -1989,7 +1169,7 @@ defineOptions({
 
     <!-- Show Dialog -->
     <MDialog
-      v-model="dialogs.show"
+      v-model="showDialogModel"
       v-bind="pluginOptions.dt?.showDialogProps"
     >
       <q-card class="m--dialog-card">
@@ -2041,7 +1221,7 @@ defineOptions({
 
     <!-- Form Dialog -->
     <MDialog
-      v-model="dialogs.form"
+      v-model="formDialogModel"
       v-bind="pluginOptions.dt?.formDialogProps"
     >
       <div class="m--form__container full-height no-wrap">
@@ -2067,7 +1247,7 @@ defineOptions({
                   name="form-title"
                 >
                   <q-toolbar-title>
-                    <template v-if="loading && !dialogs.item">
+                    <template v-if="loading && !dialogItem">
                       <q-skeleton width="200px" />
                     </template>
                     <template v-else>
@@ -2101,7 +1281,7 @@ defineOptions({
               class="scroll m--datatable__dialog-form-container"
             >
               <MContainer
-                v-if="loading && !dialogs.item"
+                v-if="loading && !dialogItem"
                 :fluid="!1"
               >
                 <MRow