PyCS/webui/src/components/base/textarea-input.vue

<template>
  <div class="input">
    <label>
      <span class="label"><slot></slot></span>
      <textarea :placeholder="placeholder"
                :class="{error: error}"
                v-bind:value="value"
                v-on:input="input"></textarea>
    </label>
  </div>
</template>

<script>
export default {
  name: "textarea-input",
  props: ['value', 'placeholder', 'error'],
  methods: {
    input: function(event) {
      this.$emit('clearError', null);
      this.$emit('input', event.target.value)
    }
  }
}
</script>

<style scoped>
.label {
  font-size: 80%;
}

textarea {
  width: 100%;
  resize: none;
}

textarea.error {
  background-color: rgba(255, 0, 0, 0.3);
  border-color: var(--error);
}
</style>