@dataloop-ai/components 0.17.134 → 0.18.1

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

@@ -1,242 +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;
-                margin-top: 2px;
-                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/essential/DlTextHolder/DlTextHolder.vue

@@ -1,93 +0,0 @@
-<template>
-    <span
-        :id="uuid"
-        class="dl-text-holder"
-    >
-        <span v-if="prefix">{{ prefixPreview }}</span>
-        <dl-ellipsis
-            :text="textPreview"
-            :split="split"
-            :split-position="splitPosition"
-        />
-        <span v-if="suffix"> {{ suffixPreview }}</span>
-    </span>
-</template>
-
-<script lang="ts">
-import { v4 } from 'uuid'
-// todo: this causes an issue
-import { DlEllipsis } from '../../'
-
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    name: 'DlTextHolder',
-    components: { DlEllipsis },
-    props: {
-        /**
-         * Prefix to be displayed
-         */
-        prefix: {
-            type: String,
-            default: null
-        },
-        /**
-         * Suffix to be displayed
-         */
-        suffix: {
-            type: String,
-            default: null
-        },
-        /**
-         * Text to be displayed
-         */
-        text: {
-            type: String,
-            default: ''
-        },
-        /**
-         * 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
-        }
-    },
-    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%;
-    white-space: nowrap;
-}
-</style>
-../DlEllipsis

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

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

package/src/demos/DlTextHolderDemo.vue

@@ -1,50 +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"
-                text="very-loooooooooooong-named-song"
-                split
-            />
-
-            <dl-text-holder
-                prefix="home/Desktop/"
-                suffix=".mp3"
-                text="very-loooooooooooong-named-song"
-                split
-                :split-position="0.7"
-            />
-        </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>