108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<template>
|
|
<WordCounter
|
|
:id="intId"
|
|
class="ck-word-count"
|
|
/>
|
|
<textarea
|
|
ref="textarea"
|
|
:id="intId"
|
|
:class="`input-text-auto-component need-word-counter ${intClass}`"
|
|
:name="intName"
|
|
:aria-describedby="intAriaDescribedby"
|
|
:placeholder="intPlaceholder"
|
|
:required="intRequired"
|
|
@input="onInput"
|
|
@blur="onBlur"
|
|
v-model="intValue"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from "vue";
|
|
import trans from "../../modules/trans";
|
|
import WordCounter from "./WordCounterComponent.vue";
|
|
|
|
const textarea = ref<HTMLTextAreaElement | null>(null);
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
mixins: [trans],
|
|
components: {
|
|
WordCounter,
|
|
},
|
|
setup() {
|
|
return { textarea };
|
|
},
|
|
beforeMount() {
|
|
if (!this.$attrs.json) {
|
|
throw new Error("this component requires json");
|
|
}
|
|
},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}"),
|
|
data = JSON.parse(json);
|
|
this.intId = String(data.id);
|
|
this.intClass = String(data.class);
|
|
this.intName = String(data.name);
|
|
this.intPlaceholder = String(data.placeholder);
|
|
this.intAriaDescribedby = String(data.ariaDescribedby);
|
|
this.intValue = String(data.value);
|
|
if (data.required) {
|
|
this.intRequired = true;
|
|
}
|
|
if (this.textarea) {
|
|
// Default input init
|
|
this.textarea.setAttribute("style", "height: 1rem;overflow-y: hidden;");
|
|
}
|
|
// * Init input
|
|
this.$nextTick(this.onInput);
|
|
},
|
|
data(): {
|
|
intId: string;
|
|
intClass: string;
|
|
intName: string;
|
|
intPlaceholder: string;
|
|
intAriaDescribedby: string;
|
|
intRequired: boolean;
|
|
intValue: string;
|
|
} {
|
|
return {
|
|
intId: "",
|
|
intClass: "",
|
|
intName: "",
|
|
intPlaceholder: "",
|
|
intAriaDescribedby: "",
|
|
intRequired: false,
|
|
intValue: "",
|
|
};
|
|
},
|
|
methods: {
|
|
onBlur() {
|
|
const el = textarea.value;
|
|
if (!el) {
|
|
throw new Error("undefined textarea element");
|
|
}
|
|
// * Remove every new line char
|
|
el.value = el.value.replace(/[\n\r]/g, "");
|
|
this.$nextTick(() => {
|
|
el.style.height = "auto";
|
|
el.style.height = `${el.scrollHeight}px`;
|
|
});
|
|
},
|
|
onInput() {
|
|
const el = textarea.value;
|
|
if (!el) {
|
|
throw new Error("undefined textarea element");
|
|
}
|
|
el.style.height = "auto";
|
|
el.style.height = `${el.scrollHeight}px`;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.input-text-auto-component {
|
|
resize: none;
|
|
}
|
|
</style>
|