@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlCodeEditor/types.ts

@@ -0,0 +1,21 @@
+export enum DlCodeEditorTheme {
+    Dark = 'atom-one-dark',
+    Light = 'atom-one-light',
+    ATOM_ONE_DARK = 'atom-one-dark',
+    ATOM_ONE_LIGHT = 'atom-one-light',
+    DRACULA = 'dracula',
+    GITHUB = 'github',
+    GITHUB_DARK = 'github-dark',
+    VS = 'vs',
+    VS_DARK = 'vs2015'
+}
+
+export interface DlCodeEditorOptions {
+    fontSize?: number
+    tabSpaces?: number
+    textWrapping?: boolean
+    hideHeader?: boolean
+    hideCopyButton?: boolean
+    lineNumbers?: boolean
+    hideLanguage?: boolean
+}

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

@@ -103,6 +103,10 @@ export default defineComponent({
             type: Object as PropType<Partial<DateInterval> | null>,
             default: null
         },
+        singleSelection: {
+            type: Boolean,
+            default: false
+        },
         normalizeCalendars: Boolean,
         disabled: Boolean
     },
@@ -245,7 +249,11 @@ export default defineComponent({
 
             this.dateInterval = { from: date, to: date }
 
-            this.isSelectionMode = true
+            if (this.singleSelection) {
+                this.isSelectionMode = true
+            } else {
+                this.updateModelValue(this.dateInterval)
+            }
         },
 
         handleMouseenter(date: Date) {

package/src/components/compound/DlDateTime/DlDatePicker/components/DlCalendar.vue

@@ -190,6 +190,7 @@ export default defineComponent({
                     new CustomDate(value.toString())
                 )
             ) {
+                style.cursor = 'not-allowed'
                 if (isToday && this.disabled) {
                     style.color = 'var(--dl-color-secondary)'
                     style.opacity = disabledOpacity
@@ -200,7 +201,7 @@ export default defineComponent({
                 }
             } else if (this.modelValue !== null) {
                 const selectedStyle = {
-                    backgroundColor: 'var(--dl-date-picker-selected-date)',
+                    backgroundColor: 'var(--dl-color-secondary)',
                     color: 'var(--dl-color-text-buttons)',
                     borderRadius: '11px'
                 }
@@ -215,7 +216,8 @@ export default defineComponent({
                     style = {
                         ...style,
                         ...selectedStyle,
-                        opacity: disabledOpacity
+                        opacity: disabledOpacity,
+                        backgroundColor: 'var(--dl-date-picker-selected-date)'
                     }
                 } else if (isIntervalBoundary) {
                     style = {

package/src/components/compound/DlDateTime/DlDatePicker/components/DlMonthCalendar.vue

@@ -152,7 +152,8 @@ export default defineComponent({
             if (!isInRange(this.availableRange, d)) {
                 style = {
                     'border-color': 'var(--dl-color-disabled)',
-                    color: 'var(--dl-color-disabled)'
+                    color: 'var(--dl-color-disabled)',
+                    cursor: 'not-allowed'
                 }
             } else if (this.modelValue !== null) {
                 const from = new CalendarDate(this.modelValue.from)

package/src/components/compound/DlDateTime/DlDateTimeRange/{DlCardSidebar.vue → CardSidebar.vue}

@@ -1,21 +1,20 @@
 <template>
-    <div class="dl-card-sidebar">
-        <div class="dl-card-sidebar--header">
+    <div class="card-sidebar">
+        <div class="card-sidebar--header">
             <span>Select by</span>
         </div>
-        <div class="dl-card-sidebar--content">
+        <div class="card-sidebar--content">
             <div
                 v-for="option in options"
                 :key="option.key"
-                class="dl-card-sidebar--item"
+                class="card-sidebar--item"
                 :class="{
-                    'dl-card-sidebar--item-active':
-                        option.key === currentOption,
-                    'dl-card-sidebar--item-disabled': option.disabled
+                    'card-sidebar--item-active': option.key === currentOption,
+                    'card-sidebar--item-disabled': option.disabled
                 }"
                 @click="handleClick(option)"
             >
-                <div class="dl-card-sidebar--focus_helper" />
+                <div class="card-sidebar--focus_helper" />
                 {{ capitalizeFirstLetter(option.title) }}
             </div>
         </div>
@@ -49,7 +48,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss" scoped>
-.dl-card-sidebar {
+.card-sidebar {
     display: flex;
     flex-direction: column;
     text-align: left;
@@ -101,8 +100,8 @@ export default defineComponent({
     }
 }
 
-.dl-card-sidebar--item:not(.dl-card-sidebar--item-disabled):hover {
-    .dl-card-sidebar--focus_helper {
+.card-sidebar--item:not(.card-sidebar--item-disabled):hover {
+    .card-sidebar--focus_helper {
         opacity: 0.15;
     }
 }

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

@@ -3,7 +3,7 @@
         :id="uuid"
         class="dl-date-time-range"
     >
-        <dl-date-input
+        <date-input
             :text="dateInputText"
             :input-style="dateInputStyle"
             :disabled="disabled"
@@ -20,13 +20,13 @@
                         v-if="mode === 'multi'"
                         class="dl-date-time-range--card_sidebar"
                     >
-                        <dl-card-sidebar
+                        <card-sidebar
                             v-if="typeState === 'day'"
                             :options="sidebarDayOptions"
                             :current-option="currentSidebarOption"
                             @click="handleDayTypeOptionClick"
                         />
-                        <dl-card-sidebar
+                        <card-sidebar
                             v-else
                             :options="sidebarMonthOptions"
                             :current-option="currentSidebarOption"
@@ -54,13 +54,13 @@
                     </div>
                 </div>
             </dl-menu>
-        </dl-date-input>
+        </date-input>
     </div>
 </template>
 <script lang="ts">
 import { DlTimePicker } from '../DlTimePicker'
 import { DateInterval } from '../types'
-import DlCardSidebar from './DlCardSidebar.vue'
+import CardSidebar from './CardSidebar.vue'
 import {
     DayTypeOption,
     DAY_SIDEBAR_OPTION,
@@ -70,7 +70,7 @@ import {
 import { CustomDate } from '../DlDatePicker/models/CustomDate'
 import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
 import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
-import DlDateInput from './DlDateInput.vue'
+import DateInput from './DateInput.vue'
 import { DlMenu } from '../../../essential'
 import { defineComponent, PropType } from 'vue-demi'
 import { isInRange } from '../DlDatePicker/utils'
@@ -78,10 +78,10 @@ import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
-        DlCardSidebar,
+        CardSidebar,
         DlDatePicker,
         DlTimePicker,
-        DlDateInput,
+        DateInput,
         DlMenu
     },
     model: {
@@ -416,7 +416,16 @@ export default defineComponent({
             this.$emit('set-type', value)
         },
         updateDateInterval(value: DateInterval | null) {
-            this.dateInterval = value
+            this.dateInterval = {
+                from: value.from,
+                to: new Date(
+                    value.from.getFullYear(),
+                    value.from.getMonth(),
+                    value.from.getDate(),
+                    23,
+                    59
+                )
+            }
             this.$emit('update:modelValue', value)
             this.$emit('change', value)
         },

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

@@ -128,7 +128,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .dl-time-picker {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     border-top: 1px solid var(--dl-color-separator);
     padding: 15px 30px;
@@ -138,7 +138,7 @@ export default defineComponent({
         display: flex;
         justify-content: center;
         align-items: center;
-        min-width: 220px;
+        min-width: 130px;
 
         span {
             font-size: 12px;

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

@@ -24,14 +24,16 @@
                     'dialog-wrapper--right': position === 'right',
                     'dialog-wrapper--left': position === 'left'
                 }"
+                @mouseenter="visibleDragIcon = true"
+                @mouseleave="visibleDragIcon = false"
             >
                 <dl-icon
                     v-if="draggable"
-                    :style="{ cursor: draggableOptions.draggableCursor }"
+                    :style="iconStyles"
                     class="dialog-wrapper--draggable-icon"
                     color="dl-color-medium"
                     icon="icon-dl-drag"
-                    size="15px"
+                    size="12px"
                     @mousedown="startDragElement"
                 />
                 <div
@@ -47,7 +49,24 @@
                         'content--fullheight': fullHeight
                     }"
                 >
-                    <slot name="body" />
+                    <slot
+                        v-if="!isEmpty"
+                        name="body"
+                    />
+                    <dl-empty-state
+                        v-if="isEmpty"
+                        v-bind="emptyStateProps"
+                    >
+                        <template
+                            v-for="(_, slot) in $slots"
+                            #[slot]="props"
+                        >
+                            <slot
+                                :name="slot"
+                                v-bind="props"
+                            />
+                        </template>
+                    </dl-empty-state>
                 </div>
                 <div
                     v-if="hasFooter"
@@ -64,11 +83,13 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import DlIcon from '../../essential/DlIcon/DlIcon.vue'
+import { DlEmptyStateProps } from '../../basic/DlEmptyState/types'
+import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
 import { throttle } from 'lodash'
 
 export default defineComponent({
     name: 'DlDialogBox',
-    components: { DlIcon },
+    components: { DlIcon, DlEmptyState },
     model: {
         prop: 'modelValue',
         event: 'update:modelValue'
@@ -88,10 +109,30 @@ export default defineComponent({
         draggable: {
             type: Boolean,
             default: false
+        },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: () => ({} as DlEmptyStateProps)
+        },
+        zIndex: {
+            type: [Number, String],
+            default: 'var(--dl-z-index-dialog)'
         }
     },
     emits: ['update:modelValue', 'hide', 'show'],
-    data() {
+    data(): {
+        uuid: string
+        show: boolean
+        draggableOptions: {
+            draggableX: number
+            draggableY: number
+            originalX: number
+            originalY: number
+            draggableCursor: string
+        }
+        visibleDragIcon: boolean
+    } {
         return {
             uuid: `dl-dialog-box-${v4()}`,
             show: this.modelValue,
@@ -101,7 +142,8 @@ export default defineComponent({
                 originalX: 0,
                 originalY: 0,
                 draggableCursor: 'pointer'
-            }
+            },
+            visibleDragIcon: false
         }
     },
     computed: {
@@ -112,7 +154,20 @@ export default defineComponent({
                     : 'rgba(0, 0, 0, 0.4)',
                 '--dl-dialog-separator': this.separators
                     ? '1px solid var(--dl-color-separator)'
-                    : 'none'
+                    : 'none',
+                '--dl-dialog-box-drag-icon-left': `${
+                    typeof this.width === 'string'
+                        ? parseInt(this.width)
+                        : this.width / 2
+                }px`,
+                '--dialog-z-index':
+                    `${this.zIndex}` ?? 'var(--dl-z-index-dialog)'
+            }
+        },
+        iconStyles(): Record<string, string> {
+            return {
+                cursor: this.draggableOptions.draggableCursor,
+                visibility: this.visibleDragIcon ? 'visible' : 'hidden'
             }
         },
         hasParent(): boolean {
@@ -198,7 +253,7 @@ export default defineComponent({
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: var(--dl-z-index-menu);
+    z-index: var(--dialog-z-index);
     overflow-x: hidden;
     overflow-y: hidden;
     text-align: start;
@@ -214,7 +269,9 @@ export default defineComponent({
     bottom: 0;
     left: 0;
     background-color: var(--dl-backdrop-color);
-    z-index: var(--dl-z-index-menu);
+    z-index: var(
+        --dialog-z-index
+    ); // todo: check if this should be overlay instead.
 }
 
 .dialog-wrapper {
@@ -226,7 +283,7 @@ export default defineComponent({
     border-radius: 2px;
     display: flex;
     flex-direction: column;
-    z-index: var(--dl-z-index-menu);
+    z-index: var(--dialog-z-index);
 
     &--fullscreen {
         margin: 0;
@@ -243,8 +300,8 @@ export default defineComponent({
 
     &--draggable-icon {
         position: absolute;
-        top: -1px;
-        left: 3px;
+        top: 2px;
+        left: var(--dl-dialog-box-drag-icon-left);
         cursor: pointer;
         transform: rotate(90deg);
     }
@@ -262,12 +319,13 @@ export default defineComponent({
 
 .header {
     display: flex;
-    padding: 16px;
+    padding: var(--dl-dialog-box-header-padding, 16px);
     border-bottom: var(--dl-dialog-separator);
+    height: var(--dl-dialog-box-header-height, 60px);
 }
 
 .content {
-    padding: var(--dl-dialog-box-content-padding, 10px 16px 30px 16px);
+    padding: var(--dl-dialog-box-content-padding, 20px 16px 30px 16px);
     overflow: auto;
     height: 100%;
 
@@ -281,7 +339,8 @@ export default defineComponent({
 
 .footer {
     display: flex;
-    padding: 16px;
+    padding: var(--dl-dialog-box-footer-padding, 20px 16px);
+    height: var(--dl-dialog-box-footer-height, 35px);
     border-top: var(--dl-dialog-separator);
 }
 

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

@@ -18,6 +18,6 @@ export default defineComponent({
     width: 100%;
     align-items: flex-start;
     justify-content: flex-end;
-    gap: 15px;
+    gap: 16px;
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="root-container">
-        <div>
+        <div style="width: 95%; height: 100%">
             <dl-button
                 v-if="hasBackButton"
                 dense
@@ -16,7 +16,7 @@
                 class="title"
             >
                 <slot name="title">
-                    {{ title }}
+                    <dl-ellipsis :text="title" />
                 </slot>
             </h2>
             <p
@@ -24,12 +24,13 @@
                 class="subtitle"
             >
                 <slot name="subtitle">
-                    {{ subtitle }}
+                    <dl-ellipsis :text="subtitle" />
                 </slot>
             </p>
         </div>
         <dl-button
             v-if="closeButton"
+            style="height: 100%; display: flex; align-items: start"
             class="close-button"
             icon="icon-dl-close"
             size="s"
@@ -43,11 +44,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue-demi'
 import { DlButton } from '../../../basic'
+import { DlEllipsis } from '../../../essential'
 
 export default defineComponent({
     name: 'DlDialogBoxHeader',
     components: {
-        DlButton
+        DlButton,
+        DlEllipsis
     },
     props: {
         title: { type: String, default: '' },
@@ -81,12 +84,11 @@ export default defineComponent({
 
 .subtitle {
     font-size: var(--dl-font-size-body);
-    margin: 3px 0 0 0;
     color: var(--dl-color-medium);
+    margin: 0;
 }
 
 .close-button {
-    margin-right: -6px;
-    margin-top: -6px;
+    margin-top: 5px;
 }
 </style>

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

@@ -115,7 +115,7 @@
                 disableDropdown === true
         "
         :disabled="disabled === true || disableMainButton === true"
-        :style="mainButtonStyle"
+        :style="[mainButtonStyle, cssVars]"
         :no-wrap="props.noWrap"
         :tooltip="tooltip"
         :max-width="maxWidth"
@@ -316,6 +316,14 @@ export default defineComponent({
             }
         })
 
+        const cssVars = computed(() => {
+            return {
+                '--justify-content': props.fluid
+                    ? 'space-between'
+                    : 'space-around'
+            }
+        })
+
         watch(
             () => props.modelValue,
             (val) => {
@@ -416,7 +424,8 @@ export default defineComponent({
             menuModel,
             props,
             setHighlightedIndex,
-            handleSelectedItem
+            handleSelectedItem,
+            cssVars
         }
     }
 })
@@ -456,7 +465,7 @@ export default defineComponent({
     &--separator {
         position: absolute;
         left: 0;
-        width: 1px;
+        width: 0.7px;
         height: 60%;
     }
 
@@ -467,7 +476,7 @@ export default defineComponent({
         &__title {
             display: flex;
             align-items: center;
-            justify-content: space-around;
+            justify-content: var(--justify-content);
             text-align: center;
             padding: 0;
             flex: 10000 1 0%;