@mythpe/quasar-ui-qui 0.0.59 → 0.0.60

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/form/MBtn.vue +132 -110
  3. package/src/types/components.d.ts +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.0.59",
3
+ "version": "0.0.60",
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
@@ -10,18 +10,40 @@
10
10
  lang="ts"
11
11
  setup
12
12
  >
13
- import type { ButtonLoadingOptions, MBtnProps as Props } from '../../types'
13
+ import type { ButtonLoadingOptions, MBtnProps } from '../../types'
14
14
  import { computed } from 'vue'
15
- import { useBindInput, useMyth } from '../../composable'
16
- import type { QBtnProps } from 'quasar'
15
+ import { useMyth } from '../../composable'
17
16
 
17
+ type Props = {
18
+ label?: MBtnProps['label'];
19
+ ariaLabel?: MBtnProps['ariaLabel'];
20
+ loading?: MBtnProps['loading'];
21
+ nativeLabel?: MBtnProps['nativeLabel'];
22
+ }
18
23
  const props = defineProps<Props>()
19
- const { __, theme } = useMyth()
20
- const btnLoading = computed(() => theme.value.buttonLoading as ButtonLoadingOptions)
21
- const getLabel = computed<string | undefined>(() => props.label ? (__(props.label) ?? undefined) : undefined)
22
- const getSize = computed<string | undefined>(() => btnLoading.value.size)
23
- const getColor = computed<string | undefined>(() => btnLoading.value.color)
24
- const { attrs } = useBindInput<QBtnProps & { name: string }>(() => props, 'btn')
24
+ const { __, theme, props: pluginOptions } = useMyth()
25
+ const getLabel = computed<string | undefined>(() => {
26
+ if (props.nativeLabel === !0) {
27
+ return props.label
28
+ }
29
+ return props.label ? (__(props.label) ?? undefined) : undefined
30
+ })
31
+ const getAriaLabel = computed<string | undefined>(() => {
32
+ if (props.ariaLabel === !0 || (typeof props.ariaLabel === 'string' && !props.ariaLabel?.length)) {
33
+ if (props.label !== undefined) {
34
+ return __(props.label) || undefined
35
+ }
36
+ } else if (typeof props.ariaLabel === 'string' && props.ariaLabel?.length > 0) {
37
+ return __(props.ariaLabel) || undefined
38
+ }
39
+ return props.ariaLabel ? __(props.ariaLabel) : undefined
40
+ })
41
+ const hasLabel = computed<boolean>(() => !!getLabel.value)
42
+
43
+ const loadingOptions = computed(() => theme.value.buttonLoading as ButtonLoadingOptions)
44
+ const loadingSize = computed<string | undefined>(() => loadingOptions.value.size)
45
+ const loadingColor = computed<string | undefined>(() => loadingOptions.value.color)
46
+
25
47
  defineOptions({
26
48
  name: 'MBtn',
27
49
  inheritAttrs: !1
@@ -31,161 +53,161 @@ defineOptions({
31
53
  <template>
32
54
  <q-btn
33
55
  v-bind="{
34
- ariaLabel: getLabel,
56
+ ...pluginOptions.btn,
57
+ ariaLabel: getAriaLabel,
35
58
  ...$attrs,
36
- ...attrs,
37
- label: loading ? `${getLabel} ...` : getLabel,
59
+ label: loading && getLabel ? `${getLabel} ...` : getLabel,
38
60
  }"
39
61
  >
40
62
  <template
41
- v-if="!!btnLoading && !$slots.loading"
63
+ v-if="!!loadingOptions && !$slots.loading"
42
64
  #loading
43
65
  >
44
66
  <q-spinner-audio
45
- v-if="btnLoading.type === 'audio'"
46
- :class="{'on-left': !!getLabel}"
47
- :color="getColor"
48
- :size="getSize"
67
+ v-if="loadingOptions.type === 'audio'"
68
+ :class="{'on-left': hasLabel}"
69
+ :color="loadingColor"
70
+ :size="loadingSize"
49
71
  />
50
72
  <q-spinner-ball
51
- v-if="btnLoading.type === 'ball'"
52
- :class="{'on-left': !!getLabel}"
53
- :color="getColor"
54
- :size="getSize"
73
+ v-if="loadingOptions.type === 'ball'"
74
+ :class="{'on-left': hasLabel}"
75
+ :color="loadingColor"
76
+ :size="loadingSize"
55
77
  />
56
78
  <q-spinner-bars
57
- v-if="btnLoading.type === 'bars'"
58
- :class="{'on-left': !!getLabel}"
59
- :color="getColor"
60
- :size="getSize"
79
+ v-if="loadingOptions.type === 'bars'"
80
+ :class="{'on-left': hasLabel}"
81
+ :color="loadingColor"
82
+ :size="loadingSize"
61
83
  />
62
84
  <q-spinner-box
63
- v-if="btnLoading.type === 'box'"
64
- :class="{'on-left': !!getLabel}"
65
- :color="getColor"
66
- :size="getSize"
85
+ v-if="loadingOptions.type === 'box'"
86
+ :class="{'on-left': hasLabel}"
87
+ :color="loadingColor"
88
+ :size="loadingSize"
67
89
  />
68
90
  <q-spinner-clock
69
- v-if="btnLoading.type === 'clock'"
70
- :class="{'on-left': !!getLabel}"
71
- :color="getColor"
72
- :size="getSize"
91
+ v-if="loadingOptions.type === 'clock'"
92
+ :class="{'on-left': hasLabel}"
93
+ :color="loadingColor"
94
+ :size="loadingSize"
73
95
  />
74
96
  <q-spinner-comment
75
- v-if="btnLoading.type === 'comment'"
76
- :class="{'on-left': !!getLabel}"
77
- :color="getColor"
78
- :size="getSize"
97
+ v-if="loadingOptions.type === 'comment'"
98
+ :class="{'on-left': hasLabel}"
99
+ :color="loadingColor"
100
+ :size="loadingSize"
79
101
  />
80
102
  <q-spinner-cube
81
- v-if="btnLoading.type === 'cube'"
82
- :class="{'on-left': !!getLabel}"
83
- :color="getColor"
84
- :size="getSize"
103
+ v-if="loadingOptions.type === 'cube'"
104
+ :class="{'on-left': hasLabel}"
105
+ :color="loadingColor"
106
+ :size="loadingSize"
85
107
  />
86
108
  <q-spinner-dots
87
- v-if="btnLoading.type === 'dots'"
88
- :class="{'on-left': !!getLabel}"
89
- :color="getColor"
90
- :size="getSize"
109
+ v-if="loadingOptions.type === 'dots'"
110
+ :class="{'on-left': hasLabel}"
111
+ :color="loadingColor"
112
+ :size="loadingSize"
91
113
  />
92
114
  <q-spinner-facebook
93
- v-if="btnLoading.type === 'facebook'"
94
- :class="{'on-left': !!getLabel}"
95
- :color="getColor"
96
- :size="getSize"
115
+ v-if="loadingOptions.type === 'facebook'"
116
+ :class="{'on-left': hasLabel}"
117
+ :color="loadingColor"
118
+ :size="loadingSize"
97
119
  />
98
120
  <q-spinner-gears
99
- v-if="btnLoading.type === 'gears'"
100
- :class="{'on-left': !!getLabel}"
101
- :color="getColor"
102
- :size="getSize"
121
+ v-if="loadingOptions.type === 'gears'"
122
+ :class="{'on-left': hasLabel}"
123
+ :color="loadingColor"
124
+ :size="loadingSize"
103
125
  />
104
126
  <q-spinner-grid
105
- v-if="btnLoading.type === 'grid'"
106
- :class="{'on-left': !!getLabel}"
107
- :color="getColor"
108
- :size="getSize"
127
+ v-if="loadingOptions.type === 'grid'"
128
+ :class="{'on-left': hasLabel}"
129
+ :color="loadingColor"
130
+ :size="loadingSize"
109
131
  />
110
132
  <q-spinner-hearts
111
- v-if="btnLoading.type === 'hearts'"
112
- :class="{'on-left': !!getLabel}"
113
- :color="getColor"
114
- :size="getSize"
133
+ v-if="loadingOptions.type === 'hearts'"
134
+ :class="{'on-left': hasLabel}"
135
+ :color="loadingColor"
136
+ :size="loadingSize"
115
137
  />
116
138
  <q-spinner-hearts
117
- v-if="btnLoading.type === 'hearts'"
118
- :class="{'on-left': !!getLabel}"
119
- :color="getColor"
120
- :size="getSize"
139
+ v-if="loadingOptions.type === 'hearts'"
140
+ :class="{'on-left': hasLabel}"
141
+ :color="loadingColor"
142
+ :size="loadingSize"
121
143
  />
122
144
  <q-spinner-hourglass
123
- v-if="btnLoading.type === 'hourglass'"
124
- :class="{'on-left': !!getLabel}"
125
- :color="getColor"
126
- :size="getSize"
145
+ v-if="loadingOptions.type === 'hourglass'"
146
+ :class="{'on-left': hasLabel}"
147
+ :color="loadingColor"
148
+ :size="loadingSize"
127
149
  />
128
150
  <q-spinner-infinity
129
- v-if="btnLoading.type === 'infinity'"
130
- :class="{'on-left': !!getLabel}"
131
- :color="getColor"
132
- :size="getSize"
151
+ v-if="loadingOptions.type === 'infinity'"
152
+ :class="{'on-left': hasLabel}"
153
+ :color="loadingColor"
154
+ :size="loadingSize"
133
155
  />
134
156
  <q-spinner-ios
135
- v-if="btnLoading.type === 'ios'"
136
- :class="{'on-left': !!getLabel}"
137
- :color="getColor"
138
- :size="getSize"
157
+ v-if="loadingOptions.type === 'ios'"
158
+ :class="{'on-left': hasLabel}"
159
+ :color="loadingColor"
160
+ :size="loadingSize"
139
161
  />
140
162
  <q-spinner-orbit
141
- v-if="btnLoading.type === 'orbit'"
142
- :class="{'on-left': !!getLabel}"
143
- :color="getColor"
144
- :size="getSize"
163
+ v-if="loadingOptions.type === 'orbit'"
164
+ :class="{'on-left': hasLabel}"
165
+ :color="loadingColor"
166
+ :size="loadingSize"
145
167
  />
146
168
  <q-spinner-oval
147
- v-if="btnLoading.type === 'oval'"
148
- :class="{'on-left': !!getLabel}"
149
- :color="getColor"
150
- :size="getSize"
169
+ v-if="loadingOptions.type === 'oval'"
170
+ :class="{'on-left': hasLabel}"
171
+ :color="loadingColor"
172
+ :size="loadingSize"
151
173
  />
152
174
  <q-spinner-pie
153
- v-if="btnLoading.type === 'pie'"
154
- :class="{'on-left': !!getLabel}"
155
- :color="getColor"
156
- :size="getSize"
175
+ v-if="loadingOptions.type === 'pie'"
176
+ :class="{'on-left': hasLabel}"
177
+ :color="loadingColor"
178
+ :size="loadingSize"
157
179
  />
158
180
  <q-spinner-puff
159
- v-if="btnLoading.type === 'puff'"
160
- :class="{'on-left': !!getLabel}"
161
- :color="getColor"
162
- :size="getSize"
181
+ v-if="loadingOptions.type === 'puff'"
182
+ :class="{'on-left': hasLabel}"
183
+ :color="loadingColor"
184
+ :size="loadingSize"
163
185
  />
164
186
  <q-spinner-radio
165
- v-if="btnLoading.type === 'radio'"
166
- :class="{'on-left': !!getLabel}"
167
- :color="getColor"
168
- :size="getSize"
187
+ v-if="loadingOptions.type === 'radio'"
188
+ :class="{'on-left': hasLabel}"
189
+ :color="loadingColor"
190
+ :size="loadingSize"
169
191
  />
170
192
  <q-spinner-rings
171
- v-if="btnLoading.type === 'rings'"
172
- :class="{'on-left': !!getLabel}"
173
- :color="getColor"
174
- :size="getSize"
193
+ v-if="loadingOptions.type === 'rings'"
194
+ :class="{'on-left': hasLabel}"
195
+ :color="loadingColor"
196
+ :size="loadingSize"
175
197
  />
176
198
  <q-spinner-tail
177
- v-if="btnLoading.type === 'tail'"
178
- :class="{'on-left': !!getLabel}"
179
- :color="getColor"
180
- :size="getSize"
199
+ v-if="loadingOptions.type === 'tail'"
200
+ :class="{'on-left': hasLabel}"
201
+ :color="loadingColor"
202
+ :size="loadingSize"
181
203
  />
182
204
  <q-spinner
183
- v-if="btnLoading.type === 'spinner'"
184
- :class="{'on-left': !!getLabel}"
185
- :color="getColor"
186
- :size="getSize"
205
+ v-if="loadingOptions.type === 'spinner'"
206
+ :class="{'on-left': hasLabel}"
207
+ :color="loadingColor"
208
+ :size="loadingSize"
187
209
  />
188
- <template v-if="btnLoading.noLabel !== !1 && getLabel">
210
+ <template v-if="loadingOptions.noLabel !== !1 && getLabel">
189
211
  <span>{{ getLabel }}</span>
190
212
  </template>
191
213
  </template>
package/src/types/components.d.ts CHANGED
@@ -76,7 +76,8 @@ export interface MTransitionsSlots {
76
76
  }
77
77
 
78
78
  export interface MBtnProps extends QBtnProps {
79
- native?: boolean;
79
+ ariaLabel?: boolean | string | null | undefined;
80
+ nativeLabel?: boolean | undefined;
80
81
  }
81
82
 
82
83
  export interface MBtnSlots extends QBtnSlots {