@dataloop-ai/components 0.20.183-ds-v3.2 → 0.20.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.183-ds-v3.2",
+  "version": "0.20.183",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/assets/theme.css

@@ -69,6 +69,7 @@ body {
     --dl-color-link: #20abfa;
     --dl-color-cell-background: #fffae2;
     --dl-color-disabled-slider: #b3b3b3;
+    --dl-color-text-800: #101019;
     --q-color-positive: #38d079;
     --q-color-warning: #e1b75b;
 
@@ -139,6 +140,7 @@ body {
     --dl-color-link: #53b2e8;
     --dl-color-cell-background: #fffae2;
     --dl-color-disabled-slider: #64686d;
+    --dl-color-text-800: #ffffff;
     --q-color-positive: #3FC97F;
     --q-color-warning: #f8d29a;
 

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -1,71 +1,104 @@
 <template>
     <div :id="uuid" class="dl-date-time-range">
-        <template v-if="isInputMode">
-            <date-input
-                :text="dateInputText"
-                :input-style="dateInputStyle"
+        <date-input
+            :text="dateInputText"
+            :input-style="dateInputStyle"
+            :disabled="disabled"
+            :width="width"
+        >
+            <dl-menu
+                ref="dateTimeRangeMenu"
+                anchor="bottom middle"
+                self="top middle"
+                :offset="[0, 5]"
                 :disabled="disabled"
-                :width="width"
             >
-                <dl-menu
-                    ref="dateTimeRangeMenu"
-                    anchor="bottom middle"
-                    self="top middle"
-                    :offset="[0, 5]"
-                    :disabled="disabled"
-                >
-                    <date-time-range-content
-                        v-bind="dateTimeRangeContentProps"
-                        @day-type-option-click="handleDayTypeOptionClick"
-                        @month-type-option-click="handleMonthTypeOptionClick"
-                        @update-date-interval="updateDateInterval"
-                        @update-date-interval-with-auto-close="
-                            updateDateIntervalWithAutoClose
-                        "
-                        @update-from-to-date="updateFromToDate"
-                        @clear="handleClearAction"
-                    />
-                </dl-menu>
-            </date-input>
-        </template>
-        <template v-else>
-            <date-time-range-content
-                v-bind="dateTimeRangeContentProps"
-                @day-type-option-click="handleDayTypeOptionClick"
-                @month-type-option-click="handleMonthTypeOptionClick"
-                @update-date-interval="updateDateInterval"
-                @update-date-interval-with-auto-close="
-                    updateDateIntervalWithAutoClose
-                "
-                @update-from-to-date="updateFromToDate"
-                @clear="handleClearAction"
-            />
-        </template>
+                <div class="dl-date-time-range--card">
+                    <div
+                        v-if="mode === 'multi'"
+                        class="dl-date-time-range--card_sidebar"
+                    >
+                        <card-sidebar
+                            v-if="typeState === 'day'"
+                            :options="sidebarDayOptions"
+                            :current-option="currentSidebarOption"
+                            @click="handleDayTypeOptionClick"
+                        />
+                        <card-sidebar
+                            v-else
+                            :options="sidebarMonthOptions"
+                            :current-option="currentSidebarOption"
+                            @click="handleMonthTypeOptionClick"
+                        />
+                    </div>
+                    <div
+                        class="dl-date-time-range--card_content"
+                        :style="cardContentStyles"
+                    >
+                        <dl-date-picker
+                            :model-value="dateInterval"
+                            :type="typeState"
+                            :available-range="availableRange"
+                            :disabled="isInputDisabled"
+                            :normalize-calendars="normalizeCalendars"
+                            :active-date-from="activeDateFrom"
+                            :active-date-to="activeDateTo"
+                            @update:model-value="
+                                updateDateIntervalWithAutoClose
+                            "
+                            @update:from-to-date="updateFromToDate"
+                        />
+                        <dl-time-picker
+                            v-if="showTime && typeState === 'day'"
+                            :disabled="isInputDisabled"
+                            :model-value="dateInterval"
+                            @update:model-value="updateDateInterval"
+                        />
+
+                        <dl-button
+                            size="s"
+                            outlined
+                            class="dl-date-time-range--button"
+                            @click="handleClearAction"
+                        >
+                            <span style="text-transform: capitalize">
+                                Clear
+                            </span>
+                        </dl-button>
+                    </div>
+                </div>
+            </dl-menu>
+        </date-input>
     </div>
 </template>
 <script lang="ts">
+import { DlTimePicker } from '../DlTimePicker'
 import { DateInterval } from '../types'
+import CardSidebar from './CardSidebar.vue'
 import {
     DayTypeOption,
     DAY_SIDEBAR_OPTION,
     MonthTypeOption,
-    MONTH_SIDEBAR_OPTION,
-    DATETIME_RANGE_VIEW_MODE
+    MONTH_SIDEBAR_OPTION
 } from './types'
 import { CustomDate } from '../DlDatePicker/models/CustomDate'
+import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
 import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
 import DateInput from './DateInput.vue'
-import DateTimeRangeContent from './DateTimeRangeContent.vue'
 import { DlMenu } from '../../../essential'
+import { DlButton } from '../../../basic'
 import { defineComponent, PropType } from 'vue-demi'
 import { isInRange } from '../DlDatePicker/utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
+        CardSidebar,
+        DlDatePicker,
+        DlTimePicker,
         DateInput,
-        DateTimeRangeContent,
-        DlMenu
+        DlMenu,
+        DlButton
     },
     model: {
         prop: 'modelValue',
@@ -119,14 +152,6 @@ export default defineComponent({
         shouldClearSelectFirstOption: {
             type: Boolean,
             default: false
-        },
-        viewMode: {
-            type: String as PropType<DATETIME_RANGE_VIEW_MODE>,
-            default: DATETIME_RANGE_VIEW_MODE.input
-        },
-        hideClearButton: {
-            type: Boolean,
-            default: false
         }
     },
     emits: ['update:model-value', 'set-type', 'change'],
@@ -412,27 +437,6 @@ export default defineComponent({
             return {
                 '--card-content-width': this.datePickerCardWidth
             }
-        },
-        isInputMode(): boolean {
-            return this.viewMode === DATETIME_RANGE_VIEW_MODE.input
-        },
-        dateTimeRangeContentProps(): Record<string, any> {
-            return {
-                mode: this.mode,
-                typeState: this.typeState,
-                sidebarDayOptions: this.sidebarDayOptions,
-                sidebarMonthOptions: this.sidebarMonthOptions,
-                currentSidebarOption: this.currentSidebarOption,
-                dateInterval: this.dateInterval,
-                availableRange: this.availableRange,
-                isInputDisabled: this.isInputDisabled,
-                normalizeCalendars: this.normalizeCalendars,
-                activeDateFrom: this.activeDateFrom,
-                activeDateTo: this.activeDateTo,
-                showTime: this.showTime,
-                cardContentStyles: this.cardContentStyles,
-                hideClearButton: this.hideClearButton
-            }
         }
     },
     watch: {
@@ -512,10 +516,7 @@ export default defineComponent({
             this.typeState = value
             this.$emit('set-type', value)
         },
-        updateDateInterval(
-            value: DateInterval | null,
-            skipSidebarUpdate = false
-        ) {
+        updateDateInterval(value: DateInterval | null) {
             if (value === null) {
                 this.dateInterval = null
             } else {
@@ -523,14 +524,6 @@ export default defineComponent({
                     from: value.from,
                     to: new Date(value.to)
                 }
-                // When in multi mode, update sidebar option to custom if user manually selects date
-                if (this.mode === 'multi' && !skipSidebarUpdate) {
-                    this.currentSidebarOption =
-                        this.typeState === 'day'
-                            ? DAY_SIDEBAR_OPTION.custom
-                            : MONTH_SIDEBAR_OPTION.custom
-                    this.isInputDisabled = false
-                }
             }
             this.$emit('update:model-value', value)
             this.$emit('change', value)
@@ -539,24 +532,16 @@ export default defineComponent({
             this.activeDateFrom = value?.from || null
             this.activeDateTo = value?.to || null
         },
-        updateDateIntervalWithAutoClose(
-            value: DateInterval,
-            skipSidebarUpdate = false
-        ) {
-            this.updateDateInterval(value, skipSidebarUpdate)
+        updateDateIntervalWithAutoClose(value: DateInterval) {
+            this.updateDateInterval(value)
 
-            if (
-                this.autoClose &&
-                this.viewMode === DATETIME_RANGE_VIEW_MODE.input
-            ) {
+            if (this.autoClose) {
                 const dateTimeRangeMenu = this.$refs[
                     'dateTimeRangeMenu'
                 ] as unknown as {
                     hide: () => void
                 }
-                if (dateTimeRangeMenu) {
-                    dateTimeRangeMenu.hide()
-                }
+                dateTimeRangeMenu.hide()
             }
         },
         handleDayTypeOptionClick(option: DayTypeOption) {
@@ -570,9 +555,9 @@ export default defineComponent({
 
             if (option.key === DAY_SIDEBAR_OPTION.custom_by_month) {
                 this.handleTypeChange('month')
-                this.updateDateInterval(option.value, true)
+                this.updateDateInterval(option.value)
             } else {
-                this.updateDateIntervalWithAutoClose(option.value, true)
+                this.updateDateIntervalWithAutoClose(option.value)
             }
         },
         handleMonthTypeOptionClick(option: MonthTypeOption) {
@@ -586,9 +571,9 @@ export default defineComponent({
 
             if (option.key === MONTH_SIDEBAR_OPTION.custom_by_day) {
                 this.handleTypeChange('day')
-                this.updateDateInterval(option.value, true)
+                this.updateDateInterval(option.value)
             } else {
-                this.updateDateIntervalWithAutoClose(option.value, true)
+                this.updateDateIntervalWithAutoClose(option.value)
             }
         }
     }
@@ -598,5 +583,25 @@ export default defineComponent({
 .dl-date-time-range {
     display: flex;
     justify-content: center;
+
+    &--card {
+        background-color: var(--dl-color-bg);
+        z-index: 1;
+        display: flex;
+        border-radius: 2px;
+        border-radius: 2px;
+    }
+
+    &--card_content {
+        width: var(--card-content-width);
+    }
+
+    &--button {
+        display: flex;
+        margin-left: auto;
+        width: fit-content;
+        margin-right: 16px;
+        margin-bottom: 16px;
+    }
 }
 </style>

package/src/components/compound/DlDateTime/DlDateTimeRange/types.ts

@@ -40,8 +40,3 @@ export type MonthTypeOption = {
     value?: DateInterval
     disabled?: boolean
 }
-
-export enum DATETIME_RANGE_VIEW_MODE {
-    input = 'input',
-    inline = 'inline'
-}

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

@@ -1470,9 +1470,6 @@ export default defineComponent({
         &--s {
             height: 18px;
         }
-        &--m {
-            height: 26px;
-        }
     }
 
     &__input {
@@ -1521,7 +1518,6 @@ export default defineComponent({
         }
 
         &--m {
-            height: 12px;
             line-height: 12px;
             padding-top: 7px;
             padding-bottom: 7px;

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

@@ -158,18 +158,6 @@ 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/components/DlSmartSearchInput.vue

@@ -53,7 +53,7 @@
                     </div>
                 </div>
                 <dl-tooltip
-                    v-if="!focused && !noTooltip"
+                    v-if="!focused"
                     border="1px solid var(--dl-color-separator)"
                     background-color="dl-color-panel-background"
                     color="dl-color-darker"
@@ -248,10 +248,6 @@ export default defineComponent({
             type: String,
             default: '28px'
         },
-        noTooltip: {
-            type: Boolean,
-            default: false
-        },
         omitSuggestions: {
             type: Array as PropType<string[]>,
             default: () => [] as string[]
@@ -279,7 +275,6 @@ export default defineComponent({
         'blur',
         'input',
         'search',
-        'status',
         'error',
         'clear'
     ],
@@ -302,7 +297,6 @@ export default defineComponent({
             defaultIcon,
             defaultIconColor,
             schema,
-            noTooltip,
             omitSuggestions,
             operatorsOverride,
             height,
@@ -1041,35 +1035,24 @@ export default defineComponent({
                 return status.value
             }
 
-            let newStatus: {
-                type: string
-                message: string
-            }
-
             if (!error.value && searchQuery.value !== '') {
-                newStatus = {
+                return {
                     type: 'success',
                     message: ''
                 }
             }
 
-            else if (error.value === 'warning') {
-                newStatus = {
+            if (error.value === 'warning') {
+                return {
                     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>(() => {

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

@@ -4,116 +4,48 @@
             v-model="isOpen"
             :height="500"
             :width="800"
-            style="--dl-dialog-box-footer-padding: 10px 16px; --dl-dialog-box-content-padding: 0"
+            style="--dl-dialog-box-footer-padding: 10px 16px"
         >
             <template #header>
                 <dl-dialog-box-header
-                    title="DQL Editor"
+                    title="DQL Search"
                     :close-button="true"
                     @onClose="isOpen = false"
                 />
             </template>
             <template #body>
                 <div class="json-editor-layout">
-                    <div class="json-query-menu">
+                    <div
+                        class="json-query-menu"
+                        style="margin-bottom: 10px"
+                    >
                         <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-selected">
+                                <span class="json-query-menu-option">
                                     {{ scope.opt ? scope.opt.label : '' }}
                                 </span>
                             </template>
                             <template #option="scope">
-                                <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"
-                                />
+                                <span class="json-query-menu-option">
+                                    {{ scope.opt.label }}
+                                </span>
                             </template>
                         </dl-select>
-                        <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>
+                        <dl-button
+                            icon="icon-dl-align-left"
+                            label="Align Left"
+                            flat
+                            color="secondary"
+                            padding="0px 3px"
+                            :disabled="alignDisabled"
+                            @click="alignJSON"
+                        />
                     </div>
                     <dl-json-editor
                         ref="jsonEditor"
@@ -133,7 +65,7 @@
                         flat
                         color="secondary"
                         padding="0"
-                        @click="optionToDelete = selectedOption"
+                        @click="showDeleteDialog = true"
                     />
                     <div class="json-editor-footer-actions">
                         <dl-button
@@ -169,20 +101,27 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
-                    :red-asterisk="true"
-                    :required="true"
-                    title="Query Name"
-                    placeholder="Insert query name"
+                    title="Query name"
+                    style="text-align: center"
+                    placeholder="Type 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>
@@ -196,13 +135,12 @@
                 />
             </template>
             <template #body>
-                <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
+                    size="h3"
+                    style="display: flex; justify-content: center"
+                >
+                    Are you sure you want to delete
+                    {{ selectedOption.label }}?
                 </dl-typography>
             </template>
             <template #footer>
@@ -228,12 +166,10 @@ 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 { DlTooltip } from '../../../../shared/DlTooltip'
-import { DlTypography, DlIcon } from '../../../../essential'
+import { DlTypography } from '../../../../essential'
 import { DlInput } from '../../../DlInput'
 import { stateManager } from '../../../../../StateManager'
 import { cloneDeep, isEqual, uniqBy } from 'lodash'
@@ -243,12 +179,9 @@ export default defineComponent({
     components: {
         DlDialogBox,
         DlDialogBoxHeader,
-        DlIcon,
         DlJsonEditor,
         DlButton,
         DlSelect,
-        DlSeparator,
-        DlTooltip,
         DlTypography,
         DlInput
     },
@@ -281,24 +214,11 @@ 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)
 
@@ -310,15 +230,7 @@ export default defineComponent({
         const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
         const jsonEditor = ref<any>(null)
         const showSaveDialog = ref(false)
-        const optionToDelete = ref<DlSelectOption>(null)
-        const showDeleteDialog = computed<boolean>({
-            get: () => !!optionToDelete.value,
-            set: (val) => {
-                if (!val) {
-                    optionToDelete.value = null
-                }
-            }
-        })
+        const showDeleteDialog = ref(false)
         const newQueryName = ref('')
         const alignDisabled = ref(false)
 
@@ -361,11 +273,6 @@ 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
@@ -449,10 +356,10 @@ export default defineComponent({
 
         const deleteQuery = () => {
             const toDelete = options.value.find(
-                (o: DlSelectOption) => o.label === optionToDelete.value.label
+                (o: DlSelectOption) => o.label === selectedOption.value.label
             )
             const newOptions = options.value.filter(
-                (o: DlSelectOption) => o.label !== optionToDelete.value.label
+                (o: DlSelectOption) => o.label !== selectedOption.value.label
             )
 
             emit('delete', toDelete)
@@ -485,11 +392,9 @@ export default defineComponent({
             selectedOption,
             hasActiveFilter,
             alignJSON,
-            copyJSON,
             onQuerySelect,
             newQueryName,
             alignDisabled,
-            optionToDelete,
             showDeleteDialog,
             selectOptions,
             search,
@@ -502,76 +407,29 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .json-editor-layout {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
-.json-editor-footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
+.json-editor-footer,
 .json-query-menu {
+    width: 100%;
     display: flex;
     align-items: center;
-    background-color: var(--dl-color-fill);
     justify-content: space-between;
-    padding: 6px 16px;
 }
 .json-editor {
-    height: calc(100% - 40px);
-    --jse-main-border: none;
+    height: 100%;
 }
 
 .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>

package/src/components/compound/DlSelect/DlSelect.vue

@@ -170,17 +170,13 @@
                         <slot name="before-options" />
                     </dl-item-section>
                 </dl-list-item>
-                <dl-list-item
-                    v-if="noOptions"
-                    :style="computedNoOptionsStyle"
-                    :padding="noOptionsPadding"
-                >
+                <dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
                     <dl-item-section color="dl-color-medium">
                         <slot name="no-options"> No options </slot>
                     </dl-item-section>
                 </dl-list-item>
                 <dl-list
-                    v-else-if="showMenuList"
+                    v-if="showMenuList"
                     class="select-list"
                     :padding="false"
                     :style="
@@ -519,10 +515,6 @@ export default defineComponent({
             type: String,
             default: null
         },
-        noOptionsPadding: {
-            type: String,
-            default: null
-        },
         keepFocusOnBlur: {
             type: Boolean,
             default: false
@@ -1056,11 +1048,7 @@ export default defineComponent({
             return !!option?.readonly
         },
         isDisableRowOption(option: DlSelectOptionType) {
-            return (
-                typeof option === 'object' &&
-                option !== null &&
-                !!option.disableRow
-            )
+            return typeof option === 'object' && option !== null && !!option.disableRow
         },
         getOptionCount(option: any) {
             return option?.count ?? null

package/src/components/compound/DlSelect/components/DlSelectOption.vue

@@ -17,7 +17,7 @@
         <dl-list-item
             v-else
             class="option"
-            :class="{
+            :class="{ 
                 highlighted: highlightSelected && isSelected,
                 'disabled-row': disableRow
             }"
@@ -142,7 +142,10 @@ import { v4 } from 'uuid'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../../StateManager'
 import { getCaseInsensitiveInput, getLabel } from '../utils'
-import { DlSelectOption, DlSelectOptionType } from '../../types'
+import {
+    DlSelectOption,
+    DlSelectOptionType
+} from '../../types'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
@@ -403,11 +406,7 @@ export default defineComponent({
             return !!option?.readonly
         },
         isDisableRowOption(option: DlSelectOptionType) {
-            return (
-                typeof option === 'object' &&
-                option !== null &&
-                !!option.disableRow
-            )
+            return typeof option === 'object' && option !== null && !!option.disableRow
         }
     }
 })

package/src/components/compound/DlTable/DlTable.vue

@@ -156,7 +156,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                                visibleColumns.length
+                                            visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -269,8 +269,8 @@
                                     isRowSelected(getRowKey(props.item))
                                         ? 'selected'
                                         : hasAnyAction
-                                            ? ' cursor-pointer'
-                                            : ''
+                                        ? ' cursor-pointer'
+                                        : ''
                                 "
                                 :no-hover="noHover"
                                 @click="
@@ -555,7 +555,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                                visibleColumns.length
+                                            visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -666,8 +666,8 @@
                             <dl-top-scroll
                                 v-if="
                                     tableScroll &&
-                                        infiniteScroll &&
-                                        !isDataEmpty
+                                    infiniteScroll &&
+                                    !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-top="
@@ -701,8 +701,8 @@
                                         isRowSelected(getRowKey(row))
                                             ? 'selected'
                                             : hasAnyAction
-                                                ? ' cursor-pointer'
-                                                : ''
+                                            ? ' cursor-pointer'
+                                            : ''
                                     "
                                     :no-hover="noHover"
                                     @click="onTrClick($event, row, pageIndex)"
@@ -837,8 +837,8 @@
                             <dl-bottom-scroll
                                 v-if="
                                     tableScroll &&
-                                        infiniteScroll &&
-                                        !isDataEmpty
+                                    infiniteScroll &&
+                                    !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-bottom="
@@ -895,7 +895,7 @@
                     <div
                         v-if="
                             hasBottomSelectionBanner &&
-                                selectedRowsLabel(rowsSelectedNumber)
+                            selectedRowsLabel(rowsSelectedNumber)
                         "
                         class="dl-table__control"
                     >

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -804,9 +804,7 @@ export default defineComponent({
                 targetRow: finalTarget
             })
 
-            const isDragValid =
-                shouldSkipValidation ||
-                checkParentCondition(draggedRow.value, finalTarget)
+            const isDragValid = shouldSkipValidation || checkParentCondition(draggedRow.value, finalTarget)
             if (isDragValid) {
                 const smartSortingMovement = {
                     ...sortingMovement.value,
@@ -931,7 +929,7 @@ export default defineComponent({
             }
 
             const isValid = checkParentCondition(draggedRow.value, targetRow)
-
+            
             if (isValid) {
                 storedValidTarget.value = targetRow
             }

package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue

@@ -16,7 +16,7 @@
             }`"
         >
             <dl-icon
-                v-if="hasDraggableRows && !row.disableDraggable"
+               v-if="hasDraggableRows && !row.disableDraggable"
                 class="draggable-icon"
                 icon="icon-dl-drag"
                 size="12px"

package/src/components/essential/DlProgressBar/DlProgressBar.vue

@@ -1,16 +1,13 @@
 <template>
-    <div
-        :id="uuid"
-        class="dl-progress-wrapper"
-        :style="`width: ${width};`"
-    >
+    <div :id="uuid" class="dl-progress-wrapper" :style="`width: ${width};`">
         <p
-            v-if="label"
+            v-if="label || labelSlot"
             data-test-id="progress-label"
             align="left"
             class="dl-progress-bar-label"
         >
             {{ label }}
+            <slot name="label"> </slot>
         </p>
         <div class="progress-container">
             <span
@@ -35,10 +32,7 @@
                 {{ computedValue }}{{ showPercentage ? '%' : '' }}
             </p>
         </div>
-        <div
-            v-if="summary"
-            class="summary"
-        >
+        <div v-if="summary" class="summary">
             <div>
                 {{ summary }}
             </div>
@@ -63,6 +57,10 @@ export default defineComponent({
             type: String,
             default: null
         },
+        labelSlot: {
+            type: Boolean,
+            default: false
+        },
         showValue: {
             type: Boolean,
             required: false,

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -7,14 +7,12 @@
         }`"
     >
         <label
-            v-if="hasLeftLabel"
+            v-if="!!leftLabel"
             class="left dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            <slot name="left-label">
-                {{ leftLabel }}
-            </slot>
+            {{ leftLabel }}
         </label>
         <span
             class="dl-switch-container"
@@ -37,14 +35,12 @@
             />
         </span>
         <label
-            v-if="hasRightLabel"
+            v-if="!!rightLabel"
             class="right dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            <slot name="right-label">
-                {{ rightLabel }}
-            </slot>
+            {{ rightLabel }}
         </label>
     </div>
 </template>
@@ -147,12 +143,6 @@ export default defineComponent({
                 ? this.index === -1
                 : toRaw(this.modelValue) === toRaw(this.falseValue)
         },
-        hasLeftLabel(): boolean {
-            return !!this.leftLabel || !!this.$slots['left-label']
-        },
-        hasRightLabel(): boolean {
-            return !!this.rightLabel || !!this.$slots['right-label']
-        },
         cssVars(): Record<string, string> {
             return {
                 '--dl-checkbox-height': `${this.size}px`,

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -124,9 +124,7 @@ export default defineComponent({
 
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
-        const scrollSizeItem: Ref<number> = ref(
-            virtualScrollItemSize.value || 40
-        )
+        const scrollSizeItem: Ref<number> = ref(40)
 
         const isDefined = (v: any) => v !== undefined && v !== null
 

package/src/demos/DlDateTimeRangeDemo.vue

@@ -176,26 +176,6 @@
                 @change="handleModelValueUpdate"
             />
         </div>
-        <div style="width: 500px; margin-top: 30px">
-            <div style="margin-bottom: 10px; font-weight: bold">
-                Inline Mode
-            </div>
-            <dl-date-time-range
-                v-model="date"
-                :type="type"
-                width="100%"
-                :available-range="range ? availableRange : null"
-                :mode="mode"
-                :show-time="showTime"
-                :auto-close="autoClose"
-                :including-current-month="includesCurrentMonthEnd"
-                :should-clear-select-first-option="shouldClearSelectFirstOption"
-                :disabled-type="type === 'day' ? 'month' : 'day'"
-                view-mode="inline"
-                @set-type="handleSetType"
-                @change="handleModelValueUpdate"
-            />
-        </div>
     </div>
 </template>
 <script lang="ts">

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -42,7 +42,6 @@
 
         <dl-smart-search-input
             v-model="queryObject"
-            no-tooltip
             :aliases="aliases"
             :schema="schema"
             :color-schema="colorSchema"

package/src/components/compound/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue

@@ -1,177 +0,0 @@
-<template>
-    <div class="dl-date-time-range--card">
-        <div v-if="mode === 'multi'" class="dl-date-time-range--card_sidebar">
-            <card-sidebar
-                v-if="typeState === 'day'"
-                :options="sidebarDayOptions"
-                :current-option="currentSidebarOption"
-                @click="handleDayTypeOptionClick"
-            />
-            <card-sidebar
-                v-else
-                :options="sidebarMonthOptions"
-                :current-option="currentSidebarOption"
-                @click="handleMonthTypeOptionClick"
-            />
-        </div>
-        <div
-            class="dl-date-time-range--card_content"
-            :style="cardContentStyles"
-        >
-            <dl-date-picker
-                :model-value="dateInterval"
-                :type="typeState"
-                :available-range="availableRange"
-                :disabled="isInputDisabled"
-                :normalize-calendars="normalizeCalendars"
-                :active-date-from="activeDateFrom"
-                :active-date-to="activeDateTo"
-                @update:model-value="updateDateIntervalWithAutoClose"
-                @update:from-to-date="updateFromToDate"
-            />
-            <dl-time-picker
-                v-if="showTime && typeState === 'day'"
-                :disabled="isInputDisabled"
-                :model-value="dateInterval"
-                @update:model-value="updateDateInterval"
-            />
-
-            <dl-button
-                v-if="!hideClearButton"
-                size="s"
-                outlined
-                class="dl-date-time-range--button"
-                @click="handleClear"
-            >
-                <span style="text-transform: capitalize"> Clear </span>
-            </dl-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
-import { DlTimePicker } from '../DlTimePicker'
-import { DateInterval } from '../types'
-import CardSidebar from './CardSidebar.vue'
-import { DayTypeOption, MonthTypeOption } from './types'
-import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
-import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
-import { DlButton } from '../../../basic'
-
-export default defineComponent({
-    components: {
-        CardSidebar,
-        DlDatePicker,
-        DlTimePicker,
-        DlButton
-    },
-    props: {
-        mode: {
-            type: String as PropType<'single' | 'multi'>,
-            required: true
-        },
-        typeState: {
-            type: String as PropType<'day' | 'month'>,
-            required: true
-        },
-        sidebarDayOptions: {
-            type: Array as PropType<DayTypeOption[]>,
-            required: true
-        },
-        sidebarMonthOptions: {
-            type: Array as PropType<MonthTypeOption[]>,
-            required: true
-        },
-        currentSidebarOption: {
-            type: String,
-            required: true
-        },
-        dateInterval: {
-            type: Object as PropType<DateInterval | null>,
-            default: null
-        },
-        availableRange: {
-            type: Object as PropType<Partial<DateInterval> | null>,
-            default: null
-        },
-        isInputDisabled: {
-            type: Boolean,
-            default: false
-        },
-        normalizeCalendars: {
-            type: Boolean,
-            default: false
-        },
-        activeDateFrom: {
-            type: Object as PropType<CalendarDate | null>,
-            default: null
-        },
-        activeDateTo: {
-            type: Object as PropType<CalendarDate | null>,
-            default: null
-        },
-        showTime: {
-            type: Boolean,
-            default: false
-        },
-        cardContentStyles: {
-            type: Object as PropType<Record<string, any>>,
-            default: () => ({})
-        },
-        hideClearButton: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: [
-        'day-type-option-click',
-        'month-type-option-click',
-        'update-date-interval',
-        'update-date-interval-with-auto-close',
-        'update-from-to-date',
-        'clear'
-    ],
-    methods: {
-        handleDayTypeOptionClick(option: DayTypeOption) {
-            this.$emit('day-type-option-click', option)
-        },
-        handleMonthTypeOptionClick(option: MonthTypeOption) {
-            this.$emit('month-type-option-click', option)
-        },
-        updateDateInterval(value: DateInterval | null) {
-            this.$emit('update-date-interval', value)
-        },
-        updateDateIntervalWithAutoClose(value: DateInterval) {
-            this.$emit('update-date-interval-with-auto-close', value)
-        },
-        updateFromToDate(value?: { from: CalendarDate; to: CalendarDate }) {
-            this.$emit('update-from-to-date', value)
-        },
-        handleClear() {
-            this.$emit('clear')
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.dl-date-time-range--card {
-    background-color: var(--dl-color-bg);
-    z-index: 1;
-    display: flex;
-    border-radius: 2px;
-}
-
-.dl-date-time-range--card_content {
-    width: var(--card-content-width);
-}
-
-.dl-date-time-range--button {
-    display: flex;
-    margin-left: auto;
-    width: fit-content;
-    margin-right: 16px;
-    margin-bottom: 16px;
-}
-</style>