@dataloop-ai/components 0.16.62 → 0.17.0

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

@@ -1,5 +1,10 @@
 import { SyntaxColorSchema } from '../types'
 
+const SPAN_STYLES = `overflow: hidden;
+                     text-overflow: ellipsis;
+                     display: inline-block;
+                     max-width: 100%`
+
 let editor = document.getElementById('editor')
 let styleModel: SyntaxColorSchema
 
@@ -90,13 +95,13 @@ function renderText(text: string) {
     const words = text?.split(/(\s+)/)
     const output = words?.map((word) => {
         if (styleModel.keywords.values.includes(word)) {
-            return `<strong>${word}</strong>`
+            return `<strong style='${SPAN_STYLES}'>${word}</strong>`
         } else if (styleModel.fields.values.includes(word)) {
-            return `<span style='color:${styleModel.fields.color}'>${word}</span>`
+            return `<span style='color:${styleModel.fields.color}; ${SPAN_STYLES}'>${word}</span>`
         } else if (styleModel.operators.values.includes(word)) {
-            return `<span style='color:${styleModel.operators.color}'>${word}</span>`
+            return `<span style='color:${styleModel.operators.color}; ${SPAN_STYLES}'>${word}</span>`
         } else {
-            return `<span>${word}</span>`
+            return `<span style='${SPAN_STYLES}'>${word}</span>`
         }
     })
     return output?.join('')

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

@@ -1,4 +1,4 @@
-import { ColorSchema, SyntaxColorSchema } from '../types'
+import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
 import {
     operators,
     Alias,
@@ -7,6 +7,23 @@ import {
     dateIntervalPattern
 } from '../../../../../hooks/use-suggestions'
 
+export function getTabItems(filters: Filters) {
+    return [
+        {
+            label: `Saved DQL Queries (${filters.saved.length})`,
+            name: 'saved'
+        },
+        {
+            label: `Recent Searches (${filters.recent.length})`,
+            name: 'recent'
+        },
+        {
+            label: `Suggested Searches (${filters.suggested.length})`,
+            name: 'suggested'
+        }
+    ]
+}
+
 export function replaceWithJsDates(str: string) {
     const intervals = str.match(dateIntervalPattern)
     const starts = str.match(startDatePattern)

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

@@ -326,8 +326,7 @@ export default defineComponent({
             validator: optionsValidator
         },
         capitalizedOptions: { type: Boolean, default: false },
-        disableClearBtn: { type: Boolean, default: false },
-        disableDropdownIconPadding: { type: Boolean, default: false },
+        withoutDropdownIconPadding: { type: Boolean, default: false },
         clearButtonTooltip: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
         preserveSearch: { type: Boolean, default: false }
@@ -513,7 +512,7 @@ export default defineComponent({
             classes.push(`dl_select__select--${this.size}`)
             classes.push('dl_select__select--append')
 
-            if (this.disableDropdownIconPadding) {
+            if (this.withoutDropdownIconPadding) {
                 classes.push('dl_select__select--append-without_padding')
             }
             if (this.selectedIndex !== -1) {
@@ -547,7 +546,7 @@ export default defineComponent({
         cssVars(): Record<string, string> {
             return {
                 '--dl-select-width': this.width,
-                '--dl-select-expand-icon-width': this.disableDropdownIconPadding
+                '--dl-select-expand-icon-width': this.withoutDropdownIconPadding
                     ? '16px'
                     : '28px'
             }

package/src/components/compound/DlSlider/DlSlider.vue

@@ -59,7 +59,7 @@
                         size="m"
                         label="Reset"
                         :disabled="disabled || readonly"
-                        data-test="non-editable-slider-btn"
+                        data-test="non-editable-slider-button"
                         @click="handleResetButtonClick"
                     />
                     <dl-slider-input

package/src/components/compound/DlStepper/DlStepper.vue

@@ -9,7 +9,7 @@
     >
         <dl-stepper-header
             :header-title="headerTitle"
-            :hide-close-btn="hideCloseBtn"
+            :hide-close-button="hideCloseButton"
             @close="closeStepper"
         />
         <div class="dl-stepper-content">
@@ -131,7 +131,7 @@ export default defineComponent({
         disabledNextStep: Boolean,
         disabledPrevStep: Boolean,
         isDone: Boolean,
-        hideCloseBtn: Boolean,
+        hideCloseButton: Boolean,
         sidebarNavigation: { type: Boolean, default: true }
     },
     emits: ['update:modelValue', 'done', 'next', 'prev', 'set-step', 'close'],

package/src/components/compound/DlStepper/components/DlStepperFooter.vue

@@ -5,7 +5,7 @@
                 <dl-button
                     :disabled="disabledPrevStep"
                     outlined
-                    :colors-object="prevBtnColorsObject"
+                    :colors-object="prevButtonColorsObject"
                     :label="prevLabel"
                     @click="$emit('prev')"
                 />
@@ -60,10 +60,10 @@ export default defineComponent({
     },
     emits: ['close', 'done', 'next', 'prev'],
     data(): {
-        prevBtnColorsObject: ButtonColors
+        prevButtonColorsObject: ButtonColors
     } {
         return {
-            prevBtnColorsObject: {
+            prevButtonColorsObject: {
                 [ButtonState.Active]: {
                     [ButtonPart.Text]: 'var(--dl-color-darker)',
                     [ButtonPart.Background]: 'var(--dl-color-transparent)',

package/src/components/compound/DlStepper/components/DlStepperHeader.vue

@@ -9,7 +9,7 @@
             </dl-typography>
         </slot>
         <dl-button
-            v-if="!hideCloseBtn"
+            v-if="!hideCloseButton"
             text-color="dl-color-darker"
             flat
             icon="icon-dl-close"
@@ -34,7 +34,7 @@ export default defineComponent({
             required: false,
             default: ''
         },
-        hideCloseBtn: Boolean
+        hideCloseButton: Boolean
     },
     emits: ['close']
 })

package/src/components/compound/DlTabs/components/TabsWrapper.vue

@@ -93,7 +93,7 @@ export default defineComponent({
     }
 }
 
-::v-deep .dl-btn-content {
+::v-deep .dl-button-content {
     padding-top: 1px;
     min-height: var(--dl-tabs-arrows-size);
     width: var(--dl-tabs-arrows-size);

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

@@ -4,26 +4,29 @@
         class="container"
     >
         <dl-button
-            v-for="(btn, idx) in toggleButtons"
+            v-for="(button, idx) in toggleButtons"
             :key="idx"
             :styles="
-                getStyles(btn.value === scopedValue, hoverBtn === btn.value)
+                getStyles(
+                    button.value === scopedValue,
+                    hoverButton === button.value
+                )
             "
             data-test="button"
             fluid
-            @mouseenter="hoverBtn = btn.value"
-            @mouseleave="hoverBtn = null"
-            @click="value = btn.value"
+            @mouseenter="hoverButton = button.value"
+            @mouseleave="hoverButton = null"
+            @click="value = button.value"
         >
             <span v-if="!$slots.button && !$slots[`button-${idx}`]">
-                {{ btn.label }}
+                {{ button.label }}
             </span>
             <slot
-                :label="btn.label"
+                :label="button.label"
                 :name="`button-${idx}`"
             />
             <slot
-                :label="btn.label"
+                :label="button.label"
                 name="button"
             />
         </dl-button>
@@ -60,7 +63,7 @@ export default defineComponent({
     emits: ['update:modelValue', 'change'],
     data: () => ({
         scopedValue: null as string | number,
-        hoverBtn: null as string | number
+        hoverButton: null as string | number
     }),
     computed: {
         value: {
@@ -87,8 +90,8 @@ export default defineComponent({
         this.scopedValue = this.value
     },
     methods: {
-        getStyles(activeBtn: boolean, hovered: boolean) {
-            if (activeBtn) {
+        getStyles(activeButton: boolean, hovered: boolean) {
+            if (activeButton) {
                 return ButtonsStyles.activeStyles
             } else if (hovered) {
                 return ButtonsStyles.hoverStyles

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

@@ -101,7 +101,7 @@ export default defineComponent({
             }
         },
         inlineStyles(): Record<string, string> {
-            return { display: this.inline ? 'inline' : 'flex;' }
+            return { display: this.inline ? 'inline' : 'flex' }
         },
         // needed to allow external source of icons that do not use class based
         externalIcon(): boolean {

package/src/components/essential/DlSpinner/styles/spinnerStyles.scss

@@ -108,4 +108,4 @@
     100% {
         opacity: 1;
     }
-}
+}

package/src/components/essential/DlTypography/DlTypography.vue

@@ -12,6 +12,7 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { getColor } from '../../../utils'
+import { transformOptions } from '../../shared/types'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
@@ -30,7 +31,12 @@ export default defineComponent({
             required: false,
             default: null
         },
-        uppercase: Boolean,
+        transform: {
+            type: String,
+            default: 'default',
+            validator: (value: string): boolean =>
+                transformOptions.includes(value)
+        },
         bold: Boolean,
         color: {
             type: String,
@@ -46,7 +52,7 @@ export default defineComponent({
         styles(): Record<string, string | number> {
             const styles: Record<string, string | number> = {
                 color: getColor(this.color as string, 'dl-color-darker'),
-                textTransform: this.uppercase ? 'uppercase' : 'none',
+                textTransform: this.letterClass ? null : this.transform,
                 fontWeight: this.bold ? 'bold' : 400
             }
 
@@ -56,6 +62,12 @@ export default defineComponent({
 
             return styles
         },
+        letterClass(): string {
+            if (this.transform === 'default') {
+                return 'first-letter-capitalized'
+            }
+            return null
+        },
         classes(): string[] {
             const classes = [`dl-typography`]
 
@@ -71,6 +83,10 @@ export default defineComponent({
                 }
             }
 
+            if (this.letterClass) {
+                classes.push(this.letterClass)
+            }
+
             return classes
         }
     }

package/src/components/shared/types.ts

@@ -1 +1,7 @@
-export {}
+export const transformOptions: string[] = [
+    'none',
+    'capitalize',
+    'uppercase',
+    'lowercase',
+    'default' // Default behavior is to make only the first letter of the sentence is capital
+]

package/src/demos/DlAlertDemo.vue

@@ -39,10 +39,23 @@
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
+        <dl-alert
+            style="margin-top: 20px"
+            fluid
+            type="warning"
+        >
+            this is an annoying message with link, this is an annoying message
+            with linkthis is an annoying message with linkthis is an annoying
+            message with linkthis is an annoying message with linkthis is an
+            annoying message with linkthis is an annoying message with linkthis
+            is an annoying message with link
+            <span>
+                Please
+                <dl-link color="dl-color-link">Contact us</dl-link>.</span>
+        </dl-alert>
         <DlAlert
             type="success"
             text="Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
-            :closable="true"
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
@@ -50,13 +63,14 @@
 </template>
 
 <script lang="ts">
-import { DlAlert } from '../components'
+import { DlAlert, DlLink } from '../components'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     name: 'DlAlertDemo',
     components: {
-        DlAlert
+        DlAlert,
+        DlLink
     },
     template: 'dl-alert-demo'
 })

package/src/demos/DlDialogBoxDemo.vue

@@ -4,6 +4,14 @@
             v-model="draggable"
             left-label="Draggable"
         />
+        <dl-switch
+            v-model="fullscreen"
+            left-label="Full screen"
+        />
+        <dl-switch
+            v-model="fullHeight"
+            left-label="Full height"
+        />
         <dl-button @click="openModal">
             Open modal
         </dl-button>
@@ -11,6 +19,8 @@
             ref="modalOne"
             v-model="isOpenedFirstModal"
             :draggable="draggable"
+            :full-height="fullHeight"
+            :fullscreen="fullscreen"
         >
             <template #header>
                 <dl-dialog-box-header
@@ -136,6 +146,8 @@ export default defineComponent({
         const modalOne = ref<any>(null)
         const modalTwo = ref<any>(null)
         const draggable = ref(true)
+        const fullscreen = ref(false)
+        const fullHeight = ref(false)
         const isOpenedFirstModal = ref(false)
 
         const openModal = () => {
@@ -178,7 +190,9 @@ export default defineComponent({
             modalOne,
             modalTwo,
             isOpenedFirstModal,
-            draggable
+            draggable,
+            fullscreen,
+            fullHeight
         }
     }
 })

package/src/demos/DlDropdownButtonDemo.vue

@@ -69,7 +69,7 @@
                 auto-close
                 split
                 :label="name"
-                main-btn-style="width: 120px"
+                main-button-style="width: 120px"
                 @click="onClick"
             >
                 <dl-list>
@@ -198,7 +198,7 @@
                     auto-close
                     :model-value="showing"
                     :label="name"
-                    main-btn-style="width: 150px;"
+                    main-button-style="width: 150px;"
                     @show="onOpen"
                 >
                     <dl-list>
@@ -239,7 +239,7 @@
                     auto-close
                     :model-value="showing"
                     label="Ellipsis for very long text"
-                    main-btn-style="width: 150px;"
+                    main-button-style="width: 150px;"
                     :overflow="true"
                     :no-wrap="true"
                     tooltip="Tooltip message"
@@ -288,7 +288,7 @@
                     auto-close
                     :model-value="showing"
                     :label="arrowNavigationLabel"
-                    main-btn-style="width: 150px;"
+                    main-button-style="width: 150px;"
                     :overflow="true"
                     :no-wrap="true"
                     tooltip="Tooltip message"

package/src/demos/DlSearchDemo.vue

@@ -3,7 +3,7 @@
         <dl-search
             v-model="searchValue"
             size="l"
-            with-search-btn
+            with-search-button
             highlight-matches
             placeholder="Search here"
             :auto-suggest-items="suggestItems"

package/src/demos/DlStepperDemo/SimpleStepper.vue

@@ -2,7 +2,7 @@
     <div class="dl-stepper-wrapper">
         <dl-stepper
             v-model="isOpen"
-            :hide-close-btn="true"
+            :hide-close-button="true"
             done-button-label="Create"
             width="calc(100vh-400px)"
             header-title="Create New Task"

package/src/demos/DlStepperDemo/steps/DataStep.vue

@@ -70,7 +70,7 @@
                         style="width: 60px; margin: 0 10px 0 15px"
                         size="m"
                         dense
-                        disable-clear-btn
+                        hide-clear-button
                     />
                     <dl-typography color="dl-color-medium">Items Limit</dl-typography>
                 </div>

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -41,100 +41,65 @@ export default defineComponent({
         DlSmartSearch,
         DlCheckbox
     },
-    setup() {
-        return { aliases, schema }
-    },
     data() {
         return {
+            schema,
+            aliases,
             switchState: false,
             isLoading: false,
-            filters: [
-                {
-                    label: 'Saved DQL Queries',
-                    name: 'saved',
-                    queries: [
-                        {
-                            name: 'Query 1',
-                            query: '{"q": 1}'
-                        },
-                        {
-                            name: 'Query 2',
-                            query: '{"query2": "query2"}'
-                        },
-                        {
-                            name: 'Query 3',
-                            query: '{"query3": "query3"}'
-                        },
-                        {
-                            name: 'Query 4',
-                            query: JSON.stringify({
-                                aa: 'bb',
-                                no: [{ as: 'sa' }, { zz: 'ss' }]
-                            })
-                        }
-                    ]
-                },
-                {
-                    label: 'Recent Searches',
-                    name: 'recent',
-                    queries: [
-                        {
-                            name: 'Query 4',
-                            query: ''
-                        },
-                        {
-                            name: 'Query 5',
-                            query: ''
-                        },
-                        {
-                            name: 'Query 6',
-                            query: ''
-                        }
-                    ]
-                },
-                {
-                    label: 'Suggested Searches',
-                    name: 'suggested',
-                    queries: [
-                        {
-                            name: 'Query 7',
-                            query: ''
-                        },
-                        {
-                            name: 'Query 8',
-                            query: ''
-                        },
-                        {
-                            name: 'Query 9',
-                            query: ''
-                        }
-                    ]
-                }
-            ]
+            filters: {
+                saved: [
+                    {
+                        name: 'Query 1',
+                        query: '{"q": 1}'
+                    },
+                    {
+                        name: 'Query 2',
+                        query: '{"query2": "query2"}'
+                    },
+                    {
+                        name: 'Query 3',
+                        query: '{"query3": "query3"}'
+                    },
+                    {
+                        name: 'Query 4',
+                        query: '{"age": 12, "name": "john"}'
+                    }
+                ],
+                recent: [],
+                suggested: []
+            } as { [key: string]: Query[] }
         }
     },
     methods: {
-        handleSearchQuery({ query }: { query: string }) {
+        handleSearchQuery(query: Query, queryString: string) {
             this.isLoading = true
-            console.log(`Searching for: ${query}...`)
+            console.log(`Searching for: ${query.query}...`)
             const search = setTimeout(() => {
-                console.log(`Results: ${query}`)
+                console.log(`Results: ${query.query}`)
                 this.isLoading = false
             }, 2000)
+
+            if (this.filters.recent[-1]?.name !== queryString) {
+                this.filters.recent.push({
+                    name: queryString || query.name,
+                    query: query.query
+                })
+            }
         },
-        handleSaveQuery(query: Query) {
-            const saveQueryIndex = this.filters[0].queries.findIndex(
+        handleSaveQuery(query: Query, type: string) {
+            const saveQueryIndex = this.filters[type].findIndex(
                 (q: Query) => q.name === query.name || q.query === query.query
             )
             if (saveQueryIndex !== -1) {
-                this.filters[0].queries[saveQueryIndex] = query
+                this.filters[type][saveQueryIndex] = query
             } else {
-                this.filters[0].queries.push(query)
+                this.filters[type].push(query)
             }
         },
 
-        handleRemoveQuery(query: Query) {
-            this.filters[0].queries = this.filters[0].queries.filter(
+        handleRemoveQuery(query: Query, type: string) {
+            this.filters[type] = this.filters[type].filter(
                 (q: Query) => q.name !== query.name
             )
         }

package/src/hooks/use-suggestions.ts

@@ -213,6 +213,7 @@ const getError = (
     return expressions
         .filter(({ field, value }) => field !== null && value !== null)
         .reduce<string | null>((acc, { field, value, operator }, _, arr) => {
+            if (acc === 'warning') return acc
             const aliasObj = getAliasObjByAlias(aliases, field)
             if (!aliasObj) return 'warning'
             const valid = isValidByDataType(
@@ -276,9 +277,9 @@ const isValidBoolean = (str: string) => {
 }
 
 const isValidString = (str: string) => {
-    return !!str.match(
-        /^('[A-Za-z0-9._~()'!*:@,;+?-]*')|("[A-Za-z0-9._~()'!*:@,;+?-]*")$/
-    )
+    const match = str.match(/(?<=\")(.*?)(?=\")|(?<=\')(.*?)(?=\')/)
+    if (!match) return false
+    return match[0] === removeQuotes(str)
 }
 
 const getOperatorByDataType = (dataType: string) => {
@@ -376,3 +377,7 @@ const matchStringEnd = (input: string, str: string) =>
 export const removeBrackets = (str: string) => {
     return str.replace(/\(/g, '').replace(/\)/g, '')
 }
+
+const removeQuotes = (str: string) => {
+    return str.replaceAll('"', '').replaceAll("'", '')
+}