@mythpe/quasar-ui-qui 0.0.16 → 0.0.18

package/jsconfig.json

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
   "mobile": "+966590470092",
   "license": "MIT",
-  "module": "src/index.esm.js",
+  "module": "src/index.aaaesm.js",
   "main": "src/index.common.js",
   "type": "module",
   "scripts": {
@@ -23,10 +23,13 @@
   "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"
   },
   "devDependencies": {
+    "lodash": "^4.17.21",
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
     "@rollup/plugin-buble": "^0.21.3",

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 '../../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 '../../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

@@ -45,6 +45,7 @@ const classes = computed(() => {
     list.push('col')
   }
   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 '../../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 '../../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 → index.ts}

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

package/src/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/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/{vue-plugin.js → vue-plugin.ts}

@@ -1,5 +1,5 @@
-import js from '../package.json'
-import { MythOptions } from './utils'
+import js 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'
@@ -8,12 +8,14 @@ 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'
+import type { App } from 'vue'
 
 const name = js.name
 const version = js.version
 
-function install (app, options = {}) {
-  MythOptions.withDefaults(options)
+function install (app: App, options = {}) {
+  myth.withOptions(options)
+
   // Form.
   app.component('MBtn', MBtn)
 
@@ -29,15 +31,11 @@ function install (app, options = {}) {
   app.component('MTypingString', MTypingString)
 }
 
-export {
-  name,
-  version,
-  install
-}
-
-export default {
+export const e = {
   name,
   version,
   install,
-  MythOptions
+  myth
 }
+
+export default e

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/index.d.ts

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

package/src/index.esm.js

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

package/src/index.umd.js

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

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 }