@dataloop-ai/components 0.19.24 → 0.19.26

package/package.json

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

package/src/components/basic/DlGrid/DlGrid.vue

@@ -1,5 +1,19 @@
 <template>
+    <div v-if="hasVirtualScroll">
+        <dl-virtual-scroll
+            v-slot="{ item }"
+            style="height: 500px"
+            :items="items"
+            :styles="{ gridStyles, gridClass }"
+        >
+            <slot
+                name="item-slot"
+                v-bind="{ item }"
+            />
+        </dl-virtual-scroll>
+    </div>
     <div
+        v-else
         ref="grid"
         :style="gridStyles"
         :class="gridClass"
@@ -24,9 +38,13 @@ import {
 import { getGridTemplate, swapElementsInMatrix } from './utils'
 import { isCustomEvent } from '../utils'
 import { getElementAbove } from '../../../utils'
-import { DlGridMode } from './types'
+import { DlGridMode, GridItem } from './types'
+import { DlVirtualScroll } from '../../shared/DlVirtualScroll'
 
 export default defineComponent({
+    components: {
+        DlVirtualScroll
+    },
     model: {
         prop: 'modelValue',
         event: 'update:model-value'
@@ -36,6 +54,10 @@ export default defineComponent({
             type: Array as PropType<(string | number)[][]>,
             default: null
         },
+        items: {
+            type: Array as PropType<GridItem[]>,
+            default: null
+        },
         rowGap: {
             type: String,
             default: '30px'
@@ -70,10 +92,16 @@ export default defineComponent({
                 : 'dl-grid-wrapper__flex'
         )
 
+        const hasVirtualScroll = computed(() => props.items?.length > 100)
+
         const gridStyles = computed(() => {
             const gridStyles: Dictionary<string | number> = {
                 '--row-gap': rowGap.value,
-                '--column-gap': columnGap.value
+                '--column-gap': columnGap.value,
+                display: 'grid',
+                rowGap: 'var(--row-gap)',
+                columnGap: 'var(--column-gap)',
+                gridTemplateColumns: 'repeat(var(--element-per-row), 1fr)'
             }
 
             if (!isGridMode.value) {
@@ -112,7 +140,7 @@ export default defineComponent({
         }
 
         const applyGridElementStyles = () => {
-            const childrenElements = Array.from(grid.value.children)
+            const childrenElements = Array.from(grid.value?.children || [])
             const layoutOrder = modelValue.value?.flat() ?? []
 
             // The check is needed to avoid errors and incorrect behavior
@@ -186,7 +214,8 @@ export default defineComponent({
             isFlexMode,
             gridClass,
             gridStyles,
-            grid
+            grid,
+            hasVirtualScroll
         }
     }
 })
@@ -194,12 +223,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dl-grid-wrapper {
-    &__grid {
-        display: grid;
-        row-gap: var(--row-gap);
-        column-gap: var(--column-gap);
-        grid-template-columns: repeat(var(--element-per-row), 1fr);
-    }
     &__flex {
         display: flex;
         gap: var(--row-gap);

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

@@ -8,3 +8,8 @@ export enum DlGridMode {
     FLEX = 'flex',
     LAYOUT = 'layout'
 }
+
+export interface GridItem {
+    id: string | number
+    [key: string]: any
+}

package/src/components/basic/DlPopup/DlPopup.vue

@@ -3,6 +3,9 @@
         ref="menuRef"
         v-bind="menuProps"
         :model-value="modelV"
+        :menu-class="`dl-popup__menu${dense ? ' dl-popup__menu--dense' : ''}${
+            menuClass ? ' ' + menuClass : ''
+        }`"
         @click="handleClick"
         @escapekey="handleEscape"
         @before-show="handleBeforeShow"
@@ -68,7 +71,6 @@ import {
     defineComponent,
     getCurrentInstance,
     ref,
-    watch,
     computed,
     PropType,
     Ref,
@@ -173,7 +175,8 @@ export default defineComponent({
         triggerPercentage: {
             type: Number,
             default: 0
-        }
+        },
+        dense: Boolean
     },
     emits: [...useModelToggleEmits, 'click', 'escapekey', 'close-button-click'],
     setup(props, { attrs, slots, emit }) {

package/src/components/compound/DlTable/DlTable.vue

@@ -177,7 +177,7 @@
                                                     handleVisibleColumnsUpdate
                                                 "
                                             >
-                                                <dl-menu>
+                                                <dl-popup dense>
                                                     <slot
                                                         name="header-cell-visible-columns-menu-content"
                                                         :visible-columns-state="
@@ -190,7 +190,7 @@
                                                             handleVisibleColumnsUpdate
                                                         "
                                                     >
-                                                        <dl-list separator>
+                                                        <dl-list>
                                                             <dl-option-group
                                                                 :model-value="
                                                                     computedVisibleCols
@@ -210,7 +210,7 @@
                                                             />
                                                         </dl-list>
                                                     </slot>
-                                                </dl-menu>
+                                                </dl-popup>
                                             </slot>
                                         </dl-button>
                                     </div>
@@ -527,7 +527,7 @@
                                                     handleVisibleColumnsUpdate
                                                 "
                                             >
-                                                <dl-menu>
+                                                <dl-popup dense>
                                                     <slot
                                                         name="header-cell-visible-columns-menu-content"
                                                         :visible-columns-state="
@@ -540,7 +540,7 @@
                                                             handleVisibleColumnsUpdate
                                                         "
                                                     >
-                                                        <dl-list separator>
+                                                        <dl-list>
                                                             <dl-option-group
                                                                 :model-value="
                                                                     computedVisibleCols
@@ -560,7 +560,7 @@
                                                             />
                                                         </dl-list>
                                                     </slot>
-                                                </dl-menu>
+                                                </dl-popup>
                                             </slot>
                                         </dl-button>
                                     </div>
@@ -878,14 +878,8 @@ import { applyDraggableColumns, applyResizableColumns } from '../../../utils'
 import { injectProp } from '../../../utils/inject-object-prop'
 import { DlTableRow, DlTableProps, DlTableColumn } from './types'
 import { DlPagination } from '../DlPagination'
-import {
-    DlIcon,
-    DlCheckbox,
-    DlProgressBar,
-    DlMenu,
-    DlList
-} from '../../essential'
-import { DlButton } from '../../basic'
+import { DlIcon, DlCheckbox, DlProgressBar, DlList } from '../../essential'
+import { DlButton, DlPopup } from '../../basic'
 import DlOptionGroup from '../DlOptionGroup/DlOptionGroup.vue'
 import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
 import { v4 } from 'uuid'
@@ -917,7 +911,7 @@ export default defineComponent({
         DlEmptyState,
         DlButton,
         DlOptionGroup,
-        DlMenu,
+        DlPopup,
         DlList,
         Sortable
     },

package/src/components/compound/DlTable/components/DlTh.vue

@@ -88,7 +88,8 @@ export default defineComponent({
         })
 
         const isDense = computed(() => {
-            return !!props.props?.dense
+            // @ts-ignore
+            return !!props.props?.dense || !!props.props?.col?.dense
         })
 
         const column = computed(() => {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -500,6 +500,13 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.dl-popup__menu {
+    --dl-popup-padding: 16px;
+    &--dense {
+        --dl-popup-padding: 0;
+    }
+}
+
 .dl-menu {
     position: fixed !important;
     display: inline-block;

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -13,14 +13,15 @@ import {
     isVue2,
     h,
     onUnmounted,
-    toRefs
+    toRefs,
+    PropType
 } from 'vue-demi'
 import getTableMiddle from '../../compound/DlTable/utils/getTableMiddle'
 import { listenOpts, mergeSlot } from '../../../utils'
 import { getScrollTarget } from '../../../utils/scroll'
 import { DlList } from '../../essential/DlList'
 import { DlMarkupTable } from '../../basic/DlMarkupTable'
-import { useVirtualScroll } from './useVirtualScroll'
+import { useVirtualScroll, GridStyles } from './useVirtualScroll'
 import { stateManager } from '../../../StateManager'
 
 const comps = {
@@ -91,6 +92,11 @@ export default defineComponent({
                 typeOptions.includes(v)
         },
 
+        styles: {
+            type: Object as PropType<GridStyles>,
+            default: null
+        },
+
         itemsFn: { type: Function, default: null },
         itemsSize: { type: Number, default: 0 },
 
@@ -251,7 +257,8 @@ export default defineComponent({
                     type.value as 'list' | 'table' | '__dltable'
                 ] || 'div',
                 virtualScrollScope.value.map(slots.default),
-                create
+                create,
+                props.styles
             )
 
             if (isDefined(slots.before)) {

package/src/components/shared/DlVirtualScroll/useVirtualScroll.ts

@@ -25,6 +25,11 @@ export interface ScrollDetails {
     offsetEnd: number
 }
 
+export interface GridStyles {
+    gridStyles: object
+    gridClass: string
+}
+
 const aggBucketSize = 1000
 
 const scrollToEdges = [
@@ -828,7 +833,12 @@ export function useVirtualScroll({
         }
     }
 
-    function padVirtualScroll(tag: string, content: any[], create: Function) {
+    function padVirtualScroll(
+        tag: string,
+        content: any[],
+        create: Function,
+        styles: GridStyles
+    ) {
         const paddingSize =
             props.virtualScrollHorizontal === true ? 'width' : 'height'
 
@@ -874,9 +884,10 @@ export function useVirtualScroll({
             create(
                 tag,
                 {
-                    class: 'dl-virtual-scroll__content',
+                    class: `dl-virtual-scroll__content ${styles?.gridClass}`,
+                    style: styles?.gridStyles,
                     key: 'content',
-                    ref: contentRef,
+                    ref: styles ? 'grid' : contentRef,
                     tabindex: -1
                 },
                 content.flat()

package/src/demos/DlGridDemo.vue

@@ -1,8 +1,33 @@
 <template>
     <div class="widgets-demo-wrapper">
-        <div>
+        <div class="select-wrapper">
+            <div style="width: 40%">
+                <p>Select mode:</p>
+                <dl-select
+                    v-model="activeMode"
+                    :options="[flex, grid, layout]"
+                />
+            </div>
+            <div style="width: 40%">
+                <p>Select content type:</p>
+                <dl-select
+                    v-model="activeContentType"
+                    :options="[
+                        { value: 'images', label: 'Images' },
+                        { value: 'widgets', label: 'Widgets' },
+                        {
+                            value: 'prop',
+                            label: 'Prop + ItemSlot + VirtualScroll'
+                        }
+                    ]"
+                />
+            </div>
+        </div>
+
+        <div v-if="activeMode === layout">
             <h3>Layout mode</h3>
             <dl-button
+                v-if="activeContentType.value === 'widgets'"
                 class="select-layout__button"
                 style="width: 200px; margin-bottom: 20px"
                 @click="addWidget(layout)"
@@ -10,6 +35,7 @@
                 Add widget
             </dl-button>
             <dl-grid
+                v-if="activeContentType.value === 'widgets'"
                 :key="cmWidgets.length"
                 v-model="cmLayout"
                 :max-elements-per-row="cmMaxWidgetsPerRow"
@@ -46,10 +72,22 @@
                     </template>
                 </dl-widget>
             </dl-grid>
+            <dl-grid
+                v-if="activeContentType.value === 'images'"
+                v-model="cmLayout"
+                :mode="layout"
+            >
+                <img
+                    v-for="img in images"
+                    :key="img.id"
+                    :src="img.src"
+                >
+            </dl-grid>
         </div>
-        <div>
+        <div v-else-if="activeMode === grid">
             <h3>Grid mode</h3>
             <dl-button
+                v-if="activeContentType.value === 'widgets'"
                 class="select-layout__button"
                 style="width: 200px; margin-bottom: 20px"
                 @click="addWidget(grid)"
@@ -57,6 +95,7 @@
                 Add widget
             </dl-button>
             <dl-grid
+                v-if="activeContentType.value === 'widgets'"
                 :key="dmWidgets.length"
                 v-model="dmLayout"
                 :max-elements-per-row="dmMaxWidgetsPerRow"
@@ -93,10 +132,22 @@
                     </template>
                 </dl-widget>
             </dl-grid>
+            <dl-grid
+                v-if="activeContentType.value === 'images'"
+                v-model="dmLayout"
+                :mode="layout"
+            >
+                <img
+                    v-for="img in images"
+                    :key="img.id"
+                    :src="img.src"
+                >
+            </dl-grid>
         </div>
-        <div>
+        <div v-else-if="activeMode === flex">
             <h3>Flex mode</h3>
             <dl-button
+                v-if="activeContentType.value === 'widgets'"
                 class="select-layout__button"
                 style="width: 200px; margin-bottom: 20px"
                 @click="addWidget(flex)"
@@ -104,6 +155,7 @@
                 Add widget
             </dl-button>
             <dl-grid
+                v-if="activeContentType.value === 'widgets'"
                 :key="fmWidgets.length"
                 :mode="flex"
             >
@@ -140,13 +192,38 @@
                     </template>
                 </dl-widget>
             </dl-grid>
+            <dl-grid
+                v-if="activeContentType.value === 'images'"
+                :mode="layout"
+            >
+                <img
+                    v-for="img in images"
+                    :key="img.id"
+                    :src="img.src"
+                >
+            </dl-grid>
+        </div>
+        <div v-if="activeContentType.value === 'prop'">
+            <dl-grid :items="images">
+                <template #item-slot="{ item }">
+                    <img :src="item.src">
+                </template>
+            </dl-grid>
         </div>
     </div>
 </template>
 
 <script lang="ts">
+import { v4 } from 'uuid'
 import { defineComponent, Ref, ref } from 'vue-demi'
-import { DlWidget, DlGrid, DlBarChart, DlIcon, DlButton } from '../components'
+import {
+    DlWidget,
+    DlGrid,
+    DlBarChart,
+    DlIcon,
+    DlButton,
+    DlSelect
+} from '../components'
 import { DlGridMode } from '../types'
 
 const data = {
@@ -173,9 +250,16 @@ export default defineComponent({
         DlWidget,
         DlBarChart,
         DlIcon,
-        DlButton
+        DlButton,
+        DlSelect
     },
     setup() {
+        const activeMode = ref('layout')
+        const activeContentType = ref({
+            value: 'images',
+            label: 'Images'
+        })
+
         const cmLayout: Ref<string[][]> = ref([
             ['a', 'b', 'c'],
             ['d', 'e']
@@ -266,6 +350,13 @@ export default defineComponent({
             return template
         }
 
+        const images = []
+        for (let i = 0; i < 101; i++) {
+            images.push({
+                id: v4(),
+                src: 'https://picsum.photos/200/200'
+            })
+        }
         return {
             data,
             deleteWidget,
@@ -281,13 +372,22 @@ export default defineComponent({
             dmMaxWidgetsPerRow,
             layout: DlGridMode.LAYOUT,
             flex: DlGridMode.FLEX,
-            grid: DlGridMode.GRID
+            grid: DlGridMode.GRID,
+            activeMode,
+            activeContentType,
+            images
         }
     }
 })
 </script>
 
 <style lang="scss" scoped>
+.select-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
 .widgets-demo-wrapper {
     display: flex;
     flex-direction: column;
@@ -296,8 +396,6 @@ export default defineComponent({
     gap: 20px;
 
     & > * {
-        display: flex;
-        flex-direction: column;
         gap: 10px;
         border: 1px solid var(--dl-color-separator);
         padding: 10px;