@mythpe/quasar-ui-qui 0.0.41 → 0.0.43

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/form/MBtn.vue +150 -148
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.0.41",
3
+ "version": "0.0.43",
4
4
  "description": "MyTh Quasar UI Kit App Extension",
5
5
  "author": {
6
6
  "name": "MyTh Ahmed Faiz",
package/src/components/form/MBtn.vue CHANGED
@@ -16,154 +16,155 @@ import { myth } from '../../utils'
16
16
  import { useBindInput, useMyth } from '../../composable'
17
17
  import type { QBtnProps } from 'quasar'
18
18
 
19
- const props = withDefaults(defineProps<Props>(), {
20
- /**
21
- * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
22
- */
23
- size: undefined,
24
- /**
25
- * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
26
- * Default value: 'button'
27
- */
28
- type: undefined,
29
- /**
30
- * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
31
- */
32
- to: undefined,
33
- /**
34
- * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
35
- */
36
- replace: undefined,
37
- /**
38
- * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
39
- */
40
- href: undefined,
41
- /**
42
- * Native <a> link target attribute; Use it only with 'to' or 'href' props
43
- */
44
- target: undefined,
45
- /**
46
- * The text that will be shown on the button
47
- */
48
- label: undefined,
49
- /**
50
- * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
51
- */
52
- icon: undefined,
53
- /**
54
- * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
55
- */
56
- iconRight: undefined,
57
- /**
58
- * Use 'outline' design
59
- */
60
- outline: undefined,
61
- /**
62
- * Use 'flat' design
63
- */
64
- flat: undefined,
65
- /**
66
- * Remove shadow
67
- */
68
- unelevated: undefined,
69
- /**
70
- * Applies a more prominent border-radius for a squared shape button
71
- */
72
- rounded: undefined,
73
- /**
74
- * Use 'push' design
75
- */
76
- push: undefined,
77
- /**
78
- * Removes border-radius so borders are squared
79
- */
80
- square: undefined,
81
- /**
82
- * Applies a glossy effect
83
- */
84
- glossy: undefined,
85
- /**
86
- * Makes button size and shape to fit a Floating Action Button
87
- */
88
- fab: undefined,
89
- /**
90
- * Makes button size and shape to fit a small Floating Action Button
91
- */
92
- fabMini: undefined,
93
- /**
94
- * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
95
- */
96
- padding: undefined,
97
- /**
98
- * Color name for component from the Quasar Color Palette
99
- */
100
- color: 'primary',
101
- /**
102
- * Overrides text color (if needed); Color name from the Quasar Color Palette
103
- */
104
- textColor: undefined,
105
- /**
106
- * Avoid turning label text into caps (which happens by default)
107
- */
108
- noCaps: undefined,
109
- /**
110
- * Avoid label text wrapping
111
- */
112
- noWrap: undefined,
113
- /**
114
- * Dense mode; occupies less space
115
- */
116
- dense: undefined,
117
- /**
118
- * Configure material ripple (disable it by setting it to 'false' or supply a config object)
119
- * Default value: true
120
- */
121
- ripple: undefined,
122
- /**
123
- * Tabindex HTML attribute value
124
- */
125
- tabindex: undefined,
126
- /**
127
- * Label or content alignment
128
- * Default value: 'center'
129
- */
130
- align: undefined,
131
- /**
132
- * Stack icon and label vertically instead of on same line (like it is by default)
133
- */
134
- stack: undefined,
135
- /**
136
- * When used on flexbox parent, button will stretch to parent's height
137
- */
138
- stretch: undefined,
139
- /**
140
- * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
141
- * Default value: null
142
- */
143
- loading: undefined,
144
- /**
145
- * Put component in disabled mode
146
- */
147
- disable: undefined,
148
- /**
149
- * Makes a circle shaped button
150
- */
151
- round: undefined,
152
- /**
153
- * Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background
154
- */
155
- percentage: undefined,
156
- /**
157
- * Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props
158
- */
159
- darkPercentage: undefined,
160
- /**
161
- * Emitted when the component is clicked
162
- * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
163
- * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
164
- */
165
- onClick: undefined
166
- })
19
+ // const props = withDefaults(defineProps<Props>(), {
20
+ // /**
21
+ // * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
22
+ // */
23
+ // size: undefined,
24
+ // /**
25
+ // * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
26
+ // * Default value: 'button'
27
+ // */
28
+ // type: undefined,
29
+ // /**
30
+ // * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
31
+ // */
32
+ // to: undefined,
33
+ // /**
34
+ // * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
35
+ // */
36
+ // replace: undefined,
37
+ // /**
38
+ // * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
39
+ // */
40
+ // href: undefined,
41
+ // /**
42
+ // * Native <a> link target attribute; Use it only with 'to' or 'href' props
43
+ // */
44
+ // target: undefined,
45
+ // /**
46
+ // * The text that will be shown on the button
47
+ // */
48
+ // label: undefined,
49
+ // /**
50
+ // * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
51
+ // */
52
+ // icon: undefined,
53
+ // /**
54
+ // * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (Str) is used as value then no icon is rendered (but screen real estate will still be used for it)
55
+ // */
56
+ // iconRight: undefined,
57
+ // /**
58
+ // * Use 'outline' design
59
+ // */
60
+ // outline: undefined,
61
+ // /**
62
+ // * Use 'flat' design
63
+ // */
64
+ // flat: undefined,
65
+ // /**
66
+ // * Remove shadow
67
+ // */
68
+ // unelevated: undefined,
69
+ // /**
70
+ // * Applies a more prominent border-radius for a squared shape button
71
+ // */
72
+ // rounded: undefined,
73
+ // /**
74
+ // * Use 'push' design
75
+ // */
76
+ // push: undefined,
77
+ // /**
78
+ // * Removes border-radius so borders are squared
79
+ // */
80
+ // square: undefined,
81
+ // /**
82
+ // * Applies a glossy effect
83
+ // */
84
+ // glossy: undefined,
85
+ // /**
86
+ // * Makes button size and shape to fit a Floating Action Button
87
+ // */
88
+ // fab: undefined,
89
+ // /**
90
+ // * Makes button size and shape to fit a small Floating Action Button
91
+ // */
92
+ // fabMini: undefined,
93
+ // /**
94
+ // * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
95
+ // */
96
+ // padding: undefined,
97
+ // /**
98
+ // * Color name for component from the Quasar Color Palette
99
+ // */
100
+ // color: 'primary',
101
+ // /**
102
+ // * Overrides text color (if needed); Color name from the Quasar Color Palette
103
+ // */
104
+ // textColor: undefined,
105
+ // /**
106
+ // * Avoid turning label text into caps (which happens by default)
107
+ // */
108
+ // noCaps: undefined,
109
+ // /**
110
+ // * Avoid label text wrapping
111
+ // */
112
+ // noWrap: undefined,
113
+ // /**
114
+ // * Dense mode; occupies less space
115
+ // */
116
+ // dense: undefined,
117
+ // /**
118
+ // * Configure material ripple (disable it by setting it to 'false' or supply a config object)
119
+ // * Default value: true
120
+ // */
121
+ // ripple: undefined,
122
+ // /**
123
+ // * Tabindex HTML attribute value
124
+ // */
125
+ // tabindex: undefined,
126
+ // /**
127
+ // * Label or content alignment
128
+ // * Default value: 'center'
129
+ // */
130
+ // align: undefined,
131
+ // /**
132
+ // * Stack icon and label vertically instead of on same line (like it is by default)
133
+ // */
134
+ // stack: undefined,
135
+ // /**
136
+ // * When used on flexbox parent, button will stretch to parent's height
137
+ // */
138
+ // stretch: undefined,
139
+ // /**
140
+ // * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
141
+ // * Default value: null
142
+ // */
143
+ // loading: undefined,
144
+ // /**
145
+ // * Put component in disabled mode
146
+ // */
147
+ // disable: undefined,
148
+ // /**
149
+ // * Makes a circle shaped button
150
+ // */
151
+ // round: undefined,
152
+ // /**
153
+ // * Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background
154
+ // */
155
+ // percentage: undefined,
156
+ // /**
157
+ // * Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props
158
+ // */
159
+ // darkPercentage: undefined,
160
+ // /**
161
+ // * Emitted when the component is clicked
162
+ // * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
163
+ // * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
164
+ // */
165
+ // onClick: undefined
166
+ // })
167
+ const props = defineProps<Props>()
167
168
  const { __ } = useMyth()
168
169
  const btnLoading = computed(() => myth.btnLoading.value)
169
170
  const getLabel = computed<string | undefined>(() => props.label ? (__(props.label) ?? undefined) : undefined)
@@ -179,6 +180,7 @@ defineOptions({
179
180
  <template>
180
181
  <q-btn
181
182
  v-bind="{
183
+ ...$props,
182
184
  ...$attrs,
183
185
  ...theme,
184
186
  label: loading ? `${getLabel} ...` : getLabel,