@dataloop-ai/components 0.13.19 → 0.14.4

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

@@ -78,7 +78,8 @@
             :class="contentClass"
             :style="contentStyle"
             :cover="cover"
-            :fit="fit"
+            fit-container
+            :fit-content="fitContent"
             :persistent="persistent"
             :auto-close="autoClose"
             :anchor="menuAnchor"
@@ -142,7 +143,8 @@
             :class="contentClass"
             :style="contentStyle"
             :cover="cover"
-            :fit="fit"
+            fit-container
+            :fit-content="fitContent"
             :persistent="persistent"
             :auto-close="autoClose"
             :anchor="menuAnchor"
@@ -228,7 +230,7 @@ export default defineComponent({
         uppercase: Boolean,
         outlined: Boolean,
         padding: { type: String, default: '5px' },
-        fit: { type: Boolean, default: true }
+        fitContent: Boolean
     },
     emits: [
         'update:model-value',

package/src/components/DlMenu/DlMenu.vue

@@ -98,7 +98,8 @@ export default defineComponent({
 
         noRefocus: Boolean,
 
-        fit: Boolean,
+        fitContainer: Boolean,
+        fitContent: Boolean,
         cover: Boolean,
 
         square: Boolean,
@@ -358,7 +359,8 @@ export default defineComponent({
                 anchorOrigin: anchorOrigin.value,
                 selfOrigin: selfOrigin.value,
                 absoluteOffset,
-                fit: props.fit,
+                fitContainer: props.fitContainer,
+                fitContent: props.fitContent,
                 cover: props.cover,
                 maxHeight: props.maxHeight,
                 maxWidth: props.maxWidth

package/src/components/DlPagination/RowsSelector.vue

@@ -1,11 +1,17 @@
 <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"
-            :fit="false"
             width="min-content"
             align-right
             disable-dropdown-icon-padding
@@ -19,11 +25,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 +53,11 @@ export default defineComponent({
         disabled: Boolean
     },
     emits: ['update:modelValue'],
+    computed: {
+        hasSingeValue(): boolean {
+            return this.options.length <= 1
+        }
+    },
     methods: {
         setSelectedItem(val: number) {
             this.$emit('update:modelValue', val)

package/src/components/DlPopup/DlPopup.vue

@@ -384,7 +384,6 @@ export default defineComponent({
                 anchorOrigin: anchorOrigin.value,
                 selfOrigin: selfOrigin.value,
                 absoluteOffset,
-                fit: false,
                 cover: false,
                 maxHeight: props.maxHeight,
                 maxWidth: props.maxWidth

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

@@ -135,7 +135,8 @@
             <dl-menu
                 ref="menu"
                 v-model="isExpanded"
-                :fit="fit"
+                fit-container
+                :fit-content="fitContent"
                 square
                 no-focus
                 :offset="[0, 3]"
@@ -298,7 +299,7 @@ export default defineComponent({
         search: { type: Boolean, default: false },
         required: { type: Boolean, default: false },
         optional: { type: Boolean, default: false },
-        fit: { type: Boolean, default: true },
+        fitContent: Boolean,
         tooltip: { type: String, default: '' },
         highlightSelected: { type: Boolean, default: false },
         type: { type: String, default: 'text' },

package/src/components/DlSlider/sliderStyles.scss

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

package/src/components/DlSlider/useSlider.ts

@@ -26,16 +26,24 @@ export interface SliderProps extends FormProps {
     tabindex: number | string
 }
 
-export type Dragging = DOMRect & {
+export type Dragging = {
+    left: number
+    top: number
+    right?: number
+    width: number
+    height: number
+    bottom?: number
     ratioMin: number
     ratioMax: number
     valueMin: number
     valueMax: number
-    offsetRatio: number
-    rangeRatio: number
-    offsetModel: number
-    rangeValue: number
-    type?: typeof dragType[keyof typeof dragType]
+    x?: number
+    y?: number
+    offsetRatio?: number
+    rangeRatio?: number
+    offsetModel?: number
+    rangeValue?: number
+    type?: (typeof dragType)[keyof typeof dragType]
 }
 
 export const dragType = {
@@ -48,7 +56,6 @@ export const useSliderProps = {
     ...useFormProps,
     text: {
         type: String,
-        required: true,
         default: ''
     },
     width: {
@@ -63,6 +70,8 @@ export const useSliderProps = {
         type: Number,
         default: 100
     },
+    innerMin: Number,
+    innerMax: Number,
     step: {
         type: Number,
         default: 1,
@@ -102,7 +111,7 @@ export const useSliderProps = {
     }
 }
 
-export const useSliderEmits = ['pan', 'update:model-value', 'change']
+export const useSliderEmits = ['pan', 'change', 'update:model-value']
 
 export default function ({
     updateValue,
@@ -116,7 +125,7 @@ export default function ({
     const { props, emit }: { props: any; emit: any } = getCurrentInstance()!
 
     const active: Ref<boolean> = ref(false)
-    const focus: Ref<'min' | 'max' | boolean> = ref(false)
+    const focus: Ref<'min' | 'max' | 'both' | boolean> = ref(false)
     const dragging: Ref<Dragging | boolean | undefined> = ref(false)
 
     const editable = computed(
@@ -126,6 +135,17 @@ export default function ({
             props.min < props.max
     )
 
+    const innerMin = computed(() =>
+        isNaN(props.innerMin) === true || props.innerMin < props.min
+            ? props.min
+            : props.innerMin
+    )
+    const innerMax = computed(() =>
+        isNaN(props.innerMax) === true || props.innerMax > props.max
+            ? props.max
+            : props.innerMax
+    )
+
     const decimals = computed(
         () => (String(props.step).trim().split('.')[1] || '').length
     )
@@ -181,9 +201,14 @@ export default function ({
         return trackLen.value === 0 ? 0 : (model - props.min) / trackLen.value
     }
 
-    function getDraggingRatio(evt: MouseEvent, dragging: Dragging) {
+    function getDraggingRatio(evt: MouseEvent, dragging: Dragging | boolean) {
         const pos = position(evt)
-        const val = between((pos.left - dragging.left) / dragging.width, 0, 1)
+        const val = between(
+            (pos.left - (dragging as Dragging).left) /
+                (dragging as Dragging).width,
+            0,
+            1
+        )
 
         return between(val, minRatio.value, maxRatio.value)
     }
@@ -259,7 +284,9 @@ export default function ({
             tabindex,
             attributes,
             step,
-            decimals
+            decimals,
+            innerMin,
+            innerMax
         },
 
         methods: {

package/src/components/DlSmartSearch/DlSuggestionsDropdown.vue

@@ -7,7 +7,7 @@
             :target="defaultTarget"
             :offset="offset"
             :disabled="disabled"
-            fit
+            fit-container
             :model-value="modelValue"
             @update:modelValue="$emit('update:modelValue', $event)"
         >