@dataloop-ai/components 0.18.6 → 0.18.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.6",
+  "version": "0.18.7",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlCounters/DlCounters.vue

@@ -34,12 +34,7 @@ import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { DlKpi } from '../../basic'
 import { DlKpiCounterFormat } from '../../types'
-
-interface CounterItem {
-    value?: number
-    text: string
-    subtext?: string
-}
+import { DlCounterItem } from './types'
 
 export default defineComponent({
     name: 'DlCounters',
@@ -52,9 +47,9 @@ export default defineComponent({
             default: false
         },
         items: {
-            type: Array as PropType<CounterItem[]>,
-            default: (): CounterItem[] => [],
-            validator(value: CounterItem[]): boolean {
+            type: Array as PropType<DlCounterItem[]>,
+            default: (): DlCounterItem[] => [],
+            validator(value: DlCounterItem[]): boolean {
                 return value.length <= 8
             }
         },

package/src/components/compound/DlCounters/types.ts

@@ -0,0 +1,5 @@
+export interface DlCounterItem {
+    value?: number
+    text: string
+    subtext?: string
+}

package/src/components/compound/types.ts

@@ -11,3 +11,5 @@ export * from './DlTable/types'
 export * from './DlToggleButton/types'
 export * from './DlCodeEditor/types'
 export * from './DlCard/types'
+export * from './DlThumbnailGallery/types'
+export * from './DlCounters/types'

package/src/components/essential/{DlPageLayout/DlPageLayout.vue → DlLayout/DlLayout.vue}

@@ -1,21 +1,21 @@
 <template>
     <div
-        class="dl-page-layout"
+        class="dl-layout"
         :style="cssVars"
     >
-        <div class="dl-page-layout__main-head">
+        <div class="dl-layout__main-head">
             <slot name="header" />
         </div>
-        <div class="dl-page-layout__left-drawer">
+        <div class="dl-layout__left-drawer">
             <slot name="leftDrawer" />
         </div>
-        <div class="dl-page-layout__right-drawer">
+        <div class="dl-layout__right-drawer">
             <slot name="rightDrawer" />
         </div>
-        <div class="dl-page-layout__content">
-            <slot name="mainContent" />
+        <div class="dl-layout__content">
+            <slot name="body" />
         </div>
-        <div class="dl-page-layout__footer">
+        <div class="dl-layout__footer">
             <slot name="footer" />
         </div>
     </div>
@@ -24,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue-demi'
 export default defineComponent({
-    name: 'DlPageLayout',
+    name: 'DlLayout',
     props: {
         template: {
             type: String,
@@ -34,7 +34,7 @@ export default defineComponent({
     setup(props) {
         const cssVars = computed(() => {
             return {
-                '--dl-page-layout-template': props.template
+                '--dl-layout-template': props.template
             }
         })
         return {
@@ -45,11 +45,11 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.dl-page-layout {
+.dl-layout {
     height: 100vh;
     width: 100%;
     display: grid;
-    grid-template-areas: var(--dl-page-layout-template);
+    grid-template-areas: var(--dl-layout-template);
     grid-template-rows: auto 1fr auto;
     grid-template-columns: auto 1fr auto;
     box-shadow: 1px 1px 1px var(--dl-color-separator);

package/src/components/essential/DlLayout/index.ts

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

package/src/components/essential/index.ts

@@ -18,4 +18,4 @@ export * from './DlLink'
 export * from './DlColorPicker'
 export * from './DlSpinner'
 export * from './DlSeparator'
-export * from './DlPageLayout'
+export * from './DlLayout'

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'

package/src/demos/DlPageLayoutDemo.vue

@@ -1,146 +0,0 @@
-<template>
-    <div style="height: 100px; width: 100%">
-        <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 #header>
-                    <studio-header
-                        :expand-left-drawer="expandLeftDrawer"
-                        @update:expand-left-drawer="handleExpandLeftDrawer"
-                    />
-                </template>
-                <template #left-menu>
-                    <left-menu-content />
-                </template>
-                <template #leftDrawer>
-                    <studio-left-drawer />
-                </template>
-                <template #rightDrawer>
-                    <studio-tabs-menu />
-                </template>
-                <template #mainContent>
-                    <studio-main-content />
-                </template>
-                <template #footer>
-                    <studio-footer />
-                </template>
-            </DlStudioLayout>
-        </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>
-                <template #header>
-                    <dataset-header />
-                </template>
-                <template #leftDrawer>
-                    <dataset-left-drawer />
-                </template>
-                <template #rightDrawer>
-                    <dataset-right-drawer />
-                </template>
-                <template #mainContent>
-                    <dataset-main-content />
-                </template>
-                <template #footer>
-                    <dataset-footer />
-                </template>
-            </dl-dataset-browser>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue-demi'
-import { DlButton } from '../components'
-import DlStudioLayout from '../layouts/DlStudioLayout/DlStudioLayout.vue'
-import StudioHeader from '../layouts/DlStudioLayout/components/Demo/StudioHeader.vue'
-import StudioMainContent from '../layouts/DlStudioLayout/components/Demo/StudioMainContent.vue'
-import LeftMenuContent from '../layouts/DlStudioLayout/components/Demo/LeftMenuContent.vue'
-import StudioTabsMenu from '../layouts/DlStudioLayout/components/Demo/StudioTabsMenu.vue'
-import StudioLeftDrawer from '../layouts/DlStudioLayout/components/Demo/StudioLeftDrawer.vue'
-import StudioFooter from '../layouts/DlStudioLayout/components/Demo/StudioFooter.vue'
-import DlDatasetBrowser from '../layouts/DlDatasetBrowser/DlDatasetBrowser.vue'
-import DatasetHeader from '../layouts/DlDatasetBrowser/DemoComponents/DatasetHeader.vue'
-import DatasetMainContent from '../layouts/DlDatasetBrowser/DemoComponents/DatasetMainContent.vue'
-import DatasetLeftDrawer from '../layouts/DlDatasetBrowser/DemoComponents/DatasetLeftDrawer.vue'
-import DatasetRightDrawer from '../layouts/DlDatasetBrowser/DemoComponents/DatasetRightDrawer.vue'
-import DatasetFooter from '../layouts/DlDatasetBrowser/DemoComponents/DatasetFooter.vue'
-
-export default defineComponent({
-    name: 'DlPageLayoutDemo',
-    components: {
-        DlButton,
-        DlStudioLayout,
-        StudioHeader,
-        StudioMainContent,
-        StudioTabsMenu,
-        StudioLeftDrawer,
-        StudioFooter,
-        LeftMenuContent,
-        DlDatasetBrowser,
-        DatasetHeader,
-        DatasetLeftDrawer,
-        DatasetRightDrawer,
-        DatasetFooter,
-        DatasetMainContent
-    },
-    setup() {
-        const expandLeftDrawer = ref(false)
-        const isOpenedDatasetBrowserModal = ref(false)
-        const isOpenedStudioModal = ref(false)
-
-        const handleExpandLeftDrawer = (value: any) => {
-            expandLeftDrawer.value = value
-        }
-
-        return {
-            expandLeftDrawer,
-            handleExpandLeftDrawer,
-            isOpenedDatasetBrowserModal,
-            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/StudioHeader.vue

@@ -1,121 +0,0 @@
-<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>

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

@@ -1,147 +0,0 @@
-<template>
-    <div
-        class="dl-layout-drawer"
-        :style="cssVars"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
-    >
-        <div style="height: 100%; position: relative">
-            <div
-                v-if="location === 'right'"
-                class="dl-layout-drawer__wrapper"
-            >
-                <dl-icon
-                    :icon="expandIcon"
-                    size="25px"
-                    class="dl-layout-drawer__wrapper__expand-icon"
-                    :class="{ expanded: !isExpanded }"
-                    @click="toggleExpandDrawer"
-                />
-            </div>
-            <slot />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted, watch } from 'vue-demi'
-import DlIcon from '../../../essential/DlIcon/DlIcon.vue'
-
-export default defineComponent({
-    name: 'NavigationDrawer',
-    components: {
-        DlIcon
-    },
-    props: {
-        position: {
-            type: String,
-            default: 'relative',
-            validator: (val: string) => ['relative', 'absolute'].includes(val)
-        },
-        location: {
-            type: String,
-            default: 'left',
-            validator: (val: string) => ['left', 'right'].includes(val)
-        },
-        expandDrawer: {
-            type: Boolean
-        }
-    },
-    emits: ['expand'],
-    setup(props, context) {
-        const isVisible = ref(true)
-        const propsExpandDrawer = computed(() => props.expandDrawer)
-        const isExpanded = ref(propsExpandDrawer.value)
-        const drawerWidth = ref('')
-        const LARGE_WIDTH = '250px'
-        const SMALL_WIDTH = '0px'
-
-        const onMouseEnter = () => {
-            if (isExpanded.value) return
-            drawerWidth.value = LARGE_WIDTH
-            isVisible.value = true
-        }
-        const onMouseLeave = () => {
-            if (isExpanded.value) return
-            drawerWidth.value = SMALL_WIDTH
-            isVisible.value = false
-        }
-        const expandIcon = computed(() =>
-            props.location === 'left'
-                ? 'icon-dl-left-chevron'
-                : 'icon-dl-right-chevron'
-        )
-        const toggleExpandDrawer = () => {
-            isExpanded.value = !isExpanded.value
-            context.emit('expand', isExpanded.value)
-        }
-
-        onMounted(() => {
-            drawerWidth.value = SMALL_WIDTH
-        })
-        watch(isExpanded, (value) => {
-            isVisible.value = value
-            drawerWidth.value = value ? LARGE_WIDTH : SMALL_WIDTH
-        })
-
-        watch(propsExpandDrawer, (value) => {
-            isExpanded.value = value
-        })
-
-        const cssVars = computed(() => {
-            return {
-                '--dl-layout-drawer-width': isExpanded.value
-                    ? LARGE_WIDTH
-                    : SMALL_WIDTH,
-                '--dl-layout-position': props.position,
-                '--dl-layout-drawer-overflow':
-                    props.position === 'absolute' ? 'hidden' : null
-            }
-        })
-        return {
-            cssVars,
-            onMouseEnter,
-            drawerWidth,
-            onMouseLeave,
-            isVisible,
-            expandIcon,
-            isExpanded,
-            toggleExpandDrawer
-        }
-    }
-})
-</script>
-
-<style scoped lang="scss">
-.dl-layout-drawer {
-    position: var(--dl-layout-position);
-    z-index: 1;
-    width: var(--dl-layout-drawer-width);
-    height: 100%;
-    overflow: var(--dl-layout-drawer-overflow);
-    transition: all 300ms;
-    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.08);
-    background-color: transparent;
-
-    &__wrapper {
-        position: absolute;
-        top: 70px;
-        left: -17px;
-        cursor: pointer;
-        color: var(--dl-color-lighter);
-        text-align: right;
-        margin-top: 8px;
-        background-color: var(--dl-color-bg);
-        border-radius: 50px;
-
-        &__expand-icon {
-            display: flex !important;
-            transition: all 300ms;
-
-            &.expanded {
-                transform: rotate(180deg);
-            }
-        }
-    }
-}
-</style>