@dataloop-ai/components 0.18.6 → 0.18.8

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>