@mythpe/quasar-ui-qui 0.0.82 → 0.0.84

package/package.json

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

package/src/components/form/MBtn.vue

@@ -10,7 +10,7 @@
   lang="ts"
   setup
 >
-import type { ButtonLoadingOptions, MBtnProps } from '../../types'
+import type { MBtnProps } from '../../types'
 import { computed } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 
@@ -41,9 +41,9 @@ const getAriaLabel = computed<string | undefined>(() => {
 })
 const hasLabel = computed<boolean>(() => !!getLabel.value)
 
-const loadingOptions = computed(() => theme.value.buttonLoading as ButtonLoadingOptions)
-const loadingSize = computed<string | undefined>(() => loadingOptions.value.size)
-const loadingColor = computed<string | undefined>(() => loadingOptions.value.color)
+const loadingOptions = computed(() => theme.value.buttonLoading)
+const loadingSize = computed<string | undefined>(() => loadingOptions.value ? loadingOptions.value.size : undefined)
+const loadingColor = computed<string | undefined>(() => loadingOptions.value ? loadingOptions.value.color : undefined)
 
 defineOptions({
   name: 'MBtn',
@@ -59,163 +59,178 @@ defineOptions({
       ariaLabel: getAriaLabel,
       ...$attrs,
       loading,
-      label: loading && getLabel ? `${getLabel} ...` : getLabel,
+      label2: loading && getLabel && loadingOptions ? `${getLabel} ...` : getLabel,
+      label: getLabel,
     }"
   >
-    <template #loading>
-      <slot name="loading">
+    <template
+      v-if="!!$slots.loading"
+      #loading
+    >
+      <slot name="loading" />
+    </template>
+    <template
+      v-else-if="loadingOptions"
+      #loading
+    >
+      <slot
+        v-if="loadingOptions"
+        name="loading"
+      >
         <q-spinner-audio
           v-if="loadingOptions.type === 'audio'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-ball
           v-if="loadingOptions.type === 'ball'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-bars
           v-if="loadingOptions.type === 'bars'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-box
           v-if="loadingOptions.type === 'box'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-clock
           v-if="loadingOptions.type === 'clock'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-comment
           v-if="loadingOptions.type === 'comment'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-cube
           v-if="loadingOptions.type === 'cube'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-dots
           v-if="loadingOptions.type === 'dots'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-facebook
           v-if="loadingOptions.type === 'facebook'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-gears
           v-if="loadingOptions.type === 'gears'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-grid
           v-if="loadingOptions.type === 'grid'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-hearts
           v-if="loadingOptions.type === 'hearts'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-hearts
           v-if="loadingOptions.type === 'hearts'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-hourglass
           v-if="loadingOptions.type === 'hourglass'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-infinity
           v-if="loadingOptions.type === 'infinity'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-ios
           v-if="loadingOptions.type === 'ios'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-orbit
           v-if="loadingOptions.type === 'orbit'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-oval
           v-if="loadingOptions.type === 'oval'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-pie
           v-if="loadingOptions.type === 'pie'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-puff
           v-if="loadingOptions.type === 'puff'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-radio
           v-if="loadingOptions.type === 'radio'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-rings
           v-if="loadingOptions.type === 'rings'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner-tail
           v-if="loadingOptions.type === 'tail'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
         <q-spinner
           v-if="loadingOptions.type === 'spinner'"
-          :class="{'on-left': hasLabel}"
+          :class="{'on-left2': hasLabel}"
           :color="loadingColor"
           :size="loadingSize"
         />
-        <template v-if="loadingOptions.noLabel !== !1 && getLabel">
-          <span>{{ getLabel }}</span>
-        </template>
+        <!--<template v-if="loadingOptions.label === !0 && getLabel">-->
+        <!--  <span>{{ getLabel }}</span>-->
+        <!--</template>-->
       </slot>
     </template>
-
-    <template #default>
-      <slot name="default" />
+    <template
+      v-if="!!$slots.default"
+      #default
+    >
+      <slot />
     </template>
   </q-btn>
 </template>

package/src/types/theme.d.ts

@@ -53,7 +53,7 @@ export type ButtonLoadingOptions = {
   type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail' | 'spinner';
   color?: string | undefined;
   size?: string | undefined;
-  noLabel?: boolean;
+  label?: boolean;
 }
 
 export interface ThemeContext {

package/src/utils/createMyth.ts

@@ -24,6 +24,7 @@ export const createMyth = (options: InstallOptions) => {
       },
       buttonLoading: {
         type: 'spinner',
+        label: !1,
         color: undefined,
         size: undefined
       } as MythApi['theme']['buttonLoading']