@dataloop-ai/components 0.18.0 → 0.18.2

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetMainContent.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="main-content">
+        <main-content-header @onChangeViewMode="handleViewMode" />
+        <main-content-images :view-mode="viewMode" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import MainContentHeader from './MainContent/MainContentNav.vue'
+import MainContentImages from './MainContent/MainContentImages.vue'
+
+export default defineComponent({
+    name: 'DatasetMainContent',
+    components: {
+        MainContentHeader,
+        MainContentImages
+    },
+    setup() {
+        const viewMode = ref('')
+        const handleViewMode = (value: string) => {
+            viewMode.value = value
+        }
+
+        return {
+            viewMode,
+            handleViewMode
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.main-content {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 10px;
+    padding-inline: 20px;
+    align-content: center;
+    text-align: center;
+
+    img {
+        width: 135px;
+        height: 135px;
+        object-fit: cover;
+        border-radius: 2px;
+    }
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetRightDrawer.vue

@@ -0,0 +1,88 @@
+<template>
+    <div
+        class="right-drawer-content"
+        :style="cssVars"
+    >
+        <div class="right-drawer-content__toggle-icon">
+            <dl-button
+                flat
+                :icon="expandIcon"
+                color="secondary"
+                @click="onToggle"
+            />
+        </div>
+        <div
+            style="
+                padding-bottom: 10px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding-top: 300px;
+            "
+        >
+            <dl-icon
+                icon="icon-dl-item-outline"
+                size="30px"
+                color="dl-color-darker"
+            />
+            <dl-typography
+                size="12px"
+                color="secondary"
+            >
+                Select an item from the left to get more item details.
+            </dl-typography>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi'
+import { DlTypography, DlIcon, DlButton } from '../../../components'
+
+export default defineComponent({
+    name: 'DatasetRightDrawer',
+    components: {
+        DlTypography,
+        DlIcon,
+        DlButton
+    },
+    setup() {
+        const LARGE_WIDTH = '300px'
+        const SMALL_WIDTH = '30px'
+        const rightDrawerContentWidth = ref(LARGE_WIDTH)
+        const isExpanded = ref(true)
+
+        const onToggle = () => {
+            isExpanded.value = !isExpanded.value
+            rightDrawerContentWidth.value = isExpanded.value
+                ? LARGE_WIDTH
+                : SMALL_WIDTH
+        }
+        const expandIcon = computed(() =>
+            isExpanded.value ? 'icon-dl-collapse' : 'icon-dl-expand'
+        )
+        const cssVars = computed(() => {
+            return {
+                '--right-drawer-content-width': rightDrawerContentWidth.value
+            }
+        })
+
+        return {
+            onToggle,
+            expandIcon,
+            cssVars
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.right-drawer-content {
+    width: var(--right-drawer-content-width);
+    transition: all 350ms;
+
+    &__toggle-icon {
+        left: 0;
+    }
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/ActionsMenu.vue

@@ -0,0 +1,70 @@
+<template>
+    <dl-dropdown-button
+        auto-close
+        flat
+        label="Actions"
+        :no-wrap="false"
+        :overflow="false"
+        fit-content
+        size="s"
+        text-color="dl-color-darker"
+    >
+        <dl-list
+            bordered
+            separator
+        >
+            <dl-list-item
+                v-for="item in items"
+                :key="item.id"
+                clickable
+                :bordered="item.isBordered"
+                :start-icon="item.icon"
+                :start-icon-color="item.iconColor"
+                @click="handleOption(item)"
+            >
+                <dl-item-section :color="item.labelColor">
+                    {{ item.label }}
+                </dl-item-section>
+            </dl-list-item>
+        </dl-list>
+    </dl-dropdown-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlDropdownButton,
+    DlList,
+    DlListItem,
+    DlItemSection
+} from '../../../../components'
+
+export default defineComponent({
+    name: 'ActionsMenu',
+    components: {
+        DlDropdownButton,
+        DlList,
+        DlListItem,
+        DlItemSection
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => [] as Record<string, any>[]
+        }
+    },
+    emits: ['onChange'],
+    setup(props, context) {
+        const handleOption = (event: Event) => {
+            console.log('click: ', event)
+            context.emit('onChange', event)
+        }
+
+        return {
+            handleOption
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/AutomationMenu.vue

@@ -0,0 +1,106 @@
+<template>
+    <dl-dropdown-button
+        flat
+        label="Automations"
+        :no-wrap="false"
+        :overflow="false"
+        fit-content
+        size="s"
+        text-color="dl-color-darker"
+    >
+        <dl-list
+            bordered
+            separator
+        >
+            <dl-list-item
+                v-for="item in items"
+                :key="item.id"
+                clickable
+                :bordered="item.isBordered"
+                :start-icon="item.icon"
+                :start-icon-color="item.iconColor"
+                @click="handleOption(item)"
+            >
+                <dl-item-section :color="item.labelColor">
+                    {{ item.label }}
+                </dl-item-section>
+                <dl-item-section
+                    v-if="item.children"
+                    side
+                >
+                    <dl-icon icon="icon-dl-right-chevron" />
+                </dl-item-section>
+                <dl-menu
+                    v-if="item.children"
+                    auto-close
+                    anchor="top end"
+                    self="top start"
+                >
+                    <dl-list
+                        bordered
+                        separator
+                    >
+                        <dl-list-item
+                            v-for="itemChildren in item.children"
+                            :key="itemChildren.id"
+                            dense
+                            clickable
+                        >
+                            <dl-item-section>
+                                {{ itemChildren.label }}
+                            </dl-item-section>
+                            <dl-item-section
+                                v-if="itemChildren.icon"
+                                side
+                            >
+                                <dl-icon :icon="itemChildren.icon" />
+                            </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-menu>
+            </dl-list-item>
+        </dl-list>
+    </dl-dropdown-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlList,
+    DlMenu,
+    DlListItem,
+    DlItemSection,
+    DlIcon,
+    DlDropdownButton
+} from '../../../../components'
+export default defineComponent({
+    name: 'AutomationMenu',
+    components: {
+        DlDropdownButton,
+        DlMenu,
+        DlList,
+        DlListItem,
+        DlItemSection,
+        DlIcon
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => [] as Record<string, any>[]
+        }
+    },
+    emits: ['onChange'],
+    setup(props, context) {
+        const handleOption = (event: Event) => {
+            console.log('click: ', event)
+            context.emit('onChange', event)
+        }
+
+        return {
+            handleOption
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/CardView.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="card-view">
+        <DlCard
+            v-for="(image, imageIndex) in items"
+            :key="imageIndex"
+            interactive
+            zoom
+            :image="{
+                src: image.url,
+                link: {
+                    icon: 'icon-dl-link',
+                    color: 'black',
+                    size: '12px',
+                    href: 'https://dataloop.ai/'
+                }
+            }"
+            description="text"
+            title="title"
+            :links="{
+                title: 'title',
+                href: image.url
+            }"
+            :tags="[
+                {
+                    label: 'A',
+                    color: '#FFBBFF',
+                    textColor: 'black'
+                },
+                {
+                    label: 'Lemon',
+                    color: '#7000FF',
+                    textColor: 'black'
+                },
+                {
+                    label: 'B',
+                    color: '#FFDA3A',
+                    textColor: 'black'
+                },
+                {
+                    label: 'D',
+                    color: '#00A0FF',
+                    textColor: 'black'
+                },
+                {
+                    label: 'X',
+                    color: '#AADC3A',
+                    textColor: 'black'
+                }
+            ]"
+            indicator-color="red"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { ImageMetadata } from '../types/imageMetadata'
+import { DlCard } from '../../../../components'
+
+export default defineComponent({
+    name: 'CardView',
+    components: {
+        DlCard
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => Array as PropType<ImageMetadata[]>
+        }
+    },
+    setup() {
+        const imageStyles = (url: string) => {
+            return {
+                backgroundImage: `url(${url})`,
+                width: '127px',
+                height: '135px',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover',
+                marginRight: '10px'
+            }
+        }
+
+        return {
+            imageStyles
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.card-view {
+    display: flex;
+    gap: 30px;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 10px;
+    align-content: center;
+    text-align: center;
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/CardViewGallery.vue

@@ -0,0 +1,141 @@
+<template>
+    <div
+        ref="cardViewGalleryWrapper"
+        style="padding-top: 10px"
+    >
+        <dl-virtual-scroll
+            :items="itemsToDisplay"
+            :virtual-scroll-item-size="295"
+            :virtual-scroll-sticky-size-start="20"
+            :virtual-scroll-sticky-size-end="20"
+            separator
+            @virtual-scroll="log"
+        >
+            <template #default="{ item, index }">
+                <dl-list-item
+                    :key="index"
+                    dense
+                >
+                    <dl-item-section>
+                        <div
+                            class="row custom-element"
+                            :style="`gap: ${imagesGap}px; margin-bottom: 20px`"
+                        >
+                            <div
+                                v-for="(col, i) in item.items"
+                                :key="`${index}-${i}`"
+                                :style="imageStyles(col.url)"
+                            />
+                        </div>
+                    </dl-item-section>
+                </dl-list-item>
+            </template>
+        </dl-virtual-scroll>
+    </div>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    onMounted,
+    onUnmounted,
+    PropType,
+    ref
+} from 'vue-demi'
+import { ImageMetadata } from '../types/imageMetadata'
+import { DlVirtualScroll } from '../../../../components'
+
+export default defineComponent({
+    name: 'CardViewGallery',
+    components: {
+        DlVirtualScroll
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => Array as PropType<ImageMetadata[]>
+        }
+    },
+    setup(props, { emit }) {
+        const imageStyles = (url: string): Record<string, string> => ({
+            backgroundImage: `url(${url})`,
+            width: '140px',
+            height: '135px',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            marginRight: '10px'
+        })
+        const log = console.log
+
+        const cardViewGalleryWrapper = ref(null)
+        const resizeObserver = ref(null)
+        const itemsToDisplay = ref(props.items)
+        const imageWidth = 150
+        const imagesGap = ref(0)
+
+        const restructureData = (width: number) => {
+            if (!props.items.length) return
+
+            const cols = Math.floor(width / imageWidth) || 1
+            const remaningPixels = width - cols * imageWidth
+            imagesGap.value =
+                cols !== 1 ? Math.floor(remaningPixels / (cols - 1)) : 0
+            const rows = Math.ceil(props.items.length / cols)
+            const toDisplay = []
+
+            for (let i = 0; i < rows; ++i) {
+                const items = []
+                for (
+                    let j = 0;
+                    j < cols &&
+                    toDisplay.length * cols + j !== props.items.length;
+                    ++j
+                ) {
+                    items.push(props.items[i * cols + j])
+                }
+                toDisplay.push({ items })
+            }
+
+            itemsToDisplay.value = toDisplay.slice(0, props.items.length - 1)
+        }
+
+        onMounted(() => {
+            restructureData(cardViewGalleryWrapper.value.offsetWidth)
+
+            resizeObserver.value = new ResizeObserver((elems) => {
+                const elem = elems[0]
+                if (!elem) return
+                const width = elem.contentRect.width
+                restructureData(width)
+            })
+
+            resizeObserver.value.observe(cardViewGalleryWrapper.value)
+        })
+
+        onUnmounted(() => {
+            resizeObserver.value?.disconnect()
+        })
+
+        return {
+            cardViewGalleryWrapper,
+            itemsToDisplay,
+            imageStyles,
+            log,
+            imagesGap
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.card-view-gallery {
+    display: flex;
+    gap: 1vw;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding-top: 10px;
+    align-content: center;
+    text-align: center;
+}
+</style>