@rypen-dev/shared-components 8.0.13 → 8.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.",
-	"version": "8.0.13",
+	"version": "8.0.14",
 	"type": "module",
 	"main": "./dist/index.js",
 	"scripts": {

package/src/components/NumberInput.vue

@@ -6,9 +6,7 @@
            :pattern="pattern"
            inputmode="numeric"
            ref="inputref"
-           @keydown.up.prevent="increment"
-           @keydown.down.prevent="decrement"
-           @keydown.enter="change"
+           @keydown="checkKey"
            @input="updateValue"
            @blur="change"
            @focus="focus"
@@ -46,6 +44,10 @@
             type: Boolean,
             default: false,
         },
+        enforceNumbersOnly: {
+            type: Boolean,
+            default: true,
+        },
         emitOnInput: {
             type: Boolean,
             default: false,
@@ -85,6 +87,20 @@
         }
     }
 
+    function checkKey(e) {
+        const { key } = e;
+
+        if (key === 'ArrowUp') {
+            increment();
+        } else if (key === 'ArrowDown') {
+            decrement();
+        } else if (key === 'Enter') {
+            inputref.value.blur();
+        } else if (props.enforceNumbersOnly && key.length === 1 && !e.ctrlKey && !e.shiftKey && isNaN(key)) {
+            e.preventDefault();
+        }
+    }
+
     function between(min, val, max) {
         if (min <= max) {
             return Math.min(max, Math.max(min, val));

package/src/components/TimespanInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="timespan">
         <div class="input-container">
-            <input type="number" :min="0" :max="9999" @change="updateValue" :value="daysValue" />
+            <number-input :value="daysValue" @change="updateValue" :min="0" :max="9999" />
         </div>
         <div class="input-container select">
             <select :value="selectedInterval" @change="updateTimeInterval">
@@ -13,6 +13,8 @@
     </div>
 </template>
 <script setup>
+    import NumberInput from './NumberInput.vue';
+
     const TIMESPAN_INTERVALS = {
         DAYS: 'DAYS',
         WEEKS: 'WEEKS',
@@ -30,7 +32,7 @@
     });
     const emit = defineEmits(['update']);
 
-    const daysValue = ref('');
+    const daysValue = ref(0);
     const selectedInterval = ref(TIMESPAN_INTERVALS.DAYS);
 
     onMounted(() => {
@@ -59,23 +61,26 @@
         let newValue = value;
         let newInterval = selectedInterval.value;
 
-        if (value && !isNaN(value)) {
-            if (selectedInterval.value === TIMESPAN_INTERVALS.DAYS) {
-                if (newValue % 365 === 0) {
-                    newValue = newValue / 365;
-                    newInterval = TIMESPAN_INTERVALS.YEARS;
-                } else if (newValue % 7 === 0) {
-                    newValue = newValue / 7;
-                    newInterval = TIMESPAN_INTERVALS.WEEKS;
-                }
-            } else if (selectedInterval.value === TIMESPAN_INTERVALS.WEEKS) {
-                if (value % 52 === 0) {
-                    newValue = value / 52;
-                    newInterval = TIMESPAN_INTERVALS.YEARS;
+        if (!isNaN(value)) {
+            if (value > 0) {
+                if (selectedInterval.value === TIMESPAN_INTERVALS.DAYS) {
+                    if (newValue % 365 === 0) {
+                        newValue = newValue / 365;
+                        newInterval = TIMESPAN_INTERVALS.YEARS;
+                    } else if (newValue % 7 === 0) {
+                        newValue = newValue / 7;
+                        newInterval = TIMESPAN_INTERVALS.WEEKS;
+                    }
+                } else if (selectedInterval.value === TIMESPAN_INTERVALS.WEEKS) {
+                    if (value % 52 === 0) {
+                        newValue = value / 52;
+                        newInterval = TIMESPAN_INTERVALS.YEARS;
+                    }
                 }
             }
+            
         } else {
-            newValue = '';
+            newValue = props.initialValue;
             newInterval = TIMESPAN_INTERVALS.DAYS;
         }