@mythpe/quasar-ui-qui 0.0.47 → 0.0.49

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

package/src/components/form/MCkeditor.vue

@@ -120,7 +120,7 @@ const props = withDefaults(defineProps<P>(), {
   fieldOptions: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __, mOptions } = useMyth()
+const { __, props: pluginOptions } = useMyth()
 const helper = useBindInput<any>(() => props, 'ckeditor')
 const { getLabel, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -389,7 +389,7 @@ defineOptions({
         :editor="ClassicEditor"
         :model-value="value || ''"
         :tag-name="tagName"
-        v-bind="{...$attrs,...mOptions.ckeditor}"
+        v-bind="{...$attrs,...pluginOptions.ckeditor}"
         v-on="listeners"
       />
       <slot v-bind="scopes" />

package/src/components/form/MEditor.vue

@@ -15,7 +15,6 @@ import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
 import type { MEditorProps as Props } from '../../types'
 import { reactive, toValue, useTemplateRef } from 'vue'
-import { myth } from '../../utils'
 
 const $q = useQuasar()
 const _toolbar = [
@@ -176,8 +175,7 @@ const props = withDefaults(defineProps<P>(), {
   fieldOptions: undefined,
   useChoice: undefined
 })
-const { __ } = useMyth()
-const { props: pluginOptions, themeInput } = myth
+const { __, props: pluginOptions, theme } = useMyth()
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<any>(() => props, 'editor')
 const { hasTopLabel, getLabel, getPlaceholder, inputRules } = helper
@@ -256,7 +254,7 @@ defineOptions({
         ...( viewMode ? pluginOptions.field : {} ),
         ...$attrs,
         ...( viewMode ? { stackLabel: !0 } : {} ),
-        dense: themeInput.dense !== undefined ? themeInput.dense : $q.screen.lt.lg
+        dense: theme.inputs.dense !== undefined ? theme.inputs.dense : $q.screen.lt.lg
       }"
       v-on="listeners"
     />

package/src/components/form/MField.vue

@@ -17,7 +17,6 @@ import { useTemplateRef } from 'vue'
 import type { QFieldSlots } from 'quasar'
 import { QField } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
-import { myth } from '../../utils'
 
 type P = {
   name: Props['name'];
@@ -61,10 +60,9 @@ const props = withDefaults(defineProps<P>(), {
   clearable: undefined
 })
 const { __ } = useMyth()
-const { props: options } = myth
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'input')
-const { hasTopLabel, getLabel, getPlaceholder, inputRules } = helper
+const { hasTopLabel, getLabel, getPlaceholder, inputRules, attrs } = helper
 const value = useFieldValue(() => props.name)
 const errorMessage = useFieldError(() => props.name)
 const input = useTemplateRef<InstanceType<typeof QField>>('input')
@@ -109,10 +107,8 @@ defineOptions({
     <q-field
       ref="input"
       v-bind="{
-        ...options.input as any,
-        ...options.field as any,
         ...$attrs,
-        ...myth.themeInput,
+        ...attrs as any,
         clearable: !1,
         stackLabel: !0,
         error:!!errorMessage,

package/src/components/form/MFile.vue

@@ -17,7 +17,6 @@ import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
 import { reactive, toValue, useTemplateRef } from 'vue'
 import type { MFileProps as Props } from '../../types'
-import { myth } from '../../utils'
 
 interface P {
   name: Props['name'];
@@ -76,9 +75,8 @@ const props = withDefaults(defineProps<P>(), {
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const { __ } = useMyth()
-const { props: options } = myth
 const helper = useBindInput<P>(() => props, 'file', () => ({ choose: !0 }))
-const { hasTopLabel, getLabel, getPlaceholder, accepts, inputRules } = helper
+const { hasTopLabel, getLabel, getPlaceholder, accepts, inputRules, attrs } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -164,7 +162,11 @@ defineOptions({
       :hint="__(hint)"
       :label="hasTopLabel ? (viewMode ? undefined : getPlaceholder) : getLabel"
       :model-value="value"
-      v-bind="{ ...options.file as any,...( viewMode ? options.field : {} ), ...$attrs, ...( viewMode ? { stackLabel: !0 } : {} ) }"
+      v-bind="{
+        ...$attrs,
+        ...attrs as any,
+        ...( viewMode ? { stackLabel: !0 } : {} )
+      }"
       v-on="listeners"
     >
       <template #prepend>

package/src/components/form/MMobile.vue

@@ -13,11 +13,11 @@
 import type { MInputProps as Props, MInputSlots } from '../../types'
 import { useTemplateRef } from 'vue'
 import MInput from './MInput.vue'
-import { myth } from '../../utils'
+import { useMyth } from '../../composable'
 
+const { props: pluginOptions } = useMyth()
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const input = useTemplateRef<InstanceType<typeof MInput>>('input')
-const { props: options } = myth
 defineExpose<{ input: typeof input }>({ input })
 defineOptions({
   name: 'MMobile',
@@ -30,7 +30,7 @@ defineOptions({
     ref="input"
     v-model="modelValue"
     type="tel"
-    v-bind="{...options.mobile as any,...$attrs}"
+    v-bind="{...pluginOptions.mobile as any,...$attrs}"
   >
     <template
       v-for="(_,slot) in $slots as Readonly<MInputSlots>"

package/src/components/form/MOptions.vue

@@ -16,7 +16,6 @@ import type { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
 import { reactive, toValue, useTemplateRef } from 'vue'
 import { QField, QOptionGroup, type QOptionGroupSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
-import { myth } from '../../utils'
 
 type P = {
   name: Props['name'];
@@ -92,8 +91,7 @@ const listeners = {
 const input = useTemplateRef<InstanceType<typeof QField> | InstanceType<typeof QOptionGroup>>('input')
 const scopes = reactive(inputScope)
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
-const { alertError, __ } = useMyth()
-const { props: pluginProps } = myth
+const { alertError, __, props: pluginProps } = useMyth()
 const fetchData = async () => {
   if (props.service) {
     loading.value = !0

package/src/components/form/MOtp.vue

@@ -16,7 +16,6 @@ import { computed, nextTick, onBeforeUnmount, onBeforeUpdate, ref, watch, watchE
 import { date } from 'quasar'
 import type { MOtpProps as Props } from '../../types'
 import { useMyth } from '../../composable'
-import { myth } from '../../utils'
 
 export interface P {
   // modelValue?: Props['modelValue'];
@@ -36,8 +35,7 @@ type Emits = {
   (e: 'send'): void;
 }
 const emit = defineEmits<Emits>()
-const { __ } = useMyth()
-const { props: pluginOptions } = myth
+const { __, props: pluginOptions } = useMyth()
 const props = withDefaults(defineProps<P>(), {
   // modelValue: undefined,
   inputLength: () => 6,

package/src/components/form/MPicker.vue

@@ -16,7 +16,6 @@ import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
 import type { QFieldSlots } from 'quasar'
 import { QDate, QField, QTime } from 'quasar'
-import { myth } from '../../utils'
 
 const defSeparator = ' - '
 const props = withDefaults(defineProps<Omit<Props, 'prefix'>>(), {
@@ -83,9 +82,7 @@ const props = withDefaults(defineProps<Omit<Props, 'prefix'>>(), {
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<Props>(() => props, 'picker', () => ({ choose: !0 }))
 const { hasTopLabel, getLabel, getPlaceholder, inputRules, getAutocompleteAttribute, getProp } = helper
-const { __ } = useMyth()
-const options = computed(() => myth.props.value)
-const theme = computed(() => myth.themeInput)
+const { __, props: pluginOptions, theme } = useMyth()
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -175,9 +172,9 @@ defineOptions({
       :hint="__(hint)"
       :label="hasTopLabel ? undefined : getLabel"
       v-bind="{
-        ...options.input as any,
-        ...options.field as any,
-        ...theme,
+        ...pluginOptions.input as any,
+        ...pluginOptions.field as any,
+        ...theme.inputs,
         ...$attrs,
         autocomplete:getAutocompleteAttribute,
         stackLabel: !0
@@ -197,7 +194,7 @@ defineOptions({
           <template v-else>
             <div>
               <template v-if="value && Array.isArray(value)">
-                {{ value.join(rangeSeparator || options.picker?.rangeSeparator || defSeparator) }}
+                {{ value.join(rangeSeparator || pluginOptions.picker?.rangeSeparator || defSeparator) }}
               </template>
               <template v-else>
                 {{ value?.toString() }}
@@ -212,7 +209,7 @@ defineOptions({
           :icon="isDate ? 'ion-ios-calendar' : 'ion-ios-clock'"
           flat
           round
-          v-bind="{...options?.pickerBtn, ...btnProps}"
+          v-bind="{...pluginOptions?.pickerBtn, ...btnProps}"
         >
           <q-popup-proxy
             cover
@@ -228,7 +225,7 @@ defineOptions({
                 v-if="isDate"
                 ref="dateElm"
                 v-bind="{
-                  ...options.date as any,
+                  ...pluginOptions.date as any,
                   ...props,
                   ...$attrs,
                   todayBtn: getProp('todayBtn') === undefined ? !0 : getProp('todayBtn'),
@@ -261,7 +258,7 @@ defineOptions({
                 ref="timeElm"
                 v-bind="{
                   ...$props,
-                  ...options.time,
+                  ...pluginOptions.time,
                   ...$attrs,
                   mask:format,
                   nowBtn: getProp('nowBtn') === undefined? !0 : getProp('nowBtn'),

package/src/components/form/MRadio.vue

@@ -15,7 +15,6 @@ import { reactive, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 import type { MRadioProps as Props } from '../../types'
 import { QField, QRadio } from 'quasar'
-import { myth } from '../../utils'
 
 type P = {
   auto?: Props['auto'];
@@ -75,8 +74,7 @@ const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   ...toValue<any>(props.fieldOptions)
 })
 const { value, errorMessage, handleChange } = inputScope
-const { __ } = useMyth()
-const { props: options } = myth
+const { __, props: pluginOptions } = useMyth()
 const listeners = {
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
 }
@@ -123,10 +121,9 @@ defineOptions({
           :error-message="errorMessage"
           :hint="__(hint)"
           v-bind="{
-            ...options.input as any,
-            ...options.field,
+            ...pluginOptions.input as any,
+            ...pluginOptions.field,
             ...$attrs,
-            ...myth.themeInput,
             borderless: !0,
             outlined: !1,
             stackLabel: !0
@@ -139,7 +136,7 @@ defineOptions({
               :model-value="value"
               :val="val"
               v-bind="{
-                ...options.radio,
+                ...pluginOptions.radio,
                 ...$attrs,
                 dense: attrs.dense,
                 checkedIcon: getProp('checkedIcon'),

package/src/components/form/MSelect.vue

@@ -16,7 +16,6 @@ import type { MSelectProps as Props } from '../../types'
 import { computed, reactive, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 import { QField, QSelect, type QSelectSlots } from 'quasar'
-import { myth } from '../../utils'
 
 type P = {
   name: Props['name'];
@@ -110,8 +109,7 @@ type Emits = {
 }
 const emit = defineEmits<Emits>()
 
-const { __ } = useMyth()
-const { props: pluginOptions, themeInput } = myth
+const { __, props: pluginOptions, theme } = useMyth()
 const helper = useBindInput<P & Props>(() => props, 'select', () => ({ choose: !0 }))
 const { attrs, hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, inputRules, getProp } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -231,7 +229,7 @@ defineOptions({
         options: getOptions,
         readonly: readonly,
         ...(viewMode ? { stackLabel: !0 } : { stackLabel: hasTopLabel ? !1 : (
-          themeInput.dense !== undefined ? themeInput.dense : getProp('dense')
+          theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('dense')
         ) } ),
         useChips: getProp('useChips') === !0 && !multiple ? !1 : getProp('useChips'),
         multiple,
@@ -250,7 +248,7 @@ defineOptions({
         #no-option
       >
         <slot name="no-option">
-          <q-item :dense="themeInput.dense !== undefined ? themeInput.dense : getProp('optionsDense')">
+          <q-item :dense="theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('optionsDense')">
             <q-item-section side>
               <template v-if="loading">
                 <q-spinner color="primary" />

package/src/components/form/MToggle.vue

@@ -15,7 +15,6 @@ import { useField } from 'vee-validate'
 import type { MToggleProps as Props } from '../../types'
 import { useBindInput, useMyth } from '../../composable'
 import { QToggle } from 'quasar'
-import { myth } from '../../utils'
 
 interface P {
   auto?: Props['auto'];
@@ -97,9 +96,7 @@ const { value, errorMessage, handleChange } = inputScope
 const listeners = {
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
 }
-
-const { __ } = useMyth()
-const { props: pluginOptions, themeInput } = myth
+const { __, props: pluginOptions, theme } = useMyth()
 const getLabel = computed<string | undefined>(() => {
   const def = undefined
   const v = value.value
@@ -172,7 +169,7 @@ defineOptions({
             ...$attrs,
             borderless: !0,
             outlined: !1,
-            dense: themeInput.dense !== undefined ? themeInput.dense : getProp('dense')
+            dense: theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('dense')
           }"
         >
           <q-toggle
@@ -185,7 +182,7 @@ defineOptions({
             v-bind="{
               ...pluginOptions.toggle,
               ...$attrs,
-              dense: themeInput.dense !== undefined ? themeInput.dense : getProp('dense'),
+              dense: theme.inputs.dense !== undefined ? theme.inputs.dense : getProp('dense'),
               checkedIcon: getProp('checkedIcon'),
               uncheckedIcon: getProp('uncheckedIcon'),
               color: !!errorMessage ? 'negative' : getProp('color'),

package/src/components/form/MUploader.vue

@@ -10,7 +10,7 @@
   setup
 >
 import { QList, type QRejectedEntry, QUploader, type QUploaderFactoryObject } from 'quasar'
-import { computed, nextTick, reactive, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, useTemplateRef, watch } from 'vue'
 import { useBindInput, useError, useMyth, useValue } from '../../composable'
 import type { MUploaderMediaItem, MUploaderProps as Props, MUploaderXhrInfo } from '../../types'
 import { useFieldArray, useFieldValue, useFormValues, useResetForm } from 'vee-validate'
@@ -131,9 +131,7 @@ type Emits = {
 const emit = defineEmits<Emits>()
 
 type Form = Record<string, any>;
-const $myth = useMyth()
-const { alertError, alertSuccess, __ } = $myth
-const { mOptions, api, mAxios, baseUrl } = reactive($myth)
+const { alertError, alertSuccess, __, api, props: pluginOptions } = useMyth()
 const fieldId = useFieldValue<string | undefined>('id')
 const modelIdProp = computed(() => props.modelId !== undefined ? props.modelId : fieldId.value)
 const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
@@ -171,7 +169,7 @@ const setModelValue = async (value: Props['modelValue']) => {
 const uploader = useTemplateRef<InstanceType<typeof QUploader>>('uploader')
 const uploading = defineModel<boolean>('uploading', { required: !1, default: () => !1 })
 const { accepts } = useBindInput<any>(() => props, 'uploader')
-const iconsSizeProp = computed(() => mOptions.uploaderOptions?.iconsSize || props.iconsSize)
+const iconsSizeProp = computed(() => pluginOptions.value.uploaderOptions?.iconsSize || props.iconsSize)
 
 /* Events Callback */
 const startUpload = async (files: readonly File[]): Promise<QUploaderFactoryObject> => {
@@ -181,7 +179,7 @@ const startUpload = async (files: readonly File[]): Promise<QUploaderFactoryObje
       return
     }
     try {
-      const common = mAxios?.defaults?.headers.common || {}
+      const common = api.value.axios?.defaults?.headers.common || {}
       const headers: { name: string; value: string; }[] = []
       setErrors([])
       for (const i in common) {
@@ -223,17 +221,17 @@ const startUpload = async (files: readonly File[]): Promise<QUploaderFactoryObje
         formFields.push({ name: 'return', value: props.returnType })
       }
       const url: string = typeof props.service === 'string'
-        ? api?.[props.service]?.getUploadAttachmentsUrl(modelIdProp.value)
+        ? api.value.services?.[props.service]?.getUploadAttachmentsUrl(modelIdProp.value)
         : props.service.getUploadAttachmentsUrl(modelIdProp.value)
       const resolveValue = {
-        url: `${baseUrl}/${url}`,
+        url: `${api.value.url}/${url}`,
         method: 'POST',
         headers,
         formFields
       }
       emit('startUpload', {
         files,
-        url: `${baseUrl}/${url}`,
+        url: `${api.value.url}/${url}`,
         method: 'POST',
         headers,
         formFields
@@ -338,7 +336,7 @@ defineOptions({
       :label="__(label)"
       :readonly="readonly"
       style="width: 100%;max-height: 450px;"
-      v-bind="{...mOptions.uploader as any,...$attrs}"
+      v-bind="{...pluginOptions.uploader as any,...$attrs}"
       @failed="onError"
       @rejected="onReject"
       @uploaded="onFinishUpload"

package/src/components/grid/MBlock.vue

@@ -12,30 +12,40 @@
 >
 import type { MBlockProps as Props } from '../../types'
 import { computed } from 'vue'
-import { myth } from '../../utils'
+import { useMyth } from '../../composable'
 
 const props = withDefaults(defineProps<Props>(), {
   size: undefined,
   rounded: undefined,
   shadow: undefined
 })
+const { theme, props: pluginOptions } = useMyth()
 const getSize = computed(() => {
   if (props.size !== undefined) {
     return props.size
   }
-  return myth.props.value.block?.size || myth.size.value
+  if (pluginOptions.value.block?.size !== undefined) {
+    return pluginOptions.value.block?.size
+  }
+  return theme.value.size
 })
 const getRounded = computed(() => {
   if (props.rounded !== undefined) {
     return props.rounded
   }
-  return myth.props.value.block?.rounded || myth.rounded.value
+  if (pluginOptions.value.block?.rounded !== undefined) {
+    return pluginOptions.value.block?.rounded
+  }
+  return theme.value.rounded
 })
 const getShadow = computed(() => {
   if (props.shadow !== undefined) {
     return props.shadow
   }
-  return myth.props.value.block?.shadow || myth.shadow.value
+  if (pluginOptions.value.block?.shadow !== undefined) {
+    return pluginOptions.value.block?.shadow
+  }
+  return theme.value.shadow
 })
 
 defineOptions({