uptime-kuma/src/components/TemplatedTextarea.vue

<template>
    <div class="form-text mb-2">
        <i18n-t tag="div" keypath="liquidIntroduction">
            <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
        </i18n-t>

        <code v-pre>{{ msg }}</code>
        : {{ $t("templateMsg") }}
        <br />
        <code v-pre>{{ name }}</code>
        : {{ $t("templateServiceName") }}
        <br />
        <code v-pre>{{ status }}</code>
        : {{ $t("templateStatus") }}
        <br />
        <code v-pre>{{ hostnameOrURL }}</code>
        : {{ $t("templateHostnameOrURL") }}
        <br />
        <code v-pre>{{ heartbeatJSON }}</code>
        : {{ $t("templateHeartbeatJSON") }}
        <b>({{ $t("templateLimitedToUpDownNotifications") }})</b>
        <br />
        <code v-pre>{{ monitorJSON }}</code>
        : {{ $t("templateMonitorJSON") }}
        <b>({{ $t("templateLimitedToUpDownCertNotifications") }})</b>
        <br />
    </div>

    <textarea
        :id="id"
        ref="templatedTextarea"
        v-model="model"
        class="form-control"
        :placeholder="placeholder"
        :required="required"
        autocomplete="false"
    ></textarea>
</template>

<script>
export default {
    props: {
        /**
         * The value of the templated textarea.
         */
        modelValue: {
            type: String,
            default: "",
        },
        /**
         * id for the templated textarea.
         */
        id: {
            type: String,
            required: true,
        },
        /**
         * Whether the templated textarea is required.
         * @example true
         */
        required: {
            type: Boolean,
            required: true,
        },
        /**
         * Placeholder text for the templated textarea.
         */
        placeholder: {
            type: String,
            default: "",
        },
    },
    emits: ["update:modelValue"],
    computed: {
        /**
         * Send value update to parent on change.
         */
        model: {
            get() {
                return this.modelValue;
            },
            set(value) {
                this.$emit("update:modelValue", value);
            },
        },
    },
};
</script>

<style lang="scss" scoped>
textarea {
    min-height: 150px;
}
</style>