@mythpe/quasar-app-extension-qui 0.0.26 → 0.5.0

package/README.md

@@ -1,44 +1,62 @@
-# Quasar App Extension @mythpe/qui
+<p align="center">
+    <a href="https://4myth.com">
+        <img src="https://4myth.com/logo.png" width="120" alt="Ahmed Faiz MyTh">
+    </a>
+</p>
 
-> Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
+[![npm](https://img.shields.io/npm/v/quasar-app-extension-qui.svg?label=quasar-app-extension-qui)](https://www.npmjs.com/package/quasar-app-extension-qui)
+[![npm](https://img.shields.io/npm/dt/quasar-app-extension-qui.svg)](https://www.npmjs.com/package/quasar-app-extension-qui)
 
-[![npm](https://img.shields.io/npm/v/@mythpe/quasar-app-extension-qui.svg?label=@mythpe/quasar-app-extension-qui)](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui)
-[![npm](https://img.shields.io/npm/dt/@mythpe/quasar-app-extension-qui.svg)](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui)
+# Quasar App Extension QUI
 
-# Install
+This extension allows you to effortlessly integrate **QUI** components into your Quasar Framework applications with zero configuration.
 
-```bash
-quasar ext add @mythpe/qui
-```
-Quasar CLI will retrieve it from NPM and install the extension.
+## 💻 Installation
 
-# Invoke
+To automatically install the extension and trigger the **invoke** script, run:
 
 ```bash
-quasar ext invoke @mythpe/qui
+quasar ext add "@mythpe/qui"
 ```
 
+## ⚙️ Extension Lifecycle
 
-## Prompts
+This app extension uses Quasar's lifecycle scripts to automate project setup:
 
-> If your app extension uses prompts, explain them here, otherwise remove this section and remove prompts.js file.
+* **Invoke (`index.js` / `install.js`)**: Automatically executed upon installation. It registers the extension, adds the required boot files, injects
+  UI configurations, and updates your project dependencies.
 
-# Uninstall
+```bash 
+quasar ext invoke "@mythpe/qui"
+```
 
-```bash
-quasar ext remove @mythpe/qui
+* **Uninvoke (`uninstall.js`)**: Automatically executed upon removal. It cleans up your project by safely removing boot files, configuration lines,
+  and injected setup without leaving dead code.
+
+```bash 
+quasar ext uninvoke "@mythpe/qui"
 ```
 
-# Uninvoke
+## 🛠️ Uninstall
+
+To remove the extension and trigger the **uninvoke** cleanup script, run:
 
 ```bash
-quasar ext uninvoke @mythpe/qui
+quasar ext remove "@mythpe/qui"
 ```
 
-# Info
+## 🔗 Related Packages
+
+* **[@mythpe/quasar-ui-qui](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)**: Core UI library package.
+
+## 📞 Support & Contact
+
+Developed with 💙 by **Ahmed Faiz (MyTh)**.
 
-> Add longer information here that will help the user of your app extension.
+* 🌐 **Website:** [4myth.com](https://4myth.com)
+* 📧 **Email:** mythpe@gmail.com
+* 📱 **WhatsApp:** [+966 59 047 0092](https://wa.me)
 
-# License
+## 📄 License
 
-MIT (c) MyTh <mythpe@gmail.com>
+MIT (c) 2026 **Ahmed Faiz (MyTh)**

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@mythpe/quasar-app-extension-qui",
-  "version": "0.0.26",
-  "description": "MyTh Quasar UI Kit App Extension",
-  "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
-  "email": "mythpe@gmail.com",
-  "mobile": "+966590470092",
+  "version": "0.5.0",
+  "author": {
+    "name": "MyTh Ahmed Faiz",
+    "mobile": "+966590470092",
+    "email": "mythpe@gmail.com",
+    "url": "https://www.4myth.com"
+  },
+  "description": "MyTh Quasar App Extension for MyTh UI Kit",
   "license": "MIT",
+  "main": "src/index.cjs",
   "type": "module",
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "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"
+    "publish:npm": "npm publish --access public"
   },
   "dependencies": {
-    "@mythpe/quasar-ui-qui": "^0.0.26"
+    "@mythpe/quasar-ui-qui": "^0.5.0"
   },
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^28 || ^26 || ^24 || ^22.12",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

package/src/boot/register.js

@@ -1,6 +1,11 @@
 import { boot } from 'quasar/wrappers'
 import VuePlugin from '@mythpe/quasar-ui-qui'
 
+/**
+ * Global component auto-registration boot script
+ * Automatically applies the plugin components into the target Quasar application
+ */
 export default boot(({ app }) => {
   app.use(VuePlugin)
+  console.log('💵❤️ Quasar App Extension @mythpe/quasar-ui-qui booted')
 })

package/src/index.cjs

@@ -0,0 +1,83 @@
+//const path = require('path')
+//const fs = require('fs')
+
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ */
+//const path = require('path')
+
+function extendConf(conf, api) {
+  // register our boot file
+  conf.boot.push('~@mythpe/quasar-app-extension-qui/src/boot/register.js')
+
+  // make sure the stylesheet goes through webpack to avoid SSR issues
+  //conf.css.push('~@mythpe/quasar-ui-qui/src/index.scss')
+
+  if (api.hasVite) {
+    //conf.build.alias['#myth'] = path.resolve(__dirname, '../../ui/dist/types/index.d.ts')
+    //conf.build.alias['#myth'] = path.resolve(__dirname, '~@mythpe/quasar-ui-qui/dist/types/index.d.ts')
+    //conf.build.alias['#myth'] = 'node_modules/@mythpe/quasar-ui-qui/dist/types/index.cjs'
+    //conf.build.alias['#myth'] = '@mythpe/quasar-ui-qui/dist/types/index.d.ts'
+    //conf.build.alias['#myth'] = './node_modules/@mythpe/quasar-ui-qui/dist/index.cjs'
+    //conf.build.alias['#myth'] = './../node_modules/@mythpe/quasar-ui-qui/dist/index.umd.cjs'
+    //conf.build.alias['#myth'] = '@mythpe/quasar-ui-qui/dist/types/index.d.ts'
+    //conf.build.alias['#myth'] = '@mythpe/quasar-ui-qui/dist/types/index.d.ts'
+    //conf.build.alias['#myth'] = '@mythpe/quasar-ui-qui/src/index.ts'
+  }
+
+  if (api.hasWebpack) {
+    api.chainWebpack(chain => {
+      chain.resolve.alias
+        //.set('#myth', path.resolve(__dirname, '../ui/dist'))
+        .set('#myth', './node_modules/@mythpe/quasar-ui-qui/dist/index.cjs')
+    })
+
+    // 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/)
+  }
+}
+
+module.exports = function (api) {
+  // Quasar compatibility check; you may need
+  // hard dependencies, as in a minimum version of the "quasar"
+  // package or a minimum version of "@quasar/app-*" CLI
+  api.compatibleWith('quasar', '^2.0.0')
+
+  if (api.hasVite) {
+    api.compatibleWith('@quasar/app-vite', '^1.5.0 || ^2.0.0')
+  } else if (api.hasWebpack) {
+    api.compatibleWith('@quasar/app-webpack', '^3.10.0 || ^4.0.0')
+  }
+
+  // Uncomment the line below if you provide a JSON API for your component
+  // 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-ui-qui/src/directives/my-directive.json')
+
+  // We extend /quasar.conf.js
+  api.extendQuasarConf(conf => extendConf(conf, api))
+
+  api.registerCommand('myth-routes', ({ args, params }) => {
+    //const routesPath = path.join(process.cwd(), 'src/router/routes.ts')
+    //const outputPath = path.join(process.cwd(), 'src/router/routes-dot.json')
+    //if (!fs.existsSync(routesPath)) {
+    //  console.error('❌ لم يتم العثور على ملف src/router/routes.ts')
+    //  return
+    //}
+    try {
+      //const fileContent = fs.readFileSync(routesPath, 'utf-8')
+      //console.log('fileContent: ', fileContent)
+      //const nameRegex = /name:\s*['"`]([^'"`]+)['"`]/g
+      //let match
+      //const routeNames = []
+    } catch (error) {
+      console.error('❌ Error:', error.message)
+    }
+  })
+}

package/src/install.js

@@ -11,8 +11,8 @@ export default function (api) {
   api.compatibleWith('quasar', '^2.0.0')
 
   if (api.hasVite) {
-    api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0-rc.1')
+    api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0')
   } else if (api.hasWebpack) {
-    api.compatibleWith('@quasar/app-webpack', '^3.10.0 || ^4.0.0-rc.1')
+    api.compatibleWith('@quasar/app-webpack', '^3.10.0 || ^4.0.0')
   }
 }

package/src/prompts.js

@@ -9,36 +9,36 @@
  *
  * Example:
 
-  return [
-    {
-      name: 'name',
-      type: 'string',
-      required: true,
-      message: 'Quasar CLI Extension name (without prefix)',
-    },
-    {
-      name: 'preset',
-      type: 'checkbox',
-      message: 'Check the features needed for your project:',
-      choices: [
-        {
-          name: 'Install script',
-          value: 'install'
-        },
-        {
-          name: 'Prompts script',
-          value: 'prompts'
-        },
-        {
-          name: 'Uninstall script',
-          value: 'uninstall'
-        }
-      ]
-    }
-  ]
+ return [
+ {
+ name: 'name',
+ type: 'string',
+ required: true,
+ message: 'Quasar CLI Extension name (without prefix)',
+ },
+ {
+ name: 'preset',
+ type: 'checkbox',
+ message: 'Check the features needed for your project:',
+ choices: [
+ {
+ name: 'Install script',
+ value: 'install'
+ },
+ {
+ name: 'Prompts script',
+ value: 'prompts'
+ },
+ {
+ name: 'Uninstall script',
+ value: 'uninstall'
+ }
+ ]
+ }
+ ]
 
  */
 
-export default function (api) {
+export default function (_api) {
   return []
 }

package/src/uninstall.js

@@ -4,6 +4,6 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/uninstall-api
  */
 
-export default function (api) {
+export default function (_api) {
   //
 }

package/jsconfig.json

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

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.js

@@ -1,48 +0,0 @@
-/**
- * Quasar App Extension index/runner script
- * (runs on each dev/build)
- *
- * Docs: https://quasar.dev/app-extensions/development-guide/index-api
- */
-
-function extendConf (conf, api) {
-  // register our boot file
-  conf.boot.push('~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(/quasar-app-extension-qui[\\/]src/)
-  }
-
-  // make sure the stylesheet goes through webpack to avoid SSR issues
-  conf.css.push('~quasar-ui-qui/src/index.sass')
-}
-
-export default function (api) {
-  // Quasar compatibility check; you may need
-  // hard dependencies, as in a minimum version of the "quasar"
-  // package or a minimum version of "@quasar/app-*" CLI
-  api.compatibleWith('quasar', '^2.0.0')
-
-  if (api.hasVite) {
-    api.compatibleWith('@quasar/app-vite', '^1.5.0 || ^2.0.0-rc.1')
-  }
-  else if (api.hasWebpack) {
-    api.compatibleWith('@quasar/app-webpack', '^3.10.0 || ^4.0.0-rc.1')
-  }
-
-
-  // Uncomment the line below if you provide a JSON API for your component
-  // api.registerDescribeApi('MyComponent', '~quasar-ui-qui/src/components/MyComponent.json')
-
-  // Uncomment the line below if you provide a JSON API for your directive
-  // api.registerDescribeApi('my-directive', '~quasar-ui-qui/src/directives/my-directive.json')
-
-
-  // We extend /quasar.conf.js
-  api.extendQuasarConf(extendConf)
-}

package/src/index.sass

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

@@ -1,41 +0,0 @@
-import js from '../../package.json'
-import myth from './myth'
-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'
-
-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

package/tsconfig.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "./",
-    "rootDir": "./",
-    "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/**/*"
-  ]
-}