@dataloop-ai/components 0.13.18 → 0.14.3

package/src/components/DlChip/DlChip.vue

@@ -1,7 +1,7 @@
 <template>
     <div
+        v-if="isVisible"
         :id="uuid"
-        ref="dlChipRef"
         :tabindex="tabIndex"
         class="dl-chip"
         :style="cssChipVars"
@@ -17,16 +17,27 @@
                 :icon="icon"
             />
         </span>
-        <slot>
-            {{ hasLabel ? label : null }}
-        </slot>
         <dl-tooltip v-if="overflow && isOverflowing">
             {{ label }}
         </dl-tooltip>
+        <div
+            v-if="hasLabelSlot || hasLabel"
+            class="dl-chip--content"
+        >
+            <div
+                ref="dlChipRef"
+                class="dl-chip--ellipsis"
+            >
+                <slot>
+                    {{ hasLabel ? label : null }}
+                </slot>
+            </div>
+        </div>
+
         <span
             v-if="removable"
             class="dl-chip-remove-icon-container"
-            @click="onRemove"
+            @click="remove"
         >
             <dl-icon
                 class="dl-chip-remove-icon"
@@ -94,10 +105,12 @@ export default defineComponent({
     },
     emits: ['remove'],
     setup() {
+        const isVisible = ref(true)
         const dlChipRef = ref(null)
         const { hasEllipsis } = useSizeObserver(dlChipRef)
 
         return {
+            isVisible,
             uuid: `dl-chip-${v4()}`,
             dlChipRef,
             isOverflowing: hasEllipsis
@@ -111,6 +124,9 @@ export default defineComponent({
                 this.label !== ''
             )
         },
+        hasLabelSlot(): boolean {
+            return !!this.$slots['default']
+        },
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },
@@ -167,9 +183,10 @@ export default defineComponent({
         }
     },
     methods: {
-        onRemove(e: Event) {
+        remove(e: Event) {
             if (!this.disabled) {
-                this.$emit('remove', this.label)
+                this.isVisible = false
+                this.$emit('remove')
             }
         }
     }
@@ -179,6 +196,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-chip {
     position: relative;
+    display: flex;
     vertical-align: middle;
     text-transform: var(--dl-chip-text-transform);
     font-size: var(--dl-font-size-body);
@@ -189,19 +207,27 @@ export default defineComponent({
     min-width: 18px; // +2px from borders
     max-height: 18px; // +2px from borders
     min-height: 12px;
-    height: fit-content;
     max-width: var(--dl-chip-max-width);
-    width: fit-content;
     color: var(--dl-chip-text-color);
     background-color: var(--dl-chip-bg-color);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     border: var(--dl-chip-border);
     &::first-letter,
     & > *::first-letter {
         text-transform: capitalize;
     }
+
+    &--content {
+        cursor: default;
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    &--ellipsis {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
 }
 .dl-chip-remove-icon-container {
     cursor: var(--dl-chip-left-icon-cursor);
@@ -223,7 +249,7 @@ export default defineComponent({
 
 .dl-chip-left-icon-container {
     @extend .dl-chip-remove-icon-container;
-    cursor: text;
+    cursor: default;
     left: 0;
     width: 18px;
     &:active {
@@ -240,5 +266,6 @@ export default defineComponent({
 
 .dl-chip-remove-icon {
     color: var(--dl-chip-text-color);
+    display: flex !important;
 }
 </style>

package/src/components/DlCounters.vue

@@ -1,7 +1,8 @@
 <template>
     <div
         :id="uuid"
-        class="container"
+        class="dl-counters-container"
+        :style="cssVars"
     >
         <ul>
             <li
@@ -11,7 +12,11 @@
             >
                 <div :class="computeClass('item-content')">
                     <p :class="computeClass('item-value')">
-                        {{ item.value }}
+                        {{
+                            abbreviateNumbers
+                                ? abbreviateNumber(item.value)
+                                : item.value
+                        }}
                     </p>
                     <p
                         v-show="item.text"
@@ -35,6 +40,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
+import { abbreviateToString } from '../utils/abbreviate-to-string'
 
 interface CounterItem {
     value?: number
@@ -49,12 +55,20 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        spacing: {
+            type: String,
+            default: '30px'
+        },
         items: {
             type: Array as PropType<CounterItem[]>,
             default: (): CounterItem[] => [],
             validator(value: CounterItem[]): boolean {
                 return value.length <= 8
             }
+        },
+        abbreviateNumbers: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -62,10 +76,20 @@ export default defineComponent({
             uuid: `dl-counters-${v4()}`
         }
     },
+    computed: {
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-counter-spacing': this.spacing
+            }
+        }
+    },
     methods: {
         capitalize(value: string): string {
             return value[0].toUpperCase() + value.slice(1)
         },
+        abbreviateNumber(nr: number) {
+            if (nr) return abbreviateToString(nr)
+        },
         computeClass(value: string): (string | boolean)[] {
             return [value, this.small && `${value}--small`]
         }
@@ -74,7 +98,7 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.container {
+.dl-counters-container {
     padding: 10px;
     width: fit-content;
 }
@@ -96,12 +120,12 @@ ul {
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding-left: 30px;
-        padding-right: 30px;
+        padding-left: var(--dl-counter-spacing);
+        padding-right: var(--dl-counter-spacing);
 
         &--small {
-            padding-left: 20px;
-            padding-right: 20px;
+            padding-left: var(--dl-counter-spacing);
+            padding-right: var(--dl-counter-spacing);
         }
     }
 

package/src/components/DlDatePicker/DlCalendar.vue

@@ -47,6 +47,7 @@
                 @mouseenter="handleMouseEnter(date)"
             >
                 <div
+                    v-if="!date.isDisabled"
                     class="dl-calendar--inner_day"
                     :style="getInnerDayStyle(date)"
                 >
@@ -135,27 +136,37 @@ export default defineComponent({
             if (this.modelValue === null) return
 
             const style: Record<string, any> = {}
+            if (value.isDisabled) return style
 
             const from = new CalendarDate(this.modelValue.from)
             const to = new CalendarDate(this.modelValue.to)
 
             if (!from.isSameOrAfter(to, 'date')) {
-                const bgColor = 'rgba(52, 82, 255, 0.1)'
+                const bgColor = 'var(--dl-date-picker-selected-strip)'
 
-                if (value.isAfter(from, 'date') && value.isBefore(to, 'date')) {
+                if (value.isAfter(from, 'day') && value.isBefore(to, 'day')) {
                     style.background = bgColor
-                } else if (value.isSame(from, 'date')) {
+                } else if (value.isSame(from, 'day')) {
                     style.background = `linear-gradient(to right, transparent 50%, ${bgColor} 50%)`
-                } else if (value.isSame(to, 'date')) {
+                } else if (value.isSame(to, 'day')) {
                     style.background = `linear-gradient(to right, ${bgColor} 50%, transparent 50%)`
                 }
 
                 const radius = '11px'
+                const valueClone = value.clone()
 
-                if (value.day() === 0) {
+                if (
+                    value.day() === 0 ||
+                    value.isSame(valueClone.startOf('month'), 'day')
+                ) {
                     style.borderTopLeftRadius = radius
                     style.borderBottomLeftRadius = radius
-                } else if (value.day() === DAYS_IN_WEEK - 1) {
+                }
+
+                if (
+                    value.day() === DAYS_IN_WEEK - 1 ||
+                    value.isSame(valueClone.endOf('month'), 'day')
+                ) {
                     style.borderTopRightRadius = radius
                     style.borderBottomRightRadius = radius
                 }
@@ -166,8 +177,10 @@ export default defineComponent({
 
         getInnerDayStyle(value: Partial<CalendarDate>) {
             let style: Record<string, any> = {}
-            const disabledOpacity = 0.6
 
+            if (value.isDisabled) return style
+
+            const disabledOpacity = 0.6
             const isToday = value.isSame(
                 new CalendarDate().startOf('day'),
                 'day'
@@ -198,14 +211,13 @@ export default defineComponent({
                 const to = new CalendarDate(this.modelValue.to)
 
                 const isIntervalBoundary =
-                    value.isSame(from, 'date') || value.isSame(to, 'date')
+                    value.isSame(from, 'day') || value.isSame(to, 'day')
 
                 if (isIntervalBoundary && this.disabled) {
                     style = {
                         ...style,
                         ...selectedStyle,
-                        opacity: disabledOpacity,
-                        color: 'var(--dl-color-disabled)'
+                        opacity: disabledOpacity
                     }
                 } else if (isIntervalBoundary) {
                     style = {

package/src/components/DlDatePicker/DlDatePicker.vue

@@ -253,11 +253,13 @@ export default defineComponent({
             if (!this.isSelectionMode) return
 
             if (this.type === 'day') {
-                if (
-                    this.calendarTo?.dates[
-                        this.calendarTo?.dates.length - 1
-                    ].isSame(new CalendarDate(date))
-                ) {
+                const calendarDateClone = this.calendarTo?.activeDate.clone()
+
+                const isLastDayOfTheMonth = calendarDateClone
+                    .endOf('month')
+                    .isSame(new CalendarDate(date), 'day')
+
+                if (isLastDayOfTheMonth) {
                     if (this.timeout) {
                         clearTimeout(this.timeout)
                     }
@@ -293,6 +295,7 @@ export default defineComponent({
     }
 })
 </script>
+
 <style lang="scss" scoped>
 .dl-date-picker {
     user-select: none;

package/src/components/DlDateTimeRange/types.ts

@@ -12,7 +12,7 @@ export const DAY_SIDEBAR_OPTION = {
 } as const
 
 export type DAY_SIDEBAR_OPTION =
-    typeof DAY_SIDEBAR_OPTION[keyof typeof DAY_SIDEBAR_OPTION]
+    (typeof DAY_SIDEBAR_OPTION)[keyof typeof DAY_SIDEBAR_OPTION]
 
 export const MONTH_SIDEBAR_OPTION = {
     this_month: 'this_month',
@@ -25,7 +25,7 @@ export const MONTH_SIDEBAR_OPTION = {
 } as const
 
 export type MONTH_SIDEBAR_OPTION =
-    typeof MONTH_SIDEBAR_OPTION[keyof typeof MONTH_SIDEBAR_OPTION]
+    (typeof MONTH_SIDEBAR_OPTION)[keyof typeof MONTH_SIDEBAR_OPTION]
 
 export type DayTypeOption = {
     title: string

package/src/components/DlDialogBox/DlDialogBox.vue

@@ -188,14 +188,6 @@ export default defineComponent({
         height: 100vh !important;
         border-radius: 0px;
     }
-    &--right {
-        position: absolute !important;
-        right: 0;
-    }
-    &--left {
-        position: absolute !important;
-        left: 0;
-    }
 }
 
 .header {

package/src/components/DlDialogBox/DlDialogBoxHeader.vue

@@ -10,21 +10,11 @@
                 style="padding: 0; margin-bottom: 10px"
                 @click.stop.prevent="$emit('onClose')"
             />
-            <h2
-                v-if="hasTitle"
-                class="title"
-            >
-                <slot name="title">
-                    {{ title }}
-                </slot>
+            <h2 class="title">
+                {{ title }}
             </h2>
-            <p
-                v-if="hasSubtitle"
-                class="subtitle"
-            >
-                <slot name="subtitle">
-                    {{ subtitle }}
-                </slot>
+            <p class="subtitle">
+                {{ subtitle }}
             </p>
         </div>
         <dl-button
@@ -40,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue-demi'
+import { defineComponent } from 'vue-demi'
 import { DlButton } from '../DlButton'
 
 export default defineComponent({
@@ -54,12 +44,7 @@ export default defineComponent({
         closeButton: { type: Boolean, default: true },
         hasBackButton: Boolean
     },
-    emits: ['onClose'],
-    setup(props, { slots }) {
-        const hasTitle = computed(() => !!props.title || !!slots.title)
-        const hasSubtitle = computed(() => !!props.subtitle || !!slots.subtitle)
-        return { hasTitle, hasSubtitle }
-    }
+    emits: ['onClose']
 })
 </script>
 
@@ -75,7 +60,6 @@ export default defineComponent({
     font-size: var(--dl-font-size-h2);
     margin: 0;
     color: var(--dl-color-darker);
-    line-height: 2rem !important;
 }
 
 .subtitle {

package/src/components/DlDropdownButton.vue

@@ -78,7 +78,7 @@
             :class="contentClass"
             :style="contentStyle"
             :cover="cover"
-            :fit="fit"
+            fit
             :persistent="persistent"
             :auto-close="autoClose"
             :anchor="menuAnchor"
@@ -142,7 +142,7 @@
             :class="contentClass"
             :style="contentStyle"
             :cover="cover"
-            :fit="fit"
+            fit
             :persistent="persistent"
             :auto-close="autoClose"
             :anchor="menuAnchor"
@@ -227,8 +227,7 @@ export default defineComponent({
         flat: Boolean,
         uppercase: Boolean,
         outlined: Boolean,
-        padding: { type: String, default: '5px' },
-        fit: { type: Boolean, default: true }
+        padding: { type: String, default: '5px' }
     },
     emits: [
         'update:model-value',
@@ -350,6 +349,19 @@ export default defineComponent({
             }
         }
 
+        // expose public methods
+        Object.assign(proxy, {
+            show,
+            hide,
+            toggle,
+            onClickHide,
+            onClick,
+            onBeforeShow,
+            onShow,
+            onBeforeHide,
+            onHide
+        })
+
         onMounted(() => {
             if (props.modelValue) {
                 show()

package/src/components/DlPagination/RowsSelector.vue

@@ -1,7 +1,14 @@
 <template>
     <div class="dl-pagination--rows_selector">
         <span class="dl-pagination--rows_per_page_label">{{ itemsName }} per page:</span>
+        <dl-typography
+            v-if="hasSingeValue"
+            color="dl-color-darker"
+        >
+            {{ modelValue }}
+        </dl-typography>
         <dl-select
+            v-else
             size="s"
             :options="options"
             :disabled="disabled"
@@ -19,11 +26,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
 import { DlSelect } from '../DlSelect'
+import DlTypography from '../DlTypography.vue'
 
 export default defineComponent({
     name: 'RowsSelector',
     components: {
-        DlSelect
+        DlSelect,
+        DlTypography
     },
     model: {
         prop: 'modelValue',
@@ -45,6 +54,11 @@ export default defineComponent({
         disabled: Boolean
     },
     emits: ['update:modelValue'],
+    computed: {
+        hasSingeValue() {
+            return this.options.length <= 1
+        }
+    },
     methods: {
         setSelectedItem(val: number) {
             this.$emit('update:modelValue', val)

package/src/components/DlRange/DlRange.vue

@@ -98,6 +98,7 @@ import { v4 } from 'uuid'
 type DlRangeModelValue = {
     min: number | null
     max: number | null
+    both?: boolean
 }
 
 interface DlRangeProps extends SliderProps {
@@ -234,7 +235,7 @@ export default defineComponent({
             return evt
         })
 
-        function getEvents(side: 'min' | 'max') {
+        function getEvents(side: 'min' | 'max' | 'both') {
             return isMobile !== true && state.editable.value === true
                 ? {
                       onFocus: () => {
@@ -385,7 +386,7 @@ export default defineComponent({
                 evt,
                 {
                     step: state.step.value,
-                    focus: state.focus.value,
+                    focus: state.focus.value as 'min' | 'max',
                     decimals: state.decimals.value
                 },
                 { min: props.min, max: props.max },

package/src/components/DlSearch.vue

@@ -55,7 +55,7 @@ const SearchSizes = {
     l: 'l',
     m: 'm'
 } as const
-type TSearchSizes = typeof SearchSizes[keyof typeof SearchSizes]
+type TSearchSizes = (typeof SearchSizes)[keyof typeof SearchSizes]
 
 export default defineComponent({
     name: 'DlSearch',

package/src/components/DlSelect/DlSelect.vue

@@ -76,7 +76,6 @@
                     class="select-search-input"
                     :style="!isExpanded ? 'display: none;' : 'width: 100%;'"
                     :disabled="disabled"
-                    :readonly="readonly"
                     @input="handleSearchInput"
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
@@ -140,7 +139,7 @@
                 no-focus
                 :offset="[0, 3]"
                 style="border-radius: 0"
-                :disabled="disabled || readonly"
+                :disabled="disabled"
                 @show="onMenuOpen"
                 @hide="closeMenu"
             >
@@ -310,7 +309,6 @@ export default defineComponent({
         errorMessage: { type: String, default: '' },
         error: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
-        readonly: { type: Boolean, default: false },
         emitValue: { type: Boolean, default: false }, // We emit the value from the option and compare with it as a modelvalue
         options: {
             type: Array as PropType<SelectOptionType[]>,
@@ -499,9 +497,6 @@ export default defineComponent({
             if (this.disabled) {
                 classes.push('dl_select__select--disabled')
             }
-            if (this.readonly) {
-                classes.push('dl_select__select--readonly')
-            }
             if (this.isExpanded) {
                 classes.push('dl_select__select--focused')
             }
@@ -723,7 +718,6 @@ export default defineComponent({
             if (!this.preserveSearch) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 if (inputRef) inputRef.value = ''
-                this.$emit('filter', '')
             }
         },
         getLabel,
@@ -907,18 +901,6 @@ export default defineComponent({
                 pointer-events: none;
             }
         }
-
-        &--readonly {
-            border-color: var(--dl-color-separator);
-            cursor: text;
-
-            &:hover {
-                border-color: var(--dl-color-separator);
-            }
-            & input {
-                pointer-events: none;
-            }
-        }
     }
 
     .selected {

package/src/components/DlSlider/sliderStyles.scss

@@ -56,6 +56,10 @@
   .readonly {
     cursor: auto;
   }
+
+  #slider-input {
+    padding: 3px 5px;
+  }
 }
 
 .slider {