@mythpe/quasar-ui-qui 0.4.103 → 0.5.0

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) MyTh <mythpe@gmail.com>
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,168 +1,110 @@
-# Component MyComponent and Directive v-my-directive
+<p align="center">
+    <a href="https://4myth.com">
+        <img src="https://4myth.com/logo.png" width="120" alt="Ahmed Faiz MyTh">
+    </a>
+</p>
 
-[![npm](https://img.shields.io/npm/v/@mythpe/quasar-ui-qui.svg?label=@mythpe/quasar-ui-qui)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
-[![npm](https://img.shields.io/npm/dt/@mythpe/quasar-ui-qui.svg)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
+<p align="center">
+  <a href="https://www.npmjs.com/package/@mythpe/quasar-ui-qui">
+    <img src="https://img.shields.io/npm/v/@mythpe/quasar-ui-qui.svg?label=quasar-ui-qui" alt="npm version">
+  </a>
+  <a href="https://www.npmjs.com/package/@mythpe/quasar-ui-qui">
+    <img src="https://img.shields.io/npm/dt/@mythpe/quasar-ui-qui.svg" alt="npm downloads">
+  </a>
+</p>
 
-**Compatible with Quasar UI v2 and Vue 3**.
+# MyTh Quasar UI Kit Extension
 
-# Component MyComponent
+**QUI** is a premium set of Vue 3 components engineered specifically for the Quasar Framework v2 ecosystem.
 
-> Short description of the component
+✨ **Compatibility:** Fully compatible with **Quasar UI v2** and **Vue 3**.
 
-# Directive v-my-directive
+---
 
-> Short description of the directive
+## 🔌 Usage & Integration
 
-# Usage
+### 1. Quasar CLI Project (Recommended)
 
-## Quasar CLI project
-
-Install the [App Extension](../app-extension).
+The easiest way to integrate is via the [App Extension](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui):
+```bash
+quasar ext add qui
+```
 
-**OR**:
+#### Alternative: Manual Package Installation
+If you prefer not to use the App Extension, install the package manually:
 
-Create and register a boot file:
+```bash
+yarn add @mythpe/quasar-ui-qui
+# or
+npm install @mythpe/quasar-ui-qui
+# or
+pnpm add @mythpe/quasar-ui-qui
+```
 
+#### Manual Boot Registration
+Create and register a boot file (`src/boot/myth.[ts|js]`):
 ```js
-import Vue from 'vue'
-import Plugin from '@mythpe/quasar-ui-qui'
+import { defineBoot } from '#q-app/wrappers'
+import { install } from '@mythpe/quasar-ui-qui'
 import '@mythpe/quasar-ui-qui/dist/index.css'
 
-Vue.use(Plugin)
+export default defineBoot(({ app }) => {
+  app.use(install)
+})
 ```
 
-**OR**:
-
-```html
+---
 
-<style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
-
-<script>
-    import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
-
-    export default {
-
-        components: {
-            MyComponent
-        },
-
-
-        directives: {
-            Directive
-        }
-
-    }
-</script>
-```
-
-## Vue CLI project
+### 2. Vue CLI / Vite Project
 
 ```js
-import Vue from 'vue'
-import Plugin from '@mythpe/quasar-ui-qui'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { install } from '@mythpe/quasar-ui-qui'
 import '@mythpe/quasar-ui-qui/dist/index.css'
 
-Vue.use(Plugin)
+const app = createApp(App)
+app.use(install)
+app.mount('#app')
 ```
 
-**OR**:
-
-```html
-
-<style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
-
-<script>
-    import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
-
-    export default {
-
-        components: {
-            MyComponent
-        },
-
-
-        directives: {
-            Directive
-        }
-
-    }
-</script>
-```
+---
 
-## UMD variant
+### 3. UMD Variant (CDN)
 
-Exports `window.mythUi`.
+Global export identifier: `window.Myth`.
 
-Add the following tag(s) after the Quasar ones:
+Add the following tags **after** your Quasar Framework assets:
 
 ```html
-
 <head>
-    <!-- AFTER the Quasar stylesheet tags: -->
-    <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css" rel="stylesheet" type="text/css">
+  <!-- AFTER Quasar stylesheet tags: -->
+  <link
+    href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css"
+    rel="stylesheet"
+    type="text/css"
+  />
+
+  <!-- For RTL support use this instead: -->
+  <!-- <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css" rel="stylesheet" type="text/css" /> -->
 </head>
 <body>
-    <!-- at end of body, AFTER Quasar script(s): -->
-    <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
+  <!-- At the end of body, AFTER Quasar script tags: -->
+  <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
 </body>
 ```
 
-If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
-
-```html
-
-<link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
-```
-
-# Setup
-
-```bash
-$ yarn
-```
-
-# Developing
-
-```bash
-# start dev in SPA mode
-$ yarn dev
-
-# start dev in UMD mode
-$ yarn dev:umd
-
-# start dev in SSR mode
-$ yarn dev:ssr
-
-# start dev in Cordova iOS mode
-$ yarn dev:ios
-
-# start dev in Cordova Android mode
-$ yarn dev:android
-
-# start dev in Electron mode
-$ yarn dev:electron
-```
-
-# Building package
-
-```bash
-$ yarn build
-```
-
-# Adding Testing Components
-
-in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location
-will automatically be picked up by dynamic routing and added to the test page.
-
-# Adding Assets
+---
 
-If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js`
-file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and
-put into the `ui/dist` folder.
+## 👨‍💻 Author & Developer
 
-# Donate
 
-If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
+| **Developer** | Ahmed Faiz (MyTh) |
+| :--- | :--- |
+| 🌐 **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)**. All rights reserved.

package/package.json

@@ -1,86 +1,76 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.4.103",
-  "description": "MyTh Quasar UI Kit App Extension",
+  "version": "0.5.0",
   "author": {
     "name": "MyTh Ahmed Faiz",
     "mobile": "+966590470092",
     "email": "mythpe@gmail.com",
     "url": "https://www.4myth.com"
   },
+  "description": "MyTh Quasar UI Plugin",
   "license": "MIT",
   "type": "module",
-  "module": "src/index.esm.js",
-  "main": "src/index.common.js",
-  "types": "./types.d.ts",
+  "main": "./dist/index.common.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.common.js"
+    }
+  },
   "scripts": {
-    "lint": "eslint ./src --ext .js,.ts,.vue ./",
-    "lint:fix": "eslint --fix --ext .js,.ts,.vue ./src",
-    "dev": "cd ../dev && yarn dev && cd ..",
-    "dev:umd": "yarn build && node build/script.open-umd.js",
-    "dev:ssr": "cd ../dev && yarn 'dev:ssr' && cd ..",
-    "dev:ios": "cd ../dev && yarn 'dev:ios' && cd ..",
-    "dev:android": "cd ../dev && yarn 'dev:android' && cd ..",
-    "dev:electron": "cd ../dev && yarn 'dev:electron' && cd ..",
-    "build": "node build/index.js",
-    "build:js": "node build/script.javascript.js",
-    "build:css": "node build/script.css.js"
+    "clean": "rimraf dist",
+    "build": "yarn clean && vite build",
+    "dev": "cd dev && yarn dev && cd ..",
+    "dev:ssr": "cd dev && yarn dev:ssr && cd ..",
+    "dev:ios": "cd dev && yarn dev:ios && cd ..",
+    "dev:android": "cd dev && yarn dev:android && cd ..",
+    "dev:electron": "cd dev && yarn dev:electron && cd ..",
+    "lint": "eslint \"./src/**/*.{ts,js,cjs,mjs,vue}\"",
+    "lint:fix": "eslint \"./src/**/*.{ts,js,cjs,mjs,vue}\" --fix",
+    "format": "prettier --write \"**/*.{js,ts,vue,css,scss,html,md,json}\" --ignore-path ../.gitignore"
   },
-  "dependencies": {
-    "@ckeditor/ckeditor5-vue": "^7.3.0",
-    "@vee-validate/i18n": "^4.14.7",
-    "@vee-validate/rules": "^4.14.7",
-    "axios": "^1.7.8",
-    "change-case": "^5.4.4",
-    "pluralize": "^8.0.0",
-    "qs": "^6.13.1",
-    "radash": "^12.1.0",
-    "typed.js": "^2.1.0",
-    "vee-validate": "^4.14.7",
-    "vue-i18n": "^11.1.2",
-    "vue3-google-map": "^0.22.0",
-    "vue3-signature": "^0.2.4"
+  "peerDependencies": {
+    "quasar": "^2.19.3",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.0",
+    "vue-i18n": "^11.4.2"
   },
   "devDependencies": {
-    "@quasar/app-webpack": "^3.15.1",
-    "@quasar/extras": "^1.16.13",
-    "@rollup/plugin-buble": "^1.0.3",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
-    "@types/express": "^5.0.0",
-    "@types/google.maps": "^3.58.1",
-    "@types/node": "^22.10.1",
+    "@eslint/js": "^10.0.1",
+    "@microsoft/api-extractor": "^7.58.7",
+    "@quasar/app-vite": "^2.6.0",
+    "@quasar/app-webpack": "^4.4.5",
+    "@quasar/extras": "^1.18.0",
+    "@types/node": "^25.8.0",
     "@types/pluralize": "^0.0.33",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
-    "autoprefixer": "^10.4.20",
-    "chalk": "^5.3.0",
-    "ckeditor5": "^45.1.0",
-    "core-js": "^3.39.0",
-    "cssnano": "^7.0.6",
-    "eslint": "^8.57.0",
-    "@vue/eslint-config-typescript": "^14.4.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": "^11.2.0",
-    "open": "^10.1.0",
-    "postcss": "^8.4.49",
-    "quasar": "^2.17.4",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.27.4",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "autoprefixer": "^10.5.0",
+    "axios": "^1.16.1",
+    "change-case": "^5.4.4",
+    "eslint": "^10.4.0",
+    "eslint-plugin-vue": "^10.9.1",
+    "globals": "^17.6.0",
+    "pluralize": "^8.0.0",
+    "postcss": "^8.5.14",
+    "prettier": "^3.8.3",
+    "quasar": "^2.19.3",
+    "rimraf": "^6.1.3",
     "rtlcss": "^4.3.0",
-    "sass": "^1.81.0",
-    "typescript": "^5.9.2",
-    "uglify-js": "^3.19.3",
-    "vite-plugin-checker": "^0.10.0",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "vue-tsc": "^3.0.7",
-    "zlib": "^1.0.5"
+    "sass": "^1.99.0",
+    "typescript": "^6.0.3",
+    "vee-validate": "^4.15.1",
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^5.0.0",
+    "vue": "^3.5.34",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-i18n": "^11.4.2",
+    "vue-router": "^5.0.7",
+    "vue-tsc": "^3.2.9"
   },
   "browserslist": [
     "last 4 Chrome versions",
@@ -93,7 +83,7 @@
     "last 4 iOS versions"
   ],
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^28 || ^26 || ^24 || ^22.12",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

package/rREADME.md

@@ -0,0 +1,147 @@
+# MyTh Quasar UI Kit Extintion
+
+[![npm](https://img.shields.io/npm/v/@mythpe/quasar-ui-qui.svg?label=quasar-ui-qui)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
+[![npm](https://img.shields.io/npm/dt/@mythpe/quasar-ui-qui.svg)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
+
+**Compatible with Quasar UI v2 and Vue 3**.
+
+# Usage
+
+## Quasar CLI project
+
+Install the [App Extension](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui).
+
+**OR**:
+
+Create and register a boot file:
+
+```js
+import Vue from 'vue'
+import Plugin from '@mythpe/quasar-ui-qui'
+import '@mythpe/quasar-ui-qui/dist/index.css'
+
+Vue.use(Plugin)
+```
+
+**OR**:
+
+```html
+<style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
+
+<script>
+  import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
+
+  export default {
+    components: {
+      MyComponent
+    },
+    directives: {
+      Directive
+    }
+  }
+</script>
+```
+
+## Vue CLI project
+
+```js
+import Vue from 'vue'
+import Plugin from '@mythpe/quasar-ui-qui'
+import '@mythpe/quasar-ui-qui/dist/index.css'
+
+Vue.use(Plugin)
+```
+
+**OR**:
+
+```html
+<style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
+
+<script>
+  import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
+
+  export default {
+    components: {
+      MyComponent
+    },
+    directives: {
+      Directive
+    }
+  }
+</script>
+```
+
+## UMD variant
+
+Exports `window.Myth`.
+
+Add the following tag(s) after the Quasar ones:
+
+```html
+<head>
+  <!-- AFTER the Quasar stylesheet tags: -->
+  <link
+    href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css"
+    rel="stylesheet"
+    type="text/css"
+  />
+</head>
+<body>
+  <!-- at end of body, AFTER Quasar script(s): -->
+  <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
+</body>
+```
+
+If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
+
+```html
+<link
+  href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css"
+  rel="stylesheet"
+  type="text/css"
+/>
+```
+
+# Setup
+
+```bash
+$ yarn
+```
+
+# Developing
+
+```bash
+# start dev in SPA mode
+$ yarn dev
+
+# start dev in UMD mode
+$ yarn dev:umd
+
+# start dev in SSR mode
+$ yarn dev:ssr
+
+# start dev in Cordova iOS mode
+$ yarn dev:ios
+
+# start dev in Cordova Android mode
+$ yarn dev:android
+
+# start dev in Electron mode
+$ yarn dev:electron
+```
+
+# Building package
+
+```bash
+$ yarn build
+```
+
+# Adding Assets
+
+If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js`
+file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and
+put into the `ui/dist` folder.
+
+# License
+
+MIT (c) MyTh <mythpe@gmail.com>

package/src/components/MBtn/MBtn.ts

@@ -0,0 +1,38 @@
+import type { QBtnProps } from 'quasar'
+import type { ComponentPublicInstance, VNode } from 'vue'
+import type { SpinnerType } from '../../types/config'
+
+export interface MBtnProps extends Omit<QBtnProps, 'label'> {
+  /**
+   * The text that will be shown on the button
+   */
+  label?: string | number | undefined | null
+  /**
+   * Removes the default button styles
+   */
+  noStyle?: boolean
+  nativeLabel?: boolean | undefined
+  /**
+   * Type of loading indicator
+   */
+  spinner?: SpinnerType
+}
+
+export interface MBtnSlots {
+  /**
+   * 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 MBtn extends ComponentPublicInstance<MBtnProps> {
+  /**
+   * Emulate click on MBtn
+   * @param evt JS event object
+   */
+  click: (evt?: Event) => void
+}