@dataloop-ai/components 0.18.6 → 0.18.8

package/src/demos/DlDatasetBrowserLayoutDemo/DlDatasetBrowserLayoutDemo.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <dl-button @click="isOpenedDatasetBrowserModal = true">
+            Dataset Browser
+        </dl-button>
+        <div
+            v-if="isOpenedDatasetBrowserModal"
+            class="fullscreen-template"
+        >
+            <div class="fullscreen-template__close">
+                <dl-button
+                    icon="icon-dl-close"
+                    flat
+                    @click="isOpenedDatasetBrowserModal = false"
+                />
+            </div>
+            <dl-dataset-browser-layout>
+                <template #header>
+                    <dataset-header />
+                </template>
+                <template #leftDrawer>
+                    <dataset-left-drawer />
+                </template>
+                <template #rightDrawer>
+                    <dataset-right-drawer />
+                </template>
+                <template #body>
+                    <dataset-main-content />
+                </template>
+                <template #footer>
+                    <dataset-footer />
+                </template>
+            </dl-dataset-browser-layout>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlButton } from '../../components'
+import { DlDatasetBrowserLayout } from '../../layouts'
+import DatasetHeader from './components/DatasetHeader.vue'
+import DatasetMainContent from './components/DatasetMainContent.vue'
+import DatasetLeftDrawer from './components/DatasetLeftDrawer.vue'
+import DatasetRightDrawer from './components/DatasetRightDrawer.vue'
+import DatasetFooter from './components/DatasetFooter.vue'
+
+export default defineComponent({
+    name: 'DlLayoutDemo',
+    components: {
+        DlButton,
+        DlDatasetBrowserLayout,
+        DatasetHeader,
+        DatasetLeftDrawer,
+        DatasetRightDrawer,
+        DatasetFooter,
+        DatasetMainContent
+    },
+    setup() {
+        const isOpenedDatasetBrowserModal = ref(false)
+
+        return {
+            isOpenedDatasetBrowserModal
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.fullscreen-template {
+    position: fixed;
+    height: 100vh;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-color: var(--dl-color-panel-background);
+    z-index: 1000;
+
+    &__close {
+        position: absolute;
+        right: 10px;
+        z-index: 2;
+    }
+}
+</style>

package/src/demos/DlDatasetBrowserLayoutDemo/index.ts

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

package/src/demos/DlLayoutDemo.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <DlStudioLayoutDemo />
+        <DlDatasetBrowserLayoutDemo />
+        <DlPageLayoutDemo />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlStudioLayoutDemo } from './DlStudioLayoutDemo'
+import { DlDatasetBrowserLayoutDemo } from './DlDatasetBrowserLayoutDemo'
+import { DlPageLayoutDemo } from './DlPageLayoutDemo'
+
+export default defineComponent({
+    name: 'DlLayoutDemo',
+    components: {
+        DlStudioLayoutDemo,
+        DlDatasetBrowserLayoutDemo,
+        DlPageLayoutDemo
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demos/DlPageLayoutDemo/DlPageLayoutDemo.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <dl-button @click="isOpenPageLayoutModal = true">
+            Page Layout
+        </dl-button>
+        <div
+            v-if="isOpenPageLayoutModal"
+            class="fullscreen-template"
+        >
+            <div class="fullscreen-template__close">
+                <dl-button
+                    icon="icon-dl-close"
+                    flat
+                    @click="isOpenPageLayoutModal = false"
+                />
+            </div>
+            <dl-page-layout
+                title="test title"
+                :counters="[
+                    {
+                        value: 200,
+                        text: 'All dataset items'
+                    },
+                    {
+                        value: 100,
+                        text: 'Selected items'
+                    },
+                    {
+                        value: 12,
+                        text: 'Annotated items'
+                    },
+                    {
+                        value: 17,
+                        text: 'Annotations'
+                    }
+                ]"
+            >
+                <div>This is a body</div>
+            </dl-page-layout>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlButton } from '../../components'
+import { DlPageLayout } from '../../layouts'
+
+export default defineComponent({
+    name: 'DlLayoutDemo',
+    components: {
+        DlButton,
+        DlPageLayout
+    },
+    setup() {
+        const isOpenPageLayoutModal = ref(false)
+
+        return {
+            isOpenPageLayoutModal
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.fullscreen-template {
+    position: fixed;
+    height: 100vh;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-color: var(--dl-color-panel-background);
+    z-index: 1000;
+
+    &__close {
+        position: absolute;
+        right: 10px;
+        z-index: 2;
+    }
+}
+</style>

package/src/demos/DlPageLayoutDemo/index.ts

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

package/src/demos/DlStudioLayoutDemo/DlStudioLayoutDemo.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <dl-button @click="isOpenedStudioModal = true">
+            Studio Layout
+        </dl-button>
+        <div
+            v-if="isOpenedStudioModal"
+            class="fullscreen-template"
+        >
+            <div class="fullscreen-template__close">
+                <dl-button
+                    flat
+                    icon="icon-dl-close"
+                    @click="isOpenedStudioModal = false"
+                />
+            </div>
+            <DlStudioLayout>
+                <template #left-menu>
+                    <left-menu-content />
+                </template>
+                <template #leftDrawer>
+                    <studio-left-drawer />
+                </template>
+                <template #rightDrawer>
+                    <studio-tabs-menu />
+                </template>
+                <template #body>
+                    <studio-main-content />
+                </template>
+                <template #footer>
+                    <studio-footer />
+                </template>
+            </DlStudioLayout>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlButton } from '../../components'
+import { DlStudioLayout } from '../../layouts'
+import StudioMainContent from './components/StudioMainContent.vue'
+import LeftMenuContent from './components/LeftMenuContent.vue'
+import StudioTabsMenu from './components/StudioTabsMenu.vue'
+import StudioLeftDrawer from './components/StudioLeftDrawer.vue'
+import StudioFooter from './components/StudioFooter.vue'
+
+export default defineComponent({
+    name: 'DlStudioLayoutDemo',
+    components: {
+        DlButton,
+        DlStudioLayout,
+        StudioMainContent,
+        StudioTabsMenu,
+        StudioLeftDrawer,
+        StudioFooter,
+        LeftMenuContent
+    },
+    setup() {
+        const isOpenedStudioModal = ref(false)
+
+        return {
+            isOpenedStudioModal
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.fullscreen-template {
+    position: fixed;
+    height: 100vh;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-color: var(--dl-color-panel-background);
+    z-index: 1000;
+
+    &__close {
+        position: absolute;
+        right: 10px;
+        z-index: 2;
+    }
+}
+</style>

package/src/{layouts/DlStudioLayout/components/Demo → demos/DlStudioLayoutDemo/components}/StudioLeftDrawer.vue

@@ -117,14 +117,14 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import ListAutocomplete from '../ListAutocomplete.vue'
+import ListAutocomplete from './ListAutocomplete.vue'
 import {
     DlButton,
     DlCheckbox,
     DlTooltip,
     DlIcon,
     DlTypography
-} from '../../../../components'
+} from '../../../components'
 
 export default defineComponent({
     name: 'StudioLeftDrawer',

package/src/{layouts/DlStudioLayout/components/Demo → demos/DlStudioLayoutDemo/components}/StudioTabsMenu.vue

@@ -29,8 +29,8 @@ import {
     DlTabPanel,
     DlIcon,
     DlButton
-} from '../../../../components'
-import { DlTabDetails } from '../../../../components/types'
+} from '../../../components'
+import { DlTabDetails } from '../../../components/types'
 
 export default defineComponent({
     name: 'StudioTabsMenu',

package/src/{layouts/DlStudioLayout/components/Demo → demos/DlStudioLayoutDemo/components}/TabMenu/FilterMenu.vue

@@ -33,7 +33,7 @@ import {
     DlList,
     DlListItem,
     DlItemSection
-} from '../../../../../components'
+} from '../../../../components'
 
 export default defineComponent({
     name: 'FilterMenu',

package/src/{layouts/DlStudioLayout/components/Demo → demos/DlStudioLayoutDemo/components}/TabMenu/TabMenuAnnotations.vue

@@ -53,12 +53,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import FilterMenu from './FilterMenu.vue'
-import {
-    DlSeparator,
-    DlButton,
-    DlIcon,
-    DlInput
-} from '../../../../../components'
+import { DlSeparator, DlButton, DlIcon, DlInput } from '../../../../components'
 
 export default defineComponent({
     name: 'TabMenuAnnotations',

package/src/{layouts/DlStudioLayout/components/Demo → demos/DlStudioLayoutDemo/components}/TabMenu/TabMenuItem.vue

@@ -37,7 +37,7 @@ import {
     DlButton,
     DlIcon,
     DlTooltip
-} from '../../../../../components'
+} from '../../../../components'
 
 export default defineComponent({
     name: 'TabMenuItem',

package/src/demos/DlStudioLayoutDemo/index.ts

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

package/src/demos/index.ts

@@ -64,7 +64,7 @@ import DlMarkupTableDemo from './DlMarkupTableDemo.vue'
 import DlVirtualScrollDemo from './DlVirtualScrollDemo.vue'
 import DlJsonEditorDemo from './DlJsonEditorDemo.vue'
 import DlThumbnailGallery from './DlThumbnailGalleryDemo.vue'
-import DlPageLayoutDemo from './DlPageLayoutDemo.vue'
+import DlLayoutDemo from './DlLayoutDemo.vue'
 import { DlCodeEditorDemo } from './DlCodeEditor'
 
 export default {
@@ -132,5 +132,5 @@ export default {
     DlJsonEditorDemo,
     DlThumbnailGallery,
     DlCodeEditorDemo,
-    DlPageLayoutDemo
+    DlLayoutDemo
 }

package/src/index.ts

@@ -24,5 +24,7 @@ window.DlComponents = window.DlComponents || {
 }
 
 export * from './components'
+export * from './layouts'
+
 import DlComponentsDemo from './App.vue'
 export { DlComponentsDemo }

package/src/layouts/{DlDatasetBrowser/DlDatasetBrowser.vue → DlDatasetBrowserLayout/DlDatasetBrowserLayout.vue}

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

package/src/layouts/DlDatasetBrowserLayout/index.ts

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

package/src/layouts/DlPageLayout/DlPageLayout.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <dl-layout :template="template">
+            <template #header>
+                <slot name="header">
+                    <dl-page-layout-header
+                        :title="title"
+                        :sub-title="subTitle"
+                        :counters="counters"
+                    />
+                </slot>
+            </template>
+            <template #body>
+                <slot name="body">
+                    <slot />
+                </slot>
+            </template>
+            <template #footer>
+                <slot name="footer" />
+            </template>
+        </dl-layout>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlLayout } from '../../components'
+import { DlCounterItem } from '../../types'
+import { DlPageLayoutHeader } from './components'
+
+export default defineComponent({
+    name: 'DlPageLayout',
+    components: {
+        DlLayout,
+        DlPageLayoutHeader
+    },
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        subTitle: {
+            type: String,
+            default: ''
+        },
+        counters: {
+            type: Array as PropType<DlCounterItem[]>,
+            default: () => [] as DlCounterItem[]
+        }
+    },
+    setup() {
+        const template = '"h h h" "p p p" "f f f"'
+
+        return {
+            template
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/layouts/DlPageLayout/components/DlPageLayoutHeader/DlPageLayoutHeader.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="page-layout-header">
+        <div style="display: flex; height: 100%; align-items: center">
+            <div style="padding-left: 25px">
+                <dl-typography
+                    color="dl-color-lighter"
+                    size="10px"
+                >
+                    {{ subTitle }}
+                </dl-typography>
+                <dl-typography
+                    color="dl-color-darker"
+                    size="30px"
+                >
+                    {{ title }}
+                </dl-typography>
+            </div>
+        </div>
+        <div
+            v-if="counters.length > 0"
+            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="counters"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue-demi'
+import { DlTypography, DlCounters } from '../../../../components'
+import { DlCounterItem } from '../../../../types'
+
+export default defineComponent({
+    name: 'DlPageLayoutHeader',
+    components: {
+        DlTypography,
+        DlCounters
+    },
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        subTitle: {
+            type: String,
+            default: ''
+        },
+        counters: {
+            type: Array as PropType<DlCounterItem[]>,
+            default: () => [] as DlCounterItem[]
+        }
+    }
+})
+</script>
+
+<style scoped>
+.page-layout-header {
+    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/DlPageLayout/components/DlPageLayoutHeader/index.ts

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

package/src/layouts/DlPageLayout/components/index.ts

@@ -0,0 +1 @@
+export * from './DlPageLayoutHeader'

package/src/{components/essential → layouts}/DlPageLayout/index.ts

@@ -1,2 +1,4 @@
+export * from './components'
+
 import DlPageLayout from './DlPageLayout.vue'
 export { DlPageLayout }

package/src/layouts/DlStudioLayout/DlStudioLayout.vue

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

package/src/layouts/index.ts

@@ -0,0 +1,3 @@
+export * from './DlPageLayout'
+export * from './DlStudioLayout'
+export * from './DlDatasetBrowserLayout'