@mythpe/quasar-ui-qui 0.0.7 → 0.0.9

package/.eslintrc.cjs

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

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

package/{index.ts → index.d.ts}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
@@ -8,7 +8,7 @@
   "license": "MIT",
   "module": "src/index.esm.js",
   "main": "src/index.common.js",
-  "types": "types.d.ts",
+  "type": "module",
   "scripts": {
     "dev": "cd ../dev && yarn dev && cd ..",
     "dev:umd": "yarn build && node build/script.open-umd.js",
@@ -20,6 +20,10 @@
     "build:js": "node build/script.javascript.js",
     "build:css": "node build/script.css.js"
   },
+  "dependencies": {
+    "vee-validate": "^4.14.7",
+    "vue-i18n": "^10.0.4"
+  },
   "devDependencies": {
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
@@ -27,10 +31,19 @@
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
+    "@types/node": "^20.5.9",
+    "@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",
+    "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",
@@ -54,7 +67,9 @@
     "last 4 FirefoxAndroid versions",
     "last 4 iOS versions"
   ],
-  "dependencies": {
-    "vue-i18n": "^11.0.0-beta.1"
+  "engines": {
+    "node": "^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
   }
 }

package/src/components/{MBtn.vue → form/MBtn.vue}

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type { MBtnProps } from '../types'
+import type { MBtnProps } from '../../types'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { extend } from 'quasar'
-import { MythOptions } from '../utils'
+import { MythOptions } from '../../utils'
 
 const props = defineProps<MBtnProps>()
-defineOptions({
-  name: 'MBtn',
-  inheritAttrs: !1
-})
-const options = computed(() => MythOptions.getDefaults().btn ?? {})
+const options = computed(() => MythOptions.defaults.value.btn ?? {})
 const { t, te } = useI18n({ useScope: 'global' })
 const getLabel = computed(() => {
   if (props.label !== undefined) {
@@ -23,12 +19,13 @@ const getLabel = computed(() => {
   }
   return props.label
 })
+defineOptions({
+  name: 'MBtn',
+  inheritAttrs: !1
+})
 </script>
 
 <template>
-  <div>
-    <pre>{{ options }}</pre>
-  </div>
   <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
     <template
       v-if="!!options.loading && !$slots.loading"

package/src/components/grid/MBlock.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { MBlockProps } from '../../types'
+import { computed } from 'vue'
+import MythOptions from '../../utils'
+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.defaults.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"
+  >
+    <pre style="direction: ltr;">{{ options }}</pre>
+    <slot />
+  </div>
+</template>

package/src/index.common.js

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

package/src/index.esm.js

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

package/src/index.umd.js

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

package/src/types/VuePlugin.d.ts

@@ -1,6 +1,9 @@
 import type { QBtnProps } from 'quasar'
+import type { Ref } from 'vue'
+import { MBlockProps } from './components'
 
 export interface UiOptions {
+  style?: Record<string, any>;
   btn?: {
     props?: Partial<QBtnProps>;
     loading?: {
@@ -10,4 +13,14 @@ export interface UiOptions {
       label?: boolean | undefined;
     }
   };
+  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;
 }

package/src/types/components.d.ts

@@ -0,0 +1,44 @@
+import type { GlobalComponentConstructor, QBtnProps, QBtnSlots } from 'quasar'
+import type { VNode } from 'vue'
+
+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?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+  /**
+   * Rounded block
+   */
+  readonly rounded?: boolean | undefined;
+  /**
+   * Shadow level
+   */
+  readonly shadow?: string | number | 'transition' | 'none' | undefined;
+}
+
+export interface MBlockSlots {
+  default?: () => VNode[];
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
+    MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;
+  }
+}

package/src/types/index.d.ts

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

package/src/utils.js

@@ -0,0 +1,22 @@
+import { ref } from 'vue';
+const cmDefaults = ref({});
+const MythOptions = {
+    defaults: cmDefaults,
+    setDefaults(values) {
+        cmDefaults.value = { ...values };
+    },
+    withDefaults(values) {
+        cmDefaults.value = { ...cmDefaults.value, ...values };
+    },
+    withBtnDefaults(values) {
+        cmDefaults.value = {
+            ...cmDefaults.value,
+            btn: {
+                ...cmDefaults.value.btn,
+                props: { ...values }
+            }
+        };
+    }
+};
+export default MythOptions;
+export { MythOptions };

package/src/utils.ts

@@ -1,28 +1,26 @@
 import { ref } from 'vue'
 import type { UiOptions } from './types'
-import { QBtnProps } from 'quasar'
+import type { QBtnProps } from 'quasar'
 
-export const MythOptions = {
-  defaults: ref<UiOptions>({}),
-  getDefaults () {
-    return this.defaults.value
-  },
+const cmDefaults = ref<UiOptions>({})
+const MythOptions = {
+  defaults: cmDefaults,
   setDefaults (values: Partial<UiOptions>) {
-    this.defaults.value = { ...values }
+    cmDefaults.value = { ...values }
   },
   withDefaults (values: Partial<UiOptions>) {
-    this.defaults.value = { ...this.defaults.value, ...values }
+    cmDefaults.value = { ...cmDefaults.value, ...values }
   },
   withBtnDefaults (values: Partial<QBtnProps>) {
-    this.defaults.value = {
-      ...this.defaults.value,
+    cmDefaults.value = {
+      ...cmDefaults.value,
       btn: {
-        ...this.defaults.value.btn,
+        ...cmDefaults.value.btn,
         props: { ...values }
       }
     }
-  },
-  btnDefaults () {
-    return this.defaults.value.btn
   }
 }
+
+export default MythOptions
+export { MythOptions }

package/src/vue-plugin.js

@@ -1,13 +1,15 @@
-import MBtn from './components/MBtn.vue'
+import MBtn from './components/form/MBtn.vue'
 import js from '../package.json'
 import { MythOptions } from './utils'
+import MBlock from './components/grid/MBlock.vue'
 
 const name = js.name
 const version = js.version
 
 function install (app, options = {}) {
-  MythOptions.setDefaults(options)
-  app.component(MBtn.name, MBtn)
+  MythOptions.withDefaults(options)
+  app.component('MBtn', MBtn)
+  app.component('MBlock', MBlock)
 }
 
 export {
@@ -16,3 +18,10 @@ export {
   install,
   MythOptions
 }
+
+export default {
+  name,
+  version,
+  install,
+  MythOptions
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "Preserve",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

package/umd-test.html

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

package/src/types/MBtn.d.ts

@@ -1,21 +0,0 @@
-import type { GlobalComponentConstructor, QBtnProps, QBtnSlots } from 'quasar'
-import type { VNode } from 'vue'
-
-export type MBtnProps = 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[];
-}
-
-declare module '@vue/runtime-core' {
-  interface GlobalComponents {
-    MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
-  }
-}

package/types.d.ts

@@ -1 +0,0 @@
-export * from './src/types'