edvoyui-component-library-test-flight 0.0.161 → 0.0.163

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.161",
+  "version": "0.0.163",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -18,17 +18,27 @@
     <div
       class="flex flex-col max-w-screen-sm gap-4 p-6 mx-auto mb-10 border rounded-xl"
     >
-      <pre>{{ inputNumber }}</pre>
+      <pre>{{ inputNumber }} ==> {{ inputNumberPoints }}</pre>
       <EUINumberInput
         v-model.trim="inputNumber"
         name="addnote"
         id="addnote"
         label="Add Note"
         placeholder="Note here..."
-        :min="1"
-        :max="10"
+        :min="0"
+        :max="100"
         :step="1"
       />
+      <EUINumberInput
+        v-model.trim="inputNumberPoints"
+        name="addnote"
+        id="addnote"
+        label="Add Note"
+        placeholder="Note here..."
+        :min="0"
+        :max="100"
+        :step="0.5"
+      />
     </div>
 
     <div class="max-w-xs py-4 mx-auto border border-red-500 rounded-xl">
@@ -1626,6 +1636,7 @@ const datepicker = ref(new Date());
 const loading = ref(false);
 
 const inputNumber = ref();
+const inputNumberPoints = ref()
 
 const form = reactive({
   input: "Lorem ipsum dolor sit",

package/src/components/input/EUINumberInput.vue

@@ -53,7 +53,7 @@
         :value="modelValue"
         :min="min"
         :max="max"
-        :step="step"
+        :step="step || 1"
         :placeholder="placeholder"
         :name="name"
         :class="[
@@ -71,13 +71,12 @@
         :disabled="disabled"
         :readonly="readonly"
         autocomplete="off"
-        pattern="^[0-9]{1,3}$"
         inputmode="numeric"
-        @keypress="
-          (e) => {
-            if (!/[0-9]/.test(e.key)) e.preventDefault();
-          }
-        "
+        pattern="^([0-9]{1,5}(\.[0-9]{1,2})?|100000(\.0{1,2})?)$"
+        @keypress="handleKeyPress"
+        @wheel.prevent=""
+        @keydown.up.prevent=""
+        @keydown.down.prevent=""
         @input="emitInput"
         @focus="hasFocus = true"
         @blur="hasFocus = false"
@@ -179,24 +178,42 @@ const input = ref<HTMLInputElement>();
 const id = "id"; //generateUID();
 
 const emit = defineEmits(["update:modelValue"]);
+
 const emitInput = (event: Event) => {
   const inputEl = event.target as HTMLInputElement;
-  let newValue = Number(inputEl.value);
+  const newValue = parseFloat(inputEl.value);
 
-  // Handle non-numeric or empty input
-  if (isNaN(newValue)) {
-    newValue = 0;
+  // Only emit valid numbers within range
+  if (!isNaN(newValue)) {
+    if (newValue >= props.min && newValue <= props.max) {
+      emit("update:modelValue", newValue);
+    } else if (newValue > props.max) {
+      emit("update:modelValue", props.max);
+      inputEl.value = String(props.max);
+    } else if (newValue < props.min) {
+      emit("update:modelValue", props.min);
+      inputEl.value = String(props.min);
+    }
+  } else {
+    emit("update:modelValue", props.min);
+    inputEl.value = String(props.min);
   }
+};
 
-  // Clamp the value between 0 and 100
-  if (newValue < props.min) newValue = props.min;
-  if (newValue > props.max) newValue = props.max;
 
-  // Update both input display and v-model
-  inputEl.value = String(newValue);
-  emit("update:modelValue", newValue);
+const handleKeyPress = (e: KeyboardEvent) => {
+  const inputEl = e.target as HTMLInputElement | null;
+  if (!inputEl) return; // Safety check
+  const allowDecimal = props.step < 1;
+  // Allow digits
+  if (/[0-9]/.test(e.key)) return;
+  // Allow one '.' only if step < 1
+  if (allowDecimal && e.key === '.' && !inputEl.value.includes('.')) return;
+  // Otherwise block input
+  e.preventDefault();
 };
 
+
 const inputValue = computed(() => {
   return props.modelValue === 0 ? true : !!props.modelValue;
 });

package/dist/EUINumberInput.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUINumberInput.vue.d.ts","sourceRoot":"","sources":["../src/components/input/EUINumberInput.vue"],"names":[],"mappings":"AACA,cAAc,4GAA4G,CAAC;AAC3H,OAAO,0HAA0H,CAAC;;AAElI,wBAA0F"}