@dataloop-ai/components 0.19.150 → 0.19.152

package/package.json

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

package/src/assets/globals.scss

@@ -205,7 +205,7 @@ body {
     --dl-color-fill-third: #fbfbfb;
     --dl-color-link: #20abfa;
     --dl-color-cell-background: #fffae2;
-    --dl-color-disabled-slider: #e4e4e4;
+    --dl-color-disabled-slider: #B3B3B3;
     --q-color-positive: #38d079;
     --q-color-warning: #e1b75b;
 

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

@@ -765,7 +765,14 @@ export default defineComponent({
                     setCaretAtTheEnd(input.value)
                     return
                 }
-                if (!toEmit.endsWith('.')) {
+                /**
+                 * if the number ends with a dot followed by multiple zeros
+                 * then we should not replace the inputs value with the parsed number
+                 */
+                if (
+                    !toEmit.endsWith('.') &&
+                    !new RegExp(/\.\d*0+$/, 'g').test(toEmit)
+                ) {
                     input.value.innerHTML = String(Number(toEmit))
                         .toString()
                         .replace(/ /g, ' ')
@@ -1105,7 +1112,28 @@ export default defineComponent({
     methods: {
         onKeydown(e: KeyboardEvent) {
             if (e.key !== 'Backspace') {
-                if (this.type === 'number' && !/^[\d.]$/.test(e.key)) {
+                /**
+                 * Allow only numbers
+                 * Allow decimal point
+                 * Allow arrow keys
+                 * Allow delete
+                 * Allow control/meta keys
+                 * Allow select all
+                 */
+                if (
+                    this.type === 'number' &&
+                    !/^[\d.]$/.test(e.key) &&
+                    ![
+                        'ArrowLeft',
+                        'ArrowRight',
+                        'Backspace',
+                        'Delete',
+                        'Control',
+                        'Meta',
+                        'a'
+                    ].includes(e.key) &&
+                    !(e.ctrlKey || e.metaKey)
+                ) {
                     e.preventDefault()
                     return
                 }

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

@@ -97,8 +97,8 @@ export function useTablePaginationState(
     const computedPagination = computed(() => {
         const pag = pagination.value
             ? {
-                  ...innerPagination.value,
-                  ...pagination.value
+                  ...pagination.value,
+                  ...innerPagination.value
               }
             : innerPagination.value
 

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -364,14 +364,6 @@
                 bottom: 0;
                 pointer-events: none;
             }
-
-            &:before {
-                // background-color: var(--dl-color-fill-hover);
-            }
-
-            &:after {
-                // background-color: var(--dl-color-fill);
-            }
         }
 
         tr.selected td:after {

package/src/demos/DlInputDemo.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div style="padding-bottom: 10px">
+        <div style="padding-bottom: 10px; max-width: 100px">
             <div>Number input</div>
             <dl-input
                 v-model="numberVal"
@@ -8,6 +8,7 @@
                 placeholder="Test reactivity"
                 :disabled="disabledInput"
             />
+            {{ numberVal }}
         </div>
         <div style="padding-bottom: 10px">
             <div>switch the disalbed prop: {{ disabledInput }}</div>

package/src/demos/DlTableDemo.vue

@@ -100,7 +100,8 @@
                 :draggable="draggable"
                 :dense="dense"
                 :pagination="{
-                    rowsPerPage: 10
+                    rowsPerPage: 10,
+                    page: 2
                 }"
                 class="sticky-header"
                 :filter="filter"