@dataloop-ai/components 0.17.134 → 0.18.1

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/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: {

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

@@ -49,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"
@@ -66,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'
@@ -91,6 +110,11 @@ export default defineComponent({
             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)'

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

@@ -1,8 +1,8 @@
 <template>
     <div
         :id="uuid"
-        :class="rootContainerClasses"
         :style="cssVars"
+        :class="rootContainerClasses"
     >
         <div :class="wrapperClasses">
             <div
@@ -143,7 +143,7 @@
                             :key="item"
                             clickable
                             style="font-size: 12px"
-                            :is-highlighted="suggestIndex === highlightedIndex"
+                            :highlighted="suggestIndex === highlightedIndex"
                             @click="onClick($event, item)"
                         >
                             <span

package/src/components/compound/DlOptionGroup/components/MenuItemWrapper.vue

@@ -1,6 +1,6 @@
 <template>
     <dl-list-item
-        as="label"
+        type="label"
         clickable
         @click="emitClick"
     >
@@ -37,7 +37,7 @@ export default defineComponent({
 .menu-item-wrapper-section {
     display: flex;
     flex-direction: row-reverse;
-    justify-content: flex-start;
+    justify-content: flex-end;
     align-items: center;
 }
 

package/src/components/compound/DlRange/DlRange.vue

@@ -250,7 +250,7 @@ export default defineComponent({
                 props.disabled !== true
                     ? getColor(props.color, 'dl-color-secondary')
                     : 'var(--dl-color-separator)',
-            zIndex: state.focus.value === 'min' ? 2 : void 0
+            zIndex: state.focus.value === 'min' ? 2 : null
         }))
 
         const maxThumbStyle = computed(() => ({
@@ -261,7 +261,7 @@ export default defineComponent({
                 props.disabled !== true
                     ? getColor(props.color, 'dl-color-secondary')
                     : 'var(--dl-color-separator)',
-            zIndex: state.focus.value === 'max' ? 2 : void 0
+            zIndex: state.focus.value === 'max' ? 2 : null
         }))
 
         const minThumbRef = ref(null)

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -168,7 +168,7 @@ export default defineComponent({
         },
         styleModel: {
             type: Object as PropType<SyntaxColorSchema>,
-            default: () => {}
+            default: null
         },
         placeholder: {
             type: String,

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSuggestionsDropdown.vue

@@ -22,7 +22,7 @@
                     v-for="(item, suggestionIndex) in suggestions"
                     :key="item"
                     :clickable="true"
-                    :is-highlighted="suggestionIndex === highlightedIndex"
+                    :highlighted="suggestionIndex === highlightedIndex"
                     @click="handleOption(item)"
                 >
                     {{ item }}

package/src/components/compound/DlSearches/DlSmartSearch/utils/highlightSyntax.ts

@@ -94,12 +94,16 @@ function restoreSelection(
 function renderText(text: string) {
     const words = text?.split(/(\s+)/)
     const output = words?.map((word) => {
-        if (styleModel.keywords.values.includes(word)) {
-            return `<strong style='${SPAN_STYLES}; color:${styleModel.keywords.color}'>${word}</strong>`
-        } else if (styleModel.fields.values.includes(word)) {
-            return `<span style='color:${styleModel.fields.color}; ${SPAN_STYLES}'>${word}</span>`
-        } else if (styleModel.operators.values.includes(word)) {
-            return `<span style='color:${styleModel.operators.color}; ${SPAN_STYLES}'>${word}</span>`
+        if (styleModel) {
+            if (styleModel.keywords.values.includes(word)) {
+                return `<strong style='${SPAN_STYLES}; color:${styleModel.keywords.color}'>${word}</strong>`
+            } else if (styleModel.fields.values.includes(word)) {
+                return `<span style='color:${styleModel.fields.color}; ${SPAN_STYLES}'>${word}</span>`
+            } else if (styleModel.operators.values.includes(word)) {
+                return `<span style='color:${styleModel.operators.color}; ${SPAN_STYLES}'>${word}</span>`
+            } else {
+                return `<span style='${SPAN_STYLES}'>${word}</span>`
+            }
         } else {
             return `<span style='${SPAN_STYLES}'>${word}</span>`
         }

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

@@ -59,25 +59,23 @@
                 :class="selectClasses"
             >
                 <div
-                    v-show="hasPrepend || search"
+                    v-show="hasPrepend || searchable"
                     :class="[
                         ...adornmentClasses,
                         'adornment-container--pos-left'
                     ]"
                 >
-                    <dl-icon
-                        v-if="search"
-                        icon="icon-dl-search"
-                        :size="iconSize"
-                        color="dl-color-lighter"
-                    />
-                    <slot
-                        v-else
-                        name="prepend"
-                    />
+                    <slot name="prepend">
+                        <dl-icon
+                            v-if="searchable"
+                            icon="icon-dl-search"
+                            :size="iconSize"
+                            color="dl-color-lighter"
+                        />
+                    </slot>
                 </div>
                 <input
-                    v-if="search"
+                    v-if="searchable"
                     ref="searchInput"
                     class="select-search-input"
                     :style="!isExpanded ? 'display: none;' : 'width: 100%;'"
@@ -87,7 +85,7 @@
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
                 >
-                <dl-tooltip v-if="disabled">
+                <dl-tooltip v-if="disabled && disabledTooltip">
                     {{ disabledTooltip }}
                 </dl-tooltip>
                 <div
@@ -95,7 +93,7 @@
                     style="width: 100%"
                 >
                     <slot
-                        v-if="search ? !isExpanded : true"
+                        v-if="searchable ? !isExpanded : true"
                         :opt="selectedOption"
                         name="selected"
                     />
@@ -103,8 +101,8 @@
                 <template v-if="!hasSelectedSlot">
                     <span
                         v-show="
-                            (multiselect && !search) ||
-                                (multiselect && search && !isExpanded)
+                            (multiselect && !searchable) ||
+                                (multiselect && searchable && !isExpanded)
                         "
                         class="root-container--placeholder"
                     >
@@ -117,8 +115,8 @@
                     </span>
                     <span
                         v-show="
-                            (!multiselect && !search) ||
-                                (!multiselect && search && !isExpanded)
+                            (!multiselect && !searchable) ||
+                                (!multiselect && searchable && !isExpanded)
                         "
                         class="selected-label"
                     >
@@ -190,20 +188,16 @@
                         @update:model-value="selectAll"
                         @depth-change="handleDepthChange"
                     >
-                        <slot
-                            v-if="hasAllItemsSlot"
-                            name="all-items"
-                        />
-                        <template v-else>
+                        <slot name="all-items">
                             {{ computedAllItemsLabel }}
-                        </template>
+                        </slot>
                     </dl-select-option>
 
                     <!-- Virtual scroll -->
                     <dl-virtual-scroll
                         v-if="optionsCount > MAX_ITEMS_PER_LIST"
                         v-slot="{ item, index }"
-                        :items="options"
+                        :items="filteredOptions"
                         :virtual-scroll-item-size="28"
                         :virtual-scroll-sticky-size-start="28"
                         :virtual-scroll-sticky-size-end="20"
@@ -235,11 +229,9 @@
                             @deselected="handleDeselected"
                         >
                             <slot
-                                v-if="hasOptionSlot"
-                                :opt="item"
                                 name="option"
-                            />
-                            <template v-else>
+                                :opt="item"
+                            >
                                 {{
                                     capitalizedOptions
                                         ? typeof getOptionLabel(item) ===
@@ -247,13 +239,13 @@
                                             getOptionLabel(item).toLowerCase()
                                         : getOptionLabel(item)
                                 }}
-                            </template>
+                            </slot>
                         </dl-select-option>
                     </dl-virtual-scroll>
                     <!-- Else normal list -->
                     <div v-else>
                         <dl-select-option
-                            v-for="(option, optionIndex) in options"
+                            v-for="(option, optionIndex) in filteredOptions"
                             :key="getKeyForOption(option)"
                             clickable
                             :multiselect="multiselect"
@@ -328,7 +320,7 @@ import {
     DlItemSection,
     DlVirtualScroll
 } from '../../shared'
-import { defineComponent, isVue2, PropType, ref } from 'vue-demi'
+import { defineComponent, PropType, ref } from 'vue-demi'
 import {
     getLabel,
     getIconSize,
@@ -372,7 +364,8 @@ export default defineComponent({
         width: { type: String, default: '100%' },
         withoutBorders: { type: Boolean, default: false },
         title: { type: String, default: '' },
-        search: { type: Boolean, default: false },
+        searchable: { type: Boolean, default: false },
+        customFilter: { type: Boolean, default: false },
         required: { type: Boolean, default: false },
         optional: { type: Boolean, default: false },
         fitContent: Boolean,
@@ -420,6 +413,7 @@ export default defineComponent({
         const selectedIndex = ref(-1)
         const highlightedIndex = ref(-1)
         const isEmpty = ref(true)
+        const searchTerm = ref('')
         const searchInputValue = ref('')
         const MAX_ITEMS_PER_LIST = 100 // HARDCODED - max items per list before virtual scroll
 
@@ -450,10 +444,26 @@ export default defineComponent({
             setHighlightedIndex,
             handleSelectedItem,
             handleModelValueUpdate,
+            searchTerm, // todo: merge this sometime
             searchInputValue
         }
     },
     computed: {
+        filteredOptions(): DlSelectOptionType[] {
+            if (this.customFilter || this.searchTerm === '') {
+                return this.options
+            }
+
+            return this.options.filter((option) => {
+                const label = getLabel(option)
+                return (
+                    label &&
+                    label
+                        .toLowerCase()
+                        .includes(this.searchTerm.toLowerCase().trim())
+                )
+            })
+        },
         optionsCount(): number {
             return this.options?.length ?? 0
         },
@@ -521,24 +531,12 @@ export default defineComponent({
             return getIconSize(this.size)
         },
         hasOptionSlot(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots.option
-            }
             return !!this.$slots.option
         },
         hasAllItemsSlot(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots['all-items']
-            }
             return !!this.$slots['all-items']
         },
         hasSelectedSlot(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots.selected
-            }
             return !!this.$slots.selected
         },
         computedPlaceholder(): string {
@@ -562,22 +560,18 @@ export default defineComponent({
                 : this.options[this.selectedIndex]
         },
         hasBeforeOptions(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots['before-options']
-            }
             return !!this.$slots['before-options']
         },
         hasAfterOptions(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots['after-options']
-            }
             return !!this.$slots['after-options']
         },
         noOptions(): boolean {
             if (Array.isArray(this.options)) {
-                return this.options.length === 0
+                if (this.customFilter) {
+                    return this.options.length === 0
+                }
+
+                return this.filteredOptions.length === 0
             }
             return true
         },
@@ -599,7 +593,10 @@ export default defineComponent({
             if (this.withoutBorders) {
                 classes.push('dl_select__select--without-border')
             }
-            if (this.hasPrepend || this.search) {
+            if (this.withoutBorders && this.hasPrepend) {
+                classes.push('dl_select__select--without-border__with-prepend')
+            }
+            if (this.hasPrepend || this.searchable) {
                 classes.push('dl_select__select--prepend')
                 classes.push('dl_select__select--both-adornments')
             }
@@ -646,10 +643,6 @@ export default defineComponent({
             )
         },
         hasPrepend(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots.prepend && !this.isSmall
-            }
             return !!this.$slots.prepend && !this.isSmall
         },
         chevronIconColor(): string {
@@ -658,7 +651,7 @@ export default defineComponent({
     },
     watch: {
         isExpanded(newVal: boolean) {
-            if (this.search) {
+            if (this.searchable) {
                 if (newVal) {
                     const inputRef = this.$refs.searchInput as HTMLInputElement
                     this.$nextTick(() => {
@@ -793,7 +786,7 @@ export default defineComponent({
                     ? undefined
                     : this.options[this.selectedIndex]
 
-            if (this.search) {
+            if (this.searchable) {
                 const searchInput = this.$refs.searchInput as HTMLInputElement
                 searchInput.value =
                     typeof selectedOption === 'string'
@@ -810,11 +803,18 @@ export default defineComponent({
             this.handleModelValueUpdate(valueToEmit)
         },
         handleSearchInput(e: Event): void {
-            if (this.search) {
-                this.$emit(
-                    'filter',
-                    (e.target as HTMLInputElement).value.trim()
-                )
+            if (this.searchable) {
+                if (this.customFilter) {
+                    this.$emit(
+                        'filter',
+                        (e.target as HTMLInputElement).value.trim()
+                    )
+                } else {
+                    this.searchTerm = (
+                        e.target as HTMLInputElement
+                    ).value.trim()
+                }
+
                 this.showAllItems =
                     (e.target as HTMLInputElement).value.trim() === ''
 
@@ -842,7 +842,7 @@ export default defineComponent({
             return html
         },
         handleSearchBlur(e: Event): void {
-            if (this.search) {
+            if (this.searchable) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 this.$nextTick(() => {
                     inputRef?.focus({})
@@ -858,13 +858,14 @@ export default defineComponent({
             if (!this.preserveSearch) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 if (inputRef) inputRef.value = ''
+                this.searchTerm = ''
                 this.$emit('filter', '')
             }
         },
         getLabel,
         onMenuOpen(): void {
             this.$emit('before-show')
-            if (this.search) {
+            if (this.searchable) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 this.$nextTick(() => {
                     inputRef?.focus({})
@@ -900,7 +901,7 @@ export default defineComponent({
         align-items: center;
     }
     &--placeholder {
-        color: var(--placeholder-color);
+        color: var(--dl-select-palceholder-color, --placeholder-color);
     }
 
     .dl-select__title-container {
@@ -916,7 +917,7 @@ export default defineComponent({
     }
 
     .selected-label {
-        color: var(--placeholder-color);
+        color: var(--dl-select-palceholder-color, --placeholder-color);
     }
 
     .dl-select__title {
@@ -1030,6 +1031,13 @@ export default defineComponent({
                 height: 100%;
             }
             height: auto;
+
+            &__with-prepend {
+                padding-left: 30px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                width: calc(80% - var(--dl-select-expand-icon-width));
+            }
         }
 
         &::placeholder {

package/src/components/compound/DlSlider/components/DlSliderBase.vue

@@ -350,12 +350,12 @@ export default defineComponent({
         },
         onPan(event: any): void {
             if (event.isFinal === true) {
-                if (this.dragging !== void 0) {
+                if (this.dragging) {
                     this.updatePosition(event.evt)
                     if (event.touch === true) {
                         this.updateValue(true)
                     }
-                    this.dragging = void 0
+                    this.dragging = null
                     this.$emit('pan', 'end')
                 }
                 this.active = false

package/src/components/compound/DlSlider/useSlider.ts

@@ -215,13 +215,13 @@ export default function ({
 
     function onPan(event: any) {
         if (event.isFinal === true) {
-            if (dragging.value !== void 0) {
+            if (dragging.value) {
                 updatePosition(event.evt)
                 // only if touch, because we also have mousedown/up:
                 if (event.touch === true) {
                     updateValue(true)
                 }
-                dragging.value = void 0
+                dragging.value = null
                 emit('pan', 'end')
             }
             active.value = false