@mythpe/quasar-ui-qui 0.0.1-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +168 -0
  2. package/jsconfig.json +10 -0
  3. package/package.json +82 -0
  4. package/src/components/form/MBtn.vue +168 -0
  5. package/src/components/grid/MBlock.vue +38 -0
  6. package/src/components/grid/MCol.vue +64 -0
  7. package/src/components/grid/MColumn.vue +15 -0
  8. package/src/components/grid/MContainer.vue +46 -0
  9. package/src/components/grid/MHelpRow.vue +62 -0
  10. package/src/components/grid/MRow.vue +35 -0
  11. package/src/components/typography/MTypingString.vue +78 -0
  12. package/src/index.common.js +1 -0
  13. package/src/index.esm.js +4 -0
  14. package/src/index.sass +27 -0
  15. package/src/index.ts +5 -0
  16. package/src/index.umd.js +2 -0
  17. package/src/myth.ts +30 -0
  18. package/src/types/components.d.ts +163 -0
  19. package/src/types/index.d.ts +2 -0
  20. package/src/types/myth.ts +42 -0
  21. package/src/vue-plugin.ts +41 -0
  22. package/tsconfig.json +34 -0
  23. package/types.d.ts +1 -0
package/README.md ADDED
@@ -0,0 +1,168 @@
1
+ # Component MyComponent and Directive v-my-directive
2
+
3
+ [![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)
4
+ [![npm](https://img.shields.io/npm/dt/@mythpe/quasar-ui-qui.svg)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
5
+
6
+ **Compatible with Quasar UI v2 and Vue 3**.
7
+
8
+ # Component MyComponent
9
+
10
+ > Short description of the component
11
+
12
+ # Directive v-my-directive
13
+
14
+ > Short description of the directive
15
+
16
+ # Usage
17
+
18
+ ## Quasar CLI project
19
+
20
+ Install the [App Extension](../app-extension).
21
+
22
+ **OR**:
23
+
24
+ Create and register a boot file:
25
+
26
+ ```js
27
+ import Vue from 'vue'
28
+ import Plugin from '@mythpe/quasar-ui-qui'
29
+ import '@mythpe/quasar-ui-qui/dist/index.css'
30
+
31
+ Vue.use(Plugin)
32
+ ```
33
+
34
+ **OR**:
35
+
36
+ ```html
37
+
38
+ <style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
39
+
40
+ <script>
41
+ import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
42
+
43
+ export default {
44
+
45
+ components: {
46
+ MyComponent
47
+ },
48
+
49
+
50
+ directives: {
51
+ Directive
52
+ }
53
+
54
+ }
55
+ </script>
56
+ ```
57
+
58
+ ## Vue CLI project
59
+
60
+ ```js
61
+ import Vue from 'vue'
62
+ import Plugin from '@mythpe/quasar-ui-qui'
63
+ import '@mythpe/quasar-ui-qui/dist/index.css'
64
+
65
+ Vue.use(Plugin)
66
+ ```
67
+
68
+ **OR**:
69
+
70
+ ```html
71
+
72
+ <style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
73
+
74
+ <script>
75
+ import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
76
+
77
+ export default {
78
+
79
+ components: {
80
+ MyComponent
81
+ },
82
+
83
+
84
+ directives: {
85
+ Directive
86
+ }
87
+
88
+ }
89
+ </script>
90
+ ```
91
+
92
+ ## UMD variant
93
+
94
+ Exports `window.mythUi`.
95
+
96
+ Add the following tag(s) after the Quasar ones:
97
+
98
+ ```html
99
+
100
+ <head>
101
+ <!-- AFTER the Quasar stylesheet tags: -->
102
+ <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css" rel="stylesheet" type="text/css">
103
+ </head>
104
+ <body>
105
+ <!-- at end of body, AFTER Quasar script(s): -->
106
+ <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
107
+ </body>
108
+ ```
109
+
110
+ If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
111
+
112
+ ```html
113
+
114
+ <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
115
+ ```
116
+
117
+ # Setup
118
+
119
+ ```bash
120
+ $ yarn
121
+ ```
122
+
123
+ # Developing
124
+
125
+ ```bash
126
+ # start dev in SPA mode
127
+ $ yarn dev
128
+
129
+ # start dev in UMD mode
130
+ $ yarn dev:umd
131
+
132
+ # start dev in SSR mode
133
+ $ yarn dev:ssr
134
+
135
+ # start dev in Cordova iOS mode
136
+ $ yarn dev:ios
137
+
138
+ # start dev in Cordova Android mode
139
+ $ yarn dev:android
140
+
141
+ # start dev in Electron mode
142
+ $ yarn dev:electron
143
+ ```
144
+
145
+ # Building package
146
+
147
+ ```bash
148
+ $ yarn build
149
+ ```
150
+
151
+ # Adding Testing Components
152
+
153
+ 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
154
+ will automatically be picked up by dynamic routing and added to the test page.
155
+
156
+ # Adding Assets
157
+
158
+ 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`
159
+ 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
160
+ put into the `ui/dist` folder.
161
+
162
+ # Donate
163
+
164
+ If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
165
+
166
+ # License
167
+
168
+ MIT (c) MyTh <mythpe@gmail.com>
package/jsconfig.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "compilerOptions": {
3
+ "baseUrl": ".",
4
+ "paths": {
5
+ "ui/*": [
6
+ "src/*"
7
+ ]
8
+ }
9
+ }
10
+ }
package/package.json ADDED
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "@mythpe/quasar-ui-qui",
3
+ "version": "0.0.1-dev",
4
+ "description": "MyTh Quasar UI Kit App Extension",
5
+ "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
6
+ "email": "mythpe@gmail.com",
7
+ "mobile": "+966590470092",
8
+ "license": "MIT",
9
+ "module": "src/index.esm.js",
10
+ "main": "src/index.common.js",
11
+ "type": "module",
12
+ "scripts": {
13
+ "dev": "cd ../dev && yarn dev && cd ..",
14
+ "dev:umd": "yarn build && node build/script.open-umd.js",
15
+ "dev:ssr": "cd ../dev && yarn 'dev:ssr' && cd ..",
16
+ "dev:ios": "cd ../dev && yarn 'dev:ios' && cd ..",
17
+ "dev:android": "cd ../dev && yarn 'dev:android' && cd ..",
18
+ "dev:electron": "cd ../dev && yarn 'dev:electron' && cd ..",
19
+ "build": "node build/index.js",
20
+ "build:js": "node build/script.javascript.js",
21
+ "build:css": "node build/script.css.js"
22
+ },
23
+ "dependencies": {
24
+ "typed.js": "^2.1.0",
25
+ "vee-validate": "^4.14.0",
26
+ "@vee-validate/i18n": "^4.14.0",
27
+ "@vee-validate/rules": "^4.14.0",
28
+ "vue-i18n": "^10.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "lodash": "^4.17.21",
32
+ "@quasar/app-webpack": "^3.13.0",
33
+ "@quasar/extras": "^1.16.4",
34
+ "@rollup/plugin-buble": "^0.21.3",
35
+ "@rollup/plugin-json": "^4.0.0",
36
+ "@rollup/plugin-node-resolve": "^11.2.1",
37
+ "@rollup/plugin-replace": "^2.4.2",
38
+ "@types/express": "^5.0.0",
39
+ "@types/lodash": "^4.17.13",
40
+ "@types/node": "^22.9.1",
41
+ "@typescript-eslint/eslint-plugin": "^7.16.0",
42
+ "@typescript-eslint/parser": "^7.16.0",
43
+ "autoprefixer": "^10.0.2",
44
+ "chalk": "^4.1.0",
45
+ "core-js": "^3.0.0",
46
+ "cssnano": "^7.0.6",
47
+ "eslint": "^8.57.0",
48
+ "eslint-config-standard": "^17.0.0",
49
+ "eslint-plugin-import": "^2.19.1",
50
+ "eslint-plugin-n": "^15.0.0",
51
+ "eslint-plugin-promise": "^6.0.0",
52
+ "eslint-plugin-vue": "^9.0.0",
53
+ "fs-extra": "^8.1.0",
54
+ "open": "^7.3.0",
55
+ "postcss": "^8.1.9",
56
+ "quasar": "^2.16.0",
57
+ "rimraf": "^3.0.0",
58
+ "rollup": "^2.45.0",
59
+ "rtlcss": "^4.3.0",
60
+ "sass": "^1.33.0",
61
+ "typescript": "~5.5.3",
62
+ "uglify-js": "^3.13.3",
63
+ "vue": "^3.0.0",
64
+ "vue-router": "^4.0.0",
65
+ "zlib": "^1.0.5"
66
+ },
67
+ "browserslist": [
68
+ "last 4 Chrome versions",
69
+ "last 4 Firefox versions",
70
+ "last 2 Edge versions",
71
+ "last 4 Safari versions",
72
+ "last 4 Android versions",
73
+ "last 4 ChromeAndroid versions",
74
+ "last 4 FirefoxAndroid versions",
75
+ "last 4 iOS versions"
76
+ ],
77
+ "engines": {
78
+ "node": "^24 || ^22 || ^20 || ^18",
79
+ "npm": ">= 6.13.4",
80
+ "yarn": ">= 1.21.1"
81
+ }
82
+ }
package/src/components/form/MBtn.vue ADDED
@@ -0,0 +1,168 @@
1
+ <script lang="ts" setup>
2
+ import type { MBtnProps } from '../../types'
3
+ import { useI18n } from 'vue-i18n'
4
+ import { computed } from 'vue'
5
+ import { extend } from 'quasar'
6
+ import { myth } from '../../myth'
7
+
8
+ const props = defineProps<MBtnProps>()
9
+ const options = computed(() => myth.options.value.btn ?? {})
10
+ const { t, te } = useI18n({ useScope: 'global' })
11
+ const getLabel = computed(() => {
12
+ if (props.label !== undefined) {
13
+ if (te(`attributes.${props.label}`)) {
14
+ return t(`attributes.${props.label}`)
15
+ }
16
+ if (te(`${props.label}`)) {
17
+ return t(`${props.label}`)
18
+ }
19
+ }
20
+ return props.label
21
+ })
22
+ defineOptions({
23
+ name: 'MBtn',
24
+ inheritAttrs: !1
25
+ })
26
+ </script>
27
+
28
+ <template>
29
+ <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
30
+ <template
31
+ v-if="!!options.loading && !$slots.loading"
32
+ #loading
33
+ >
34
+ <q-spinner-audio
35
+ v-if="options.loading.type === 'audio'"
36
+ :color="options.loading.color"
37
+ :size="options.loading.size"
38
+ class="on-left"
39
+ />
40
+ <q-spinner-ball
41
+ v-if="options.loading.type === 'ball'"
42
+ :color="options.loading.color"
43
+ :size="options.loading.size"
44
+ class="on-left"
45
+ />
46
+ <q-spinner-bars
47
+ v-if="options.loading.type === 'bars'"
48
+ :color="options.loading.color"
49
+ class="on-left"
50
+ />
51
+ <q-spinner-box
52
+ v-if="options.loading.type === 'box'"
53
+ :color="options.loading.color"
54
+ class="on-left"
55
+ />
56
+ <q-spinner-clock
57
+ v-if="options.loading.type === 'clock'"
58
+ :color="options.loading.color"
59
+ class="on-left"
60
+ />
61
+ <q-spinner-comment
62
+ v-if="options.loading.type === 'comment'"
63
+ :color="options.loading.color"
64
+ class="on-left"
65
+ />
66
+ <q-spinner-cube
67
+ v-if="options.loading.type === 'cube'"
68
+ :color="options.loading.color"
69
+ class="on-left"
70
+ />
71
+ <q-spinner-dots
72
+ v-if="options.loading.type === 'dots'"
73
+ :color="options.loading.color"
74
+ class="on-left"
75
+ />
76
+ <q-spinner-facebook
77
+ v-if="options.loading.type === 'facebook'"
78
+ :color="options.loading.color"
79
+ class="on-left"
80
+ />
81
+ <q-spinner-gears
82
+ v-if="options.loading.type === 'gears'"
83
+ :color="options.loading.color"
84
+ class="on-left"
85
+ />
86
+ <q-spinner-grid
87
+ v-if="options.loading.type === 'grid'"
88
+ :color="options.loading.color"
89
+ class="on-left"
90
+ />
91
+ <q-spinner-hearts
92
+ v-if="options.loading.type === 'hearts'"
93
+ :color="options.loading.color"
94
+ class="on-left"
95
+ />
96
+ <q-spinner-hearts
97
+ v-if="options.loading.type === 'hearts'"
98
+ :color="options.loading.color"
99
+ class="on-left"
100
+ />
101
+ <q-spinner-hourglass
102
+ v-if="options.loading.type === 'hourglass'"
103
+ :color="options.loading.color"
104
+ class="on-left"
105
+ />
106
+ <q-spinner-infinity
107
+ v-if="options.loading.type === 'infinity'"
108
+ :color="options.loading.color"
109
+ class="on-left"
110
+ />
111
+ <q-spinner-ios
112
+ v-if="options.loading.type === 'ios'"
113
+ :color="options.loading.color"
114
+ class="on-left"
115
+ />
116
+ <q-spinner-orbit
117
+ v-if="options.loading.type === 'orbit'"
118
+ :color="options.loading.color"
119
+ class="on-left"
120
+ />
121
+ <q-spinner-oval
122
+ v-if="options.loading.type === 'oval'"
123
+ :color="options.loading.color"
124
+ class="on-left"
125
+ />
126
+ <q-spinner-pie
127
+ v-if="options.loading.type === 'pie'"
128
+ :color="options.loading.color"
129
+ class="on-left"
130
+ />
131
+ <q-spinner-puff
132
+ v-if="options.loading.type === 'puff'"
133
+ :color="options.loading.color"
134
+ class="on-left"
135
+ />
136
+ <q-spinner-radio
137
+ v-if="options.loading.type === 'radio'"
138
+ :color="options.loading.color"
139
+ class="on-left"
140
+ />
141
+ <q-spinner-rings
142
+ v-if="options.loading.type === 'rings'"
143
+ :color="options.loading.color"
144
+ class="on-left"
145
+ />
146
+ <q-spinner-tail
147
+ v-if="options.loading.type === 'tail'"
148
+ :color="options.loading.color"
149
+ class="on-left"
150
+ />
151
+ <template v-if="options.loading.label === !0">
152
+ {{ getLabel }}
153
+ </template>
154
+ </template>
155
+ <template
156
+ v-else-if="!!$slots.loading"
157
+ #loading
158
+ >
159
+ <slot name="loading" />
160
+ </template>
161
+ <template
162
+ v-if="!!$slots.default"
163
+ #default
164
+ >
165
+ <slot name="default" />
166
+ </template>
167
+ </q-btn>
168
+ </template>
package/src/components/grid/MBlock.vue ADDED
@@ -0,0 +1,38 @@
1
+ <script lang="ts" setup>
2
+ import type { MBlockProps } from '../../types'
3
+ import { computed } from 'vue'
4
+ import MythOptions from '../../myth'
5
+ import { extend } from 'quasar'
6
+
7
+ interface Props {
8
+ size?: MBlockProps['size'];
9
+ rounded?: MBlockProps['rounded'];
10
+ shadow?: MBlockProps['shadow'];
11
+ }
12
+
13
+ const props = withDefaults(defineProps<Props>(), {
14
+ size: 'md',
15
+ rounded: !1,
16
+ shadow: 'none'
17
+ })
18
+ const block = computed(() => MythOptions.options.value.block ?? {})
19
+ const options = computed<Props>(() => extend(!0, { ...props }, block.value))
20
+ defineOptions({
21
+ name: 'MBlock',
22
+ inheritAttrs: !1
23
+ })
24
+ </script>
25
+
26
+ <template>
27
+ <div
28
+ :class="{
29
+ 'm---block' : !0,
30
+ [`q-pa-${options.size}`] : options.size && options.size !== 'none',
31
+ 'rounded-borders' : options.rounded === !0,
32
+ [`shadow-${options.shadow}`] : options.shadow && options.shadow !== 'none'
33
+ }"
34
+ v-bind="$attrs"
35
+ >
36
+ <slot />
37
+ </div>
38
+ </template>
package/src/components/grid/MCol.vue ADDED
@@ -0,0 +1,64 @@
1
+ <script
2
+ lang="ts"
3
+ setup
4
+ >
5
+ import { computed } from 'vue'
6
+ import { uniq } from 'lodash'
7
+ import type { MColProps } from '../../types'
8
+
9
+ interface Props {
10
+ name?: MColProps['name']
11
+ auto?: MColProps['auto']
12
+ col?: MColProps['col']
13
+ xs?: MColProps['xs']
14
+ sm?: MColProps['sm']
15
+ md?: MColProps['md']
16
+ lg?: MColProps['lg']
17
+ xl?: MColProps['xl']
18
+ }
19
+
20
+ const props = defineProps<Props>()
21
+ const classes = computed(() => {
22
+ const list: string[] = ['m--col']
23
+ if (props.auto === !0) {
24
+ list.push('col-auto')
25
+ }
26
+ if (props.col === 'grow') {
27
+ list.push('col-grow')
28
+ } else if (props.col === 'shrink') {
29
+ list.push('col-shrink')
30
+ } else if (typeof props.col === 'string') {
31
+ if (props.col?.toString()?.trim()?.length > 0 && !list.includes(`col-${props.col}`)) {
32
+ list.push(`col-${props.col}`)
33
+ }
34
+ }
35
+
36
+ for (const k of (['xs', 'sm', 'md', 'lg', 'xl'] as (keyof Props)[])) {
37
+ if (props[k] && typeof props[k] !== 'boolean') {
38
+ if (!list.includes(`col-${k}-${props[k]}`)) {
39
+ list.push(`col-${k}-${props[k]}`)
40
+ }
41
+ }
42
+ }
43
+
44
+ if (list.length === 1 && props.col !== !1) {
45
+ list.push('col')
46
+ }
47
+ return uniq(list)
48
+ // return list
49
+ })
50
+ defineOptions({
51
+ name: 'MCol',
52
+ inheritAttrs: !1
53
+ })
54
+ </script>
55
+
56
+ <template>
57
+ <div
58
+ :class="classes"
59
+ :data-input-name="name??undefined"
60
+ v-bind="$attrs"
61
+ >
62
+ <slot />
63
+ </div>
64
+ </template>
package/src/components/grid/MColumn.vue ADDED
@@ -0,0 +1,15 @@
1
+ <script lang="ts" setup>
2
+ defineOptions({
3
+ name: 'MColumn',
4
+ inheritAttrs: !1
5
+ })
6
+ </script>
7
+
8
+ <template>
9
+ <div
10
+ class="m--column column"
11
+ v-bind="$attrs"
12
+ >
13
+ <slot />
14
+ </div>
15
+ </template>
package/src/components/grid/MContainer.vue ADDED
@@ -0,0 +1,46 @@
1
+ <!--
2
+ - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
3
+ - Email: mythpe@gmail.com
4
+ - Mobile: +966590470092
5
+ - Website: https://www.4myth.com
6
+ - Github: https://github.com/mythpe
7
+ -->
8
+
9
+ <script lang="ts" setup>
10
+ import type { MContainerProps } from '../../types'
11
+ import MythOptions from '../../myth'
12
+ import { computed } from 'vue'
13
+
14
+ interface Props {
15
+ size?: MContainerProps['size'];
16
+ fluid?: MContainerProps['fluid'];
17
+ dense?: MContainerProps['dense'];
18
+ }
19
+
20
+ const props = defineProps<Props>()
21
+ const styles = computed(() => MythOptions.options.value?.style ?? {})
22
+ const sizeProp = computed(() => {
23
+ if (props.size !== undefined) {
24
+ return props.size
25
+ }
26
+ return styles.value.gutters
27
+ })
28
+ defineOptions({
29
+ name: 'MContainer',
30
+ inheritAttrs: !1
31
+ })
32
+ </script>
33
+
34
+ <template>
35
+ <div
36
+ :class="{
37
+ 'm--container' : !0,
38
+ 'm--container__fluid' : (fluid !== !1 && fluid !== undefined) || (styles.fluid === !0 && (fluid !== !1 && fluid !== undefined)),
39
+ 'm--container__dense' : dense !== !1 && dense !== undefined,
40
+ [`q-pa-${sizeProp||''}`]: sizeProp && sizeProp !== 'none'
41
+ }"
42
+ v-bind="$attrs"
43
+ >
44
+ <slot />
45
+ </div>
46
+ </template>
package/src/components/grid/MHelpRow.vue ADDED
@@ -0,0 +1,62 @@
1
+ <!--
2
+ - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
3
+ - Email: mythpe@gmail.com
4
+ - Mobile: +966590470092
5
+ - Website: https://www.4myth.com
6
+ - Github: https://github.com/mythpe
7
+ -->
8
+
9
+ <script
10
+ lang="ts"
11
+ setup
12
+ >
13
+ import { useI18n } from 'vue-i18n'
14
+
15
+ interface Props {
16
+ text?: string | undefined;
17
+ icon?: string | undefined;
18
+ tooltip?: boolean | undefined;
19
+ }
20
+
21
+ defineProps<Props>()
22
+ const { t, te } = useI18n({ useScope: 'global' })
23
+ const __ = (s: any) => !s ? '' : te(`attributes.${s}`) ? t(`attributes.${s}`) : te(s) ? t(s) : s
24
+ defineOptions({
25
+ name: 'MHelpRow',
26
+ inheritAttrs: !1
27
+ })
28
+ </script>
29
+
30
+ <template>
31
+ <div class="row">
32
+ <div class="col-auto">
33
+ <q-icon
34
+ :left="!!text && !tooltip"
35
+ class="cursor-pointer"
36
+ name="ion-ios-information-circle-outline"
37
+ size="19px"
38
+ >
39
+ <q-tooltip
40
+ v-if="!!tooltip"
41
+ anchor="center end"
42
+ class="bg-transparent text-black text-justify"
43
+ self="center start"
44
+ transition-hide="jump-right"
45
+ transition-show="jump-left"
46
+ >
47
+ <q-card style="max-width: 280px">
48
+ <q-card-section style="font-size: 13px">
49
+ {{ __(text) }}
50
+ </q-card-section>
51
+ </q-card>
52
+ </q-tooltip>
53
+ </q-icon>
54
+ </div>
55
+ <div
56
+ v-if="!tooltip && !!text"
57
+ class="col"
58
+ >
59
+ <div v-text="__(text)" />
60
+ </div>
61
+ </div>
62
+ </template>
package/src/components/grid/MRow.vue ADDED
@@ -0,0 +1,35 @@
1
+ <script
2
+ lang="ts"
3
+ setup
4
+ >
5
+ import type { MRowProps } from '../../types'
6
+ import { computed } from 'vue'
7
+ import MythOptions from '../../myth'
8
+
9
+ interface Props {
10
+ gutter?: MRowProps['gutter'];
11
+ col?: MRowProps['col'];
12
+ }
13
+
14
+ const props = defineProps<Props>()
15
+ const defSize = computed<string>(() => MythOptions.options.value.style?.gutters || '')
16
+ const gutterSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
17
+ const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
18
+ defineOptions({
19
+ name: 'MRow',
20
+ inheritAttrs: !1
21
+ })
22
+ </script>
23
+
24
+ <template>
25
+ <div
26
+ :class="{
27
+ 'm--row row': !0,
28
+ [`q-gutter-${gutterSize}`]: gutter !== !1 && gutter !== undefined,
29
+ [`q-col-gutter-${colSize}`]: col !== !1 && col !== undefined,
30
+ }"
31
+ v-bind="$attrs"
32
+ >
33
+ <slot />
34
+ </div>
35
+ </template>
package/src/components/typography/MTypingString.vue ADDED
@@ -0,0 +1,78 @@
1
+ <script
2
+ lang="ts"
3
+ setup
4
+ >
5
+
6
+ import Typed, { type TypedOptions } from 'typed.js'
7
+ import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
8
+ import type { MTypingStringProps } from '../../types'
9
+
10
+ interface Props {
11
+ name: MTypingStringProps['name'];
12
+ tag?: MTypingStringProps['tag'];
13
+ string: MTypingStringProps['string'];
14
+ loop?: MTypingStringProps['loop'];
15
+ typeSpeed?: MTypingStringProps['typeSpeed'];
16
+ backDelay?: MTypingStringProps['backDelay'];
17
+ fadeOut?: MTypingStringProps['fadeOut'];
18
+ options?: MTypingStringProps['options'];
19
+ }
20
+
21
+ const props = defineProps<Props>()
22
+
23
+ const elmId = computed(() => `typed-content-${props.name}`)
24
+ const computedOptions = computed(() => ({
25
+ loop: props.loop === undefined ? !1 : props.loop,
26
+ typeSpeed: props.typeSpeed === undefined ? 300 : props.typeSpeed,
27
+ backDelay: props.backDelay,
28
+ fadeOut: props.fadeOut,
29
+ strings: typeof props.string === 'string' ? [props.string] : props.string,
30
+ ...props.options
31
+ } as TypedOptions))
32
+ let typed: Typed | undefined
33
+ const iniTyped = () => {
34
+ try {
35
+ typed = new Typed(`#${elmId.value}`, computedOptions.value)
36
+ } catch (e) {
37
+ console.log(e)
38
+ }
39
+ }
40
+ const destroy = () => {
41
+ if (typed) {
42
+ try {
43
+ typed.destroy()
44
+ } catch (e) {
45
+
46
+ }
47
+ }
48
+ }
49
+ watch(() => props.string, () => {
50
+ destroy()
51
+ iniTyped()
52
+ })
53
+ onMounted(() => {
54
+ if (props.string) {
55
+ try {
56
+ iniTyped()
57
+ } catch (e) {
58
+ console.log(e)
59
+ const a = document.getElementById(elmId.value)
60
+ a && (a.innerHTML = typeof props.string === 'string' ? props.string : props.string.join('<br />'))
61
+ }
62
+ }
63
+ })
64
+ onBeforeUnmount(() => destroy())
65
+ defineExpose({ typed })
66
+ defineOptions({
67
+ name: 'MTypingString',
68
+ inheritAttrs: !1
69
+ })
70
+ </script>
71
+
72
+ <template>
73
+ <component
74
+ :is="tag || 'span'"
75
+ :id="elmId"
76
+ v-bind="$attrs"
77
+ />
78
+ </template>
package/src/index.common.js ADDED
@@ -0,0 +1 @@
1
+ export * from './vue-plugin'
package/src/index.esm.js ADDED
@@ -0,0 +1,4 @@
1
+ import * as VuePlugin from './vue-plugin'
2
+
3
+ export * from './vue-plugin'
4
+ export default VuePlugin
package/src/index.sass ADDED
@@ -0,0 +1,27 @@
1
+ @import 'quasar/src/css/variables.sass'
2
+ $m--container-padding: $space-base !default
3
+ $m--container-fluid-width: 1440px !default
4
+ $m--row-margin-top: $m--container-padding !default
5
+
6
+ .flex-break
7
+ flex: 1 0 100% !important
8
+
9
+ .row
10
+ .flex-break
11
+ height: 0 !important
12
+
13
+ .column
14
+ .flex-break
15
+ width: 0 !important
16
+
17
+ .m--container
18
+ &__dense
19
+ padding: 0 !important
20
+
21
+ &__fluid
22
+ max-width: $m--container-fluid-width
23
+ margin-left: auto
24
+ margin-right: auto
25
+
26
+ .m--row + .m--row
27
+ margin-top: $m--row-margin-top
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from './vue-plugin'
2
+ export * from './types'
3
+
4
+ import * as VuePlugin from './vue-plugin'
5
+ export default VuePlugin
package/src/index.umd.js ADDED
@@ -0,0 +1,2 @@
1
+ import * as VuePlugin from './vue-plugin'
2
+ export default VuePlugin
package/src/myth.ts ADDED
@@ -0,0 +1,30 @@
1
+ import { ref } from 'vue'
2
+ import type { QBtnProps } from 'quasar'
3
+ import { extend } from 'quasar'
4
+ import type { MythContext, UiOptionsContext } from './types'
5
+
6
+ const defGutters = 'md'
7
+ const defaultOptions: UiOptionsContext = {
8
+ style: {
9
+ gutters: defGutters
10
+ }
11
+ }
12
+ const optionsRef = ref<UiOptionsContext>({ ...defaultOptions })
13
+
14
+ export const myth : MythContext = {
15
+ options: optionsRef,
16
+ setOptions (values: Partial<UiOptionsContext>) {
17
+ optionsRef.value = extend(!0, defaultOptions, values)
18
+ },
19
+ withOptions (values: Partial<UiOptionsContext>) {
20
+ optionsRef.value = extend(!0, defaultOptions, optionsRef.value, values)
21
+ },
22
+ withBtnOptions (values: Partial<QBtnProps>) {
23
+ this.withOptions({
24
+ btn: {
25
+ props: values
26
+ }
27
+ })
28
+ }
29
+ }
30
+ export default myth
package/src/types/components.d.ts ADDED
@@ -0,0 +1,163 @@
1
+ import type { GlobalComponentConstructor, QBtnProps, QBtnSlots, QItemProps } from 'quasar'
2
+ import type { VNode } from 'vue'
3
+ import { TypedOptions } from 'typed.js'
4
+
5
+ export type StyleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
6
+
7
+ export interface MBtnProps extends QBtnProps {
8
+ //
9
+ }
10
+
11
+ export interface MBtnSlots extends QBtnSlots {
12
+ /**
13
+ * Use for custom content, instead of relying on 'icon' and 'label' props
14
+ */
15
+ default: () => VNode[];
16
+ /**
17
+ * Override the default QSpinner when in 'loading' state
18
+ */
19
+ loading: () => VNode[];
20
+ }
21
+
22
+ export interface MBlockProps {
23
+ /**
24
+ * Size of the padding block.
25
+ * Default: 'md'
26
+ */
27
+ readonly size?: StyleSize | undefined;
28
+ /**
29
+ * Rounded block
30
+ */
31
+ readonly rounded?: boolean | undefined;
32
+ /**
33
+ * Shadow level
34
+ */
35
+ readonly shadow?: string | number | 'transition' | 'none' | undefined;
36
+ }
37
+
38
+ export interface MBlockSlots {
39
+ default: () => VNode[];
40
+ }
41
+
42
+ export type ColStyleType =
43
+ boolean
44
+ | undefined
45
+ | string
46
+ | number
47
+ | 'auto'
48
+ | 'grow'
49
+ | 'shrink'
50
+ | '1'
51
+ | '2'
52
+ | '3'
53
+ | '4'
54
+ | '5'
55
+ | '6'
56
+ | '7'
57
+ | '8'
58
+ | '9'
59
+ | '10'
60
+ | '11'
61
+ | '12'
62
+ | 1
63
+ | 2
64
+ | 3
65
+ | 4
66
+ | 5
67
+ | 6
68
+ | 7
69
+ | 8
70
+ | 9
71
+ | 10
72
+ | 11
73
+ | 12
74
+
75
+ export interface MColProps {
76
+ readonly auto?: boolean | undefined;
77
+ readonly col?: ColStyleType;
78
+ readonly xs?: ColStyleType;
79
+ readonly sm?: ColStyleType;
80
+ readonly md?: ColStyleType;
81
+ readonly lg?: ColStyleType;
82
+ readonly xl?: ColStyleType;
83
+ readonly name?: string;
84
+ }
85
+
86
+ export interface MColSlots {
87
+ default: () => VNode[];
88
+ }
89
+
90
+ export interface MColumnProps {
91
+ [key: string]: any;
92
+ }
93
+
94
+ export interface MColumnSlots {
95
+ default: () => VNode[];
96
+ }
97
+
98
+ export interface MContainerProps {
99
+ readonly size?: StyleSize | string | undefined;
100
+ readonly dense?: boolean | undefined;
101
+ readonly fluid?: boolean | undefined;
102
+ }
103
+
104
+ export interface MContainerSlots {
105
+ default: () => VNode[];
106
+ }
107
+
108
+ export interface MRowProps {
109
+ /**
110
+ * Default: false.
111
+ */
112
+ gutter?: boolean | StyleSize | undefined;
113
+ /**
114
+ * Default: false.
115
+ */
116
+ col?: boolean | StyleSize | undefined;
117
+ }
118
+
119
+ export interface MRowSlots {
120
+ default: () => VNode[];
121
+ }
122
+
123
+ export interface MHelpRowProps extends Partial<QItemProps> {
124
+ text?: string | undefined;
125
+ icon?: string | undefined;
126
+ tooltip?: boolean | undefined;
127
+ }
128
+
129
+ export interface MHelpRowSlots {
130
+ default: () => VNode[];
131
+ }
132
+
133
+ export interface MTypingStringProps {
134
+ name: number | string;
135
+ tag?: string;
136
+ string: string | string[];
137
+ loop?: TypedOptions['loop'];
138
+ typeSpeed?: TypedOptions['typeSpeed'];
139
+ backDelay?: TypedOptions['backDelay'];
140
+ fadeOut?: TypedOptions['fadeOut'];
141
+ options?: Omit<TypedOptions, 'loop' | 'typeSpeed' | 'backDelay' | 'fadeOut'>;
142
+ }
143
+
144
+ export interface MTypingStringSlots {
145
+ default: () => VNode[];
146
+ }
147
+
148
+ declare module '@vue/runtime-core' {
149
+ interface GlobalComponents {
150
+ // Form.
151
+ MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
152
+
153
+ // Grid.
154
+ MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;
155
+ MCol: GlobalComponentConstructor<MColProps, MColSlots>;
156
+ MColumn: GlobalComponentConstructor<MColumnProps, MColumnSlots>;
157
+ MContainer: GlobalComponentConstructor<MContainerProps, MContainerSlots>;
158
+ MHelpRow: GlobalComponentConstructor<MHelpRowProps, MHelpRowSlots>;
159
+ MRow: GlobalComponentConstructor<MRowProps, MRowSlots>;
160
+ // Typography.
161
+ MTypingString: GlobalComponentConstructor<MTypingStringProps, MTypingStringSlots>;
162
+ }
163
+ }
package/src/types/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './components'
2
+ export * from './myth'
package/src/types/myth.ts ADDED
@@ -0,0 +1,42 @@
1
+ import type { QBtnProps } from 'quasar'
2
+ import type { Ref } from 'vue'
3
+ import type { MBlockProps, StyleSize } from './components'
4
+
5
+ export interface UiOptionsContext {
6
+ /**
7
+ * Style of the components.
8
+ */
9
+ style?: {
10
+ /**
11
+ * Apply Padding on all sides of components.
12
+ */
13
+ gutters?: StyleSize | undefined;
14
+ /**
15
+ * Apply Fluid on all sides of containers.
16
+ */
17
+ fluid?: boolean | undefined;
18
+ };
19
+ /**
20
+ * MBtn component.
21
+ */
22
+ btn?: {
23
+ props?: Partial<QBtnProps>;
24
+ loading?: {
25
+ type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail';
26
+ color?: string | undefined;
27
+ size?: string | undefined;
28
+ label?: boolean | undefined;
29
+ }
30
+ };
31
+ /**
32
+ * MBlock component.
33
+ */
34
+ block?: Partial<MBlockProps>;
35
+ }
36
+
37
+ export interface MythContext {
38
+ options: Ref<UiOptionsContext>;
39
+ setOptions: (values: Partial<UiOptionsContext>) => void;
40
+ withOptions: (values: Partial<UiOptionsContext>) => void;
41
+ withBtnOptions: (values: Partial<QBtnProps>) => void;
42
+ }
package/src/vue-plugin.ts ADDED
@@ -0,0 +1,41 @@
1
+ import js from './../package.json'
2
+ import myth from './myth'
3
+ import MBtn from './components/form/MBtn.vue'
4
+ import MBlock from './components/grid/MBlock.vue'
5
+ import MCol from './components/grid/MCol.vue'
6
+ import MColumn from './components/grid/MColumn.vue'
7
+ import MContainer from './components/grid/MContainer.vue'
8
+ import MHelpRow from './components/grid/MHelpRow.vue'
9
+ import MRow from './components/grid/MRow.vue'
10
+ import MTypingString from './components/typography/MTypingString.vue'
11
+ import type { App } from 'vue'
12
+
13
+ const name = js.name
14
+ const version = js.version
15
+
16
+ function install (app: App, options = {}) {
17
+ myth.withOptions(options)
18
+
19
+ // Form.
20
+ app.component('MBtn', MBtn)
21
+
22
+ // Grid.
23
+ app.component('MBlock', MBlock)
24
+ app.component('MCol', MCol)
25
+ app.component('MColumn', MColumn)
26
+ app.component('MContainer', MContainer)
27
+ app.component('MHelpRow', MHelpRow)
28
+ app.component('MRow', MRow)
29
+
30
+ // Typography.
31
+ app.component('MTypingString', MTypingString)
32
+ }
33
+
34
+ export const e = {
35
+ name,
36
+ version,
37
+ install,
38
+ myth
39
+ }
40
+
41
+ export default e
package/tsconfig.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "compilerOptions": {
3
+ "baseUrl": "./",
4
+ "rootDir": ".",
5
+ "outDir": "./dist",
6
+ "esModuleInterop": true,
7
+ "skipLibCheck": true,
8
+ "target": "esnext",
9
+ "allowJs": true,
10
+ "resolveJsonModule": true,
11
+ "moduleDetection": "force",
12
+ "isolatedModules": true,
13
+ "verbatimModuleSyntax": true,
14
+ "module": "preserve",
15
+ "noEmit": true,
16
+ "lib": [
17
+ "esnext",
18
+ "dom",
19
+ "dom.iterable"
20
+ ],
21
+ "strict": true,
22
+ "allowUnreachableCode": false,
23
+ "allowUnusedLabels": false,
24
+ "noImplicitOverride": true,
25
+ "exactOptionalPropertyTypes": true,
26
+ "noUncheckedIndexedAccess": true
27
+ },
28
+ "exclude": [
29
+ "./build"
30
+ ],
31
+ "include": [
32
+ "src/**/*"
33
+ ]
34
+ }
package/types.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './src/types'