@mythpe/quasar-app-extension-qui 0.0.1-dev → 0.0.2-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-app-extension-qui",
-  "version": "0.0.1-dev",
+  "version": "0.0.2-dev",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
@@ -15,48 +15,8 @@
     "build:js": "node build/script.javascript.cjs",
     "build:css": "node build/script.css.cjs"
   },
-  "devDependencies": {
-    "typed.js": "^2.1.0",
-    "vee-validate": "^4.14.0",
-    "@vee-validate/i18n": "^4.14.0",
-    "@vee-validate/rules": "^4.14.0",
-    "vue-i18n": "^10.0.0",
-    "lodash": "^4.17.21",
-    "@quasar/app-webpack": "^3.13.0",
-    "@quasar/extras": "^1.16.4",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@types/express": "^5.0.0",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^22.9.1",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
-    "autoprefixer": "^10.0.2",
-    "chalk": "^4.1.0",
-    "core-js": "^3.0.0",
-    "cssnano": "^7.0.6",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "fs-extra": "^8.1.0",
-    "open": "^7.3.0",
-    "postcss": "^8.1.9",
-    "quasar": "^2.16.0",
-    "rimraf": "^3.0.0",
-    "rollup": "^2.45.0",
-    "rtlcss": "^4.3.0",
-    "sass": "^1.33.0",
-    "typescript": "~5.5.3",
-    "uglify-js": "^3.13.3",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0",
-    "zlib": "^1.0.5"
-  },
+  "dependencies": {},
+  "devDependencies": {},
   "engines": {
     "node": "^24 || ^22 || ^20 || ^18",
     "npm": ">= 6.13.4",

package/src/boot/register.js

@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers'
-import VuePlugin from '@mythpe/quasar-ui-qui'
+import Plugin from '@mythpe/quasar-ui-qui'
 
 export default boot(({ app }) => {
-  app.use(VuePlugin)
+  app.use(Plugin)
 })

package/src/index.js

@@ -19,7 +19,7 @@ function extendConf (conf, api) {
   }
 
   // make sure the stylesheet goes through webpack to avoid SSR issues
-  conf.css.push('~@mythpe/quasar-app-extension-qui/src/index.sass')
+  conf.css.push('~@mythpe/quasar-ui-qui/src/index.sass')
 }
 
 export default function (api) {
@@ -35,10 +35,10 @@ export default function (api) {
   }
 
   // Uncomment the line below if you provide a JSON API for your component
-  // api.registerDescribeApi('MyComponent', '~@mythpe/quasar-app-extension-qui/src/components/MyComponent.json')
+  // api.registerDescribeApi('MyComponent', '~@mythpe/quasar-ui-qui/src/components/MyComponent.json')
 
   // Uncomment the line below if you provide a JSON API for your directive
-  // api.registerDescribeApi('my-directive', '~@mythpe/quasar-app-extension-qui/src/directives/my-directive.json')
+  // api.registerDescribeApi('my-directive', '~@mythpe/quasar-ui-qui/src/directives/my-directive.json')
 
   // We extend /quasar.conf.js
   api.extendQuasarConf(extendConf)

package/src/components/form/MBtn.vue

@@ -1,168 +0,0 @@
-<script lang="ts" setup>
-import type { MBtnProps } from '../../types'
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { extend } from 'quasar'
-import { myth } from '../../utils/myth'
-
-const props = defineProps<MBtnProps>()
-const options = computed(() => myth.options.value.btn ?? {})
-const { t, te } = useI18n({ useScope: 'global' })
-const getLabel = computed(() => {
-  if (props.label !== undefined) {
-    if (te(`attributes.${props.label}`)) {
-      return t(`attributes.${props.label}`)
-    }
-    if (te(`${props.label}`)) {
-      return t(`${props.label}`)
-    }
-  }
-  return props.label
-})
-defineOptions({
-  name: 'MBtn',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
-    <template
-      v-if="!!options.loading && !$slots.loading"
-      #loading
-    >
-      <q-spinner-audio
-        v-if="options.loading.type === 'audio'"
-        :color="options.loading.color"
-        :size="options.loading.size"
-        class="on-left"
-      />
-      <q-spinner-ball
-        v-if="options.loading.type === 'ball'"
-        :color="options.loading.color"
-        :size="options.loading.size"
-        class="on-left"
-      />
-      <q-spinner-bars
-        v-if="options.loading.type === 'bars'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-box
-        v-if="options.loading.type === 'box'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-clock
-        v-if="options.loading.type === 'clock'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-comment
-        v-if="options.loading.type === 'comment'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-cube
-        v-if="options.loading.type === 'cube'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-dots
-        v-if="options.loading.type === 'dots'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-facebook
-        v-if="options.loading.type === 'facebook'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-gears
-        v-if="options.loading.type === 'gears'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-grid
-        v-if="options.loading.type === 'grid'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-hearts
-        v-if="options.loading.type === 'hearts'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-hearts
-        v-if="options.loading.type === 'hearts'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-hourglass
-        v-if="options.loading.type === 'hourglass'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-infinity
-        v-if="options.loading.type === 'infinity'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-ios
-        v-if="options.loading.type === 'ios'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-orbit
-        v-if="options.loading.type === 'orbit'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-oval
-        v-if="options.loading.type === 'oval'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-pie
-        v-if="options.loading.type === 'pie'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-puff
-        v-if="options.loading.type === 'puff'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-radio
-        v-if="options.loading.type === 'radio'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-rings
-        v-if="options.loading.type === 'rings'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <q-spinner-tail
-        v-if="options.loading.type === 'tail'"
-        :color="options.loading.color"
-        class="on-left"
-      />
-      <template v-if="options.loading.label === !0">
-        {{ getLabel }}
-      </template>
-    </template>
-    <template
-      v-else-if="!!$slots.loading"
-      #loading
-    >
-      <slot name="loading" />
-    </template>
-    <template
-      v-if="!!$slots.default"
-      #default
-    >
-      <slot name="default" />
-    </template>
-  </q-btn>
-</template>

package/src/components/grid/MBlock.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import type { MBlockProps } from '../../types'
-import { computed } from 'vue'
-import MythOptions from '../../utils/myth'
-import { extend } from 'quasar'
-
-interface Props {
-  size?: MBlockProps['size'];
-  rounded?: MBlockProps['rounded'];
-  shadow?: MBlockProps['shadow'];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  rounded: !1,
-  shadow: 'none'
-})
-const block = computed(() => MythOptions.options.value.block ?? {})
-const options = computed<Props>(() => extend(!0, { ...props }, block.value))
-defineOptions({
-  name: 'MBlock',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div
-    :class="{
-      'm---block' : !0,
-      [`q-pa-${options.size}`] : options.size && options.size !== 'none',
-      'rounded-borders' : options.rounded === !0,
-      [`shadow-${options.shadow}`] : options.shadow && options.shadow !== 'none'
-    }"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/grid/MCol.vue

@@ -1,64 +0,0 @@
-<script
-  lang="ts"
-  setup
->
-import { computed } from 'vue'
-import { uniq } from 'lodash'
-import type { MColProps } from '../../types'
-
-interface Props {
-  name?: MColProps['name']
-  auto?: MColProps['auto']
-  col?: MColProps['col']
-  xs?: MColProps['xs']
-  sm?: MColProps['sm']
-  md?: MColProps['md']
-  lg?: MColProps['lg']
-  xl?: MColProps['xl']
-}
-
-const props = defineProps<Props>()
-const classes = computed(() => {
-  const list: string[] = ['m--col']
-  if (props.auto === !0) {
-    list.push('col-auto')
-  }
-  if (props.col === 'grow') {
-    list.push('col-grow')
-  } else if (props.col === 'shrink') {
-    list.push('col-shrink')
-  } else if (typeof props.col === 'string') {
-    if (props.col?.toString()?.trim()?.length > 0 && !list.includes(`col-${props.col}`)) {
-      list.push(`col-${props.col}`)
-    }
-  }
-
-  for (const k of (['xs', 'sm', 'md', 'lg', 'xl'] as (keyof Props)[])) {
-    if (props[k] && typeof props[k] !== 'boolean') {
-      if (!list.includes(`col-${k}-${props[k]}`)) {
-        list.push(`col-${k}-${props[k]}`)
-      }
-    }
-  }
-
-  if (list.length === 1 && props.col !== !1) {
-    list.push('col')
-  }
-  return uniq(list)
-  // return list
-})
-defineOptions({
-  name: 'MCol',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div
-    :class="classes"
-    :data-input-name="name??undefined"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/grid/MColumn.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-defineOptions({
-  name: 'MColumn',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div
-    class="m--column column"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/grid/MContainer.vue

@@ -1,46 +0,0 @@
-<!--
-  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
-  - Email: mythpe@gmail.com
-  - Mobile: +966590470092
-  - Website: https://www.4myth.com
-  - Github: https://github.com/mythpe
-  -->
-
-<script lang="ts" setup>
-import type { MContainerProps } from '../../types'
-import MythOptions from '../../utils/myth'
-import { computed } from 'vue'
-
-interface Props {
-  size?: MContainerProps['size'];
-  fluid?: MContainerProps['fluid'];
-  dense?: MContainerProps['dense'];
-}
-
-const props = defineProps<Props>()
-const styles = computed(() => MythOptions.options.value?.style ?? {})
-const sizeProp = computed(() => {
-  if (props.size !== undefined) {
-    return props.size
-  }
-  return styles.value.gutters
-})
-defineOptions({
-  name: 'MContainer',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div
-    :class="{
-      'm--container' : !0,
-      'm--container__fluid' : (fluid !== !1 && fluid !== undefined) || (styles.fluid === !0 && (fluid !== !1 && fluid !== undefined)),
-      'm--container__dense' : dense !== !1 && dense !== undefined,
-      [`q-pa-${sizeProp||''}`]: sizeProp && sizeProp !== 'none'
-    }"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/grid/MHelpRow.vue

@@ -1,62 +0,0 @@
-<!--
-  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
-  - Email: mythpe@gmail.com
-  - Mobile: +966590470092
-  - Website: https://www.4myth.com
-  - Github: https://github.com/mythpe
-  -->
-
-<script
-  lang="ts"
-  setup
->
-import { useI18n } from 'vue-i18n'
-
-interface Props {
-  text?: string | undefined;
-  icon?: string | undefined;
-  tooltip?: boolean | undefined;
-}
-
-defineProps<Props>()
-const { t, te } = useI18n({ useScope: 'global' })
-const __ = (s: any) => !s ? '' : te(`attributes.${s}`) ? t(`attributes.${s}`) : te(s) ? t(s) : s
-defineOptions({
-  name: 'MHelpRow',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div class="row">
-    <div class="col-auto">
-      <q-icon
-        :left="!!text && !tooltip"
-        class="cursor-pointer"
-        name="ion-ios-information-circle-outline"
-        size="19px"
-      >
-        <q-tooltip
-          v-if="!!tooltip"
-          anchor="center end"
-          class="bg-transparent text-black text-justify"
-          self="center start"
-          transition-hide="jump-right"
-          transition-show="jump-left"
-        >
-          <q-card style="max-width: 280px">
-            <q-card-section style="font-size: 13px">
-              {{ __(text) }}
-            </q-card-section>
-          </q-card>
-        </q-tooltip>
-      </q-icon>
-    </div>
-    <div
-      v-if="!tooltip && !!text"
-      class="col"
-    >
-      <div v-text="__(text)" />
-    </div>
-  </div>
-</template>

package/src/components/grid/MRow.vue

@@ -1,35 +0,0 @@
-<script
-  lang="ts"
-  setup
->
-import type { MRowProps } from '../../types'
-import { computed } from 'vue'
-import MythOptions from '../../utils/myth'
-
-interface Props {
-  gutter?: MRowProps['gutter'];
-  col?: MRowProps['col'];
-}
-
-const props = defineProps<Props>()
-const defSize = computed<string>(() => MythOptions.options.value.style?.gutters || '')
-const gutterSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
-const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
-defineOptions({
-  name: 'MRow',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <div
-    :class="{
-      'm--row row': !0,
-      [`q-gutter-${gutterSize}`]: gutter !== !1 && gutter !== undefined,
-      [`q-col-gutter-${colSize}`]: col !== !1 && col !== undefined,
-    }"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/typography/MTypingString.vue

@@ -1,78 +0,0 @@
-<script
-  lang="ts"
-  setup
->
-
-import Typed, { type TypedOptions } from 'typed.js'
-import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
-import type { MTypingStringProps } from '../../types'
-
-interface Props {
-  name: MTypingStringProps['name'];
-  tag?: MTypingStringProps['tag'];
-  string: MTypingStringProps['string'];
-  loop?: MTypingStringProps['loop'];
-  typeSpeed?: MTypingStringProps['typeSpeed'];
-  backDelay?: MTypingStringProps['backDelay'];
-  fadeOut?: MTypingStringProps['fadeOut'];
-  options?: MTypingStringProps['options'];
-}
-
-const props = defineProps<Props>()
-
-const elmId = computed(() => `typed-content-${props.name}`)
-const computedOptions = computed(() => ({
-  loop: props.loop === undefined ? !1 : props.loop,
-  typeSpeed: props.typeSpeed === undefined ? 300 : props.typeSpeed,
-  backDelay: props.backDelay,
-  fadeOut: props.fadeOut,
-  strings: typeof props.string === 'string' ? [props.string] : props.string,
-  ...props.options
-} as TypedOptions))
-let typed: Typed | undefined
-const iniTyped = () => {
-  try {
-    typed = new Typed(`#${elmId.value}`, computedOptions.value)
-  } catch (e) {
-    console.log(e)
-  }
-}
-const destroy = () => {
-  if (typed) {
-    try {
-      typed.destroy()
-    } catch (e) {
-
-    }
-  }
-}
-watch(() => props.string, () => {
-  destroy()
-  iniTyped()
-})
-onMounted(() => {
-  if (props.string) {
-    try {
-      iniTyped()
-    } catch (e) {
-      console.log(e)
-      const a = document.getElementById(elmId.value)
-      a && (a.innerHTML = typeof props.string === 'string' ? props.string : props.string.join('<br />'))
-    }
-  }
-})
-onBeforeUnmount(() => destroy())
-defineExpose({ typed })
-defineOptions({
-  name: 'MTypingString',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <component
-    :is="tag || 'span'"
-    :id="elmId"
-    v-bind="$attrs"
-  />
-</template>

package/src/index.sass

@@ -1,28 +0,0 @@
-@import 'quasar/src/css/variables.sass'
-
-$m--container-padding: $space-base !default
-$m--container-fluid-width: 1440px !default
-$m--row-margin-top: $m--container-padding !default
-
-.flex-break
-  flex: 1 0 100% !important
-
-.row
-  .flex-break
-    height: 0 !important
-
-.column
-  .flex-break
-    width: 0 !important
-
-.m--container
-  &__dense
-    padding: 0 !important
-
-  &__fluid
-    max-width: $m--container-fluid-width
-    margin-left: auto
-    margin-right: auto
-
-.m--row + .m--row
-  margin-top: $m--row-margin-top

package/src/types/components.d.ts

@@ -1,163 +0,0 @@
-import type { GlobalComponentConstructor, QBtnProps, QBtnSlots, QItemProps } from 'quasar'
-import type { VNode } from 'vue'
-import { TypedOptions } from 'typed.js'
-
-export type StyleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
-
-export interface MBtnProps extends QBtnProps {
-  //
-}
-
-export interface MBtnSlots extends QBtnSlots {
-  /**
-   * Use for custom content, instead of relying on 'icon' and 'label' props
-   */
-  default: () => VNode[];
-  /**
-   * Override the default QSpinner when in 'loading' state
-   */
-  loading: () => VNode[];
-}
-
-export interface MBlockProps {
-  /**
-   * Size of the padding block.
-   * Default: 'md'
-   */
-  readonly size?: StyleSize | undefined;
-  /**
-   * Rounded block
-   */
-  readonly rounded?: boolean | undefined;
-  /**
-   * Shadow level
-   */
-  readonly shadow?: string | number | 'transition' | 'none' | undefined;
-}
-
-export interface MBlockSlots {
-  default: () => VNode[];
-}
-
-export type ColStyleType =
-  boolean
-  | undefined
-  | string
-  | number
-  | 'auto'
-  | 'grow'
-  | 'shrink'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '11'
-  | '12'
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-
-export interface MColProps {
-  readonly auto?: boolean | undefined;
-  readonly col?: ColStyleType;
-  readonly xs?: ColStyleType;
-  readonly sm?: ColStyleType;
-  readonly md?: ColStyleType;
-  readonly lg?: ColStyleType;
-  readonly xl?: ColStyleType;
-  readonly name?: string;
-}
-
-export interface MColSlots {
-  default: () => VNode[];
-}
-
-export interface MColumnProps {
-  [key: string]: any;
-}
-
-export interface MColumnSlots {
-  default: () => VNode[];
-}
-
-export interface MContainerProps {
-  readonly size?: StyleSize | string | undefined;
-  readonly dense?: boolean | undefined;
-  readonly fluid?: boolean | undefined;
-}
-
-export interface MContainerSlots {
-  default: () => VNode[];
-}
-
-export interface MRowProps {
-  /**
-   * Default: false.
-   */
-  gutter?: boolean | StyleSize | undefined;
-  /**
-   * Default: false.
-   */
-  col?: boolean | StyleSize | undefined;
-}
-
-export interface MRowSlots {
-  default: () => VNode[];
-}
-
-export interface MHelpRowProps extends Partial<QItemProps> {
-  text?: string | undefined;
-  icon?: string | undefined;
-  tooltip?: boolean | undefined;
-}
-
-export interface MHelpRowSlots {
-  default: () => VNode[];
-}
-
-export interface MTypingStringProps {
-  name: number | string;
-  tag?: string;
-  string: string | string[];
-  loop?: TypedOptions['loop'];
-  typeSpeed?: TypedOptions['typeSpeed'];
-  backDelay?: TypedOptions['backDelay'];
-  fadeOut?: TypedOptions['fadeOut'];
-  options?: Omit<TypedOptions, 'loop' | 'typeSpeed' | 'backDelay' | 'fadeOut'>;
-}
-
-export interface MTypingStringSlots {
-  default: () => VNode[];
-}
-
-declare module '@vue/runtime-core' {
-  interface GlobalComponents {
-    // Form.
-    MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
-
-    // Grid.
-    MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;
-    MCol: GlobalComponentConstructor<MColProps, MColSlots>;
-    MColumn: GlobalComponentConstructor<MColumnProps, MColumnSlots>;
-    MContainer: GlobalComponentConstructor<MContainerProps, MContainerSlots>;
-    MHelpRow: GlobalComponentConstructor<MHelpRowProps, MHelpRowSlots>;
-    MRow: GlobalComponentConstructor<MRowProps, MRowSlots>;
-    // Typography.
-    MTypingString: GlobalComponentConstructor<MTypingStringProps, MTypingStringSlots>;
-  }
-}

package/src/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components'
-export * from './myth'

package/src/types/myth.d.ts

@@ -1,42 +0,0 @@
-import type { QBtnProps } from 'quasar'
-import type { Ref } from 'vue'
-import type { MBlockProps, StyleSize } from './components'
-
-export interface UiOptionsContext {
-  /**
-   * Style of the components.
-   */
-  style?: {
-    /**
-     * Apply Padding on all sides of components.
-     */
-    gutters?: StyleSize | undefined;
-    /**
-     * Apply Fluid on all sides of containers.
-     */
-    fluid?: boolean | undefined;
-  };
-  /**
-   * MBtn component.
-   */
-  btn?: {
-    props?: Partial<QBtnProps>;
-    loading?: {
-      type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail';
-      color?: string | undefined;
-      size?: string | undefined;
-      label?: boolean | undefined;
-    }
-  };
-  /**
-   * MBlock component.
-   */
-  block?: Partial<MBlockProps>;
-}
-
-export interface MythContext {
-  options: Ref<UiOptionsContext>;
-  setOptions: (values: Partial<UiOptionsContext>) => void;
-  withOptions: (values: Partial<UiOptionsContext>) => void;
-  withBtnOptions: (values: Partial<QBtnProps>) => void;
-}

package/src/utils/myth.js

@@ -1,40 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-exports.__esModule = true;
-exports.myth = void 0;
-var vue_1 = require("vue");
-var quasar_1 = require("quasar");
-var defGutters = 'md';
-var defaultOptions = {
-    style: {
-        gutters: defGutters
-    }
-};
-var optionsRef = (0, vue_1.ref)(__assign({}, defaultOptions));
-exports.myth = {
-    options: optionsRef,
-    setOptions: function (values) {
-        optionsRef.value = (0, quasar_1.extend)(!0, defaultOptions, values);
-    },
-    withOptions: function (values) {
-        optionsRef.value = (0, quasar_1.extend)(!0, defaultOptions, optionsRef.value, values);
-    },
-    withBtnOptions: function (values) {
-        this.withOptions({
-            btn: {
-                props: values
-            }
-        });
-    }
-};
-exports["default"] = exports.myth;

package/src/utils/myth.ts

@@ -1,30 +0,0 @@
-import { ref } from 'vue'
-import type { QBtnProps } from 'quasar'
-import { extend } from 'quasar'
-import type { MythContext, UiOptionsContext } from '../types'
-
-const defGutters = 'md'
-const defaultOptions: UiOptionsContext = {
-  style: {
-    gutters: defGutters
-  }
-}
-const optionsRef = ref<UiOptionsContext>({ ...defaultOptions })
-
-export const myth : MythContext = {
-  options: optionsRef,
-  setOptions (values: Partial<UiOptionsContext>) {
-    optionsRef.value = extend(!0, defaultOptions, values)
-  },
-  withOptions (values: Partial<UiOptionsContext>) {
-    optionsRef.value = extend(!0, defaultOptions, optionsRef.value, values)
-  },
-  withBtnOptions (values: Partial<QBtnProps>) {
-    this.withOptions({
-      btn: {
-        props: values
-      }
-    })
-  }
-}
-export default myth

package/src/utils/vue-plugin.js

@@ -1,37 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.e = void 0;
-var package_json_1 = require("../../package.json");
-var MBtn_vue_1 = require("../components/form/MBtn.vue");
-var MBlock_vue_1 = require("../components/grid/MBlock.vue");
-var MCol_vue_1 = require("../components/grid/MCol.vue");
-var MColumn_vue_1 = require("../components/grid/MColumn.vue");
-var MContainer_vue_1 = require("../components/grid/MContainer.vue");
-var MHelpRow_vue_1 = require("../components/grid/MHelpRow.vue");
-var MRow_vue_1 = require("../components/grid/MRow.vue");
-var MTypingString_vue_1 = require("../components/typography/MTypingString.vue");
-var myth_1 = require("./myth");
-var name = package_json_1["default"].name;
-var version = package_json_1["default"].version;
-function install(app, options) {
-    if (options === void 0) { options = {}; }
-    myth_1.myth.withOptions(options);
-    // Form.
-    app.component('MBtn', MBtn_vue_1["default"]);
-    // Grid.
-    app.component('MBlock', MBlock_vue_1["default"]);
-    app.component('MCol', MCol_vue_1["default"]);
-    app.component('MColumn', MColumn_vue_1["default"]);
-    app.component('MContainer', MContainer_vue_1["default"]);
-    app.component('MHelpRow', MHelpRow_vue_1["default"]);
-    app.component('MRow', MRow_vue_1["default"]);
-    // Typography.
-    app.component('MTypingString', MTypingString_vue_1["default"]);
-}
-exports.e = {
-    name: name,
-    version: version,
-    install: install,
-    myth: myth_1.myth
-};
-exports["default"] = exports.e;

package/src/utils/vue-plugin.ts

@@ -1,41 +0,0 @@
-import js from '../../package.json'
-import MBtn from '../components/form/MBtn.vue'
-import MBlock from '../components/grid/MBlock.vue'
-import MCol from '../components/grid/MCol.vue'
-import MColumn from '../components/grid/MColumn.vue'
-import MContainer from '../components/grid/MContainer.vue'
-import MHelpRow from '../components/grid/MHelpRow.vue'
-import MRow from '../components/grid/MRow.vue'
-import MTypingString from '../components/typography/MTypingString.vue'
-import type { App } from 'vue'
-import { myth } from './myth'
-
-const name = js.name
-const version = js.version
-
-function install (app: App, options = {}) {
-  myth.withOptions(options)
-
-  // Form.
-  app.component('MBtn', MBtn)
-
-  // Grid.
-  app.component('MBlock', MBlock)
-  app.component('MCol', MCol)
-  app.component('MColumn', MColumn)
-  app.component('MContainer', MContainer)
-  app.component('MHelpRow', MHelpRow)
-  app.component('MRow', MRow)
-
-  // Typography.
-  app.component('MTypingString', MTypingString)
-}
-
-export const e = {
-  name,
-  version,
-  install,
-  myth
-}
-
-export default e