@dataloop-ai/components 0.19.57 → 0.19.58

package/package.json

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

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

@@ -1291,6 +1291,7 @@ export default defineComponent({
         const setIsDragging = (val: boolean) => (isDragging.value = val)
         const getIsDragging = () => isDragging.value
         const getIsResizing = () => isResizing.value
+        const getVisibleColumnsState = () => visibleColumnsState.value
 
         // table slots
         const hasSlotByName = (name: string) => !!slots[name]
@@ -1905,6 +1906,7 @@ export default defineComponent({
             setIsDragging,
             getIsResizing,
             getIsDragging,
+            getVisibleColumnsState,
             getTableKey
         })
 

package/src/demos/DlInputDemo.vue

@@ -6,13 +6,21 @@
             <div>This is to test v-model reactivity</div>
             <dl-input
                 v-model="textVal"
-                placeholder="testestestset"
+                placeholder="Test reactivity"
+            />
+            <dl-input
+                v-model="textVal"
+                placeholder="Test reactivity disabled"
                 disabled
             />
             <dl-input
                 v-model="textVal"
                 disabled
             />
+            <dl-input
+                v-model="textVal"
+                readonly
+            />
             <dl-input v-model="trimmedValue" />
         </div>
 
@@ -288,10 +296,10 @@ export default defineComponent({
         const val = ref('')
         const trimmedValue = computed<string>({
             get: () => {
-                return val.value.trim()
+                return textVal.value.trim()
             },
             set: (value: string) => {
-                val.value = value.trim()
+                textVal.value = value
             }
         })
 

package/src/demos/DlTableDemo.vue

@@ -467,6 +467,7 @@
                         tableColumns.slice(0, -1).map((c) => c.name)
                     "
                     loading
+                    :resizable="true"
                 >
                     <template #body-cell-row-actions>
                         <dl-button label="ActionButton" />

package/src/utils/resizable-table.ts

@@ -17,7 +17,10 @@ export function applyResizableColumns(table: HTMLTableElement, vm: any) {
     let targetIndex: number = null
 
     watch(
-        () => vm.proxy.getIsDragging(),
+        [
+            () => vm.proxy.getIsDragging(),
+            () => vm.proxy.getVisibleColumnsState()
+        ],
         () => {
             const vnodeEl = isVue2 ? vm.vnode.elm : vm.vnode.el
             table = vnodeEl?.querySelector('table')