@dataloop-ai/components 0.19.274 → 0.19.276

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

@@ -1,2 +1,3 @@
 import DlInput from './DlInput.vue'
-export { DlInput }
+import DlTextInput from './DlTextInput.vue'
+export { DlInput, DlTextInput }

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/components/compound/DlStepper/components/DlStepperSidebar.vue

@@ -8,7 +8,12 @@
                 :end-icon="endIcon(step)"
                 :start-icon="
                     step.icon
-                        ? { icon: step.icon, color: 'secondary' }
+                        ? {
+                            icon: step.icon,
+                            color: step.active
+                                ? 'secondary'
+                                : 'dl-color-lighter'
+                        }
                         : undefined
                 "
                 :clickable="!disabled"

package/src/demos/DlTextInputDemo.vue

@@ -0,0 +1,183 @@
+<template>
+    <div>
+        <dl-input
+            v-model="textInputValue"
+            style="width: 920px"
+            placeholder="Select option"
+            size="l"
+            margin="20px"
+            title="Input Title"
+            required
+            tooltip="Quis fugiat et non eu proident sit et amet."
+            top-message="Pariatur consequat non sit aliqua labore ad reprehenderit deserunt ullamco incididunt non irure laborum deserunt."
+            info-message="Ipsum amet quis velit amet. Anim consectetur nostrud sunt eu non non consequat sint eu amet."
+            :auto-suggest-items="[
+                'foo',
+                'bar',
+                'foobar',
+                'barfoo',
+                'foo bar foobarv'
+            ]"
+            show-counter
+            :max-length="20"
+        />
+        <dl-input
+            v-model="saveInputValue"
+            style="width: 220px"
+            placeholder="Input with icon"
+            size="l"
+            has-append
+        >
+            <template #append>
+                <dl-icon icon="icon-dl-save" size="12px" />
+            </template>
+        </dl-input>
+        <dl-input
+            v-model="passFieldValue"
+            title="Password"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+            type="password"
+            error
+            error-message="The password entered is incorrect."
+            info-message="This won't show, error is true"
+        />
+        <dl-input
+            v-model="warningFieldValue"
+            title="Warning Example"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+            warning
+            warning-message="Something isn't right."
+            info-message="This won't show, error is true"
+            optional
+        />
+
+        <p>size S with long text</p>
+        <dl-input
+            v-model="warningFieldValue"
+            title="Warning Example"
+            style="width: 220px"
+            placeholder="Select option"
+            size="s"
+            warning
+            warning-message="Something isn't right."
+            info-message="This won't show, error is true"
+            optional
+        />
+        <dl-input
+            v-model="errorFieldValue"
+            title="Error Example"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+            error
+            error-message="Error message is the strongest."
+            warning
+            warning-message="This won't show, error is true"
+            info-message="This won't show, error is true"
+        />
+        <dl-input
+            style="width: 220px"
+            placeholder="Select option"
+            title="Min"
+            required
+            size="s"
+            error
+            error-message="Error message is the strongest."
+        />
+        <dl-input
+            style="width: 440px"
+            placeholder="Select option"
+            title="Min"
+            size="s"
+            error
+            error-message="Error message is the strongest."
+        />
+        <p>input in a row with button</p>
+        <div class="row" style="align-items: center">
+            <dl-input
+                class="input-parts"
+                style="width: 440px"
+                placeholder="Select option"
+                title="Min"
+                dense
+                size="s"
+            />
+            <dl-button dense flat icon="icon-dl-add" size="m" />
+        </div>
+        <dl-input
+            title="Readonly"
+            style="width: 220px"
+            placeholder="Readonly state"
+            size="m"
+            readonly
+        />
+
+        <p>input in a limited size and action slot size m</p>
+        <div style="align-items: center; width: 250px; overflow: hidden">
+            <dl-input class="input-parts" placeholder="Select option">
+                <template #action>
+                    <dl-button dense flat icon="icon-dl-add" size="m" />
+                </template>
+            </dl-input>
+        </div>
+
+        <p>input with tooltip and no title</p>
+        <div>
+            <dl-input
+                class="input-parts"
+                placeholder="Select option"
+                tooltip="test me tooltip"
+            >
+                <template #action>
+                    <dl-button dense flat icon="icon-dl-add" size="m" />
+                </template>
+            </dl-input>
+        </div>
+
+        <p>input with tooltip and no title size small</p>
+        <div>
+            <dl-input
+                class="input-parts"
+                placeholder="Select option"
+                tooltip="test me tooltip"
+                size="small"
+            >
+                <template #action>
+                    <dl-button dense flat icon="icon-dl-add" size="m" />
+                </template>
+            </dl-input>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlInput, DlIcon, DlButton } from '../components'
+export default defineComponent({
+    name: 'DlInputDemo',
+    components: {
+        DlInput,
+        DlIcon,
+        DlButton
+    },
+    setup() {
+        const textInputValue = ref<string>('')
+        const passFieldValue = ref<string>('')
+        const warningFieldValue = ref<string>('')
+        const errorFieldValue = ref<string>('')
+        const saveInputValue = ref<string>('')
+
+        return {
+            textInputValue,
+            passFieldValue,
+            warningFieldValue,
+            errorFieldValue,
+            saveInputValue
+        }
+    }
+})
+</script>
+<style></style>

package/src/demos/index.ts

@@ -70,6 +70,7 @@ import { DlCodeEditorDemo } from './DlCodeEditor'
 import DlLabelPickerDemo from './DlLabelPickerDemo.vue'
 import DlInfiniteScrollDemo from './DlInfiniteScrollDemo.vue'
 import DlMarkdownDemo from './DlMarkdownDemo.vue'
+import DlTextInputDemo from './DlTextInputDemo.vue'
 
 export default {
     AvatarDemo,
@@ -140,5 +141,6 @@ export default {
     DlLayoutDemo,
     DlLabelPickerDemo,
     DlInfiniteScrollDemo,
-    DlMarkdownDemo
+    DlMarkdownDemo,
+    DlTextInputDemo
 }

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} ${