@mythpe/quasar-ui-qui 0.0.1 → 0.0.2-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 (29) hide show
  1. package/README.md +52 -40
  2. package/jsconfig.json +10 -0
  3. package/package.json +30 -11
  4. package/src/boot/register.ts +6 -0
  5. package/src/components/form/MBtn.vue +168 -0
  6. package/src/components/grid/MBlock.vue +38 -0
  7. package/src/components/grid/MCol.vue +64 -0
  8. package/src/components/grid/MColumn.vue +15 -0
  9. package/src/components/grid/MContainer.vue +46 -0
  10. package/src/components/grid/MHelpRow.vue +62 -0
  11. package/src/components/grid/MRow.vue +35 -0
  12. package/src/components/typography/MTypingString.vue +78 -0
  13. package/src/index.common.js +1 -4
  14. package/src/index.esm.js +2 -3
  15. package/src/index.sass +22 -2
  16. package/src/index.ts +5 -0
  17. package/src/index.umd.js +1 -2
  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/utils/myth.ts +30 -0
  22. package/src/utils/vue-plugin.ts +41 -0
  23. package/tsconfig.json +34 -0
  24. package/types.d.ts +1 -0
  25. package/src/components/MBtn.vue +0 -168
  26. package/src/types/MBtn.d.ts +0 -5
  27. package/src/types/VuePlugin.d.ts +0 -17
  28. package/src/utils.ts +0 -6
  29. package/src/vue-plugin.js +0 -16
package/README.md CHANGED
@@ -5,26 +5,22 @@
5
5
 
6
6
  **Compatible with Quasar UI v2 and Vue 3**.
7
7
 
8
-
9
8
  # Component MyComponent
10
- > Short description of the component
11
-
12
9
 
10
+ > Short description of the component
13
11
 
14
12
  # Directive v-my-directive
15
- > Short description of the directive
16
13
 
14
+ > Short description of the directive
17
15
 
18
16
  # Usage
19
17
 
20
18
  ## Quasar CLI project
21
19
 
22
-
23
20
  Install the [App Extension](../app-extension).
24
21
 
25
22
  **OR**:
26
23
 
27
-
28
24
  Create and register a boot file:
29
25
 
30
26
  ```js
@@ -38,23 +34,24 @@ Vue.use(Plugin)
38
34
  **OR**:
39
35
 
40
36
  ```html
37
+
41
38
  <style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
42
39
 
43
40
  <script>
44
- import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
45
-
46
- export default {
47
-
48
- components: {
49
- MyComponent
50
- },
51
-
52
-
53
- directives: {
54
- Directive
55
- }
56
-
57
- }
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
+ }
58
55
  </script>
59
56
  ```
60
57
 
@@ -71,23 +68,24 @@ Vue.use(Plugin)
71
68
  **OR**:
72
69
 
73
70
  ```html
71
+
74
72
  <style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
75
73
 
76
74
  <script>
77
- import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
78
-
79
- export default {
80
-
81
- components: {
82
- MyComponent
83
- },
84
-
85
-
86
- directives: {
87
- Directive
88
- }
89
-
90
- }
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
+ }
91
89
  </script>
92
90
  ```
93
91
 
@@ -98,26 +96,32 @@ Exports `window.mythUi`.
98
96
  Add the following tag(s) after the Quasar ones:
99
97
 
100
98
  ```html
99
+
101
100
  <head>
102
- <!-- AFTER the Quasar stylesheet tags: -->
103
- <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css" rel="stylesheet" type="text/css">
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">
104
103
  </head>
105
104
  <body>
106
- <!-- at end of body, AFTER Quasar script(s): -->
107
- <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
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>
108
107
  </body>
109
108
  ```
109
+
110
110
  If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
111
+
111
112
  ```html
113
+
112
114
  <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
113
115
  ```
114
116
 
115
117
  # Setup
118
+
116
119
  ```bash
117
120
  $ yarn
118
121
  ```
119
122
 
120
123
  # Developing
124
+
121
125
  ```bash
122
126
  # start dev in SPA mode
123
127
  $ yarn dev
@@ -139,18 +143,26 @@ $ yarn dev:electron
139
143
  ```
140
144
 
141
145
  # Building package
146
+
142
147
  ```bash
143
148
  $ yarn build
144
149
  ```
145
150
 
146
151
  # Adding Testing Components
147
- 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 will automatically be picked up by dynamic routing and added to the test page.
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.
148
155
 
149
156
  # Adding Assets
150
- 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` 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 put into the `ui/dist` folder.
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.
151
161
 
152
162
  # Donate
163
+
153
164
  If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
154
165
 
155
166
  # License
167
+
156
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 CHANGED
@@ -1,11 +1,14 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.0.1",
4
- "author": "MyTh <mythpe@gmail.com>",
3
+ "version": "0.0.2-dev",
5
4
  "description": "MyTh Quasar UI Kit App Extension",
5
+ "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
6
+ "email": "mythpe@gmail.com",
7
+ "mobile": "+966590470092",
6
8
  "license": "MIT",
7
9
  "module": "src/index.esm.js",
8
10
  "main": "src/index.common.js",
11
+ "type": "module",
9
12
  "scripts": {
10
13
  "dev": "cd ../dev && yarn dev && cd ..",
11
14
  "dev:umd": "yarn build && node build/script.open-umd.js",
@@ -17,31 +20,45 @@
17
20
  "build:js": "node build/script.javascript.js",
18
21
  "build:css": "node build/script.css.js"
19
22
  },
20
- "repository": {
21
- "type": "git",
22
- "url": ""
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"
23
29
  },
24
- "bugs": "",
25
- "homepage": "",
26
30
  "devDependencies": {
31
+ "lodash": "^4.17.21",
27
32
  "@quasar/app-webpack": "^3.13.0",
28
33
  "@quasar/extras": "^1.16.4",
29
34
  "@rollup/plugin-buble": "^0.21.3",
30
35
  "@rollup/plugin-json": "^4.0.0",
31
36
  "@rollup/plugin-node-resolve": "^11.2.1",
32
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",
33
43
  "autoprefixer": "^10.0.2",
34
44
  "chalk": "^4.1.0",
35
45
  "core-js": "^3.0.0",
36
- "cssnano": "^4.1.10",
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",
37
53
  "fs-extra": "^8.1.0",
38
54
  "open": "^7.3.0",
39
55
  "postcss": "^8.1.9",
40
56
  "quasar": "^2.16.0",
41
57
  "rimraf": "^3.0.0",
42
58
  "rollup": "^2.45.0",
43
- "rtlcss": "^2.6.1",
59
+ "rtlcss": "^4.3.0",
44
60
  "sass": "^1.33.0",
61
+ "typescript": "~5.5.3",
45
62
  "uglify-js": "^3.13.3",
46
63
  "vue": "^3.0.0",
47
64
  "vue-router": "^4.0.0",
@@ -57,7 +74,9 @@
57
74
  "last 4 FirefoxAndroid versions",
58
75
  "last 4 iOS versions"
59
76
  ],
60
- "dependencies": {
61
- "vue-i18n": "^11.0.0-beta.1"
77
+ "engines": {
78
+ "node": "^24 || ^22 || ^20 || ^18",
79
+ "npm": ">= 6.13.4",
80
+ "yarn": ">= 1.21.1"
62
81
  }
63
82
  }
package/src/boot/register.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { boot } from 'quasar/wrappers'
2
+ import Plugin from '../utils/vue-plugin'
3
+
4
+ export default boot(({ app }) => {
5
+ app.use(Plugin)
6
+ })
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 '../../utils/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 '../../utils/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 '../../utils/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>