@dataloop-ai/components 0.18.0 → 0.18.2

package/src/layouts/DlDatasetBrowser/DemoComponents/filters/AddFilter.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="add-filter">
+        <dl-button
+            icon="icon-dl-add"
+            label="Add filter"
+            flat
+        >
+            <dl-menu>
+                <div class="add-filter__menu">
+                    <div class="add-filter__header">
+                        <div class="add-filter__header__title">
+                            <dl-typography
+                                color="dl-color-medium"
+                                size="14px"
+                            >
+                                Filters
+                            </dl-typography>
+                            <div style="text-align: end">
+                                <dl-button
+                                    flat
+                                    color="secondary"
+                                >
+                                    Reset Filters
+                                </dl-button>
+                            </div>
+                        </div>
+                        <div class="add-filter__header__subtitle">
+                            <dl-typography
+                                color="dl-color-medium"
+                                size="10px"
+                            >
+                                A maximum of 8 filters can be selected.
+                            </dl-typography>
+                        </div>
+                    </div>
+                    <div class="add-filter__content">
+                        <div
+                            v-for="(section, sectionIndex) in sections"
+                            :key="sectionIndex"
+                        >
+                            <dl-typography
+                                color="dl-color-darker"
+                                size="12px"
+                            >
+                                {{ section.label }}
+                            </dl-typography>
+                            <div class="add-filter__content__section">
+                                <div
+                                    class="add-filter__content__section__option"
+                                >
+                                    <dl-option-group
+                                        v-model="switchValue"
+                                        type="checkbox"
+                                        :options="section.options"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </dl-menu>
+        </dl-button>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlButton,
+    DlMenu,
+    DlTypography,
+    DlOptionGroup
+} from '../../../../components'
+
+export default defineComponent({
+    name: 'AddFilter',
+    components: {
+        DlButton,
+        DlMenu,
+        DlTypography,
+        DlOptionGroup
+    },
+    setup() {
+        const logValue = (newValue: any) => console.log('New value:', newValue)
+        const customValueCheck = ref('')
+        const switchValue = ref<number[]>([1, 3])
+        const sections = ref([
+            {
+                label: 'Items',
+                options: [
+                    {
+                        value: 1,
+                        label: 'Item Description',
+                        disabled: true
+                    },
+                    {
+                        value: 2,
+                        label: 'Item Media Type'
+                    },
+                    {
+                        value: 3,
+                        label: 'Item Metadata'
+                    },
+                    {
+                        value: 4,
+                        label: 'Item Size'
+                    },
+                    {
+                        value: 5,
+                        label: 'Item Status'
+                    },
+                    {
+                        value: 6,
+                        label: 'Item Uploaded Date'
+                    }
+                ]
+            },
+            {
+                label: 'Annotations',
+                options: [
+                    {
+                        value: 7,
+                        label: 'Annotation Type'
+                    },
+                    {
+                        value: 8,
+                        label: 'QA Workflow'
+                    }
+                ]
+            },
+            {
+                label: 'Taxonomy',
+                options: [
+                    {
+                        value: 9,
+                        label: 'Attributes'
+                    },
+                    {
+                        value: 10,
+                        label: 'Labels'
+                    }
+                ]
+            },
+            {
+                label: 'File',
+                options: [
+                    {
+                        value: 11,
+                        label: 'File Extension'
+                    },
+                    {
+                        value: 12,
+                        label: 'File Name'
+                    }
+                ]
+            },
+            {
+                label: 'Workforce',
+                options: [
+                    {
+                        value: 13,
+                        label: 'Contributors & Groups'
+                    }
+                ]
+            }
+        ])
+
+        return {
+            logValue,
+            customValueCheck,
+            sections,
+            switchValue
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.add-filter {
+    &__menu {
+        padding: 10px;
+    }
+
+    &__header {
+        &__title {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            align-items: center;
+        }
+        &__subtitle {
+        }
+    }
+
+    &__content {
+        display: flex;
+        padding-top: 20px;
+
+        &__section {
+            width: 200px;
+            justify-content: start;
+
+            &__option {
+                padding-top: 5px;
+                text-align: start;
+                justify-content: start;
+                align-content: start;
+                justify-self: start;
+            }
+        }
+    }
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/types/imageMetadata.ts

@@ -0,0 +1,28 @@
+export enum MediaTypeEnum {
+    image = 'Image',
+    video = 'Video',
+    lidar = 'Lidar'
+}
+
+export type TChips = {
+    name: string
+    color: string
+}
+
+export type ImageMetadata = {
+    url: string
+    name: string
+    extension: string
+    createdAt: Date
+    updatedAt: Date
+    mediaType: MediaTypeEnum
+    state?: string
+    /*
+    title: string,
+    counter: number,
+    innerIcons: Array<string>,
+    chips: Array<TChips>,
+    description: string,
+    coloredStrip: string,
+    */
+}

package/src/layouts/DlDatasetBrowser/DlDatasetBrowser.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <dl-page-layout :template="template">
+            <template #header>
+                <slot name="header" />
+            </template>
+            <template #leftDrawer>
+                <slot name="leftDrawer" />
+            </template>
+            <template #rightDrawer>
+                <slot name="rightDrawer" />
+            </template>
+            <template #mainContent>
+                <slot name="mainContent" />
+            </template>
+            <template #footer>
+                <slot name="footer" />
+            </template>
+        </dl-page-layout>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlPageLayout } from '../../components'
+
+export default defineComponent({
+    name: 'DlDatasetBrowser',
+    components: {
+        DlPageLayout
+    },
+    setup() {
+        const template = '"h h h" "l p r" "f f f"'
+
+        return {
+            template
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/layouts/DlStudioLayout/DlStudioLayout.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="dl-studio-layout">
+        <dl-page-layout :template="template">
+            <template #header>
+                <slot name="header" />
+            </template>
+            <template #leftDrawer>
+                <slot name="leftDrawer" />
+            </template>
+            <template #rightDrawer>
+                <slot name="rightDrawer" />
+            </template>
+            <template #mainContent>
+                <slot name="mainContent" />
+            </template>
+            <template #footer>
+                <slot name="footer" />
+            </template>
+        </dl-page-layout>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlPageLayout } from '../../components'
+
+export default defineComponent({
+    name: 'DlStudioLayout',
+    components: {
+        DlPageLayout
+    },
+    setup() {
+        const template = '"h h h" "l p r" "l f r"'
+
+        return {
+            template
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/layouts/DlStudioLayout/components/Demo/LeftMenuContent.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="left-side-content">
+        <div style="padding-top: 30px">
+            Left side content slot
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'LeftMenuContent'
+})
+</script>
+
+<style scoped lang="scss">
+.left-side-content {
+    height: 100%;
+    color: var(--dl-color-lighter);
+    background-color: var(--dl-color-side-panel);
+}
+</style>

package/src/layouts/DlStudioLayout/components/Demo/StudioFooter.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="dl-studio-layout-footer">
+        Footer slot Footer slot Footer slot Footer slot Footer slot Footer slot
+        Footer slot Footer slot Footer slot Footer slot Footer slot Footer slot
+        Footer slot
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'StudioFooter'
+})
+</script>
+
+<style scoped lang="scss">
+.dl-studio-layout-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dl-color-lighter);
+    height: 50px;
+}
+</style>

package/src/layouts/DlStudioLayout/components/Demo/StudioHeader.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="navbar-demo-content">
+        <div style="display: flex; height: 100%; align-items: center">
+            <dl-button
+                flat
+                icon="icon-dl-hamburger-menu"
+                color="secondary"
+                size="xl"
+                @click="updateExpandLeftDrawer"
+            />
+            <dl-button
+                flat
+                color="secondary"
+                icon="icon-dl-left-chevron"
+                label="Go to: Dataset Browser"
+            />
+        </div>
+        <div
+            style="
+                display: flex;
+                height: 100%;
+                align-items: center;
+                justify-content: end;
+                padding-right: 10px;
+            "
+        >
+            <dl-button flat>
+                <dl-icon
+                    size="16px"
+                    icon="icon-dl-light-theme"
+                    color="dl-color-warning"
+                />
+            </dl-button>
+            <dl-button flat>
+                <dl-icon
+                    size="16px"
+                    icon="icon-dl-dark-theme"
+                    color="dl-color-warning"
+                />
+            </dl-button>
+            <dl-button
+                flat
+                color="secondary"
+                icon="icon-dl-question"
+            />
+            <dl-button
+                flat
+                color="secondary"
+            >
+                <dl-icon
+                    size="16px"
+                    icon="icon-dl-notification"
+                />
+            </dl-button>
+            <dl-button
+                flat
+                color="secondary"
+                icon="icon-dl-cloud-server"
+            />
+            <dl-button
+                flat
+                color="secondary"
+                icon="icon-dl-magic"
+            />
+            <dl-button flat>
+                <dl-avatar
+                    tooltip="popcat@gmail.com"
+                    size="25px"
+                >
+                    <img src="https://popcat.click/twitter-card.jpg">
+                </dl-avatar>
+            </dl-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue-demi'
+import { DlButton, DlAvatar, DlIcon } from '../../../../components'
+
+export default defineComponent({
+    name: 'StudioHeader',
+    components: {
+        DlButton,
+        DlAvatar,
+        DlIcon
+    },
+    props: {
+        expandLeftDrawer: {
+            type: Boolean
+        }
+    },
+    emits: ['update:expandLeftDrawer'],
+    setup(props, ctx) {
+        const expandLeftDrawerProp = computed<boolean>(
+            () => props.expandLeftDrawer
+        )
+        const isExpandedLeftDrawer = ref(expandLeftDrawerProp.value)
+
+        const updateExpandLeftDrawer = () => {
+            isExpandedLeftDrawer.value = !isExpandedLeftDrawer.value
+            ctx.emit('update:expandLeftDrawer', isExpandedLeftDrawer.value)
+        }
+
+        return {
+            updateExpandLeftDrawer
+        }
+    }
+})
+</script>
+
+<style scoped>
+.navbar-demo-content {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
+    justify-self: center;
+    justify-content: center;
+}
+</style>