@dataloop-ai/components 0.20.196 → 0.20.198

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -9,20 +9,20 @@
     border-spacing: 0;
 
     .vertical-border {
-        border-left: 1px solid var(--dl-color-separator);
-        border-right: 1px solid var(--dl-color-separator);
+        border-left: 1px solid var(--dell-gray-300);
+        border-right: 1px solid var(--dell-gray-300);
     }
 
     thead {
         position: sticky;
         top: 0;
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         z-index: 50;
     }
 
     .sticky-col {
         position: sticky;
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         z-index: 50;
     }
 
@@ -84,7 +84,7 @@
     //markup-table
 
     &__card {
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         border-radius: 2px;
 
         .dl-table__middle {
@@ -101,7 +101,7 @@
     .dl-table__bottom,
     thead tr:first-child th {
         /* bg color is important for th; just specify one */
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
     }
 
     thead tr th {
@@ -134,14 +134,14 @@
                 opacity: 1;
             }
             td:not(.dl-td--no-hover) {
-                background-color: var(--dl-color-fill-hover);
+                background-color: var(--dell-blue-100);
             }
         }
     }
 
     tbody tr.highlighted {
         td {
-            background-color: var(--dl-color-fill);
+            background-color: var(--dell-blue-100);
         }
     }
 
@@ -158,7 +158,7 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 14px;
-        color: var(--dl-color-medium);
+        color: var(--dell-gray-900);
         background-color: inherit;
         user-select: none;
 
@@ -197,7 +197,7 @@
     }
 
     .dl-td {
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         &--no-hover {
             &:hover {
                 background-color: none !important;
@@ -211,7 +211,7 @@
 
     tbody {
         tr.selected td {
-            background-color: var(--dl-color-fill);
+            background-color: var(--dell-blue-100);
         }
 
         tr.selected td:after {
@@ -264,11 +264,11 @@
         font-size: 20px;
         letter-spacing: 0.005em;
         font-weight: 400;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
     }
 
     &--bordered {
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-300);
         border-radius: 2px;
     }
 
@@ -321,7 +321,7 @@
     }
 
     &__bottom {
-        border-top: 1px solid var(--dl-color-separator);
+        border-top: 1px solid var(--dell-gray-300);
         min-height: 50px;
         padding: 4px 14px 4px 16px;
         font-size: 12px;
@@ -364,7 +364,7 @@
     tr,
     th,
     td {
-        border-color: var(--dl-color-separator);
+        border-color: var(--dell-gray-300);
 
         &>label {
             padding: 0;
@@ -377,7 +377,7 @@
             font-size: 12px;
             line-height: 14px;
             background-color: inherit;
-            color: var(--dl-color-darker);
+            color: var(--dell-gray-800);
 
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -400,13 +400,13 @@
     }
 
     &__is-dragging {
-        background-color: var(--dl-color-fill);
+        background-color: var(--dell-blue-200);
     }
 
     &__selected {
-        background-color: var(--dl-color-fill) !important;
+        background-color: var(--dell-blue-100) !important;
         color: var(--dl-color-fill) !important;
-        border-color: var(--dl-color-fill) !important;
+        border-color: var(--dell-gray-300) !important;
     }
 
     &__drag {
@@ -419,7 +419,7 @@
         box-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
         border-radius: 2px;
         font-size: 12px;
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
 
         & th {
             cursor: grabbing !important;
@@ -554,7 +554,7 @@
 
     .dl-table__top {
         position: relative;
-        border-bottom: 1px solid var(--dl-color-separator);
+        border-bottom: 1px solid var(--dell-gray-300);
     }
 }
 

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

@@ -1,9 +1,5 @@
 <template>
-    <div
-        :id="uuid"
-        :class="identifierClass"
-        class="container-wrapper"
-    >
+    <div :id="uuid" :class="identifierClass" class="container-wrapper">
         <label
             ref="container"
             :for="computedId"
@@ -15,10 +11,7 @@
             @keydown="onKeydown"
             @keyup="onKeyup"
         >
-            <span
-                class="checkbox-wrapper"
-                :style="cssSvgVars"
-            >
+            <span class="checkbox-wrapper" :style="cssSvgVars">
                 <input
                     :id="computedId"
                     :value="value"
@@ -27,7 +20,7 @@
                     tabindex="-1"
                     :disabled="disabled"
                     :style="cssSvgVars"
-                >
+                />
                 <svg
                     class="check"
                     :class="{ active: isTrue }"
@@ -56,21 +49,13 @@
                     />
                 </svg>
             </span>
-            <span
-                v-if="hasLabel"
-                class="checkbox-label"
-                :for="computedId"
-            >
+            <span v-if="hasLabel" class="checkbox-label" :for="computedId">
                 <slot>
                     {{ label }}
                 </slot>
             </span>
         </label>
-        <div
-            v-if="hasSubLabel"
-            :style="subLabelStyle"
-            class="sub-text"
-        >
+        <div v-if="hasSubLabel" :style="subLabelStyle" class="sub-text">
             <slot name="sub-label">
                 <span>{{ subLabel }}</span>
             </slot>
@@ -93,7 +78,7 @@ export default defineComponent({
         event: 'update:model-value'
     },
     props: {
-        color: { type: String, default: 'dl-color-secondary' },
+        color: { type: String, default: 'dell-blue-500' },
         disabled: { type: Boolean, default: false },
         id: { type: [String, Number], default: null },
         modelValue: { type: ValueTypes, required: false, default: null },
@@ -174,9 +159,9 @@ export default defineComponent({
     methods: {
         getCurrentColor() {
             if (this.disabled) {
-                return 'var(--dl-color-disabled)'
+                return 'var(--dell-gray-500)'
             }
-            return getColor(this.color, 'dl-color-secondary')
+            return getColor(this.color, 'dell-blue-500')
         },
         onClick(e: Event) {
             if (e) {

package/src/components/essential/DlIcon/DlIcon.vue

@@ -127,7 +127,7 @@ export default defineComponent({
                           color.value === 'secondary'
                               ? 'q-color-secondary'
                               : color.value,
-                          'dl-color-icon-default'
+                          'dell-gray-800'
                       )
                     : 'inherit'
             }

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

@@ -1,13 +1,10 @@
 <template>
-    <div
-        :id="uuid"
-        class="link-wrapper"
-    >
+    <div :id="uuid" class="link-wrapper">
         <a
             :href="link"
             :target="target"
             :rel="rel"
-            :style="`color: var(--${textColor});`"
+            :style="linkStyles"
             :class="`${disabled ? 'disabled' : ''}`"
             @click="$emit('click')"
         >
@@ -28,7 +25,8 @@ export default defineComponent({
         newtab: { required: false, default: false, type: Boolean },
         external: { required: false, default: false, type: Boolean },
         disabled: { required: false, default: false, type: Boolean },
-        color: { required: false, type: String, default: null }
+        color: { required: false, type: String, default: null },
+        hoverColor: { required: false, type: String, default: null }
     },
     data() {
         return {
@@ -44,8 +42,13 @@ export default defineComponent({
                 ? `${this.href}`
                 : `${window.origin}/${this.href}`
         },
-        textColor(): string {
-            return this.color ?? 'dl-color-studio-secondary'
+        linkStyles(): Record<string, string> {
+            const textColor = this.color ?? 'dl-color-studio-secondary'
+            const hoverTextColor = this.hoverColor ?? textColor
+            return {
+                '--link-color': `var(--${textColor})`,
+                '--link-hover-color': `var(--${hoverTextColor})`
+            }
         },
         target(): string | null {
             if (!this.href) {
@@ -68,16 +71,19 @@ export default defineComponent({
 a {
     text-decoration: none;
     font-size: var(--dl-font-size-body);
+    color: var(--link-color) !important;
 }
 
 a:hover {
     text-decoration: underline;
     cursor: pointer;
+    color: var(--link-hover-color) !important;
 }
 
 .disabled {
     pointer-events: none;
     color: var(--dl-color-disabled) !important;
+    text-decoration: none !important;
 }
 
 .link-wrapper {

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

@@ -35,7 +35,7 @@ export default defineComponent({
         bold: Boolean,
         color: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         }
     },
     data() {

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"