@dataloop-ai/components 0.19.56 → 0.19.58

package/package.json

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

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -422,6 +422,9 @@ export default defineComponent({
                 this.updateDateInterval(null)
             },
             deep: true
+        },
+        modelValue(value: DateInterval | null) {
+            this.dateInterval = value
         }
     },
     methods: {

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/DlDateTimeRangeDemo.vue

@@ -101,6 +101,50 @@
                 @change="handleModelValueUpdate"
             />
         </div>
+        <div style="width: 500px">
+            <div
+                v-if="date"
+                class="row"
+                style="
+                    width: 100%;
+                    align-items: center;
+                    justify-content: center;
+                "
+            >
+                to
+                <input
+                    type="date"
+                    :disabled="!range"
+                    :value="date.from"
+                    class="dl-dtr--range-input"
+                    placeholder="from"
+                    @input="date.from = new Date($event.target.value)"
+                >
+
+                from
+                <input
+                    type="date"
+                    :disabled="!range"
+                    :value="date.to"
+                    class="dl-dtr--range-input"
+                    placeholder="from"
+                    @input="date.to = new Date($event.target.value)"
+                >
+            </div>
+
+            vmodel date: {{ date }}
+            <dl-date-time-range
+                v-model="date"
+                :type="type"
+                width="100%"
+                :available-range="range ? availableRange : null"
+                :mode="mode"
+                :show-time="showTime"
+                :auto-close="autoClose"
+                @set-type="handleSetType"
+                @change="handleModelValueUpdate"
+            />
+        </div>
     </div>
 </template>
 <script lang="ts">

package/src/demos/DlInputDemo.vue

@@ -6,13 +6,22 @@
             <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>
 
         <dl-input
@@ -238,7 +247,7 @@
 </template>
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent, ref } from 'vue-demi'
+import { computed, defineComponent, ref } from 'vue-demi'
 import { DlInput, DlButton, DlIcon } from '../components'
 import { DlInputFile } from '../components/compound/DlInput/types'
 export default defineComponent({
@@ -284,9 +293,20 @@ export default defineComponent({
 
         const textVal = ref<string>('test me')
 
+        const val = ref('')
+        const trimmedValue = computed<string>({
+            get: () => {
+                return textVal.value.trim()
+            },
+            set: (value: string) => {
+                textVal.value = value
+            }
+        })
+
         return {
             log: console.log,
             textVal,
+            trimmedValue,
             textInputValue,
             passFieldValue,
             warningFieldValue,

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')