@dataloop-ai/components 0.19.26 → 0.19.28

package/package.json

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

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

@@ -2,6 +2,7 @@
     <div v-if="hasVirtualScroll">
         <dl-virtual-scroll
             v-slot="{ item }"
+            :scroll-debounce="scrollDebounce"
             style="height: 500px"
             :items="items"
             :styles="{ gridStyles, gridClass }"
@@ -73,6 +74,10 @@ export default defineComponent({
         mode: {
             type: String as PropType<DlGridMode>,
             default: DlGridMode.LAYOUT
+        },
+        scrollDebounce: {
+            type: Number,
+            default: 100
         }
     },
     emits: ['update:model-value', 'layout-changed'],
@@ -92,7 +97,7 @@ export default defineComponent({
                 : 'dl-grid-wrapper__flex'
         )
 
-        const hasVirtualScroll = computed(() => props.items?.length > 100)
+        const hasVirtualScroll = computed(() => !!props.items)
 
         const gridStyles = computed(() => {
             const gridStyles: Dictionary<string | number> = {

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -1,5 +1,6 @@
 <template>
     <div
+        id="DlConfusionMatrix"
         :style="`max-width: ${maxWidth}`"
         class="confusion-matrix-container"
     >
@@ -524,7 +525,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .confusion-matrix-container {
     margin: auto;
 }

package/src/demos/DlTableDemo.vue

@@ -375,12 +375,16 @@
             <div>
                 <p>Test reactive cells</p>
                 first row:
-                <div class="row">
+                <div
+                    class="row"
+                    style="width: 100%; margin-bottom: 60px"
+                >
                     <dl-input
                         v-for="(value, key) in tableRows[0]"
                         :key="key"
                         v-model="tableRows[0][key]"
                         :title="key"
+                        max-width="50px"
                     />
                 </div>