@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlLineChartDemo.vue

@@ -52,12 +52,59 @@
             :options="tensionOptions"
             style="width: 50%"
         />
+        <dl-line-chart
+            id="example-three"
+            :brush-props="brushProps"
+            :display-brush="false"
+            :display-labels="false"
+            :display-legend="false"
+            :data="tensionLineData"
+            :options="tensionOptions"
+            style="width: 100%"
+            is-empty
+            :empty-state-props="{
+                responsive: true,
+                style: 'min-height: 450px;',
+                bgSize: '130px',
+                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.'
+            }"
+        >
+            <template #links="">
+                <div style="display: flex; gap: 5px; padding: 0 20px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+        </dl-line-chart>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlLineChart } from '../components'
+import { DlLineChart, DlButton } from '../components'
 import { orderBy } from 'lodash'
 
 function randomIntFromInterval(min: number, max: number) {
@@ -336,7 +383,8 @@ const legendProps = {
 export default defineComponent({
     name: 'DlLineChartDemo',
     components: {
-        DlLineChart
+        DlLineChart,
+        DlButton
     },
     data() {
         return {

package/src/demos/DlListDemo.vue

@@ -56,10 +56,8 @@
             </dl-list-item>
             <dl-list-item
                 clickable
-                start-icon="icon-dl-search"
-                end-icon="icon-dl-id"
-                start-icon-color="dl-color-positive"
-                end-icon-color="dl-color-secondary"
+                :start-icon="menuStartIcon"
+                :end-icon="menuEndIcon"
                 @click="log"
             >
                 <dl-item-section no-wrap>
@@ -132,10 +130,8 @@
                     </dl-list-item>
                     <dl-list-item
                         clickable
-                        start-icon="icon-dl-search"
-                        end-icon="icon-dl-id"
-                        start-icon-color="dl-color-positive"
-                        end-icon-color="dl-color-secondary"
+                        :start-icon="menuStartIcon"
+                        :end-icon="menuEndIcon"
                         @click="log"
                     >
                         <dl-item-section no-wrap>
@@ -171,7 +167,14 @@ export default defineComponent({
     },
     setup() {
         const log = (e: Event) => console.log(e)
-        return { log }
+        return {
+            log,
+            menuStartIcon: {
+                icon: 'icon-dl-search',
+                color: 'dl-color-positive'
+            },
+            menuEndIcon: { icon: 'icon-dl-id', color: 'dl-color-secondary' }
+        }
     }
 })
 </script>

package/src/demos/DlMenuDemo.vue

@@ -40,10 +40,8 @@
                     </dl-list-item>
                     <dl-list-item
                         clickable
-                        start-icon="icon-dl-search"
-                        end-icon="icon-dl-id"
-                        start-icon-color="dl-color-positive"
-                        end-icon-color="dl-color-secondary"
+                        :start-icon="menuStartIcon"
+                        :end-icon="menuEndIcon"
                     >
                         <dl-item-section no-wrap>
                             item with custom icon colors
@@ -149,10 +147,8 @@
                     </dl-list-item>
                     <dl-list-item
                         clickable
-                        start-icon="icon-dl-search"
-                        end-icon="icon-dl-id"
-                        start-icon-color="dl-color-positive"
-                        end-icon-color="dl-color-secondary"
+                        :start-icon="menuStartIcon"
+                        :end-icon="menuEndIcon"
                     >
                         <dl-item-section no-wrap>
                             item with custom icon colors
@@ -263,10 +259,8 @@
                     </dl-list-item>
                     <dl-list-item
                         clickable
-                        start-icon="icon-dl-search"
-                        end-icon="icon-dl-id"
-                        start-icon-color="dl-color-positive"
-                        end-icon-color="dl-color-secondary"
+                        :start-icon="menuStartIcon"
+                        :end-icon="menuEndIcon"
                     >
                         <dl-item-section no-wrap>
                             item with custom icon colors
@@ -339,7 +333,7 @@
                 flex-direction: column;
             "
         >
-            V-model {{ showing }}
+            With model V-model {{ showing }}
             <div>
                 <dl-button
                     color="primary"
@@ -363,10 +357,7 @@
             >
                 Click me
 
-                <dl-menu
-                    v-model="showing"
-                    :value="false"
-                >
+                <dl-menu v-model="showing">
                     <dl-list style="min-width: 100px">
                         <dl-list-item clickable>
                             <dl-item-section>New tab</dl-item-section>
@@ -498,6 +489,31 @@
                                 v-for="(item, index) in listItems"
                                 :key="index"
                                 clickable
+                                :highlighted="index === highlightedIndex"
+                            >
+                                <dl-item-section>
+                                    {{ item }}
+                                </dl-item-section>
+                            </dl-list-item>
+                        </dl-list>
+                    </dl-menu>
+                </dl-button>
+
+                <h4>With max height with alot of elements</h4>
+                <dl-button :label="arrowNavigationLabel">
+                    <dl-menu
+                        max-height="250px"
+                        self="bottom middle"
+                        anchor="top middle"
+                        :offset="[50, 5]"
+                        @show="onShow"
+                        @hide="onHide"
+                    >
+                        <dl-list style="min-width: 100px">
+                            <dl-list-item
+                                v-for="(item, index) in alotOfListItems"
+                                :key="index"
+                                clickable
                                 :is-highlighted="index === highlightedIndex"
                             >
                                 <dl-item-section>
@@ -524,6 +540,8 @@ import {
 import { defineComponent, onMounted, ref, watch } from 'vue-demi'
 import { useArrowNavigation } from '../hooks/use-arrow-navigation'
 
+type ItemType = Record<string, any> | string
+
 export default defineComponent({
     name: 'DlMenuDemo',
     components: {
@@ -537,7 +555,7 @@ export default defineComponent({
     setup() {
         const showing = ref(false)
         const isMenuOpen = ref(false)
-        const arrowNavigationLabel = ref('Arrow Navigation Label')
+        const arrowNavigationLabel = ref<ItemType>('Arrow Navigation Label')
 
         const listItems = ref([
             'New tab',
@@ -549,6 +567,109 @@ export default defineComponent({
             'Help & Feedback'
         ])
 
+        const alotOfListItems = ref([
+            'New tab0',
+            'New incognito tab1',
+            'Recent tabs2',
+            'History3',
+            'Downloads4',
+            'Settings5',
+            'Help & Feedback6',
+            'New tab7',
+            'New incognito tab8',
+            'Recent tabs9',
+            'History10',
+            'Downloads11',
+            'Settings12',
+            'Help & Feedback13',
+            'New tab14',
+            'New incognito tab15',
+            'Recent tabs16',
+            'History17',
+            'Downloads18',
+            'Settings19',
+            'Help & Feedback20',
+            'New tab21',
+            'New incognito tab22',
+            'Recent tabs23',
+            'History24',
+            'Downloads25',
+            'Settings26',
+            'Help & Feedback27',
+            'New tab28',
+            'New incognito tab29',
+            'Recent tabs30',
+            'History31',
+            'Downloads32',
+            'Settings33',
+            'Help & Feedback34',
+            'New tab35',
+            'New incognito tab36',
+            'Recent tabs37',
+            'History38',
+            'Downloads39',
+            'Settings40',
+            'Help & Feedback41',
+            'New tab42',
+            'New incognito tab43',
+            'Recent tabs44',
+            'History45',
+            'Downloads46',
+            'Settings47',
+            'Help & Feedback48',
+            'New tab49',
+            'New incognito tab50',
+            'Recent tabs51',
+            'History52',
+            'Downloads53',
+            'Settings54',
+            'Help & Feedback55',
+            'New tab56',
+            'New incognito tab57',
+            'Recent tabs58',
+            'History59',
+            'Downloads60',
+            'Settings61',
+            'Help & Feedback62',
+            'New tab63',
+            'New incognito tab64',
+            'Recent tabs65',
+            'History66',
+            'Downloads67',
+            'Settings68',
+            'Help & Feedback69',
+            'New tab70',
+            'New incognito tab71',
+            'Recent tabs72',
+            'History73',
+            'Downloads74',
+            'Settings75',
+            'Help & Feedback76',
+            'New tab77',
+            'New incognito tab78',
+            'Recent tabs79',
+            'History80',
+            'Downloads81',
+            'Settings82',
+            'Help & Feedback83',
+            'New tab84',
+            'New incognito tab85',
+            'Recent tabs86',
+            'History87',
+            'Downloads88',
+            'Settings89',
+            'Help & Feedback90',
+            'New tab91',
+            'New incognito tab92',
+            'Recent tabs93',
+            'History94',
+            'Downloads95',
+            'Settings96',
+            'Help & Feedback97',
+            'New tab98',
+            'New incognito tab99'
+        ])
+
         const onShow = (value: any) => {
             isMenuOpen.value = !!value
         }
@@ -560,7 +681,7 @@ export default defineComponent({
             isMenuOpen
         )
 
-        watch(selectedItem, (value: string) => {
+        watch(selectedItem, (value: ItemType | string) => {
             arrowNavigationLabel.value = value
         })
 
@@ -576,7 +697,13 @@ export default defineComponent({
             isMenuOpen,
             selectedItem,
             highlightedIndex,
-            arrowNavigationLabel
+            arrowNavigationLabel,
+            alotOfListItems,
+            menuStartIcon: {
+                icon: 'icon-dl-search',
+                color: 'dl-color-positive'
+            },
+            menuEndIcon: { icon: 'icon-dl-id', color: 'dl-color-secondary' }
         }
     }
 })

package/src/demos/DlPageLayoutDemo.vue

@@ -0,0 +1,146 @@
+<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/demos/DlPanelContainerDemo.vue

@@ -149,6 +149,116 @@
                 </template>
             </dl-panel-container>
         </div>
+        <h2>Empty State</h2>
+        <div
+            class="dl-panel-container-demo"
+            style="margin-top: 50px"
+        >
+            <dl-panel-container
+                v-model="collapseP1"
+                :direction="direction"
+                :resizable="resizable"
+                :collapsable="collapsable"
+                width="500px"
+                height="550px"
+                is-empty
+                :empty-state-props="{
+                    responsive: true,
+                    style: 'min-height: 350px;',
+                    bgSize: '130px',
+                    bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                    title: 'Lorem ipsum',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                    info: 'To learn more about this analytics, read our documentation.'
+                }"
+            >
+                <template #links="">
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            flex-direction: row;
+                            padding: 0 20px;
+                        "
+                    >
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-sdk-documentation"
+                            flat
+                            uppercase
+                            label="SDK"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-file"
+                            flat
+                            label="Documentation"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-youtube"
+                            flat
+                            label="Video"
+                        />
+                    </div>
+                </template>
+            </dl-panel-container>
+            <dl-panel-container
+                v-model="collapseP2"
+                :direction="direction"
+                :resizable="resizable"
+                :collapsable="collapsable"
+                width="200px"
+                height="500px"
+                is-empty
+                :empty-state-props="{
+                    responsive: true,
+                    style: 'min-height: 350px;',
+                    bgSize: '130px',
+                    bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                    title: 'Lorem ipsum',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                    info: 'To learn more about this analytics, read our documentation.'
+                }"
+            >
+                <template #links="">
+                    <div
+                        style="
+                            display: flex;
+                            gap: 5px;
+                            flex-wrap: wrap;
+                            padding: 0 20px;
+                        "
+                    >
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-sdk-documentation"
+                            flat
+                            uppercase
+                            label="SDK"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-file"
+                            flat
+                            label="Documentation"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-youtube"
+                            flat
+                            label="Video"
+                        />
+                    </div>
+                </template>
+            </dl-panel-container>
+        </div>
         <div class="controls">
             <select v-model="direction">
                 <option>left</option>
@@ -172,13 +282,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlPanel, DlPanelContainer } from '../components'
+import { DlPanel, DlPanelContainer, DlButton } from '../components'
 
 export default defineComponent({
     name: 'DlPanelContainerDemo',
     components: {
         DlPanelContainer,
-        DlPanel
+        DlPanel,
+        DlButton
     },
     data() {
         return {