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

package/package.json

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

package/src/assets/globals.scss

@@ -1,4 +1,4 @@
-@import "./theme.css";
+@import './theme.css';
 
 body {
     & > * {
@@ -8,6 +8,231 @@ body {
     }
 }
 
+html.dl-sortable--dragging,
+html.dl-sortable--dragging * {
+    cursor: grabbing !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+}
+
+.dl-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-fill-hover);
+}
+
+tr.dl-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+}
+
+tr.dl-table-fallback-row.sortable-drag > th,
+tr.dl-table-fallback-row.sortable-drag > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+    height: 40px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+tbody.dl-table-fallback-row.sortable-drag {
+    display: table-row-group !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-panel-background);
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+}
+
+tr.dl-tree-table-fallback-row.sortable-drag {
+    display: table !important;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-panel-background);
+}
+
+tr.dl-tree-table-fallback-row.sortable-drag > th,
+tr.dl-tree-table-fallback-row.sortable-drag > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+    height: 40px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+tbody.dl-tree-table-fallback-row.sortable-drag {
+    display: table-row-group !important;
+}
+
+.dl-table-fallback-row.sortable-drag > tr {
+    display: table-row;
+    height: 40px;
+    vertical-align: middle;
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr {
+    display: table-row;
+    height: 40px;
+    vertical-align: middle;
+}
+
+.dl-table-fallback-row.sortable-drag > tr > th,
+.dl-table-fallback-row.sortable-drag > tr > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr > th,
+.dl-tree-table-fallback-row.sortable-drag > tr > td {
+    display: table-cell;
+    box-sizing: border-box;
+    background-color: var(--dl-color-fill-hover);
+    color: var(--dl-color-darker);
+    vertical-align: middle;
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr:first-child > th,
+.dl-tree-table-fallback-row.sortable-drag > tr:first-child > td {
+    background-color: var(--dl-color-fill-hover);
+}
+
+.dl-tree-table-fallback-row.sortable-drag > tr:not(:first-child) > th,
+.dl-tree-table-fallback-row.sortable-drag > tr:not(:first-child) > td {
+    background-color: var(--dl-color-fill-hover);
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td:first-child,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.dl-table--col-auto-width,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.chevron-icon-container {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.chevron-icon-container,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    > td.chevron-icon-container
+    *,
+.dl-tree-table-fallback-row.sortable-drag > tr:not(:first-child) .chevron-icon,
+.dl-tree-table-fallback-row.sortable-drag
+    tr[data-level]:not([data-level='1'])
+    .chevron-icon
+    * {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td:first-child,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.dl-table--col-auto-width,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.chevron-icon-container {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td:nth-child(-n + 3) {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tr:not(:first-child)
+    > td:nth-child(-n + 3) {
+    background-color: transparent !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.chevron-icon-container,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    > tr
+    > td.chevron-icon-container
+    *,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    .chevron-icon,
+.dl-tree-table-fallback-row.sortable-drag
+    tbody[data-level]:not([data-level='1'])
+    .chevron-icon
+    * {
+    background-color: transparent !important;
+}
+
+.dl-table-fallback-row.sortable-drag .draggable-icon {
+    visibility: hidden !important;
+}
+
+.dl-tree-table-fallback-row.sortable-drag .draggable-icon {
+    visibility: hidden !important;
+}
+
+.dl-table-fallback-row.sortable-drag > tr:not(:first-child) {
+    display: none !important;
+}
+
 // tranform
 .rotate-180 {
     transform: rotate(180deg);
@@ -145,7 +370,6 @@ body {
 }
 
 .non-draggable {
-    user-drag: none;
     -webkit-user-drag: none;
     user-select: none;
     -moz-user-select: none;
@@ -185,7 +409,6 @@ body {
     height: 100%;
 }
 
-
 // scrollbar
 
 html {

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

@@ -58,17 +58,15 @@
                 :style="`
                     background-color: ${separatorColor}`"
             />
-            <slot name="suffix-icon">
-                <dl-icon
-                    class="expand-icon"
-                    :class="iconClass"
-                    :icon="dropdownIcon"
-                    :size="iconSize"
-                    :color="getIconColor"
-                    :tooltip="iconTooltip"
-                    @click="onIconClicked"
-                />
-            </slot>
+            <dl-icon
+                class="expand-icon"
+                :class="iconClass"
+                :icon="dropdownIcon"
+                :size="iconSize"
+                :color="getIconColor"
+                :tooltip="iconTooltip"
+                @click="onIconClicked"
+            />
         </dl-button>
         <dl-menu
             ref="menuRef"
@@ -118,7 +116,10 @@
         @click="onClick"
     >
         <div class="dl-button-dropdown--simple__title">
-            <slot name="label">
+            <template v-if="hasLabelSlot">
+                <slot name="label" />
+            </template>
+            <template v-else>
                 <span
                     :class="{
                         'dl-button-no-wrap': noWrap
@@ -127,17 +128,15 @@
                 >
                     {{ label }}
                 </span>
-            </slot>
-            <slot name="suffix-icon">
-                <dl-icon
-                    :class="iconClass"
-                    :icon="dropdownIcon"
-                    :size="iconSize"
-                    :color="getIconColor"
-                    :tooltip="iconTooltip"
-                    @click="onIconClicked"
-                />
-            </slot>
+            </template>
+            <dl-icon
+                :class="iconClass"
+                :icon="dropdownIcon"
+                :size="iconSize"
+                :color="getIconColor"
+                :tooltip="iconTooltip"
+                @click="onIconClicked"
+            />
         </div>
 
         <dl-menu
@@ -302,6 +301,9 @@ 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',
@@ -510,7 +512,8 @@ export default defineComponent({
             cssVars,
             getIconColor,
             computedTextColor,
-            separatorColor
+            separatorColor,
+            hasLabelSlot
         }
     }
 })

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()
         }
     }
 })