@dataloop-ai/components 0.17.23 → 0.17.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.23",
+  "version": "0.17.24",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/essential/DlTextArea/DlTextArea.vue

@@ -2,8 +2,62 @@
     <div
         :id="uuid"
         class="container"
+        :class="rootContainerClasses"
         :style="cssVars"
     >
+        <div class="dl-textarea__header">
+            <div
+                v-show="!!title.length || !!tooltip.length"
+                class="dl-textarea__title-container"
+            >
+                <label
+                    v-show="!!title.length"
+                    class="dl-textarea__title"
+                >
+                    {{ title }}
+                    <span
+                        v-show="required"
+                        :class="asteriskClasses"
+                    > *</span>
+                    {{ !required && optional ? ' (Optional)' : null }}
+                </label>
+                <span v-show="!!tooltip.length">
+                    <dl-icon
+                        class="dl-textarea__tooltip-icon"
+                        icon="icon-dl-info"
+                        size="12px"
+                    />
+                    <dl-tooltip>
+                        {{ tooltip }}
+                    </dl-tooltip>
+                </span>
+            </div>
+            <div
+                v-show="!!topMessage.length"
+                class="dl-textarea__top-message-container"
+            >
+                <dl-info-error-message
+                    v-show="!!topMessage.length"
+                    position="above"
+                    :value="topMessage"
+                />
+            </div>
+            <span
+                v-show="showClearButton"
+                class="dl-textarea__clear-button"
+            >
+                <dl-button
+                    ref="input-clear-button"
+                    icon="icon-dl-close"
+                    size="s"
+                    text-color="dl-color-darker"
+                    flat
+                    fluid
+                    @click="onClear"
+                />
+                <dl-tooltip v-if="clearButtonTooltip"> Remove text </dl-tooltip>
+            </span>
+        </div>
         <textarea
             ref="textarea"
             :value="modelValue"
@@ -11,6 +65,7 @@
             :placeholder="placeholder"
             :maxlength="maxLength"
             :disabled="disabled"
+            :readonly="readonly"
             @input="onChange"
             @keydown="onKeydown"
             @focus="onFocus"
@@ -42,9 +97,11 @@
                 warning
                 :value="warningMessage"
             />
-            <span v-show="showCounter">
-                {{ modelValue.length
-                }}{{ maxLength && maxLength > 0 ? `/${maxLength}` : null }}
+            <span
+                v-if="showCounter && maxLength && maxLength > 0"
+                class="dl-text-input__counter"
+            >
+                {{ characterCounter }}
             </span>
         </div>
     </div>
@@ -55,10 +112,15 @@ import { v4 } from 'uuid'
 import { DlInfoErrorMessage } from '../../shared'
 import { defineComponent, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
+import { DlIcon, DlTooltip } from '../'
+import DlButton from '../../basic/DlButton/DlButton.vue'
 
 export default defineComponent({
     name: 'DlTextArea',
     components: {
+        DlButton,
+        DlTooltip,
+        DlIcon,
         DlInfoErrorMessage
     },
     model: {
@@ -113,9 +175,50 @@ export default defineComponent({
         warning: {
             type: Boolean,
             default: false
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        tooltip: {
+            type: String,
+            default: ''
+        },
+        optional: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        topMessage: {
+            type: String,
+            default: ''
+        },
+        hideClearButton: {
+            type: Boolean,
+            default: false
+        },
+        clearButtonTooltip: {
+            type: Boolean,
+            default: false
+        },
+        dense: Boolean,
+        redAsterisk: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        counterReverse: {
+            type: Boolean,
+            default: false
         }
     },
-    emits: ['input', 'focus', 'blur', 'update:model-value', 'keydown'],
+    emits: ['input', 'focus', 'blur', 'clear', 'update:model-value', 'keydown'],
     setup(props) {
         const uuid = ref(`dl-text-area-${v4()}`)
         const textarea = ref(null)
@@ -161,7 +264,56 @@ export default defineComponent({
             textarea
         }
     },
+    computed: {
+        showClearButton(): boolean {
+            return (
+                !this.hideClearButton &&
+                !this.disabled &&
+                !this.readonly &&
+                !!this.modelValue
+            )
+        },
+        asteriskClasses(): string[] {
+            const classes = ['dl-textarea__asterisk']
+
+            if (this.redAsterisk) {
+                classes.push('dl-textarea__asterisk--red')
+            }
+
+            return classes
+        },
+        rootContainerClasses(): string[] {
+            const classes = []
+            if (this.dense) {
+                classes.push('dl-textarea--dense')
+            }
+            return classes
+        },
+        textareaLength(): number {
+            return `${this.modelValue}`.length
+        },
+        characterCounter(): string {
+            if (!this.maxLength) {
+                return ''
+            }
+
+            const chars = this.counterReverse
+                ? this.maxLength - this.textareaLength
+                : this.textareaLength
+
+            return `${chars}/${this.maxLength}`
+        }
+    },
     methods: {
+        onClear(e: any): void {
+            this.$emit('clear', this.modelValue)
+            this.$emit('input', '', e)
+            this.$emit('update:model-value', '')
+
+            const inputRef = this.$refs.textarea as HTMLInputElement
+            inputRef.value = ''
+            inputRef.focus()
+        },
         onChange(e: any) {
             this.$emit('input', e.target.value, e)
             this.$emit('update:model-value', e.target.value)
@@ -211,7 +363,47 @@ export default defineComponent({
     outline: none;
     color: var(--dl-color-darker);
     box-sizing: border-box;
-
+    &--dense {
+        padding: 0;
+    }
+    &__asterisk {
+        color: var(--dl-color-medium);
+        font-size: var(--dl-font-size-body);
+        user-select: none;
+        &--red {
+            color: var(--dl-color-negative);
+        }
+    }
+    &__clear-button {
+        position: absolute;
+        bottom: -25px;
+        right: 0;
+    }
+    &__header {
+        position: relative;
+        width: var(--dl-textarea-width);
+    }
+    &__title-container {
+        margin-bottom: 6px;
+        display: flex;
+        align-items: center;
+        text-align: start;
+    }
+    &__title {
+        color: var(--dl-color-medium);
+        font-size: var(--dl-font-size-body);
+        text-align: left;
+        margin-right: 5px;
+        white-space: nowrap;
+    }
+    &__tooltip-icon {
+        color: var(--dl-color-medium);
+    }
+    &__top-message-container {
+        display: flex;
+        margin-bottom: 10px;
+        text-align: start;
+    }
     &:hover {
         border-color: var(--dl-color-hover);
     }
@@ -226,7 +418,13 @@ export default defineComponent({
         cursor: not-allowed;
         user-select: none;
     }
-
+    &:readonly {
+        border-color: var(--dl-color-separator);
+        cursor: text;
+        &:hover {
+            border-color: var(--dl-color-separator) !important;
+        }
+    }
     &::placeholder {
         color: var(--dl-color-lighter);
         opacity: 1;

package/src/demos/DlTextAreaDemo.vue

@@ -6,8 +6,13 @@
                 placeholder="Type your text..."
                 show-counter
                 :max-length="20"
+                title="Text area title"
+                required
+                tooltip="Quis fugiat et non eu proident sit et amet."
+                top-message="Pariatur consequat non sit aliqua labore ad reprehenderit deserunt ullamco incididunt non irure laborum deserunt."
                 enable-resize
                 error
+                clear-button-tooltip
                 error-message="Something went wrong!"
                 @keydown="log"
                 @focus="textAreaFocused = true"