@dataloop-ai/components 0.13.0

package/src/components/DlSmartSearch/DlSuggestionsDropdown.vue

@@ -0,0 +1,73 @@
+<template>
+    <div
+        v-if="suggestions.length > 0"
+        class="dl-suggestions-dropdown"
+    >
+        <dl-menu
+            :target="defaultTarget"
+            :offset="offset"
+            :disabled="disabled"
+            fit
+            :model-value="modelValue"
+            @update:modelValue="$emit('update:modelValue', $event)"
+        >
+            <dl-list>
+                <dl-list-item
+                    v-for="item in suggestions"
+                    :key="item"
+                    :clickable="true"
+                    @click="$emit('set-input-value', item)"
+                >
+                    {{ item }}
+                </dl-list-item>
+            </dl-list>
+        </dl-menu>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlMenu } from '../DlMenu'
+import DlList from '../DlList.vue'
+import { DlListItem } from '../DlListItem'
+
+export default defineComponent({
+    components: {
+        DlMenu,
+        DlList,
+        DlListItem
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        expanded: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        suggestions: {
+            type: Array as PropType<string[]>,
+            default: () => [] as string[]
+        },
+        offset: {
+            type: Array as PropType<number[]>,
+            default: () => [0, 0]
+        }
+    },
+    emits: ['set-input-value', 'update:modelValue'],
+    computed: {
+        defaultTarget() {
+            return '.dl-smart-search-input__textarea'
+        }
+    }
+})
+</script>
+<style lang="scss" scoped></style>

package/src/components/DlSmartSearch/highlightSyntax.ts

@@ -0,0 +1,169 @@
+import { operators } from '../../hooks/use-suggestions'
+import { ColorSchema } from './types'
+import { Alias } from '../../hooks/use-suggestions'
+import { SyntaxColorSchema } from './types'
+
+let editor = document.getElementById('editor')
+let styleModel: SyntaxColorSchema
+
+function getTextSegments(element: HTMLElement) {
+    if (!element) return
+    const textSegments: { text: string; node: Node }[] = []
+    Array.from(element.childNodes).forEach((node: Node) => {
+        switch (node.nodeType) {
+            case Node.TEXT_NODE:
+                textSegments.push({ text: node.nodeValue, node })
+                break
+
+            case Node.ELEMENT_NODE:
+                textSegments.splice(
+                    textSegments.length,
+                    0,
+                    ...getTextSegments(node as HTMLElement)
+                )
+                break
+
+            default:
+                throw new Error(`Unexpected node type: ${node.nodeType}`)
+        }
+    })
+    return textSegments
+}
+
+export function updateEditor(model: SyntaxColorSchema) {
+    styleModel = model
+    editor = document.getElementById('editor')
+    if (!editor) return
+    const sel = window.getSelection()
+    const textSegments = getTextSegments(editor)
+    const textContent = textSegments?.map(({ text }) => text).join('')
+    let anchorIndex = null
+    let focusIndex = null
+    let currentIndex = 0
+    textSegments?.forEach(({ text, node }) => {
+        if (node === sel.anchorNode) {
+            anchorIndex = currentIndex + sel.anchorOffset
+        }
+        if (node === sel.focusNode) {
+            focusIndex = currentIndex + sel.focusOffset
+        }
+        currentIndex += text.length
+    })
+
+    editor.innerHTML = renderText(textContent)
+
+    restoreSelection(anchorIndex, focusIndex)
+}
+
+function restoreSelection(
+    absoluteAnchorIndex: number,
+    absoluteFocusIndex: number
+) {
+    const sel = window.getSelection()
+    const textSegments = getTextSegments(editor)
+    let anchorNode: Node = editor
+    let anchorIndex = 0
+    let focusNode: Node = editor
+    let focusIndex = 0
+    let currentIndex = 0
+    textSegments.forEach(({ text, node }) => {
+        const startIndexOfNode = currentIndex
+        const endIndexOfNode = startIndexOfNode + text.length
+        if (
+            startIndexOfNode <= absoluteAnchorIndex &&
+            absoluteAnchorIndex <= endIndexOfNode
+        ) {
+            anchorNode = node
+            anchorIndex = absoluteAnchorIndex - startIndexOfNode
+        }
+        if (
+            startIndexOfNode <= absoluteFocusIndex &&
+            absoluteFocusIndex <= endIndexOfNode
+        ) {
+            focusNode = node
+            focusIndex = absoluteFocusIndex - startIndexOfNode
+        }
+        currentIndex += text.length
+    })
+
+    sel.setBaseAndExtent(anchorNode, anchorIndex, focusNode, focusIndex)
+}
+
+function renderText(text: string) {
+    const words = text?.split(/(\s+)/)
+    const output = words?.map((word) => {
+        if (styleModel.keywords.values.includes(word)) {
+            return `<strong>${word}</strong>`
+        } else if (styleModel.fields.values.includes(word)) {
+            return `<span style='color:${styleModel.fields.color}'>${word}</span>`
+        } else if (styleModel.operators.values.includes(word)) {
+            return `<span style='color:${styleModel.operators.color}'>${word}</span>`
+        } else {
+            return `<span>${word}</span>`
+        }
+    })
+    return output?.join('')
+}
+
+export function setCaret(target: HTMLElement) {
+    const range = document.createRange()
+    const sel = window.getSelection()
+    range.selectNodeContents(target)
+    range.collapse(false)
+    sel.removeAllRanges()
+    sel.addRange(range)
+    target.focus()
+}
+
+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]
+    }
+}
+
+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
+        }
+    }
+}

package/src/components/DlSmartSearch/index.ts

@@ -0,0 +1,4 @@
+import DlSmartSearch from './DlSmartSearch.vue'
+import DlJsonEditor from './DlJsonEditor.vue'
+
+export { DlSmartSearch, DlJsonEditor }

package/src/components/DlSmartSearch/types.ts

@@ -0,0 +1,36 @@
+export interface Query {
+    name: string
+    query: string | null
+}
+
+export interface Filter {
+    name: string
+    label: string
+    queries: Query[]
+}
+
+export interface ColorSchema {
+    fields: string
+    operators: string
+    keywords: string
+}
+
+export interface SearchStatus {
+    type: string
+    message: string
+}
+
+export type SyntaxColorSchema = {
+    fields: {
+        values: string[]
+        color: string
+    }
+    operators: {
+        values: string[]
+        color: string
+    }
+    keywords: {
+        values: string[]
+        color: string
+    }
+}

package/src/components/DlSmartSearch/utils.ts

@@ -0,0 +1,45 @@
+import { dateIntervalPattern } from '../../hooks/use-suggestions'
+import { DateInterval } from '../DlDatePicker/types'
+
+export const isEndOfString = (str: string, pattern: RegExp): boolean => {
+    const trimmed = str.trim()
+    const matches = trimmed.match(pattern)
+
+    if (!matches || !matches.length) return false
+
+    const lastMatch = matches[matches.length - 1]
+    return trimmed.lastIndexOf(lastMatch) + lastMatch.length === trimmed.length
+}
+
+export const isEndingWithDateIntervalPattern = (str: string) =>
+    isEndOfString(str, dateIntervalPattern)
+
+export const replaceDateInterval = (
+    str: string,
+    dateInterval: DateInterval
+) => {
+    const dateFrom = new Date(dateInterval.from)
+    const dateTo = new Date(dateInterval.to)
+
+    const newStr = `(From ${formatDate(dateFrom)} To ${formatDate(dateTo)})`
+
+    return replaceLastOccurrence(str, newStr)
+}
+
+const formatDate = (date: Date): string => {
+    return `(${addZero(date.getDate())}/${addZero(
+        date.getMonth() + 1
+    )}/${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)
+
+    return matches && matches.length
+        ? string.replace(matches[matches.length - 1], replaceValue)
+        : string
+}

package/src/components/DlStepper/DlStepper.vue

@@ -0,0 +1,196 @@
+<template>
+    <dl-stepper-container
+        v-if="isOpen"
+        :id="uuid"
+        class="dl-stepper-container"
+        :style="cssVars"
+        :transition="withTransition"
+        :duration="transitionDuration"
+    >
+        <dl-stepper-header
+            :header-title="headerTitle"
+            :hide-close-btn="hideCloseBtn"
+            @close="closeStepper"
+        />
+        <div class="dl-stepper-content">
+            <dl-stepper-sidebar
+                :steps="steps"
+                :bg-color="bgColor"
+                :sidebar-navigation="sidebarNavigation"
+                @step-click="$emit('set-step', $event)"
+            />
+            <div class="dl-stepper-content dl-stepper-content--slot">
+                <dl-stepper-content
+                    v-if="state"
+                    :title="contentTitle"
+                    :error="state.error"
+                    :completed="state.completed"
+                >
+                    <template #header>
+                        <slot
+                            name="content-header"
+                            :state="state"
+                        />
+                    </template>
+                    <slot
+                        :name="state.value"
+                        :state="state"
+                    />
+                </dl-stepper-content>
+                <dl-stepper-footer
+                    :finished="isDone"
+                    :done-button-label="doneButtonLabel"
+                    :next-button-label="nextButtonLabel"
+                    :prev-button-label="prevButtonLabel"
+                    :disabled-next-step="disabledNextStep"
+                    :disabled-prev-step="disabledPrevStep"
+                    @next="$emit('next')"
+                    @prev="$emit('prev')"
+                    @done="$emit('done')"
+                    @close="closeStepper"
+                />
+            </div>
+        </div>
+    </dl-stepper-container>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import DlStepperContainer from './DlStepperContainer.vue'
+import DlStepperHeader from '../../components/DlStepper/DlStepperHeader.vue'
+import DlStepperFooter from '../../components/DlStepper/DlStepperFooter.vue'
+import DlStepperSidebar from '../../components/DlStepper/DlStepperSidebar.vue'
+import DlStepperContent from '../../components/DlStepper/DlStepperContent.vue'
+import { StepState } from './interfaces'
+import { Step } from './Step'
+import { getColor } from '../../utils'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    components: {
+        DlStepperHeader,
+        DlStepperFooter,
+        DlStepperSidebar,
+        DlStepperContent,
+        DlStepperContainer
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        steps: {
+            type: Array as PropType<Step[]>,
+            default: () => [] as Step[]
+        },
+        nextStep: {
+            type: Object as PropType<StepState | null>,
+            default: () => null as StepState | null
+        },
+        prevStep: {
+            type: Object as PropType<StepState | null>,
+            default: () => null as StepState | null
+        },
+        state: {
+            type: Object as PropType<StepState>,
+            default: () => {}
+        },
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        headerTitle: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        contentTitle: {
+            type: String,
+            default: ''
+        },
+        doneButtonLabel: {
+            type: String,
+            required: false,
+            default: 'Done'
+        },
+        width: {
+            type: String,
+            required: false,
+            default: '700px'
+        },
+        bgColor: {
+            type: String,
+            required: false,
+            default: 'dl-color-fill-third'
+        },
+        withTransition: Boolean,
+        transitionDuration: {
+            type: Number,
+            required: false,
+            default: 0.3
+        },
+        disabledNextStep: Boolean,
+        disabledPrevStep: Boolean,
+        isDone: Boolean,
+        hideCloseBtn: Boolean,
+        sidebarNavigation: { type: Boolean, default: true }
+    },
+    emits: ['update:modelValue', 'done', 'next', 'prev', 'set-step', 'close'],
+    data() {
+        return {
+            uuid: `dl-stepper-${v4()}`,
+            isOpen: this.modelValue
+        }
+    },
+    computed: {
+        nextButtonLabel(): string {
+            return this.nextStep?.title ?? null
+        },
+        prevButtonLabel(): string {
+            return this.prevStep?.title ?? null
+        },
+        cssVars(): Record<string, string | number> {
+            return {
+                '--dl-stepper-width': this.width,
+                '--dl-stepper-bg': getColor(this.bgColor, 'dl-color-fill-third')
+            }
+        }
+    },
+    watch: {
+        modelValue(newVal: boolean) {
+            this.isOpen = newVal
+            if (newVal) document.documentElement.style.overflow = 'hidden'
+            else document.documentElement.style.overflow = 'auto'
+        }
+    },
+    methods: {
+        closeStepper() {
+            this.$emit('close')
+            this.$emit('update:modelValue', false)
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-stepper-container {
+    height: 100%;
+    overflow: auto;
+    width: var(--dl-stepper-width);
+    display: flex;
+    flex-direction: column;
+    background-color: var(--dl-color-panel-background);
+    border: 1px solid var(--dl-color-separator);
+    border-radius: 2px;
+}
+
+.dl-stepper-content {
+    display: flex;
+    flex-grow: 1;
+    position: relative;
+
+    &--slot {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+}
+</style>

package/src/components/DlStepper/DlStepperContainer.vue

@@ -0,0 +1,55 @@
+<template>
+    <transition
+        name="fade"
+        appear
+        :style="cssVars"
+    >
+        <div>
+            <slot />
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlStepperContainer',
+    props: {
+        duration: {
+            type: Number,
+            default: 0.3
+        },
+        transition: Boolean
+    },
+    computed: {
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-transition-duration':
+                    (this.transition ? this.duration : 0) + 's'
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.fade-enter,
+.fade-enter-active {
+    animation: fade-in var(--dl-transition-duration);
+}
+
+.fade-leave-active,
+.fade-leave-to {
+    animation: fade-in var(--dl-transition-duration) reverse;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+</style>

package/src/components/DlStepper/DlStepperContent.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="stepper-content">
+        <slot name="header">
+            <div class="stepper-content--header">
+                <dl-typography
+                    size="h3"
+                    variant="h3"
+                    style="text-transform: capitalize"
+                >
+                    {{ title }}
+                </dl-typography>
+                <div class="flex justify-end">
+                    <dl-chip
+                        v-if="error"
+                        text-color="dl-color-text-darker-buttons"
+                        color="dl-color-negative-background"
+                    >
+                        {{ error }}
+                    </dl-chip>
+                    <dl-chip
+                        v-else-if="completed"
+                        text-color="dl-color-text-darker-buttons"
+                        color="dl-color-positive-background"
+                    >
+                        completed
+                    </dl-chip>
+                </div>
+            </div>
+        </slot>
+        <div class="stepper-content--content">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlChip from '../DlChip'
+import DlTypography from '../DlTypography.vue'
+
+export default defineComponent({
+    name: 'DlStepperContent',
+    components: {
+        DlChip,
+        DlTypography
+    },
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        error: {
+            type: String,
+            default: ''
+        },
+        completed: Boolean
+    },
+    emits: ['next', 'prev']
+})
+</script>
+<style scoped lang="scss">
+.stepper-content {
+    padding: 20px 50px;
+    // max-height: calc(100vh - 175px);
+
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-bottom: 70px;
+
+    overflow: auto;
+    &::-webkit-scrollbar {
+        width: 1px;
+        height: 1px;
+    }
+
+    &--header {
+        display: flex;
+        height: 20px;
+    }
+
+    &--content {
+        &::-webkit-scrollbar {
+            width: 1px;
+            height: 1px;
+        }
+    }
+
+    &--content {
+        margin-top: 20px;
+    }
+
+    .justify-end {
+        margin-left: auto;
+    }
+}
+</style>