@dataloop-ai/components 0.17.134 → 0.18.1

package/src/demos/DlWidgetDemo.vue

@@ -122,6 +122,49 @@
                     />
                 </template>
             </dl-widget>
+
+            <dl-widget
+                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 #header>
+                    <span>Widget 5</span>
+                </template>
+                <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-widget>
         </dl-grid>
     </div>
 </template>
@@ -133,7 +176,8 @@ import {
     DlGrid,
     DlBarChart,
     DlGridLayout,
-    DlIcon
+    DlIcon,
+    DlButton
 } from '../components'
 
 const labelsFn = () => {
@@ -193,12 +237,13 @@ export default defineComponent({
         DlGrid,
         DlWidget,
         DlBarChart,
-        DlIcon
+        DlIcon,
+        DlButton
     },
     setup() {
         const layout = ref([
             [1, 5, 2],
-            [3, 4]
+            [3, 4, 6]
         ])
 
         const layouts = ref<DlGridLayout[]>([

package/src/demos/index.ts

@@ -1,3 +1,6 @@
+import DlDemoPage from './DlDemoPage.vue'
+export { DlDemoPage }
+
 import AvatarDemo from './DlAvatarDemo.vue'
 import DlAlertDemo from './DlAlertDemo.vue'
 import DlProgressChartDemo from './DlProgressChartDemo.vue'
@@ -39,7 +42,7 @@ import DlBadgeDemo from './DlBadgeDemo.vue'
 import DlTrendDemo from './DlTrendDemo.vue'
 import DlWidgetDemo from './DlWidgetDemo.vue'
 import DlRadioDemo from './DlRadioDemo.vue'
-import DlTextHolderDemo from './DlTextHolderDemo.vue'
+import DlLabel from './DlLabelDemo.vue'
 import DlColumnChartDemo from './ColumnChartDemo.vue'
 import DlBarChartDemo from './BarChartDemo.vue'
 import DlSwitchDemo from './DlSwitchDemo.vue'
@@ -48,16 +51,21 @@ import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
 import DlLineChartDemo from './DlLineChartDemo.vue'
 import DlScatterChartDemo from './DlScatterChartDemo.vue'
 import DlSpinner from './DlSpinnerDemo.vue'
+import DlEmptyStateDemo from './DlEmptyStateDemo.vue'
 import DlConfusionMatrix from './DlConfusionMatrixDemo.vue'
 import DlToggleButtonDemo from './DlToggleButtonDemo.vue'
 import DlKpiDemo from './DlKpiDemo.vue'
 import DlEllipsisDemo from './DlEllipsisDemo.vue'
 import DlSeparatorDemo from './DlSeparatorDemo.vue'
 import DlCardDemo from './DlCardDemo.vue'
+import DlTreeTableDemo from './DlTreeTableDemo.vue'
 import DlGridDemo from './DlGridDemo.vue'
 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 { DlCodeEditorDemo } from './DlCodeEditor'
 
 export default {
     AvatarDemo,
@@ -80,6 +88,7 @@ export default {
     DlThDemo,
     DlTdDemo,
     DlTableDemo,
+    DlTreeTableDemo,
     DlPaginationDemo,
     DlDateTimeRangeDemo,
     DlSmartSearchDemo,
@@ -101,7 +110,7 @@ export default {
     DlTrendDemo,
     DlWidgetDemo,
     DlRadioDemo,
-    DlTextHolderDemo,
+    DlLabel,
     DlToastDemo,
     DlColumnChartDemo,
     DlSwitchDemo,
@@ -110,14 +119,18 @@ export default {
     DlLineChartDemo,
     DlScatterChartDemo,
     DlSpinner,
+    DlEmptyStateDemo,
+    DlEllipsisDemo,
     DlConfusionMatrix,
     DlToggleButtonDemo,
-    DlEllipsisDemo,
     DlSeparatorDemo,
     DlKpiDemo,
     DlCardDemo,
     DlGridDemo,
     DlMarkupTableDemo,
     DlVirtualScrollDemo,
-    DlJsonEditorDemo
+    DlJsonEditorDemo,
+    DlThumbnailGallery,
+    DlCodeEditorDemo,
+    DlPageLayoutDemo
 }

package/src/hooks/use-anchor.ts

@@ -15,6 +15,14 @@ interface AnchorEvent extends KeyboardEvent {
     dlAnchorHandled?: boolean
 }
 
+interface AnchorElements {
+    hide: Function
+    toggle?: Function
+    toggleKey: Function
+    contextClick: Function
+    prevent: Function
+}
+
 export const useAnchorProps = {
     target: {
         type: [String, Boolean],
@@ -24,7 +32,7 @@ export const useAnchorProps = {
     contextMenu: Boolean
 }
 
-export default function ({
+export default function useAnchor({
     configureAnchorEl
 }: {
     configureAnchorEl?: Function
@@ -39,22 +47,12 @@ export default function ({
         // abort with no parent configured or on multi-touch
         return anchorEl?.value === null
             ? false
-            : evt === void 0 ||
-                  evt.touches === void 0 ||
-                  evt.touches.length <= 1
-    }
-
-    interface AnchorElements {
-        hide: Function
-        toggle?: Function
-        toggleKey: Function
-        contextClick: Function
-        prevent: Function
+            : !evt || !evt.touches || evt.touches.length <= 1
     }
 
     const anchorEvents: Partial<AnchorElements> = {}
 
-    if (configureAnchorEl === void 0 && proxy) {
+    if (!configureAnchorEl && proxy) {
         // default configureAnchorEl is designed for
         // DlMenu & DlPopupProxy (which is why it's handled here)
 
@@ -71,7 +69,7 @@ export default function ({
             },
 
             toggleKey(evt: AnchorEvent) {
-                if (isKeyCode(evt, 13) && anchorEvents.toggle !== void 0) {
+                if (isKeyCode(evt, 13) && anchorEvents.toggle) {
                     anchorEvents.toggle(evt)
                 }
             },
@@ -149,11 +147,11 @@ export default function ({
                 try {
                     el = document.querySelector(props.target)
                 } catch (err) {
-                    el = void 0
+                    el = null
                 }
             }
 
-            if (el !== void 0 && el !== null) {
+            if (el) {
                 anchorEl.value = (el as any).$el || el // cannot use VUE type to work on both vue versions, so let it be any
                 if (configureAnchorEl) {
                     configureAnchorEl()

package/src/hooks/use-model-toggle.ts

@@ -41,7 +41,7 @@ export interface AnchorEvent extends KeyboardEvent {
 
 // handleShow/handleHide -> removeTick(), self (& emit show)
 
-export default function ({
+export default function useModelToggle({
     showing,
     canShow, // optional
     handleShow, // optional
@@ -70,16 +70,15 @@ export default function ({
     function show(evt: AnchorEvent) {
         if (
             props.disabled === true ||
-            (evt !== void 0 && evt.dlAnchorHandled === true) ||
-            (canShow !== void 0 && canShow(evt) !== true)
+            (evt && evt.dlAnchorHandled === true) ||
+            (canShow && canShow(evt) !== true)
         ) {
             return
         }
 
         const listener =
-            props[`onUpdate:${modelValueNaming}`] !== void 0 ||
-            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`] !==
-                void 0
+            props[`onUpdate:${modelValueNaming}`] ||
+            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
 
         if (listener === true) {
             emit(`update:${modelValueNaming}`, true)
@@ -87,7 +86,7 @@ export default function ({
 
             nextTick(() => {
                 if (payload === evt) {
-                    payload = void 0
+                    payload = null
                 }
             })
         }
@@ -106,7 +105,7 @@ export default function ({
 
         emit('before-show', evt)
 
-        if (handleShow !== void 0) {
+        if (handleShow) {
             handleShow(evt)
         } else {
             emit('show', evt)
@@ -119,16 +118,15 @@ export default function ({
         }
 
         const listener =
-            props[`onUpdate:${modelValueNaming}`] !== void 0 ||
-            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`] !==
-                void 0
+            props[`onUpdate:${modelValueNaming}`] ||
+            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
 
         if (listener === true) {
             emit(`update:${modelValueNaming}`, false)
             payload = evt
             nextTick(() => {
                 if (payload === evt) {
-                    payload = void 0
+                    payload = null
                 }
             })
         }
@@ -147,7 +145,7 @@ export default function ({
 
         emit('before-hide', evt)
 
-        if (handleHide !== void 0) {
+        if (handleHide) {
             handleHide(evt)
         } else {
             emit('hide', evt)
@@ -156,7 +154,7 @@ export default function ({
 
     function processModelChange(val: boolean) {
         if (props.disabled === true && val === true) {
-            if (props[`onUpdate:${modelValueNaming}`] !== void 0) {
+            if (props[`onUpdate:${modelValueNaming}`]) {
                 emit(`update:${modelValueNaming}`, false)
             }
         } else if ((val === true) !== showing.value) {

package/src/hooks/use-portal.ts

@@ -7,7 +7,7 @@ import { portalList } from '../utils/portal'
 function isOnGlobalDialog(vm: any) {
     vm = vm.parent
 
-    while (vm !== void 0 && vm !== null) {
+    while (vm) {
         if (vm.type.name === 'DlGlobalDialog') {
             return true
         }
@@ -24,7 +24,7 @@ function isOnGlobalDialog(vm: any) {
 // Warning!
 // You MUST specify "inheritAttrs: false" in your component
 
-export default function (
+export default function usePortal(
     vm: ComponentInternalInstance | null,
     innerRef: Ref<HTMLElement | null>,
     checkGlobalDialog = false,

package/src/hooks/use-scroll-target.ts

@@ -8,10 +8,8 @@ export default function (props: any, configureScrollTarget: Function) {
     let scrollFn: Function | undefined
 
     function changeScrollEvent(scrollTarget: any, fn: Function = () => {}) {
-        const fnProp: string = `${
-            fn !== void 0 ? 'add' : 'remove'
-        }EventListener`
-        const fnHandler = fn !== void 0 ? fn : scrollFn
+        const fnProp: string = `${fn ? 'add' : 'remove'}EventListener`
+        const fnHandler = fn ? fn : scrollFn
 
         if (scrollTarget !== window) {
             scrollTarget[fnProp]('scroll', fnHandler, listenOpts.passive)

package/src/hooks/use-size-observer.ts

@@ -1,14 +1,15 @@
 import { onBeforeUnmount, onMounted, ref, Ref } from 'vue-demi'
 import { isEllipsisActive } from '../utils/is-ellipsis-active'
+import { get } from 'lodash'
 
-export function useSizeObserver(elRef: Ref) {
+export function useSizeObserver(elRef: Ref, entryLevel = 'target') {
     const widthRef = ref(0)
     const heightRef = ref(0)
     const hasEllipsis = ref(false)
     const borderBoxSize = ref(null)
     const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
-            hasEllipsis.value = isEllipsisActive(entry.target)
+            hasEllipsis.value = isEllipsisActive(get(entry, entryLevel))
             widthRef.value = entry.contentRect.width
             heightRef.value = entry.contentRect.height
             borderBoxSize.value = entry.borderBoxSize

package/src/hooks/use-transition.ts

@@ -1,6 +1,13 @@
-import { ref, computed, watch, nextTick, Ref } from 'vue-demi'
+import { computed, watch, nextTick, Ref } from 'vue-demi'
 
 export const useTransitionProps = {
+    /**
+     * The duration of the transition in milliseconds.
+     * @default 300
+     * @type {number}
+     *
+     * Disabled for Vue2
+     */
     transitionDuration: {
         type: Number,
         default: 300
@@ -13,11 +20,10 @@ export default function (
     },
     showing: Ref<boolean>
 ) {
-    const transitionState = ref(showing.value)
-
     watch(showing, (val) => {
         nextTick(() => {
-            transitionState.value = val
+            if (showing.value === val) return
+            showing.value = val
         })
     })
 

package/src/index.ts

@@ -1,7 +1,28 @@
-import { install } from 'vue-demi'
+import { computed, install, reactive } from 'vue-demi'
 
 install()
 
+// @ts-ignore
+window.DlComponents = window.DlComponents || {
+    state: reactive({}),
+    setTheme: (theme: 'light' | 'dark') => {
+        // @ts-ignore
+        window.DlComponents.state.theme = theme
+    },
+    get theme(): 'light' | 'dark' {
+        // @ts-ignore
+        return window.DlComponents.state.theme
+    },
+    isDark: computed(() => {
+        // @ts-ignore
+        return window.DlComponents.state.theme === 'dark'
+    }),
+    isLight: computed(() => {
+        // @ts-ignore
+        return window.DlComponents.state.theme === 'light'
+    })
+}
+
 export * from './components'
 import DlComponentsDemo from './App.vue'
 export { DlComponentsDemo }

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetFooter.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="footer-content">
+        <div style="width: 300px">
+            <DlSlider
+                text="Thumb size"
+                editable
+            />
+        </div>
+        <div style="width: 100%; display: flex; padding-left: 20px">
+            <dl-pagination
+                v-model="page"
+                :rows-per-page="rowsPerPage"
+                :boundary-numbers="boundaryNumbers"
+                :boundary-links="boundaryLinks"
+                :direction-links="directionLinks"
+                :max-pages="maxPages"
+                :disabled="disabled"
+                :with-legend="withLegend"
+                :total-items="total"
+                :items-name="itemsName"
+                :with-quick-navigation="withQuickNavigation"
+                :with-rows-per-page="withRowsPerPage"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import { DlSlider, DlPagination } from '../../../components'
+
+export default defineComponent({
+    name: 'DatasetFooter',
+    components: {
+        DlSlider,
+        DlPagination
+    },
+    setup() {
+        const page = ref(18)
+        const rowsPerPage = ref(10)
+        const boundaryNumbers = ref(true)
+        const boundaryLinks = ref(true)
+        const directionLinks = ref(true)
+        const maxPages = ref(6)
+        const disabled = ref(false)
+        const withLegend = ref(true)
+        const total = ref(200)
+        const itemsName = ref('Rows')
+        const withQuickNavigation = ref(true)
+        const withRowsPerPage = ref(true)
+
+        return {
+            page,
+            rowsPerPage,
+            boundaryNumbers,
+            boundaryLinks,
+            directionLinks,
+            maxPages,
+            disabled,
+            withLegend,
+            total,
+            itemsName,
+            withQuickNavigation,
+            withRowsPerPage
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.footer-content {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 15px 0 15px;
+    gap: 20px;
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetHeader.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <navbar-kpi />
+        <navbar-search />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import NavbarKpi from './NavbarKpi.vue'
+import NavbarSearch from './NavbarSearch.vue'
+
+export default defineComponent({
+    name: 'DatasetHeader',
+    components: {
+        NavbarKpi,
+        NavbarSearch
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetLeftDrawer.vue

@@ -0,0 +1,96 @@
+<template>
+    <div
+        class="left-drawer-content"
+        :style="cssVars"
+    >
+        <div style="padding: 10px">
+            <div class="left-drawer-content__toggle-icon">
+                <dl-button
+                    flat
+                    color="secondary"
+                    :icon="expandIcon"
+                    @click="onToggle"
+                />
+            </div>
+            <div style="padding: 40px 0 10px">
+                <dl-typography
+                    size="12px"
+                    color="dl-color-dark"
+                >
+                    Search in:
+                </dl-typography>
+            </div>
+            <dl-radio
+                v-model="checkModel"
+                label="All Dataset items"
+                :value="1"
+            />
+            <dl-radio
+                v-model="checkModel"
+                label="Folders"
+                :value="2"
+            />
+            <dl-radio
+                v-model="checkModel"
+                label="Tasks"
+                :value="3"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi'
+import { DlRadio, DlTypography, DlButton } from '../../../components'
+
+export default defineComponent({
+    name: 'DatasetLeftDrawer',
+    components: {
+        DlRadio,
+        DlTypography,
+        DlButton
+    },
+    setup() {
+        const LARGE_WIDTH = '300px'
+        const SMALL_WIDTH = '50px'
+        const leftDrawerContentWidth = ref(LARGE_WIDTH)
+        const isExpanded = ref(true)
+        const checkModel = ref('')
+
+        const onToggle = () => {
+            isExpanded.value = !isExpanded.value
+            leftDrawerContentWidth.value = isExpanded.value
+                ? LARGE_WIDTH
+                : SMALL_WIDTH
+        }
+        const expandIcon = computed(() =>
+            isExpanded.value ? 'icon-dl-expand' : 'icon-dl-collapse'
+        )
+        const cssVars = computed(() => {
+            return {
+                '--left-drawer-content-width': leftDrawerContentWidth.value
+            }
+        })
+
+        return {
+            checkModel,
+            onToggle,
+            expandIcon,
+            cssVars
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.left-drawer-content {
+    width: var(--left-drawer-content-width);
+    position: relative;
+    transition: all 300ms;
+
+    &__toggle-icon {
+        position: absolute;
+        right: 0;
+    }
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/DatasetMainContent.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="main-content">
+        <main-content-header @onChangeViewMode="handleViewMode" />
+        <main-content-images :view-mode="viewMode" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import MainContentHeader from './MainContent/MainContentNav.vue'
+import MainContentImages from './MainContent/MainContentImages.vue'
+
+export default defineComponent({
+    name: 'DatasetMainContent',
+    components: {
+        MainContentHeader,
+        MainContentImages
+    },
+    setup() {
+        const viewMode = ref('')
+        const handleViewMode = (value: string) => {
+            viewMode.value = value
+        }
+
+        return {
+            viewMode,
+            handleViewMode
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.main-content {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 10px;
+    padding-inline: 20px;
+    align-content: center;
+    text-align: center;
+
+    img {
+        width: 135px;
+        height: 135px;
+        object-fit: cover;
+        border-radius: 2px;
+    }
+}
+</style>