@teammodlr/ui-kit 3.0.0-beta.33 → 3.0.0-beta.36

package/src/components/textarea/Textarea.vue

@@ -17,12 +17,14 @@
                 :value="textareaValue"
                 :readonly="readonly"
                 v-on="inputListeners"
+                @input="onNativeInput"
                 :class="inputComputedClasses"
                 v-bind="$attrs"
                 :disabled="disabled || loading"
                 :aria-disabled="disabled ? 'true' : 'false'"
                 :aria-labelledby="`${id}-label`"
             />
+            <MClearButton v-if="showClear" :class="style.clear" @clear="onClear" />
         </div>
         <div v-if="inputError" :class="style.errorMessage">
             {{ inputError }}
@@ -37,14 +39,17 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef
+    toRef,
+    watch
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
+import MClearButton from '../clearbutton/ClearButton.vue';
 import * as style from './style';
 
 export default defineComponent({
     name: 'MTextArea',
+    components: { MClearButton },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),
@@ -87,8 +92,12 @@ export default defineComponent({
             type: Number,
             default: 64
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
     },
-    emits: useInput.emits(),
+    emits: [...useInput.emits(), 'clear'],
     setup(props, { emit, expose }) {
         const element = ref<HTMLTextAreaElement | null>(null);
         const { focus, blur } = useInteractive(element);
@@ -136,6 +145,7 @@ export default defineComponent({
                     [style.block]: props.block,
                     [style.disabled]: disabled.value || loading.value,
                     [style.error]: inputError.value,
+                    [style.hasClear]: props.clearable,
                 }
             ];
         });
@@ -144,12 +154,36 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        // Tracks typed text so clearable works without v-model
+        const internalValue = ref('');
+        watch(() => props.modelValue, value => {
+            internalValue.value = value == null ? '' : String(value);
+        }, { immediate: true });
+
         const textareaValue = computed(() => {
-            return props.modelValue == null ? '' : String(props.modelValue);
+            if (props.modelValue !== undefined) {
+                return props.modelValue == null ? '' : String(props.modelValue);
+            }
+            return internalValue.value;
+        });
+
+        const onNativeInput = (event: Event) => {
+            internalValue.value = (event.target as HTMLTextAreaElement).value;
+        };
+
+        const showClear = computed(() => {
+            return props.clearable
+                && !disabled.value
+                && !loading.value
+                && !readonly.value
+                && textareaValue.value !== '';
         });
 
         const onClear = () => {
+            internalValue.value = '';
             emit('update:modelValue', '');
+            emit('clear');
+            focus();
         };
 
         expose({
@@ -171,6 +205,8 @@ export default defineComponent({
             textareaValue,
             inputError,
             style,
+            showClear,
+            onNativeInput,
 
             onClear,
             validate,

package/src/components/textarea/examples/clearable.vue

@@ -0,0 +1,16 @@
+<template>
+    <MTextArea
+        v-model="value"
+        label="Some Text"
+        name="text"
+        placeholder="Some text placeholder"
+        :height="128"
+        clearable
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('Clear me');
+</script>

package/src/components/textarea/examples/index.stories.ts

@@ -1,5 +1,5 @@
 import MTextarea from '../Textarea.vue';
-import { MTextareaBasic } from './index';
+import { MTextareaBasic, MTextareaClearable } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -12,3 +12,4 @@ export default {
 };
 
 export const Basic = createStory(MTextareaBasic);
+export const Clearable = createStory(MTextareaClearable);

package/src/components/textarea/examples/index.ts

@@ -1 +1,2 @@
 export { default as MTextareaBasic } from './basic.vue';
+export { default as MTextareaClearable } from './clearable.vue';

package/src/components/textarea/style/Textarea.css.ts

@@ -144,6 +144,17 @@ export const disabled = style({
     }
 });
 
+export const hasClear = style({
+    paddingRight: '1.75rem'
+});
+
+export const clear = style({
+    position: 'absolute',
+    zIndex: 1,
+    top: themeVars.space[1],
+    right: themeVars.space[1]
+});
+
 export const label = style({
     fontWeight: '500',
     display: 'inline-block',