@dataloop-ai/components 0.19.54 → 0.19.56

package/package.json

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

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

@@ -1750,7 +1750,14 @@ export default defineComponent({
             }
         }
 
+        const prevScroll = ref<DlVirtualScrollEvent>(null)
+
         function onVScroll(info: DlVirtualScrollEvent) {
+            if (isEqual(prevScroll.value, info)) {
+                return
+            }
+
+            prevScroll.value = info
             emit('virtual-scroll', info)
         }
 

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

@@ -35,7 +35,11 @@ export default defineComponent({
             type: Number,
             default: null
         },
-        noTooltip: Boolean
+        noTooltip: Boolean,
+        padding: {
+            type: String,
+            default: '0 10px'
+        }
     },
     setup(props) {
         const vm = getCurrentInstance()
@@ -63,7 +67,7 @@ export default defineComponent({
         })
 
         const tdStyles = computed(() => {
-            let styles = ''
+            let styles = `padding: ${props.padding};`
 
             if (props.bgColor) {
                 styles = styles.concat(

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

@@ -75,6 +75,10 @@ export default defineComponent({
         pagination: {
             type: Object,
             default: () => ({})
+        },
+        padding: {
+            type: String,
+            default: '0 10px'
         }
     },
     emits: ['click'],
@@ -176,6 +180,9 @@ export default defineComponent({
             iconClass: column?.value?.iconClass ?? null,
             hasOptionalProps,
             headerStyle: [
+                {
+                    padding: props.padding
+                },
                 isString(attrs.style)
                     ? stringStyleToRecord(attrs.style)
                     : attrs.style,

package/src/components/compound/DlTable/hooks/tableColumnSelection.ts

@@ -54,7 +54,7 @@ export function useTableColumnSelection(
                 : colList.value
 
         const updatedCols = cols.map((col) => {
-            const align = col.align || 'right'
+            const align = col.align || 'left'
             const alignClass = ` text-${align}`
 
             const transform: string = col.textTransform || 'default'

package/src/demos/DlAvatarDemo.vue

@@ -25,6 +25,7 @@
             name="John"
         />
         <dl-avatar
+            name="test"
             tooltip="popcat@gmail.com"
             size="72px"
         >

package/src/demos/DlTableDemo.vue

@@ -505,6 +505,67 @@
                 no-data-label="NOoooooOOOOOoooooo"
             />
         </div>
+        <div>
+            <p>With alignments</p>
+            <DlTable
+                :expanded="expanded"
+                :columns="tableColumnsAligned"
+                expandable-rows
+                class="sticky-header"
+                :rows="tableRows"
+                row-key="id"
+                style="height: 500px"
+                :rows-per-page-options="rowsPerPageOptions"
+                @row-click="log"
+                @th-click="log"
+                @update:selected="updateSeleted"
+                @update:expanded="updateExpanded"
+            >
+                <template #body-cell-carbs="{ row }">
+                    <div class="row">
+                        {{ row.carbs }}
+                        <dl-avatar
+                            tooltip="popcat@gmail.com"
+                            size="15px"
+                        >
+                            <img
+                                src="https://popcat.click/twitter-card.jpg"
+                                style="width: 15px; height: 15px"
+                            >
+                        </dl-avatar>
+                    </div>
+                </template>
+                <template #body-cell-expandable-content="{ row }">
+                    <div
+                        v-if="
+                            [
+                                tableRows[0].name,
+                                tableRows[1].name,
+                                tableRows[2].name
+                            ].includes(row.name)
+                        "
+                        class="expanded-row"
+                    >
+                        This is some more information about {{ row.name }}
+                    </div>
+                    <div
+                        v-else-if="
+                            [
+                                tableRows[3].name,
+                                tableRows[4].name,
+                                tableRows[5].name
+                            ].includes(row.name)
+                        "
+                        class="expanded-row"
+                    >
+                        <img
+                            src="https://popcat.click/twitter-card.jpg"
+                            style="width: 150px; height: 150px"
+                        >
+                    </div>
+                </template>
+            </DlTable>
+        </div>
     </div>
 </template>
 
@@ -733,6 +794,78 @@ const rows = [
     }))
 ]
 
+const columnsAligned = [
+    {
+        name: 'name',
+        required: true,
+        label: 'Dessert (100g serving)asdfasdfasdfasdf',
+        align: 'left',
+        field: 'name',
+        sortable: true,
+        textTransform: 'uppercase',
+        hint: 'test hint'
+    },
+    {
+        name: 'calories',
+        align: 'right',
+        label: 'Caloriesasdfasdfasdfasdfasdf',
+        field: 'calories',
+        sortable: true,
+        width: 100
+    },
+    {
+        name: 'fat',
+        label: 'Fat (g)',
+        field: 'fat',
+        sortable: true,
+        align: 'center',
+        width: 100
+    },
+    {
+        name: 'carbs',
+        label: 'Carbs (g)',
+        field: 'carbs',
+        align: 'right',
+        width: 100
+    },
+    {
+        name: 'protein',
+        label: 'Protein (g)',
+        field: 'protein',
+        align: 'left',
+        width: 100
+    },
+    {
+        name: 'sodium',
+        label: 'Sodium (mg)',
+        field: 'sodium',
+        align: 'right',
+        width: 100
+    },
+    {
+        name: 'calcium',
+        label: 'Calcium (%)',
+        field: 'calcium',
+        sortable: true,
+        textTransform: 'lowercase',
+        align: 'right',
+        width: 100,
+        sort: (a: string | number, b: string | number) =>
+            parseInt(a as string, 10) - parseInt(b as string, 10)
+    },
+    {
+        name: 'iron',
+        label: 'Iron (%)',
+        field: 'iron',
+        sortable: true,
+        textTransform: 'lowercase',
+        align: 'left',
+        width: 100,
+        sort: (a: string | number, b: string | number) =>
+            parseInt(a as string, 10) - parseInt(b as string, 10)
+    }
+]
+
 type Rows = (typeof rows)[0]
 
 interface RowsWithIndex extends Rows {
@@ -765,6 +898,7 @@ export default defineComponent({
         const tableRows = ref(cloneDeep(rows))
         const draggable = ref('both')
         const tableColumns = ref(columns)
+        const tableColumnsAligned = ref(columnsAligned)
         const rowsPerPageOptions = ref([10, 12, 14, 16])
 
         const infiniteLoading = ref(false)
@@ -919,7 +1053,8 @@ export default defineComponent({
             isLastPage,
             isFirstPage,
             rows2,
-            columns2
+            columns2,
+            tableColumnsAligned
         }
     },