@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/basic/DlCard/DlCard.vue

@@ -1,241 +0,0 @@
-<template>
-    <div
-        class="card"
-        :style="[{ width, height }, computedStyles]"
-    >
-        <div
-            v-if="icon"
-            class="card--icon"
-        >
-            <dl-icon
-                :icon="icon.src"
-                :styles="iconStyles"
-                :size="iconSize"
-                :color="iconColor"
-            />
-        </div>
-        <div
-            v-else-if="image"
-            class="card--image"
-        >
-            <img
-                :src="image.src"
-                :style="imageStyles"
-                :alt="imageAlt"
-            >
-        </div>
-        <div class="card--content">
-            <div>
-                <slot
-                    v-if="!!$slots.header"
-                    name="header"
-                />
-                <div
-                    v-else
-                    class="card--header"
-                >
-                    <span class="card--header_title">{{ title }}</span>
-                    <span class="card--header_shortcut">{{
-                        keyboardShortcut
-                    }}</span>
-                </div>
-                <slot
-                    v-if="!!$slots.content"
-                    name="content"
-                />
-                <span
-                    v-else
-                    class="card--content_text"
-                >{{ text }}</span>
-            </div>
-            <slot
-                v-if="!!$slots.footer"
-                name="footer"
-            />
-            <div
-                v-else
-                class="card--links"
-            >
-                <div
-                    v-for="(link, idx) in links"
-                    :key="idx"
-                    class="card--links_linkItem"
-                >
-                    <div class="card--links_linkItem_icon">
-                        <dl-icon
-                            v-if="link.icon"
-                            :icon="link.icon"
-                            size="12px"
-                        />
-                    </div>
-                    <div class="card--links_linkItem_link">
-                        <dl-link
-                            :external="!!link.external"
-                            :href="link.href"
-                            :newtab="!!link.newtab"
-                        >
-                            {{ link.title }}
-                        </dl-link>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { isString } from 'lodash'
-import { defineComponent, PropType } from 'vue-demi'
-import { stringStyleToRecord } from '../../../utils'
-import { DlIcon } from '../../essential/DlIcon'
-import { DlLink } from '../../essential/DlLink'
-import { IconItem, ImageItem, LinkItem } from './types'
-
-export default defineComponent({
-    name: 'DlCard',
-    components: { DlLink, DlIcon },
-    props: {
-        image: {
-            type: Object as PropType<ImageItem>,
-            default: null
-        },
-        icon: {
-            type: Object as PropType<IconItem>,
-            default: null
-        },
-        title: {
-            type: String,
-            default: ''
-        },
-        text: {
-            type: String,
-            default: ''
-        },
-        keyboardShortcut: {
-            type: String,
-            default: ''
-        },
-        links: {
-            type: Array as PropType<LinkItem[]>,
-            default: () => Array as PropType<LinkItem[]>
-        },
-        height: {
-            type: String,
-            default: 'auto'
-        },
-        width: {
-            type: String,
-            default: '200px'
-        },
-        styles: {
-            type: [Object, String],
-            default: null
-        }
-    },
-    computed: {
-        computedStyles(): Record<string, string> {
-            return isString(this.styles)
-                ? stringStyleToRecord(this.styles)
-                : this.styles
-        },
-        iconStyles(): string {
-            return this.icon?.styles ?? ''
-        },
-        iconSize(): string {
-            return this.icon?.size ?? '50px'
-        },
-        iconColor(): string {
-            return this.icon?.color ?? 'var(--dl-color-darker)'
-        },
-        imageStyles(): string {
-            return this.image?.styles ?? ''
-        },
-        imageAlt(): string {
-            return this.image?.alt ?? ''
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.card {
-    color: var(--dl-color-darker);
-    background-color: var(--dl-color-panel-background);
-    border: 1px solid var(--dl-color-separator);
-    border-radius: 2px;
-    pointer-events: auto;
-    box-shadow: 0px 5px 15px 0px var(--dl-color-shadow);
-
-    &--content {
-        padding: 16px;
-        &_text {
-            font-size: 12px;
-            color: var(--dl-color-medium);
-        }
-    }
-
-    &--header {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-
-        &_title {
-            color: var(--dl-color-darker);
-            font-size: 14px;
-            line-height: 16px;
-            font-weight: 700;
-            margin-right: 10px;
-            margin-bottom: 10px;
-        }
-        &_shortcut {
-            color: #767676;
-            font-size: 10px;
-            line-height: 10px;
-            border-radius: 2px;
-            border: 1px solid #767676;
-            padding: 4px;
-            text-align: center;
-            margin-bottom: 10px;
-        }
-    }
-    &--links {
-        margin-top: 16px;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-
-        &_linkItem {
-            margin-right: 15px;
-            color: var(--dl-color-secondary);
-            font-size: 10px;
-            display: flex;
-            align-items: center;
-
-            &_icon {
-                margin-right: 7px;
-                vertical-align: middle;
-            }
-
-            &_link {
-                vertical-align: middle;
-            }
-        }
-    }
-    &--image {
-        width: 200px;
-        height: 100px;
-        overflow: hidden;
-        img {
-            width: 100%;
-        }
-    }
-    &--icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-top: 34px;
-        padding-bottom: 16px;
-        color: var(--dl-color-darker);
-    }
-}
-</style>

package/src/components/basic/DlCard/types.ts

@@ -1,20 +0,0 @@
-export type ImageItem = {
-    src: string
-    styles?: string
-    alt?: string
-}
-
-export type IconItem = {
-    src: string
-    styles?: string
-    size?: string
-    color?: string
-}
-
-export type LinkItem = {
-    title: string
-    href: string
-    icon?: string
-    newtab?: boolean
-    external?: boolean
-}

package/src/components/basic/DlEllipsis/DlEllipsis.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="dl-ellipsis">
-        <span
-            ref="dlEllipsisRef"
-            class="dl-ellipsis__left"
-        >
-            {{ leftText }}
-        </span>
-        <span
-            v-if="rightText"
-            class="dl-ellipsis__right"
-        >
-            {{ rightText }}
-        </span>
-        <dl-tooltip v-if="hasEllipsis && tooltip">
-            {{ fullText }}
-        </dl-tooltip>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, toRef } from 'vue-demi'
-import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
-import { useSizeObserver } from '../../../hooks/use-size-observer'
-
-export default defineComponent({
-    name: 'DlEllipsis',
-    components: {
-        DlTooltip
-    },
-    props: {
-        /**
-         * Text to be displayed
-         */
-        text: {
-            type: String,
-            required: true
-        },
-        /**
-         * Allows to split the text in two parts
-         */
-        split: {
-            type: Boolean,
-            default: false,
-            required: false
-        },
-        /**
-         * Position of the split in the text, % of the text length
-         */
-        splitPosition: {
-            type: Number,
-            required: false,
-            default: 0.5,
-            validator: (value: number) => value >= 0 && value <= 1
-        },
-        /**
-         * Tooltip to be displayed when the text is truncated
-         */
-        tooltip: {
-            type: Boolean,
-            default: true,
-            required: false
-        }
-    },
-    setup(props) {
-        const { text, split } = props
-
-        const splitPositionsRef = toRef(props, 'splitPosition')
-        splitPositionsRef.value = Math.min(
-            Math.max(splitPositionsRef.value, 1),
-            0
-        )
-
-        const dlEllipsisRef = ref(null)
-        const splitIndex = computed(() =>
-            split
-                ? Math.round(text.length * splitPositionsRef.value)
-                : text.length
-        )
-
-        const leftText = computed(() => text.slice(0, splitIndex.value))
-        const rightText = computed(() => text.slice(splitIndex.value))
-
-        const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
-        const fullText = computed(() => text)
-
-        return {
-            leftText,
-            rightText,
-            fullText,
-            dlEllipsisRef,
-            hasEllipsis
-        }
-    }
-})
-</script>
-
-<style scoped lang="scss">
-.dl-ellipsis {
-    display: flex;
-    overflow: hidden;
-
-    &__left {
-        flex: 0 1 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &__right {
-        flex: 1 0 auto;
-        overflow: hidden;
-    }
-}
-</style>

package/src/components/basic/DlWidget/DlGrid.vue

@@ -1,33 +0,0 @@
-<template>
-    <div
-        :style="rowGap"
-        class="dl-grid"
-    >
-        <slot />
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    props: {
-        gap: {
-            type: String,
-            default: '30px'
-        }
-    },
-    computed: {
-        rowGap(): Record<string, string> {
-            return { '--row-gap': this.gap }
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.dl-grid {
-    display: flex;
-    flex-direction: column;
-}
-</style>

package/src/components/basic/DlWidget/DlGridRow.vue

@@ -1,32 +0,0 @@
-<template>
-    <div
-        :style="columnGap"
-        class="dl-grid-row"
-    >
-        <slot />
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    props: {
-        gap: {
-            type: String,
-            default: '30px'
-        }
-    },
-    computed: {
-        columnGap(): Record<string, string> {
-            return { '--column-gap': this.gap }
-        }
-    }
-})
-</script>
-
-<style scoped>
-.dl-grid-row {
-    display: flex;
-}
-</style>

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

@@ -1,124 +0,0 @@
-import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
-import {
-    operators,
-    Alias,
-    startDatePattern,
-    endDatePattern,
-    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)
-    const ends = str.match(endDatePattern)
-
-    intervals?.forEach((interval) => {
-        str = str.replaceAll(interval, formatToDateObj(interval))
-    })
-    starts?.forEach((start) => {
-        str = str.replaceAll(start, formatToDateObj(start))
-    })
-    ends?.forEach((end) => {
-        str = str.replaceAll(end, formatToDateObj(end))
-    })
-    return str
-}
-
-function formatToDateObj(str: string) {
-    const [day, month, year] = str.split(' ')[1].split('/')
-    const date = new Date(parseInt(year), parseInt(month), parseInt(day))
-    if (!isValidDate(date)) return str
-    const [toDay, toMonth, toYear] = str.split(' ')[3]?.split('/') || []
-    const toDate = new Date(
-        parseInt(toYear),
-        parseInt(toMonth),
-        parseInt(toDay)
-    )
-    if (!isValidDate(toDate)) return date.toISOString()
-    return JSON.stringify({
-        from: date.toISOString(),
-        to: toDate.toISOString()
-    })
-}
-
-function isValidDate(d: Date) {
-    return d instanceof Date && !isNaN(d as any)
-}
-
-export function replaceAliases(json: string, aliases: Alias[]) {
-    let newJson = json
-    aliases.forEach((alias) => {
-        newJson = newJson.replaceAll(alias.alias, alias.key)
-    })
-    return newJson
-}
-
-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
-        }
-    }
-}
-
-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]
-    }
-}

package/src/components/compound/DlToast/utils/config.ts

@@ -1,17 +0,0 @@
-const Positions = Object.freeze({
-    top_right: 'top-right',
-    top: 'top',
-    top_left: 'top-left',
-    bottom_right: 'bottom-right',
-    bottom: 'bottom',
-    bottom_left: 'bottom-left'
-})
-
-const Types = Object.freeze({
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-    info: 'info'
-})
-
-export { Positions, Types }

package/src/components/essential/DlTextHolder/DlTextHolder.vue

@@ -1,65 +0,0 @@
-<template>
-    <span
-        :id="uuid"
-        class="dl-text-holder"
-    >
-        <span v-if="prefix">{{ prefixPreview }}</span>
-        <span class="dl-text-holder--value">
-            <slot> {{ textPreview }} </slot>
-        </span>
-        <span v-if="suffix"> {{ suffixPreview }}</span>
-    </span>
-</template>
-
-<script lang="ts">
-import { v4 } from 'uuid'
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    name: 'DlTextHolder',
-    props: {
-        prefix: {
-            type: String,
-            default: null
-        },
-        suffix: {
-            type: String,
-            default: null
-        },
-        text: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            uuid: `dl-text-holder-${v4()}`
-        }
-    },
-    computed: {
-        prefixPreview(): string {
-            return this.prefix?.trim() ?? ''
-        },
-        suffixPreview(): string {
-            return this.suffix?.trim() ?? ''
-        },
-        textPreview(): string {
-            return this.text
-        }
-    }
-})
-</script>
-
-<style scoped lang="scss">
-.dl-text-holder {
-    display: flex;
-    flex-wrap: nowrap;
-    width: 100%;
-
-    &--value {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-</style>

package/src/components/essential/DlTextHolder/index.ts

@@ -1,2 +0,0 @@
-import DlTextHolder from './DlTextHolder.vue'
-export { DlTextHolder }

package/src/demos/DlTextHolderDemo.vue

@@ -1,42 +0,0 @@
-<template>
-    <div>
-        <div class="dl-text-holder-demo">
-            <dl-text-holder
-                prefix="home/Desktop/"
-                suffix=".mp3"
-                text="very-loooooooooooong-named-song"
-            />
-
-            <dl-text-holder
-                prefix="home/Desktop/"
-                suffix=".mp3"
-            >
-                very-loooooooooooong-named-song2
-            </dl-text-holder>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-import { DlTextHolder } from '../components'
-
-export default defineComponent({
-    components: {
-        DlTextHolder
-    }
-})
-</script>
-
-<style scoped>
-.dl-text-holder-demo {
-    display: flex;
-    flex-wrap: wrap;
-    resize: horizontal;
-    overflow: auto;
-    width: 300px;
-    box-shadow: var(--dl-menu-shadow);
-    padding: 5px;
-    word-wrap: break-word;
-}
-</style>