@dataloop-ai/components 0.20.197 → 0.20.199

package/src/components/compound/DlInput/DlInput.vue

@@ -985,11 +985,11 @@ export default defineComponent({
         },
         getBorderColor(): string {
             if (this.error) {
-                return `var(--dl-color-negative)`
+                return `var(--dell-red-500)`
             } else if (this.warning) {
-                return `var(--dl-color-warning)`
+                return `var(--dell-yellow-500)`
             } else {
-                return `var(--dl-color-secondary)`
+                return `var(--dell-blue-500)`
             }
         },
         cssVars(): Record<string, any> {
@@ -1034,6 +1034,12 @@ export default defineComponent({
                 classes.push('dl-input__input--disabled')
             }
 
+            if (this.inputLength) {
+                classes.push('dl-input__input--text-color')
+            } else {
+                classes.push('dl-input__input--placeholder-color')
+            }
+
             return classes
         },
         asteriskClasses(): string[] {
@@ -1366,7 +1372,7 @@ export default defineComponent({
 [contenteditable='true']:empty:before {
     content: attr(placeholder);
     display: inline;
-    opacity: 0.5;
+    opacity: 1;
     -webkit-text-security: none;
 }
 
@@ -1470,6 +1476,9 @@ export default defineComponent({
         &--s {
             height: 18px;
         }
+        &--m {
+            height: 26px;
+        }
     }
 
     &__input {
@@ -1477,7 +1486,6 @@ export default defineComponent({
         font-family: Arial, Helvetica, sans-serif;
         border-right: none;
         border-radius: 0px;
-        color: var(--dl-color-darker);
         white-space: var(--dl-input-white-space);
         font-size: var(--dl-font-size-body);
         overflow: hidden scroll;
@@ -1493,6 +1501,13 @@ export default defineComponent({
         line-height: 10px;
         width: 100%;
 
+        &--text-color {
+            color: var(--dell-gray-800);
+        }
+        &--placeholder-color {
+            color: var(--dell-gray-500);
+        }
+
         &--prepend {
             width: calc(100% - 10px - 28px);
         }
@@ -1518,6 +1533,7 @@ export default defineComponent({
         }
 
         &--m {
+            height: 12px;
             line-height: 12px;
             padding-top: 7px;
             padding-bottom: 7px;

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

@@ -158,6 +158,18 @@ export default defineComponent({
         },
         onSearchButtonPress(): void {
             this.$emit('search', this.modelValue)
+        },
+        focus(): void {
+            const inputComponent = this.$refs.input as InstanceType<
+                typeof DlInput
+            >
+            inputComponent?.focus()
+        },
+        blur(): void {
+            const inputComponent = this.$refs.input as InstanceType<
+                typeof DlInput
+            >
+            inputComponent?.blur()
         }
     }
 })

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

@@ -1,12 +1,6 @@
 <template>
-    <div
-        class="dl-smart-search"
-        :style="cssVars"
-    >
-        <div
-            ref="inputWrapper"
-            class="dl-smart-search__input-wrapper"
-        >
+    <div class="dl-smart-search" :style="cssVars">
+        <div ref="inputWrapper" class="dl-smart-search__input-wrapper">
             <dl-smart-search-input
                 ref="smartSearchInput"
                 v-model="queryObject"
@@ -18,6 +12,7 @@
                 :color-schema="colorSchema"
                 :strict="strict"
                 :placeholder="placeholder"
+                :disabled="disabled"
                 @focus="isFocused = true"
                 @blur="isFocused = false"
                 @search="emitSearchQuery"

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

@@ -12,11 +12,7 @@
                         :icon="
                             focused ? defaultIcon : statusIcon || defaultIcon
                         "
-                        :color="
-                            focused
-                                ? defaultIconColor
-                                : statusIconColor || defaultIconColor
-                        "
+                        :color="iconColor"
                         size="16px"
                         :inline="false"
                     />
@@ -53,7 +49,7 @@
                     </div>
                 </div>
                 <dl-tooltip
-                    v-if="!focused"
+                    v-if="!focused && !noTooltip"
                     border="1px solid var(--dl-color-separator)"
                     background-color="dl-color-panel-background"
                     color="dl-color-darker"
@@ -248,6 +244,10 @@ export default defineComponent({
             type: String,
             default: '28px'
         },
+        noTooltip: {
+            type: Boolean,
+            default: false
+        },
         omitSuggestions: {
             type: Array as PropType<string[]>,
             default: () => [] as string[]
@@ -275,6 +275,7 @@ export default defineComponent({
         'blur',
         'input',
         'search',
+        'status',
         'error',
         'clear'
     ],
@@ -297,6 +298,7 @@ export default defineComponent({
             defaultIcon,
             defaultIconColor,
             schema,
+            noTooltip,
             omitSuggestions,
             operatorsOverride,
             height,
@@ -960,6 +962,16 @@ export default defineComponent({
             }
         })
 
+        const iconColor = computed(() => {
+            if (disabled.value) {
+                return 'dl-color-disabled'
+            }
+            if (focused.value) {
+                return defaultIconColor.value
+            }
+            return statusIconColor.value || defaultIconColor.value
+        })
+
         const textareaStyles = computed<Record<string, string | number>>(() => {
             const overflow: string =
                 scroll.value && focused.value ? 'scroll' : 'hidden'
@@ -994,9 +1006,14 @@ export default defineComponent({
         })
 
         const inputClass = computed<string>(() => {
-            return `dl-smart-search-input__textarea${
-                focused.value ? ' focus' : ''
-            }`
+            let classes = 'dl-smart-search-input__textarea'
+            if (focused.value) {
+                classes += ' focus'
+            }
+            if (disabled.value) {
+                classes += ' dl-smart-search-input__textarea--disabled'
+            }
+            return classes
         })
 
         const showClearButton = computed(() => {
@@ -1035,24 +1052,31 @@ export default defineComponent({
                 return status.value
             }
 
+            let newStatus: {
+                type: string
+                message: string
+            }
+
             if (!error.value && searchQuery.value !== '') {
-                return {
+                newStatus = {
                     type: 'success',
                     message: ''
                 }
-            }
-
-            if (error.value === 'warning') {
-                return {
+            } else if (error.value === 'warning') {
+                newStatus = {
                     type: 'warning',
                     message: 'The query is not supported technically.'
                 }
+            } else {
+                newStatus = {
+                    type: 'error',
+                    message: error.value
+                }
             }
 
-            return {
-                type: 'error',
-                message: error.value
-            }
+            emit('status', newStatus)
+
+            return newStatus
         })
 
         const inputPlaceholder = computed<string>(() => {
@@ -1085,11 +1109,23 @@ export default defineComponent({
             })
         })
 
+        const uuid = v4()
+        const watchFocusIn = () => {
+            focused.value = focused.value ||
+                !!document.activeElement?.closest(`#DlSmartSearchInput${uuid}`)
+        }
+
         watch(focused, (value, old) => {
             if (old === value) {
                 return
             }
 
+            if (!value) {
+                const focusIn = 'focusin'
+                window.removeEventListener(focusIn, watchFocusIn)
+                window.addEventListener(focusIn, watchFocusIn)
+            }
+
             updateParentElementWidth()
         })
 
@@ -1150,7 +1186,7 @@ export default defineComponent({
         })
 
         return {
-            uuid: v4(),
+            uuid,
             suggestionsDropdown,
             container,
             input,
@@ -1173,6 +1209,7 @@ export default defineComponent({
             debouncedSetInputValue,
             statusIcon,
             statusIconColor,
+            iconColor,
             textareaStyles,
             searchBarClasses,
             inputClass,
@@ -1325,6 +1362,21 @@ export default defineComponent({
         }
     }
 
+    &__textarea--disabled {
+        &::before {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &__search-bar--disabled {
+        .dl-smart-search-input__input,
+        .dl-smart-search-input__textarea {
+            &::before {
+                color: var(--dl-color-disabled);
+            }
+        }
+    }
+
     &__input-wrapper,
     &__textarea-wrapper {
         min-height: 28px;

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

@@ -4,48 +4,116 @@
             v-model="isOpen"
             :height="500"
             :width="800"
-            style="--dl-dialog-box-footer-padding: 10px 16px"
+            style="--dl-dialog-box-footer-padding: 10px 16px; --dl-dialog-box-content-padding: 0"
         >
             <template #header>
                 <dl-dialog-box-header
-                    title="DQL Search"
+                    title="DQL Editor"
                     :close-button="true"
                     @onClose="isOpen = false"
                 />
             </template>
             <template #body>
                 <div class="json-editor-layout">
-                    <div
-                        class="json-query-menu"
-                        style="margin-bottom: 10px"
-                    >
+                    <div class="json-query-menu">
                         <dl-select
                             :model-value="selectedOption"
+                            ref="jsonQueryMenu"
                             width="300px"
                             :options="selectOptions"
                             placeholder="New Query"
+                            searchable
+                            size="m"
+                            after-options-padding="0"
+                            no-options-padding="0"
+                            menu-style="overflow-y: hidden;"
                             @update:model-value="onQuerySelect"
                         >
                             <template #selected="scope">
-                                <span class="json-query-menu-option">
+                                <span class="json-query-menu-selected">
                                     {{ scope.opt ? scope.opt.label : '' }}
                                 </span>
                             </template>
                             <template #option="scope">
-                                <span class="json-query-menu-option">
-                                    {{ scope.opt.label }}
-                                </span>
+                                <div
+                                    v-if="selectOptions.length < 2"
+                                    class="json-query-menu-no-option"
+                                    disabled
+                                    style="cursor: default !important; padding: 14px 0 10px 0;"
+                                >
+                                    No Saved Queries
+                                </div>
+                                <div v-else class="json-query-menu-option">
+                                    <div class="json-query-menu-option-label">
+                                        {{ scope.opt.label }}
+                                    </div>
+                                    <dl-icon
+                                        v-if="scope.opt.label !== 'New Query'"
+                                        icon="icon-dl-delete"
+                                        color="dl-color-negative"
+                                        class="json-query-menu-option-delete"
+                                        @click.stop="onDelete(scope.opt)"
+                                    >
+                                        <dl-tooltip>Delete</dl-tooltip>
+                                    </dl-icon>
+                                </div>
+                            </template>
+                            <template #after-options>
+                                <dl-separator
+                                    style="margin: 0 0 2px 0 !important"
+                                    type="horizontal"
+                                />
+                                <dl-button
+                                    icon="icon-dl-save"
+                                    flat
+                                    fluid
+                                    secondary
+                                    size="s"
+                                    label="Save Query"
+                                    class="json-query-menu-save-button"
+                                    @click="onSave"
+                                />
+                            </template>
+                            <template #no-options>
+                                <div class="json-query-menu-no-option">
+                                    No Results Found
+                                </div>
+                                <dl-separator
+                                    style="margin: 0 0 2px 0 !important"
+                                    type="horizontal"
+                                />
+                                <dl-button
+                                    icon="icon-dl-save"
+                                    flat
+                                    fluid
+                                    secondary
+                                    size="s"
+                                    label="Save Query"
+                                    class="json-query-menu-save-button"
+                                    @click="onSave"
+                                />
                             </template>
                         </dl-select>
-                        <dl-button
-                            icon="icon-dl-align-left"
-                            label="Align Left"
-                            flat
-                            color="secondary"
-                            padding="0px 3px"
-                            :disabled="alignDisabled"
-                            @click="alignJSON"
-                        />
+                        <div>
+                            <dl-button
+                                icon="icon-dl-align-left"
+                                tooltip="Align Left"
+                                flat
+                                color="secondary"
+                                padding="0px 3px"
+                                :disabled="alignDisabled"
+                                @click="alignJSON"
+                            />
+                            <dl-button
+                                icon="icon-dl-copy"
+                                tooltip="Copy"
+                                flat
+                                color="secondary"
+                                padding="0px 3px"
+                                :disabled="alignDisabled"
+                                @click="copyJSON"
+                            />
+                        </div>
                     </div>
                     <dl-json-editor
                         ref="jsonEditor"
@@ -65,7 +133,7 @@
                         flat
                         color="secondary"
                         padding="0"
-                        @click="showDeleteDialog = true"
+                        @click="optionToDelete = selectedOption"
                     />
                     <div class="json-editor-footer-actions">
                         <dl-button
@@ -101,27 +169,20 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
-                    title="Query name"
-                    style="text-align: center"
-                    placeholder="Type query name"
+                    :red-asterisk="true"
+                    :required="true"
+                    title="Query Name"
+                    placeholder="Insert query name"
                 />
             </template>
             <template #footer>
                 <div class="dl-smart-search__buttons--save">
                     <dl-button
                         :disabled="!newQueryName"
-                        outlined
-                        style="margin-right: 5px"
                         @click="() => saveQuery(false)"
                     >
                         Save
                     </dl-button>
-                    <dl-button
-                        :disabled="!newQueryName"
-                        @click="() => saveQuery(true)"
-                    >
-                        Save and Search
-                    </dl-button>
                 </div>
             </template>
         </dl-dialog-box>
@@ -135,12 +196,13 @@
                 />
             </template>
             <template #body>
-                <dl-typography
-                    size="h3"
-                    style="display: flex; justify-content: center"
-                >
-                    Are you sure you want to delete
-                    {{ selectedOption.label }}?
+                <dl-typography size="h5">
+                    Are you sure you want to permanently delete the following query?
+                    <br />
+                    {{ optionToDelete.label }}
+                    <br />
+                    <br />
+                    This action cannot be undone.
                 </dl-typography>
             </template>
             <template #footer>
@@ -166,10 +228,12 @@ import {
 } from 'vue-demi'
 import { DlSelect } from '../../../DlSelect'
 import { DlSelectOption } from '../../../DlSelect/types'
+import { DlSeparator } from '../../../../essential/DlSeparator'
 import { DlButton } from '../../../../basic'
 import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
 import { DlJsonEditor } from '../../../DlJsonEditor'
-import { DlTypography } from '../../../../essential'
+import { DlTooltip } from '../../../../shared/DlTooltip'
+import { DlTypography, DlIcon } from '../../../../essential'
 import { DlInput } from '../../../DlInput'
 import { stateManager } from '../../../../../StateManager'
 import { cloneDeep, isEqual, uniqBy } from 'lodash'
@@ -179,9 +243,12 @@ export default defineComponent({
     components: {
         DlDialogBox,
         DlDialogBoxHeader,
+        DlIcon,
         DlJsonEditor,
         DlButton,
         DlSelect,
+        DlSeparator,
+        DlTooltip,
         DlTypography,
         DlInput
     },
@@ -214,11 +281,24 @@ export default defineComponent({
         'update:modelValue',
         'search',
         'change',
+        'copied',
         'update:options',
         'save',
         'delete',
         'select'
     ],
+    methods: {
+        onDelete(option: DlSelectOption) {
+            const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
+            select?.closeMenu()
+            this.optionToDelete = option
+        },
+        onSave() {
+            const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
+            select?.closeMenu()
+            this.showSaveDialog = true
+        }
+    },
     setup(props, { emit }) {
         const { modelValue, options, json, selectedFilter } = toRefs(props)
 
@@ -230,7 +310,15 @@ export default defineComponent({
         const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
         const jsonEditor = ref<any>(null)
         const showSaveDialog = ref(false)
-        const showDeleteDialog = ref(false)
+        const optionToDelete = ref<DlSelectOption>(null)
+        const showDeleteDialog = computed<boolean>({
+            get: () => !!optionToDelete.value,
+            set: (val) => {
+                if (!val) {
+                    optionToDelete.value = null
+                }
+            }
+        })
         const newQueryName = ref('')
         const alignDisabled = ref(false)
 
@@ -273,6 +361,11 @@ export default defineComponent({
             jsonEditor.value?.format()
         }
 
+        const copyJSON = async () => {
+            await navigator.clipboard.writeText(stringifiedJSON.value)
+            emit('copied')
+        }
+
         const onQuerySelect = (option: DlSelectOption) => {
             if (option.label === selectedOption.value.label) {
                 return
@@ -356,10 +449,10 @@ export default defineComponent({
 
         const deleteQuery = () => {
             const toDelete = options.value.find(
-                (o: DlSelectOption) => o.label === selectedOption.value.label
+                (o: DlSelectOption) => o.label === optionToDelete.value.label
             )
             const newOptions = options.value.filter(
-                (o: DlSelectOption) => o.label !== selectedOption.value.label
+                (o: DlSelectOption) => o.label !== optionToDelete.value.label
             )
 
             emit('delete', toDelete)
@@ -392,9 +485,11 @@ export default defineComponent({
             selectedOption,
             hasActiveFilter,
             alignJSON,
+            copyJSON,
             onQuerySelect,
             newQueryName,
             alignDisabled,
+            optionToDelete,
             showDeleteDialog,
             selectOptions,
             search,
@@ -407,29 +502,76 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .json-editor-layout {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
-.json-editor-footer,
-.json-query-menu {
+.json-editor-footer {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
+.json-query-menu {
+    display: flex;
+    align-items: center;
+    background-color: var(--dl-color-fill);
+    justify-content: space-between;
+    padding: 6px 16px;
+}
 .json-editor {
-    height: 100%;
+    height: calc(100% - 40px);
+    --jse-main-border: none;
 }
 
 .json-query-menu-option {
+    display: flex;
+    flex-direction: row;
+}
+.json-query-menu-option-label,
+.json-query-menu-selected {
+    padding-top: 3px;
     white-space: nowrap;
     display: inline-block;
     width: 265px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.json-query-menu-option:hover .json-query-menu-option-label {
+    margin-right: 6px;
+    width: 255px;
+}
+.json-query-menu-option-delete {
+    overflow-x: hidden;
+    width: 0;
+}
+.json-query-menu-option:hover .json-query-menu-option-delete {
+    border-radius: 4px;
+    overflow-x: visible;
+    padding: 4px;
+    width: auto;
+}
+.json-query-menu-option-delete:hover {
+    background-color: var(--dl-color-fill-secondary);
+}
+.json-query-menu-option-delete:active {
+    background-color: var(--dl-color-negative-background);
+}
+.json-query-menu-no-option {
+    display: flex;
+    padding: 20px 0;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+}
+.json-query-menu-save-button:hover {
+    background-color: var(--dl-color-fill-secondary);
+}
+.dl-smart-search__buttons--save {
+    text-align: right;
+    width: 100%;
+}
 </style>