maz-ui 3.22.0 → 3.22.2

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 (73) hide show
  1. package/components/MazInput.d.ts +38 -22
  2. package/components/MazInput.mjs +1 -2
  3. package/components/MazInputNumber.mjs +1 -1
  4. package/components/MazInputPrice.mjs +1 -1
  5. package/components/MazInputTags.mjs +1 -1
  6. package/components/MazPhoneNumberInput.d.ts +41 -1
  7. package/components/MazPhoneNumberInput.mjs +1 -1
  8. package/components/MazPicker.mjs +1 -1
  9. package/components/MazSelect.d.ts +33 -1
  10. package/components/MazSelect.mjs +1 -1
  11. package/components/MazTextarea.d.ts +17 -17
  12. package/components/MazTextarea.mjs +7 -8
  13. package/components/assets/MazInput.css +1 -1
  14. package/components/assets/MazInputPrice.css +1 -1
  15. package/components/assets/MazInputTags.css +1 -1
  16. package/components/assets/MazPhoneNumberInput.css +1 -1
  17. package/components/assets/MazSelect.css +1 -1
  18. package/components/assets/MazTextarea.css +1 -1
  19. package/components/chunks/{MazBtn-001d4174.mjs → MazBtn-0e02f0da.mjs} +2 -2
  20. package/components/chunks/{MazBtn-a3a285eb.mjs → MazBtn-2f4fa942.mjs} +2 -2
  21. package/components/chunks/{MazBtn-97d9e521.mjs → MazBtn-30723941.mjs} +2 -2
  22. package/components/chunks/{MazBtn-080c9397.mjs → MazBtn-4e1e116e.mjs} +2 -2
  23. package/components/chunks/{MazBtn-7f413085.mjs → MazBtn-b42e3575.mjs} +2 -2
  24. package/components/chunks/{MazBtn-29a43072.mjs → MazBtn-f48da79c.mjs} +2 -2
  25. package/components/chunks/{MazCheckbox-0595c207.mjs → MazCheckbox-9fa9179a.mjs} +1 -1
  26. package/components/chunks/{MazCheckbox-90f20e7f.mjs → MazCheckbox-e0bbe6ec.mjs} +1 -1
  27. package/components/chunks/MazInput-713b00d0.mjs +326 -0
  28. package/components/chunks/MazInput-b9386887.mjs +341 -0
  29. package/components/chunks/MazInput-c33627dd.mjs +334 -0
  30. package/components/chunks/{MazInputPrice-eb36a7dd.mjs → MazInputPrice-452297f5.mjs} +171 -191
  31. package/components/chunks/{MazInputTags-24164d56.mjs → MazInputTags-7a463b81.mjs} +176 -196
  32. package/components/chunks/{MazPhoneNumberInput-4cec4ade.mjs → MazPhoneNumberInput-31bc05f9.mjs} +241 -226
  33. package/components/chunks/{MazPicker-9f4c724c.mjs → MazPicker-50fc11d1.mjs} +4 -4
  34. package/components/chunks/{MazPickerCalendar-35fe36ab.mjs → MazPickerCalendar-cacb361c.mjs} +5 -5
  35. package/components/chunks/{MazPickerHeader-d8687abf.mjs → MazPickerHeader-63d45179.mjs} +1 -1
  36. package/components/chunks/{MazPickerMonthSwitcher-739ed62a.mjs → MazPickerMonthSwitcher-913c6e2c.mjs} +2 -2
  37. package/components/chunks/{MazPickerShortcuts-68622fe8.mjs → MazPickerShortcuts-c6fabfc6.mjs} +2 -2
  38. package/components/chunks/{MazPickerTime-031062b2.mjs → MazPickerTime-5e4475da.mjs} +2 -2
  39. package/components/chunks/{MazPickerYearSwitcher-2a006a30.mjs → MazPickerYearSwitcher-dd4fa89c.mjs} +3 -3
  40. package/components/chunks/{MazSelect-757bffd7.mjs → MazSelect-2e5cd411.mjs} +199 -206
  41. package/components/chunks/{MazSpinner-d356ad25.mjs → MazSpinner-100c99b8.mjs} +1 -1
  42. package/components/chunks/{MazSpinner-7bd9b831.mjs → MazSpinner-191ad23b.mjs} +1 -1
  43. package/components/chunks/{MazSpinner-89743727.mjs → MazSpinner-339a9006.mjs} +1 -1
  44. package/components/chunks/{MazSpinner-85c86950.mjs → MazSpinner-8859d658.mjs} +1 -1
  45. package/components/chunks/{MazSpinner-d669a3af.mjs → MazSpinner-cb6f99f3.mjs} +1 -1
  46. package/components/chunks/{MazSpinner-ac429216.mjs → MazSpinner-db6fc59d.mjs} +1 -1
  47. package/css/main.css +1 -1
  48. package/nuxt/index.json +1 -1
  49. package/nuxt/runtime/composables/use-theme-handler.mjs +1 -1
  50. package/nuxt/runtime/plugins/aos.d.ts +1 -1
  51. package/nuxt/runtime/plugins/aos.mjs +1 -1
  52. package/nuxt/runtime/plugins/maz-icon-path.d.ts +1 -1
  53. package/nuxt/runtime/plugins/maz-icon-path.mjs +1 -1
  54. package/nuxt/runtime/plugins/toaster.d.ts +1 -1
  55. package/nuxt/runtime/plugins/toaster.mjs +1 -1
  56. package/nuxt/runtime/plugins/v-click-outside.d.ts +1 -1
  57. package/nuxt/runtime/plugins/v-click-outside.mjs +1 -1
  58. package/nuxt/runtime/plugins/v-fullscreen-img.d.ts +1 -1
  59. package/nuxt/runtime/plugins/v-fullscreen-img.mjs +1 -1
  60. package/nuxt/runtime/plugins/v-lazy-img.d.ts +1 -1
  61. package/nuxt/runtime/plugins/v-lazy-img.mjs +1 -1
  62. package/nuxt/runtime/plugins/v-zoom-img.d.ts +1 -1
  63. package/nuxt/runtime/plugins/v-zoom-img.mjs +1 -1
  64. package/nuxt/runtime/plugins/wait.d.ts +1 -1
  65. package/nuxt/runtime/plugins/wait.mjs +1 -1
  66. package/package.json +2 -2
  67. package/types/components/MazInput.vue.d.ts +38 -22
  68. package/types/components/MazPhoneNumberInput.vue.d.ts +41 -1
  69. package/types/components/MazSelect.vue.d.ts +33 -1
  70. package/types/components/MazTextarea.vue.d.ts +17 -17
  71. package/components/chunks/MazInput-12a098d4.mjs +0 -361
  72. package/components/chunks/MazInput-20ea773f.mjs +0 -354
  73. package/components/chunks/MazInput-4313d3cc.mjs +0 -346
@@ -1,354 +0,0 @@
1
- import "../assets/MazInput.css";
2
- import { computed, defineComponent, ref, getCurrentInstance, onMounted, defineAsyncComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx } from "vue";
3
- import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.mjs";
4
- function debounce(fn, delay) {
5
- let timeout;
6
- return function(...args) {
7
- clearTimeout(timeout);
8
- timeout = setTimeout(() => {
9
- fn.apply(this, args);
10
- }, delay);
11
- };
12
- }
13
- const useInstanceUniqId = ({
14
- componentName,
15
- instance,
16
- providedId
17
- }) => {
18
- return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
19
- };
20
- const MazBtn = defineAsyncComponent(() => import("./MazBtn-cf0c8fcb.mjs"));
21
- const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
22
- const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
23
- const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
24
- const CheckIcon = defineAsyncComponent(() => import("./check-f2fcce10.mjs"));
25
- const _sfc_main = defineComponent({
26
- components: {
27
- MazBtn,
28
- MazIcon,
29
- CheckIcon,
30
- EyeIcon,
31
- EyeOffIcon
32
- },
33
- inheritAttrs: false,
34
- props: {
35
- modelValue: {
36
- type: [String, Number, Boolean],
37
- default: void 0
38
- },
39
- placeholder: { type: String, default: void 0 },
40
- color: {
41
- type: String,
42
- default: "primary"
43
- },
44
- label: { type: String, default: void 0 },
45
- name: { type: String, default: "input" },
46
- type: {
47
- type: String,
48
- default: "text",
49
- validator: (value) => {
50
- return [
51
- "text",
52
- "date",
53
- "number",
54
- "tel",
55
- "search",
56
- "url",
57
- "password",
58
- "month",
59
- "time",
60
- "week",
61
- "email"
62
- ].includes(value);
63
- }
64
- },
65
- required: { type: Boolean, default: false },
66
- disabled: { type: Boolean, default: false },
67
- readonly: { type: Boolean, default: false },
68
- id: { type: String, default: void 0 },
69
- error: { type: Boolean, default: false },
70
- success: { type: Boolean, default: false },
71
- warning: { type: Boolean, default: false },
72
- hint: { type: String, default: void 0 },
73
- inputClasses: { type: String, default: void 0 },
74
- noBorder: { type: Boolean, default: false },
75
- noRadius: { type: Boolean, default: false },
76
- size: {
77
- type: String,
78
- default: "md",
79
- validator: (value) => {
80
- return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
81
- }
82
- },
83
- debounce: { type: Boolean, default: false },
84
- debounceDelay: { type: Number, default: 500 },
85
- validButton: { type: Boolean, default: false },
86
- validButtonLoading: { type: Boolean, default: false },
87
- autoFocus: { type: Boolean, default: false },
88
- borderActive: { type: Boolean, default: false },
89
- leftIcon: { type: String, default: void 0 },
90
- rightIcon: { type: String, default: void 0 }
91
- },
92
- emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
93
- setup(props, { emit, slots }) {
94
- const hasPasswordVisible = ref(false);
95
- const isFocused = ref(false);
96
- const input = ref();
97
- const instance = getCurrentInstance();
98
- const instanceId = useInstanceUniqId({
99
- componentName: "MazInput",
100
- instance,
101
- providedId: props.id
102
- });
103
- onMounted(() => {
104
- var _a;
105
- if (props.autoFocus) {
106
- (_a = input.value) == null ? void 0 : _a.focus();
107
- }
108
- });
109
- const isPasswordType = computed(() => props.type === "password");
110
- const inputType = computed(() => hasPasswordVisible.value ? "text" : props.type);
111
- const borderStyle = computed(() => {
112
- if (props.noBorder)
113
- return void 0;
114
- if (props.error)
115
- return "maz-border-danger";
116
- if (props.success)
117
- return "maz-border-success";
118
- if (props.warning)
119
- return "maz-border-warning";
120
- if (isFocused.value || props.borderActive) {
121
- if (props.color === "black")
122
- return "maz-border-black";
123
- if (props.color === "danger")
124
- return "maz-border-danger";
125
- if (props.color === "info")
126
- return "maz-border-info";
127
- if (props.color === "primary")
128
- return "maz-border-primary";
129
- if (props.color === "secondary")
130
- return "maz-border-secondary";
131
- if (props.color === "success")
132
- return "maz-border-success";
133
- if (props.color === "warning")
134
- return "maz-border-warning";
135
- if (props.color === "white")
136
- return "maz-border-white";
137
- }
138
- return "--default-border";
139
- });
140
- const computedPlaceholder = computed(() => {
141
- const { required, placeholder } = props;
142
- if (!placeholder)
143
- return void 0;
144
- return required ? `${placeholder} *` : placeholder;
145
- });
146
- const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
147
- const inputValue = computed({
148
- get: () => props.modelValue,
149
- set: (value) => emitValue(value)
150
- });
151
- const shouldUp = computed(() => {
152
- return (!!props.label || !!props.hint) && (isFocused.value || !!hasValue.value || !!props.placeholder || ["date", "month", "week"].includes(props.type));
153
- });
154
- const hasLabel = computed(() => !!props.label || !!props.hint);
155
- const hasRightPart = () => {
156
- return !!slots["right-icon"] || isPasswordType.value || !!slots["valid-button"] || props.validButton || !!props.rightIcon;
157
- };
158
- const hasLeftPart = () => {
159
- return !!slots["left-icon"] || !!props.leftIcon;
160
- };
161
- const focus = (event) => {
162
- emit("focus", event);
163
- isFocused.value = true;
164
- };
165
- const blur = (event) => {
166
- emit("blur", event);
167
- isFocused.value = false;
168
- };
169
- const change = (event) => emit("change", event);
170
- const debounceEmitValue = debounce((value) => {
171
- emit("update:model-value", value);
172
- }, props.debounceDelay);
173
- const emitValue = (value) => {
174
- if (props.debounce)
175
- return debounceEmitValue(value);
176
- emit("update:model-value", value);
177
- };
178
- return {
179
- inputValue,
180
- shouldUp,
181
- hasLabel,
182
- computedPlaceholder,
183
- isPasswordType,
184
- inputType,
185
- input,
186
- isFocused,
187
- hasPasswordVisible,
188
- borderStyle,
189
- focus,
190
- blur,
191
- change,
192
- emitValue,
193
- hasRightPart,
194
- hasLeftPart,
195
- instanceId
196
- };
197
- }
198
- });
199
- const MazInput_vue_vue_type_style_index_0_scoped_18b53f70_lang = "";
200
- const _hoisted_1 = {
201
- key: 0,
202
- class: "m-input-wrapper-left"
203
- };
204
- const _hoisted_2 = { class: "m-input-wrapper-input" };
205
- const _hoisted_3 = ["id", "type", "name", "placeholder", "aria-label", "disabled", "readonly", "required"];
206
- const _hoisted_4 = { key: 0 };
207
- const _hoisted_5 = {
208
- key: 1,
209
- class: "m-input-wrapper-right"
210
- };
211
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
212
- const _component_MazIcon = resolveComponent("MazIcon");
213
- const _component_EyeOffIcon = resolveComponent("EyeOffIcon");
214
- const _component_EyeIcon = resolveComponent("EyeIcon");
215
- const _component_MazBtn = resolveComponent("MazBtn");
216
- const _component_CheckIcon = resolveComponent("CheckIcon");
217
- return openBlock(), createElementBlock(
218
- "div",
219
- {
220
- class: normalizeClass(["m-input", [
221
- {
222
- "--is-focused": _ctx.isFocused || _ctx.borderActive,
223
- "--should-up": _ctx.shouldUp,
224
- "--has-label": _ctx.hasLabel,
225
- "--is-disabled": _ctx.disabled,
226
- "--is-readonly": _ctx.readonly,
227
- "--has-z-2": _ctx.error || _ctx.warning || _ctx.success,
228
- "--has-state": _ctx.error || _ctx.warning || _ctx.success
229
- },
230
- _ctx.$attrs.class,
231
- `--${_ctx.color}`,
232
- `--${_ctx.size}`
233
- ]])
234
- },
235
- [
236
- createElementVNode(
237
- "div",
238
- {
239
- class: normalizeClass(["m-input-wrapper", [_ctx.inputClasses, _ctx.borderStyle, { "maz-rounded": !_ctx.noRadius }]])
240
- },
241
- [
242
- _ctx.hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_1, [
243
- _ctx.$slots["left-icon"] || _ctx.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
244
- createVNode(_component_MazIcon, {
245
- name: _ctx.leftIcon,
246
- class: "maz-text-xl maz-text-muted"
247
- }, null, 8, ["name"])
248
- ], true) : createCommentVNode("v-if", true)
249
- ])) : createCommentVNode("v-if", true),
250
- createElementVNode("div", _hoisted_2, [
251
- withDirectives(createElementVNode("input", mergeProps({
252
- id: _ctx.instanceId,
253
- ref: "input",
254
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
255
- type: _ctx.inputType,
256
- name: _ctx.name
257
- }, _ctx.$attrs, {
258
- placeholder: _ctx.computedPlaceholder,
259
- "aria-label": _ctx.label || _ctx.placeholder,
260
- disabled: _ctx.disabled,
261
- readonly: _ctx.readonly,
262
- required: _ctx.required,
263
- class: "m-input-input"
264
- }, toHandlers({
265
- blur: _ctx.blur,
266
- focus: _ctx.focus,
267
- change: _ctx.change
268
- }, true), {
269
- onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
270
- }), null, 16, _hoisted_3), [
271
- [vModelDynamic, _ctx.inputValue]
272
- ]),
273
- _ctx.label || _ctx.hint ? (openBlock(), createElementBlock(
274
- "span",
275
- {
276
- key: 0,
277
- ref: "label",
278
- class: normalizeClass(["m-input-label", [
279
- {
280
- "maz-text-danger-600": _ctx.error,
281
- "maz-text-success-600": _ctx.success,
282
- "maz-text-warning-600": _ctx.warning
283
- }
284
- ]])
285
- },
286
- [
287
- createTextVNode(
288
- toDisplayString(_ctx.hint || _ctx.label) + " ",
289
- 1
290
- /* TEXT */
291
- ),
292
- _ctx.required ? (openBlock(), createElementBlock("sup", _hoisted_4, "*")) : createCommentVNode("v-if", true)
293
- ],
294
- 2
295
- /* CLASS */
296
- )) : createCommentVNode("v-if", true)
297
- ]),
298
- _ctx.hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_5, [
299
- _ctx.$slots["right-icon"] || _ctx.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
300
- createVNode(_component_MazIcon, {
301
- name: _ctx.rightIcon,
302
- class: "maz-text-xl maz-text-muted"
303
- }, null, 8, ["name"])
304
- ], true) : createCommentVNode("v-if", true),
305
- _ctx.isPasswordType ? (openBlock(), createBlock(_component_MazBtn, {
306
- key: 1,
307
- color: "transparent",
308
- tabindex: "-1",
309
- size: "mini",
310
- onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.hasPasswordVisible = !_ctx.hasPasswordVisible, ["stop"]))
311
- }, {
312
- default: withCtx(() => [
313
- _ctx.hasPasswordVisible ? (openBlock(), createBlock(_component_EyeOffIcon, {
314
- key: 0,
315
- class: "maz-text-xl maz-text-muted"
316
- })) : (openBlock(), createBlock(_component_EyeIcon, {
317
- key: 1,
318
- class: "maz-text-xl maz-text-muted"
319
- }))
320
- ]),
321
- _: 1
322
- /* STABLE */
323
- })) : createCommentVNode("v-if", true),
324
- _ctx.$slots["valid-button"] || _ctx.validButton ? renderSlot(_ctx.$slots, "valid-button", { key: 2 }, () => [
325
- createVNode(_component_MazBtn, {
326
- color: "transparent",
327
- disabled: _ctx.disabled,
328
- tabindex: "-1",
329
- loading: _ctx.validButtonLoading,
330
- class: "m-input-valid-button",
331
- size: "mini",
332
- type: "submit"
333
- }, {
334
- default: withCtx(() => [
335
- createVNode(_component_CheckIcon, { class: "maz-text-2xl maz-text-normal" })
336
- ]),
337
- _: 1
338
- /* STABLE */
339
- }, 8, ["disabled", "loading"])
340
- ], true) : createCommentVNode("v-if", true)
341
- ])) : createCommentVNode("v-if", true)
342
- ],
343
- 2
344
- /* CLASS */
345
- )
346
- ],
347
- 2
348
- /* CLASS */
349
- );
350
- }
351
- const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-18b53f70"]]);
352
- export {
353
- MazInput as default
354
- };
@@ -1,346 +0,0 @@
1
- import "../assets/MazInput.css";
2
- import { computed, defineComponent, ref, getCurrentInstance, onMounted, defineAsyncComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx } from "vue";
3
- import { d as debounce } from "./debounce-7d66ffa9.mjs";
4
- import { _ as _export_sfc } from "./MazPicker-9f4c724c.mjs";
5
- const useInstanceUniqId = ({
6
- componentName,
7
- instance,
8
- providedId
9
- }) => {
10
- return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
11
- };
12
- const MazBtn = defineAsyncComponent(() => import("./MazBtn-a3a285eb.mjs"));
13
- const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
14
- const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
15
- const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
16
- const CheckIcon = defineAsyncComponent(() => import("./check-f2fcce10.mjs"));
17
- const _sfc_main = defineComponent({
18
- components: {
19
- MazBtn,
20
- MazIcon,
21
- CheckIcon,
22
- EyeIcon,
23
- EyeOffIcon
24
- },
25
- inheritAttrs: false,
26
- props: {
27
- modelValue: {
28
- type: [String, Number, Boolean],
29
- default: void 0
30
- },
31
- placeholder: { type: String, default: void 0 },
32
- color: {
33
- type: String,
34
- default: "primary"
35
- },
36
- label: { type: String, default: void 0 },
37
- name: { type: String, default: "input" },
38
- type: {
39
- type: String,
40
- default: "text",
41
- validator: (value) => {
42
- return [
43
- "text",
44
- "date",
45
- "number",
46
- "tel",
47
- "search",
48
- "url",
49
- "password",
50
- "month",
51
- "time",
52
- "week",
53
- "email"
54
- ].includes(value);
55
- }
56
- },
57
- required: { type: Boolean, default: false },
58
- disabled: { type: Boolean, default: false },
59
- readonly: { type: Boolean, default: false },
60
- id: { type: String, default: void 0 },
61
- error: { type: Boolean, default: false },
62
- success: { type: Boolean, default: false },
63
- warning: { type: Boolean, default: false },
64
- hint: { type: String, default: void 0 },
65
- inputClasses: { type: String, default: void 0 },
66
- noBorder: { type: Boolean, default: false },
67
- noRadius: { type: Boolean, default: false },
68
- size: {
69
- type: String,
70
- default: "md",
71
- validator: (value) => {
72
- return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
73
- }
74
- },
75
- debounce: { type: Boolean, default: false },
76
- debounceDelay: { type: Number, default: 500 },
77
- validButton: { type: Boolean, default: false },
78
- validButtonLoading: { type: Boolean, default: false },
79
- autoFocus: { type: Boolean, default: false },
80
- borderActive: { type: Boolean, default: false },
81
- leftIcon: { type: String, default: void 0 },
82
- rightIcon: { type: String, default: void 0 }
83
- },
84
- emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
85
- setup(props, { emit, slots }) {
86
- const hasPasswordVisible = ref(false);
87
- const isFocused = ref(false);
88
- const input = ref();
89
- const instance = getCurrentInstance();
90
- const instanceId = useInstanceUniqId({
91
- componentName: "MazInput",
92
- instance,
93
- providedId: props.id
94
- });
95
- onMounted(() => {
96
- var _a;
97
- if (props.autoFocus) {
98
- (_a = input.value) == null ? void 0 : _a.focus();
99
- }
100
- });
101
- const isPasswordType = computed(() => props.type === "password");
102
- const inputType = computed(() => hasPasswordVisible.value ? "text" : props.type);
103
- const borderStyle = computed(() => {
104
- if (props.noBorder)
105
- return void 0;
106
- if (props.error)
107
- return "maz-border-danger";
108
- if (props.success)
109
- return "maz-border-success";
110
- if (props.warning)
111
- return "maz-border-warning";
112
- if (isFocused.value || props.borderActive) {
113
- if (props.color === "black")
114
- return "maz-border-black";
115
- if (props.color === "danger")
116
- return "maz-border-danger";
117
- if (props.color === "info")
118
- return "maz-border-info";
119
- if (props.color === "primary")
120
- return "maz-border-primary";
121
- if (props.color === "secondary")
122
- return "maz-border-secondary";
123
- if (props.color === "success")
124
- return "maz-border-success";
125
- if (props.color === "warning")
126
- return "maz-border-warning";
127
- if (props.color === "white")
128
- return "maz-border-white";
129
- }
130
- return "--default-border";
131
- });
132
- const computedPlaceholder = computed(() => {
133
- const { required, placeholder } = props;
134
- if (!placeholder)
135
- return void 0;
136
- return required ? `${placeholder} *` : placeholder;
137
- });
138
- const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
139
- const inputValue = computed({
140
- get: () => props.modelValue,
141
- set: (value) => emitValue(value)
142
- });
143
- const shouldUp = computed(() => {
144
- return (!!props.label || !!props.hint) && (isFocused.value || !!hasValue.value || !!props.placeholder || ["date", "month", "week"].includes(props.type));
145
- });
146
- const hasLabel = computed(() => !!props.label || !!props.hint);
147
- const hasRightPart = () => {
148
- return !!slots["right-icon"] || isPasswordType.value || !!slots["valid-button"] || props.validButton || !!props.rightIcon;
149
- };
150
- const hasLeftPart = () => {
151
- return !!slots["left-icon"] || !!props.leftIcon;
152
- };
153
- const focus = (event) => {
154
- emit("focus", event);
155
- isFocused.value = true;
156
- };
157
- const blur = (event) => {
158
- emit("blur", event);
159
- isFocused.value = false;
160
- };
161
- const change = (event) => emit("change", event);
162
- const debounceEmitValue = debounce((value) => {
163
- emit("update:model-value", value);
164
- }, props.debounceDelay);
165
- const emitValue = (value) => {
166
- if (props.debounce)
167
- return debounceEmitValue(value);
168
- emit("update:model-value", value);
169
- };
170
- return {
171
- inputValue,
172
- shouldUp,
173
- hasLabel,
174
- computedPlaceholder,
175
- isPasswordType,
176
- inputType,
177
- input,
178
- isFocused,
179
- hasPasswordVisible,
180
- borderStyle,
181
- focus,
182
- blur,
183
- change,
184
- emitValue,
185
- hasRightPart,
186
- hasLeftPart,
187
- instanceId
188
- };
189
- }
190
- });
191
- const MazInput_vue_vue_type_style_index_0_scoped_18b53f70_lang = "";
192
- const _hoisted_1 = {
193
- key: 0,
194
- class: "m-input-wrapper-left"
195
- };
196
- const _hoisted_2 = { class: "m-input-wrapper-input" };
197
- const _hoisted_3 = ["id", "type", "name", "placeholder", "aria-label", "disabled", "readonly", "required"];
198
- const _hoisted_4 = { key: 0 };
199
- const _hoisted_5 = {
200
- key: 1,
201
- class: "m-input-wrapper-right"
202
- };
203
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
204
- const _component_MazIcon = resolveComponent("MazIcon");
205
- const _component_EyeOffIcon = resolveComponent("EyeOffIcon");
206
- const _component_EyeIcon = resolveComponent("EyeIcon");
207
- const _component_MazBtn = resolveComponent("MazBtn");
208
- const _component_CheckIcon = resolveComponent("CheckIcon");
209
- return openBlock(), createElementBlock(
210
- "div",
211
- {
212
- class: normalizeClass(["m-input", [
213
- {
214
- "--is-focused": _ctx.isFocused || _ctx.borderActive,
215
- "--should-up": _ctx.shouldUp,
216
- "--has-label": _ctx.hasLabel,
217
- "--is-disabled": _ctx.disabled,
218
- "--is-readonly": _ctx.readonly,
219
- "--has-z-2": _ctx.error || _ctx.warning || _ctx.success,
220
- "--has-state": _ctx.error || _ctx.warning || _ctx.success
221
- },
222
- _ctx.$attrs.class,
223
- `--${_ctx.color}`,
224
- `--${_ctx.size}`
225
- ]])
226
- },
227
- [
228
- createElementVNode(
229
- "div",
230
- {
231
- class: normalizeClass(["m-input-wrapper", [_ctx.inputClasses, _ctx.borderStyle, { "maz-rounded": !_ctx.noRadius }]])
232
- },
233
- [
234
- _ctx.hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_1, [
235
- _ctx.$slots["left-icon"] || _ctx.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
236
- createVNode(_component_MazIcon, {
237
- name: _ctx.leftIcon,
238
- class: "maz-text-xl maz-text-muted"
239
- }, null, 8, ["name"])
240
- ], true) : createCommentVNode("v-if", true)
241
- ])) : createCommentVNode("v-if", true),
242
- createElementVNode("div", _hoisted_2, [
243
- withDirectives(createElementVNode("input", mergeProps({
244
- id: _ctx.instanceId,
245
- ref: "input",
246
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
247
- type: _ctx.inputType,
248
- name: _ctx.name
249
- }, _ctx.$attrs, {
250
- placeholder: _ctx.computedPlaceholder,
251
- "aria-label": _ctx.label || _ctx.placeholder,
252
- disabled: _ctx.disabled,
253
- readonly: _ctx.readonly,
254
- required: _ctx.required,
255
- class: "m-input-input"
256
- }, toHandlers({
257
- blur: _ctx.blur,
258
- focus: _ctx.focus,
259
- change: _ctx.change
260
- }, true), {
261
- onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
262
- }), null, 16, _hoisted_3), [
263
- [vModelDynamic, _ctx.inputValue]
264
- ]),
265
- _ctx.label || _ctx.hint ? (openBlock(), createElementBlock(
266
- "span",
267
- {
268
- key: 0,
269
- ref: "label",
270
- class: normalizeClass(["m-input-label", [
271
- {
272
- "maz-text-danger-600": _ctx.error,
273
- "maz-text-success-600": _ctx.success,
274
- "maz-text-warning-600": _ctx.warning
275
- }
276
- ]])
277
- },
278
- [
279
- createTextVNode(
280
- toDisplayString(_ctx.hint || _ctx.label) + " ",
281
- 1
282
- /* TEXT */
283
- ),
284
- _ctx.required ? (openBlock(), createElementBlock("sup", _hoisted_4, "*")) : createCommentVNode("v-if", true)
285
- ],
286
- 2
287
- /* CLASS */
288
- )) : createCommentVNode("v-if", true)
289
- ]),
290
- _ctx.hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_5, [
291
- _ctx.$slots["right-icon"] || _ctx.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
292
- createVNode(_component_MazIcon, {
293
- name: _ctx.rightIcon,
294
- class: "maz-text-xl maz-text-muted"
295
- }, null, 8, ["name"])
296
- ], true) : createCommentVNode("v-if", true),
297
- _ctx.isPasswordType ? (openBlock(), createBlock(_component_MazBtn, {
298
- key: 1,
299
- color: "transparent",
300
- tabindex: "-1",
301
- size: "mini",
302
- onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.hasPasswordVisible = !_ctx.hasPasswordVisible, ["stop"]))
303
- }, {
304
- default: withCtx(() => [
305
- _ctx.hasPasswordVisible ? (openBlock(), createBlock(_component_EyeOffIcon, {
306
- key: 0,
307
- class: "maz-text-xl maz-text-muted"
308
- })) : (openBlock(), createBlock(_component_EyeIcon, {
309
- key: 1,
310
- class: "maz-text-xl maz-text-muted"
311
- }))
312
- ]),
313
- _: 1
314
- /* STABLE */
315
- })) : createCommentVNode("v-if", true),
316
- _ctx.$slots["valid-button"] || _ctx.validButton ? renderSlot(_ctx.$slots, "valid-button", { key: 2 }, () => [
317
- createVNode(_component_MazBtn, {
318
- color: "transparent",
319
- disabled: _ctx.disabled,
320
- tabindex: "-1",
321
- loading: _ctx.validButtonLoading,
322
- class: "m-input-valid-button",
323
- size: "mini",
324
- type: "submit"
325
- }, {
326
- default: withCtx(() => [
327
- createVNode(_component_CheckIcon, { class: "maz-text-2xl maz-text-normal" })
328
- ]),
329
- _: 1
330
- /* STABLE */
331
- }, 8, ["disabled", "loading"])
332
- ], true) : createCommentVNode("v-if", true)
333
- ])) : createCommentVNode("v-if", true)
334
- ],
335
- 2
336
- /* CLASS */
337
- )
338
- ],
339
- 2
340
- /* CLASS */
341
- );
342
- }
343
- const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-18b53f70"]]);
344
- export {
345
- MazInput as default
346
- };