@mythpe/quasar-app-extension-qui 0.0.5 → 0.0.6-dev

package/README.md

@@ -6,30 +6,39 @@
 [![npm](https://img.shields.io/npm/dt/@mythpe/quasar-app-extension-qui.svg)](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui)
 
 # Install
+
 ```bash
 quasar ext add @mythpe/qui
-quasar ext invoke @mythpe/qui
 ```
 Quasar CLI will retrieve it from NPM and install the extension.
 
+# Invoke
+
+```bash
+quasar ext invoke @mythpe/qui
+```
+
+
 ## Prompts
 
 > If your app extension uses prompts, explain them here, otherwise remove this section and remove prompts.js file.
 
 # Uninstall
+
 ```bash
 quasar ext remove @mythpe/qui
+```
+
+# Uninvoke
+
+```bash
 quasar ext uninvoke @mythpe/qui
 ```
 
 # Info
-> Add longer information here that will help the user of your app extension.
-
-# Other Info
-> Add other information that's not as important to know
 
-# Donate
-If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
+> Add longer information here that will help the user of your app extension.
 
 # License
+
 MIT (c) MyTh <mythpe@gmail.com>

package/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

package/package.json

@@ -1,18 +1,64 @@
 {
   "name": "@mythpe/quasar-app-extension-qui",
-  "version": "0.0.5",
+  "version": "0.0.6-dev",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
-  "mobile": "+966590470092",
   "email": "mythpe@gmail.com",
+  "mobile": "+966590470092",
   "license": "MIT",
   "type": "module",
+  "module": "src/index.js",
+  "main": "src/index.js",
   "scripts": {
     "lint": "eslint --ext .js,.ts,.vue ./",
-    "lint:fix": "eslint --ext .js,.ts,.vue ./ --fix"
+    "lint:fix": "eslint --ext .js,.ts,.vue ./ --fix",
+    "build": "node build/index.cjs",
+    "build:js": "node build/script.javascript.cjs",
+    "build:css": "node build/script.css.cjs"
   },
   "dependencies": {
-    "@mythpe/quasar-ui-qui": "^0.0.5"
+    "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"
+  },
+  "devDependencies": {
+    "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"
   },
   "engines": {
     "node": "^24 || ^22 || ^20 || ^18",

package/src/boot/register.js

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

package/src/components/form/MBtn.vue

@@ -0,0 +1,171 @@
+<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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,64 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,46 @@
+<!--
+  - 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

@@ -0,0 +1,62 @@
+<!--
+  - 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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,78 @@
+<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.js

@@ -9,17 +9,14 @@ function extendConf (conf, api) {
   // register our boot file
   conf.boot.push('~@mythpe/quasar-app-extension-qui/src/boot/register.js')
 
-  if (api.hasWebpack) {
-    // make sure app extension files & ui package gets transpiled
-    const transpileTarget = (
-      conf.build.webpackTranspileDependencies || // q/app-webpack >= v4
-      conf.build.transpileDependencies // q/app-webpack v3
-    )
-    transpileTarget.push(/@mythpe\/quasar-app-extension-qui[\\/]src/)
+  // @quasar/app-vite does not need this
+  if (api.hasVite !== true) {
+    // make sure boot & component files get transpiled
+    conf.build.transpileDependencies.push(/@mythpe\/quasar-app-extension-qui[\\/]src/)
   }
 
   // make sure the stylesheet goes through webpack to avoid SSR issues
-  conf.css.push('~@mythpe/quasar-ui-qui/src/index.sass')
+  conf.css.push('~@mythpe/quasar-app-extension-qui/src/index.sass')
 }
 
 export default function (api) {

package/src/index.sass

@@ -0,0 +1,27 @@
+@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

@@ -0,0 +1,163 @@
+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

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

package/src/types/myth.d.ts

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import { extend } from 'quasar'
+
+const defGutters = 'md'
+const defaultOptions = {
+  style: {
+    gutters: defGutters
+  }
+}
+const optionsRef = ref({ ...defaultOptions })
+
+export const myth = {
+  options: optionsRef,
+  setOptions (values) {
+    optionsRef.value = extend(!0, defaultOptions, values)
+  },
+  withOptions (values) {
+    optionsRef.value = extend(!0, defaultOptions, optionsRef.value, values)
+  },
+  withBtnOptions (values) {
+    this.withOptions({
+      btn: {
+        props: values
+      }
+    })
+  }
+}
+export default myth

package/src/utils/vue-plugin.js

@@ -0,0 +1,40 @@
+import js from '../../package.json'
+import myth from './myth.js'
+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'
+
+const name = js.name
+const version = js.version
+
+function install (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

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "rootDir": "./src",
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "esnext",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "module": "preserve",
+    "noEmit": true,
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ],
+    "strict": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "exclude": [
+    "./build"
+  ],
+  "include": [
+    "src/**/*"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,2 @@
+export * from './src/utils/vue-plugin'
+export * from './src/types'

package/src/types.d.ts

@@ -1 +0,0 @@
-export * from '@mythpe/quasar-ui-qui/types'