@mythpe/quasar-ui-qui 0.0.61 → 0.0.63

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/datatable/MDatatable.vue +2 -2
  3. package/src/components/form/MBtn.vue +156 -162
  4. package/src/composable/useMyth.ts +1 -2
  5. package/src/utils/vue-plugin.ts +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.0.61",
3
+ "version": "0.0.63",
4
4
  "description": "MyTh Quasar UI Kit App Extension",
5
5
  "author": {
6
6
  "name": "MyTh Ahmed Faiz",
package/src/components/datatable/MDatatable.vue CHANGED
@@ -825,7 +825,7 @@ const onSuccess: SubmissionHandler = async (form) => {
825
825
  return
826
826
  }
827
827
  loading.value = !0
828
- const api = getMythApiServicesSchema()
828
+ const apiServices = getMythApiServicesSchema()
829
829
  const fdt = isUpdateMode.value ? 'u' : 'c'
830
830
  if (ignoreKeysProps.value) {
831
831
  if (typeof ignoreKeysProps.value === 'function') {
@@ -854,7 +854,7 @@ const onSuccess: SubmissionHandler = async (form) => {
854
854
  }
855
855
  }
856
856
  const _conf: any = { params: { fdt, requestWith: getRequestWith(isUpdateMode.value ? 'withUpdate' : 'withStore') || undefined } }
857
- const method = async () => isUpdateMode.value ? await api.update(dialogs.item?.id || '', form, _conf) : await api.store(form, _conf)
857
+ const method = async () => isUpdateMode.value ? await apiServices.update(dialogs.item?.id || '', form, _conf) : await apiServices.store(form, _conf)
858
858
  try {
859
859
  const { _data, _message, _success }: any = await method()
860
860
  _message && alertSuccess(_message)
package/src/components/form/MBtn.vue CHANGED
@@ -12,7 +12,7 @@
12
12
  >
13
13
  import type { ButtonLoadingOptions, MBtnProps } from '../../types'
14
14
  import { computed } from 'vue'
15
- import { useMyth } from '../../composable'
15
+ import { useBindInput, useMyth } from '../../composable'
16
16
 
17
17
  type Props = {
18
18
  label?: MBtnProps['label'];
@@ -22,6 +22,7 @@ type Props = {
22
22
  }
23
23
  const props = defineProps<Props>()
24
24
  const { __, theme, props: pluginOptions } = useMyth()
25
+ const { theme: btnTheme } = useBindInput(() => props, 'btn')
25
26
  const getLabel = computed<string | undefined>(() => {
26
27
  if (props.nativeLabel === !0) {
27
28
  return props.label
@@ -53,174 +54,167 @@ defineOptions({
53
54
  <template>
54
55
  <q-btn
55
56
  v-bind="{
57
+ ...btnTheme,
56
58
  ...pluginOptions.btn,
57
59
  ariaLabel: getAriaLabel,
58
60
  ...$attrs,
61
+ loading,
59
62
  label: loading && getLabel ? `${getLabel} ...` : getLabel,
60
63
  }"
61
64
  >
62
- <template
63
- v-if="!!loadingOptions && !$slots.loading"
64
- #loading
65
- >
66
- <q-spinner-audio
67
- v-if="loadingOptions.type === 'audio'"
68
- :class="{'on-left': hasLabel}"
69
- :color="loadingColor"
70
- :size="loadingSize"
71
- />
72
- <q-spinner-ball
73
- v-if="loadingOptions.type === 'ball'"
74
- :class="{'on-left': hasLabel}"
75
- :color="loadingColor"
76
- :size="loadingSize"
77
- />
78
- <q-spinner-bars
79
- v-if="loadingOptions.type === 'bars'"
80
- :class="{'on-left': hasLabel}"
81
- :color="loadingColor"
82
- :size="loadingSize"
83
- />
84
- <q-spinner-box
85
- v-if="loadingOptions.type === 'box'"
86
- :class="{'on-left': hasLabel}"
87
- :color="loadingColor"
88
- :size="loadingSize"
89
- />
90
- <q-spinner-clock
91
- v-if="loadingOptions.type === 'clock'"
92
- :class="{'on-left': hasLabel}"
93
- :color="loadingColor"
94
- :size="loadingSize"
95
- />
96
- <q-spinner-comment
97
- v-if="loadingOptions.type === 'comment'"
98
- :class="{'on-left': hasLabel}"
99
- :color="loadingColor"
100
- :size="loadingSize"
101
- />
102
- <q-spinner-cube
103
- v-if="loadingOptions.type === 'cube'"
104
- :class="{'on-left': hasLabel}"
105
- :color="loadingColor"
106
- :size="loadingSize"
107
- />
108
- <q-spinner-dots
109
- v-if="loadingOptions.type === 'dots'"
110
- :class="{'on-left': hasLabel}"
111
- :color="loadingColor"
112
- :size="loadingSize"
113
- />
114
- <q-spinner-facebook
115
- v-if="loadingOptions.type === 'facebook'"
116
- :class="{'on-left': hasLabel}"
117
- :color="loadingColor"
118
- :size="loadingSize"
119
- />
120
- <q-spinner-gears
121
- v-if="loadingOptions.type === 'gears'"
122
- :class="{'on-left': hasLabel}"
123
- :color="loadingColor"
124
- :size="loadingSize"
125
- />
126
- <q-spinner-grid
127
- v-if="loadingOptions.type === 'grid'"
128
- :class="{'on-left': hasLabel}"
129
- :color="loadingColor"
130
- :size="loadingSize"
131
- />
132
- <q-spinner-hearts
133
- v-if="loadingOptions.type === 'hearts'"
134
- :class="{'on-left': hasLabel}"
135
- :color="loadingColor"
136
- :size="loadingSize"
137
- />
138
- <q-spinner-hearts
139
- v-if="loadingOptions.type === 'hearts'"
140
- :class="{'on-left': hasLabel}"
141
- :color="loadingColor"
142
- :size="loadingSize"
143
- />
144
- <q-spinner-hourglass
145
- v-if="loadingOptions.type === 'hourglass'"
146
- :class="{'on-left': hasLabel}"
147
- :color="loadingColor"
148
- :size="loadingSize"
149
- />
150
- <q-spinner-infinity
151
- v-if="loadingOptions.type === 'infinity'"
152
- :class="{'on-left': hasLabel}"
153
- :color="loadingColor"
154
- :size="loadingSize"
155
- />
156
- <q-spinner-ios
157
- v-if="loadingOptions.type === 'ios'"
158
- :class="{'on-left': hasLabel}"
159
- :color="loadingColor"
160
- :size="loadingSize"
161
- />
162
- <q-spinner-orbit
163
- v-if="loadingOptions.type === 'orbit'"
164
- :class="{'on-left': hasLabel}"
165
- :color="loadingColor"
166
- :size="loadingSize"
167
- />
168
- <q-spinner-oval
169
- v-if="loadingOptions.type === 'oval'"
170
- :class="{'on-left': hasLabel}"
171
- :color="loadingColor"
172
- :size="loadingSize"
173
- />
174
- <q-spinner-pie
175
- v-if="loadingOptions.type === 'pie'"
176
- :class="{'on-left': hasLabel}"
177
- :color="loadingColor"
178
- :size="loadingSize"
179
- />
180
- <q-spinner-puff
181
- v-if="loadingOptions.type === 'puff'"
182
- :class="{'on-left': hasLabel}"
183
- :color="loadingColor"
184
- :size="loadingSize"
185
- />
186
- <q-spinner-radio
187
- v-if="loadingOptions.type === 'radio'"
188
- :class="{'on-left': hasLabel}"
189
- :color="loadingColor"
190
- :size="loadingSize"
191
- />
192
- <q-spinner-rings
193
- v-if="loadingOptions.type === 'rings'"
194
- :class="{'on-left': hasLabel}"
195
- :color="loadingColor"
196
- :size="loadingSize"
197
- />
198
- <q-spinner-tail
199
- v-if="loadingOptions.type === 'tail'"
200
- :class="{'on-left': hasLabel}"
201
- :color="loadingColor"
202
- :size="loadingSize"
203
- />
204
- <q-spinner
205
- v-if="loadingOptions.type === 'spinner'"
206
- :class="{'on-left': hasLabel}"
207
- :color="loadingColor"
208
- :size="loadingSize"
209
- />
210
- <template v-if="loadingOptions.noLabel !== !1 && getLabel">
211
- <span>{{ getLabel }}</span>
212
- </template>
65
+ <template #loading>
66
+ <slot name="loading">
67
+ <q-spinner-audio
68
+ v-if="loadingOptions.type === 'audio'"
69
+ :class="{'on-left': hasLabel}"
70
+ :color="loadingColor"
71
+ :size="loadingSize"
72
+ />
73
+ <q-spinner-ball
74
+ v-if="loadingOptions.type === 'ball'"
75
+ :class="{'on-left': hasLabel}"
76
+ :color="loadingColor"
77
+ :size="loadingSize"
78
+ />
79
+ <q-spinner-bars
80
+ v-if="loadingOptions.type === 'bars'"
81
+ :class="{'on-left': hasLabel}"
82
+ :color="loadingColor"
83
+ :size="loadingSize"
84
+ />
85
+ <q-spinner-box
86
+ v-if="loadingOptions.type === 'box'"
87
+ :class="{'on-left': hasLabel}"
88
+ :color="loadingColor"
89
+ :size="loadingSize"
90
+ />
91
+ <q-spinner-clock
92
+ v-if="loadingOptions.type === 'clock'"
93
+ :class="{'on-left': hasLabel}"
94
+ :color="loadingColor"
95
+ :size="loadingSize"
96
+ />
97
+ <q-spinner-comment
98
+ v-if="loadingOptions.type === 'comment'"
99
+ :class="{'on-left': hasLabel}"
100
+ :color="loadingColor"
101
+ :size="loadingSize"
102
+ />
103
+ <q-spinner-cube
104
+ v-if="loadingOptions.type === 'cube'"
105
+ :class="{'on-left': hasLabel}"
106
+ :color="loadingColor"
107
+ :size="loadingSize"
108
+ />
109
+ <q-spinner-dots
110
+ v-if="loadingOptions.type === 'dots'"
111
+ :class="{'on-left': hasLabel}"
112
+ :color="loadingColor"
113
+ :size="loadingSize"
114
+ />
115
+ <q-spinner-facebook
116
+ v-if="loadingOptions.type === 'facebook'"
117
+ :class="{'on-left': hasLabel}"
118
+ :color="loadingColor"
119
+ :size="loadingSize"
120
+ />
121
+ <q-spinner-gears
122
+ v-if="loadingOptions.type === 'gears'"
123
+ :class="{'on-left': hasLabel}"
124
+ :color="loadingColor"
125
+ :size="loadingSize"
126
+ />
127
+ <q-spinner-grid
128
+ v-if="loadingOptions.type === 'grid'"
129
+ :class="{'on-left': hasLabel}"
130
+ :color="loadingColor"
131
+ :size="loadingSize"
132
+ />
133
+ <q-spinner-hearts
134
+ v-if="loadingOptions.type === 'hearts'"
135
+ :class="{'on-left': hasLabel}"
136
+ :color="loadingColor"
137
+ :size="loadingSize"
138
+ />
139
+ <q-spinner-hearts
140
+ v-if="loadingOptions.type === 'hearts'"
141
+ :class="{'on-left': hasLabel}"
142
+ :color="loadingColor"
143
+ :size="loadingSize"
144
+ />
145
+ <q-spinner-hourglass
146
+ v-if="loadingOptions.type === 'hourglass'"
147
+ :class="{'on-left': hasLabel}"
148
+ :color="loadingColor"
149
+ :size="loadingSize"
150
+ />
151
+ <q-spinner-infinity
152
+ v-if="loadingOptions.type === 'infinity'"
153
+ :class="{'on-left': hasLabel}"
154
+ :color="loadingColor"
155
+ :size="loadingSize"
156
+ />
157
+ <q-spinner-ios
158
+ v-if="loadingOptions.type === 'ios'"
159
+ :class="{'on-left': hasLabel}"
160
+ :color="loadingColor"
161
+ :size="loadingSize"
162
+ />
163
+ <q-spinner-orbit
164
+ v-if="loadingOptions.type === 'orbit'"
165
+ :class="{'on-left': hasLabel}"
166
+ :color="loadingColor"
167
+ :size="loadingSize"
168
+ />
169
+ <q-spinner-oval
170
+ v-if="loadingOptions.type === 'oval'"
171
+ :class="{'on-left': hasLabel}"
172
+ :color="loadingColor"
173
+ :size="loadingSize"
174
+ />
175
+ <q-spinner-pie
176
+ v-if="loadingOptions.type === 'pie'"
177
+ :class="{'on-left': hasLabel}"
178
+ :color="loadingColor"
179
+ :size="loadingSize"
180
+ />
181
+ <q-spinner-puff
182
+ v-if="loadingOptions.type === 'puff'"
183
+ :class="{'on-left': hasLabel}"
184
+ :color="loadingColor"
185
+ :size="loadingSize"
186
+ />
187
+ <q-spinner-radio
188
+ v-if="loadingOptions.type === 'radio'"
189
+ :class="{'on-left': hasLabel}"
190
+ :color="loadingColor"
191
+ :size="loadingSize"
192
+ />
193
+ <q-spinner-rings
194
+ v-if="loadingOptions.type === 'rings'"
195
+ :class="{'on-left': hasLabel}"
196
+ :color="loadingColor"
197
+ :size="loadingSize"
198
+ />
199
+ <q-spinner-tail
200
+ v-if="loadingOptions.type === 'tail'"
201
+ :class="{'on-left': hasLabel}"
202
+ :color="loadingColor"
203
+ :size="loadingSize"
204
+ />
205
+ <q-spinner
206
+ v-if="loadingOptions.type === 'spinner'"
207
+ :class="{'on-left': hasLabel}"
208
+ :color="loadingColor"
209
+ :size="loadingSize"
210
+ />
211
+ <template v-if="loadingOptions.noLabel !== !1 && getLabel">
212
+ <span>{{ getLabel }}</span>
213
+ </template>
214
+ </slot>
213
215
  </template>
214
- <template
215
- v-else-if="!!$slots.loading"
216
- #loading
217
- >
218
- <slot name="loading" />
219
- </template>
220
- <template
221
- v-if="!!$slots.default"
222
- #default
223
- >
216
+
217
+ <template #default>
224
218
  <slot name="default" />
225
219
  </template>
226
220
  </q-btn>
package/src/composable/useMyth.ts CHANGED
@@ -11,10 +11,9 @@ import { useI18n } from 'vue-i18n'
11
11
  import type { RouteLocationNormalizedLoaded } from 'vue-router'
12
12
  import type { QDialogOptions, QNotifyCreateOptions } from 'quasar'
13
13
  import { copyToClipboard, extend, useQuasar } from 'quasar'
14
- import { Helpers, type MythType, Str, veeRules } from '../utils'
14
+ import { Helpers, MythKey, type MythType, Str, veeRules } from '../utils'
15
15
  import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
16
16
  import { computed, inject } from 'vue'
17
- import { MythKey } from '../utils/const'
18
17
 
19
18
  export const useMyth = () => {
20
19
  const plugin = inject(MythKey) as MythType
package/src/utils/vue-plugin.ts CHANGED
@@ -5,6 +5,9 @@
5
5
  * Website: https://www.4myth.com
6
6
  * Github: https://github.com/mythpe
7
7
  */
8
+ import lodash from 'lodash'
9
+ import inflection from 'lodash-inflection'
10
+ lodash.mixin(inflection)
8
11
 
9
12
  import type { App } from 'vue'
10
13
  import { name, version } from '../../package.json'