@mythpe/quasar-ui-qui 0.0.46 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "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/form/MBtn.vue

@@ -10,166 +10,17 @@
   lang="ts"
   setup
 >
-import type { MBtnProps as Props } from '../../types'
+import type { ButtonLoadingOptions, MBtnProps as Props } from '../../types'
 import { computed } from 'vue'
-import { myth } from '../../utils'
 import { useBindInput, useMyth } from '../../composable'
 import type { QBtnProps } from 'quasar'
 
-// const props = withDefaults(defineProps<Props>(), {
-//   /**
-//    * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
-//    */
-//   size: undefined,
-//   /**
-//    * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
-//    * Default value: 'button'
-//    */
-//   type: undefined,
-//   /**
-//    * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
-//    */
-//   to: undefined,
-//   /**
-//    * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
-//    */
-//   replace: undefined,
-//   /**
-//    * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
-//    */
-//   href: undefined,
-//   /**
-//    * Native <a> link target attribute; Use it only with 'to' or 'href' props
-//    */
-//   target: undefined,
-//   /**
-//    * The text that will be shown on the button
-//    */
-//   label: undefined,
-//   /**
-//    * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
-//    */
-//   icon: undefined,
-//   /**
-//    * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
-//    */
-//   iconRight: undefined,
-//   /**
-//    * Use 'outline' design
-//    */
-//   outline: undefined,
-//   /**
-//    * Use 'flat' design
-//    */
-//   flat: undefined,
-//   /**
-//    * Remove shadow
-//    */
-//   unelevated: undefined,
-//   /**
-//    * Applies a more prominent border-radius for a squared shape button
-//    */
-//   rounded: undefined,
-//   /**
-//    * Use 'push' design
-//    */
-//   push: undefined,
-//   /**
-//    * Removes border-radius so borders are squared
-//    */
-//   square: undefined,
-//   /**
-//    * Applies a glossy effect
-//    */
-//   glossy: undefined,
-//   /**
-//    * Makes button size and shape to fit a Floating Action Button
-//    */
-//   fab: undefined,
-//   /**
-//    * Makes button size and shape to fit a small Floating Action Button
-//    */
-//   fabMini: undefined,
-//   /**
-//    * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
-//    */
-//   padding: undefined,
-//   /**
-//    * Color name for component from the Quasar Color Palette
-//    */
-//   color: 'primary',
-//   /**
-//    * Overrides text color (if needed); Color name from the Quasar Color Palette
-//    */
-//   textColor: undefined,
-//   /**
-//    * Avoid turning label text into caps (which happens by default)
-//    */
-//   noCaps: undefined,
-//   /**
-//    * Avoid label text wrapping
-//    */
-//   noWrap: undefined,
-//   /**
-//    * Dense mode; occupies less space
-//    */
-//   dense: undefined,
-//   /**
-//    * Configure material ripple (disable it by setting it to 'false' or supply a config object)
-//    * Default value: true
-//    */
-//   ripple: undefined,
-//   /**
-//    * Tabindex HTML attribute value
-//    */
-//   tabindex: undefined,
-//   /**
-//    * Label or content alignment
-//    * Default value: 'center'
-//    */
-//   align: undefined,
-//   /**
-//    * Stack icon and label vertically instead of on same line (like it is by default)
-//    */
-//   stack: undefined,
-//   /**
-//    * When used on flexbox parent, button will stretch to parent's height
-//    */
-//   stretch: undefined,
-//   /**
-//    * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
-//    * Default value: null
-//    */
-//   loading: undefined,
-//   /**
-//    * Put component in disabled mode
-//    */
-//   disable: undefined,
-//   /**
-//    * Makes a circle shaped button
-//    */
-//   round: undefined,
-//   /**
-//    * Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background
-//    */
-//   percentage: undefined,
-//   /**
-//    * Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props
-//    */
-//   darkPercentage: undefined,
-//   /**
-//    * Emitted when the component is clicked
-//    * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
-//    * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
-//    */
-//   onClick: undefined
-// })
 const props = defineProps<Props>()
-const { __ } = useMyth()
-const btnLoading = computed(() => myth.btnLoading.value)
+const { __, theme } = useMyth()
+const btnLoading = computed(() => theme.value.buttonLoading as ButtonLoadingOptions)
 const getLabel = computed<string | undefined>(() => props.label ? (__(props.label) ?? undefined) : undefined)
-const getSize = computed<string>(() => myth.btnLoading.value?.size || '20px')
-const getColor = computed<string | undefined>(() => myth.btnLoading.value?.color || undefined)
+const getSize = computed<string | undefined>(() => btnLoading.value.size)
+const getColor = computed<string | undefined>(() => btnLoading.value.color)
 const { attrs } = useBindInput<QBtnProps & { name: string }>(() => props, 'btn')
 defineOptions({
   name: 'MBtn',
@@ -180,9 +31,11 @@ defineOptions({
 <template>
   <q-btn
     v-bind="{
+      ariaLabel: getLabel,
+      ...$attrs,
       ...attrs,
+      ...theme.buttons,
       label: loading ? `${getLabel} ...` : getLabel,
-      ariaLabel: 'ariaLabel' in attrs && attrs.ariaLabel ? __(attrs.ariaLabel) : getLabel
     }"
   >
     <template