maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
169 lines (168 loc) • 7.2 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, useSlots, createElementBlock, openBlock, normalizeStyle, unref, normalizeClass, createCommentVNode, withDirectives, renderSlot, createTextVNode, toDisplayString, createElementVNode, mergeProps, toHandlers, vModelText } from "vue";
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/MazTextarea.C9sZpRDZ.css';class o {
element;
constructor(e) {
this.element = e, this.onFocus = this.onFocus.bind(this), this.autogrow = this.autogrow.bind(this), this.onResize = i(this.onResize.bind(this), 200), this.connect();
}
connect() {
this.element.addEventListener("focus", this.onFocus), this.element.style.resize = "none", this.element.style.boxSizing = "border-box";
}
disconnect() {
window.removeEventListener("resize", this.onResize), this.element.removeEventListener("input", this.autogrow);
}
onFocus() {
this.autogrow(), this.element.addEventListener("input", this.autogrow), window.addEventListener("resize", this.onResize), this.element.removeEventListener("focus", this.onFocus);
}
onResize() {
this.autogrow();
}
autogrow() {
this.element.style.height = "auto", this.element.style.overflow = "hidden", this.element.style.height = `${this.element.scrollHeight}px`;
}
}
const _hoisted_1 = ["for"], _hoisted_2 = ["for"], _hoisted_3 = { key: 1 }, _hoisted_4 = { key: 2 }, _hoisted_5 = ["id", "placeholder", "name", "disabled", "required"], _hoisted_6 = {
key: 1,
class: "m-textarea__append"
}, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazTextarea",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
id: { default: void 0 },
name: { default: "MazTextarea" },
label: { default: void 0 },
placeholder: { default: void 0 },
required: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
hint: { default: void 0 },
color: { default: "primary" },
roundedSize: {},
padding: { type: Boolean, default: !0 },
transparent: { type: Boolean, default: !1 },
border: { type: Boolean, default: !0 },
appendJustify: { default: "end" }
},
emits: ["update:model-value", "input", "focus", "blur", "change"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit;
let textareaAutogrow;
const instanceId = useInstanceUniqId({
componentName: "MazTextarea",
providedId: props.id
}), TextareaElement = ref(), isFocused = ref(!1), hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
onMounted(() => {
TextareaElement.value && (textareaAutogrow = new o(TextareaElement.value));
}), onBeforeUnmount(() => {
textareaAutogrow?.disconnect();
});
const inputValue = computed({
get: () => props.modelValue,
set: (value) => {
emits("update:model-value", value), emits("input", value);
}
});
function focus(event) {
emits("focus", event), isFocused.value = !0;
}
function blur(event) {
emits("blur", event), isFocused.value = !1;
}
function change(event) {
emits("change", event);
}
const slots = useSlots(), hasLabelOrHint = computed(() => props.label || props.hint || !!slots.label), shouldUp = computed(
() => hasLabelOrHint.value && (hasValue.value || !!props.placeholder)
), hasAppend = computed(() => !!slots.append), 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 === "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";
}
return "--default-border";
}), hasBorderStyle = computed(() => borderStyle.value !== "--default-border");
return (_ctx, _cache) => (openBlock(), createElementBlock("label", {
class: normalizeClass(["m-textarea m-reset-css", [
{
"--is-disabled": _ctx.disabled,
"--has-label": hasLabelOrHint.value,
"--background-transparent": _ctx.transparent,
"--padding": _ctx.padding,
"--border": _ctx.border,
"--has-border-style": hasBorderStyle.value,
"--should-up": shouldUp.value
},
borderStyle.value,
_ctx.roundedSize ? `--rounded-${_ctx.roundedSize}` : "--rounded",
props.class
]]),
for: unref(instanceId),
style: normalizeStyle([_ctx.style, `--append-justify: ${_ctx.appendJustify}`])
}, [
hasLabelOrHint.value ? (openBlock(), createElementBlock("label", {
key: 0,
for: unref(instanceId),
class: normalizeClass(["m-textarea__label", [
{
"maz-text-destructive-600": _ctx.error,
"maz-text-success-600": _ctx.success,
"maz-text-warning-600": _ctx.warning,
"--has-state": _ctx.error || _ctx.warning || _ctx.success
}
]])
}, [
_ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.hint), 1)) : renderSlot(_ctx.$slots, "label", { key: 0 }, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
], !0),
_ctx.required ? (openBlock(), createElementBlock("sup", _hoisted_4, "*")) : createCommentVNode("", !0)
], 10, _hoisted_2)) : createCommentVNode("", !0),
withDirectives(createElementVNode("textarea", mergeProps({
id: unref(instanceId),
ref_key: "TextareaElement",
ref: TextareaElement
}, _ctx.$attrs, {
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
placeholder: _ctx.placeholder,
name: _ctx.name,
disabled: _ctx.disabled,
required: _ctx.required,
class: { "--has-append": hasAppend.value }
}, toHandlers({
blur,
focus,
change
}, !0)), null, 16, _hoisted_5), [
[vModelText, inputValue.value]
]),
hasAppend.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
renderSlot(_ctx.$slots, "append", {}, void 0, !0)
])) : createCommentVNode("", !0)
], 14, _hoisted_1));
}
}), MazTextarea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8fc6be7"]]);
export {
MazTextarea as default
};