@dataloop-ai/components 0.18.5 → 0.18.7

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>