@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -0,0 +1,329 @@
+<template>
+    <div class="main-content-header">
+        <div style="display: flex; align-items: center">
+            <dl-checkbox
+                v-model="selectPageValue"
+                :value="3"
+                :label="selectPageLabel"
+                label-color="dl-color-darker"
+                label-size="12px"
+                @update:model-value="logValue"
+            />
+            <dl-separator
+                type="vertical"
+                height="20px"
+            />
+            <actions-menu :items="actionItems" />
+            <automation-menu :items="automationItems" />
+        </div>
+        <div
+            style="
+                display: flex;
+                height: 100%;
+                align-items: center;
+                justify-content: end;
+                padding-right: 10px;
+                gap: 10px;
+            "
+        >
+            <dl-typography
+                size="12px"
+                color="secondary"
+            >
+                Feature
+            </dl-typography>
+            <dl-button
+                flat
+                dense
+                icon="icon-dl-thumbnail"
+                :text-color="getViewModeSelectedColor('gallery')"
+                @click="emitViewModeGallery"
+            />
+            <dl-button
+                flat
+                dense
+                icon="icon-dl-list-view"
+                :text-color="getViewModeSelectedColor('table')"
+                @click="emitViewModeTable"
+            />
+            <dl-button
+                flat
+                dense
+                icon="icon-dl-card-view"
+                color="secondary"
+                @click="emitViewModeCard"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlButton,
+    DlCheckbox,
+    DlTypography,
+    DlSeparator
+} from '../../../../components'
+import ActionsMenu from './ActionsMenu.vue'
+import AutomationMenu from './AutomationMenu.vue'
+
+export default defineComponent({
+    name: 'MainContentNav',
+    components: {
+        DlTypography,
+        DlSeparator,
+        DlButton,
+        DlCheckbox,
+        ActionsMenu,
+        AutomationMenu
+    },
+    emit: ['onChangeViewMode'],
+    setup(props, ctx) {
+        const selectPageLabel = ref<string>('Select Page (100)')
+        const selectPageValue = ref<boolean>(false)
+        const viewModeSelected = ref<string>('gallery')
+        const scopeOptions = [
+            {
+                label: 'Select scope',
+                value: 1,
+                badgeColor: 'dl-color-disabled'
+            },
+            {
+                label: 'Status 2',
+                value: 2,
+                badgeColor: 'dl-color-secondary'
+            },
+            {
+                label: 'Status 3',
+                value: 3,
+                badgeColor: 'dl-color-positive'
+            },
+            {
+                label: 'Status 4',
+                value: 4,
+                badgeColor: 'dl-color-warning'
+            }
+        ]
+        const actionOptions = [
+            {
+                label: 'Actions',
+                value: 1,
+                badgeColor: 'dl-color-disabled'
+            },
+            {
+                label: 'Status 2',
+                value: 2,
+                badgeColor: 'dl-color-secondary'
+            },
+            {
+                label: 'Status 3',
+                value: 3,
+                badgeColor: 'dl-color-positive'
+            },
+            {
+                label: 'Status 4',
+                value: 4,
+                badgeColor: 'dl-color-warning'
+            }
+        ]
+        const automationOptions = [
+            {
+                label: 'Automation',
+                value: 1,
+                badgeColor: 'dl-color-disabled'
+            },
+            {
+                label: 'Status 2',
+                value: 2,
+                badgeColor: 'dl-color-secondary'
+            },
+            {
+                label: 'Status 3',
+                value: 3,
+                badgeColor: 'dl-color-positive'
+            },
+            {
+                label: 'Status 4',
+                value: 4,
+                badgeColor: 'dl-color-warning'
+            }
+        ]
+        const actionItems = [
+            {
+                id: 1,
+                label: 'Upload',
+                value: 'upload',
+                icon: 'icon-dl-upload',
+                isBordered: false
+            },
+            {
+                id: 2,
+                label: 'Export',
+                value: 'export',
+                icon: 'icon-dl-export',
+                isBordered: false
+            },
+            {
+                id: 3,
+                label: 'Clone',
+                value: 'clone',
+                icon: 'icon-dl-clone',
+                isBordered: false
+            },
+            {
+                id: 4,
+                label: 'Classification',
+                value: 'classification',
+                icon: 'icon-dl-classification',
+                isBordered: false
+            },
+            {
+                id: 5,
+                label: 'Move to Folder',
+                value: 'move-to-folder',
+                icon: 'icon-dl-move-to-folder',
+                isBordered: false
+            },
+            {
+                id: 6,
+                label: 'Show File Name',
+                value: 'move-file-name',
+                icon: 'icon-dl-file',
+                isBordered: false
+            },
+            {
+                id: 7,
+                label: 'Show Annotations',
+                value: 'show-annotations',
+                icon: 'icon-dl-annotation-outline',
+                isBordered: false
+            },
+            {
+                id: 8,
+                label: 'Show Hidden Items',
+                value: 'show-hidden-items',
+                icon: 'icon-dl-show',
+                isBordered: false
+            },
+            {
+                id: 9,
+                label: 'Delete',
+                labelColor: 'dl-color-negative',
+                value: 'delete',
+                icon: 'icon-dl-delete',
+                iconColor: 'dl-color-negative',
+                isBordered: true
+            }
+        ]
+        const automationItems = [
+            {
+                id: 1,
+                label: 'Applications',
+                value: 'applications',
+                icon: 'icon-dl-faas-outline',
+                isBordered: false,
+                children: [
+                    {
+                        id: 1,
+                        label: 'COCO Converter',
+                        value: 'coco-converter',
+                        isBordered: false
+                    },
+                    {
+                        id: 2,
+                        label: 'YOLO Converter',
+                        value: 'yolo-converter',
+                        isBordered: false
+                    },
+                    {
+                        id: 3,
+                        label: 'VOC Converter',
+                        value: 'voc-converter',
+                        isBordered: false
+                    }
+                ]
+            },
+            {
+                id: 2,
+                label: 'Functions',
+                value: 'functions',
+                icon: 'icon-dl-function',
+                isBordered: false
+            },
+            {
+                id: 3,
+                label: 'Pipelines',
+                value: 'pipelines',
+                icon: 'icon-dl-pipeline',
+                isBordered: false
+            }
+        ]
+
+        const getViewModeSelectedColor = (value: string) =>
+            viewModeSelected.value === value
+                ? 'dl-color-secondary'
+                : 'dl-color-dark'
+
+        const logValue = (newValue: any) => console.log('New value:', newValue)
+
+        const statusOption = ref({
+            label: 'Select scope',
+            value: 1,
+            badgeColor: 'dl-color-disabled'
+        })
+        const actionOption = ref({
+            label: 'Actions',
+            value: 1,
+            badgeColor: 'dl-color-disabled'
+        })
+        const automationOption = ref({
+            label: 'Automation',
+            value: 1,
+            badgeColor: 'dl-color-disabled'
+        })
+        const emitViewModeGallery = () => {
+            viewModeSelected.value = 'gallery'
+            ctx.emit('onChangeViewMode', 'gallery')
+        }
+        const emitViewModeTable = () => {
+            viewModeSelected.value = 'table'
+            ctx.emit('onChangeViewMode', 'table')
+        }
+        const emitViewModeCard = () => {
+            viewModeSelected.value = 'card'
+            ctx.emit('onChangeViewMode', 'card')
+        }
+
+        return {
+            logValue,
+            selectPageLabel,
+            selectPageValue,
+            scopeOptions,
+            actionOptions,
+            automationOptions,
+            statusOption,
+            actionOption,
+            automationOption,
+            actionItems,
+            automationItems,
+            emitViewModeGallery,
+            emitViewModeTable,
+            viewModeSelected,
+            getViewModeSelectedColor,
+            emitViewModeCard
+        }
+    }
+})
+</script>
+
+<style scoped>
+.main-content-header {
+    height: 40px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
+    justify-self: center;
+    justify-content: center;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+    <div class="navbar-kpi">
+        <div style="display: flex; height: 100%; align-items: center">
+            <div style="padding-left: 25px">
+                <dl-typography
+                    color="dl-color-lighter"
+                    size="10px"
+                >
+                    dataset
+                </dl-typography>
+                <dl-typography
+                    color="dl-color-darker"
+                    size="30px"
+                >
+                    Fruit
+                </dl-typography>
+            </div>
+        </div>
+        <div
+            style="
+                display: flex;
+                height: 100%;
+                align-items: center;
+                justify-content: end;
+                padding-right: 10px;
+            "
+        >
+            <dl-counters
+                counter-font-size="20px"
+                title-font-size="12px"
+                :items="counterItems"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlTypography, DlCounters } from '../../../components'
+
+export default defineComponent({
+    name: 'NavbarKpi',
+    components: {
+        DlTypography,
+        DlCounters
+    },
+    setup() {
+        const counterItems = [
+            {
+                value: 200,
+                text: 'All dataset items'
+            },
+            {
+                value: 100,
+                text: 'Selected items'
+            },
+            {
+                value: 12,
+                text: 'Annotated items'
+            },
+            {
+                value: 17,
+                text: 'Annotations'
+            }
+        ]
+
+        return {
+            counterItems
+        }
+    }
+})
+</script>
+
+<style scoped>
+.navbar-kpi {
+    height: 100px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
+    justify-self: center;
+    justify-content: center;
+    background-color: var(--dl-color-body-background);
+}
+</style>

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

@@ -0,0 +1,132 @@
+<template>
+    <div class="navbar-search">
+        <div
+            v-if="!isBasicSearch"
+            style="display: flex; gap: 15px"
+        >
+            <div style="width: 100%; position: relative">
+                <DlSmartSearch width="100%" />
+            </div>
+            <dl-button
+                flat
+                @click="isBasicSearch = !isBasicSearch"
+            >
+                <div style="white-space: nowrap">
+                    Switch to basic
+                </div>
+            </dl-button>
+        </div>
+        <div
+            v-if="isBasicSearch"
+            style="display: flex; gap: 15px; align-items: center"
+        >
+            <SearchFilterMenu />
+            <dl-button
+                flat
+                @click="isBasicSearch = !isBasicSearch"
+            >
+                <div style="white-space: nowrap">
+                    Reset
+                </div>
+            </dl-button>
+        </div>
+        <div style="display: flex; align-items: center; justify-content: end">
+            <div
+                v-if="isBasicSearch"
+                style="display: flex"
+            >
+                <dl-button
+                    color="secondary"
+                    outlined
+                >
+                    Saved Filters
+                </dl-button>
+                <dl-button
+                    color="secondary"
+                    flat
+                    @click="isBasicSearch = !isBasicSearch"
+                >
+                    Advanced
+                </dl-button>
+            </div>
+            <dl-button
+                icon="icon-dl-info"
+                color="secondary"
+                flat
+            >
+                Details
+            </dl-button>
+            <dl-button
+                icon="icon-dl-refresh"
+                color="secondary"
+                flat
+            >
+                Details
+            </dl-button>
+            <dl-dropdown-button
+                split
+                label="Create Task"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import SearchFilterMenu from './SearchFilterMenu.vue'
+import {
+    DlSmartSearch,
+    DlButton,
+    DlDropdownButton,
+    DlList,
+    DlListItem,
+    DlItemSection
+} from '../../../components'
+
+export default defineComponent({
+    name: 'NavbarSearch',
+    components: {
+        DlSmartSearch,
+        DlButton,
+        DlDropdownButton,
+        DlList,
+        DlListItem,
+        DlItemSection,
+        SearchFilterMenu
+    },
+    setup() {
+        const isBasicSearch = ref(false)
+
+        return {
+            isBasicSearch
+        }
+    }
+})
+</script>
+
+<style scoped>
+.navbar-search {
+    height: 70px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-self: center;
+    justify-content: center;
+    background-color: var(--dl-color-panel-background);
+    padding-inline: 25px;
+    align-items: center;
+}
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+    <div class="search-filter-menu">
+        <AddFilter />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import AddFilter from './filters/AddFilter.vue'
+
+export default defineComponent({
+    name: 'SearchFilterMenu',
+    components: {
+        AddFilter
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>