@dataloop-ai/components 0.18.145 → 0.19.0

package/src/components/compound/DlInput/components/InputFileElement.vue

@@ -0,0 +1,97 @@
+<template>
+    <div
+        class="input-file-element"
+        @mouseenter="visibleMenu = true"
+        @mouseleave="visibleMenu = false"
+    >
+        <div
+            v-if="file.image"
+            class="file-image"
+            :style="`background-image: url(${file.image})`"
+        />
+        <div
+            v-else
+            class="file-image input-file-element--default"
+        >
+            <dl-icon
+                size="50px"
+                icon="icon-dl-file"
+            />
+        </div>
+        <div
+            v-if="visibleMenu"
+            class="input-file-element__menu"
+        >
+            <dl-icon
+                v-if="file.image"
+                class="input-file-element--icon"
+                icon="icon-dl-zoom-in"
+                @click="$emit('zoom-image', file)"
+            />
+            <dl-icon
+                class="input-file-element--icon"
+                icon="icon-dl-edit"
+                @click="$emit('rename-file', file)"
+            />
+            <dl-icon
+                class="input-file-element--icon"
+                icon="icon-dl-discard"
+                @click="$emit('remove-file', file.id)"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlInputFile } from '../types'
+import { DlIcon } from '../../../essential'
+export default defineComponent({
+    components: {
+        DlIcon
+    },
+    props: {
+        file: {
+            type: Object as PropType<DlInputFile>,
+            default: null
+        }
+    },
+    emits: ['remove-file', 'zoom-image', 'rename-file'],
+    data() {
+        return {
+            visibleMenu: false
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.input-file-element {
+    position: relative;
+    &--default {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    &__menu {
+        background-color: var(--dl-color-panel-background);
+        border-radius: 2px;
+        padding: 5px;
+        display: flex;
+        gap: 5px;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
+    &--icon {
+        cursor: pointer;
+    }
+    padding: 5px;
+}
+.file-image {
+    width: 100px;
+    height: 100px;
+    background-size: cover;
+    background-position: center;
+}
+</style>

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

@@ -0,0 +1,12 @@
+export interface DlInputSuggestion {
+    suggestion: string
+    image: string
+    click: boolean
+}
+
+export interface DlInputFile {
+    id: string
+    name: string
+    image: string
+    data: ArrayBuffer
+}

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

@@ -0,0 +1,117 @@
+import {
+    getInnerText,
+    getSelectionOffset,
+    setSelectionOffset
+} from '../../../utils'
+import { DlInputSuggestion } from './types'
+
+export function addEventListenersToElement(
+    element: HTMLElement,
+    eventHandlers: Record<string, (e: any) => void>
+) {
+    for (const eventType in eventHandlers) {
+        const handler = eventHandlers[eventType]
+        element.addEventListener(eventType, handler)
+    }
+}
+
+export function clearSuggestion(text: string, suggestion: string) {
+    return text.split(' ').slice(0, -1).join(' ') + ' ' + suggestion
+}
+
+export function setInnerHTMLWithCursor(
+    inputEl: HTMLElement,
+    action: (str: string) => void
+) {
+    const [start, end] = getSelectionOffset(inputEl)
+    const textBefore = getInnerText(inputEl)
+    action(textBefore)
+    setSelectionOffset(inputEl, start, end)
+}
+
+export function getSuggestItems(
+    suggestions: DlInputSuggestion[],
+    text: string
+) {
+    if (!text.trim()) {
+        return suggestions
+    }
+    const lowered = text.toLowerCase()
+    const split = lowered.split(' ')
+    const lastKeyword = split[split.length - 1]
+    return suggestions.filter((item) => {
+        const lowercasedSuggestion = item.suggestion.toLowerCase()
+        return (
+            lowercasedSuggestion !== lastKeyword &&
+            lowercasedSuggestion.includes(lastKeyword)
+        )
+    })
+}
+
+export async function readClipboard(): Promise<{ type: string; data: any }[]> {
+    // removing typing of clipboard for now as it causes conflicts somehow
+
+    const fetchItemType = async (item: any, type: string) => {
+        const itemType: Blob = await item.getType(type)
+        return { type: itemType.type, data: itemType }
+    }
+    const promises: Promise<{ type: string; data: any }>[] = []
+
+    const clipboard = navigator.clipboard as any
+    try {
+        const content: any = await clipboard.read()
+        for (const item of content) {
+            for (const type of item.types) {
+                promises.push(fetchItemType(item, type))
+            }
+        }
+
+        return Promise.all(promises)
+    } catch (e) {
+        return []
+    }
+}
+
+export function readBlob(blob: Blob): Promise<ArrayBuffer> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+
+        reader.onload = () => {
+            const result = reader.result as ArrayBuffer
+            resolve(result)
+        }
+
+        reader.onerror = () => {
+            reject(new Error('Error reading Blob'))
+        }
+
+        reader.readAsArrayBuffer(blob)
+    })
+}
+
+export function isArrayBufferImage(arrayBuffer: ArrayBuffer): boolean {
+    const view = new DataView(arrayBuffer)
+
+    if (
+        view.getUint8(0) === 0xff &&
+        view.getUint8(1) === 0xd8 &&
+        view.getUint8(2) === 0xff
+    ) {
+        return true
+    }
+
+    if (
+        view.getUint8(0) === 0x89 &&
+        view.getUint8(1) === 0x50 &&
+        view.getUint8(2) === 0x4e &&
+        view.getUint8(3) === 0x47 &&
+        view.getUint8(4) === 0x0d &&
+        view.getUint8(5) === 0x0a &&
+        view.getUint8(6) === 0x1a &&
+        view.getUint8(7) === 0x0a
+    ) {
+        return true
+    }
+
+    return false
+}

package/src/components/compound/DlSearches/DlSearch/DlSearch.vue

@@ -7,6 +7,7 @@
     >
         <dl-input
             ref="input"
+            class="text-input-area"
             type="text"
             clear-button-tooltip
             :size="size"
@@ -16,6 +17,7 @@
             :highlight-matches="highlightMatches"
             :dense="dense"
             :suggest-menu-width="suggestMenuWidth"
+            :debounce="debounce"
             @input="onChange"
             @focus="onFocus"
             @blur="onBlur"
@@ -87,7 +89,8 @@ export default defineComponent({
         highlightMatches: { type: Boolean, default: false },
         dense: { type: Boolean, default: false },
         withSearchButton: { type: Boolean, default: false },
-        suggestMenuWidth: { type: String, default: 'auto' }
+        suggestMenuWidth: { type: String, default: 'auto' },
+        debounce: { type: Number, default: 0 }
     },
     emits: [
         'input',
@@ -108,6 +111,7 @@ export default defineComponent({
             return BUTTON_SIZES[this.size]
         },
         identifierClass(): string {
+            if (!this.placeholder) return 'dl-search'
             return `dl-search-${this.placeholder}`.replaceAll(' ', '-')
         },
         buttonClasses(): string[] {
@@ -150,6 +154,11 @@ export default defineComponent({
     display: flex;
     align-items: center;
     width: 100%;
+    gap: 10px;
+}
+
+.text-input-area {
+    flex-grow: 1;
 }
 
 ::v-deep .dl-text-input {

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

@@ -105,6 +105,7 @@ import { DlDatePicker } from '../../../DlDateTime'
 import { DlMenu, DlIcon, DlLabel } from '../../../../essential'
 import { isEllipsisActive } from '../../../../../utils/is-ellipsis-active'
 import { useSizeObserver } from '../../../../../hooks/use-size-observer'
+import { setCaretAtTheEnd } from '../../../../../utils'
 import { ColorSchema, SearchStatus, SyntaxColorSchema } from '../types'
 import { debounce, isEqual } from 'lodash'
 import { DlTooltip } from '../../../../shared'
@@ -113,7 +114,6 @@ import { DateInterval } from '../../../DlDateTime/types'
 import {
     isEndingWithDateIntervalPattern,
     replaceDateInterval,
-    setCaret,
     updateEditor,
     isEligibleToChange,
     createColorSchema,
@@ -355,7 +355,7 @@ export default defineComponent({
             setInputValue(
                 clearPartlyTypedSuggestion(input.value.innerText, stringValue)
             )
-            setCaret(input.value)
+            setCaretAtTheEnd(input.value)
         }
 
         const debouncedSetInputValue = debounce(setInputValue, 300)
@@ -599,7 +599,7 @@ export default defineComponent({
                 showDatePicker.value = false
                 showSuggestions.value = true
                 datePickerSelection.value = null
-                setCaret(input.value)
+                setCaretAtTheEnd(input.value)
                 return
             }
 

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

@@ -110,7 +110,7 @@ function renderText(text: string, colorSchema: SyntaxColorSchema) {
     return output?.join('')
 }
 
-export function setCaret(target: HTMLElement) {
+export function setCaretAtTheEnd(target: HTMLElement) {
     const range = document.createRange()
     const sel = window.getSelection()
     range.selectNodeContents(target)

package/src/components/compound/DlSlider/sliderStyles.scss

@@ -1,117 +1,117 @@
 .slider-bar {
-  position: relative;
-  width: 100%;
-  cursor: grab;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  opacity: 1;
-
-  & .track-container {
-    cursor: grab;
-    outline: 0;
+    position: relative;
     width: 100%;
-    padding: 4px 0;
-
-    & .track {
-      height: 2px;
-      width: inherit;
-      position: relative;
-      outline: none;
-      background-color: var(--dl-color-separator);
-
-      & .selection {
-        background: currentColor;
-        border-radius: inherit;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-      }
+    cursor: grab;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    opacity: 1;
 
-      & .thumb {
-        z-index: 1;
+    & .track-container {
+        cursor: grab;
         outline: 0;
-        transition: transform 0.18s ease-out, fill 0.18s ease-out,
-          stroke 0.18s ease-out;
-        top: 50%;
-        transform: scale(1) translate(-50%, -50%);
-        position: absolute;
-        user-select: none;
-        border-radius: 50%;
-      }
+        width: 100%;
+        padding: 4px 0;
+
+        & .track {
+            height: 2px;
+            width: inherit;
+            position: relative;
+            outline: none;
+            background-color: var(--dl-color-separator);
+
+            & .selection {
+                background: currentColor;
+                border-radius: inherit;
+                width: 100%;
+                height: 100%;
+                position: absolute;
+            }
+
+            & .thumb {
+                z-index: 1;
+                outline: 0;
+                transition: transform 0.18s ease-out, fill 0.18s ease-out,
+                    stroke 0.18s ease-out;
+                top: 50%;
+                transform: scale(1) translate(-50%, -50%);
+                position: absolute;
+                user-select: none;
+                border-radius: 50%;
+            }
+        }
     }
-  }
 }
 
 .slider-content {
-  font-size: var(--dl-font-size-body);
-  line-height: 13px;
-  color: var(--text-color);
-
-  .disabled {
-    color: var(--dl-color-separator);
-    cursor: not-allowed;
-  }
-
-  .readonly {
-    cursor: auto;
-  }
-
-  #slider-input {
-    padding: 3px 5px;
-  }
+    font-size: var(--dl-font-size-body);
+    line-height: 13px;
+    color: var(--text-color);
+
+    .disabled {
+        color: var(--dl-color-separator);
+        cursor: not-allowed;
+    }
+
+    .readonly {
+        cursor: auto;
+    }
+
+    #slider-input {
+        padding: 3px 5px;
+    }
 }
 
 .slider {
-  display: flex;
-  justify-content: center;
-  width: var(--width);
-
-  & .slider-bar-container {
     display: flex;
-    align-items: center;
-    width: calc(100% - var(--thumb-size));
-    align-self: center;
-  }
+    justify-content: center;
+    width: var(--width);
+
+    & .slider-bar-container {
+        display: flex;
+        align-items: center;
+        width: calc(100% - var(--thumb-size));
+        align-self: center;
+    }
 
-  & .text {
-    padding: 0;
-    margin-right: 5px;
-    text-align: left;
-  }
+    & .text {
+        padding: 0;
+        margin-right: 5px;
+        text-align: left;
+    }
 
-  & .capitalize::first-letter {
-    text-transform: capitalize;
-  }
+    & .capitalize::first-letter {
+        text-transform: capitalize;
+    }
 }
 
 .slim {
-  align-items: center;
-  flex-direction: row;
+    align-items: center;
+    flex-direction: row;
 }
 
 .non-slim {
-  flex-direction: column;
-
-  & .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-
-    & .right-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      & > * {
-        margin: 0px 5px
-      }
+    flex-direction: column;
+
+    & .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        & .right-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            & > * {
+                margin: 0px 5px;
+            }
+        }
     }
-  }
 }
 
 // override the button padding
 .dl-button {
-  padding: 0;
-  font-size: var(--dl-font-size-body);
-}
+    padding: 0;
+    font-size: var(--dl-font-size-body);
+}