feat: add EsFormTextarea v3

es-ds-components/components/es-form-textarea.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Prevents attributes from being applied to first <div>
+// v-bind="$attr" is on the input instead
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps({
+    /**
+     * Required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * ID
+     * required
+     */
+    id: {
+        type: String,
+        required: true,
+    },
+    /**
+     * modelValue
+     */
+    modelValue: {
+        type: String,
+        required: true,
+        default: '',
+    },
+    /**
+     * state
+     */
+    state: {
+        type: [Boolean, null],
+        default: null,
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const localValue = ref(props.modelValue);
+// Watch for changes to the local value and emit them
+watch(localValue, (newValue) => {
+    emit('update:modelValue', newValue);
+});
+// Watch for prop changes and update the local value
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        localValue.value = newValue;
+    },
+);
+
+const slots = useSlots();
+
+const hasSuccess = () => !!slots.successMessage;
+const hasMessage = () => !!slots.message;
+const hasError = () => !!slots.errorMessage;
+</script>
+
+<template>
+    <div
+        class="input-wrapper justify-content-end"
+        :required="required">
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="id"
+            class="label justify-content-start">
+            <slot name="label" />
+
+            <span
+                v-if="required"
+                class="text-danger">
+                *
+            </span>
+        </label>
+
+        <div class="input-holder">
+            <textarea
+                :id="id"
+                v-model="localValue"
+                class="es-form-textarea w-100 form-control"
+                :class="{ 'is-invalid': state === false }"
+                :disabled="disabled"
+                :invalid="state === false" />
+            <small
+                v-if="hasMessage() && ((!hasSuccess() && state) || state == null)"
+                class="text-muted">
+                <slot name="message" />
+            </small>
+            <small
+                v-if="state === false && (hasError() || required)"
+                class="text-danger">
+                <slot
+                    v-if="hasError()"
+                    name="errorMessage" />
+                <template v-else-if="required"> This field is required. </template>
+            </small>
+            <small
+                v-if="state && hasSuccess()"
+                class="text-success">
+                <slot name="successMessage" />
+            </small>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.es-form-textarea {
+    min-height: 8.125rem;
+}
+
+.es-form-textarea:disabled,
+.es-form-textarea[readonly] {
+    border: 0;
+}
+
+// TODO: Move to es-bs-base
+.is-invalid {
+    color: variables.$danger;
+}
+
+.form-inline .input-wrapper {
+    display: flex;
+    flex: 0 0 100%;
+
+    label {
+        flex: 0 0 30%;
+    }
+
+    .input-holder {
+        flex: 0 0 70%;
+    }
+}
+</style>

es-ds-docs/components/ds-molecules-list.vue

@@ -33,6 +33,9 @@
         <li>
             <ds-link to="/molecules/form-message"> Form message </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/form-textarea"> Form textarea </ds-link>
+        </li>
         <li>
             <ds-link to="/molecules/modal"> Modal </ds-link>
         </li>

es-ds-docs/pages/molecules/form-textarea.vue

@@ -0,0 +1,165 @@
+<script setup>
+const docTextarea = ref('');
+const successValue = 'My experience was great!';
+
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+if ($prism) {
+    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+    const compSource = await import('@energysage/es-ds-components/components/es-form-textarea.vue?raw');
+    const docSource = await import('./form-textarea.vue?raw');
+    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
+
+    compCode.value = $prism.normalizeCode(compSource.default);
+    docCode.value = $prism.normalizeCode(docSource.default);
+    $prism.highlight();
+}
+
+const propTableRows = [
+    ['id', 'String', 'n/a', 'Required. The id of the input.'],
+    ['v-model', 'String', 'n/a', 'Required. The v-model directive binds the input to a data property.'],
+    ['disabled', 'Boolean', 'false', 'Specifies that the input should be disabled.'],
+    ['required', 'Boolean', 'false', 'Specifies that the input is required.'],
+    [
+        'state',
+        'Boolean',
+        'null',
+        'Specifies the validity of the input. Can be true (success), false (error), or null (default).',
+    ],
+];
+</script>
+
+<template>
+    <div>
+        <h1>Textarea</h1>
+        <p>
+            When using a form textarea, please ensure that the label style is
+            <nuxt-link
+                href="https://apastyle.apa.org/style-grammar-guidelines/capitalization/sentence-case"
+                target="_blank">
+                Sentence case.
+            </nuxt-link>
+        </p>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Basic example</h2>
+                <es-form-textarea
+                    id="basic-example"
+                    v-model="docTextarea">
+                    <template #label> Notes </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Required</h2>
+                <es-form-textarea
+                    id="required-example"
+                    v-model="docTextarea"
+                    required>
+                    <template #label> Notes </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Error state</h2>
+                <es-form-textarea
+                    id="error-example"
+                    v-model="docTextarea"
+                    required
+                    :state="false">
+                    <template #label> Notes </template>
+                    <template #errorMessage> This field is required. </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Success state</h2>
+                <es-form-textarea
+                    id="success-example"
+                    v-model="successValue"
+                    required
+                    :state="true">
+                    <template #label> Notes </template>
+                    <template #errorMessage> This field is required. </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Success state with message</h2>
+                <es-form-textarea
+                    id="success-message-example"
+                    v-model="successValue"
+                    required
+                    :state="true">
+                    <template #label> Notes </template>
+                    <template #message> Please enter your notes. </template>
+                    <template #errorMessage> This field is required. </template>
+                    <template #successMessage> Your notes have been entered successfully. </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Disabled state</h2>
+                <es-form-textarea
+                    id="disabled-example"
+                    v-model="docTextarea"
+                    disabled>
+                    <template #label> Notes </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <b-row class="my-500">
+            <b-col
+                cols="12"
+                lg="6">
+                <h2>Context message</h2>
+                <es-form-textarea
+                    id="context-message-example"
+                    v-model="docTextarea"
+                    required>
+                    <template #label> Notes </template>
+                    <template #message> Please enter your notes. </template>
+                    <template #errorMessage> This field is required. </template>
+                    <template #successMessage> Your notes have been entered successfully. </template>
+                </es-form-textarea>
+            </b-col>
+        </b-row>
+
+        <div class="mb-500">
+            <h2>EsFormTextarea props</h2>
+            <ds-prop-table :rows="propTableRows" />
+        </div>
+
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/src/lib-components/es-form-textarea.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/form-textarea.vue" />
+    </div>
+</template>