maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
146 lines (145 loc) • 6.85 kB
JavaScript
import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, TransitionGroup, withCtx, Fragment, renderList, withModifiers, unref, createTextVNode, toDisplayString, mergeProps, withKeys } from "vue";
import { MazTrash } from "@maz-ui/icons";
import { r } from "../chunks/truthyFilter.DZvXmxeK.js";
import MazBtn from "./MazBtn.js";
import MazInput from "./MazInput.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazInputTags.is2jSJk-.css';const _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazInputTags",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
placeholder: { default: void 0 },
label: { default: void 0 },
disabled: { type: Boolean, default: !1 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
size: { default: "md" },
color: { default: "primary" },
block: { type: Boolean },
addTagsOnBlur: { type: Boolean, default: !0 },
hint: {}
},
emits: ["update:model-value"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, isFocused = ref(!1), inputValue = ref(), tagsHoveredId = ref(), lastIdToDelete = ref(), currentDeleteTimeout = ref(), tags = computed(
() => props.modelValue?.map((tag) => ({
tag,
// eslint-disable-next-line sonarjs/pseudo-random
id: `${Date.now()}-${Math.random().toString(36).slice(2)}`
}))
);
function addTags(event) {
if (inputValue.value) {
lastIdToDelete.value = void 0, event.preventDefault();
const newValues = inputValue.value.trim().split(",").map((value) => value.trim() === "," ? void 0 : value.trim()).filter(r).filter(
(value) => !props.modelValue?.filter(r)?.some((tag) => tag === value)
);
emits(
"update:model-value",
props.modelValue ? [...props.modelValue, ...newValues] : [...newValues]
), inputValue.value = void 0;
}
}
const borderStyle = computed(() => {
if (props.error)
return "maz-border-destructive";
if (props.success)
return "maz-border-success";
if (props.warning)
return "maz-border-warning";
if (isFocused.value) {
if (props.color === "primary")
return "maz-border-primary";
if (props.color === "secondary")
return "maz-border-secondary";
if (props.color === "info")
return "maz-border-info";
if (props.color === "destructive")
return "maz-border-destructive";
if (props.color === "success")
return "maz-border-success";
if (props.color === "warning")
return "maz-border-warning";
}
return "";
});
function removeLastTag() {
inputValue.value || tags.value && tags.value?.length === 0 || (currentDeleteTimeout.value && clearTimeout(currentDeleteTimeout.value), lastIdToDelete.value ? (removeTag(lastIdToDelete.value), lastIdToDelete.value = void 0) : (lastIdToDelete.value = tags.value?.[tags.value.length - 1]?.id, currentDeleteTimeout.value = setTimeout(() => {
lastIdToDelete.value = void 0;
}, 2e3)));
}
function removeTag(id) {
const tagsArray = tags.value?.filter((tag) => tag.id !== id).map((tag) => tag.tag);
emits("update:model-value", tagsArray);
}
const buttonSize = computed(() => props.size === "mini" || props.size === "xs" ? "mini" : props.size === "sm" ? "xs" : props.size === "md" ? "sm" : props.size === "lg" ? "md" : props.size === "xl" ? "lg" : props.size);
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: normalizeClass(["m-input-tags m-reset-css", [borderStyle.value, `--${_ctx.color}`, `--${_ctx.size}`, props.class, { "--block": _ctx.block }]]),
style: normalizeStyle(_ctx.style),
onFocusCapture: _cache[4] || (_cache[4] = ($event) => isFocused.value = !0),
onBlurCapture: _cache[5] || (_cache[5] = ($event) => isFocused.value = !1)
}, [
createVNode(TransitionGroup, { name: "maz-tags" }, {
default: withCtx(() => [
(openBlock(!0), createElementBlock(Fragment, null, renderList(tags.value, ({ tag, id }, i) => (openBlock(), createElementBlock("div", {
key: `tag-${i}`,
class: "m-input-tags__wrapper"
}, [
createVNode(MazBtn, {
class: "m-input-tags__tag",
disabled: _ctx.disabled,
size: buttonSize.value,
color: tagsHoveredId.value === id || lastIdToDelete.value === id ? "destructive" : _ctx.color,
"right-icon": tagsHoveredId.value === id || lastIdToDelete.value === id ? unref(MazTrash) : void 0,
onClick: withModifiers(($event) => removeTag(id), ["stop"]),
onMouseenter: ($event) => tagsHoveredId.value = id,
onFocus: ($event) => tagsHoveredId.value = id,
onMouseleave: _cache[0] || (_cache[0] = ($event) => tagsHoveredId.value = void 0),
onBlur: _cache[1] || (_cache[1] = ($event) => tagsHoveredId.value = void 0)
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(tag), 1)
]),
_: 2
}, 1032, ["disabled", "size", "color", "right-icon", "onClick", "onMouseenter", "onFocus"])
]))), 128))
]),
_: 1
}),
createVNode(MazInput, mergeProps({
key: "input-tags",
modelValue: inputValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => inputValue.value = $event)
}, _ctx.$attrs, {
placeholder: _ctx.placeholder,
label: _ctx.label,
"aria-label": _ctx.label || _ctx.placeholder,
error: _ctx.error,
hint: _ctx.hint,
success: _ctx.success,
warning: _ctx.warning,
disabled: _ctx.disabled,
"top-label": void 0,
"assistive-text": void 0,
color: _ctx.color,
block: _ctx.block,
size: _ctx.size,
"input-classes": "maz-w-full",
border: !1,
class: "m-input-tags__input",
onKeydown: [
withKeys(addTags, ["enter"]),
withKeys(removeLastTag, ["delete"])
],
onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.addTagsOnBlur ? addTags($event) : void 0)
}), null, 16, ["modelValue", "placeholder", "label", "aria-label", "error", "hint", "success", "warning", "disabled", "color", "block", "size"])
], 38));
}
}), MazInputTags = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a90f8b0e"]]);
export {
MazInputTags as default
};