@dataloop-ai/components 0.20.184 → 0.20.186-ds-v3.0

package/package.json

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

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

@@ -0,0 +1,177 @@
+<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>

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

@@ -1,104 +1,71 @@
 <template>
     <div :id="uuid" class="dl-date-time-range">
-        <date-input
-            :text="dateInputText"
-            :input-style="dateInputStyle"
-            :disabled="disabled"
-            :width="width"
-        >
-            <dl-menu
-                ref="dateTimeRangeMenu"
-                anchor="bottom middle"
-                self="top middle"
-                :offset="[0, 5]"
+        <template v-if="isInputMode">
+            <date-input
+                :text="dateInputText"
+                :input-style="dateInputStyle"
                 :disabled="disabled"
+                :width="width"
             >
-                <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>
+                <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>
 </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
+    MONTH_SIDEBAR_OPTION,
+    DATETIME_RANGE_VIEW_MODE
 } 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,
-        DlMenu,
-        DlButton
+        DateTimeRangeContent,
+        DlMenu
     },
     model: {
         prop: 'modelValue',
@@ -152,6 +119,14 @@ 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'],
@@ -437,6 +412,27 @@ 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: {
@@ -516,7 +512,10 @@ export default defineComponent({
             this.typeState = value
             this.$emit('set-type', value)
         },
-        updateDateInterval(value: DateInterval | null) {
+        updateDateInterval(
+            value: DateInterval | null,
+            skipSidebarUpdate = false
+        ) {
             if (value === null) {
                 this.dateInterval = null
             } else {
@@ -524,6 +523,14 @@ 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)
@@ -532,16 +539,24 @@ export default defineComponent({
             this.activeDateFrom = value?.from || null
             this.activeDateTo = value?.to || null
         },
-        updateDateIntervalWithAutoClose(value: DateInterval) {
-            this.updateDateInterval(value)
+        updateDateIntervalWithAutoClose(
+            value: DateInterval,
+            skipSidebarUpdate = false
+        ) {
+            this.updateDateInterval(value, skipSidebarUpdate)
 
-            if (this.autoClose) {
+            if (
+                this.autoClose &&
+                this.viewMode === DATETIME_RANGE_VIEW_MODE.input
+            ) {
                 const dateTimeRangeMenu = this.$refs[
                     'dateTimeRangeMenu'
                 ] as unknown as {
                     hide: () => void
                 }
-                dateTimeRangeMenu.hide()
+                if (dateTimeRangeMenu) {
+                    dateTimeRangeMenu.hide()
+                }
             }
         },
         handleDayTypeOptionClick(option: DayTypeOption) {
@@ -555,9 +570,9 @@ export default defineComponent({
 
             if (option.key === DAY_SIDEBAR_OPTION.custom_by_month) {
                 this.handleTypeChange('month')
-                this.updateDateInterval(option.value)
+                this.updateDateInterval(option.value, true)
             } else {
-                this.updateDateIntervalWithAutoClose(option.value)
+                this.updateDateIntervalWithAutoClose(option.value, true)
             }
         },
         handleMonthTypeOptionClick(option: MonthTypeOption) {
@@ -571,9 +586,9 @@ export default defineComponent({
 
             if (option.key === MONTH_SIDEBAR_OPTION.custom_by_day) {
                 this.handleTypeChange('day')
-                this.updateDateInterval(option.value)
+                this.updateDateInterval(option.value, true)
             } else {
-                this.updateDateIntervalWithAutoClose(option.value)
+                this.updateDateIntervalWithAutoClose(option.value, true)
             }
         }
     }
@@ -583,25 +598,5 @@ 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,3 +40,8 @@ export type MonthTypeOption = {
     value?: DateInterval
     disabled?: boolean
 }
+
+export enum DATETIME_RANGE_VIEW_MODE {
+    input = 'input',
+    inline = 'inline'
+}

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -178,10 +178,20 @@ export default defineComponent({
             return !!parentClassList?.contains('content')
         },
         hasHeader(): boolean {
-            return !!this.$slots.header && !this.hideHeader
+            const slotKeys = Object.keys(this.$slots)
+            return (
+                !this.hideHeader &&
+                slotKeys.includes('header') &&
+                !!this.$slots.header
+            )
         },
         hasFooter(): boolean {
-            return !!this.$slots.footer && !this.hideFooter
+            const slotKeys = Object.keys(this.$slots)
+            return (
+                !this.hideFooter &&
+                slotKeys.includes('footer') &&
+                !!this.$slots.footer
+            )
         }
     },
     watch: {

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -58,15 +58,17 @@
                 :style="`
                     background-color: ${separatorColor}`"
             />
-            <dl-icon
-                class="expand-icon"
-                :class="iconClass"
-                :icon="dropdownIcon"
-                :size="iconSize"
-                :color="getIconColor"
-                :tooltip="iconTooltip"
-                @click="onIconClicked"
-            />
+            <slot name="suffix-icon">
+                <dl-icon
+                    class="expand-icon"
+                    :class="iconClass"
+                    :icon="dropdownIcon"
+                    :size="iconSize"
+                    :color="getIconColor"
+                    :tooltip="iconTooltip"
+                    @click="onIconClicked"
+                />
+            </slot>
         </dl-button>
         <dl-menu
             ref="menuRef"
@@ -116,10 +118,7 @@
         @click="onClick"
     >
         <div class="dl-button-dropdown--simple__title">
-            <template v-if="hasLabelSlot">
-                <slot name="label" />
-            </template>
-            <template v-else>
+            <slot name="label">
                 <span
                     :class="{
                         'dl-button-no-wrap': noWrap
@@ -128,15 +127,17 @@
                 >
                     {{ label }}
                 </span>
-            </template>
-            <dl-icon
-                :class="iconClass"
-                :icon="dropdownIcon"
-                :size="iconSize"
-                :color="getIconColor"
-                :tooltip="iconTooltip"
-                @click="onIconClicked"
-            />
+            </slot>
+            <slot name="suffix-icon">
+                <dl-icon
+                    :class="iconClass"
+                    :icon="dropdownIcon"
+                    :size="iconSize"
+                    :color="getIconColor"
+                    :tooltip="iconTooltip"
+                    @click="onIconClicked"
+                />
+            </slot>
         </div>
 
         <dl-menu
@@ -301,9 +302,6 @@ export default defineComponent({
         const showing = ref<boolean>(!!props.modelValue) as Ref<boolean>
         const menuRef = ref(null)
 
-        const hasLabelSlot = computed(() => {
-            return !!slots.label
-        })
         const attributes = computed(() => {
             const acc: Record<string, string> = {
                 'aria-expanded': showing.value === true ? 'true' : 'false',
@@ -512,8 +510,7 @@ export default defineComponent({
             cssVars,
             getIconColor,
             computedTextColor,
-            separatorColor,
-            hasLabelSlot
+            separatorColor
         }
     }
 })

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

@@ -1470,6 +1470,9 @@ export default defineComponent({
         &--s {
             height: 18px;
         }
+        &--m {
+            height: 26px;
+        }
     }
 
     &__input {
@@ -1518,6 +1521,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"