@dataloop-ai/components 0.17.23 → 0.17.25

package/package.json

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

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -1,196 +1,55 @@
 <template>
-    <div class="json-editor-layout">
-        <dl-dialog-box
-            :model-value="modelValue"
-            :width="800"
-        >
-            <template #header>
-                <dl-dialog-box-header
-                    title="DQL Search"
-                    :close-button="true"
-                    style="font-weight: 200"
-                    @onClose="$emit('update:modelValue', false)"
-                />
-            </template>
-            <template #body>
-                <div class="json-query">
-                    <div class="json-query-menu">
-                        <dl-select
-                            :model-value="selectedOption"
-                            width="200px"
-                            :options="selectOptions"
-                            placeholder="New Query"
-                            @update:model-value="updateActiveQuery"
-                        />
-                        <dl-button
-                            icon="icon-dl-align-left"
-                            label="Align Left"
-                            flat
-                            color="secondary"
-                            @click="alignText"
-                        />
-                    </div>
-                    <div
-                        ref="jsonEditorRef"
-                        class="json-editor"
-                    />
-                </div>
-            </template>
-            <template #footer>
-                <div class="footer-menu">
-                    <div class="footer-delete">
-                        <dl-button
-                            :disabled="deleteButtonState"
-                            icon="icon-dl-delete"
-                            label="Delete Query"
-                            flat
-                            color="secondary"
-                            @click="$emit('remove', activeQuery)"
-                        />
-                    </div>
-                    <div class="footer-save">
-                        <dl-button
-                            outlined
-                            label="Save As"
-                            @click="handleSaveButton"
-                        />
-                        <dl-button
-                            label="Search"
-                            @click="handleSearchButton"
-                        />
-                    </div>
-                </div>
-            </template>
-        </dl-dialog-box>
-    </div>
+    <div
+        ref="jsonEditorRef"
+        class="json-editor"
+    />
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
-import { JSONEditor, JSONValue, Mode } from 'vanilla-jsoneditor'
+import { defineComponent } from 'vue-demi'
+import { JSONEditor, Mode } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
-import { Query } from './types'
-import { DlSelect } from '../DlSelect'
-import { DlButton } from '../../basic'
-import { DlDialogBox, DlDialogBoxHeader } from '../DlDialogBox'
-
-interface JSONContent {
-    json: JSONValue
-    text: string
-}
 
 export default defineComponent({
-    components: {
-        DlDialogBox,
-        DlDialogBoxHeader,
-        DlSelect,
-        DlButton
-    },
     props: {
-        modelValue: { type: Boolean, default: false },
-        query: {
-            type: Object as PropType<Query>,
-            default: () =>
-                ({
-                    name: 'New Query',
-                    query: null
-                } as Query)
+        /**
+         * The string to display and modify as JSON
+         */
+        modelValue: {
+            type: String,
+            default: '{}'
         },
-        queries: {
-            type: Array as PropType<Query[]>,
-            default: () => [] as Query[]
+        /**
+         *  When this prop is false, the editor will not refresh, paired with the update-prevent event
+         * it helps with controlling when the editor refreshes
+         */
+        preventUpdate: {
+            type: Boolean,
+            default: null
         }
     },
-    emits: ['update:modelValue', 'save', 'remove', 'search', 'update-query'],
+    emits: ['update:modelValue', 'update-prevent', 'align-text'],
     data() {
         return {
-            preventOnChange: false,
-            preventUpdate: false,
             jsonEditor: {} as JSONEditor,
-            activeQuery: this.query,
-            selectedOption: {
-                label: this.query?.name,
-                value: this.query?.query
-            }
-        }
-    },
-    computed: {
-        selectOptions(): Record<string, string>[] {
-            return [
-                {
-                    label: 'New Query',
-                    value: ''
-                },
-                ...this.queries.map((q: Query) => ({
-                    label: q.name,
-                    value: q.query
-                }))
-            ]
-        },
-        deleteButtonState(): boolean {
-            return !this.queries.filter(
-                (q: Query) => q.name === this.activeQuery?.name
-            ).length
+            preventOnChange: false
         }
     },
     watch: {
-        modelValue(value) {
-            this.$nextTick(() => {
-                if (value) this.initJsonEditor()
-                else this.jsonEditor?.destroy()
-                this.activeQuery = this.query
-            })
-        },
-        queries() {
-            this.resetEditor()
-        },
-        activeQuery(val) {
-            this.$emit('update-query', val)
-            this.jsonEditor?.set({
-                text: val.query
-            })
-            this.selectedOption = {
-                label: val.name,
-                value: val.query
+        modelValue: {
+            handler(val) {
+                if (this.preventUpdate === false) {
+                    this.setJsonText(val)
+                }
             }
         }
     },
     mounted() {
         this.initJsonEditor()
+        this.setJsonText(this.modelValue)
+        this.$emit('align-text')
     },
     methods: {
-        updateActiveQuery(option: Record<string, string>) {
-            this.activeQuery = {
-                name: option.label,
-                query: option.value
-            }
-            this.jsonEditor?.destroy()
-            this.initJsonEditor()
-        },
-        alignText() {
-            if (!(this.jsonEditor.get && this.jsonEditor.get())) return
-            try {
-                const parsed = JSON.parse(
-                    (
-                        this.jsonEditor.get &&
-                        (this.jsonEditor?.get() as JSONContent)
-                    )?.text
-                )
-                const newText = JSON.stringify(parsed, null, 2)
-                this.jsonEditor?.set({ text: newText })
-            } catch (error) {}
-        },
-        resetEditor() {
-            if (this.jsonEditor.set) {
-                this.jsonEditor.set({
-                    text: '{}'
-                })
-            }
-            this.selectedOption = {
-                label: 'New Query',
-                value: ''
-            }
-        },
         initJsonEditor() {
             const initialAttrs: any = {
                 onChange: debounce(
@@ -199,27 +58,17 @@ export default defineComponent({
                             this.preventOnChange = false
                             return
                         }
-                        this.activeQuery = {
-                            name: this.activeQuery
-                                ? this.activeQuery.name
-                                : 'New Query',
-                            query: updatedContent.text
+                        this.$emit('update:modelValue', updatedContent.text)
+                        if (this.preventUpdate !== null) {
+                            this.$emit('update-prevent', true)
                         }
-                        this.preventUpdate = true
                     },
                     100
                 ),
                 mode: Mode.text,
                 mainMenuBar: false,
                 navigationBar: false,
-                statusBar: false,
-                ...(this.activeQuery !== undefined && {
-                    content: {
-                        text: this.activeQuery?.query
-                            ? this.activeQuery.query
-                            : '{}'
-                    }
-                })
+                statusBar: false
             }
 
             // There is type instantiation issue with JSONEditor,
@@ -231,22 +80,11 @@ export default defineComponent({
                     : document.createElement('div'),
                 props: initialAttrs
             })
-            this.alignText()
         },
-        handleSaveButton() {
-            this.$emit(
-                'save',
-                this.activeQuery
-                    ? this.activeQuery
-                    : {
-                          name: 'New Query',
-                          query: (this.jsonEditor?.get() as any).text || ''
-                      }
-            )
-        },
-        handleSearchButton() {
-            this.$emit('search', this.activeQuery)
-            this.$emit('update:modelValue', false)
+        setJsonText(text: string) {
+            this.jsonEditor?.set({
+                text
+            })
         }
     }
 })
@@ -260,6 +98,7 @@ export default defineComponent({
     --jse-background-color: var(--dl-color-tooltip-text);
     --jse-value-color-boolean: #ae6307;
     --jse-value-color-string: #337433;
+    height: 100%;
     .jse-error {
         display: none !important;
     }
@@ -267,26 +106,4 @@ export default defineComponent({
         display: none !important;
     }
 }
-
-.json-query-menu {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.footer-save button {
-    margin: 0px 10px;
-}
-
-.footer-menu {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-.footer-save {
-    width: 25%;
-    display: flex;
-    justify-content: space-between;
-}
 </style>

package/src/components/compound/DlSearches/DlSmartSearch/DlSmartSearch.vue

@@ -9,6 +9,7 @@
             class="dl-smart-search__input-wrapper"
         >
             <dl-smart-search-input
+                v-show="!jsonEditorModel"
                 :status="computedStatus"
                 :style-model="defineStyleModel"
                 :with-save-button="true"
@@ -61,16 +62,74 @@
                 </dl-menu>
             </dl-button>
         </div>
-        <dl-json-editor
-            :model-value="jsonEditorModel"
-            :query="activeQuery"
-            :queries="filters.saved"
-            @update:modelValue="jsonEditorModel = $event"
-            @save="saveQueryDialogBoxModel = true"
-            @remove="handleQueryRemove"
-            @search="handleQuerySearchEditor"
-            @update-query="handleEditorQueryUpdate"
-        />
+        <dl-dialog-box
+            v-model="jsonEditorModel"
+            :height="500"
+            :width="800"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="DQL Search"
+                    :close-button="true"
+                    style="font-weight: 200"
+                    @onClose="handleJsonEditorClose"
+                />
+            </template>
+            <template #body>
+                <div class="json-editor-layout">
+                    <div class="json-query">
+                        <div class="json-query-menu">
+                            <dl-select
+                                :model-value="selectedOption"
+                                width="200px"
+                                :options="selectOptions"
+                                placeholder="New Query"
+                                @update:model-value="updateActiveQuery"
+                            />
+                            <dl-button
+                                icon="icon-dl-align-left"
+                                label="Align Left"
+                                flat
+                                color="secondary"
+                                @click="alignJsonText"
+                            />
+                        </div>
+                        <dl-json-editor
+                            v-model="jsonEditorQuery"
+                            :prevent-update="preventUpdate"
+                            @update-prevent="(val) => (preventUpdate = val)"
+                            @align-text="alignJsonText"
+                        />
+                    </div>
+                </div>
+            </template>
+            <template #footer>
+                <div class="json-editor__footer-menu">
+                    <div class="json-editor__footer-delete">
+                        <dl-button
+                            :disabled="deleteButtonState"
+                            icon="icon-dl-delete"
+                            label="Delete Query"
+                            flat
+                            color="secondary"
+                            @click="handleQueryRemove"
+                        />
+                    </div>
+                    <div class="json-editor__footer-save">
+                        <dl-button
+                            outlined
+                            label="Save As"
+                            @click="saveQueryDialogBoxModel = true"
+                        />
+                        <dl-button
+                            label="Search"
+                            @click="handleJsonSearchButton"
+                        />
+                    </div>
+                </div>
+            </template>
+        </dl-dialog-box>
+
         <dl-dialog-box v-model="removeQueryDialogBoxModel">
             <template #header>
                 <dl-dialog-box-header
@@ -133,6 +192,7 @@ import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
 import { DlInput } from '../../DlInput'
 import { DlTypography, DlMenu } from '../../../essential'
 import { DlButton } from '../../../basic'
+import { DlSelect } from '../../../compound'
 import {
     useSuggestions,
     Schema,
@@ -141,7 +201,8 @@ import {
 } from '../../../../hooks/use-suggestions'
 import { Filters, Query, ColorSchema, SearchStatus } from './types'
 import {
-    replaceAliases,
+    replaceWithAliases,
+    revertAliases,
     replaceWithJsDates,
     createColorSchema
 } from './utils/utils'
@@ -158,7 +219,8 @@ export default defineComponent({
         DlTypography,
         DlInput,
         DlSmartSearchFilters,
-        DlMenu
+        DlMenu,
+        DlSelect
     },
     props: {
         status: {
@@ -224,6 +286,13 @@ export default defineComponent({
         const isQuerying = ref(false)
         const currentTab = ref('saved')
         const oldInputQuery = ref('')
+        const jsonEditorQuery = ref('{}')
+        const newQuery = ref('')
+        const preventUpdate = ref(false)
+        const selectedOption = ref({
+            label: 'New Query',
+            value: ''
+        })
 
         const { suggestions, error, findSuggestions } = useSuggestions(
             props.schema,
@@ -233,7 +302,8 @@ export default defineComponent({
         const handleInputModel = (value: string) => {
             inputModel.value = value
             const json = JSON.stringify(toJSON(removeBrackets(value)))
-            activeQuery.value.query = replaceAliases(json, props.aliases)
+            const newQuery = replaceWithAliases(json, props.aliases)
+            activeQuery.value.query = newQuery
             findSuggestions(value)
             isQuerying.value = false
             oldInputQuery.value = value
@@ -257,7 +327,6 @@ export default defineComponent({
                 toJSON(inputModel.value)
             }
         }
-
         return {
             uuid: `dl-smart-search-${v4()}`,
             inputModel,
@@ -274,6 +343,10 @@ export default defineComponent({
             currentTab,
             searchBarWidth,
             oldInputQuery,
+            jsonEditorQuery,
+            newQuery,
+            preventUpdate,
+            selectedOption,
             handleInputModel,
             setFocused,
             findSuggestions,
@@ -319,6 +392,43 @@ export default defineComponent({
             return this.isQuerying || this.inputModel === ''
                 ? this.activeQuery.name
                 : this.inputModel
+        },
+        deleteButtonState(): boolean {
+            return !this.filters.saved.filter(
+                (q: Query) => q.name === this.activeQuery?.name
+            ).length
+        },
+        selectOptions(): Record<string, string>[] {
+            return [
+                {
+                    label: 'New Query',
+                    value: '{}'
+                },
+                ...this.filters.saved.map((q: Query) => ({
+                    label: q.name,
+                    value: q.query
+                }))
+            ]
+        }
+    },
+    watch: {
+        jsonEditorModel() {
+            const json = JSON.stringify(
+                this.toJSON(removeBrackets(this.inputModel))
+            )
+            const newQuery = replaceWithAliases(json, this.aliases)
+            if (newQuery && newQuery !== '{}') {
+                this.jsonEditorQuery = newQuery
+            }
+            this.alignJsonText()
+        },
+        jsonEditorQuery(val) {
+            if (
+                this.activeQuery.name === 'New Query' ||
+                this.activeQuery.name === ''
+            ) {
+                this.newQuery = val
+            }
         }
     },
     mounted() {
@@ -328,35 +438,34 @@ export default defineComponent({
         observer.observe(this.$refs.inputWrapper as HTMLElement)
     },
     methods: {
-        handleQueryRemove(query: Query) {
+        handleQueryRemove() {
             this.filtersModel = false
-            this.activeQuery = query
             this.removeQueryDialogBoxModel = true
         },
-        handleQuerySearchEditor(query: Query) {
-            this.filtersModel = false
-            this.activeQuery = query
-            this.oldInputQuery = query.query
-            this.$emit('search-query', this.activeQuery, this.stringQuery)
-        },
         handleSaveQuery(performSearch: boolean) {
+            this.activeQuery = {
+                name: this.newQueryName || this.activeQuery.name,
+                query: this.jsonEditorQuery
+            }
             if (performSearch === true) {
                 this.emitSaveQuery()
                 this.emitSearchQuery()
+                const newQuery = revertAliases(
+                    stringifySmartQuery(JSON.parse(this.activeQuery.query)),
+                    this.aliases
+                )
+                this.inputModel = newQuery
+                this.oldInputQuery = newQuery
                 this.jsonEditorModel = false
             } else {
                 this.emitSaveQuery()
             }
         },
-        handleEditorQueryUpdate(query: Query) {
-            this.activeQuery = query
-            try {
-                const stringQuery = stringifySmartQuery(JSON.parse(query.query))
-                this.inputModel = stringQuery
-                this.oldInputQuery = stringQuery
-            } catch (error) {
-                console.log(error)
-            }
+        handleJsonSearchButton() {
+            this.jsonEditorModel = false
+            this.activeQuery.query = this.jsonEditorQuery
+            this.setQueryInput()
+            this.$emit('search-query', this.activeQuery, this.stringQuery)
         },
         handleFiltersDelete(currentTab: string, query: Query) {
             this.activeQuery = query
@@ -366,12 +475,19 @@ export default defineComponent({
         },
         handleFiltersSelect(currentTab: string, query: Query) {
             this.activeQuery = { ...query }
-            const stringQuery = stringifySmartQuery(JSON.parse(query.query))
+            const stringQuery = revertAliases(
+                stringifySmartQuery(JSON.parse(query.query)),
+                this.aliases
+            )
             this.oldInputQuery = stringQuery
             this.inputModel = stringQuery
             this.currentTab = currentTab
             this.filtersModel = false
         },
+        handleJsonEditorClose() {
+            this.jsonEditorModel = false
+            this.newQuery = ''
+        },
         emitSearchQuery() {
             this.$emit('search-query', this.activeQuery, this.stringQuery)
         },
@@ -383,6 +499,12 @@ export default defineComponent({
                 this.currentTab,
                 this.inputModel
             )
+            this.selectedOption = {
+                label: 'New Query',
+                value: '{}'
+            }
+            this.activeQuery.query = this.newQuery
+            this.jsonEditorQuery = this.newQuery || '{}'
             this.removeQueryDialogBoxModel = false
         },
         emitSaveQuery() {
@@ -392,6 +514,40 @@ export default defineComponent({
             this.$emit('save-query', { ...this.activeQuery }, this.currentTab)
             this.saveQueryDialogBoxModel = false
             this.newQueryName = ''
+        },
+        setQueryInput(query?: string) {
+            const stringQuery = revertAliases(
+                stringifySmartQuery(
+                    JSON.parse(query || this.activeQuery.query)
+                ),
+                this.aliases
+            )
+            this.inputModel = stringQuery
+            this.oldInputQuery = stringQuery
+        },
+        updateActiveQuery(option: Record<string, string>) {
+            this.preventUpdate = true
+            const isNewQuery =
+                option.label === 'New Query' || option.label === ''
+            this.activeQuery = {
+                name: option.label,
+                query: isNewQuery ? this.newQuery : this.activeQuery.query
+            }
+            this.preventUpdate = false
+            this.jsonEditorQuery = isNewQuery
+                ? this.newQuery || '{}'
+                : option.value
+            this.alignJsonText()
+        },
+        alignJsonText() {
+            try {
+                this.preventUpdate = false
+                this.jsonEditorQuery = JSON.stringify(
+                    JSON.parse(this.jsonEditorQuery),
+                    null,
+                    2
+                )
+            } catch (err) {}
         }
     }
 })
@@ -465,4 +621,26 @@ export default defineComponent({
         word-break: break-all;
     }
 }
+.json-editor__footer {
+    &-menu {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+    &-save > * {
+        margin: 0px 10px;
+    }
+}
+.json-query {
+    height: 100%;
+}
+.json-editor-layout {
+    height: 90%;
+}
+.json-query-menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
 </style>

package/src/components/compound/DlSearches/DlSmartSearch/utils/utils.ts

@@ -62,13 +62,20 @@ function isValidDate(d: Date) {
     return d instanceof Date && !isNaN(d as any)
 }
 
-export function replaceAliases(json: string, aliases: Alias[]) {
+export function replaceWithAliases(json: string, aliases: Alias[]) {
     let newJson = json
     aliases.forEach((alias) => {
         newJson = newJson.replaceAll(alias.alias, alias.key)
     })
     return newJson
 }
+export function revertAliases(json: string, aliases: Alias[]) {
+    let newJson = json
+    aliases.forEach((alias) => {
+        newJson = newJson.replaceAll(alias.key, alias.alias)
+    })
+    return newJson
+}
 
 export function createColorSchema(
     colorSchema: ColorSchema,

package/src/components/compound/index.ts

@@ -17,3 +17,4 @@ export * from './DlTabs'
 export * from './DlToast'
 export * from './DlDialogBox'
 export * from './DlToggleButton'
+export * from './DlJsonEditor'

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/DlJsonEditorDemo.vue

@@ -0,0 +1,59 @@
+<template>
+    <div
+        style="
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        "
+    >
+        <div style="height: 200px; width: 500px">
+            <dl-json-editor v-model="jsonModel" />
+        </div>
+        <span>JSON: {{ jsonModel }}</span>
+
+        <dl-button @click="dialogState = !dialogState">
+            JsonEditor
+        </dl-button>
+        <dl-dialog-box
+            v-model="dialogState"
+            volatile
+            :width="700"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="JsonEditor"
+                    @onClose="dialogState = false"
+                />
+            </template>
+            <template #body>
+                <div style="height: 200px">
+                    <dl-json-editor v-model="dialogJsonModel" />
+                </div>
+            </template>
+        </dl-dialog-box>
+        <span>Dialog JSON: {{ dialogJsonModel }}</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlJsonEditor,
+    DlDialogBox,
+    DlDialogBoxHeader,
+    DlButton
+} from '../components'
+export default defineComponent({
+    components: { DlJsonEditor, DlDialogBox, DlDialogBoxHeader, DlButton },
+    setup() {
+        const jsonModel = ref('')
+        const dialogJsonModel = ref('')
+        const dialogState = ref(false)
+        return {
+            jsonModel,
+            dialogState,
+            dialogJsonModel
+        }
+    }
+})
+</script>

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"

package/src/demos/index.ts

@@ -55,6 +55,7 @@ import DlSeparatorDemo from './DlSeparatorDemo.vue'
 import DlCardDemo from './DlCardDemo.vue'
 import DlMarkupTableDemo from './DlMarkupTableDemo.vue'
 import DlVirtualScrollDemo from './DlVirtualScrollDemo.vue'
+import DlJsonEditorDemo from './DlJsonEditorDemo.vue'
 
 export default {
     AvatarDemo,
@@ -113,5 +114,6 @@ export default {
     DlKpiDemo,
     DlCardDemo,
     DlMarkupTableDemo,
-    DlVirtualScrollDemo
+    DlVirtualScrollDemo,
+    DlJsonEditorDemo
 }