@dataloop-ai/components 0.19.130 → 0.19.132

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -49,6 +49,7 @@
         <dl-tooltip
             v-if="tooltip || hasTooltipSlot"
             style="pointer-events: auto"
+            :trigger-percentage="tooltipTriggerPercentage"
         >
             <slot name="tooltip">
                 {{ tooltip }}
@@ -173,6 +174,13 @@ export default defineComponent({
          * The tooltip displayed when hovering over the button
          */
         tooltip: { type: String, default: null, required: false },
+        /**
+         * The percentage of the button's width that will trigger the tooltip
+         */
+        tooltipTriggerPercentage: {
+            type: Number,
+            default: 1
+        },
         /**
          * The button will maintain the styles it has when it's pressed if this prop is active
          */

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

@@ -884,7 +884,10 @@
                     v-bind="marginalsScope"
                 >
                     <div
-                        v-if="hasBotomSelectionBanner"
+                        v-if="
+                            hasBotomSelectionBanner &&
+                                selectedRowsLabel(rowsSelectedNumber)
+                        "
                         class="dl-table__control"
                     >
                         <div>

package/src/demos/DlInputDemo.vue

@@ -1,5 +1,14 @@
 <template>
     <div>
+        <div style="padding-bottom: 10px">
+            <div>switch the disalbed prop: {{ disabledInput }}</div>
+            <dl-switch v-model="disabledInput" />
+            <dl-input
+                v-model="textVal"
+                placeholder="Test reactivity"
+                :disabled="disabledInput"
+            />
+        </div>
         <div>
             <input v-model="textVal">
             <div>This is to test v-model reactivity</div>
@@ -255,11 +264,12 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { computed, defineComponent, ref } from 'vue-demi'
-import { DlInput, DlButton, DlIcon } from '../components'
+import { DlInput, DlButton, DlIcon, DlSwitch } from '../components'
 import { DlInputFile } from '../components/compound/DlInput/types'
 export default defineComponent({
     name: 'DlInputDemo',
     components: {
+        DlSwitch,
         DlInput,
         DlButton,
         DlIcon
@@ -298,6 +308,8 @@ export default defineComponent({
             files.value = val
         }
 
+        const disabledInput = ref<boolean>(false)
+
         const textVal = ref<string>('test me')
 
         const trimmedValue = ref('')
@@ -305,6 +317,7 @@ export default defineComponent({
         return {
             log: console.log,
             textVal,
+            disabledInput,
             trimmedValue,
             textInputValue,
             passFieldValue,

package/src/demos/DlTableDemo.vue

@@ -139,6 +139,7 @@
                     :virtual-scroll="vScroll"
                     style="height: 500px"
                     :rows-per-page-options="rowsPerPageOptions"
+                    :selected-rows-label="(val) => 'Selected rows ' + val"
                     @row-click="log"
                     @th-click="log"
                     @update:selected="updateSeleted"
@@ -677,6 +678,48 @@
                 </template>
             </DlTable>
         </div>
+        <div style="margin-top: 100px">
+            <p>Infinite scrolling With custom data and weird expandable</p>
+            <DlTable
+                :selected="selected"
+                :separator="separator"
+                :draggable="draggable"
+                :filter="filter"
+                :resizable="resizable"
+                :selection="selection"
+                :dense="dense"
+                title="Treats"
+                color="dl-color-secondary"
+                :loading="infiniteLoading"
+                :rows="generatedRows"
+                :columns="tableColumns"
+                style="height: 500px"
+                row-key="index"
+                virtual-scroll
+                expandable-rows
+                @virtual-scroll="onScrollGenerate"
+                @update:pagination="() => console.log('@@@@ hey')"
+                @col-update="updateColumns"
+            >
+                <template #body-cell-expandable-content="{ row }">
+                    <div>
+                        {{ row }}
+                    </div>
+                    <div>
+                        {{ row }}
+                    </div>
+                    <div>
+                        {{ row }}
+                    </div>
+                    <div>
+                        {{ row }}
+                    </div>
+                    <div>
+                        {{ row }}
+                    </div>
+                </template>
+            </DlTable>
+        </div>
     </div>
 </template>
 
@@ -691,7 +734,7 @@ import {
 } from '../components'
 import { defineComponent, ref, computed, nextTick } from 'vue-demi'
 import { times, cloneDeep, isNumber } from 'lodash'
-import { DlTablePagination } from '../types'
+import { DlTablePagination, DlVirtualScrollEvent } from '../types'
 
 const columns = [
     {
@@ -1037,6 +1080,10 @@ export default defineComponent({
             allRows.slice(0, pageSize * (nextPageNumber.value - 1))
         )
 
+        const generatedRows = ref<any>(
+            allRows.slice(0, pageSize * nextPageNumber.value)
+        )
+
         const onScroll = ({ to, ref }: { to: number; ref: any }) => {
             const lastIndex = computedRows.value.length - 1
 
@@ -1057,6 +1104,29 @@ export default defineComponent({
             }
         }
 
+        const onScrollGenerate = ({ index, to, ref }: DlVirtualScrollEvent) => {
+            const lastIndex = generatedRows.value.length - 1
+
+            const getRandomInt = (min: number, max: number) => {
+                min = Math.ceil(min)
+                max = Math.floor(max)
+                return Math.floor(Math.random() * (max - min + 1)) + min
+            }
+            // todo: here we can see that even if we are loading the event keeps getting called with same payload. maybe we shouldnt send the same event payload over and over
+            if (index >= lastIndex) {
+                infiniteLoading.value = true
+
+                setTimeout(() => {
+                    generatedRows.value = generatedRows.value.concat(
+                        cloneDeep(generatedRows.value)
+                            .slice(-10)
+                            .map((r: any) => ({ ...r }))
+                    )
+                    infiniteLoading.value = false
+                }, getRandomInt(500, 2000))
+            }
+        }
+
         const pagination = ref<DlTablePagination>({
             sortBy: 'desc',
             descending: false,
@@ -1166,7 +1236,9 @@ export default defineComponent({
             isFirstPage,
             rows2,
             columns2,
-            tableColumnsAligned
+            tableColumnsAligned,
+            generatedRows,
+            onScrollGenerate
         }
     },