@dataloop-ai/components 0.20.196 → 0.20.198

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

@@ -1443,18 +1443,18 @@ export default defineComponent({
         position: relative;
         display: flex;
         justify-content: space-between;
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-500);
         min-width: var(--dl-input-width);
         max-width: var(--dl-input-max-width);
         max-height: var(--dl-input-max-height);
         height: var(--dl-input-height);
 
         &--readonly {
-            border-color: var(--dl-color-separator) !important;
+            border-color: var(--dell-gray-500) !important;
         }
 
         &:hover {
-            border-color: var(--dl-input-border-color-hover);
+            border-color: var(--dell-gray-800);
         }
         &--error {
             border-color: var(--dl-color-negative);
@@ -1463,20 +1463,23 @@ export default defineComponent({
             border-color: var(--dl-input-border-color-hover);
         }
         &--disabled {
-            border-color: var(--dl-color-separator);
+            border-color: var(--dell-gray-500);
             color: var(--dl-color-disabled);
             cursor: not-allowed;
         }
         &--s {
             height: 18px;
         }
+        &--m {
+            height: 26px;
+        }
     }
 
     &__input {
         display: inline-block;
         font-family: Arial, Helvetica, sans-serif;
         border-right: none;
-        border-radius: 2px;
+        border-radius: 0px;
         color: var(--dl-color-darker);
         white-space: var(--dl-input-white-space);
         font-size: var(--dl-font-size-body);
@@ -1518,6 +1521,7 @@ export default defineComponent({
         }
 
         &--m {
+            height: 12px;
             line-height: 12px;
             padding-top: 7px;
             padding-bottom: 7px;

package/src/components/compound/DlPagination/DlPagination.vue

@@ -115,15 +115,15 @@ export default defineComponent({
         },
         textColor: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         },
         activeColor: {
             type: String,
-            default: 'dl-color-secondary'
+            default: 'dell-blue-500'
         },
         activeTextColor: {
             type: String,
-            default: 'dl-color-text-buttons'
+            default: 'dell-white'
         },
         totalItems: {
             type: Number,

package/src/components/compound/DlPagination/components/PageNavigation.vue

@@ -1,18 +1,12 @@
 <template>
-    <div
-        class="dl-pagination--page_navigation"
-        :style="cssVars"
-    >
+    <div class="dl-pagination--page_navigation" :style="cssVars">
         <button
             v-if="boundaryLinks"
             class="dl-pagination--nav_button"
             :disabled="disabled || isFirstPage"
             @click="setPage(min)"
         >
-            <dl-icon
-                icon="icon-dl-first-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-first-page" size="16px" />
         </button>
         <button
             v-if="directionLinks"
@@ -20,10 +14,7 @@
             :disabled="disabled || isFirstPage"
             @click="setPage(value - 1)"
         >
-            <dl-icon
-                icon="icon-dl-previous-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-previous-page" size="16px" />
         </button>
         <div class="dl-pagination--page_buttons_wrapper">
             <button
@@ -92,10 +83,7 @@
             :disabled="disabled || isLastPage"
             @click="setPage(value + 1)"
         >
-            <dl-icon
-                icon="icon-dl-right-next-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-right-next-page" size="16px" />
         </button>
         <button
             v-if="boundaryLinks"
@@ -103,10 +91,7 @@
             :disabled="disabled || isLastPage"
             @click="setPage(max)"
         >
-            <dl-icon
-                icon="icon-dl-last-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-last-page" size="16px" />
         </button>
     </div>
 </template>
@@ -155,15 +140,15 @@ export default defineComponent({
         },
         textColor: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         },
         activeColor: {
             type: String,
-            default: 'dl-color-secondary'
+            default: 'dell-blue-500'
         },
         activeTextColor: {
             type: String,
-            default: 'dl-color-text-buttons'
+            default: 'dell-white'
         }
     },
     emits: ['update:model-value'],
@@ -194,12 +179,12 @@ export default defineComponent({
                 ),
                 '--dl-active-button-bg-color': getColor(
                     this.activeColor,
-                    'dl-color-secondary'
+                    'dell-blue-500'
                 ),
-                '--dl-text-color': getColor(this.textColor, 'dl-color-darker'),
+                '--dl-text-color': getColor(this.textColor, 'dell-gray-800'),
                 '--dl-active-text-color': getColor(
                     this.activeTextColor,
-                    'dl-color-text-buttons'
+                    'dell-white'
                 ),
                 '--dl-button-min-width': this.buttonMinWidth
             }
@@ -319,44 +304,75 @@ export default defineComponent({
     }
 
     &--active {
-        color: var(--dl-active-text-color) !important;
-        background-color: var(--dl-active-button-bg-color) !important;
+        color: var(--dell-white) !important;
+        background-color: var(--dell-blue-500) !important;
     }
 
-    &--page_button,
     &--nav_button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         min-width: var(--dl-button-min-width);
         padding: 0;
         cursor: pointer;
         border: none;
         border-radius: 2px;
-        color: var(--dl-text-color);
+        color: var(--dell-blue-500) !important;
         background-color: var(--dl-button-bg-color);
 
-        &:active:not(:disabled) {
-            background-color: var(--dl-color-secondary);
-            color: var(--dl-color-text-buttons);
+        &:hover:not(:disabled) {
+            color: var(--dell-blue-600);
+            border-radius: 2px;
+            background-color: var(--dell-gray-100);
+            border: 1px solid var(--dell-gray-100);
 
             ::v-deep .dl-icon {
-                color: var(--dl-color-text-buttons);
+                color: var(--dell-blue-600);
+            }
+        }
+
+        &:disabled {
+            color: var(--dell-gray-500);
+            cursor: default;
+
+            ::v-deep .dl-icon {
+                color: var(--dell-gray-500);
+            }
+        }
+    }
+
+    &--page_button {
+        min-width: var(--dl-button-min-width);
+        padding: 0;
+        cursor: pointer;
+        border: none;
+        border-radius: 2px;
+        color: var(--dell-gray-800);
+        background-color: var(--dl-button-bg-color);
+
+        &:active:not(:disabled) {
+            background-color: var(--dell-blue-500);
+            color: var(--dell-white);
+            ::v-deep .dl-icon {
+                color: var(--dell-white);
             }
         }
 
         &:disabled {
-            color: var(--dl-color-disabled);
+            color: var(--dell-gray-500);
             cursor: default;
 
             ::v-deep .dl-icon {
-                color: var(--dl-color-disabled);
+                color: var(--dell-gray-500);
             }
         }
 
         &:hover:not(:disabled):not(.active) {
-            background-color: var(--dl-color-hover);
-            color: var(--dl-color-text-buttons);
+            background-color: var(--dell-gray-100);
+            color: var(--dell-gray-800);
 
             ::v-deep .dl-icon {
-                color: var(--dl-color-text-buttons);
+                color: var(--dell-gray-800);
             }
         }
     }

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 .dl-pagination--legend {
     justify-content: flex-end;
     display: flex;
-    color: var(--dl-color-lighter);
+    color: var(--dell-gray-500);
     height: 100%;
     min-width: min-content;
     overflow-y: scroll;

package/src/components/compound/DlPagination/components/QuickNavigation.vue

@@ -10,32 +10,31 @@
             :disabled="disabled"
             @keydown="handleKeyDown"
             @keyup="handleKeyUp"
-        >
-        <dl-button
-            size="s"
-            flat
-            margin="0"
-            class="dl-pagination--quick_nav_button"
+        />
+        <dl-link
+            class="dl-pagination--quick_nav_link"
+            color="dell-blue-600"
             :disabled="disabled"
+            hover-color="dell-blue-700"
             @click="handleNavigation"
         >
             Go
-        </dl-button>
+        </dl-link>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlButton } from '../../../basic'
 import { DlTypography } from '../../../essential'
 import { stopAndPrevent } from '../../../../utils'
 import { admissibleKeys } from '../../../../utils/nav-keys-constants'
+import { DlLink } from '../../../essential'
 
 export default defineComponent({
     name: 'QuickNavigation',
     components: {
         DlTypography,
-        DlButton
+        DlLink
     },
     model: {
         prop: 'modelValue',
@@ -96,16 +95,16 @@ export default defineComponent({
     &--quick_navigation {
         display: flex;
         align-items: center;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
         padding-right: 16px;
         & p {
             padding-right: 4px;
         }
     }
     &--navigation_input {
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-500);
         border-radius: 2px;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
         outline: none;
         background: none;
         padding-top: 3px;
@@ -121,23 +120,26 @@ export default defineComponent({
             margin: 0;
         }
         &:hover {
-            border-color: var(--dl-color-hover);
+            border-color: var(--dell-blue-600);
         }
 
         &:focus {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dell-blue-500);
         }
 
         &:disabled {
-            border-color: var(--dl-color-disabled);
-            color: var(--dl-color-disabled);
+            border-color: var(--dell-gray-500);
+            color: var(--dell-gray-500);
             cursor: not-allowed;
 
             &:hover {
-                border-color: var(--dl-color-disabled);
+                border-color: var(--dell-gray-500);
             }
         }
     }
+    &--quick_nav_link {
+        margin-left: 5px;
+    }
 }
 
 ::v-deep .dl-button {

package/src/components/compound/DlPagination/components/RowsSelector.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="dl-pagination--rows_selector">
-        <span class="dl-pagination--rows_per_page_label">{{ itemsName }} per page:</span>
-        <dl-typography
-            v-if="hasSingeValue"
-            color="dl-color-darker"
+        <span class="dl-pagination--rows_per_page_label"
+        >{{ itemsName }} per page:</span
         >
+        <dl-typography v-if="hasSingeValue" color="dell-gray-800">
             {{ modelValue }}
         </dl-typography>
         <dl-select
@@ -72,7 +71,7 @@ export default defineComponent({
     &--rows_selector {
         display: flex;
         align-items: center;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
     }
 
     &--rows_per_page_label {

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;