@mythpe/quasar-ui-qui 0.0.47 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -167,7 +167,6 @@ interface Emits {
 
 const emit = defineEmits<Emits>()
 
-const $myth = useMyth()
 const {
   __,
   parseHeaders,
@@ -177,9 +176,12 @@ const {
   confirmMessage,
   alertSuccess,
   scrollToElementFromErrors,
-  downloadFromResponse
-} = $myth
-const { mOptions, api, themeInput, isSmall } = reactive($myth)
+  downloadFromResponse,
+  props: pluginOptions,
+  theme,
+  isSmall,
+  api
+} = useMyth()
 const slots = useSlots()
 const router = useRouter()
 const route = useRoute()
@@ -201,10 +203,10 @@ const resetVeeForm = async (attrs?: Record<string, any>) => {
 }
 const serviceName = computed(() => props.serviceName)
 const exportToBlob = computed(() => {
-  if (props.exportUrl === undefined && mOptions.datatable?.exportUrl === undefined) {
+  if (props.exportUrl === undefined && pluginOptions.value.datatable?.exportUrl === undefined) {
     return !0
   }
-  const t = props.exportUrl === undefined ? mOptions.datatable?.exportUrl : props.exportUrl
+  const t = props.exportUrl === undefined ? pluginOptions.value.datatable?.exportUrl : props.exportUrl
   if (t !== undefined) {
     if (t.toString() === 'true' || t.toString() === '') {
       return !1
@@ -320,8 +322,8 @@ const addListBtnComputed = computed(() => {
   if (props.addListBtn !== undefined) {
     return props.addListBtn
   }
-  if (mOptions.datatable?.addListBtn !== undefined) {
-    return mOptions.datatable?.addListBtn
+  if (pluginOptions.value.datatable?.addListBtn !== undefined) {
+    return pluginOptions.value.datatable?.addListBtn
   }
   return !1
 })
@@ -384,7 +386,7 @@ const getMythApiServicesSchema = (): MDtMythApiServicesSchema => {
   if (typeof serviceName.value === 'function') {
     return serviceName.value() as MDtMythApiServicesSchema
   }
-  const c = api[serviceName.value]
+  const c = api.value.services[serviceName.value]
   if (!c) {
     throw Error(`No Service: ${serviceName.value}`)
   }
@@ -880,7 +882,7 @@ const onSuccess: SubmissionHandler = async (form) => {
 const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
   const keys: (keyof typeof errors)[] = Object.keys(errors)
   if (keys[0]) {
-    const message = errors[keys[0]] as string || $myth.__('messages.the_given_data_was_invalid')
+    const message = errors[keys[0]] as string || __('messages.the_given_data_was_invalid')
     scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, '.m--datatable__dialog-form-container')
   }
 }
@@ -952,13 +954,7 @@ const deleteSelectionItem = () => {
   })
 }
 const logoutDatatable = () => {
-  // const { logout, removeStorage } = $myth.store.state.
-  // removeStorage()
-  // logout(window.push_token)
-  // const name = this.$routes.auth.login
-  // if (this.$route.name !== name) {
-  //   this.$router.replace({ name })
-  // }
+//
 }
 /**
  * ---
@@ -993,7 +989,7 @@ const contextmenuItems = computed<any>(() => ([
   ...(contextmenuItemsProp.value || []).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
   {
     name: 'show',
-    label: mOptions?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
+    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
     click: (item: MDtItem, index: MDtItemIndex) => {
       openShowDialog(item, index)
     },
@@ -1001,7 +997,7 @@ const contextmenuItems = computed<any>(() => ([
   },
   {
     name: 'update',
-    label: mOptions?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.update' : undefined,
+    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.update' : undefined,
     click: (item: MDtItem, index: MDtItemIndex) => {
       openUpdateDialog(item, index)
     },
@@ -1009,7 +1005,7 @@ const contextmenuItems = computed<any>(() => ([
   },
   {
     name: 'destroy',
-    label: mOptions?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.destroy' : undefined,
+    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.destroy' : undefined,
     click: (item: MDtItem, index: MDtItemIndex) => {
       selected.value = [item]
       onDeleteItem(item, index)
@@ -1053,7 +1049,7 @@ const closeImageDialog = () => {
 onMounted(() => refresh())
 
 watch(loading, v => {
-  if (mOptions?.dt?.useQuasarLoading) {
+  if (pluginOptions.value?.dt?.useQuasarLoading) {
     if (v) {
       $q.loading.show()
     } else {
@@ -1140,8 +1136,8 @@ const getProp = computed(() => (k: keyof Props) => {
   if (props[k] !== undefined) {
     return props[k]
   }
-  if (mOptions.datatable?.[k] !== undefined) {
-    return mOptions.datatable?.[k]
+  if (pluginOptions.value.datatable?.[k] !== undefined) {
+    return pluginOptions.value.datatable?.[k]
   }
   return props[k]
 })
@@ -1161,9 +1157,9 @@ defineOptions({
   <div
     :class="{
       'm--datatable-component': !0,
-      'm--datatable-component__fixed': fixed === undefined ? ( mOptions.datatable?.fixed === undefined ? undefined : mOptions.datatable?.fixed) : fixed,
+      'm--datatable-component__fixed': fixed === undefined ? ( pluginOptions.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
       'm--datatable-component__too_small': $q.screen.height < 900,
-      'm--datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!mOptions.datatable?.addFabBtn : addFabBtn)
+      'm--datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
     }"
   >
     <!-- Context Menu -->
@@ -1173,14 +1169,14 @@ defineOptions({
       context-menu
       position="standard"
       touch-position
-      v-bind="mOptions.dt?.contextmenu?.menu"
+      v-bind="pluginOptions.dt?.contextmenu?.menu"
       @hide="resetDialogs()"
     >
       <q-list
         v-if="dialogs.item"
         :separator="!isSmall"
         style="min-width: 280px;"
-        v-bind="mOptions.dt?.contextmenu?.list"
+        v-bind="pluginOptions.dt?.contextmenu?.list"
       >
         <template
           v-for="(contextmenuItem,i) in contextmenuItems"
@@ -1189,7 +1185,7 @@ defineOptions({
           <MDtBtn
             v-if="typeof contextmenuItem.showIf === 'function' ? contextmenuItem.showIf(dialogs.item,dialogs.index) : contextmenuItem.showIf"
             :[contextmenuItem.name]="!0"
-            :dense="dense === undefined ? (themeInput.dense !== undefined ? themeInput.dense : mOptions.datatable?.dense) : dense"
+            :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"
@@ -1225,11 +1221,11 @@ defineOptions({
         v-bind="{
           virtualScroll: !0,
           wrapCells:!0,
-          ...mOptions.datatable,
+          ...pluginOptions.datatable,
           ...$attrs,
-          bordered: bordered === undefined ? mOptions.datatable?.bordered : bordered,
-          dense: dense === undefined ? ( themeInput.dense !== undefined ? themeInput.dense : mOptions.datatable?.dense) : dense,
-          flat: flat === undefined ? mOptions.datatable?.flat : flat,
+          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,
         }"
         @request="fetchDatatableItems"
         @update:selected="onUpdateSelectedItems"
@@ -1292,7 +1288,7 @@ defineOptions({
                     :key="col.name"
                   >
                     <MRow
-                      v-if="col.name !== controlKey || (col.name === controlKey && ( showCardControlHeader === undefined ? mOptions.datatable?.showCardControlHeader : showCardControlHeader ))"
+                      v-if="col.name !== controlKey || (col.name === controlKey && ( showCardControlHeader === undefined ? pluginOptions.datatable?.showCardControlHeader : showCardControlHeader ))"
                       class="justify-between"
                     >
                       <MCol
@@ -1409,13 +1405,13 @@ defineOptions({
                   v-if="!hideSearch && !dialogs.form"
                   v-model="tableOptions.search"
                   :debounce="searchDebounce"
-                  :dense="dense === undefined ? (mOptions.datatable?.dense !== undefined ? mOptions.datatable?.dense : !0) : dense"
+                  :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
                   :placeholder="searchPlaceholder"
                   autocomplete="none"
                   col="12"
                   name="search"
                   outlined
-                  v-bind="mOptions.dt?.searchInput?.props"
+                  v-bind="pluginOptions.dt?.searchInput?.props"
                 >
                   <template #prepend>
                     <q-icon
@@ -1440,16 +1436,16 @@ defineOptions({
                   <template #after>
                     <q-btn
                       :aria-label="__('menu')"
-                      :icon="mOptions.dt?.searchInput?.optionsIcon || 'ion-ios-options'"
+                      :icon="pluginOptions.dt?.searchInput?.optionsIcon || 'ion-ios-options'"
                       dense
                       flat
                       round
-                      v-bind="mOptions.dt?.searchInput?.menuBtn"
+                      v-bind="pluginOptions.dt?.searchInput?.menuBtn"
                     >
                       <MModalMenu
                         :offset="[10,10]"
                         no-close-btn
-                        v-bind="mOptions.dt?.searchInput?.menuProps as any"
+                        v-bind="pluginOptions.dt?.searchInput?.menuProps as any"
                       >
                         <q-toolbar>
                           <q-toolbar-title>
@@ -1511,23 +1507,23 @@ defineOptions({
                   :disable="tableOptions.loading"
                   icon="ion-ios-options"
                   tooltip="myth.datatable.hints.more"
-                  v-bind="{...defaultTopBtnProps,...mOptions.dt?.buttons?.more}"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.more}"
                 >
                   <MModalMenu
                     :offset="[10,10]"
                     position="top"
-                    v-bind="mOptions.dt?.buttons?.moreMenu as any"
+                    v-bind="pluginOptions.dt?.buttons?.moreMenu as any"
                   >
                     <q-list
                       style="min-width: 250px"
-                      v-bind="mOptions.dt?.buttons?.moreList"
+                      v-bind="pluginOptions.dt?.buttons?.moreList"
                     >
                       <!-- Add Btn -->
                       <q-item
                         v-if="hasAddBtn && !!addListBtnComputed"
                         v-close-popup
                         clickable
-                        v-bind="mOptions.dt?.buttons?.moreItem"
+                        v-bind="pluginOptions.dt?.buttons?.moreItem"
                         @click="openCreateDialog()"
                       >
                         <q-item-section thumbnail>
@@ -1546,7 +1542,7 @@ defineOptions({
                         v-if="pdf"
                         v-close-popup
                         clickable
-                        v-bind="mOptions.dt?.buttons?.moreItem"
+                        v-bind="pluginOptions.dt?.buttons?.moreItem"
                         @click="exportData('pdf')"
                       >
                         <q-item-section thumbnail>
@@ -1573,7 +1569,7 @@ defineOptions({
                         v-if="excel"
                         v-close-popup
                         clickable
-                        v-bind="mOptions.dt?.buttons?.moreItem"
+                        v-bind="pluginOptions.dt?.buttons?.moreItem"
                         @click="exportData('excel')"
                       >
                         <q-item-section thumbnail>
@@ -1597,10 +1593,10 @@ defineOptions({
                         </q-item-section>
                       </q-item>
                       <q-item
-                        v-if="fullscreenBtn === undefined ? ( !!mOptions.datatable?.fullscreenBtn) : fullscreenBtn"
+                        v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
                         v-close-popup
                         clickable
-                        v-bind="mOptions.dt?.buttons?.moreItem"
+                        v-bind="pluginOptions.dt?.buttons?.moreItem"
                         @click="tableOptions.fullscreen = !tableOptions.fullscreen"
                       >
                         <q-item-section thumbnail>
@@ -1622,13 +1618,13 @@ defineOptions({
                   key="filter-selection-btn"
                   icon="o_filter_alt"
                   tooltip="myth.datatable.hints.filter"
-                  v-bind="{...defaultTopBtnProps,...mOptions.dt?.buttons?.filter}"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
                   @click="openFilterDialog()"
                 >
                   <MModalMenu
                     no-close-btn
                     persistent
-                    v-bind="mOptions.dt?.filterDialogProps"
+                    v-bind="pluginOptions.dt?.filterDialogProps"
                   >
                     <q-card
                       :style="$q.screen.gt.sm?`width: ${Math.ceil($q.screen.width/2)}px` : undefined"
@@ -1665,7 +1661,7 @@ defineOptions({
                                 :label="__('myth.datatable.filter.cancel')"
                                 color="negative"
                                 flat
-                                v-bind="mOptions.dt?.dialogButtonsProps"
+                                v-bind="pluginOptions.dt?.dialogButtonsProps"
                                 @click="closeFilterDialog"
                               />
                               <MBtn
@@ -1673,7 +1669,7 @@ defineOptions({
                                 :label="__('myth.datatable.filter.save')"
                                 color="positive"
                                 flat
-                                v-bind="mOptions.dt?.dialogButtonsProps"
+                                v-bind="pluginOptions.dt?.dialogButtonsProps"
                                 @click="saveFilterDialog"
                               />
                             </MRow>
@@ -1690,17 +1686,17 @@ defineOptions({
                   :disable="tableOptions.loading"
                   icon="ion-ios-refresh"
                   tooltip="myth.datatable.hints.refresh"
-                  v-bind="{...defaultTopBtnProps,...mOptions.dt?.buttons?.refresh}"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh}"
                   @click="refreshNoUpdate()"
                 />
                 <!--Fullscreen-->
                 <MDtBtn
-                  v-if="fullscreenBtn === undefined ? ( !!mOptions.datatable?.fullscreenBtn) : fullscreenBtn"
+                  v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
                   key="fullscreen-selection-btn"
                   :disable="tableOptions.loading"
                   :icon="tableOptions.fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
-                  :tooltip="`$myth.datatable.${tableOptions.fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
-                  v-bind="{...defaultTopBtnProps,...mOptions.dt?.buttons?.fullscreen}"
+                  :tooltip="`myth.datatable.${tableOptions.fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen}"
                   @click="tableOptions.fullscreen = !tableOptions.fullscreen"
                 />
 
@@ -1711,7 +1707,7 @@ defineOptions({
                     :disable="tableOptions.loading"
                     icon="ion-ios-create"
                     update
-                    v-bind="{...defaultTopBtnProps,...mOptions.dt?.topSelection?.btn}"
+                    v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
                     @click="openUpdateDialogNoIndex(tableOptions.selected[0] as any)"
                   />
                   <MDtBtn
@@ -1720,7 +1716,7 @@ defineOptions({
                     :disable="tableOptions.loading"
                     icon="ion-ios-eye"
                     show
-                    v-bind="{...defaultTopBtnProps,...mOptions.dt?.topSelection?.btn}"
+                    v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
                     @click="openShowDialogNoIndex(tableOptions.selected[0] as any)"
                   />
                   <MDtBtn
@@ -1730,7 +1726,7 @@ defineOptions({
                     color="negative"
                     destroy
                     icon="ion-ios-trash"
-                    v-bind="{...defaultTopBtnProps,...mOptions.dt?.topSelection?.btn}"
+                    v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
                     @click="deleteSelectionItem()"
                   />
                   <template
@@ -1740,7 +1736,7 @@ defineOptions({
                     <MDtBtn
                       v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(tableOptions.selected[0],0) : contextBtn.showIf) && ( (contextBtn.click && isSingleSelectedItem) || (contextBtn.multiClick && !isSingleSelectedItem) )"
                       :tooltip="__(contextBtn.tooltip || contextBtn.name)"
-                      v-bind="{...defaultTopBtnProps,...mOptions.dt?.topSelection?.btn,...contextBtn,...contextBtn.attr}"
+                      v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn,...contextBtn,...contextBtn.attr}"
                       @click="contextBtn.click ? contextBtn.click(tableOptions.selected[0],0) : (contextBtn.multiClick ? contextBtn.multiClick(tableOptions.selected) : undefined)"
                     />
                   </template>
@@ -1749,7 +1745,7 @@ defineOptions({
                 <q-space />
                 <!-- Add Btn -->
                 <template
-                  v-if="hasAddBtn && (addTopBtn===undefined?(mOptions.datatable?.addTopBtn===undefined?!0:mOptions.datatable?.addTopBtn):addTopBtn)"
+                  v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
                 >
                   <MBtn
                     :label="getFormTitle"
@@ -1879,7 +1875,7 @@ defineOptions({
                 color="primary"
                 dense
                 outline
-                v-bind="mOptions.dt?.controlDropdown"
+                v-bind="pluginOptions.dt?.controlDropdown"
               >
                 <q-list>
                   <MDtContextmenuItems
@@ -1968,7 +1964,7 @@ defineOptions({
     <!-- Show Dialog -->
     <MDialog
       v-model="dialogs.show"
-      v-bind="mOptions.dt?.showDialogProps"
+      v-bind="pluginOptions.dt?.showDialogProps"
     >
       <q-card class="m--dialog-card">
         <q-card-section ref="showTitleRef">
@@ -2010,7 +2006,7 @@ defineOptions({
           <MBtn
             :label="__('myth.titles.close')"
             color="negative"
-            v-bind="mOptions.dt?.dialogButtonsProps"
+            v-bind="pluginOptions.dt?.dialogButtonsProps"
             @click="closeShowDialog"
           />
         </q-card-actions>
@@ -2020,7 +2016,7 @@ defineOptions({
     <!-- Form Dialog -->
     <MDialog
       v-model="dialogs.form"
-      v-bind="mOptions.dt?.formDialogProps"
+      v-bind="pluginOptions.dt?.formDialogProps"
     >
       <div
         class="m--form__container full-height no-wrap"
@@ -2134,7 +2130,7 @@ defineOptions({
                   color="positive"
                   no-caps
                   type="submit"
-                  v-bind="mOptions.dt?.dialogButtonsProps"
+                  v-bind="pluginOptions.dt?.dialogButtonsProps"
                 />
               </slot>
               <MBtn
@@ -2143,7 +2139,7 @@ defineOptions({
                 :label="__('myth.titles.close')"
                 color="negative"
                 no-caps
-                v-bind="mOptions.dt?.dialogButtonsProps"
+                v-bind="pluginOptions.dt?.dialogButtonsProps"
                 @click="closeFormDialog"
               />
             </q-card-actions>
@@ -2203,16 +2199,16 @@ defineOptions({
 
     <!-- Add Btn -->
     <q-page-sticky
-      v-if="hasAddBtn && (addFabBtn === undefined ? !!mOptions.datatable?.addFabBtn : addFabBtn)"
-      :offset="mOptions.dt?.fabBtn?.offset|| [25,25]"
-      :position="mOptions.dt?.fabBtn?.position || 'bottom-right'"
-      v-bind="mOptions.dt?.fabBtn?.pageStickyProps"
+      v-if="hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)"
+      :offset="pluginOptions.dt?.fabBtn?.offset|| [25,25]"
+      :position="pluginOptions.dt?.fabBtn?.position || 'bottom-right'"
+      v-bind="pluginOptions.dt?.fabBtn?.pageStickyProps"
     >
       <q-btn
         color="primary"
         fab
         icon="ion-ios-add"
-        v-bind="mOptions.dt?.fabBtn?.buttonProps"
+        v-bind="pluginOptions.dt?.fabBtn?.buttonProps"
         @click="openCreateDialog()"
       >
         <MTooltip

package/src/components/datatable/MDtBtn.vue

@@ -47,7 +47,7 @@ type Events = {
 const emit = defineEmits<Events>()
 
 const hasTooltip = computed(() => !!props.tooltip || !!props.show || !!props.update || !!props.destroy)
-const { __, mOptions } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const getTooltip = computed(() => {
   if (props.tooltip !== undefined) {
     return props.tooltip ? __(props.tooltip) : props.tooltip
@@ -75,11 +75,11 @@ const getColor = computed<string | undefined>(() => {
     return props.color
   }
   if (props.show) {
-    return mOptions.value?.dt?.contextmenu?.btnStyle?.showColor
+    return pluginOptions.value?.dt?.contextmenu?.btnStyle?.showColor
   } else if (props.update) {
-    return mOptions.value?.dt?.contextmenu?.btnStyle?.updateColor
+    return pluginOptions.value?.dt?.contextmenu?.btnStyle?.updateColor
   } else if (props.destroy) {
-    return mOptions.value?.dt?.contextmenu?.btnStyle?.destroyColor
+    return pluginOptions.value?.dt?.contextmenu?.btnStyle?.destroyColor
   }
   return props.color
 })
@@ -107,21 +107,21 @@ defineOptions({
     v-if="listItem"
     v-close-popup
     clickable
-    v-bind="{...mOptions.dt?.MDtBtn?.item?.props,...$attrs}"
+    v-bind="{...pluginOptions.dt?.MDtBtn?.item?.props,...$attrs}"
     @click="emit('click',$event)"
   >
     <q-item-section
       side
-      v-bind="mOptions.dt?.MDtBtn?.item?.avatarProps"
+      v-bind="pluginOptions.dt?.MDtBtn?.item?.avatarProps"
     >
       <q-icon
         :color="getColor"
         :name="getIcon"
-        v-bind="mOptions.dt?.MDtBtn?.item?.iconProps"
+        v-bind="pluginOptions.dt?.MDtBtn?.item?.iconProps"
       />
     </q-item-section>
-    <q-item-section v-bind="mOptions.dt?.MDtBtn?.item?.labelSectionProps">
-      <q-item-label v-bind="mOptions.dt?.MDtBtn?.item?.itemLabelProps">
+    <q-item-section v-bind="pluginOptions.dt?.MDtBtn?.item?.labelSectionProps">
+      <q-item-label v-bind="pluginOptions.dt?.MDtBtn?.item?.itemLabelProps">
         <slot>
           {{ label ? __(label) : label }}
         </slot>
@@ -131,11 +131,11 @@ defineOptions({
   <q-btn
     v-else
     v-bind="{
-      ...mOptions.dt?.MDtBtn?.btn?.props,
+      ...pluginOptions.dt?.MDtBtn?.btn?.props,
       ...$attrs,
-      fabMini: fabMini !== undefined ? fabMini : ( mOptions.dt?.btn?.fabMini !== undefined ? mOptions.dt.btn.fabMini : label === undefined),
-      round: round !== undefined ? round : ( mOptions.dt?.btn?.round !== undefined ? mOptions.dt.btn.round : label === undefined),
-      dense: dense !== undefined ? dense : ( mOptions.dt?.btn?.dense !== undefined ? mOptions.dt.btn.dense : label === undefined),
+      fabMini: fabMini !== undefined ? fabMini : ( pluginOptions.dt?.btn?.fabMini !== undefined ? pluginOptions.dt.btn.fabMini : label === undefined),
+      round: round !== undefined ? round : ( pluginOptions.dt?.btn?.round !== undefined ? pluginOptions.dt.btn.round : label === undefined),
+      dense: dense !== undefined ? dense : ( pluginOptions.dt?.btn?.dense !== undefined ? pluginOptions.dt.btn.dense : label === undefined),
       label: label !== undefined ? __(label) : label,
       icon: getIcon,
       color: getColor