@dataloop-ai/components 0.16.44 → 0.16.46

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

@@ -1,8 +1,21 @@
 export * from './highlightSyntax'
+export * from './utils'
 
-import { dateIntervalPattern } from '../../../../../hooks/use-suggestions'
 import { DateInterval } from '../../../DlDateTime/types'
 
+const startDatePattern = new RegExp(
+    /\(from\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(from\s?dd\/mm\/yyyy\s?\)/,
+    'gi'
+)
+const endDatePattern = new RegExp(
+    /\(to\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(to\s?dd\/mm\/yyyy\s?\)/,
+    'gi'
+)
+const dateIntervalPattern = new RegExp(
+    /\((from\s?\(\d{2}\/\d{2}\/\d{4}\)\s?to\s?\(\d{2}\/\d{2}\/\d{4}\))\)|\((from\s?\(dd\/mm\/yyyy\)\s?to\s?\(dd\/mm\/yyyy\))\)/,
+    'gi'
+)
+
 export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     const trimmed = str.trim()
     const matches = trimmed.match(pattern)
@@ -13,8 +26,13 @@ export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     return trimmed.lastIndexOf(lastMatch) + lastMatch.length === trimmed.length
 }
 
-export const isEndingWithDateIntervalPattern = (str: string) =>
-    isEndOfString(str, dateIntervalPattern)
+export const isEndingWithDateIntervalPattern = (str: string) => {
+    return (
+        isEndOfString(str, dateIntervalPattern) ||
+        isEndOfString(str, startDatePattern) ||
+        isEndOfString(str, endDatePattern)
+    )
+}
 
 export const replaceDateInterval = (
     str: string,
@@ -22,24 +40,38 @@ export const replaceDateInterval = (
 ) => {
     const dateFrom = new Date(dateInterval.from)
     const dateTo = new Date(dateInterval.to)
+    const values = str.match(/\((.*?)\)/g)
+    let newStr = ''
+    if (!values) return str
 
-    const newStr = `(From ${formatDate(dateFrom)} To ${formatDate(dateTo)})`
-
-    return replaceLastOccurrence(str, newStr)
+    if (values.length > 1) {
+        newStr = `(From (${formatDate(dateFrom)}) To (${formatDate(dateTo)}))`
+        return replaceLastOccurrence(str, newStr, dateIntervalPattern)
+    } else if (values[0].includes('From')) {
+        newStr = `(From ${formatDate(dateFrom)})`
+        return replaceLastOccurrence(str, newStr, startDatePattern)
+    } else if (values[0].includes('To')) {
+        newStr = `(To ${formatDate(dateTo)})`
+        return replaceLastOccurrence(str, newStr, endDatePattern)
+    }
 }
 
 const formatDate = (date: Date): string => {
-    return `(${addZero(date.getDate())}/${addZero(
+    return `${addZero(date.getDate())}/${addZero(
         date.getMonth() + 1
-    )}/${date.getFullYear()})`
+    )}/${date.getFullYear()}`
 }
 
 const addZero = (value: number): string => {
     return value < 10 ? `0${value}` : value.toString()
 }
 
-const replaceLastOccurrence = (string: string, replaceValue: string) => {
-    const matches = string.match(dateIntervalPattern)
+const replaceLastOccurrence = (
+    string: string,
+    replaceValue: string,
+    pattern: RegExp
+) => {
+    const matches = string.match(pattern)
 
     return matches && matches.length
         ? string.replace(matches[matches.length - 1], replaceValue)

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

@@ -0,0 +1,107 @@
+import { ColorSchema, SyntaxColorSchema } from '../types'
+import {
+    operators,
+    Alias,
+    startDatePattern,
+    endDatePattern,
+    dateIntervalPattern
+} from '../../../../../hooks/use-suggestions'
+
+export function replaceWithJsDates(str: string) {
+    const intervals = str.match(dateIntervalPattern)
+    const starts = str.match(startDatePattern)
+    const ends = str.match(endDatePattern)
+
+    intervals?.forEach((interval) => {
+        str = str.replaceAll(interval, formatToDateObj(interval))
+    })
+    starts?.forEach((start) => {
+        str = str.replaceAll(start, formatToDateObj(start))
+    })
+    ends?.forEach((end) => {
+        str = str.replaceAll(end, formatToDateObj(end))
+    })
+    return str
+}
+
+function formatToDateObj(str: string) {
+    const [day, month, year] = str.split(' ')[1].split('/')
+    const date = new Date(parseInt(year), parseInt(month), parseInt(day))
+    if (!isValidDate(date)) return str
+    const [toDay, toMonth, toYear] = str.split(' ')[3]?.split('/') || []
+    const toDate = new Date(
+        parseInt(toYear),
+        parseInt(toMonth),
+        parseInt(toDay)
+    )
+    if (!isValidDate(toDate)) return date.toISOString()
+    return JSON.stringify({
+        from: date.toISOString(),
+        to: toDate.toISOString()
+    })
+}
+
+function isValidDate(d: Date) {
+    return d instanceof Date && !isNaN(d as any)
+}
+
+export function replaceAliases(json: string, aliases: Alias[]) {
+    let newJson = json
+    aliases.forEach((alias) => {
+        newJson = newJson.replaceAll(alias.alias, alias.key)
+    })
+    return newJson
+}
+
+export function createColorSchema(
+    colorSchema: ColorSchema,
+    aliases: Alias[]
+): SyntaxColorSchema {
+    const thisFields = []
+    for (const key in aliases) {
+        thisFields.push(aliases[key].alias)
+    }
+
+    const thisOperators = []
+    for (const key in operators) {
+        thisOperators.push(operators[key])
+    }
+
+    return {
+        fields: {
+            values: thisFields,
+            color: colorSchema.fields
+        },
+        operators: {
+            values: thisOperators,
+            color: colorSchema.operators
+        },
+        keywords: {
+            values: ['OR', 'AND'],
+            color: colorSchema.keywords
+        }
+    }
+}
+
+export const isEligibleToChange = (target: HTMLElement, expanded: boolean) => {
+    let childOffsetRight = 0
+    let childOffsetBottom = 20
+
+    if (target?.lastChild) {
+        const range = document.createRange()
+        range.selectNode(target?.lastChild)
+        childOffsetRight =
+            range.getBoundingClientRect().right -
+            target.getBoundingClientRect().left
+        childOffsetBottom =
+            range.getBoundingClientRect().bottom -
+            target.getBoundingClientRect().top +
+            5
+    }
+
+    if (childOffsetRight <= target.clientWidth) {
+        return [-childOffsetRight, 5]
+    } else {
+        return [-target.clientWidth, 5]
+    }
+}

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

@@ -46,6 +46,7 @@
         </div>
         <div
             class="select-wrapper"
+            tabindex="0"
             :style="placeholderStyles"
         >
             <div
@@ -142,8 +143,11 @@
                 :offset="[0, 3]"
                 style="border-radius: 0"
                 :disabled="disabled || readonly"
+                :arrow-nav-items="options"
                 @show="onMenuOpen"
                 @hide="closeMenu"
+                @highlightedIndex="setHighlightedIndex"
+                @handleSelectedItem="handleSelectedItem"
             >
                 <dl-list
                     class="select-list"
@@ -183,7 +187,7 @@
                         </template>
                     </dl-select-option>
                     <dl-select-option
-                        v-for="option in options"
+                        v-for="(option, optionIndex) in options"
                         :key="getKeyForOption(option)"
                         clickable
                         :multiselect="multiselect"
@@ -191,6 +195,11 @@
                             selected:
                                 option === selectedOption && highlightSelected
                         }"
+                        :style="
+                            optionIndex === highlightedIndex
+                                ? 'background-color: var(--dl-color-fill)'
+                                : ''
+                        "
                         :with-wave="withWave"
                         :model-value="modelValue"
                         :value="getOptionValue(option)"
@@ -251,7 +260,7 @@ import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { DlListItem } from '../../basic'
 import { DlTooltip, DlList, DlIcon, DlMenu } from '../../essential'
 import { DlInfoErrorMessage, DlItemSection } from '../../shared'
-import { defineComponent, isVue2, PropType } from 'vue-demi'
+import { defineComponent, isVue2, PropType, ref } from 'vue-demi'
 import {
     getLabel,
     getIconSize,
@@ -337,11 +346,39 @@ export default defineComponent({
         'selected',
         'deselected'
     ],
+    setup(props, { emit }) {
+        const isExpanded = ref(false)
+        const selectedIndex = ref(-1)
+        const highlightedIndex = ref(-1)
+
+        const setHighlightedIndex = (value: any) => {
+            highlightedIndex.value = value
+        }
+        const handleModelValueUpdate = (val: any) => {
+            emit('update:model-value', val)
+            emit('change', val)
+        }
+        const handleSelectedItem = (value: any) => {
+            selectedIndex.value = props.options.findIndex(
+                (option: string | Record<string, string | number> | number) =>
+                    isEqual(option as any, value)
+            )
+
+            handleModelValueUpdate(value)
+        }
+
+        return {
+            isExpanded,
+            highlightedIndex,
+            selectedIndex,
+            setHighlightedIndex,
+            handleSelectedItem,
+            handleModelValueUpdate
+        }
+    },
     data() {
         return {
             uuid: `dl-select-${v4()}`,
-            isExpanded: false,
-            selectedIndex: -1,
             isEmpty: true
         }
     },
@@ -666,10 +703,6 @@ export default defineComponent({
             this.selectedIndex = -1
             this.closeMenu()
         },
-        handleModelValueUpdate(val: any) {
-            this.$emit('update:model-value', val)
-            this.$emit('change', val)
-        },
         selectOption(selected: any) {
             if (this.multiselect) {
                 return

package/src/components/compound/DlTable/DlTable.vue

@@ -58,12 +58,13 @@
             v-if="hasVirtScroll"
             ref="virtScrollRef"
             :class="tableClass"
+            :draggable-classes="additionalClasses"
             :style="tableStyle"
             :scroll-target="virtualScrollTarget"
             :items="computedRows"
-            :on-virtual-scroll="onVScroll"
             :table-colspan="computedColspan"
             v-bind="virtProps"
+            @virtual-scroll="onVScroll"
         >
             <template #before>
                 <thead>
@@ -144,16 +145,18 @@
                 <DlTr
                     :key="getRowKey(props.item)"
                     :class="
-                        isRowSelected(getRowKey(row))
+                        isRowSelected(getRowKey(props.item))
                             ? 'selected'
                             : hasAnyAction
                                 ? ' cursor-pointer'
                                 : ''
                     "
                     :no-hover="noHover"
-                    @click="onTrClick($event, row, pageIndex)"
-                    @dblclick="onTrDblClick($event, row, pageIndex)"
-                    @contextmenu="onTrContextMenu($event, row, pageIndex)"
+                    @click="onTrClick($event, props.item, pageIndex)"
+                    @dblclick="onTrDblClick($event, props.item, pageIndex)"
+                    @contextmenu="
+                        onTrContextMenu($event, props.item, pageIndex)
+                    "
                 >
                     <td v-if="hasDraggableRows">
                         <dl-icon
@@ -302,7 +305,7 @@
                         </tr>
                     </slot>
                 </thead>
-                <tbody>
+                <tbody id="draggable">
                     <slot
                         name="top-row"
                         :cols="computedCols"
@@ -723,7 +726,7 @@ export default defineComponent({
 
         onMounted(() => {
             tableEl = (rootRef.value as HTMLDivElement).querySelector(
-                '.dl-table'
+                'table.dl-table'
             ) as HTMLTableElement
             resizableManager = new ResizableManager()
 
@@ -753,7 +756,7 @@ export default defineComponent({
             hasVirtScroll,
             () => {
                 tableEl = (rootRef.value as HTMLDivElement).querySelector(
-                    '.dl-table'
+                    'table.dl-table'
                 ) as HTMLTableElement
 
                 if (props.resizable) {
@@ -1049,8 +1052,8 @@ export default defineComponent({
                 acc[p] = (props as Record<string, any>)[p]
             })
 
-            if (acc.virtualScrollItemSize === void 0) {
-                acc.virtualScrollItemSize = props.dense === true ? 28 : 48
+            if (!acc.virtualScrollItemSize) {
+                acc.virtualScrollItemSize = props.dense === true ? 30 : 40
             }
 
             return acc

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

@@ -21,9 +21,11 @@
   }
 
   /* this is when the loading indicator appears */
-  &.dl-table--loading thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 40px;
+  &--loading {
+    thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 38px;
+    }
   }
 
   th:first-child,
@@ -371,6 +373,7 @@
  */
 
 .dl-table--dense {
+
   .dl-table__top {
     position: relative;
     padding: 5px 16px;
@@ -385,6 +388,8 @@
     font-size: 80%;
   }
 
+
+
   .dl-table {
 
     th {
@@ -423,6 +428,13 @@
   }
 }
 
+.dl-table--dense.dl-table--loading {
+  thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 32px;
+  }
+}
+
 /*
  * Separators
  */
@@ -463,4 +475,4 @@
     position: relative;
     border-bottom: 1px solid var(--dl-color-separator);
   }
-}
+}

package/src/components/compound/DlToggleButton/DlToggleButton.vue

@@ -0,0 +1,109 @@
+<template>
+    <div
+        :style="{ width }"
+        class="container"
+    >
+        <dl-button
+            v-for="(btn, idx) in toggleButtons"
+            :key="idx"
+            :styles="
+                getStyles(btn.value === scopedValue, hoverBtn === btn.value)
+            "
+            data-test="button"
+            fluid
+            @mouseenter="hoverBtn = btn.value"
+            @mouseleave="hoverBtn = null"
+            @click="value = btn.value"
+        >
+            <span v-if="!$slots.button && !$slots[`button-${idx}`]">
+                {{ btn.label }}
+            </span>
+            <slot
+                :label="btn.label"
+                :name="`button-${idx}`"
+            />
+            <slot
+                :label="btn.label"
+                name="button"
+            />
+        </dl-button>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlToggleButtonOption } from './types'
+import { DlButton } from '../../basic'
+import { ButtonsStyles } from './config'
+
+export default defineComponent({
+    name: 'DlToggleButton',
+    components: { DlButton },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        width: {
+            type: String,
+            default: '100%'
+        },
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        options: {
+            type: Array as () => DlToggleButtonOption[],
+            required: true
+        }
+    },
+    emits: ['update:modelValue', 'change'],
+    data: () => ({
+        scopedValue: null as string | number,
+        hoverBtn: null as string | number
+    }),
+    computed: {
+        value: {
+            get() {
+                return this.modelValue
+            },
+            set(value: string | number) {
+                this.$emit('change', value)
+                let buttonValue
+                if (this.scopedValue !== value) {
+                    buttonValue = value
+                } else {
+                    buttonValue = null
+                }
+                this.scopedValue = buttonValue
+                this.$emit('update:modelValue', buttonValue)
+            }
+        },
+        toggleButtons() {
+            return this.options.slice(0, 3)
+        }
+    },
+    created() {
+        this.scopedValue = this.value
+    },
+    methods: {
+        getStyles(activeBtn: boolean, hovered: boolean) {
+            if (activeBtn) {
+                return ButtonsStyles.activeStyles
+            } else if (hovered) {
+                return ButtonsStyles.hoverStyles
+            } else {
+                return ButtonsStyles.nonActiveStyles
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+    display: inline-flex;
+    border-radius: 2px;
+    overflow: hidden;
+}
+</style>

package/src/components/compound/DlToggleButton/config.ts

@@ -0,0 +1,27 @@
+const generalStyles = {
+    padding: '7px 10px',
+    height: '28px',
+    fontSize: 'var(--dl-font-size-body)',
+    borderRadius: '0'
+}
+
+export const ButtonsStyles = Object.freeze({
+    nonActiveStyles: {
+        ...generalStyles,
+        color: 'var(--dl-color-darker)',
+        borderColor: 'var(--dl-color-separator)',
+        background: 'var(--dl-color-bg)'
+    },
+    activeStyles: {
+        ...generalStyles,
+        color: 'var(--dl-color-secondary)',
+        borderColor: 'var(--dl-color-secondary)',
+        background: 'var(--dl-color-secondary-opaque)'
+    },
+    hoverStyles: {
+        ...generalStyles,
+        color: 'var(--dl-color-hover)',
+        borderColor: 'var(--dl-color-hover)',
+        background: 'var(--dl-color-bg)'
+    }
+})

package/src/components/compound/DlToggleButton/index.ts

@@ -0,0 +1,3 @@
+import DlToggleButton from './DlToggleButton.vue'
+
+export { DlToggleButton }

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

@@ -0,0 +1,4 @@
+export interface DlToggleButtonOption {
+    label: string
+    value: string | number
+}

package/src/components/compound/index.ts

@@ -16,3 +16,4 @@ export * from './DlTabPanels'
 export * from './DlTabs'
 export * from './DlToast'
 export * from './DlDialogBox'
+export * from './DlToggleButton'

package/src/components/compound/types.ts

@@ -8,3 +8,4 @@ export * from './DlToast/types'
 export * from './DlDialogBox/types'
 export * from './DlOptionGroup/types'
 export * from './DlTable/types'
+export * from './DlToggleButton/types'

package/src/components/essential/DlColorPicker/DlColorPicker.vue

@@ -287,8 +287,9 @@ export default defineComponent({
 .hu-color-picker {
     width: 180px;
     padding: 10px;
-    background: var(--dl-color-shadow);
+    background: var(--dl-color-panel-background);
     border-radius: 2px;
+    border: 1px solid var(--dl-color-separator);
     box-shadow: 0px 3px 6px 0px rgba(16, 30, 115, 0.15);
     z-index: 1;
     text-align: left;
@@ -301,6 +302,8 @@ export default defineComponent({
     .color-show {
         margin-top: 11px;
         display: flex;
+        border: 1px solid var(--dl-color-separator);
+        overflow: hidden;
     }
 }
 </style>

package/src/components/essential/DlColorPicker/components/DlColors.vue

@@ -13,7 +13,7 @@
                 />
                 <div
                     :style="{ background: `${item}` }"
-                    :class="getColorClasses(`${item}`)"
+                    class="color"
                 />
             </li>
         </ul>
@@ -33,7 +33,7 @@
                 />
                 <div
                     :style="{ background: `${item}` }"
-                    :class="getColorClasses(`${item}`)"
+                    class="color"
                 />
             </li>
         </ul>
@@ -125,11 +125,7 @@ export default defineComponent({
             position: absolute;
             left: 0;
             top: 0;
-            width: 100%;
-            height: 100%;
             border-radius: 3px;
-        }
-        .color-white {
             border: 1px solid var(--dl-color-separator);
             width: calc(100% - 2px);
             height: calc(100% - 2px);

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

@@ -2,7 +2,7 @@
     <div
         v-if="!svg"
         :id="uuid"
-        :style="inlineStyles"
+        :style="[inlineStyles, styles]"
         @click="$emit('click', $event)"
     >
         <i
@@ -48,6 +48,10 @@ export default defineComponent({
             type: String,
             default: '12px'
         },
+        styles: {
+            type: [Array, String, Object],
+            default: null
+        },
         svg: {
             type: Boolean,
             default: false