@dataloop-ai/components 0.17.1 → 0.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -18,7 +18,7 @@
     "format": "prettier --write ./src",
     "lint-staged": "lint-staged",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest run --coverage --silent",
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {

package/src/components/basic/DlMarkupTable/DlMarkupTable.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+        :id="uuid"
+        :class="classes"
+    >
+        <table class="dl-table">
+            <slot />
+        </table>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, computed, ref } from 'vue-demi'
+
+const separatorValues = ['horizontal', 'vertical', 'cell', 'none']
+
+export default defineComponent({
+    name: 'DlMarkupTable',
+    props: {
+        dense: Boolean,
+        flat: Boolean,
+        bordered: Boolean,
+        square: Boolean,
+        wrapCells: Boolean,
+
+        separator: {
+            type: String,
+            default: 'horizontal',
+            validator: (v: (typeof separatorValues)[number]) =>
+                separatorValues.includes(v)
+        }
+    },
+    setup(props) {
+        const uuid = ref(`dl-markup-table-${v4()}`)
+
+        const classes = computed(
+            () =>
+                'dl-markup-table dl-table__container dl-table__card' +
+                ` dl-table--${props.separator}-separator` +
+                (props.dense === true ? ' dl-table--dense' : '') +
+                (props.flat === true ? ' dl-table--flat' : '') +
+                (props.bordered === true ? ' dl-table--bordered' : '') +
+                (props.square === true ? ' dl-table--square' : '') +
+                (props.wrapCells === false ? ' dl-table--no-wrap' : '')
+        )
+
+        return {
+            classes,
+            uuid
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../compound/DlTable/styles/dl-table-styles.scss';
+</style>

package/src/components/basic/DlMarkupTable/index.ts

@@ -0,0 +1,2 @@
+import DlMarkupTable from './DlMarkupTable.vue'
+export { DlMarkupTable }

package/src/components/basic/index.ts

@@ -11,3 +11,4 @@ export * from './DlPanelContainer'
 export * from './DlProgressChart'
 export * from './DlEllipsis'
 export * from './DlCard'
+export * from './DlMarkupTable'

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -115,7 +115,7 @@
                 disableDropdown === true
         "
         :disabled="disabled === true || disableMainButton === true"
-        :style="mainButtonStyle"
+        :style="[mainButtonStyle, cssVars]"
         :no-wrap="props.noWrap"
         :tooltip="tooltip"
         :max-width="maxWidth"
@@ -316,6 +316,14 @@ export default defineComponent({
             }
         })
 
+        const cssVars = computed(() => {
+            return {
+                '--justify-content': props.fluid
+                    ? 'space-between'
+                    : 'space-around'
+            }
+        })
+
         watch(
             () => props.modelValue,
             (val) => {
@@ -416,7 +424,8 @@ export default defineComponent({
             menuModel,
             props,
             setHighlightedIndex,
-            handleSelectedItem
+            handleSelectedItem,
+            cssVars
         }
     }
 })
@@ -467,7 +476,7 @@ export default defineComponent({
         &__title {
             display: flex;
             align-items: center;
-            justify-content: space-around;
+            justify-content: var(--justify-content);
             text-align: center;
             padding: 0;
             flex: 10000 1 0%;

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

@@ -57,12 +57,12 @@
         <DlVirtualScroll
             v-if="hasVirtScroll"
             ref="virtScrollRef"
+            type="__dltable"
             :class="tableClass"
-            :draggable-classes="additionalClasses"
             :style="tableStyle"
+            :table-colspan="computedColspan"
             :scroll-target="virtualScrollTarget"
             :items="computedRows"
-            :table-colspan="computedColspan"
             v-bind="virtProps"
             @virtual-scroll="onVScroll"
         >
@@ -492,7 +492,7 @@ import {
     commonVirtScrollProps,
     ScrollDetails
 } from '../../shared/DlVirtualScroll/useVirtualScroll'
-import { DlVirtualScroll } from '../../shared/DlVirtualScroll'
+import DlVirtualScroll from '../../shared/DlVirtualScroll/DlVirtualScroll.vue'
 import { useTableFilter, useTableFilterProps } from './hooks/tableFilter'
 import { useTableSort, useTableSortProps } from './hooks/tableSort'
 import {
@@ -521,6 +521,11 @@ import { DlIcon, DlCheckbox, DlProgressBar } from '../../essential'
 import { ResizableManager } from './utils'
 import { v4 } from 'uuid'
 
+const commonVirtPropsObj = {} as Record<string, any>
+commonVirtPropsList.forEach((p) => {
+    commonVirtPropsObj[p] = {}
+})
+
 export default defineComponent({
     name: 'DlTable',
     components: {

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -1,9 +1,29 @@
+.dl-markup-table {
+  overflow: auto;
+}
+
 .dl-table {
   width: 100%;
   max-width: 100%;
   border-collapse: separate;
   border-spacing: 0;
 
+  //markup-table 
+
+  &__card {
+    background-color: var(--dl-color-panel-background);
+    border-radius: 2px;
+
+    .dl-table__middle {
+      flex: 1 1 auto;
+    }
+
+    .dl-table__top,
+    .dl-table__bottom {
+      flex: 0 0 auto;
+    }
+  }
+
   .dl-table__top,
   .dl-table__bottom,
   thead tr:first-child th {

package/src/components/compound/DlTable/utils/getTableMiddle.ts

@@ -0,0 +1,5 @@
+export default function (props: any, content: any[], create: Function) {
+    return create('div', props, [
+        create('table', { class: 'dl-table' }, content)
+    ])
+}

package/src/components/essential/DlList/DlList.vue

@@ -1,10 +1,11 @@
 <template>
-    <div
+    <component
+        :is="tag"
         :id="uuid"
         :class="classes"
     >
         <slot :clickable="clickable" />
-    </div>
+    </component>
 </template>
 
 <script lang="ts">
@@ -16,7 +17,11 @@ export default defineComponent({
         bordered: Boolean,
         separator: Boolean,
         padding: Boolean,
-        clickable: Boolean
+        clickable: Boolean,
+        tag: {
+            type: String,
+            default: 'div'
+        }
     },
     data() {
         return {

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

@@ -1,69 +1,7 @@
-<template>
-    <!-- Component was created based on Quasar: https://github.com/quasarframework/quasar/blob/dev/ui/src/components/virtual-scroll/QVirtualScroll.js -->
-    <div
-        :id="uuid"
-        ref="rootRef"
-        :style="cssVars"
-        class="dl-table__middle"
-        :class="classes"
-    >
-        <table
-            class="dl-table"
-            :class="draggableClasses"
-        >
-            <slot
-                v-if="hasBeforeSlot"
-                name="before"
-            />
-            <tbody
-                key="before"
-                ref="beforeRef"
-                class="dl-virtual-scroll__padding"
-            >
-                <tr>
-                    <td
-                        class="dl-virtual-scroll__before"
-                        :colspan="colspanAttr"
-                    />
-                </tr>
-            </tbody>
-            <tbody
-                id="draggable"
-                key="content"
-                ref="contentRef"
-                class="dl-virtual-scroll__content"
-                tabindex="-1"
-            >
-                <slot
-                    v-for="scope in virtualScrollScope"
-                    :item="scope.item"
-                />
-            </tbody>
-            <tbody
-                key="after"
-                ref="afterRef"
-                class="dl-virtual-scroll__padding"
-            >
-                <tr>
-                    <td
-                        class="dl-virtual-scroll__after"
-                        :colspan="colspanAttr"
-                    />
-                </tr>
-            </tbody>
-            <slot
-                v-if="hasAfterSlot"
-                name="after"
-            />
-        </table>
-    </div>
-</template>
 <script lang="ts">
-import { v4 } from 'uuid'
 import {
     computed,
     defineComponent,
-    getCurrentInstance,
     onActivated,
     onBeforeMount,
     onBeforeUnmount,
@@ -71,25 +9,75 @@ import {
     onMounted,
     Ref,
     ref,
-    watch
+    watch,
+    isVue2,
+    h
 } from 'vue-demi'
-import { listenOpts } from '../../../utils'
+import getTableMiddle from '../../compound/DlTable/utils/getTableMiddle'
+import { listenOpts, mergeSlot } from '../../../utils'
 import { getScrollTarget } from '../../../utils/scroll'
-import { useVirtualScroll, useVirtualScrollProps } from './useVirtualScroll'
+import { DlList } from '../../essential/DlList'
+import { DlMarkupTable } from '../../basic/DlMarkupTable'
+import { useVirtualScroll } from './useVirtualScroll'
+
+const comps = {
+    list: DlList,
+    table: DlMarkupTable
+}
+
+const virtualScrollRootTag = {
+    list: 'div',
+    table: 'tbody',
+    __dltable: 'tbody'
+}
+
+const typeOptions = ['list', 'table', '__dltable']
 
 export default defineComponent({
-    name: 'DlVirtualScroll',
+    name: 'DllVirtualScroll',
     props: {
-        ...useVirtualScrollProps,
+        virtualScrollSliceSize: {
+            type: [Number, String],
+            default: null as number
+        },
+
+        virtualScrollSliceRatioBefore: {
+            type: [Number, String],
+            default: 1
+        },
+
+        virtualScrollSliceRatioAfter: {
+            type: [Number, String],
+            default: 1
+        },
+
+        virtualScrollItemSize: {
+            type: [Number, String],
+            default: 0
+        },
+
+        virtualScrollStickySizeStart: {
+            type: [Number, String],
+            default: 0
+        },
 
+        virtualScrollStickySizeEnd: {
+            type: [Number, String],
+            default: 0
+        },
+        tableColspan: [Number, String],
+        virtualScrollHorizontal: Boolean,
+        onVirtualScroll: Function,
         items: {
             type: Array,
             default: () => [] as Record<string, any>[]
         },
 
-        draggableClasses: {
-            type: [String, Array, Object],
-            default: null
+        type: {
+            type: String,
+            default: 'list',
+            validator: (v: (typeof typeOptions)[number]) =>
+                typeOptions.includes(v)
         },
 
         itemsFn: { type: Function, default: void 0 },
@@ -99,30 +87,24 @@ export default defineComponent({
             default: void 0
         }
     },
+    emits: ['virtual-scroll'],
     setup(props, { slots, attrs }) {
-        const vm = getCurrentInstance()
-
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
 
-        const virtualScrollLength = computed(() =>
-            props.itemsSize && props.itemsSize >= 0 && props.itemsFn !== void 0
+        const virtualScrollLength = computed(() => {
+            return props.itemsSize >= 0 && props.itemsFn !== void 0
                 ? parseInt(props.itemsSize as unknown as string, 10)
                 : Array.isArray(props.items)
                 ? props.items.length
                 : 0
-        )
+        })
 
         const {
             virtualScrollSliceRange,
             localResetVirtualScroll,
-            onVirtualScrollEvt,
-            virtualScrollPaddingBefore,
-            virtualScrollPaddingAfter,
-            beforeRef,
-            afterRef,
-            contentRef,
-            colspanAttr
+            padVirtualScroll,
+            onVirtualScrollEvt
         } = useVirtualScroll({
             virtualScrollLength,
             getVirtualScrollTarget,
@@ -139,44 +121,35 @@ export default defineComponent({
                 item
             })
 
-            if (props.itemsFn === void 0) {
-                return props.items
-                    .slice(
-                        virtualScrollSliceRange.value.from,
-                        virtualScrollSliceRange.value.to
-                    )
-                    .map(mapFn)
-            }
-
-            return (props.itemsFn as Function)(
-                virtualScrollSliceRange.value.from,
-                virtualScrollSliceRange.value.to -
-                    virtualScrollSliceRange.value.from
-            ).map(mapFn)
+            return props.itemsFn === void 0
+                ? props.items
+                      .slice(
+                          virtualScrollSliceRange.value.from,
+                          virtualScrollSliceRange.value.to
+                      )
+                      .map(mapFn)
+                : props
+                      .itemsFn(
+                          virtualScrollSliceRange.value.from,
+                          virtualScrollSliceRange.value.to -
+                              virtualScrollSliceRange.value.from
+                      )
+                      .map(mapFn)
         })
 
         const classes = computed(
             () =>
-                'dl-virtual-scroll dl-virtual-scroll--vertical' +
+                `dl-virtual-scroll dl-virtual-scroll` +
+                (props.virtualScrollHorizontal === true
+                    ? '--horizontal'
+                    : '--vertical') +
                 (props.scrollTarget !== void 0 ? '' : ' scroll')
         )
 
-        const cssVars = computed(() => {
-            return {
-                '--item-height-before': virtualScrollPaddingBefore.value + 'px',
-                '--item-height-after': virtualScrollPaddingAfter.value + 'px',
-                '--dl-virtual-scroll-item-height':
-                    props.virtualScrollItemSize + 'px'
-            }
-        })
-
         const attributes = computed(() =>
             props.scrollTarget !== void 0 ? {} : { tabindex: 0 }
         )
 
-        const hasBeforeSlot = computed(() => !!slots['before'])
-        const hasAfterSlot = computed(() => !!slots['after'])
-
         watch(virtualScrollLength, () => {
             localResetVirtualScroll()
         })
@@ -190,9 +163,7 @@ export default defineComponent({
         )
 
         function getVirtualScrollEl() {
-            return (
-                (rootRef.value && (rootRef.value as any).$el) || rootRef.value
-            )
+            return (rootRef.value as any)?.$el || rootRef.value
         }
 
         function getVirtualScrollTarget() {
@@ -223,6 +194,22 @@ export default defineComponent({
             }
         }
 
+        function __getVirtualChildren(create: Function) {
+            let child = padVirtualScroll(
+                virtualScrollRootTag[
+                    props.type as 'list' | 'table' | '__dltable'
+                ] || 'div',
+                virtualScrollScope.value.map(slots.default),
+                create
+            )
+
+            if (slots.before !== void 0) {
+                child = slots.before().concat(child)
+            }
+
+            return mergeSlot(slots.after, child)
+        }
+
         onBeforeMount(() => {
             localResetVirtualScroll()
         })
@@ -243,63 +230,54 @@ export default defineComponent({
             unconfigureScrollTarget()
         })
 
+        const hasDefaultSlot = computed(() => {
+            return !!slots.default
+        })
+
         return {
-            uuid: `dl-virtual-scroll-${v4()}`,
+            hasDefaultSlot,
+            getVirtualChildren: __getVirtualChildren,
+            tag: (comps as Record<string, any>)[props.type] || props.type,
+            attrs,
             rootRef,
-            beforeRef,
-            afterRef,
-            contentRef,
-            virtualScrollScope,
-            virtualScrollPaddingBefore,
-            virtualScrollPaddingAfter,
-            attributes,
             classes,
-            hasBeforeSlot,
-            hasAfterSlot,
-            colspanAttr,
-            cssVars
+            attributes
         }
+    },
+    render(createElement: Function) {
+        const renderFn = isVue2 ? createElement : h
+        const renderSlot = (fn: Function) => (isVue2 ? fn() : () => fn())
+
+        if (!this.hasDefaultSlot) {
+            console.error(
+                'DlVirtualScroll: default scoped slot is required for rendering'
+            )
+            return
+        }
+
+        return this.$props.type === '__dltable'
+            ? getTableMiddle(
+                  {
+                      ref: 'rootRef',
+                      class: 'dl-table__middle ' + this.classes
+                  },
+                  this.getVirtualChildren(renderFn),
+                  renderFn
+              )
+            : renderFn(
+                  this.tag,
+                  {
+                      ...this.attrs,
+                      ref: 'rootRef',
+                      class: [this.attrs.class, this.classes],
+                      ...this.attributes
+                  },
+                  renderSlot(() => this.getVirtualChildren(renderFn))
+              )
     }
 })
 </script>
 <style scoped lang="scss">
+@import './styles/dl-virtual-scroll-styles.scss';
 @import '../../compound/DlTable/styles/dl-table-styles.scss';
-.dl-virtual-scroll {
-    &:focus {
-        outline: 0;
-    }
-    &__content {
-        outline: none;
-        contain: content;
-
-        > * {
-            overflow-anchor: none;
-        }
-        > [data-dl-vs-anchor] {
-            overflow-anchor: auto;
-        }
-    }
-    &__before {
-        height: var(--item-height-before);
-    }
-
-    &__after {
-        height: var(--item-height-after);
-    }
-    &__padding {
-        background: repeating-linear-gradient(
-            rgba(128, 128, 128, 0.03),
-            rgba(128, 128, 128, 0.08) var(--dl-virtual-scroll-item-height, 50px)
-        );
-
-        .dl-table & {
-            tr {
-                height: 0 !important;
-            }
-            td {
-                padding: 0 !important;
-            }
-        }
-    }
-}
 </style>

package/src/components/shared/DlVirtualScroll/styles/dl-virtual-scroll-styles.scss

@@ -0,0 +1,52 @@
+.dl-virtual-scroll {
+    &:focus {
+      outline: 0;
+    }
+    &__content {
+      outline: none;
+      contain: content;
+  
+      & > * {
+        overflow-anchor: none;
+      }
+     & > [data-dl-vs-anchor] {
+        overflow-anchor: auto;
+      }
+    }
+    &__padding {
+      background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"};
+      background-size: var(--dl-virtual-scroll-item-width, 100%) var(--dl-virtual-scroll-item-height, 50px) #{"/* rtl:ignore */"};
+  
+      .dl-table & {
+        tr {
+          height: 0 !important;
+        }
+        td {
+          padding: 0 !important;
+        }
+      }
+    }
+    &--horizontal {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: stretch;
+  
+      .dl-virtual-scroll {
+        &__content {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+        }
+        &__padding,
+        &__content,
+        &__content > * {
+          flex: 0 0 auto;
+        }
+        &__padding {
+          background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"};
+          background-size: var(--dl-virtual-scroll-item-width, 50px) var(--dl-virtual-scroll-item-height, 100%) #{"/* rtl:ignore */"};
+        }
+      }
+    }
+  }