@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -0,0 +1,245 @@
+<template>
+    <div class="studio-layout-left-drawer-content">
+        <div
+            style="
+                display: flex;
+                align-items: center;
+                margin: 0px 5px 7px 0px;
+                padding: 5px 0px 0px;
+                width: 100%;
+            "
+        >
+            <dl-typography
+                color="dl-color-medium"
+                variant="h3"
+                size="10px"
+                style="text-transform: capitalize; margin-right: 5px"
+            >
+                LABEL PICKER
+            </dl-typography>
+            <dl-icon
+                size="12px"
+                icon="icon-dl-info"
+                color="dl-color-medium"
+                style="margin: 0px 0px 3px"
+            >
+                <dl-tooltip>
+                    Use dot separation to create nested labels. For example:
+                    "Vehicle" and "Vehicle.Car"
+                </dl-tooltip>
+            </dl-icon>
+        </div>
+        <div style="margin: 0px 0px 10px">
+            <dl-typography
+                color="dl-color-medium"
+                variant="h3"
+                size="12px"
+                style="text-align: center"
+            >
+                For more ontology settings <br>
+                <a href="https://google.com/">go to receipe</a>
+            </dl-typography>
+        </div>
+        <div
+            style="
+                height: 300px;
+                padding: 5px;
+                resize: vertical;
+                overflow: auto;
+            "
+        >
+            <ListAutocomplete
+                :items="listAutocomleteItems"
+                @selectedOption="handleOption"
+            />
+        </div>
+        <hr>
+        <div>
+            <div>
+                <dl-button
+                    v-for="(iconMenu, iconMenuIndex) in iconsMenu"
+                    :key="iconMenuIndex"
+                    flat
+                    :style="`background-color: ${
+                        selectedIconMenu && iconMenu.id === selectedIconMenu.id
+                            ? 'var(--dl-color-fill)'
+                            : ''
+                    }`"
+                    :icon-color="
+                        selectedIconMenu &&
+                            selectedItem &&
+                            iconMenu.id === selectedIconMenu.id
+                            ? selectedItem.color
+                            : 'dl-color-darker'
+                    "
+                    size="l"
+                    :icon="iconMenu.icon"
+                    @click="handleSelectedIconMenu(iconMenu)"
+                >
+                    <dl-tooltip>
+                        {{ iconMenu.tooltip }} ({{ iconMenuIndex }})
+                    </dl-tooltip>
+                </dl-button>
+            </div>
+        </div>
+        <hr>
+        <div
+            style="
+                display: flex;
+                align-items: center;
+                margin: 0px 5px 7px 0px;
+                padding: 5px 0px 0px;
+            "
+        >
+            <dl-icon
+                size="16px"
+                icon="icon-dl-classification"
+                color="dl-color-medium"
+                style="margin: 0px 3px 0px"
+            />
+            <dl-typography
+                color="dl-color-lighter"
+                size="12px"
+                style="text-transform: capitalize; margin-right: 5px"
+            >
+                CLASSIFICATION
+            </dl-typography>
+        </div>
+        <dl-checkbox
+            v-model="autoNextItem"
+            color="dl-color-lighter"
+            label="Auto next item"
+            label-color="dl-color-lighter"
+            @update:model-value="logValue"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import ListAutocomplete from '../ListAutocomplete.vue'
+import {
+    DlButton,
+    DlCheckbox,
+    DlTooltip,
+    DlIcon,
+    DlTypography
+} from '../../../../components'
+
+export default defineComponent({
+    name: 'StudioLeftDrawer',
+    components: {
+        DlTypography,
+        DlIcon,
+        DlTooltip,
+        ListAutocomplete,
+        DlButton,
+        DlCheckbox
+    },
+    setup() {
+        const listAutocomleteItems = [
+            {
+                name: 'Affff fffff ffffffff fffffffff fffffffff fffffffffff fffffff f f f f f f f  f',
+                color: 'red'
+            },
+            { name: 'B', color: 'green' },
+            { name: 'C', color: 'purple' },
+            { name: 'D', color: 'yellow' }
+        ]
+        const selectedItem = ref<any>('')
+
+        const handleOption = (item: any) => {
+            console.log('handle option demo: ', item)
+            selectedItem.value = item
+        }
+        const iconsMenu = [
+            {
+                id: 1,
+                icon: 'icon-dl-selection',
+                tooltip: 'Selection',
+                link: ''
+            },
+            {
+                id: 2,
+                icon: 'icon-dl-classification',
+                tooltip: 'Classification',
+                link: ''
+            },
+            {
+                id: 3,
+                icon: 'icon-dl-point',
+                tooltip: 'Point',
+                link: ''
+            },
+            {
+                id: 4,
+                icon: 'icon-dl-box',
+                tooltip: 'Box',
+                link: ''
+            },
+            {
+                id: 5,
+                icon: 'icon-dl-cubiod',
+                tooltip: 'Cube',
+                link: ''
+            },
+            {
+                id: 6,
+                icon: 'icon-dl-brush',
+                tooltip: 'Semantic segmentation',
+                link: ''
+            },
+            {
+                id: 7,
+                icon: 'icon-dl-polygon',
+                tooltip: 'Polygon',
+                link: ''
+            },
+            {
+                id: 8,
+                icon: 'icon-dl-polyline',
+                tooltip: 'Polyline',
+                link: ''
+            },
+            {
+                id: 9,
+                icon: 'icon-dl-ellipse',
+                tooltip: 'Ellipse',
+                link: ''
+            },
+            {
+                id: 10,
+                icon: 'icon-dl-note-tool',
+                tooltip: 'Notes',
+                link: ''
+            },
+            {
+                id: 11,
+                icon: 'icon-dl-faas-outline',
+                tooltip: 'Applications',
+                link: ''
+            }
+        ]
+        const selectedIconMenu = ref(null)
+
+        const handleSelectedIconMenu = (iconMenu: any) => {
+            selectedIconMenu.value = iconMenu
+        }
+
+        return {
+            listAutocomleteItems,
+            handleOption,
+            selectedItem,
+            iconsMenu,
+            selectedIconMenu,
+            handleSelectedIconMenu
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.studio-layout-left-drawer-content {
+    width: 250px;
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+    <div
+        class="flex items-center"
+        style="height: 100%; background-color: var(--dl-color-body-background)"
+    >
+        <ul>
+            <li>
+                You need to develop the layouts as you can see here with option
+                to enter different kinds of component in the future
+            </li>
+            <li>this layout need to be responsive,</li>
+            <li>Our components should be able to be applied to this layout</li>
+            <li>its would be our design QA</li>
+            <li>We will explain where and how to apply the components</li>
+            <li>
+                After we apply the components, we could simulate the behavior
+                and see how it works
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'StudioMainContent'
+})
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,117 @@
+<template>
+    <div
+        class="tabs-menu"
+        :style="cssVars"
+    >
+        <dl-tabs
+            v-model="selectedTab"
+            :items="tabItems"
+            @update:model-value="handleSelectedOption"
+        />
+        <div class="tabs-menu__border-icon">
+            <dl-button
+                flat
+                :icon="expandIcon"
+                @click="onToggle"
+            />
+        </div>
+        <component :is="tabs" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue-demi'
+import TabMenuAnnotations from './TabMenu/TabMenuAnnotations.vue'
+import TabMenuItem from './TabMenu/TabMenuItem.vue'
+import {
+    DlTabs,
+    DlTabPanels,
+    DlTabPanel,
+    DlIcon,
+    DlButton
+} from '../../../../components'
+import { DlTabDetails } from '../../../../components/types'
+
+export default defineComponent({
+    name: 'StudioTabsMenu',
+    components: {
+        DlTabs,
+        DlTabPanels,
+        DlTabPanel,
+        TabMenuAnnotations,
+        TabMenuItem,
+        DlButton,
+        DlIcon
+    },
+    props: {},
+    setup() {
+        const LARGE_WIDTH = '250px'
+        const SMALL_WIDTH = '0px'
+        const tabsMenuWidth = ref('')
+        const isExpanded = ref(true)
+        const selectedTab = ref('annotations')
+        const tabItems = [
+            {
+                label: 'Annotations',
+                name: 'annotations'
+            },
+            { label: 'Item', name: 'item' }
+        ] as DlTabDetails[]
+
+        const selectedOption = ref(null)
+
+        const handleSelectedOption = (option: any) => {
+            selectedOption.value = option
+        }
+        const tabs = computed(() => {
+            switch (selectedTab.value) {
+                case 'annotations':
+                    return 'TabMenuAnnotations'
+                case 'item':
+                    return 'TabMenuItem'
+                default:
+                    return 'TabMenuAnnotations'
+            }
+        })
+
+        const onToggle = () => {
+            isExpanded.value = !isExpanded.value
+            tabsMenuWidth.value = isExpanded.value ? LARGE_WIDTH : SMALL_WIDTH
+        }
+        const expandIcon = computed(() =>
+            isExpanded.value ? 'icon-dl-right-chevron' : 'icon-dl-left-chevron'
+        )
+        const cssVars = computed(() => {
+            return {
+                '--tabs-menu-width': tabsMenuWidth.value
+            }
+        })
+
+        return {
+            selectedOption,
+            handleSelectedOption,
+            selectedTab,
+            tabItems,
+            tabs,
+            cssVars,
+            onToggle,
+            expandIcon
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-menu {
+    width: var(--tabs-menu-width);
+    overflow: auto;
+    transition: all 300ms;
+
+    &__border-icon {
+        position: absolute;
+        margin-left: -21px;
+        background-color: var(--dl-color-bg);
+        border-radius: 50%;
+    }
+}
+</style>

package/src/layouts/DlStudioLayout/components/Demo/TabMenu/FilterMenu.vue

@@ -0,0 +1,62 @@
+<template>
+    <dl-button
+        flat
+        icon="icon-dl-filter"
+    >
+        <dl-menu>
+            <dl-list
+                style="display: flex"
+                bordered
+                separator
+            >
+                <dl-list-item
+                    v-for="(listItem, listItemIndex) in listItems"
+                    :key="listItemIndex"
+                    clickable
+                    :start-icon="listItem.icon"
+                    :start-icon-color="listItem.color"
+                >
+                    <dl-item-section no-wrap>
+                        {{ listItem.label }}
+                    </dl-item-section>
+                </dl-list-item>
+            </dl-list>
+        </dl-menu>
+    </dl-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlButton,
+    DlMenu,
+    DlList,
+    DlListItem,
+    DlItemSection
+} from '../../../../../components'
+
+export default defineComponent({
+    name: 'FilterMenu',
+    components: {
+        DlButton,
+        DlMenu,
+        DlList,
+        DlListItem,
+        DlItemSection
+    },
+    setup() {
+        const listItems = [
+            {
+                icon: 'icon-dl-classification',
+                color: '',
+                label: 'Classification'
+            }
+        ]
+        return {
+            listItems
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/layouts/DlStudioLayout/components/Demo/TabMenu/TabMenuAnnotations.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <dl-separator />
+        <div
+            style="
+                display: flex;
+                height: 100%;
+                align-items: center;
+                justify-content: start;
+                padding-right: 10px;
+                gap: 5px;
+            "
+        >
+            <dl-button
+                v-for="(buttonItem, buttonIndex) in disabledButtons"
+                :key="buttonIndex"
+                flat
+                dense
+                disabled
+            >
+                <dl-icon
+                    size="16px"
+                    :icon="buttonItem.icon"
+                    color="dl-color-disabled"
+                />
+            </dl-button>
+        </div>
+        <div class="tab-menu-annotations__autocomplete">
+            <div>
+                <dl-input
+                    v-model="searchAnnotation"
+                    placeholder="Search Annotations"
+                    size="l"
+                    has-prepend
+                    padding-prop="0px 0px 0px 0px"
+                >
+                    <template #prepend>
+                        <dl-icon
+                            style="margin-bottom: 5px"
+                            icon="icon-dl-search"
+                            size="12px"
+                        />
+                    </template>
+                </dl-input>
+            </div>
+            <div>
+                <filter-menu />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import FilterMenu from './FilterMenu.vue'
+import {
+    DlSeparator,
+    DlButton,
+    DlIcon,
+    DlInput
+} from '../../../../../components'
+
+export default defineComponent({
+    name: 'TabMenuAnnotations',
+    components: {
+        DlSeparator,
+        DlButton,
+        DlIcon,
+        DlInput,
+        FilterMenu
+    },
+    setup() {
+        const name = ref('Annotations tab')
+        const searchAnnotation = ref('')
+
+        const disabledButtons = [
+            { icon: 'icon-dl-clone' },
+            { icon: 'icon-dl-label' },
+            { icon: 'icon-dl-hide' },
+            { icon: 'icon-dl-delete' }
+        ]
+
+        return {
+            name,
+            disabledButtons,
+            searchAnnotation
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.tab-menu-annotations {
+    &__autocomplete {
+        display: flex;
+    }
+}
+</style>

package/src/layouts/DlStudioLayout/components/Demo/TabMenu/TabMenuItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <div
+            style="
+                display: flex;
+                height: 100%;
+                align-items: center;
+                justify-content: start;
+                padding-right: 10px;
+                gap: 5px;
+            "
+        >
+            <dl-button
+                v-for="(itemButton, buttonIndex) in itemsButton"
+                :key="buttonIndex"
+                flat
+                dense
+            >
+                <dl-icon
+                    size="16px"
+                    :icon="itemButton.icon"
+                    color="dl-color-darker"
+                />
+                <dl-tooltip>
+                    {{ itemButton.tooltip }}
+                </dl-tooltip>
+            </dl-button>
+        </div>
+        <dl-separator />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlSeparator,
+    DlButton,
+    DlIcon,
+    DlTooltip
+} from '../../../../../components'
+
+export default defineComponent({
+    name: 'TabMenuItem',
+    components: {
+        DlSeparator,
+        DlButton,
+        DlIcon,
+        DlTooltip
+    },
+    setup() {
+        const name = ref('Item tab')
+        const itemsButton = [
+            { icon: 'icon-dl-import', tooltip: 'Import Annotations' },
+            { icon: 'icon-dl-export', tooltip: 'Export' },
+            { icon: 'icon-dl-recipe', tooltip: 'Recipe' }
+        ]
+
+        return {
+            name,
+            itemsButton
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/layouts/DlStudioLayout/components/LayoutNavbar.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="dl-layout-navbar">
+        <div style="width: 100%; height: 100%">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlLayoutNavbar'
+})
+</script>
+
+<style scoped lang="scss">
+.dl-layout-navbar {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    align-items: center;
+}
+</style>