@dataloop-ai/components 0.19.145 → 0.19.147

package/package.json

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

package/src/components/basic/DlChip/DlChip.vue

@@ -6,6 +6,7 @@
         class="dl-chip"
         :class="chipClass"
         :style="cssChipVars"
+        @click="$emit('click')"
     >
         <slot name="prefix" />
         <span
@@ -29,7 +30,8 @@
                 ref="dlChipRef"
                 :class="{
                     'dl-chip--ellipsis': overflow,
-                    'dl-chip--no-overflow': !overflow
+                    'dl-chip--no-overflow': !overflow,
+                    'dl-chip--clickable': clickable
                 }"
             >
                 <slot>
@@ -94,9 +96,10 @@ export default defineComponent({
                 Object.values(DlTextTransformOptions).includes(value)
         },
         overflow: { type: Boolean, default: false },
-        fit: { type: Boolean, default: false }
+        fit: { type: Boolean, default: false },
+        clickable: { type: Boolean, default: false }
     },
-    emits: ['remove', 'ellipsis'],
+    emits: ['remove', 'ellipsis', 'click'],
     setup(props, ctx) {
         const isVisible = ref(true)
         const dlChipRef = ref(null)
@@ -136,7 +139,11 @@ export default defineComponent({
             return this.iconColor
         },
         chipClass(): string {
-            return `dl-text-transform--${this.transform}`
+            let classes = `dl-text-transform--${this.transform}`
+            if (this.clickable) {
+                classes += ' dl-chip--clickable'
+            }
+            return classes
         },
         cssChipVars(): Record<string, string | number> {
             return {
@@ -225,6 +232,10 @@ export default defineComponent({
     &--no-overflow {
         overflow-wrap: break-word;
     }
+
+    &--clickable {
+        cursor: pointer;
+    }
 }
 
 .dl-chip-remove-icon-container {

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

@@ -125,7 +125,7 @@ export function useTablePaginationState(
             return
         }
 
-        if (!props.pagination) {
+        if (!props.pagination || !props['update:pagination']) {
             innerPagination.value = newPagination
         }
 

package/src/demos/DlChipDemo.vue

@@ -183,6 +183,8 @@
             <DlChip
                 label="Long Chip Label With Alot Of Text"
                 fit
+                clickable
+                @click="log"
             />
         </div>
     </div>

package/src/demos/DlTableDemo.vue

@@ -99,6 +99,9 @@
                 :bordered="bordered"
                 :draggable="draggable"
                 :dense="dense"
+                :pagination="{
+                    rowsPerPage: 10
+                }"
                 class="sticky-header"
                 :filter="filter"
                 :selection="selection"
@@ -698,7 +701,7 @@
                 virtual-scroll
                 expandable-rows
                 @virtual-scroll="onScrollGenerate"
-                @update:pagination="() => console.log('@@@@ hey')"
+                @update:pagination="log('hi')"
                 @col-update="updateColumns"
             >
                 <template #body-cell-expandable-content="{ row }">