@dataloop-ai/components 0.19.142 → 0.19.144

package/package.json

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

package/src/components/compound/DlInput/DlInput.vue

@@ -674,7 +674,8 @@ export default defineComponent({
             disabled,
             autoTrim,
             debounce,
-            trimDebounce
+            trimDebounce,
+            type
         } = toRefs(props)
 
         const isInternalChange = ref(false)
@@ -728,15 +729,53 @@ export default defineComponent({
             return debounced
         })
 
+        const isValidNumber = (input: string | number) => {
+            const parsedNumber = Number(String(input))
+            return (
+                !isNaN(parsedNumber) &&
+                isFinite(parsedNumber) &&
+                !/[eE]/.test(String(input)) &&
+                parsedNumber >= Number.MIN_SAFE_INTEGER &&
+                parsedNumber <= Number.MAX_SAFE_INTEGER
+            )
+        }
+
         const onChange = (e: KeyboardEvent | Event) => {
             isInternalChange.value = true
             isMenuOpen.value = true
             updateSyntax()
             const target = e.target as HTMLElement
-            const toEmit = target.innerText.replace(
+            let toEmit: string | number = target.innerText.replace(
                 new RegExp('&nbsp;', 'g'),
                 ' '
             )
+
+            if (type.value === 'number') {
+                if (toEmit === '') {
+                    toEmit = '0'
+                }
+
+                const isValid = isValidNumber(toEmit)
+                if (!isValid) {
+                    const trimmed = String(modelValue.value).trim()
+                    input.value.innerHTML = trimmed
+                        .toString()
+                        .replace(/ /g, '&nbsp;')
+                    updateSyntax()
+                    setCaretAtTheEnd(input.value)
+                    return
+                }
+                if (!toEmit.endsWith('.')) {
+                    input.value.innerHTML = String(Number(toEmit))
+                        .toString()
+                        .replace(/ /g, '&nbsp;')
+                    updateSyntax()
+                    setCaretAtTheEnd(input.value)
+                }
+
+                toEmit = Number(toEmit)
+            }
+
             emit('input', toEmit, e)
             emit('update:model-value', toEmit)
             if (autoTrim.value) {
@@ -1065,9 +1104,15 @@ export default defineComponent({
     },
     methods: {
         onKeydown(e: KeyboardEvent) {
-            if (!this.isWithinMaxLength && e.key !== 'Backspace') {
-                e.preventDefault()
-                return
+            if (e.key !== 'Backspace') {
+                if (!/^[\d.]$/.test(e.key)) {
+                    e.preventDefault()
+                    return
+                }
+                if (!this.isWithinMaxLength) {
+                    e.preventDefault()
+                    return
+                }
             }
         },
         onClick(e: Event, item: DlInputSuggestion) {
@@ -1131,6 +1176,9 @@ export default defineComponent({
         },
         onBlur(e: InputEvent): void {
             const el = e.target as HTMLElement
+            el.innerText = (el.innerText ?? '').endsWith('.')
+                ? el.innerText.slice(0, -1)
+                : el.innerText
             el.scroll(0, 0)
             this.focused = false
             this.$emit('blur', e)
@@ -1141,8 +1189,9 @@ export default defineComponent({
         },
         onClear(e: any): void {
             this.$emit('clear', this.modelValue)
-            this.$emit('input', '', e)
-            this.$emit('update:model-value', '')
+            const clearValue = this.type === 'number' ? null : ''
+            this.$emit('input', clearValue, e)
+            this.$emit('update:model-value', clearValue)
 
             const inputRef = this.$refs.input as HTMLInputElement
             inputRef.innerHTML = ''

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

@@ -1,4 +1,4 @@
-import { isNumber } from 'lodash'
+import { debounce, isNumber } from 'lodash'
 import {
     ref,
     computed,
@@ -129,9 +129,13 @@ export function useTablePaginationState(
             innerPagination.value = newPagination
         }
 
-        emit('update:pagination', newPagination)
+        emitChanges(newPagination)
     }
 
+    const emitChanges = debounce((value: TablePagination) => {
+        emit('update:pagination', value)
+    }, 100)
+
     return {
         innerPagination,
         computedPagination,

package/src/demos/DlInputDemo.vue

@@ -1,5 +1,14 @@
 <template>
     <div>
+        <div style="padding-bottom: 10px">
+            <div>Number input</div>
+            <dl-input
+                v-model="numberVal"
+                type="number"
+                placeholder="Test reactivity"
+                :disabled="disabledInput"
+            />
+        </div>
         <div style="padding-bottom: 10px">
             <div>switch the disalbed prop: {{ disabledInput }}</div>
             <dl-switch v-model="disabledInput" />
@@ -311,12 +320,16 @@ export default defineComponent({
         const disabledInput = ref<boolean>(false)
 
         const textVal = ref<string>('test me')
+        const numberVal = ref<number>()
+        const emittedNumberValues = ref<number[]>([])
 
         const trimmedValue = ref('')
 
         return {
             log: console.log,
             textVal,
+            emittedNumberValues,
+            numberVal,
             disabledInput,
             trimmedValue,
             textInputValue,