Implement the directive of positive number (rancher#9451)

shell/initialize/index.js

@@ -37,6 +37,7 @@ import '../plugins/trim-whitespace';
 import '../plugins/extend-router';
 
 import intNumber from '../plugins/int-number';
+import positiveIntNumber from '../plugins/positive-int-number.js';
 import nuxtClientInit from '../plugins/nuxt-client-init';
 import replaceAll from '../plugins/replaceall';
 import backButton from '../plugins/back-button';
@@ -277,6 +278,10 @@ async function createApp(ssrContext, config = {}) {
     await intNumber(app.context, inject);
   }
 
+  if (process.client && typeof positiveIntNumber === 'function') {
+    await positiveIntNumber(app.context, inject);
+  }
+
   if (process.client && typeof nuxtClientInit === 'function') {
     await nuxtClientInit(app.context, inject);
   }

shell/plugins/int-number.js

@@ -5,9 +5,12 @@ export default Vue.directive('intNumber', {
     el.addEventListener('keypress', (e) => {
       e = e || window.event;
       const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const re = /\d/;
+      const inputChar = String.fromCharCode(charcode);
 
-      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+      // Allow digits, minus sign at the beginning, and Ctrl key combinations
+      const re = /^-?\d*$/;
+
+      if (!re.test(inputChar) && charcode > 9 && !e.ctrlKey) {
         if (e.preventDefault) {
           e.preventDefault();
         } else {

shell/plugins/positive-int-number.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+
+export default Vue.directive('positiveIntNumber', {
+  inserted(el) {
+    el.addEventListener('keypress', (e) => {
+      e = e || window.event;
+      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
+      const re = /^\d+$/; // Use regex to match positive numbers
+
+      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+        if (e.preventDefault) {
+          e.preventDefault();
+        } else {
+          e.returnValue = false;
+        }
+      }
+    });
+  }
+});