@mythpe/quasar-ui-qui 0.0.14 → 0.0.15-dev

package/index.d.ts

@@ -1,6 +1,5 @@
-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
+import * as Plugin from './src/utils/vue-plugin'
+export default Plugin

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.14",
+  "version": "0.0.15-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,7 +3,7 @@
   setup
 >
 import { computed } from 'vue'
-import { uniq } from 'lodash'
+// import { uniq } from 'lodash'
 import type { MColProps } from '../../types'
 
 interface Props {
@@ -44,7 +44,8 @@ const classes = computed(() => {
   if (list.length === 1 && props.col !== !1) {
     list.push('col')
   }
-  return uniq(list)
+  // return uniq(list)
+  return list
 })
 defineOptions({
   name: 'MCol',

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

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

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