@dataloop-ai/components 0.19.275 → 0.19.277

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.275",
+  "version": "0.19.277",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlCharts/charts/DlColumnChart/DlColumnChart.vue

@@ -1,20 +1,8 @@
 <template>
-    <div
-        :style="cssVars"
-        :class="chartWrapperClasses"
-    >
-        <dl-empty-state
-            v-if="isEmpty"
-            v-bind="emptyStateProps"
-        >
-            <template
-                v-for="(_, slot) in $slots"
-                #[slot]="props"
-            >
-                <slot
-                    :name="slot"
-                    v-bind="props"
-                />
+    <div :style="cssVars" :class="chartWrapperClasses">
+        <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>
         <Bar
@@ -25,6 +13,7 @@
             :style="(chartStyles, `max-height: ${wrapperHeight}`)"
             :data="chartData"
             :options="chartOptions"
+            :plugins="chartPlugins"
             @mouseout="onChartLeave"
         />
         <slot
@@ -484,6 +473,8 @@ export default defineComponent({
             )
         )
 
+        const chartPlugins = props.plugins || []
+
         watch(
             () => chart.value?.scales?.x?.width,
             (val: string) => {
@@ -627,6 +618,7 @@ export default defineComponent({
             variables,
             chartData,
             chartOptions,
+            chartPlugins,
             brush,
             xLabels,
             columnChart,

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

@@ -0,0 +1,166 @@
+<template>
+    <div :id="uuid" class="dl-date-time-range-card" :style="computedStyles">
+        <div class="dl-date-time-range-card--content">
+            <dl-date-picker
+                :model-value="dateInterval"
+                :available-range="availableRange"
+                :disabled="disabled"
+                single-calendar
+                single-selection
+                @update:model-value="dateSelected"
+            />
+            <dl-time-picker
+                v-if="showTime"
+                :disabled="disabled"
+                :model-value="dateInterval"
+                single-time
+                @update:model-value="updateDateInterval"
+            />
+
+            <dl-button
+                size="s"
+                outlined
+                class="dl-date-time-range-card--button"
+                @click="handleClearAction"
+            >
+                <span style="text-transform: capitalize"> Clear </span>
+            </dl-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import {
+    computed,
+    defineComponent,
+    PropType,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
+import { DateInterval } from '../types'
+import { DlTimePicker } from '../DlTimePicker'
+import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
+import { DlButton } from '../../../basic'
+import { isEqual } from 'lodash'
+
+export default defineComponent({
+    components: {
+        DlDatePicker,
+        DlTimePicker,
+        DlButton
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        modelValue: {
+            type: Object as PropType<Date | null>,
+            default: null
+        },
+        showTime: Boolean,
+        availableRange: {
+            type: Object as PropType<Partial<DateInterval> | null>,
+            default: null
+        },
+        disabled: Boolean,
+        width: {
+            type: String,
+            default: 'auto'
+        }
+    },
+    emits: ['update:model-value', 'date-selected', 'change', 'clear'],
+    setup(props, { emit }) {
+        const { modelValue, availableRange, width } = toRefs(props)
+
+        const uuid = ref(`dl-date-time-card-${v4()}`)
+        const dateInterval = computed<DateInterval>({
+            get() {
+                return modelValue.value
+                    ? {
+                          from: modelValue.value,
+                          to: new Date(modelValue.value)
+                      }
+                    : null
+            },
+            set(val: DateInterval | null) {
+                emit('update:model-value', val ? val.from : null)
+            }
+        })
+
+        const handleClearAction = () => {
+            emit('clear')
+            updateDateInterval(null)
+        }
+
+        const computedStyles = computed(() => {
+            return {
+                '--card-content-width': width.value
+            }
+        })
+
+        const updateDateInterval = (value: DateInterval | null) => {
+            if (value === null) {
+                dateInterval.value = null
+            } else {
+                const newVal = {
+                    from: value.from,
+                    to: new Date(value.from)
+                } as DateInterval
+
+                if (isEqual(newVal, dateInterval.value)) {
+                    return
+                }
+
+                dateInterval.value = newVal
+            }
+            emit('change', value ? value.from : null)
+        }
+
+        const dateSelected = (value: DateInterval) => {
+            const val = {
+                from: value.from,
+                to: new Date(value.from)
+            }
+            emit('date-selected', val.from)
+            updateDateInterval(val)
+        }
+
+        watch(availableRange, () => {
+            updateDateInterval(null)
+        })
+
+        return {
+            uuid,
+            dateInterval,
+            handleClearAction,
+            updateDateInterval,
+            dateSelected,
+            computedStyles
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-date-time-range-card {
+    background-color: var(--dl-color-bg);
+    display: flex;
+    border-radius: 2px;
+    border-radius: 2px;
+
+    &--content {
+        width: var(--card-content-width);
+    }
+
+    &--button {
+        display: flex;
+        margin-left: auto;
+        width: fit-content;
+        margin-right: 16px;
+        margin-bottom: 16px;
+    }
+}
+</style>

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

@@ -14,62 +14,36 @@
                 :disabled="disabled"
             >
                 <div class="dl-date-time-range--card">
-                    <div
-                        class="dl-date-time-range--card_content"
-                        :style="cardContentStyles"
-                    >
-                        <dl-date-picker
-                            :model-value="dateInterval"
-                            :available-range="availableRange"
-                            :disabled="isInputDisabled"
-                            single-calendar
-                            single-selection
-                            @update:model-value="
-                                updateDateIntervalWithAutoClose
-                            "
-                        />
-                        <dl-time-picker
-                            v-if="showTime"
-                            :disabled="isInputDisabled"
-                            :model-value="dateInterval"
-                            single-time
-                            @update:model-value="updateDateInterval"
-                        />
-
-                        <dl-button
-                            size="s"
-                            outlined
-                            class="dl-date-time-range--button"
-                            @click="handleClearAction"
-                        >
-                            <span style="text-transform: capitalize">
-                                Clear
-                            </span>
-                        </dl-button>
-                    </div>
+                    <dl-date-time-card
+                        ref="dateTimeRangeCard"
+                        :model-value="modelValue"
+                        :show-time="showTime"
+                        :available-range="availableRange"
+                        :width="datePickerCardWidth"
+                        :disabled="disabled"
+                        @update:model-value="handleModelValueChange"
+                        @date-selected="onDateSelected"
+                        @clear="handleClearAction"
+                    />
                 </div>
             </dl-menu>
         </date-input>
     </div>
 </template>
 <script lang="ts">
-import { DlTimePicker } from '../DlTimePicker'
 import { DateInterval } from '../types'
 import { CustomDate } from '../DlDatePicker/models/CustomDate'
-import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
 import DateInput from './DateInput.vue'
+import DlDateTimeCard from './DlDateTimeCard.vue'
 import { DlMenu } from '../../../essential'
-import { DlButton } from '../../../basic'
 import { defineComponent, PropType } from 'vue-demi'
 import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
-        DlDatePicker,
-        DlTimePicker,
         DateInput,
         DlMenu,
-        DlButton
+        DlDateTimeCard
     },
     model: {
         prop: 'modelValue',
@@ -103,18 +77,11 @@ export default defineComponent({
     emits: ['update:model-value', 'set-type', 'change'],
     data(): {
         uuid: string
-        dateInterval: DateInterval | null
         isOpen: boolean
         isInputDisabled: boolean
     } {
         return {
             uuid: `dl-date-time-range-${v4()}`,
-            dateInterval: this.modelValue
-                ? {
-                      from: this.modelValue,
-                      to: new Date(this.modelValue)
-                  }
-                : null,
             isOpen: false,
             isInputDisabled: false
         }
@@ -124,63 +91,30 @@ export default defineComponent({
             return { width: `${this.dateInputText.length / 2}em` }
         },
         dateInputText(): string {
-            if (this.dateInterval === null) {
+            if (this.modelValue === null) {
                 return this.placeholder
             }
 
             let text = ''
 
             if (this.showTime) {
-                text = CustomDate.format(
-                    this.dateInterval.from,
-                    'MMM D, YYYY, HH:mm'
-                )
+                text = CustomDate.format(this.modelValue, 'MMM D, YYYY, HH:mm')
             } else {
-                text = CustomDate.format(this.dateInterval.from, 'MMM D, YYYY')
+                text = CustomDate.format(this.modelValue, 'MMM D, YYYY')
             }
 
             return text
-        },
-        cardContentStyles(): Record<string, any> {
-            return {
-                '--card-content-width': this.datePickerCardWidth
-            }
-        }
-    },
-    watch: {
-        availableRange: {
-            handler() {
-                this.updateDateInterval(null)
-            },
-            deep: true
-        },
-        modelValue(value: Date | null) {
-            this.dateInterval = value && {
-                from: value,
-                to: new Date(value)
-            }
         }
     },
     methods: {
         handleClearAction() {
             this.isInputDisabled = false
-            this.updateDateInterval(null)
         },
-        updateDateInterval(value: DateInterval | null) {
-            if (value === null) {
-                this.dateInterval = null
-            } else {
-                this.dateInterval = {
-                    from: value.from,
-                    to: new Date(value.from)
-                }
-            }
-            this.$emit('update:model-value', value?.from)
-            this.$emit('change', value?.from)
+        handleModelValueChange(value: Date) {
+            this.$emit('update:model-value', value)
+            this.$emit('change', value)
         },
-        updateDateIntervalWithAutoClose(value: DateInterval) {
-            this.updateDateInterval(value)
-
+        onDateSelected() {
             if (this.autoClose) {
                 const dateTimeRangeMenu = this.$refs[
                     'dateTimeRangeMenu'
@@ -199,23 +133,10 @@ export default defineComponent({
     justify-content: center;
 
     &--card {
-        background-color: var(--dl-color-bg);
         z-index: 1;
         display: flex;
-        border-radius: 2px;
-        border-radius: 2px;
-    }
-
-    &--card_content {
-        width: var(--card-content-width);
-    }
-
-    &--button {
-        display: flex;
-        margin-left: auto;
-        width: fit-content;
-        margin-right: 16px;
-        margin-bottom: 16px;
+        width: 100%;
+        height: 100%;
     }
 }
 </style>

package/src/components/compound/DlDateTime/DlDateTimeRange/index.ts

@@ -1,4 +1,5 @@
 import DlDateTimeRange from './DlDateTimeRange.vue'
 import DlDateTimePicker from './DlDateTimePicker.vue'
+import DlDateTimeCard from './DlDateTimeCard.vue'
 
-export { DlDateTimeRange, DlDateTimePicker }
+export { DlDateTimeRange, DlDateTimePicker, DlDateTimeCard }

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

@@ -105,8 +105,9 @@
             @escapekey="onEscapeKey"
         >
             <div class="dl-smart-search-input__date-picker-wrapper">
-                <dl-date-picker
-                    :single-selection="true"
+                <dl-date-time-card
+                    :model-value="datePickerSelection"
+                    show-time
                     @change="onDateSelection"
                 />
                 <div class="dl-smart-search-input__date-picker-buttons">
@@ -138,7 +139,7 @@ import {
     onBeforeUnmount
 } from 'vue-demi'
 import { DlButton } from '../../../../basic'
-import { DlDatePicker } from '../../../DlDateTime'
+import { DlDateTimeCard } from '../../../DlDateTime'
 import { DlMenu, DlIcon, DlLabel } from '../../../../essential'
 import { isEllipsisActive } from '../../../../../utils/is-ellipsis-active'
 import { useSizeObserver } from '../../../../../hooks/use-size-observer'
@@ -173,7 +174,8 @@ import {
     Data,
     useSuggestions,
     removeBrackets,
-    removeLeadingExpression
+    removeLeadingExpression,
+    dateSuggestionPattern
 } from '../../../../../hooks/use-suggestions'
 import { parseSmartQuery, stringifySmartQuery } from '../../../../../utils'
 import { StateManager, stateManager } from '../../../../../StateManager'
@@ -184,7 +186,7 @@ export default defineComponent({
         DlButton,
         SuggestionsDropdown,
         DlTooltip,
-        DlDatePicker,
+        DlDateTimeCard,
         DlMenu,
         DlLabel
     },
@@ -300,7 +302,7 @@ export default defineComponent({
         const menuOffset = ref([0, 5])
         const cancelBlur = ref(0)
         const expanded = ref(true)
-        const datePickerSelection = ref(null)
+        const datePickerSelection = ref<Date>(null)
         const showDatePicker = ref(false)
         const suggestionsDropdown = ref(null)
         //#endregion
@@ -333,7 +335,7 @@ export default defineComponent({
             }
 
             // to handle date suggestion modal to open automatically.
-            if (value.includes('(dd/mm/yyyy)')) {
+            if (value.includes(dateSuggestionPattern)) {
                 value = value.trimEnd()
             }
 
@@ -676,7 +678,7 @@ export default defineComponent({
             debouncedSetInputValue.value(text)
         }
 
-        const onDateSelection = (value: DateInterval) => {
+        const onDateSelection = (value: Date) => {
             datePickerSelection.value = value
         }
 
@@ -1333,10 +1335,6 @@ export default defineComponent({
         max-width: 100%;
     }
 
-    &__date-picker-wrapper {
-        width: 562px;
-    }
-
     &__date-picker-buttons {
         padding: 0 16px 16px;
         text-align: right;

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

@@ -8,7 +8,8 @@ import {
     Data,
     datePattern,
     datePatternNoBrackets,
-    removeBrackets
+    removeBrackets,
+    pureDateSuggestionPattern
 } from '../../../../../hooks/use-suggestions'
 import moment from 'moment'
 import { cloneDeep, get } from 'lodash'
@@ -37,8 +38,8 @@ export const isEndingWithDateIntervalPattern = (str: string) => {
     return isEndOfString(str, datePattern, { checkWhiteSpace: true })
 }
 
-export const replaceDateInterval = (str: string, date: DateInterval) => {
-    const newStr = `${formatDate(date.from)}`
+export const replaceDateInterval = (str: string, date: Date) => {
+    const newStr = `${formatDate(date)}`
     const replaced = replaceFirstOrLastOccurrence(
         str,
         newStr,
@@ -52,7 +53,7 @@ export const removeDateInterval = (str: string) => {
 }
 
 const formatDate = (date: Date | string | number): string => {
-    return moment(date).format('DD/MM/YYYY')
+    return moment(date).format(pureDateSuggestionPattern)
 }
 
 const replaceFirstOrLastOccurrence = (
@@ -67,7 +68,7 @@ const replaceFirstOrLastOccurrence = (
     let match
 
     while ((match = regex.exec(string))) {
-        if (match[0] === 'dd/mm/yyyy' && !firstMatch) {
+        if (match[0] === pureDateSuggestionPattern && !firstMatch) {
             firstMatch = match
         }
         lastMatch = match
@@ -120,7 +121,7 @@ export function replaceStringifiedDatesWithJSDates(str: string) {
 
 export function formatToNumericDate(str: string) {
     const dateString = str.replace(/['"\(\)]+/g, '')
-    const newDate = moment(dateString, 'DD/MM/YYYY')
+    const newDate = moment(dateString, pureDateSuggestionPattern)
     const ms = newDate.toDate().getTime()
     return ms
 }

package/src/hooks/use-suggestions.ts

@@ -79,16 +79,17 @@ type Expression = {
 }
 
 const space = ' '
-const dateSuggestionPattern = '(dd/mm/yyyy)'
+export const pureDateSuggestionPattern = 'DD/MM/YYYY HH:mm:ss'
+export const dateSuggestionPattern = `(${pureDateSuggestionPattern})`
 
 let localSuggestions: Suggestion[] = []
 
 export const datePattern = new RegExp(
-    /([\(']?\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?\(dd\/mm\/yyyy\)\s?)/,
+    /[\(']?(\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?DD\/MM\/YYYY)\s?(\d{2}:\d{2}:\d{2}|\s?HH:mm:ss)[\)']?/,
     'gi'
 )
 export const datePatternNoBrackets =
-    /(\d{2}\/\d{2}\/\d{4}\s?|\s?dd\/mm\/yyyy\s?)/
+    /(\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?DD\/MM\/YYYY)\s?(\d{2}:\d{2}:\d{2}|\s?HH:mm:ss)/
 
 const existsValuePlaceholder = 'existsValuePlaceholder'
 

package/src/utils/parse-smart-query.ts

@@ -261,32 +261,42 @@ export const stringifySmartQuery = (query: { [key: string]: any }): string => {
                             [key: string]: string | number | string[] | number[]
                         }
                     )[operator]
+
+                    let stringValue = ''
+                    if (
+                        ['$eq', '$ne', '$gt', '$gte', '$lt', '$lte'].includes(
+                            operator
+                        )
+                    ) {
+                        if (isNumber(operatorValue)) {
+                            stringValue = `${operatorValue}`
+                        } else if (isBoolean(operatorValue)) {
+                            stringValue = `${operatorValue}`
+                        } else if (isDatePattern(`${operatorValue}`)) {
+                            stringValue = `(${operatorValue})`
+                        } else {
+                            stringValue = `'${operatorValue}'`
+                        }
+                    }
+
                     switch (operator) {
                         case '$eq':
-                            result += `${key} = ${
-                                isString(operatorValue)
-                                    ? `'${operatorValue}'`
-                                    : operatorValue
-                            }`
+                            result += `${key} = ${stringValue}`
                             break
                         case '$ne':
-                            result += `${key} != ${
-                                isString(operatorValue)
-                                    ? `'${operatorValue}'`
-                                    : operatorValue
-                            }`
+                            result += `${key} != ${stringValue}`
                             break
                         case '$gt':
-                            result += `${key} > ${operatorValue}`
+                            result += `${key} > ${stringValue}`
                             break
                         case '$gte':
-                            result += `${key} >= ${operatorValue}`
+                            result += `${key} >= ${stringValue}`
                             break
                         case '$lt':
-                            result += `${key} < ${operatorValue}`
+                            result += `${key} < ${stringValue}`
                             break
                         case '$lte':
-                            result += `${key} <= ${operatorValue}`
+                            result += `${key} <= ${stringValue}`
                             break
                         case '$exists':
                             result += `${key} ${