maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
257 lines (256 loc) • 11.6 kB
JavaScript
import { defineComponent, defineAsyncComponent, ref, onMounted, computed, useSlots, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withDirectives, mergeProps, toHandlers, vModelDynamic, withModifiers, withCtx, createVNode } from "vue";
import { MazEyeSlash, MazEye } from "@maz-ui/icons";
import { i } from "../chunks/debounce.DhXdop6X.js";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazInput.Z8jTDWYg.css';const _hoisted_1 = ["for"], _hoisted_2 = {
key: 0,
class: "m-input-wrapper-left"
}, _hoisted_3 = ["id", "placeholder", "aria-label", "type", "inputmode", "name", "autocomplete", "disabled", "readonly", "required"], _hoisted_4 = {
key: 1,
class: "m-input-wrapper-right"
}, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazInput",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
placeholder: { default: void 0 },
label: { default: void 0 },
topLabel: {},
assistiveText: {},
color: { default: "primary" },
type: { default: "text" },
required: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean },
id: { default: void 0 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
hint: { default: void 0 },
inputClasses: { default: void 0 },
border: { type: Boolean, default: !0 },
inputmode: { default: "text" },
size: { default: "md" },
debounce: { type: [Boolean, Number], default: !1 },
autoFocus: { type: Boolean, default: !1 },
borderActive: { type: Boolean, default: !1 },
leftIcon: { type: [String, Function, Object], default: void 0 },
rightIcon: { type: [String, Function, Object], default: void 0 },
roundedSize: { default: "lg" },
block: { type: Boolean },
name: {},
autocomplete: {},
loading: { type: Boolean, default: !1 }
},
emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, MazIcon = defineAsyncComponent(() => import("./MazIcon.js")), MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), MazSpinner = defineAsyncComponent(() => import("./MazSpinner.js")), hasPasswordVisible = ref(!1), isFocused = ref(!1), input = ref(), instanceId = useInstanceUniqId({
componentName: "MazInput",
providedId: props.id
});
onMounted(() => {
props.autoFocus && input.value?.focus();
});
const isPasswordType = computed(() => props.type === "password"), inputType = computed(() => hasPasswordVisible.value ? "text" : props.type), borderStyle = computed(() => {
if (props.border) {
if (props.error && !isFocused.value)
return "maz-border-destructive";
if (props.success && !isFocused.value)
return "maz-border-success";
if (props.warning && !isFocused.value)
return "maz-border-warning";
if (isFocused.value || props.borderActive) {
if (props.color === "destructive")
return "maz-border-destructive";
if (props.color === "info")
return "maz-border-info";
if (props.color === "primary")
return "maz-border-primary";
if (props.color === "secondary")
return "maz-border-secondary";
if (props.color === "success")
return "maz-border-success";
if (props.color === "warning")
return "maz-border-warning";
if (props.color === "accent")
return "maz-border-accent";
if (props.color === "contrast")
return "maz-border-contrast";
}
return "--default-border";
}
}), slots = useSlots(), debounceEmitValue = i(
(value) => {
emits("update:model-value", value);
},
typeof props.debounce == "number" ? props.debounce : 500
);
function emitValue(value) {
if (props.debounce)
return debounceEmitValue(value);
emits("update:model-value", value);
}
const model = computed({
get: () => props.modelValue,
set: (value) => emitValue(value)
}), hasValue = computed(() => model.value !== void 0 && model.value !== ""), shouldUp = computed(() => (!!props.label || !!props.hint) && (!!hasValue.value || !!props.placeholder || ["date", "month", "week"].includes(props.type))), hasLabel = computed(() => !!props.label || !!props.hint);
function hasRightPart() {
return !!slots["right-icon"] || isPasswordType.value || !!props.rightIcon || props.loading;
}
function hasLeftPart() {
return !!slots["left-icon"] || !!props.leftIcon;
}
function focus(event) {
emits("focus", event), isFocused.value = !0;
}
function blur(event) {
emits("blur", event), isFocused.value = !1;
}
function change(event) {
return emits("change", event);
}
function emitInputEvent(event) {
return emits("input", event);
}
const stateColor = computed(() => {
if (props.error)
return "!maz-text-destructive-600";
if (props.success)
return "!maz-text-success-600";
if (props.warning)
return "!maz-text-warning-600";
});
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: normalizeClass(["m-input m-reset-css", [
{
"--is-focused": isFocused.value || _ctx.borderActive,
"--should-up": shouldUp.value,
"--has-label": hasLabel.value,
"--is-readonly": _ctx.readonly,
"--has-z-2": _ctx.error || _ctx.warning || _ctx.success,
"--has-state": _ctx.error || _ctx.warning || _ctx.success,
"--block": _ctx.block
},
props.class,
`--${_ctx.color}`
]]),
style: normalizeStyle([_ctx.style, { "--maz-input-color": `hsl(var(--maz-${_ctx.color}-100))` }])
}, [
_ctx.topLabel ? (openBlock(), createElementBlock("label", {
key: 0,
for: unref(instanceId),
class: normalizeClass(["m-input-top-label", stateColor.value])
}, toDisplayString(_ctx.topLabel), 11, _hoisted_1)) : createCommentVNode("", !0),
createElementVNode("div", {
class: normalizeClass(["m-input-wrapper", [
_ctx.inputClasses,
borderStyle.value,
`--rounded-${_ctx.roundedSize}`,
{ "--block": _ctx.block, "--border": _ctx.border }
]])
}, [
hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_2, [
_ctx.$slots["left-icon"] || _ctx.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
typeof _ctx.leftIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
key: 0,
name: _ctx.leftIcon,
class: normalizeClass(["maz-text-xl", stateColor.value || "maz-text-muted"])
}, null, 8, ["name", "class"])) : _ctx.leftIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.leftIcon), {
key: 1,
class: normalizeClass(["maz-text-xl", stateColor.value || "maz-text-muted"])
}, null, 8, ["class"])) : createCommentVNode("", !0)
], !0) : createCommentVNode("", !0)
])) : createCommentVNode("", !0),
createElementVNode("div", {
class: normalizeClass(["m-input-wrapper-input", [
`--${_ctx.size}`,
{
"--top-label": !!_ctx.topLabel,
"--has-left-icon": hasLeftPart(),
"--has-right-icon": hasRightPart()
}
]])
}, [
withDirectives(createElementVNode("input", mergeProps({ id: unref(instanceId) }, _ctx.$attrs, {
ref_key: "input",
ref: input,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
placeholder: _ctx.placeholder,
"aria-label": _ctx.label || _ctx.placeholder,
type: inputType.value,
inputmode: _ctx.inputmode,
name: _ctx.name,
autocomplete: _ctx.autocomplete,
disabled: _ctx.disabled,
readonly: _ctx.readonly,
required: _ctx.required,
class: "m-input-input"
}, toHandlers({
blur,
focus,
change,
input: emitInputEvent
}, !0), {
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
}), null, 16, _hoisted_3), [
[vModelDynamic, model.value]
]),
_ctx.label || _ctx.hint ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(["m-input-label", stateColor.value])
}, toDisplayString(_ctx.hint || _ctx.label), 3)) : createCommentVNode("", !0)
], 2),
hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_4, [
_ctx.$slots["right-icon"] || _ctx.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
typeof _ctx.rightIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
key: 0,
name: _ctx.rightIcon,
class: normalizeClass(["maz-text-xl", stateColor.value || "maz-text-muted"])
}, null, 8, ["name", "class"])) : _ctx.rightIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.rightIcon), {
key: 1,
class: normalizeClass(["maz-text-xl", stateColor.value || "maz-text-muted"])
}, null, 8, ["class"])) : createCommentVNode("", !0)
], !0) : createCommentVNode("", !0),
isPasswordType.value ? (openBlock(), createBlock(unref(MazBtn), {
key: 1,
color: "transparent",
tabindex: "-1",
size: "mini",
onClick: _cache[2] || (_cache[2] = withModifiers(($event) => hasPasswordVisible.value = !hasPasswordVisible.value, ["stop"]))
}, {
default: withCtx(() => [
hasPasswordVisible.value ? (openBlock(), createBlock(unref(MazEyeSlash), {
key: 0,
class: "maz-text-xl maz-text-muted"
})) : (openBlock(), createBlock(unref(MazEye), {
key: 1,
class: "maz-text-xl maz-text-muted"
}))
]),
_: 1
})) : createCommentVNode("", !0),
_ctx.loading ? renderSlot(_ctx.$slots, "loader", { key: 2 }, () => [
createVNode(unref(MazSpinner), { color: _ctx.color }, null, 8, ["color"])
], !0) : createCommentVNode("", !0)
])) : createCommentVNode("", !0)
], 2),
_ctx.assistiveText ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["m-input-bottom-text", [
{
"maz-text-destructive-600": _ctx.error,
"maz-text-success-600": _ctx.success,
"maz-text-warning-600": _ctx.warning,
"maz-text-muted": !_ctx.error && !_ctx.success && !_ctx.warning
}
]])
}, toDisplayString(_ctx.assistiveText), 3)) : createCommentVNode("", !0)
], 6));
}
}), MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-575efdcd"]]);
export {
MazInput as default
};