@dataloop-ai/components 0.20.197 → 0.20.199

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

@@ -63,7 +63,7 @@
                             v-if="searchable"
                             icon="icon-dl-search"
                             :size="iconSize"
-                            color="dl-color-lighter"
+                            color="dell-gray-500"
                         />
                     </slot>
                 </div>
@@ -166,17 +166,21 @@
                 @selected-item="handleSelectedItem"
             >
                 <dl-list-item v-if="hasBeforeOptions && !noOptions">
-                    <dl-item-section color="dl-color-medium">
+                    <dl-item-section color="dell-gray-600">
                         <slot name="before-options" />
                     </dl-item-section>
                 </dl-list-item>
-                <dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
-                    <dl-item-section color="dl-color-medium">
+                <dl-list-item
+                    v-if="noOptions"
+                    :style="computedNoOptionsStyle"
+                    :padding="noOptionsPadding"
+                >
+                    <dl-item-section color="dell-gray-600">
                         <slot name="no-options"> No options </slot>
                     </dl-item-section>
                 </dl-list-item>
                 <dl-list
-                    v-if="showMenuList"
+                    v-else-if="showMenuList"
                     class="select-list"
                     :padding="false"
                     :style="
@@ -351,7 +355,7 @@
                     v-if="error && !!errorMessage.length"
                     :icon="errorIcon"
                     :inline="false"
-                    color="dl-color-negative"
+                    color="dell-red-500"
                     :size="iconSize"
                 >
                     <dl-tooltip>
@@ -515,6 +519,10 @@ export default defineComponent({
             type: String,
             default: null
         },
+        noOptionsPadding: {
+            type: String,
+            default: null
+        },
         keepFocusOnBlur: {
             type: Boolean,
             default: false
@@ -808,7 +816,7 @@ export default defineComponent({
                 '--placeholder-color': getColor(
                     this.modelValueLength > 0 || this.selectedIndex !== -1
                         ? 'dell-gray-800'
-                        : 'dl-color-lighter'
+                        : 'dell-gray-500'
                 )
             }
         },

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,10 +142,7 @@ 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]
 
@@ -225,7 +222,7 @@ export default defineComponent({
             return `dl-select-option-${this.value}`.replaceAll(' ', '-')
         },
         color(): string | null {
-            return this.defaultStyles ? 'dl-color-darker' : null
+            return this.defaultStyles ? 'dell-gray-800' : null
         },
         isSelected(): boolean {
             return (
@@ -271,7 +268,7 @@ export default defineComponent({
 
                 highlightedHtml = label.replace(
                     toReplace,
-                    `<span style="background: var(--dl-color-warning)">${getCaseInsensitiveInput(
+                    `<span style="background: var(--dell-yellow-500)">${getCaseInsensitiveInput(
                         label,
                         this.filterTerm
                     )}</span>`
@@ -406,7 +403,11 @@ 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

@@ -167,7 +167,7 @@
                                         style="width: 100%; display: flex"
                                     >
                                         <dl-button
-                                            :text-color="
+                                            :icon-color="
                                                 isVisibleColumnsOpen
                                                     ? 'dell-blue-600'
                                                     : 'dell-gray-600'
@@ -571,7 +571,7 @@
                                         style="width: 100%; display: flex"
                                     >
                                         <dl-button
-                                            :text-color="
+                                            :icon-color="
                                                 isVisibleColumnsOpen
                                                     ? 'dl-color-secondary'
                                                     : 'dl-color-medium'

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

@@ -266,11 +266,11 @@ export default defineComponent({
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: () =>
-            ({
-                title: '',
-                subtitle: 'No data to show yet',
-                icon: 'icon-dl-dataset-filled'
-            } as unknown as PropType<DlEmptyStateProps>)
+                ({
+                    title: '',
+                    subtitle: 'No data to show yet',
+                    icon: 'icon-dl-dataset-filled'
+                } as unknown as PropType<DlEmptyStateProps>)
         },
         /**
          * Custom icon class to use for expanded rows.
@@ -392,7 +392,7 @@ export default defineComponent({
             typeof props.rowKey === 'function'
                 ? props.rowKey
                 : (row: Record<string, any>) =>
-                    row[props.rowKey as string] ?? ''
+                      row[props.rowKey as string] ?? ''
         )
 
         const hasDraggableRows = computed(() =>
@@ -537,7 +537,7 @@ export default defineComponent({
         const onMultipleSelectionSet = (val: boolean) => {
             const value =
                 selectedData.value.length > 0 &&
-                    selectedData.value.length === tableRows.value.length
+                selectedData.value.length === tableRows.value.length
                     ? false
                     : val
 
@@ -811,7 +811,9 @@ 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,
@@ -835,10 +837,9 @@ export default defineComponent({
                 return
             }
 
-            const srcEl =
-                (originalEvent.srcElement ||
-                    originalEvent.target ||
-                    null) as HTMLElement | null
+            const srcEl = (originalEvent.srcElement ||
+                originalEvent.target ||
+                null) as HTMLElement | null
             const passedElement = srcEl ? getElementAbove(srcEl, 'dl-tr') : null
             if (passedElement) {
                 const targetRowId = passedElement.dataset.id
@@ -1243,7 +1244,7 @@ export default defineComponent({
         this.vue2h = vue2h
         const tableBodySlot = isVue2
             ? this.$slots['table-body'] &&
-            (() => (this.$slots['table-body'] as any)?.pop())
+              (() => (this.$slots['table-body'] as any)?.pop())
             : this.$slots['table-body']
         const tbody =
             tableBodySlot ?? (this.isDataEmpty ? null : this.renderTBody)
@@ -1307,7 +1308,7 @@ export default defineComponent({
     justify-content: center;
     flex-wrap: wrap;
 
-    &>* {
+    & > * {
         flex-grow: 1;
     }
 }
@@ -1336,7 +1337,6 @@ tr {
 }
 
 .sticky-header {
-
     ::v-deep .dl-table__top,
     ::v-deep .dl-table__bottom,
     ::v-deep thead tr:first-child th {
@@ -1359,4 +1359,4 @@ tr {
         top: 40px;
     }
 }
-</style>
+</style>

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

@@ -234,10 +234,10 @@ export default defineComponent({
 }
 .container.disabled {
     cursor: not-allowed;
-    color: var(--dl-color-disabled);
+    color: var(--dell-gray-500);
     & * {
         pointer-events: auto;
-        color: var(--dl-color-disabled);
+        color: var(--dell-gray-500);
     }
 }
 .checkbox-wrapper {
@@ -245,7 +245,7 @@ export default defineComponent({
     position: relative;
     width: 12px;
     height: 12px;
-    border: 1px solid var(--dl-color-separator);
+    border: 1px solid var(--dell-gray-300);
     border-radius: 2px;
     & svg {
         transition: fill 100ms cubic-bezier(0, 0, 0.2, 1) 0ms;
@@ -278,7 +278,7 @@ input {
 
 .checkbox-label {
     font-size: var(--dl-font-size-body);
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
     overflow-wrap: break-word;
     width: 100%;
 }

package/src/components/essential/DlLink/DlLink.vue

@@ -43,8 +43,12 @@ export default defineComponent({
                 : `${window.origin}/${this.href}`
         },
         linkStyles(): Record<string, string> {
-            const textColor = this.color ?? 'dl-color-studio-secondary'
-            const hoverTextColor = this.hoverColor ?? textColor
+            const textColor = this.color ?? 'dell-blue-600'
+            const hoverTextColor = this.hoverColor
+                ? this.hoverColor
+                : this.color
+                ? this.color
+                : 'dell-blue-700'
             return {
                 '--link-color': `var(--${textColor})`,
                 '--link-hover-color': `var(--${hoverTextColor})`

package/src/components/essential/DlList/DlList.vue

@@ -1,9 +1,5 @@
 <template>
-    <component
-        :is="type"
-        :id="uuid"
-        :class="classes"
-    >
+    <component :is="type" :id="uuid" :class="classes">
         <slot :clickable="clickable" />
     </component>
 </template>
@@ -44,12 +40,12 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-list {
     padding: 6px 0;
-    background-color: var(--dl-color-panel-background);
+    background-color: var(--dell-white);
     &--bordered {
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-300);
     }
     &--separator {
-        border-top: 1px solid var(--dl-color-separator);
+        border-top: 1px solid var(--dell-gray-300);
         & > .dl-list-item {
             padding: 5px 10px;
         }

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

@@ -51,7 +51,7 @@ export default defineComponent({
     props: {
         color: {
             type: String,
-            default: 'dl-color-secondary'
+            default: 'dell-blue-500'
         },
         label: {
             type: String,

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

@@ -7,12 +7,14 @@
         }`"
     >
         <label
-            v-if="!!leftLabel"
+            v-if="hasLeftLabel"
             class="left dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            {{ leftLabel }}
+            <slot name="left-label">
+                {{ leftLabel }}
+            </slot>
         </label>
         <span
             class="dl-switch-container"
@@ -35,12 +37,14 @@
             />
         </span>
         <label
-            v-if="!!rightLabel"
+            v-if="hasRightLabel"
             class="right dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            {{ rightLabel }}
+            <slot name="right-label">
+                {{ rightLabel }}
+            </slot>
         </label>
     </div>
 </template>
@@ -143,6 +147,12 @@ 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/essential/DlTrend/DlTrend.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
-        :id="uuid"
-        class="trend-wrapper"
-    >
+    <div :id="uuid" class="trend-wrapper">
         <span
             v-if="withArrow"
             class="direction-arrow"
@@ -25,6 +22,24 @@ import { getColor } from '../../../utils'
 const colorValidator = (val: string | null) =>
     val === 'negative' || val === 'positive' || val === null
 
+const getColorByName = (name: string) => {
+    if (name === 'negative') {
+        return 'dell-red-500'
+    } else if (name === 'positive') {
+        return 'dell-green-500'
+    } else {
+        return 'dell-gray-800'
+    }
+}
+
+const getColorByDirection = (direction: string) => {
+    if (direction === 'up') {
+        return 'dell-green-500'
+    } else {
+        return 'dell-red-500'
+    }
+}
+
 export default defineComponent({
     name: 'DlTrend',
     props: {
@@ -63,9 +78,9 @@ export default defineComponent({
         },
         computedColor(): string {
             if (this.color !== null || !colorValidator(this.color)) {
-                return getColor(`dl-color-${this.color}`)
+                return getColor(getColorByName(this.color))
             }
-            return getColor(`dl-color-${this.isUp ? 'positive' : 'negative'}`)
+            return getColor(getColorByDirection(this.direction))
         },
         withArrow(): boolean {
             return !(this.value === 0 || this.value === '0')
@@ -83,7 +98,7 @@ export default defineComponent({
     font-size: var(--dl-font-size-body);
     line-height: 1;
     padding: 2px 0;
-    color: var(--dl-color-darker);
+    color: var(--dell-gray-800);
 }
 .direction-arrow {
     width: 8px;

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

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

package/src/demos/DlDateTimeRangeDemo.vue

@@ -176,6 +176,26 @@
                 @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,6 +42,7 @@
 
         <dl-smart-search-input
             v-model="queryObject"
+            no-tooltip
             :aliases="aliases"
             :schema="schema"
             :color-schema="colorSchema"

package/src/utils/getColor.ts

@@ -9,10 +9,10 @@ const getColor = (color: string, fallback?: string) => {
         return color
     }
 
-    if (!color) return `var(--${fallback || 'dl-color-darker'})`
+    if (!color) return `var(--${fallback || 'dell-gray-800'})`
     if (color.includes('var(--')) return color
 
-    return `var(--${color}, var(--${fallback || 'dl-color-darker'}))`
+    return `var(--${color}, var(--${fallback || 'dell-gray-800'}))`
 }
 
 export { getColor }