@mythpe/quasar-ui-qui 0.0.47 → 0.0.49

package/src/components/grid/MContainer.vue

@@ -11,28 +11,33 @@
   setup
 >
 import type { MContainerProps } from '../../types'
-import { myth } from '../../utils'
 import { computed } from 'vue'
+import { useMyth } from '../../composable'
 
 const props = withDefaults(defineProps<MContainerProps>(), {
   size: undefined,
   dense: !1,
   fluid: undefined
 })
+const { theme, props: pluginOptions } = useMyth()
+
 const sizeProp = computed(() => {
   if (props.size !== undefined) {
     return props.size
   }
-  if (myth.props.value.container?.size !== undefined) {
-    return myth.props.value.container?.size
+  if (pluginOptions.value.container?.size !== undefined) {
+    return pluginOptions.value.container?.size
   }
-  return myth.size.value
+  return theme.value.size
 })
 const fluidProp = computed(() => {
   if (props.fluid !== undefined) {
     return props.fluid
   }
-  return myth.fluid.value === !0
+  if (pluginOptions.value.container?.fluid !== undefined) {
+    return pluginOptions.value.container?.fluid
+  }
+  return theme.value.fluid === !0
 })
 defineOptions({
   name: 'MContainer',

package/src/components/grid/MRow.vue

@@ -12,20 +12,21 @@
 >
 import type { MRowProps } from '../../types'
 import { computed } from 'vue'
-import { myth } from '../../utils'
+import { useMyth } from '../../composable'
 
 const props = withDefaults(defineProps<MRowProps>(), {
   gutter: undefined,
   col: undefined
 })
-const defSize = 'md'
+const { theme } = useMyth()
+// const defSize = 'md'
 const gutterSize = computed<string>(() => {
   if (props.gutter !== undefined) {
     if (typeof props.gutter === 'string' && props.gutter?.length > 0) {
       return props.gutter
     }
   }
-  return myth.size.value || defSize
+  return theme.value.size
 })
 const colSize = computed<string>(() => {
   if (props.col !== undefined) {
@@ -33,7 +34,7 @@ const colSize = computed<string>(() => {
       return props.col
     }
   }
-  return myth.size.value || defSize
+  return theme.value.size
 })
 // const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 defineOptions({

package/src/components/modal/MDialog.vue

@@ -34,7 +34,7 @@ const map = {
 
 const slideHide = computed<string>(() => 'slide-' + props.from)
 const slideShow = computed<string>(() => 'slide-' + map[props.from])
-const { mOptions } = reactive(useMyth())
+const { props: pluginOptions } = useMyth()
 defineOptions({
   name: 'MDialog',
   inheritAttrs: !1
@@ -51,7 +51,7 @@ defineOptions({
     no-esc-dismiss
     no-shake
     persistent
-    v-bind="{...mOptions.dialog,...$attrs}"
+    v-bind="{...pluginOptions.dialog,...$attrs}"
   >
     <slot />
   </q-dialog>

package/src/components/modal/MModalMenu.vue

@@ -12,14 +12,13 @@
 
 import type { MModalMenuProps } from '../../types'
 import { useMyth } from '../../composable'
-import { reactive } from 'vue'
 
 interface Props {
   noCloseBtn?: MModalMenuProps['noCloseBtn'];
   position?: MModalMenuProps['position'];
 }
 
-const { mOptions, __ } = reactive(useMyth())
+const { props: pluginOptions, __ } = useMyth()
 withDefaults(defineProps<Props>(), {
   noCloseBtn: () => !1,
   position: () => 'bottom'
@@ -38,9 +37,9 @@ defineOptions({
     maximized
     no-backdrop-dismiss
     no-shake
-    v-bind="{...mOptions.modalMenu,...$attrs}"
+    v-bind="{...pluginOptions.modalMenu,...$attrs}"
   >
-    <q-card v-bind="mOptions.modalMenuOptions?.card">
+    <q-card v-bind="pluginOptions.modalMenuOptions?.card">
       <slot />
       <template v-if="!noCloseBtn">
         <q-separator class="lt-md" />
@@ -48,7 +47,7 @@ defineOptions({
           v-close-popup
           class="lt-md"
           clickable
-          v-bind="mOptions.modalMenuOptions?.closeBtn"
+          v-bind="pluginOptions.modalMenuOptions?.closeBtn"
         >
           <q-item-section>
             <q-item-label header>

package/src/components/modal/MTooltip.vue

@@ -24,7 +24,7 @@ defineOptions({
   name: 'MTooltip',
   inheritAttrs: !1
 })
-const { mOptions } = useMyth()
+const { props: pluginOptions } = useMyth()
 </script>
 
 <template>
@@ -32,7 +32,7 @@ const { mOptions } = useMyth()
     class="m--dt-btn-tooltip"
     transition-hide="scale"
     transition-show="scale"
-    v-bind="{...mOptions.tooltip,...$attrs}"
+    v-bind="{...pluginOptions.tooltip,...$attrs}"
   >
     <slot />
   </q-tooltip>

package/src/components/parials/MUploaderItem.vue

@@ -11,7 +11,7 @@
   setup
 >
 
-import { computed, nextTick, reactive, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import type { MUploaderMediaItem, MUploaderProps as Props, MUploaderServiceType } from '../../types'
 import type { QUploader } from 'quasar'
 import { useQuasar } from 'quasar'
@@ -75,9 +75,8 @@ const emit = defineEmits<Emits>()
 
 const q = useQuasar()
 const { te } = useI18n({ useScope: 'global' })
-const $myth = useMyth()
-const { alertError, alertSuccess, confirmMessage, __ } = $myth
-const { api, mOptions } = reactive($myth)
+const { alertError, alertSuccess, confirmMessage, __, props: pluginOptions, api: mApi } = useMyth()
+const api = computed(() => mApi.value.services)
 const setModelValue = (value: Props['modelValue']) => emit('values', value)
 const deleting = ref(!1)
 const onClickDeleteAttachment = () => {
@@ -274,7 +273,7 @@ defineOptions({ name: 'MUploaderItem' })
           dense
           flat
           target="_blank"
-          v-bind="mOptions.uploaderOptions?.downloadBtnProps"
+          v-bind="pluginOptions.uploaderOptions?.downloadBtnProps"
         >
           <q-tooltip class="m--dt-btn-tooltip">
             {{ __('myth.titles.download') }}
@@ -286,7 +285,7 @@ defineOptions({ name: 'MUploaderItem' })
           :icon="deleteMediaIcon"
           dense
           flat
-          v-bind="mOptions.uploaderOptions?.removeBtnProps"
+          v-bind="pluginOptions.uploaderOptions?.removeBtnProps"
           @click="onClickDeleteAttachment()"
         >
           <q-tooltip class="m--dt-btn-tooltip">

package/src/composable/useBindInput.ts

@@ -2,16 +2,18 @@ import type { MaybeRefOrGetter } from 'vue'
 import { computed, ref, toValue, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
-import { myth } from '../utils'
 import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
-import type { PropsContext as UiOpt } from '../types/plugin-props-option'
+import type { MythComponentsProps as UiOpt } from '../types/plugin-props-option'
 
 type G = { name: string; [k: string]: any };
 type OptsContext = { choose?: boolean; };
 export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key: keyof UiOpt, Opts: MaybeRefOrGetter<OptsContext> = {}) => {
   const { messages, locale } = useI18n({ useScope: 'global' })
-  const { __ } = useMyth()
-  // const { attributes } = useSplitAttrs()
+  const {
+    __, theme: mTheme,
+    props: pluginProps,
+    rules: mRules
+  } = useMyth()
   const attributes = useAttrs()
   const props = toValue<P>(Props)
   const opts = toValue<OptsContext>(Opts)
@@ -22,17 +24,16 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
     return pluginProps.value[key]?.[k]
   })
 
-  const { themeBtn, themeInput, props: pluginProps } = myth
-  // console.log(themeInput.value)
-  const themeStyle = computed(() => (key === 'btn' ? themeBtn.value : themeInput.value) ?? {})
+  const themeStyle = computed(() => (key === 'btn' ? mTheme.value.buttons : mTheme.value.inputs) ?? {})
   const theme = ref({})
   for (const k in themeStyle.value) {
     theme.value[k] = props[k] !== undefined ? props[k] : themeStyle.value[k]
   }
-  /**
-   * Top Label Style.
-   */
+
   const hasTopLabel = computed(() => {
+    /**
+     * Top Label Style.
+     */
     if (props.topLabel !== undefined) {
       return props.topLabel !== !1
     }
@@ -167,7 +168,7 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
       return {}
     }
     const rules: any = { ...convertRules(toValue(props.rules)) }
-    const keys = uniq<string>([...publicRules, ...(myth.rules.value ?? []), ...Object.keys(validations)])
+    const keys = uniq<string>([...publicRules, ...(mRules.value ?? []), ...Object.keys(validations)])
     for (const k of keys) {
       if (['mobile', '_default', 'default'].includes(k)) {
         continue

package/src/composable/useMyth.ts

@@ -11,13 +11,15 @@ import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { QDialogOptions, QNotifyCreateOptions } from 'quasar'
 import { copyToClipboard, extend, useQuasar } from 'quasar'
-import { Helpers, myth, Str, veeRules } from '../utils'
+import { Helpers, type MythType, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+import { MythKey } from '../utils/const'
 
 export const useMyth = () => {
+  const plugin = inject(MythKey) as MythType
   const { t, te } = useI18n({ useScope: 'global' })
-  const { props: pluginOptions } = myth
+  const pluginOptions = computed(() => plugin.props.value)
   const q = useQuasar()
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -281,20 +283,8 @@ export const useMyth = () => {
       ...opts as any
     })
   }
-  const api = computed(() => myth.api.value)
-  const baseUrl = computed(() => myth.baseUrl.value)
-  const mAxios = computed(() => myth.mAxios.value)
-  const mOptions = computed(() => myth.props.value)
   const isSmall = computed(() => q.screen.lt.md)
-  const themeInput = computed(() => myth.themeInput.value)
-  const themeBtn = computed(() => myth.themeBtn.value)
   return {
-    api,
-    baseUrl,
-    mAxios,
-    mOptions,
-    themeInput,
-    themeBtn,
     __,
     getPageTitle,
     parseHeaders,
@@ -307,6 +297,7 @@ export const useMyth = () => {
     ...Helpers,
     ...Str,
     veeRules,
-    isSmall
+    isSmall,
+    ...plugin
   }
 }

package/src/types/components.d.ts

@@ -14,6 +14,7 @@ import type {
   QBtnSlots,
   QCheckboxProps,
   QDateProps,
+  QDialogProps,
   QEditorProps,
   QEditorSlots,
   QFieldSlots,
@@ -23,15 +24,17 @@ import type {
   QInputProps,
   QInputSlots,
   QItemProps,
+  QMenuProps,
   QOptionGroupProps,
   QOptionGroupSlots,
+  QPopupProxyProps,
   QRadioProps,
   QSelectProps,
   QTimeProps,
   QToggleProps,
+  QTooltipProps,
   QUploaderProps,
   QUploaderSlots
-  , QDialogProps, QMenuProps, QPopupProxyProps, QTooltipProps
 } from 'quasar'
 import type {
   ComputedRef,
@@ -73,7 +76,7 @@ export interface MTransitionsSlots {
 }
 
 export interface MBtnProps extends QBtnProps {
-  //
+  native?: boolean;
 }
 
 export interface MBtnSlots extends QBtnSlots {

package/src/types/index.d.ts

@@ -6,16 +6,13 @@
  * Github: https://github.com/mythpe
  */
 
-import type { myth } from '../utils'
-
-export type MythContext = typeof myth;
-
 export * from './api-helpers'
 export * from './components'
 export * from './install-options'
 export * from './lodash'
 export * from './m-datatable'
 export * from './m-geolocation'
+export * from './myth-api'
 export * from './plugin-props-option'
 export * from './m-helpers'
 export * from './quasar-helpers'

package/src/types/install-options.d.ts

@@ -1,20 +1,30 @@
-import type { ThemeBtn, ThemeFluid, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from './theme'
-import type { BtnLoading, PropsContext } from './plugin-props-option'
+import type { ButtonLoadingOptions, Theme, ThemeBtn, ThemeContext, ThemeFluid, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from './theme'
+import type { MythComponentsProps } from './plugin-props-option'
 import type { HelpersStubSchema } from './api-helpers'
 import type { AxiosInstance } from 'axios'
+import type { ApiContext, MythApi } from './myth-api'
 
-export interface InstallOptions {
+export interface InstallOptions2 {
   asyncComponents?: boolean | undefined;
+  theme?: Theme;
   size?: ThemeSize;
   rounded?: ThemeRounded;
   shadow?: ThemeShadow;
   fluid?: ThemeFluid;
   rules?: string[];
-  btnLoading?: BtnLoading;
-  props?: PropsContext;
+  btnLoading?: ButtonLoadingOptions;
+  props?: MythComponentsProps;
   themeInput?: ThemeInput;
   themeBtn?: ThemeBtn;
   baseUrl?: string;
   api?: HelpersStubSchema;
   mAxios?: AxiosInstance;
 }
+
+export interface InstallOptions extends MythApi {
+  api: ApiContext;
+  asyncComponents?: boolean;
+  props?: Partial<MythComponentsProps>;
+  theme?: Partial<ThemeContext>;
+  rules?: string[];
+}

package/src/types/myth-api.ts

@@ -0,0 +1,36 @@
+import type { AxiosInstance } from 'axios'
+import type { HelpersStubSchema } from './api-helpers'
+import type { ThemeContext } from './theme'
+import type { MythComponentsProps } from './plugin-props-option'
+
+export interface ApiContext {
+  url: string;
+  services: HelpersStubSchema;
+  axios: AxiosInstance;
+}
+
+/**
+ * Main useMyth API.
+ */
+export interface MythApi {
+  /**
+   * Define how the components should be loaded.
+   */
+  asyncComponents: boolean;
+  /**
+   * Api Object.
+   */
+  api: ApiContext;
+  /**
+   * Theme Object.
+   */
+  theme: ThemeContext;
+  /**
+   * Components Props.
+   */
+  props: MythComponentsProps;
+  /**
+   * Add custom rules of vee-validate.
+   */
+  rules: string[];
+}

package/src/types/plugin-props-option.d.ts

@@ -45,7 +45,7 @@ import type {
 } from 'quasar'
 import type { MDatatableProps, MDtBtnProps } from './m-datatable'
 
-export interface PropsContext {
+export interface MythComponentsProps {
   // Grid.
   /**
    * MBlock component.
@@ -299,13 +299,3 @@ export interface PropsContext {
     };
   };
 }
-
-/**
- * Default loading q-btn loading slot.
- */
-export type BtnLoading = {
-  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;
-}

package/src/types/theme.d.ts

@@ -39,3 +39,50 @@ export type ThemeBtn = Partial<Pick<QBtnProps, 'flat'
   | 'color'
   | 'textColor'
 >>
+
+export type Theme = {
+  size: ThemeSize;
+  rounded: ThemeRounded;
+  shadow: ThemeShadow;
+  fluid: ThemeFluid;
+  button: ThemeBtn;
+  input: ThemeInput;
+};
+
+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;
+}
+
+export interface ThemeContext {
+  /**
+   * Default size of theme.
+   */
+  size: ThemeSize;
+  /**
+   * Theme rounded.
+   */
+  rounded: ThemeRounded;
+  /**
+   * Theme shadow.
+   */
+  shadow: ThemeShadow;
+  /**
+   * Theme fluid.
+   */
+  fluid: ThemeFluid;
+  /**
+   * Default buttons style.
+   */
+  buttons: ThemeBtn;
+  /**
+   * Default inputs style.
+   */
+  inputs: ThemeInput;
+  /**
+   * Default of loading slot of q-btn.
+   */
+  buttonLoading: ButtonLoadingOptions | false;
+}

package/src/utils/const.ts

@@ -0,0 +1 @@
+export const MythKey = 'MyThKey'

package/src/utils/createMyth.ts

@@ -0,0 +1,42 @@
+import type { InstallOptions, MythApi } from '../types'
+import { reactive, toRefs } from 'vue'
+import type { AxiosInstance } from 'axios'
+import { extend } from 'quasar'
+
+export const createMyth = (options: InstallOptions) => {
+  const defaultOptions: MythApi = {
+    asyncComponents: !1,
+    api: {
+      url: '',
+      services: {},
+      axios: {} as AxiosInstance
+    },
+    props: {},
+    rules: [],
+    theme: {
+      size: 'md',
+      rounded: !0,
+      shadow: 2,
+      fluid: !0,
+      buttons: {},
+      inputs: {},
+      buttonLoading: {
+        type: 'spinner',
+        color: undefined,
+        size: undefined
+      } as MythApi['theme']['buttonLoading']
+    }
+  } as MythApi
+  const opts = reactive<MythApi>(extend<MythApi>(!0, { ...defaultOptions }, options))
+  const functions = {
+    btnStyle (value: MythApi['theme']['buttons']) {
+      opts.theme.buttons = value
+    }
+  }
+
+  return {
+    ...toRefs(opts),
+    ...functions
+  }
+}
+export type MythType = ReturnType<typeof createMyth>

package/src/utils/index.ts

@@ -6,8 +6,9 @@
  * Github: https://github.com/mythpe
  */
 
-export * from './myth'
-export * from './Str'
+export * from './const'
+export * from './createMyth'
 export * from './Helpers'
+export * from './Str'
 export * from './vee-rules'
 export * from './vue-plugin'

package/src/utils/vue-plugin.ts

@@ -10,12 +10,16 @@ import type { App } from 'vue'
 import { name, version } from '../../package.json'
 
 import type { InstallOptions } from '../types'
-import { defineOptions } from '../plugin/defineOptions'
 import { defineAsyncComponents } from '../plugin/defineAsyncComponents'
 import { defineComponents } from '../plugin/defineComponents'
 
-function install (app: App, options: InstallOptions = {}) {
-  defineOptions(options)
+import { createMyth } from './createMyth'
+import { MythKey } from './const'
+
+function install (app: App, options: InstallOptions) {
+  const myth = createMyth(options)
+  app.provide(MythKey, myth)
+  // defineOptions(options)
   if (options?.asyncComponents) {
     defineAsyncComponents(app)
   } else {

package/src/plugin/defineOptions.ts

@@ -1,38 +0,0 @@
-import { myth } from '../utils'
-import type { InstallOptions } from '../types'
-
-export const defineOptions = (options: InstallOptions) => {
-  if (options.rounded !== undefined) {
-    myth.rounded.value = options.rounded
-  }
-  if (options.shadow !== undefined) {
-    myth.shadow.value = options.shadow
-  }
-  if (options.fluid !== undefined) {
-    myth.setFluid(options.fluid)
-  }
-  if (options.size !== undefined) {
-    myth.setSize(options.size)
-  }
-  if (options.props !== undefined) {
-    myth.withProps(options.props)
-  }
-  if (options.rules !== undefined) {
-    myth.withRules(options.rules)
-  }
-  if (options.themeBtn !== undefined) {
-    myth.themeBtn.value = options.themeBtn
-  }
-  if (options.themeInput !== undefined) {
-    myth.setThemeInput(options.themeInput)
-  }
-  if (options.baseUrl !== undefined) {
-    myth.baseUrl.value = options.baseUrl
-  }
-  if (options.api !== undefined) {
-    myth.setApi(options.api)
-  }
-  if (options.mAxios !== undefined) {
-    myth.mAxios.value = options.mAxios
-  }
-}