@dataloop-ai/components 0.18.5 → 0.18.7

package/package.json

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

package/src/components/basic/DlAlert/DlAlert.vue

@@ -51,24 +51,23 @@ import {
 } from 'vue-demi'
 import { getColor, includes } from '../../../utils'
 import { DlIcon } from '../../essential'
+import { DlAlertType } from './types'
 
-type AlertType = 'info' | 'success' | 'warning' | 'error'
-
-const typeToIconMap: Record<AlertType, string> = {
+const typeToIconMap: Record<DlAlertType, string> = {
     info: 'icon-dl-info-filled',
     success: 'icon-dl-approve-filled',
     warning: 'icon-dl-alert-filled',
     error: 'icon-dl-error-filled'
 }
 
-const typeToIconColorMap: Record<AlertType, string> = {
+const typeToIconColorMap: Record<DlAlertType, string> = {
     info: 'dl-color-info',
     success: 'dl-color-positive',
     warning: 'dl-color-warning',
     error: 'dl-color-negative'
 }
 
-const typeToBackgroundMap: Record<AlertType, string> = {
+const typeToBackgroundMap: Record<DlAlertType, string> = {
     info: 'dl-color-info-background',
     success: 'dl-color-positive-background',
     warning: 'dl-color-warning-background',
@@ -115,7 +114,7 @@ export default defineComponent({
     emits: ['update:model-value'],
     setup(props, { emit }) {
         const show = ref(props.modelValue)
-        const type = props.type as AlertType
+        const type = props.type as DlAlertType
         const typeIcon = typeToIconMap[type]
         const icon = computed(() => typeToIconMap[type])
         const iconColor = computed(() => typeToIconColorMap[type])

package/src/components/basic/DlAlert/types.ts

@@ -0,0 +1 @@
+export type DlAlertType = 'info' | 'success' | 'warning' | 'error'

package/src/components/basic/types.ts

@@ -8,3 +8,4 @@ export * from './DlWidget/types'
 export * from './DlButton/types'
 export * from './DlGrid/types'
 export * from './DlEmptyState/types'
+export * from './DlAlert/types'

package/src/components/compound/DlCodeEditor/components/CodeEditor.vue

@@ -8,15 +8,7 @@
             'read-only': readOnly,
             wrap: wrap
         }"
-        :style="{
-            width: width,
-            height: height,
-            zIndex: zIndex,
-            maxWidth: maxWidth,
-            minWidth: minWidth,
-            maxHeight: maxHeight,
-            minHeight: minHeight
-        }"
+        :style="editorStyle"
     >
         <div
             class="hljs"
@@ -211,7 +203,7 @@ export default defineComponent({
         },
         borderRadius: {
             type: String,
-            default: '12px'
+            default: '0px'
         },
         languages: {
             type: Array as PropType<string[][]>,
@@ -259,7 +251,13 @@ export default defineComponent({
             height,
             fontSize,
             header,
-            padding
+            padding,
+            width,
+            zIndex,
+            minHeight,
+            maxHeight,
+            minWidth,
+            maxWidth
         } = toRefs(props)
         const scrollBarWidth = ref(0)
         const scrollBarHeight = ref(0)
@@ -312,6 +310,18 @@ export default defineComponent({
             return height.value == 'auto' ? false : true
         })
 
+        const editorStyle = computed<Record<string, any>>(() => {
+            return {
+                width: width.value,
+                height: height.value,
+                zIndex: zIndex.value,
+                maxWidth: maxWidth.value,
+                minWidth: minWidth.value,
+                maxHeight: maxHeight.value,
+                minHeight: minHeight.value
+            }
+        })
+
         watch(contentValue, () => {
             nextTick(() => {
                 code.value!.textContent = contentValue.value
@@ -520,7 +530,8 @@ export default defineComponent({
             tab,
             changeLang,
             updateValue,
-            textAreaStyle
+            textAreaStyle,
+            editorStyle
         }
     }
 })

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/DlDemoPage.vue

@@ -139,11 +139,13 @@ export default defineComponent({
         const demos: {
             name: string
             component: any
-        }[] = names.map((n: string) => ({
-            name: n,
-            // @ts-ignore
-            component: Demos[n]
-        }))
+        }[] = names
+            .map((n: string) => ({
+                name: n,
+                // @ts-ignore
+                component: Demos[n]
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name))
 
         const filteredDemos = computed(() => {
             if (!filterTerm.value || !filterTerm.value.length) {
@@ -198,7 +200,8 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-wrapper {
-    display: flex;
+    display: grid;
+    grid-template-columns: 12% 85%;
 }
 
 .sidebar {

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 }