@mythpe/quasar-ui-qui 0.4.103 → 0.5.1

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,113 @@
-# 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
+The easiest way to integrate is via the [App Extension](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui):
 
-Install the [App Extension](../app-extension).
-
-**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)
+```bash
+quasar ext add @mythpe/qui
 ```
 
-**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
-        },
+#### Alternative: Manual Package Installation
 
+If you prefer not to use the App Extension, install the package manually:
 
-        directives: {
-            Directive
-        }
-
-    }
-</script>
+```bash
+yarn add @mythpe/quasar-ui-qui
+# or
+npm install @mythpe/quasar-ui-qui
+# or
+pnpm add @mythpe/quasar-ui-qui
 ```
 
-## Vue CLI project
+#### 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 {
+### 2. Vue CLI / Vite Project
 
-        components: {
-            MyComponent
-        },
-
-
-        directives: {
-            Directive
-        }
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { install } from '@mythpe/quasar-ui-qui'
+import '@mythpe/quasar-ui-qui/dist/index.css'
 
-    }
-</script>
+const app = createApp(App)
+app.use(install)
+app.mount('#app')
 ```
 
-## UMD variant
+---
 
-Exports `window.mythUi`.
+### 3. UMD Variant (CDN)
 
-Add the following tag(s) after the Quasar ones:
+Global export identifier: `window.Myth`.
 
-```html
+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.
+---
 
-# Donate
+## 👨‍💻 Author & Developer
 
-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,99 +1,90 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.4.103",
-  "description": "MyTh Quasar UI Kit App Extension",
+  "version": "0.5.1",
   "author": {
     "name": "MyTh Ahmed Faiz",
     "mobile": "+966590470092",
     "email": "mythpe@gmail.com",
     "url": "https://www.4myth.com"
   },
+  "description": "MyTh Quasar Ui Kit Extinction",
+  "keywords": [
+    "MyTh",
+    "Quasar",
+    "Vue js",
+    "UI",
+    "Components",
+    "Form Validation",
+    "Internationalization",
+    "UI Kit",
+    "Quasar Extension"
+  ],
   "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/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/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"
+    "lint": "eslint \"./src/**/*.{ts,js,vue}\"",
+    "lint:fix": "eslint \"./src/**/*.{ts,js,vue}\" --fix",
+    "format": "prettier --write \"**/*.{js,ts,vue,css,scss,html,md,json}\" --ignore-path ../.gitignore",
+    "clean": "rimraf dist",
+    "build": "yarn clean && vite build",
+    "release": "yarn version --patch",
+    "minor": "yarn version --minor",
+    "major": "yarn version --major"
   },
-  "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.34",
+    "vue-i18n": "^11.4.4",
+    "vue-router": "^5.0.7",
+    "@quasar/app-vite": "^2.6.0",
+    "@quasar/extras": "^1.18.0",
+    "@quasar/app-webpack": "^4.4.5"
   },
   "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",
+    "@types/node": "^25.9.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",
+    "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",
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^5.0.0",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.3.0"
   },
   "browserslist": [
     "last 4 Chrome versions",
     "last 4 Firefox versions",
     "last 2 Edge versions",
-    "last 4 Safari versions",
-    "last 4 Android versions",
-    "last 4 ChromeAndroid versions",
-    "last 4 FirefoxAndroid versions",
-    "last 4 iOS versions"
+    "last 4 Safari versions"
   ],
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^28 || ^26 || ^24 || ^22.12",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

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
+}

package/src/components/MBtn/MBtn.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import {
+  QBtn,
+  QSpinner,
+  QSpinnerAudio,
+  QSpinnerBall,
+  QSpinnerBars,
+  QSpinnerBox,
+  QSpinnerClock,
+  QSpinnerComment,
+  QSpinnerCube,
+  QSpinnerDots,
+  QSpinnerFacebook,
+  QSpinnerGears,
+  QSpinnerGrid,
+  QSpinnerHearts,
+  QSpinnerHourglass,
+  QSpinnerInfinity,
+  QSpinnerIos,
+  QSpinnerOrbit,
+  QSpinnerOval,
+  QSpinnerPie,
+  QSpinnerPuff,
+  QSpinnerRadio,
+  QSpinnerRings,
+  QSpinnerTail
+} from 'quasar'
+import { computed } from 'vue'
+import type { MBtnProps } from './MBtn'
+import { useMyth } from '../../vue-plugin'
+import { pascalCase } from 'change-case'
+
+interface Props {
+  label?: MBtnProps['label']
+  spinner?: MBtnProps['spinner']
+  loading?: boolean
+  nativeLabel?: boolean
+  noStyle?: boolean
+}
+
+const spinners = {
+  QSpinner,
+  QSpinnerAudio,
+  QSpinnerBall,
+  QSpinnerBars,
+  QSpinnerBox,
+  QSpinnerClock,
+  QSpinnerComment,
+  QSpinnerCube,
+  QSpinnerDots,
+  QSpinnerFacebook,
+  QSpinnerGears,
+  QSpinnerGrid,
+  QSpinnerHearts,
+  QSpinnerHourglass,
+  QSpinnerInfinity,
+  QSpinnerIos,
+  QSpinnerOrbit,
+  QSpinnerOval,
+  QSpinnerPie,
+  QSpinnerPuff,
+  QSpinnerRadio,
+  QSpinnerRings,
+  QSpinnerTail
+}
+const {
+  noStyle = !1,
+  label = undefined,
+  loading = false,
+  nativeLabel = false,
+  spinner = undefined
+} = defineProps<Props>()
+const { __, loadingOptions, componentProps, btnStyle } = useMyth()
+const loadingType = computed(() => {
+  if (spinner !== undefined) {
+    return spinner
+  }
+  return loadingOptions.value?.type
+})
+const spinnerComponent = computed(() => {
+  if (!loadingType.value) {
+    return undefined
+  }
+  if (loadingType.value === 'spinner') {
+    return spinners.QSpinner
+  }
+  const k = pascalCase(`q-spinner-${loadingType.value}`) as keyof typeof spinners
+  return spinners[k]
+})
+const loadingSize = computed(() => loadingOptions.value?.size)
+const loadingColor = computed(() => loadingOptions.value?.color)
+const DEFAULT_LABEL = undefined
+const computedLabel = computed<string | undefined>(() => {
+  if (nativeLabel === !0) {
+    return label === null || label === undefined ? DEFAULT_LABEL : String(label)
+  }
+  if (label === undefined || label === null) {
+    return DEFAULT_LABEL
+  }
+  return __(label)
+})
+const computedAttrs = computed(() => ({
+  ...(noStyle ? {} : btnStyle.value),
+  ...(componentProps.value.btn || {}),
+  ariaLabel: computedLabel.value
+}))
+defineOptions({
+  name: 'MBtn'
+})
+</script>
+
+<template>
+  <q-btn
+    :loading="loading"
+    :label="computedLabel"
+    v-bind="computedAttrs"
+  >
+    <template
+      v-if="!!$slots.loading"
+      #loading
+    >
+      <slot name="loading" />
+    </template>
+    <template
+      v-else-if="!!loadingType && spinnerComponent"
+      #loading
+    >
+      <component
+        :is="spinnerComponent"
+        :color="loadingColor"
+        :size="loadingSize"
+      />
+    </template>
+
+    <template
+      v-if="!!$slots.default"
+      #default
+    >
+      <slot />
+    </template>
+  </q-btn>
+</template>

package/src/components/grid/MColumn/MColumn.ts

@@ -0,0 +1,15 @@
+import type { ComponentPublicInstance, VNode } from 'vue'
+import type { MGridProps } from '../MGrid'
+
+export interface MColumnProps {
+  size?: MGridProps['size']
+  type?: MGridProps['type']
+}
+
+export interface MColumnSlots {
+  default?: () => VNode[]
+}
+
+export interface MColumn extends ComponentPublicInstance<MColumnProps> {
+  //
+}

package/src/components/grid/MColumn/MColumn.vue

@@ -0,0 +1,28 @@
+<!--
+  - 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 MGrid from '../MGrid.vue'
+import type { MColumnProps } from './MColumn'
+
+const { size = undefined, type = undefined } = defineProps<MColumnProps>()
+
+defineOptions({
+  name: 'MColumn'
+})
+</script>
+
+<template>
+  <MGrid
+    grid-type="column"
+    :size="size"
+    :type="type"
+  >
+    <slot />
+  </MGrid>
+</template>