@mythpe/quasar-ui-qui 0.0.11 → 0.0.13-dev

package/index.d.ts

@@ -1,6 +1,2 @@
-export * from './src/vue-plugin'
+export * from './src/utils/vue-plugin'
 export * from './src/types'
-export * from './src/utils'
-
-import * as VuePlugin from './src/vue-plugin'
-export default VuePlugin

package/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "ui/*": [
+        "src/*"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.11",
+  "version": "0.0.13-dev",
   "description": "MyTh Quasar UI Kit App Extension",
-  "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
-  "email": "mythpe@gmail.com",
-  "mobile": "+966590470092",
+  "author": {
+    "name": "MyTh Ahmed Faiz",
+    "mobile": "+966590470092",
+    "email": "mythpe@gmail.com",
+    "url": "https://www.4myth.com"
+  },
   "license": "MIT",
+  "type": "module",
   "module": "src/index.esm.js",
   "main": "src/index.common.js",
-  "type": "module",
   "scripts": {
     "dev": "cd ../dev && yarn dev && cd ..",
     "dev:umd": "yarn build && node build/script.open-umd.js",
@@ -21,10 +24,14 @@
     "build:css": "node build/script.css.js"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
     "typed.js": "^2.1.0",
-    "vee-validate": "^4.14.7",
-    "vue-i18n": "^10.0.4"
+    "vee-validate": "^4.14.0",
+    "@vee-validate/i18n": "^4.14.0",
+    "@vee-validate/rules": "^4.14.0",
+    "vue-i18n": "^10.0.0"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@quasar/app-webpack": "^3.13.0",
@@ -33,14 +40,15 @@
     "@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": "^20.5.9",
+    "@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": "^4.1.10",
+    "cssnano": "^7.0.6",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.19.1",
@@ -53,8 +61,9 @@
     "quasar": "^2.16.0",
     "rimraf": "^3.0.0",
     "rollup": "^2.45.0",
-    "rtlcss": "^2.6.1",
+    "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",

package/src/boot/register.ts

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

package/src/components/form/MBtn.vue

@@ -3,10 +3,10 @@ import type { MBtnProps } from '../../types'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { extend } from 'quasar'
-import { MythOptions } from '../../utils'
+import { myth } from '../../utils/myth'
 
 const props = defineProps<MBtnProps>()
-const options = computed(() => MythOptions.defaults.value.btn ?? {})
+const options = computed(() => myth.options.value.btn ?? {})
 const { t, te } = useI18n({ useScope: 'global' })
 const getLabel = computed(() => {
   if (props.label !== undefined) {

package/src/components/grid/MBlock.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MBlockProps } from '../../types'
 import { computed } from 'vue'
-import MythOptions from '../../utils'
+import MythOptions from '../../utils/myth'
 import { extend } from 'quasar'
 
 interface Props {
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
   rounded: !1,
   shadow: 'none'
 })
-const block = computed(() => MythOptions.defaults.value.block ?? {})
+const block = computed(() => MythOptions.options.value.block ?? {})
 const options = computed<Props>(() => extend(!0, { ...props }, block.value))
 defineOptions({
   name: 'MBlock',

package/src/components/grid/MCol.vue

@@ -3,8 +3,8 @@
   setup
 >
 import { computed } from 'vue'
+import { uniq } from 'lodash'
 import type { MColProps } from '../../types'
-import lodash from 'lodash'
 
 interface Props {
   name?: MColProps['name']
@@ -44,7 +44,7 @@ const classes = computed(() => {
   if (list.length === 1 && props.col !== !1) {
     list.push('col')
   }
-  return lodash.uniq(list)
+  return uniq(list)
   // return list
 })
 defineOptions({

package/src/components/grid/MContainer.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import type { MContainerProps } from '../../types'
-import MythOptions from '../../utils'
+import MythOptions from '../../utils/myth'
 import { computed } from 'vue'
 
 interface Props {
@@ -18,7 +18,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const styles = computed(() => MythOptions.defaults.value?.style ?? {})
+const styles = computed(() => MythOptions.options.value?.style ?? {})
 const sizeProp = computed(() => {
   if (props.size !== undefined) {
     return props.size

package/src/components/grid/MRow.vue

@@ -4,7 +4,7 @@
 >
 import type { MRowProps } from '../../types'
 import { computed } from 'vue'
-import MythOptions from '../../utils'
+import MythOptions from '../../utils/myth'
 
 interface Props {
   gutter?: MRowProps['gutter'];
@@ -12,7 +12,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const defSize = computed<string>(() => MythOptions.defaults.value.style?.gutters || '')
+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({

package/src/index.common.js

@@ -1,6 +1 @@
-export * from './vue-plugin'
-export * from './utils'
-
-import * as VuePlugin from './vue-plugin'
-
-export default VuePlugin
+export * from './utils/vue-plugin'

package/src/index.esm.js

@@ -1,6 +1,4 @@
-export * from './vue-plugin'
-export * from './utils'
+export * from './utils/vue-plugin'
 
-import * as VuePlugin from './vue-plugin'
-
-export default VuePlugin
+import * as Plugin from './utils/vue-plugin'
+export default Plugin

package/src/index.umd.js

@@ -1,6 +1,2 @@
-export * from './vue-plugin'
-export * from './utils'
-
-import * as VuePlugin from './vue-plugin'
-
-export default VuePlugin
+import * as Plugin from './utils/vue-plugin'
+export default Plugin

package/src/types/index.d.ts

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

package/src/types/{VuePlugin.d.ts → myth.ts}

@@ -2,7 +2,7 @@ import type { QBtnProps } from 'quasar'
 import type { Ref } from 'vue'
 import type { MBlockProps, StyleSize } from './components'
 
-export interface UiOptions {
+export interface UiOptionsContext {
   /**
    * Style of the components.
    */
@@ -34,11 +34,9 @@ export interface UiOptions {
   block?: Partial<MBlockProps>;
 }
 
-export interface MythOptionsContext {
-  defaults: Ref<UiOptions>;
-  getDefaults: () => UiOptions;
-  setDefaults: (values: Partial<UiOptions>) => void;
-  withDefaults: (values: Partial<UiOptions>) => void;
-  withBtnDefaults: (values: Partial<QBtnProps>) => void;
-  btnDefaults: () => UiOptions;
+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

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

@@ -0,0 +1,43 @@
+import type { App } from 'vue'
+import { name, version } 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'
+
+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 {
+  name,
+  version,
+  install,
+  myth
+}
+
+export default {
+  name,
+  version,
+  install,
+  myth
+}

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    "baseUrl": "./",
+    "rootDir": ".",
+    "outDir": "./dist",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "target": "esnext",
@@ -20,9 +23,12 @@
     "allowUnusedLabels": false,
     "noImplicitOverride": true,
     "exactOptionalPropertyTypes": true,
-    "noUncheckedIndexedAccess": true,
+    "noUncheckedIndexedAccess": true
   },
   "exclude": [
     "./build"
+  ],
+  "include": [
+    "src/**/*"
   ]
 }

package/.eslintrc.cjs

@@ -1,103 +0,0 @@
-module.exports = {
-  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
-  // This option interrupts the configuration hierarchy at this file
-  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
-  root: true,
-
-  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
-  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
-  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
-  parserOptions: {
-    parser: require.resolve('@typescript-eslint/parser'),
-    extraFileExtensions: ['.vue']
-  },
-
-  env: {
-    browser: true,
-    es2021: true,
-    node: true
-  },
-
-  // Rules order is important, please avoid shuffling them
-  extends: [
-    // Base ESLint recommended rules
-    // 'eslint:recommended',
-
-    // https://typescript-eslint.io/getting-started/legacy-eslint-setup
-    // ESLint typescript rules
-    'plugin:@typescript-eslint/recommended',
-
-    // Uncomment any of the lines below to choose desired strictness,
-    // but leave only one uncommented!
-    // See https://eslint.vuejs.org/rules/#available-rules
-    // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-    'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-    'standard'
-  ],
-
-  plugins: [
-    // required to apply rules which need type information
-    '@typescript-eslint',
-
-    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
-    // required to lint *.vue files
-    'vue'
-
-  ],
-
-  globals: {
-    ga: 'readonly', // Google Analytics
-    cordova: 'readonly',
-    __statics: 'readonly',
-    __QUASAR_SSR__: 'readonly',
-    __QUASAR_SSR_SERVER__: 'readonly',
-    __QUASAR_SSR_CLIENT__: 'readonly',
-    __QUASAR_SSR_PWA__: 'readonly',
-    process: 'readonly',
-    Capacitor: 'readonly',
-    chrome: 'readonly'
-  },
-
-  // add your custom rules here
-  rules: {
-
-    // allow async-await
-    'generator-star-spacing': 'off',
-    // allow paren-less arrow functions
-    'arrow-parens': 'off',
-    'one-var': 'off',
-    'no-void': 'off',
-    'multiline-ternary': 'off',
-
-    'import/first': 'off',
-    'import/namespace': 'error',
-    'import/default': 'error',
-    'import/export': 'error',
-    'import/extensions': 'off',
-    'import/no-unresolved': 'off',
-    'import/no-extraneous-dependencies': 'off',
-
-    // The core 'import/named' rules
-    // does not work with type definitions
-    'import/named': 'off',
-
-    'prefer-promise-reject-errors': 'off',
-
-    quotes: ['warn', 'single', { avoidEscape: true }],
-
-    // this rule, if on, would require explicit return type on the `render` function
-    '@typescript-eslint/explicit-function-return-type': 'off',
-
-    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
-    '@typescript-eslint/no-var-requires': 'off',
-
-    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
-    // does not work with type definitions
-    'no-unused-vars': 'off',
-
-    // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    '@typescript-eslint/no-explicit-any': 'off'
-  }
-}

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto eol=lf

package/src/utils.ts

@@ -1,33 +0,0 @@
-import { ref } from 'vue'
-import type { QBtnProps } from 'quasar'
-import { extend } from 'quasar'
-import type { UiOptions } from './types'
-
-const defGutters = 'md'
-const defaultOptions: UiOptions = {
-  style: {
-    gutters: defGutters
-  }
-}
-const cmDefaults = ref<UiOptions>({ ...defaultOptions })
-const MythOptions = {
-  defaults: cmDefaults,
-  setDefaults (values: Partial<UiOptions>) {
-    cmDefaults.value = extend(!0, defaultOptions, values)
-  },
-  withDefaults (values: Partial<UiOptions>) {
-    cmDefaults.value = extend(!0, defaultOptions, cmDefaults.value, values)
-  },
-  withBtnDefaults (values: Partial<QBtnProps>) {
-    cmDefaults.value = {
-      ...cmDefaults.value,
-      btn: {
-        ...cmDefaults.value.btn,
-        props: { ...values }
-      }
-    }
-  }
-}
-
-export default MythOptions
-export { MythOptions }

package/src/vue-plugin.js

@@ -1,43 +0,0 @@
-import js from '../package.json'
-import { MythOptions } from './utils'
-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 = {}) {
-  MythOptions.withDefaults(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 {
-  name,
-  version,
-  install
-}
-
-export default {
-  name,
-  version,
-  install,
-  MythOptions
-}

package/umd-test.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
- <meta charset="utf-8">
- <meta content="IE=edge" http-equiv="X-UA-Compatible">
- <meta content="telephone=no" name="format-detection">
- <meta content="no" name="msapplication-tap-highlight">
- <meta content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width" name="viewport">
-
- <title>UMD test</title>
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
- <link href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css" rel="stylesheet" type="text/css">
- <link href="dist/index.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-<div id="q-app">
- <q-layout view="lHh Lpr fff">
-  <q-header class="glossy bg-primary">
-   <q-toolbar>
-    <q-toolbar-title>
-     quasar-ui-qui v{{ version }}
-    </q-toolbar-title>
-
-    <div>Quasar v{{ $q.version }}</div>
-   </q-toolbar>
-  </q-header>
-
-  <q-page-container>
-   <q-page padding>
-    <ul class="q-mb-lg">
-     <li>In /ui, run: "yarn build"</li>
-     <li class="text-red">You need to build & refresh page on each change manually.</li>
-     <li>Use self-closing tags only!</li>
-     <li>Example: &lt;my-component&gt;&lt;/my-component&gt;</li>
-    </ul>
-   </q-page>
-  </q-page-container>
- </q-layout>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>
-<script src="dist/index.umd.js"></script>
-
-<script>
- const app = Vue.createApp({
-  setup() {
-   return {
-    version: mythUi.version
-   }
-  }
- })
-
- app.use(Quasar)
- app.use(mythUi)
- app.mount('#q-app')
-</script>
-</body>
-</html>