From 9391e8e2cf37c7e05154ea9c337c052718010787 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Thu, 12 Mar 2026 19:23:45 +0100
Subject: [PATCH 01/14] refactor: update validation functions to return
 undefined instead of boolean

---
 .../ui/src/pages/MainPage.vue                 |  6 +-
 .../ui-examples/ui/src/pages/ErrorsPage.vue   |  6 +-
 .../ui/src/pages/PlNumberFieldPage.vue        | 31 ++++---
 .../ui/src/pages/PlTextFieldPage.vue          | 10 +--
 .../PlNumberField/PlNumberField.vue           | 90 ++++++++++---------
 .../components/PlNumberField/parseNumber.ts   | 47 ++++++++++
 .../PlNumberField/pl-number-field.scss        | 21 ++++-
 .../components/PlTextField/PlTextField.vue    | 27 +++---
 8 files changed, 155 insertions(+), 83 deletions(-)

diff --git a/etc/blocks/monetization-test/ui/src/pages/MainPage.vue b/etc/blocks/monetization-test/ui/src/pages/MainPage.vue
index 3ab2259abe..1d59b4739e 100644
--- a/etc/blocks/monetization-test/ui/src/pages/MainPage.vue
+++ b/etc/blocks/monetization-test/ui/src/pages/MainPage.vue
@@ -35,11 +35,11 @@ function onProductKeyInput(key: string) {
   }
 }
 
-function validateProductKey(key: string): boolean | string {
+function validateProductKey(key: string): string | undefined {
   if (key.length > 0 && key.length !== PRODUCT_KEY_LENGTH) {
     return "Invalid product key";
   }
-  return true;
+  return undefined;
 }
 
 const dropdownOptions: ListOption<string>[] = [
@@ -142,7 +142,7 @@ const productOptions = [
           :model-value="app.model.args.productKey"
           label="or enter product key"
           clearable
-          :rules="[validateProductKey]"
+          :validate="validateProductKey"
           @update:model-value="onProductKeyInput"
         />
       </PlContainer>
diff --git a/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue b/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
index c70a33b167..d3803f2735 100644
--- a/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
@@ -9,10 +9,10 @@ const data = reactive({
   progressDurationMs: "10000",
 });
 
-function positiveNumberRule(v: string): boolean | string {
+function positiveNumberRule(v: string): string | undefined {
   const n = Number(v);
   if (!Number.isFinite(n) || n <= 0) return "Must be a positive number";
-  return true;
+  return undefined;
 }
 
 const numbers = computed({
@@ -64,7 +64,7 @@ const numbers = computed({
       <PlTextField
         v-model="data.progressDurationMs"
         label="Progress duration (ms)"
-        :rules="[positiveNumberRule]"
+        :validate="positiveNumberRule"
       />
     </PlRow>
   </PlBlockPage>
diff --git a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
index 5aa9545c63..b49452ee2b 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
@@ -3,10 +3,16 @@ import { PlRow, PlContainer, PlCheckbox, PlNumberField, PlBlockPage } from "@pla
 import { reactive } from "vue";
 
 const data = reactive({
-  useIncrementButtons: true,
-  updateOnEnterOrClickOutside: false,
   number: 100,
+  disableSteps: false,
 });
+
+function updateNumber(value: number) {
+  if (data.number == null || Number.isNaN(data.number)) {
+    data.number = 0;
+  }
+  data.number += value;
+}
 </script>
 
 <template>
@@ -14,12 +20,9 @@ const data = reactive({
     <template #title>PlNumberField</template>
     <pre>number: {{ data.number }} {{ typeof data.number }}</pre>
     <PlRow>
-      <PlCheckbox v-model="data.useIncrementButtons">Use increment buttons</PlCheckbox>
-      <PlCheckbox v-model="data.updateOnEnterOrClickOutside"
-        >Update on enter or click outside</PlCheckbox
-      >
-      <button @click="data.number += 1">Increment number</button>
-      <button @click="data.number -= 1">Decrement number</button>
+      <PlCheckbox v-model="data.disableSteps">Disable increment buttons</PlCheckbox>
+      <button @click="updateNumber(1)">Increment number</button>
+      <button @click="updateNumber(-1)">Decrement number</button>
       <button @click="data.number = NaN">Set NaN</button>
       <button @click="data.number = 102">Set 102</button>
       <button @click="data.number = '102.2aaaa' as unknown as number">Set '102.2aaaa'</button>
@@ -31,24 +34,24 @@ const data = reactive({
           :min-value="10"
           :max-value="100"
           label="PlNumberField (min: 10, max: 100)"
-          :update-on-enter-or-click-outside="data.updateOnEnterOrClickOutside"
-          :use-increment-buttons="data.useIncrementButtons"
+          clearable
+          :disable-steps="data.disableSteps"
         />
         <PlNumberField
           v-model="data.number"
           :min-value="-5"
           :max-value="200"
           label="PlNumberField (min: -5, max: 200)"
-          :update-on-enter-or-click-outside="data.updateOnEnterOrClickOutside"
-          :use-increment-buttons="data.useIncrementButtons"
+          :clearable="() => undefined"
+          :disable-steps="data.disableSteps"
         />
         <PlNumberField
           v-model="data.number"
           :max-value="100"
           label="PlNumberField (max: 100 and validate is even)"
           :validate="(v) => (v % 2 === 0 ? undefined : 'Value must be even')"
-          :update-on-enter-or-click-outside="data.updateOnEnterOrClickOutside"
-          :use-increment-buttons="data.useIncrementButtons"
+          :clearable="() => 33"
+          :disable-steps="data.disableSteps"
         />
       </PlContainer>
     </PlRow>
diff --git a/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
index 97d1811cb5..76166ee2f4 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
@@ -9,11 +9,11 @@ const data = reactive({
   optionalNum: "" as string,
 });
 
-function numberRule(v: string): boolean | string {
-  if (v === "") return true;
+function numberRule(v: string): string | undefined {
+  if (v === "") return undefined;
   const parsed = Number(v);
   if (!Number.isFinite(parsed)) return "Not a number";
-  return true;
+  return undefined;
 }
 </script>
 
@@ -42,13 +42,13 @@ function numberRule(v: string): boolean | string {
       />
 
       <div>Number (string) + clearable</div>
-      <PlTextField v-model="data.num" placeholder="Number" :rules="[numberRule]" clearable />
+      <PlTextField v-model="data.num" placeholder="Number" :validate="numberRule" clearable />
 
       <div>Optional number (string)</div>
       <PlTextField
         v-model="data.optionalNum"
         placeholder="Number"
-        :rules="[numberRule]"
+        :validate="numberRule"
         clearable
       />
 
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 6103d766dd..3373261585 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -18,18 +18,19 @@ export default {
 };
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="C extends undefined | number = undefined | number">
 import "./pl-number-field.scss";
 import DoubleContour from "../../utils/DoubleContour.vue";
 import { useLabelNotch } from "../../utils/useLabelNotch";
 import { computed, ref, useSlots, watch } from "vue";
 import { PlTooltip } from "../PlTooltip";
-import { parseNumber } from "./parseNumber";
+import { PlIcon16 } from "../PlIcon16";
+import { parseNumber, normalizeNumberString } from "./parseNumber";
+
+const modelValue = defineModel<undefined | number>({ required: true });
 
 const props = withDefaults(
   defineProps<{
-    /** Input is disabled if true */
-    disabled?: boolean;
     /** Label on the top border of the field, empty by default */
     label?: string;
     /** Input placeholder, empty by default */
@@ -40,14 +41,16 @@ const props = withDefaults(
     minValue?: number;
     /** If defined - show an error if value is higher */
     maxValue?: number;
-    /** If false - remove buttons on the right */
-    useIncrementButtons?: boolean;
-    /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside)  */
-    updateOnEnterOrClickOutside?: boolean;
+    /** Input is disabled if true */
+    disabled?: boolean;
+    /** If true - remove buttons on the right */
+    disableSteps?: boolean;
     /** Error message that shows always when it's provided, without other checks */
     errorMessage?: string;
     /** Additional validity check for input value that must return an error text if failed */
     validate?: (v: number) => string | undefined;
+    /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */
+    clearable?: boolean | (() => C);
     /** Makes some of corners not rounded */
     groupPosition?:
       | "top"
@@ -66,16 +69,14 @@ const props = withDefaults(
     placeholder: undefined,
     minValue: undefined,
     maxValue: undefined,
-    useIncrementButtons: true,
-    updateOnEnter: false,
-    errorMessage: undefined,
-    validate: undefined,
+    clearable: false,
     groupPosition: undefined,
+    disableSteps: false,
+    validate: undefined,
+    errorMessage: undefined,
   },
 );
 
-const modelValue = defineModel<number | undefined>({ required: true });
-
 const slots = useSlots();
 
 const rootRef = ref<HTMLElement>();
@@ -109,19 +110,30 @@ const inputValue = computed({
 
     cachedValue.value = r.cleanInput;
 
-    if (r.error || props.updateOnEnterOrClickOutside) {
+    if (r.error) {
       inputRef.value!.value = r.cleanInput;
     } else {
-      modelValue.value = r.value;
+      modelValue.value = r.value as C;
     }
   },
 });
 
-const focused = ref(false);
+const canShowClearable = computed(
+  () => props.clearable && modelValue.value !== undefined && !props.disabled,
+);
+
+function clear() {
+  if (typeof props.clearable === "function") {
+    modelValue.value = props.clearable();
+  } else {
+    modelValue.value = undefined as C;
+  }
+  resetCachedValue();
+}
 
 function applyChanges() {
   if (parsedResult.value.error === undefined) {
-    modelValue.value = parsedResult.value.value;
+    modelValue.value = parsedResult.value.value as C;
   }
 }
 
@@ -205,16 +217,6 @@ function decrement() {
 }
 
 function handleKeyPress(e: { code: string; preventDefault(): void }) {
-  if (props.updateOnEnterOrClickOutside) {
-    if (e.code === "Escape") {
-      inputValue.value = modelToString(modelValue.value);
-      inputRef.value?.blur();
-    }
-    if (e.code === "Enter") {
-      inputRef.value?.blur();
-    }
-  }
-
   if (e.code === "Enter") {
     inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc
   }
@@ -223,15 +225,23 @@ function handleKeyPress(e: { code: string; preventDefault(): void }) {
     e.preventDefault();
   }
 
-  if (props.useIncrementButtons && e.code === "ArrowUp") {
+  if (props.disableSteps !== true && e.code === "ArrowUp") {
     increment();
   }
 
-  if (props.useIncrementButtons && e.code === "ArrowDown") {
+  if (props.disableSteps !== true && e.code === "ArrowDown") {
     decrement();
   }
 }
 
+function handlePaste(e: ClipboardEvent) {
+  const pasted = e.clipboardData?.getData("text");
+  if (pasted) {
+    e.preventDefault();
+    inputValue.value = normalizeNumberString(pasted);
+  }
+}
+
 // https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.
 // this prevents selecting of more than input content in some cases,
 // but also disable selecting input content by double-click (useful feature)
@@ -251,10 +261,7 @@ const onMousedown = (ev: MouseEvent) => {
   >
     <div class="pl-number-field__main-wrapper d-flex">
       <DoubleContour class="pl-number-field__contour" :group-position="groupPosition" />
-      <div
-        class="pl-number-field__wrapper flex-grow d-flex flex-align-center"
-        :class="{ withoutArrows: !useIncrementButtons }"
-      >
+      <div class="pl-number-field__wrapper flex-grow d-flex flex-align-center">
         <label v-if="label" class="text-description">
           {{ label }}
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
@@ -269,15 +276,18 @@ const onMousedown = (ev: MouseEvent) => {
           :disabled="disabled"
           :placeholder="placeholder"
           class="text-s flex-grow"
-          @focusin="focused = true"
-          @focusout="
-            focused = false;
-            applyChanges();
-          "
+          @focusout="applyChanges"
+          @paste="handlePaste"
+        />
+        <PlIcon16
+          v-if="canShowClearable"
+          class="pl-number-field__clearable"
+          name="delete-clear"
+          @click.stop="clear"
         />
       </div>
       <div
-        v-if="useIncrementButtons"
+        v-if="!props.disableSteps"
         class="pl-number-field__icons d-flex-column"
         @mousedown="onMousedown"
       >
diff --git a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
index 4b0cf1907f..7085b4cf67 100644
--- a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
+++ b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
@@ -10,6 +10,53 @@ function isPartial(v: string) {
   return v === "." || v === "," || v === "-";
 }
 
+/**
+ * Normalizes a pasted number string by detecting the format and removing thousand separators.
+ *
+ * Supported formats:
+ *   1.222.333,0053  (EU: dot = thousands, comma = decimal)
+ *   1,222,333.0053  (US: comma = thousands, dot = decimal)
+ *   1 222 333,0053  (space = thousands, comma = decimal)
+ *   1 222 333.0053  (space = thousands, dot = decimal)
+ */
+export function normalizeNumberString(v: string): string {
+  v = v.trim();
+  v = v.replace(/\s/g, ""); // remove spaces / nbsp (thousand separators)
+  v = v.replace("−", "-");
+  v = v.replace("–", "-");
+  v = v.replace("+", "");
+
+  const dots = (v.match(/\./g) || []).length;
+  const commas = (v.match(/,/g) || []).length;
+
+  if (dots > 1 && commas <= 1) {
+    // EU: 1.222.333,0053 — dots are thousand separators, comma is decimal
+    v = v.replace(/\./g, "");
+    v = v.replace(",", ".");
+  } else if (commas > 1 && dots <= 1) {
+    // US: 1,222,333.0053 — commas are thousand separators, dot is decimal
+    v = v.replace(/,/g, "");
+  } else if (dots === 1 && commas === 1) {
+    // Ambiguous with one of each — last one is the decimal separator
+    const lastDot = v.lastIndexOf(".");
+    const lastComma = v.lastIndexOf(",");
+    if (lastComma > lastDot) {
+      // EU: 1.222,05
+      v = v.replace(".", "");
+      v = v.replace(",", ".");
+    } else {
+      // US: 1,222.05
+      v = v.replace(",", "");
+    }
+  } else if (commas === 1 && dots === 0) {
+    // Single comma — treat as decimal separator
+    v = v.replace(",", ".");
+  }
+  // dots === 1 && commas === 0 — already fine
+
+  return v;
+}
+
 function clearNumericValue(v: string) {
   v = v.trim();
   v = v.replace(",", ".");
diff --git a/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss b/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
index 87e6854575..5854408edc 100644
--- a/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
+++ b/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
@@ -7,6 +7,7 @@
   --label-offset-right-x: 8px;
   --label-color: var(--txt-01);
   --color-hint: #9d9eae;
+  --show-clearable: none;
 
   // overflow: hidden;
 
@@ -22,12 +23,10 @@
 
   &__wrapper {
     padding-left: 12px;
-    // background-color: rgb(111, 94, 94);
+    padding-right: 8px;
+    gap: 8px;
     border-radius: 6px;
   }
-  &__wrapper.withoutArrows {
-    padding-right: 12px;
-  }
 
   &__icons {
     // background-color: green;
@@ -60,6 +59,12 @@
     border-bottom: 1px solid var(--contour-color);
   }
 
+  &__clearable {
+    display: var(--show-clearable) !important;
+    --icon-color: var(--ic-02) !important;
+    cursor: pointer;
+  }
+
   &__hint {
     margin-top: 3px;
     color: var(--color-hint);
@@ -90,6 +95,14 @@
     transition: all 0.3s;
   }
 
+  &:hover {
+    --show-clearable: inline-block;
+  }
+
+  &:focus-within {
+    --show-clearable: inline-block;
+  }
+
   &:focus-within:not(.error) {
     --label-color: var(--txt-focus);
     --contour-color: var(--border-color-focus);
diff --git a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
index d2ad04b49d..5392666df7 100644
--- a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
+++ b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
@@ -7,13 +7,12 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="C extends undefined | string = string">
 import { computed, ref, useSlots } from "vue";
 import SvgRequired from "../../assets/images/required.svg?raw";
 import { getErrorMessage } from "../../helpers/error.ts";
 import DoubleContour from "../../utils/DoubleContour.vue";
 import { useLabelNotch } from "../../utils/useLabelNotch";
-import { useValidation } from "../../utils/useValidation";
 import { PlIcon16 } from "../PlIcon16";
 import { PlIcon24 } from "../PlIcon24";
 import { PlSvg } from "../PlSvg";
@@ -25,8 +24,8 @@ const slots = useSlots();
 /**
  * The current value of the input field.
  */
-const model = defineModel<string>({
-  default: "",
+const model = defineModel<string | C>({
+  required: true,
 });
 
 const props = defineProps<{
@@ -36,8 +35,9 @@ const props = defineProps<{
   label?: string;
   /**
    * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+   * If a function, calls it to get the reset value.
    */
-  clearable?: boolean;
+  clearable?: boolean | (() => C);
   /**
    * If `true`, the input field is marked as required.
    */
@@ -66,10 +66,8 @@ const props = defineProps<{
    * A prefix text to display inside the input field before the value.
    */
   prefix?: string;
-  /**
-   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
-   */
-  rules?: ((v: string) => boolean | string)[];
+  /** Additional validity check for input value that must return an error text if failed */
+  validate?: (v: string | C) => string | undefined;
   /**
    * The string specifies whether the field should be a password or not, value could be "password" or undefined.
    */
@@ -107,12 +105,10 @@ const passwordIcon = computed(() => (showPassword.value ? "view-show" : "view-hi
 
 const clear = () => {
   if (props.clearable) {
-    model.value = "";
+    model.value = typeof props.clearable === "function" ? props.clearable() : "";
   }
 };
 
-const validationData = useValidation(model, props.rules || []);
-
 const isEmpty = computed(() => model.value === "");
 
 const nonEmpty = computed(() => !isEmpty.value);
@@ -123,8 +119,11 @@ const displayErrors = computed(() => {
   if (propsError) {
     errors.push(propsError);
   }
-  if (!validationData.value.isValid) {
-    errors.push(...validationData.value.errors);
+  if (props.validate) {
+    const error = props.validate(model.value);
+    if (error) {
+      errors.push(error);
+    }
   }
   return errors;
 });

From b74d1546bea27f9949c85c0a3332da0fad0413c3 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Thu, 12 Mar 2026 19:39:21 +0100
Subject: [PATCH 02/14] fix: update PlTextField clearable prop to use a
 function returning undefined

---
 .../ui/src/pages/FormComponentsPage/Main.vue           |  2 +-
 .../components/PlTextField/__tests__/TextField.spec.ts | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue b/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
index 8cb48c6563..bd1999a627 100644
--- a/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
@@ -52,7 +52,7 @@ const options = listToOptions([
         :compact="data.compactBtnGroup"
       />
       <PlCheckbox v-model="data.compactBtnGroup">Compact btn group component</PlCheckbox>
-      <PlTextField v-model="data.text" label="PlTextField" clearable />
+      <PlTextField v-model="data.text" label="PlTextField" :clearable="() => undefined" />
       <PlTextField v-model="data.text" label="PlTextField (password)" type="password" clearable />
       <PlSearchField v-model="data.text">
         <template #helper>
diff --git a/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts b/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
index 731788c82a..b401f27979 100644
--- a/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
+++ b/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
@@ -3,6 +3,10 @@ import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import PlTextField from "../PlTextField.vue";
 
+// Vue Test Utils can't infer generic type parameters from mount() — props type collapses to `never`.
+// Using `as any` for .props() calls as a workaround.
+// https://github.com/vuejs/test-utils/issues/2436
+
 describe("TextField", () => {
   it("renders properly", () => {
     const wrapper = mount(PlTextField, {
@@ -23,7 +27,7 @@ describe("TextField", () => {
     });
 
     await wrapper.find("input").setValue("test");
-    expect(wrapper.props("modelValue")).toBe("test");
+    expect((wrapper as any).props("modelValue")).toBe("test");
   });
 
   it("modelValue:string?", async () => {
@@ -31,11 +35,11 @@ describe("TextField", () => {
       props: {
         modelValue: "initialText" as string | undefined,
         clearable: true,
-        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        "onUpdate:modelValue": (e: string | undefined) => wrapper.setProps({ modelValue: e }),
       },
     });
 
     await wrapper.find("input").setValue("test");
-    expect(wrapper.props("modelValue")).toBe("test");
+    expect((wrapper as any).props("modelValue")).toBe("test");
   });
 });

From 42fe143b0f628ccd8fea755bdf7aea8725c6afe4 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Thu, 12 Mar 2026 20:01:47 +0100
Subject: [PATCH 03/14] refactor: update type definitions to support undefined
 in reactive data and model values

---
 .../ui/src/pages/FormComponentsPage/Main.vue       |  2 +-
 .../ui-examples/ui/src/pages/PlNumberFieldPage.vue |  2 +-
 .../src/components/PlNumberField/PlNumberField.vue | 14 +++++++-------
 .../src/components/PlSearchField/PlSearchField.vue | 12 ++++++++----
 .../src/components/PlTextField/PlTextField.vue     | 10 +++++-----
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue b/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
index bd1999a627..8cf13394fa 100644
--- a/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
@@ -18,7 +18,7 @@ import {
 import { reactive } from "vue";
 
 const data = reactive({
-  text: "some text",
+  text: "some text" as string | undefined,
   single: "A",
   multiple: ["A", "B"],
   multiple2: ["B", "A", "D"],
diff --git a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
index b49452ee2b..9dc53d601f 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
@@ -3,7 +3,7 @@ import { PlRow, PlContainer, PlCheckbox, PlNumberField, PlBlockPage } from "@pla
 import { reactive } from "vue";
 
 const data = reactive({
-  number: 100,
+  number: 100 as number | undefined,
   disableSteps: false,
 });
 
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 3373261585..c5a7fd2d99 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<script setup lang="ts" generic="C extends undefined | number = undefined | number">
+<script setup lang="ts" generic="V extends undefined | number, C extends V">
 import "./pl-number-field.scss";
 import DoubleContour from "../../utils/DoubleContour.vue";
 import { useLabelNotch } from "../../utils/useLabelNotch";
@@ -27,7 +27,7 @@ import { PlTooltip } from "../PlTooltip";
 import { PlIcon16 } from "../PlIcon16";
 import { parseNumber, normalizeNumberString } from "./parseNumber";
 
-const modelValue = defineModel<undefined | number>({ required: true });
+const modelValue = defineModel<V>({ required: true });
 
 const props = withDefaults(
   defineProps<{
@@ -113,7 +113,7 @@ const inputValue = computed({
     if (r.error) {
       inputRef.value!.value = r.cleanInput;
     } else {
-      modelValue.value = r.value as C;
+      modelValue.value = r.value as V;
     }
   },
 });
@@ -124,9 +124,9 @@ const canShowClearable = computed(
 
 function clear() {
   if (typeof props.clearable === "function") {
-    modelValue.value = props.clearable();
+    modelValue.value = props.clearable() as V;
   } else {
-    modelValue.value = undefined as C;
+    modelValue.value = undefined as V;
   }
   resetCachedValue();
 }
@@ -195,7 +195,7 @@ function increment() {
       nV =
         ((parsedValue || 0) * multiplier.value + props.step * multiplier.value) / multiplier.value;
     }
-    modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;
+    modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;
   }
 }
 
@@ -212,7 +212,7 @@ function decrement() {
       nV =
         ((parsedValue || 0) * multiplier.value - props.step * multiplier.value) / multiplier.value;
     }
-    modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;
+    modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;
   }
 }
 
diff --git a/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue b/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue
index 12ad170236..1b6db6f1a9 100644
--- a/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue
+++ b/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue
@@ -1,14 +1,14 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="V extends undefined | string, C extends V">
 import { PlIcon16 } from "../PlIcon16";
 import { PlIcon24 } from "../PlIcon24";
 import { computed } from "vue";
 import PlTooltip from "../PlTooltip/PlTooltip.vue";
 
-const model = defineModel<string>({ required: true });
+const model = defineModel<V>({ required: true });
 
 const props = defineProps<{
   modelValue?: string;
-  clearable?: boolean;
+  clearable?: boolean | (() => C);
   placeholder?: string;
   disabled?: boolean;
   helper?: string;
@@ -20,7 +20,11 @@ const slots = defineSlots<{
 const nonEmpty = computed(() => model.value != null && model.value.length > 0);
 const hasHelper = computed(() => props.helper != null || slots.helper != null);
 
-const clear = () => (model.value = "");
+const clear = () => {
+  if (props.clearable) {
+    model.value = (typeof props.clearable === "function" ? props.clearable() : "") as V;
+  }
+};
 </script>
 
 <template>
diff --git a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
index 5392666df7..33b95952d3 100644
--- a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
+++ b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
@@ -7,7 +7,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup generic="C extends undefined | string = string">
+<script lang="ts" setup generic="V extends undefined | string, C extends V">
 import { computed, ref, useSlots } from "vue";
 import SvgRequired from "../../assets/images/required.svg?raw";
 import { getErrorMessage } from "../../helpers/error.ts";
@@ -24,7 +24,7 @@ const slots = useSlots();
 /**
  * The current value of the input field.
  */
-const model = defineModel<string | C>({
+const model = defineModel<V>({
   required: true,
 });
 
@@ -67,7 +67,7 @@ const props = defineProps<{
    */
   prefix?: string;
   /** Additional validity check for input value that must return an error text if failed */
-  validate?: (v: string | C) => string | undefined;
+  validate?: (v: V) => string | undefined;
   /**
    * The string specifies whether the field should be a password or not, value could be "password" or undefined.
    */
@@ -105,7 +105,7 @@ const passwordIcon = computed(() => (showPassword.value ? "view-show" : "view-hi
 
 const clear = () => {
   if (props.clearable) {
-    model.value = typeof props.clearable === "function" ? props.clearable() : "";
+    model.value = (typeof props.clearable === "function" ? props.clearable() : "") as V;
   }
 };
 
@@ -120,7 +120,7 @@ const displayErrors = computed(() => {
     errors.push(propsError);
   }
   if (props.validate) {
-    const error = props.validate(model.value);
+    const error = props.validate(model.value as V);
     if (error) {
       errors.push(error);
     }

From 20deba1caf55a25f8c7ae3fdda73505c1ff2fd82 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Thu, 12 Mar 2026 20:04:49 +0100
Subject: [PATCH 04/14] chore: changeset

---
 .changeset/good-boats-matter.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/good-boats-matter.md

diff --git a/.changeset/good-boats-matter.md b/.changeset/good-boats-matter.md
new file mode 100644
index 0000000000..60919be3d0
--- /dev/null
+++ b/.changeset/good-boats-matter.md
@@ -0,0 +1,7 @@
+---
+"@milaboratories/milaboratories.monetization-test.ui": patch
+"@milaboratories/milaboratories.ui-examples.ui": patch
+"@milaboratories/uikit": patch
+---
+
+update uikit file/number input

From 219ad1d9a509100a3047e00c561e04ae91611f38 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Thu, 12 Mar 2026 20:06:25 +0100
Subject: [PATCH 05/14] refactor: simplify modelValue prop handling in
 TextField tests

---
 .../components/PlTextField/__tests__/TextField.spec.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts b/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
index b401f27979..a933cac48c 100644
--- a/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
+++ b/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
@@ -3,10 +3,6 @@ import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import PlTextField from "../PlTextField.vue";
 
-// Vue Test Utils can't infer generic type parameters from mount() — props type collapses to `never`.
-// Using `as any` for .props() calls as a workaround.
-// https://github.com/vuejs/test-utils/issues/2436
-
 describe("TextField", () => {
   it("renders properly", () => {
     const wrapper = mount(PlTextField, {
@@ -22,12 +18,12 @@ describe("TextField", () => {
     const wrapper = mount(PlTextField, {
       props: {
         modelValue: "initialText",
-        "onUpdate:modelValue": (e: string) => wrapper.setProps({ modelValue: e }),
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
       },
     });
 
     await wrapper.find("input").setValue("test");
-    expect((wrapper as any).props("modelValue")).toBe("test");
+    expect(wrapper.props("modelValue")).toBe("test");
   });
 
   it("modelValue:string?", async () => {
@@ -40,6 +36,6 @@ describe("TextField", () => {
     });
 
     await wrapper.find("input").setValue("test");
-    expect((wrapper as any).props("modelValue")).toBe("test");
+    expect(wrapper.props("modelValue")).toBe("test");
   });
 });

From fea7b54cde70d30f3c222380d285f6e0da4e2c79 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 11:23:10 +0100
Subject: [PATCH 06/14] refactor: improve number parsing and validation logic
 in PlNumberField

---
 .../PlNumberField/PlNumberField.vue           | 235 +++++++++---------
 .../components/PlNumberField/parseNumber.ts   | 180 ++++----------
 2 files changed, 167 insertions(+), 248 deletions(-)

diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index c5a7fd2d99..820f1c98d0 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -9,7 +9,6 @@
  * <PlNumberField
  *   v-model="evenNumber"
  *   :validate="(v) => v % 2 !== 0 ? 'Number must be even' : undefined"
- *   :update-on-enter-or-click-outside="true"
  *   label="Even Number"
  * />
  */
@@ -25,7 +24,7 @@ import { useLabelNotch } from "../../utils/useLabelNotch";
 import { computed, ref, useSlots, watch } from "vue";
 import { PlTooltip } from "../PlTooltip";
 import { PlIcon16 } from "../PlIcon16";
-import { parseNumber, normalizeNumberString } from "./parseNumber";
+import { tryParseNumber, normalizePastedNumber, validateNumber } from "./parseNumber";
 
 const modelValue = defineModel<V>({ required: true });
 
@@ -84,180 +83,175 @@ const inputRef = ref<HTMLInputElement>();
 
 useLabelNotch(rootRef);
 
-function modelToString(v: number | undefined) {
-  return v === undefined ? "" : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model
+function numberToString(v: number | undefined): string {
+  return v === undefined ? "" : String(+v);
 }
 
-const parsedResult = computed(() => parseNumber(props, inputValue.value));
+// Display text — what the user sees in the input. Independent of modelValue during editing.
+const displayText = ref(numberToString(modelValue.value));
 
-const cachedValue = ref<string | undefined>(undefined);
-
-const resetCachedValue = () => (cachedValue.value = undefined);
-
-watch(modelValue, (n) => {
-  const r = parsedResult.value;
-  if (r.error || n !== r.value) {
-    resetCachedValue();
-  }
-});
-
-const inputValue = computed({
-  get() {
-    return cachedValue.value ?? modelToString(modelValue.value);
-  },
-  set(nextValue: string) {
-    const r = parseNumber(props, nextValue);
-
-    cachedValue.value = r.cleanInput;
-
-    if (r.error) {
-      inputRef.value!.value = r.cleanInput;
-    } else {
-      modelValue.value = r.value as V;
-    }
-  },
+// When model changes externally (parent, increment/decrement), sync display.
+// Skip if user's current input already represents the same value.
+watch(modelValue, (newVal) => {
+  const parsed = tryParseNumber(displayText.value);
+  if (parsed.value === newVal) return;
+  displayText.value = numberToString(newVal);
 });
 
-const canShowClearable = computed(
-  () => props.clearable && modelValue.value !== undefined && !props.disabled,
-);
+function handleInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  displayText.value = input.value;
 
-function clear() {
-  if (typeof props.clearable === "function") {
-    modelValue.value = props.clearable() as V;
-  } else {
+  const result = tryParseNumber(input.value);
+  if (result.value !== undefined) {
+    modelValue.value = result.value as V;
+  } else if (input.value.trim() === "") {
     modelValue.value = undefined as V;
   }
-  resetCachedValue();
 }
 
-function applyChanges() {
-  if (parsedResult.value.error === undefined) {
-    modelValue.value = parsedResult.value.value as C;
+// On Enter or blur — replace display with canonical number string
+function commitValue() {
+  const text = displayText.value.trim();
+  if (text === "") {
+    modelValue.value = undefined as V;
+    displayText.value = "";
+    return;
+  }
+  const result = tryParseNumber(text);
+  if (result.value !== undefined) {
+    modelValue.value = result.value as V;
+    displayText.value = String(result.value);
   }
 }
 
-const errors = computed(() => {
-  let ers: string[] = [];
+function handlePaste(e: ClipboardEvent) {
+  const input = inputRef.value!;
+  const pasted = e.clipboardData?.getData("text");
+  if (!pasted) return;
 
-  if (props.errorMessage) {
-    ers.push(props.errorMessage);
-  }
+  e.preventDefault();
 
-  const r = parsedResult.value;
+  const selStart = input.selectionStart ?? 0;
+  const selEnd = input.selectionEnd ?? 0;
+  const current = displayText.value;
 
-  if (r.error) {
-    ers.push(r.error.message);
-  } else if (props.validate && r.value !== undefined) {
-    const error = props.validate(r.value);
-    if (error) {
-      ers.push(error);
-    }
-  }
+  const normalized = normalizePastedNumber(pasted);
+  const newValue = current.slice(0, selStart) + normalized + current.slice(selEnd);
 
-  ers = [...ers];
+  displayText.value = newValue;
 
-  return ers.join(" ");
-});
+  const result = tryParseNumber(newValue);
+  if (result.value !== undefined) {
+    modelValue.value = result.value as V;
+  }
+}
 
-const isIncrementDisabled = computed(() => {
-  const r = parsedResult.value;
+const error = computed(() => {
+  if (props.errorMessage) return props.errorMessage;
 
-  if (props.maxValue !== undefined && r.value !== undefined) {
-    return r.value >= props.maxValue;
+  const result = tryParseNumber(displayText.value);
+  if (result.error) return result.error;
+  if (result.value !== undefined) {
+    return validateNumber(result.value, props);
   }
 
-  return false;
+  return undefined;
 });
 
-const isDecrementDisabled = computed(() => {
-  const r = parsedResult.value;
+const canShowClearable = computed(
+  () => props.clearable && modelValue.value !== undefined && !props.disabled,
+);
 
-  if (props.minValue !== undefined && r.value !== undefined) {
-    return r.value <= props.minValue;
+function clear() {
+  if (typeof props.clearable === "function") {
+    modelValue.value = props.clearable() as V;
+  } else {
+    modelValue.value = undefined as V;
   }
+  displayText.value = numberToString(modelValue.value);
+}
 
-  return false;
+const isIncrementDisabled = computed(() => {
+  return (
+    props.maxValue !== undefined &&
+    modelValue.value !== undefined &&
+    modelValue.value >= props.maxValue
+  );
+});
+
+const isDecrementDisabled = computed(() => {
+  return (
+    props.minValue !== undefined &&
+    modelValue.value !== undefined &&
+    modelValue.value <= props.minValue
+  );
 });
 
 const multiplier = computed(() => 10 ** (props.step.toString().split(".").at(1)?.length ?? 0));
 
 function increment() {
-  const r = parsedResult.value;
-
-  const parsedValue = r.value;
-
-  if (!isIncrementDisabled.value) {
-    let nV;
-    if (parsedValue === undefined) {
-      nV = props.minValue ? props.minValue : 0;
-    } else {
-      nV =
-        ((parsedValue || 0) * multiplier.value + props.step * multiplier.value) / multiplier.value;
-    }
-    modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;
+  if (isIncrementDisabled.value) return;
+
+  let nV: number;
+  if (modelValue.value === undefined) {
+    nV = props.minValue ?? 0;
+  } else {
+    nV =
+      ((modelValue.value || 0) * multiplier.value + props.step * multiplier.value) /
+      multiplier.value;
   }
+
+  modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;
 }
 
 function decrement() {
-  const r = parsedResult.value;
-
-  const parsedValue = r.value;
-
-  if (!isDecrementDisabled.value) {
-    let nV;
-    if (parsedValue === undefined) {
-      nV = 0;
-    } else {
-      nV =
-        ((parsedValue || 0) * multiplier.value - props.step * multiplier.value) / multiplier.value;
-    }
-    modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;
+  if (isDecrementDisabled.value) return;
+
+  let nV: number;
+  if (modelValue.value === undefined) {
+    nV = 0;
+  } else {
+    nV =
+      ((modelValue.value || 0) * multiplier.value - props.step * multiplier.value) /
+      multiplier.value;
   }
+
+  modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;
 }
 
-function handleKeyPress(e: { code: string; preventDefault(): void }) {
+function handleKeyDown(e: KeyboardEvent) {
   if (e.code === "Enter") {
-    inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc
+    commitValue();
   }
 
   if (["ArrowDown", "ArrowUp"].includes(e.code)) {
     e.preventDefault();
   }
 
-  if (props.disableSteps !== true && e.code === "ArrowUp") {
+  if (!props.disableSteps && e.code === "ArrowUp") {
     increment();
   }
 
-  if (props.disableSteps !== true && e.code === "ArrowDown") {
+  if (!props.disableSteps && e.code === "ArrowDown") {
     decrement();
   }
 }
 
-function handlePaste(e: ClipboardEvent) {
-  const pasted = e.clipboardData?.getData("text");
-  if (pasted) {
-    e.preventDefault();
-    inputValue.value = normalizeNumberString(pasted);
-  }
-}
-
-// https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.
-// this prevents selecting of more than input content in some cases,
-// but also disable selecting input content by double-click (useful feature)
-const onMousedown = (ev: MouseEvent) => {
+// Prevent selecting beyond input content on triple-click etc.
+function handleMousedown(ev: MouseEvent) {
   if (ev.detail > 1) {
     ev.preventDefault();
   }
-};
+}
 </script>
 
 <template>
   <div
     ref="rootRef"
-    :class="{ error: !!errors.trim(), disabled: disabled }"
+    :class="{ error: !!error, disabled: disabled }"
     class="pl-number-field d-flex-column"
-    @keydown="handleKeyPress($event)"
+    @keydown="handleKeyDown"
   >
     <div class="pl-number-field__main-wrapper d-flex">
       <DoubleContour class="pl-number-field__contour" :group-position="groupPosition" />
@@ -272,11 +266,14 @@ const onMousedown = (ev: MouseEvent) => {
         </label>
         <input
           ref="inputRef"
-          v-model="inputValue"
+          type="text"
+          inputmode="numeric"
+          :value="displayText"
           :disabled="disabled"
           :placeholder="placeholder"
           class="text-s flex-grow"
-          @focusout="applyChanges"
+          @input="handleInput"
+          @focusout="commitValue"
           @paste="handlePaste"
         />
         <PlIcon16
@@ -289,7 +286,7 @@ const onMousedown = (ev: MouseEvent) => {
       <div
         v-if="!props.disableSteps"
         class="pl-number-field__icons d-flex-column"
-        @mousedown="onMousedown"
+        @mousedown="handleMousedown"
       >
         <div
           :class="{ disabled: isIncrementDisabled }"
@@ -333,8 +330,8 @@ const onMousedown = (ev: MouseEvent) => {
         </div>
       </div>
     </div>
-    <div v-if="errors.trim()" class="pl-number-field__error">
-      {{ errors }}
+    <div v-if="error" class="pl-number-field__error">
+      {{ error }}
     </div>
   </div>
 </template>
diff --git a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
index 7085b4cf67..39d7016f6a 100644
--- a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
+++ b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
@@ -1,55 +1,39 @@
-type ParseResult = {
-  error?: Error;
-  value?: number;
-  cleanInput: string;
-};
-
-const NUMBER_REGEX = /^[-−–+]?(\d+)?[.,]?(\d+)?$/; // parseFloat works without errors on strings with multiple dots, or letters in value
-
-function isPartial(v: string) {
-  return v === "." || v === "," || v === "-";
-}
+export type ParseResult =
+  | { value: number; error?: undefined }
+  | { value?: undefined; error: string }
+  | { value?: undefined; error?: undefined };
 
 /**
- * Normalizes a pasted number string by detecting the format and removing thousand separators.
- *
- * Supported formats:
- *   1.222.333,0053  (EU: dot = thousands, comma = decimal)
- *   1,222,333.0053  (US: comma = thousands, dot = decimal)
- *   1 222 333,0053  (space = thousands, comma = decimal)
- *   1 222 333.0053  (space = thousands, dot = decimal)
+ * Detect locale format and normalize to a plain number string.
+ * Handles:
+ *   555.555.555,100  (EU: dot = thousands, comma = decimal)
+ *   555,555,555.100  (US: comma = thousands, dot = decimal)
+ *   555 555 555,100  (space = thousands, comma = decimal)
+ *   555 555 555.100  (space = thousands, dot = decimal)
+ *   123,45 / 123.45  (single separator = decimal)
  */
-export function normalizeNumberString(v: string): string {
-  v = v.trim();
-  v = v.replace(/\s/g, ""); // remove spaces / nbsp (thousand separators)
-  v = v.replace("−", "-");
-  v = v.replace("–", "-");
-  v = v.replace("+", "");
+function normalizeNumberFormat(v: string): string {
+  v = v.replace(/\s/g, "");
+  v = v.replace("−", "-").replace("–", "-").replace("+", "");
 
   const dots = (v.match(/\./g) || []).length;
   const commas = (v.match(/,/g) || []).length;
 
   if (dots > 1 && commas <= 1) {
-    // EU: 1.222.333,0053 — dots are thousand separators, comma is decimal
-    v = v.replace(/\./g, "");
-    v = v.replace(",", ".");
+    // EU: 1.222.333,0053
+    v = v.replace(/\./g, "").replace(",", ".");
   } else if (commas > 1 && dots <= 1) {
-    // US: 1,222,333.0053 — commas are thousand separators, dot is decimal
+    // US: 1,222,333.0053
     v = v.replace(/,/g, "");
   } else if (dots === 1 && commas === 1) {
-    // Ambiguous with one of each — last one is the decimal separator
-    const lastDot = v.lastIndexOf(".");
-    const lastComma = v.lastIndexOf(",");
-    if (lastComma > lastDot) {
+    if (v.lastIndexOf(",") > v.lastIndexOf(".")) {
       // EU: 1.222,05
-      v = v.replace(".", "");
-      v = v.replace(",", ".");
+      v = v.replace(".", "").replace(",", ".");
     } else {
       // US: 1,222.05
       v = v.replace(",", "");
     }
   } else if (commas === 1 && dots === 0) {
-    // Single comma — treat as decimal separator
     v = v.replace(",", ".");
   }
   // dots === 1 && commas === 0 — already fine
@@ -57,115 +41,53 @@ export function normalizeNumberString(v: string): string {
   return v;
 }
 
-function clearNumericValue(v: string) {
-  v = v.trim();
-  v = v.replace(",", ".");
-  v = v.replace("−", "-"); // minus, replacing for the case of input the whole copied value
-  v = v.replace("–", "-"); // dash, replacing for the case of input the whole copied value
-  v = v.replace("+", "");
-  return v;
-}
-
-function stringToNumber(v: string) {
-  return parseFloat(clearNumericValue(v));
-}
-
-function clearInput(v: string): string {
-  v = v.trim();
-
-  if (isPartial(v)) {
-    return v;
-  }
+/**
+ * Try to parse a string as a number using locale-aware rules.
+ *
+ * Returns:
+ *   { value } — successfully parsed
+ *   { error } — clearly invalid input
+ *   {}        — empty or partial input (no error, no value)
+ */
+export function tryParseNumber(str: string): ParseResult {
+  str = str.trim();
+  if (str === "") return {};
 
-  if (/^-[^0-9.]/.test(v)) {
-    return "-";
-  }
+  const v = normalizeNumberFormat(str);
 
-  const match = v.match(/^(.*)[.,][^0-9].*$/);
-  if (match) {
-    return match[1] + ".";
-  }
+  // Partial input: just sign, just dot, sign+dot — not an error yet
+  if (/^-?\.*$/.test(v)) return {};
 
-  if (v.match(NUMBER_REGEX)) {
-    return clearNumericValue(v);
+  if (/^-?(\d+\.?\d*|\.\d+)$/.test(v)) {
+    const n = parseFloat(v);
+    return isNaN(n) ? { error: "Value is not a number" } : { value: n };
   }
 
-  const n = stringToNumber(v);
+  return { error: "Value is not a number" };
+}
 
-  return isNaN(n) ? "" : String(+n);
+/**
+ * Normalizes a pasted number string.
+ * Strips all non-numeric characters first, then resolves locale format.
+ */
+export function normalizePastedNumber(v: string): string {
+  v = v.trim().replace(/[^\d.,\-−–+\s]/g, "");
+  return normalizeNumberFormat(v);
 }
 
-export function parseNumber(
+export function validateNumber(
+  value: number,
   props: {
     minValue?: number;
     maxValue?: number;
     validate?: (v: number) => string | undefined;
   },
-  str: string,
-): ParseResult {
-  str = str.trim();
-
-  const cleanInput = clearInput(str);
-
-  if (str === "") {
-    return {
-      value: undefined,
-      cleanInput,
-    };
-  }
-
-  if (!str.match(NUMBER_REGEX)) {
-    return {
-      error: Error("Value is not a number"),
-      cleanInput,
-    };
-  }
-
-  if (isPartial(str)) {
-    return {
-      error: Error("Enter a number"),
-      cleanInput,
-    };
-  }
-
-  const value = stringToNumber(str);
-
-  if (isNaN(value)) {
-    return {
-      error: Error("Value is not a number"),
-      cleanInput,
-    };
-  }
-
+): string | undefined {
   if (props.minValue !== undefined && value < props.minValue) {
-    return {
-      error: Error(`Value must be higher than ${props.minValue}`),
-      value,
-      cleanInput,
-    };
+    return `Value must be higher than ${props.minValue}`;
   }
-
   if (props.maxValue !== undefined && value > props.maxValue) {
-    return {
-      error: Error(`Value must be less than ${props.maxValue}`),
-      value,
-      cleanInput,
-    };
+    return `Value must be less than ${props.maxValue}`;
   }
-
-  if (props.validate) {
-    const error = props.validate(value);
-    if (error) {
-      return {
-        error: Error(error),
-        value,
-        cleanInput,
-      };
-    }
-  }
-
-  return {
-    value,
-    cleanInput,
-  };
+  return props.validate?.(value);
 }

From c094b2a1342e0dea79ad2035aed989cff518a21d Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 12:38:22 +0100
Subject: [PATCH 07/14] refactor: enhance number parsing and validation in
 PlNumberField component

---
 .../PlNumberField/PlNumberField.spec.ts       | 296 ++++++++++++++++++
 .../PlNumberField/PlNumberField.vue           |  59 ++--
 .../__tests__/PlNumberField.spec.ts           | 182 -----------
 .../PlNumberField/parseNumber.spec.ts         | 204 ++++++++++++
 .../components/PlNumberField/parseNumber.ts   | 162 +++++++---
 5 files changed, 630 insertions(+), 273 deletions(-)
 create mode 100644 lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts
 delete mode 100644 lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts
 create mode 100644 lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts

diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts
new file mode 100644
index 0000000000..d198e27c41
--- /dev/null
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts
@@ -0,0 +1,296 @@
+import PlNumberField from "./PlNumberField.vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+describe("PlNumberField.vue", () => {
+  it("renders correctly with default props", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    expect(wrapper.find("input").element.value).toBe("10");
+  });
+
+  it("displays the label when provided", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        label: "Test Label",
+      },
+    });
+    expect(wrapper.find("label").text()).toBe("Test Label");
+  });
+
+  it("increments the value when increment button is clicked", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 2,
+      },
+    });
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    await incrementButton.trigger("click");
+    expect(wrapper.vm.modelValue).toEqual(12);
+  });
+
+  it("decrements the value when decrement button is clicked", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 1,
+      },
+    });
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    await decrementButton.trigger("click");
+    expect(wrapper.vm.modelValue).toEqual(9);
+  });
+
+  it("disables increment button when value exceeds maxValue", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        maxValue: 10,
+      },
+    });
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    expect(incrementButton.classes()).toContain("disabled");
+  });
+
+  it("disables decrement button when value is below minValue", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 1,
+        minValue: 1,
+      },
+    });
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(decrementButton.classes()).toContain("disabled");
+  });
+
+  it("renders external errorMessage with priority", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+        errorMessage: "Custom error message",
+      },
+    });
+    const errorText = wrapper.find(".pl-number-field__error").text();
+    expect(errorText).toBe("Custom error message");
+  });
+
+  it("renders validation error when no external errorMessage", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+      },
+    });
+    const errorText = wrapper.find(".pl-number-field__error").text();
+    expect(errorText).toBe("Value must be higher than 10");
+  });
+
+  it("disables step buttons when input has an error", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("abc");
+
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(incrementButton.classes()).toContain("disabled");
+    expect(decrementButton.classes()).toContain("disabled");
+  });
+
+  describe("typing and value updates", () => {
+    it("updates model for valid input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("15");
+      expect(wrapper.vm.modelValue).toEqual(15);
+    });
+
+    it("does not change model for invalid input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("abc");
+      expect(wrapper.vm.modelValue).toEqual(15);
+    });
+
+    it("clears to undefined for partial input (-) on blur", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("-");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(undefined);
+      expect(input.element.value).toBe("");
+    });
+
+    it("clears to undefined for partial input (.) on blur", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue(".");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(undefined);
+      expect(input.element.value).toBe("");
+    });
+
+    it("accepts negative numbers", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("-1");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(-1);
+      expect(input.element.value).toBe("-1");
+    });
+
+    it("shows separator error for comma-formatted input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1,5");
+      expect(wrapper.vm.modelValue).toEqual(5); // unchanged
+      expect(wrapper.find(".pl-number-field__error").text()).toContain("separator");
+    });
+  });
+
+  describe("blur/enter formatting", () => {
+    it("formats trailing dot on blur: '123.' → '123'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("123.");
+      expect(wrapper.vm.modelValue).toEqual(123);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("123");
+    });
+
+    it("formats leading dot on blur: '.5' → '0.5'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue(".5");
+      expect(wrapper.vm.modelValue).toEqual(0.5);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("0.5");
+    });
+
+    it("formats leading zero on blur: '01' → '1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("01");
+      expect(wrapper.vm.modelValue).toEqual(1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1");
+    });
+
+    it("formats trailing zeros on blur: '1.10' → '1.1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1.10");
+      expect(wrapper.vm.modelValue).toEqual(1.1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1.1");
+    });
+
+    it("formats exponential on blur: '1e-5' → '0.00001'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1e-5");
+      expect(wrapper.vm.modelValue).toEqual(0.00001);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("0.00001");
+    });
+
+    it("formats partial exponential on blur: '1e' → '1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1e");
+      expect(wrapper.vm.modelValue).toEqual(1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1");
+    });
+  });
+
+  it("update model with undefined when input is cleared", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(undefined);
+  });
+
+  it("external modelValue change", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+
+    const input = wrapper.find("input");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(10);
+    expect(input.element.value).toEqual("10");
+
+    await input.setValue("");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(undefined);
+
+    wrapper.setProps({ modelValue: 1 });
+
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(1);
+    expect(input.element.value).toEqual("1");
+
+    await input.setValue("10");
+    expect(wrapper.vm.modelValue).toEqual(10);
+    expect(input.element.value).toEqual("10");
+  });
+});
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 820f1c98d0..28283a67cc 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -24,7 +24,7 @@ import { useLabelNotch } from "../../utils/useLabelNotch";
 import { computed, ref, useSlots, watch } from "vue";
 import { PlTooltip } from "../PlTooltip";
 import { PlIcon16 } from "../PlIcon16";
-import { tryParseNumber, normalizePastedNumber, validateNumber } from "./parseNumber";
+import { tryParseNumber, numberToDecimalString, validateNumber } from "./parseNumber";
 
 const modelValue = defineModel<V>({ required: true });
 
@@ -79,23 +79,17 @@ const props = withDefaults(
 const slots = useSlots();
 
 const rootRef = ref<HTMLElement>();
-const inputRef = ref<HTMLInputElement>();
 
 useLabelNotch(rootRef);
 
-function numberToString(v: number | undefined): string {
-  return v === undefined ? "" : String(+v);
-}
-
-// Display text — what the user sees in the input. Independent of modelValue during editing.
-const displayText = ref(numberToString(modelValue.value));
+const displayText = ref(numberToDecimalString(modelValue.value));
 
-// When model changes externally (parent, increment/decrement), sync display.
-// Skip if user's current input already represents the same value.
+// Sync display when model changes externally (parent, increment/decrement).
+// Skip if the current input already represents the same value.
 watch(modelValue, (newVal) => {
   const parsed = tryParseNumber(displayText.value);
   if (parsed.value === newVal) return;
-  displayText.value = numberToString(newVal);
+  displayText.value = numberToDecimalString(newVal);
 });
 
 function handleInput(event: Event) {
@@ -110,40 +104,22 @@ function handleInput(event: Event) {
   }
 }
 
-// On Enter or blur — replace display with canonical number string
+// On Enter or blur: if parseable, replace display with canonical decimal string.
+// Converts exponential (1e-5) to plain form (0.00001).
 function commitValue() {
   const text = displayText.value.trim();
-  if (text === "") {
+  const result = tryParseNumber(text);
+
+  // Empty or partial (-, ., -.) → clear to undefined
+  if (text === "" || (result.value === undefined && result.error === undefined)) {
     modelValue.value = undefined as V;
     displayText.value = "";
     return;
   }
-  const result = tryParseNumber(text);
-  if (result.value !== undefined) {
-    modelValue.value = result.value as V;
-    displayText.value = String(result.value);
-  }
-}
-
-function handlePaste(e: ClipboardEvent) {
-  const input = inputRef.value!;
-  const pasted = e.clipboardData?.getData("text");
-  if (!pasted) return;
-
-  e.preventDefault();
-
-  const selStart = input.selectionStart ?? 0;
-  const selEnd = input.selectionEnd ?? 0;
-  const current = displayText.value;
 
-  const normalized = normalizePastedNumber(pasted);
-  const newValue = current.slice(0, selStart) + normalized + current.slice(selEnd);
-
-  displayText.value = newValue;
-
-  const result = tryParseNumber(newValue);
   if (result.value !== undefined) {
     modelValue.value = result.value as V;
+    displayText.value = numberToDecimalString(result.value);
   }
 }
 
@@ -160,19 +136,24 @@ const error = computed(() => {
 });
 
 const canShowClearable = computed(
-  () => props.clearable && modelValue.value !== undefined && !props.disabled,
+  () =>
+    props.clearable &&
+    (modelValue.value !== undefined || displayText.value.trim() !== "") &&
+    !props.disabled,
 );
 
 function clear() {
   if (typeof props.clearable === "function") {
     modelValue.value = props.clearable() as V;
+    displayText.value = numberToDecimalString(modelValue.value);
   } else {
     modelValue.value = undefined as V;
+    displayText.value = "";
   }
-  displayText.value = numberToString(modelValue.value);
 }
 
 const isIncrementDisabled = computed(() => {
+  if (error.value) return true;
   return (
     props.maxValue !== undefined &&
     modelValue.value !== undefined &&
@@ -181,6 +162,7 @@ const isIncrementDisabled = computed(() => {
 });
 
 const isDecrementDisabled = computed(() => {
+  if (error.value) return true;
   return (
     props.minValue !== undefined &&
     modelValue.value !== undefined &&
@@ -274,7 +256,6 @@ function handleMousedown(ev: MouseEvent) {
           class="text-s flex-grow"
           @input="handleInput"
           @focusout="commitValue"
-          @paste="handlePaste"
         />
         <PlIcon16
           v-if="canShowClearable"
diff --git a/lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts b/lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts
deleted file mode 100644
index 665199741f..0000000000
--- a/lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-import PlNumberField from "../PlNumberField.vue";
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-describe("NumberInput.vue", () => {
-  it("renders correctly with default props", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-      },
-    });
-    expect(wrapper.find("input").element.value).toBe("10");
-  });
-
-  it("displays the label when provided", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        label: "Test Label",
-      },
-    });
-    expect(wrapper.find("label").text()).toBe("Test Label");
-  });
-
-  it("increments the value when increment button is clicked", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        step: 2,
-      },
-    });
-    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
-    await incrementButton.trigger("click");
-    expect(wrapper.vm.modelValue).toEqual(12);
-  });
-
-  it("decrements the value when decrement button is clicked", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        step: 1,
-      },
-    });
-    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
-    await decrementButton.trigger("click");
-    expect(wrapper.vm.modelValue).toEqual(9);
-  });
-
-  it("disables increment button when value exceeds maxValue", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        maxValue: 10,
-      },
-    });
-    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
-    expect(incrementButton.classes()).toContain("disabled");
-  });
-
-  it("disables decrement button when value is below minValue", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 1,
-        minValue: 1,
-      },
-    });
-    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
-    expect(decrementButton.classes()).toContain("disabled");
-  });
-
-  it("renders error messages when there are validation errors", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 5,
-        minValue: 10,
-        errorMessage: "Custom error message",
-      },
-    });
-    expect(wrapper.find(".pl-number-field__error").text()).toContain("Custom error message");
-    expect(wrapper.find(".pl-number-field__error").text()).toContain(
-      "Value must be higher than 10",
-    );
-  });
-
-  it("validates and updates the computedValue when the user types in the input field", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 5,
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("1.1.1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(1.1);
-
-    await input.setValue("15");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-
-    await input.setValue(".");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-
-    await input.setValue("..");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual(".");
-
-    await input.setValue(",,");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual(".");
-
-    await input.setValue("-");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual("-");
-
-    await input.setValue("-a");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual("-");
-
-    await input.setValue("-1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(-1);
-    expect(input.element.value).toEqual("-1");
-
-    await input.setValue(",");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(-1);
-
-    await input.setValue("1,1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(1.1);
-    expect(input.element.value).toEqual("1.1");
-
-    await input.setValue("-1.1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(-1.1);
-    expect(input.element.value).toEqual("-1.1");
-  });
-
-  it("update model with undefined when input is cleared", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(undefined);
-  });
-
-  it("external modelValue change", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(10);
-    expect(input.element.value).toEqual("10");
-
-    await input.setValue("");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(undefined);
-
-    wrapper.setProps({ modelValue: 1 });
-
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(1);
-    expect(input.element.value).toEqual("1");
-
-    await input.setValue(10);
-    expect(wrapper.vm.modelValue).toEqual(10);
-    expect(input.element.value).toEqual("10");
-  });
-});
diff --git a/lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts b/lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts
new file mode 100644
index 0000000000..888b1c86ee
--- /dev/null
+++ b/lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts
@@ -0,0 +1,204 @@
+import { describe, expect, it } from "vitest";
+import { tryParseNumber, numberToDecimalString, validateNumber } from "./parseNumber";
+
+describe("tryParseNumber", () => {
+  describe("empty and partial inputs → {} (no value, no error)", () => {
+    it.each(["", "-", ".", "-."])("'%s' → {}", (input) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBeUndefined();
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("trailing dot → value, no error", () => {
+    it.each([
+      ["123.", 123],
+      ["-123.", -123],
+      ["0.", 0],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("partial exponential → completed and parsed", () => {
+    it.each([
+      ["1e", 1],
+      ["1e-", 1],
+      ["1e+", 1],
+      ["5e", 5],
+      ["5E", 5],
+      ["5e-", 5],
+      ["5e+", 5],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("exact match → value, no error", () => {
+    it.each([
+      ["123", 123],
+      ["-5", -5],
+      ["0", 0],
+      ["0.5", 0.5],
+      ["-0.5", -0.5],
+      ["1000", 1000],
+      ["999999", 999999],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("decimal form of very small numbers → value, no error", () => {
+    it("'0.0000000001' → { value: 1e-10 }", () => {
+      const result = tryParseNumber("0.0000000001");
+      expect(result.value).toBe(1e-10);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("exponential notation → value, no error", () => {
+    it.each([
+      ["1e-5", 0.00001],
+      ["2e+10", 2e10],
+      ["1E-5", 0.00001],
+      ["1e5", 1e5],
+      ["1.5e2", 150],
+      ["-3e4", -30000],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("non-canonical but parseable → value, no error (formatted on blur)", () => {
+    it.each([
+      [".5", 0.5],
+      ["01", 1],
+      ["007", 7],
+      ["1.0", 1],
+      ["1.10", 1.1],
+      ["+5", 5],
+      ["00.5", 0.5],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("locale-formatted numbers → separator error", () => {
+    it.each([
+      "1,5",
+      "1.232,111",
+      "1.237.62",
+      "555.555.555,100",
+      "1,222,333.05",
+      "1 234",
+      "1.000.000",
+    ])("'%s' → separator error", (input) => {
+      const result = tryParseNumber(input);
+      expect(result.error).toBe("Use dot as decimal separator, e.g. 3.14");
+      expect(result.value).toBeUndefined();
+    });
+  });
+
+  describe("non-numeric input → 'not a number' error", () => {
+    it.each(["abc", "12abc", "1.237.asdf62", "hello", "#$%", "1.2.3a"])(
+      "'%s' → not a number error",
+      (input) => {
+        const result = tryParseNumber(input);
+        expect(result.error).toBe("Value is not a number");
+        expect(result.value).toBeUndefined();
+      },
+    );
+  });
+
+  describe("precision loss → error with actual value", () => {
+    it("too many decimal digits", () => {
+      const result = tryParseNumber("0.1234567890123456789");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("integer exceeds safe range", () => {
+      const result = tryParseNumber("9007199254740993");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("trailing zeros beyond precision", () => {
+      const result = tryParseNumber("1.00000000000000001");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("safe integer does not trigger precision error", () => {
+      const result = tryParseNumber("9007199254740991");
+      expect(result.value).toBe(9007199254740991);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("whitespace handling", () => {
+    it("trims leading/trailing spaces", () => {
+      const result = tryParseNumber("  123  ");
+      expect(result.value).toBe(123);
+    });
+
+    it("space inside number → separator error", () => {
+      const result = tryParseNumber("1 234");
+      expect(result.error).toBe("Use dot as decimal separator, e.g. 3.14");
+    });
+  });
+});
+
+describe("numberToDecimalString", () => {
+  it("undefined → empty string", () => {
+    expect(numberToDecimalString(undefined)).toBe("");
+  });
+
+  it("plain numbers pass through", () => {
+    expect(numberToDecimalString(123)).toBe("123");
+    expect(numberToDecimalString(0.5)).toBe("0.5");
+    expect(numberToDecimalString(-42)).toBe("-42");
+    expect(numberToDecimalString(0)).toBe("0");
+  });
+
+  it("converts exponential to decimal form", () => {
+    expect(numberToDecimalString(1e-7)).toBe("0.0000001");
+    expect(numberToDecimalString(1e-10)).toBe("0.0000000001");
+    expect(numberToDecimalString(2e10)).toBe("20000000000");
+  });
+});
+
+describe("validateNumber", () => {
+  it("returns undefined when within bounds", () => {
+    expect(validateNumber(5, { minValue: 0, maxValue: 10 })).toBeUndefined();
+  });
+
+  it("returns error when below minValue", () => {
+    expect(validateNumber(-1, { minValue: 0 })).toBe("Value must be higher than 0");
+  });
+
+  it("returns error when above maxValue", () => {
+    expect(validateNumber(11, { maxValue: 10 })).toBe("Value must be less than 10");
+  });
+
+  it("runs custom validate function", () => {
+    const validate = (v: number) => (v % 2 !== 0 ? "Must be even" : undefined);
+    expect(validateNumber(3, { validate })).toBe("Must be even");
+    expect(validateNumber(4, { validate })).toBeUndefined();
+  });
+
+  it("minValue/maxValue checked before custom validate", () => {
+    const validate = (v: number) => (v % 2 !== 0 ? "Must be even" : undefined);
+    expect(validateNumber(-1, { minValue: 0, validate })).toBe("Value must be higher than 0");
+  });
+});
diff --git a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
index 39d7016f6a..c5ff29bc47 100644
--- a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
+++ b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
@@ -1,78 +1,136 @@
+/**
+ * Strict number parser. No locale guessing, no normalization.
+ * Non-canonical forms (leading zeros, trailing dots, etc.) are accepted —
+ * formatting to canonical form happens on blur/enter in the component.
+ *
+ * Input/output table (covers ~90% of real cases):
+ *
+ * | Input               | Result                          | Reason                          |
+ * |---------------------|---------------------------------|---------------------------------|
+ * | ""                  | {}                              | empty                           |
+ * | "-"                 | {}                              | partial                         | apply blur/enter format
+ * | "."                 | {}                              | partial                         | apply blur/enter format
+ * | "-."                | {}                              | partial                         | apply blur/enter format
+ * | "123."              | { value: 123 }                  | trailing dot                    | apply blur/enter format
+ * | "1e"                | { value: 1 }                    | partial exp → 1e+0              | apply blur/enter format
+ * | "1e-"               | { value: 1 }                    | partial exp → 1e-0              | apply blur/enter format
+ * | "1e+"               | { value: 1 }                    | partial exp → 1e+0              | apply blur/enter format
+ * | "123"               | { value: 123 }                  | exact match                     |
+ * | "-5"                | { value: -5 }                   | exact match                     |
+ * | "0.5"               | { value: 0.5 }                  | exact match                     |
+ * | "0.0000000001"      | { value: 1e-10 }                | decimal form matches            |
+ * | "1e-5"              | { value: 0.00001 }              | exponential notation            | apply blur/enter format
+ * | "2e+10"             | { value: 2e10 }                 | exponential notation            | apply blur/enter format
+ * | ".5"                | { value: 0.5 }                  | not canonical                   | apply blur/enter format
+ * | "01"                | { value: 1 }                    | leading zero                    | apply blur/enter format
+ * | "1.0"               | { value: 1 }                    | trailing zero                   | apply blur/enter format
+ * | "1.10"              | { value: 1.1 }                  | trailing zero                   | apply blur/enter format
+ * | "+5"                | { value: 5 }                    | unnecessary plus                | apply blur/enter format
+ * | "1,5"               | { error: "...separator..." }    | comma instead of dot            |
+ * | "1.232,111"         | { error: "...separator..." }    | EU locale format                |
+ * | "1.237.62"          | { error: "...separator..." }    | multiple dots (EU thousands)    |
+ * | "555.555.555,100"   | { error: "...separator..." }    | EU locale format                |
+ * | "1,222,333.05"      | { error: "...separator..." }    | US locale format                |
+ * | "abc"               | { error: "not a number" }       | letters                         |
+ * | "12abc"             | { error: "not a number" }       | letters mixed in                |
+ * | "1.237.asdf62"      | { error: "not a number" }       | letters mixed in                |
+ * | "9007199254740993"  | { error: "precision..." }       | integer exceeds safe range      |
+ * | "0.1234567890123456789" | { error: "precision..." }    | too many digits for float64     |
+ */
+
 export type ParseResult =
   | { value: number; error?: undefined }
   | { value?: undefined; error: string }
   | { value?: undefined; error?: undefined };
 
+const EXP_RE = /^-?\d+(\.\d+)?e[+-]?\d+$/i;
+const EXP_PARTIAL_RE = /^-?\d+(\.\d+)?e[+-]?$/i;
+
+/** "-", ".", "-." — NaN for Number() but clearly in-progress typing */
+function isPartialInput(str: string): boolean {
+  return str === "-" || str === "." || str === "-.";
+}
+
 /**
- * Detect locale format and normalize to a plain number string.
- * Handles:
- *   555.555.555,100  (EU: dot = thousands, comma = decimal)
- *   555,555,555.100  (US: comma = thousands, dot = decimal)
- *   555 555 555,100  (space = thousands, comma = decimal)
- *   555 555 555.100  (space = thousands, dot = decimal)
- *   123,45 / 123.45  (single separator = decimal)
+ * Normalize a decimal string by removing cosmetic differences:
+ * leading +, leading zeros, trailing zeros after decimal, trailing dot.
+ * Used to compare user input with canonical float representation.
  */
-function normalizeNumberFormat(v: string): string {
-  v = v.replace(/\s/g, "");
-  v = v.replace("−", "-").replace("–", "-").replace("+", "");
-
-  const dots = (v.match(/\./g) || []).length;
-  const commas = (v.match(/,/g) || []).length;
-
-  if (dots > 1 && commas <= 1) {
-    // EU: 1.222.333,0053
-    v = v.replace(/\./g, "").replace(",", ".");
-  } else if (commas > 1 && dots <= 1) {
-    // US: 1,222,333.0053
-    v = v.replace(/,/g, "");
-  } else if (dots === 1 && commas === 1) {
-    if (v.lastIndexOf(",") > v.lastIndexOf(".")) {
-      // EU: 1.222,05
-      v = v.replace(".", "").replace(",", ".");
-    } else {
-      // US: 1,222.05
-      v = v.replace(",", "");
-    }
-  } else if (commas === 1 && dots === 0) {
-    v = v.replace(",", ".");
+function normalizeDecimalString(s: string): string {
+  let sign = "";
+  if (s.startsWith("-")) {
+    sign = "-";
+    s = s.slice(1);
+  } else if (s.startsWith("+")) {
+    s = s.slice(1);
+  }
+
+  // Remove leading zeros (keep one before decimal point)
+  s = s.replace(/^0+(?=\d)/, "");
+  if (s.startsWith(".")) s = "0" + s;
+
+  // Remove trailing zeros after decimal point, then trailing dot
+  if (s.includes(".")) {
+    s = s.replace(/0+$/, "").replace(/\.$/, "");
   }
-  // dots === 1 && commas === 0 — already fine
 
-  return v;
+  if (s === "" || s === "0") return "0";
+
+  return sign + s;
+}
+
+/** Complete partial exponential: "1e" → "1e+0", "1e-" → "1e-0", "1e+" → "1e+0" */
+function completeExponential(str: string): string {
+  if (/e$/i.test(str)) return str + "+0";
+  if (/e[+-]$/i.test(str)) return str + "0";
+  return str;
 }
 
-/**
- * Try to parse a string as a number using locale-aware rules.
- *
- * Returns:
- *   { value } — successfully parsed
- *   { error } — clearly invalid input
- *   {}        — empty or partial input (no error, no value)
- */
 export function tryParseNumber(str: string): ParseResult {
   str = str.trim();
   if (str === "") return {};
+  if (isPartialInput(str)) return {};
 
-  const v = normalizeNumberFormat(str);
+  // Exponential notation (full or partial)
+  if (EXP_RE.test(str) || EXP_PARTIAL_RE.test(str)) {
+    const completed = completeExponential(str);
+    const n = Number(completed);
+    if (!Number.isFinite(n)) return { error: "Value is not a number" };
+    return { value: n };
+  }
 
-  // Partial input: just sign, just dot, sign+dot — not an error yet
-  if (/^-?\.*$/.test(v)) return {};
+  const n = Number(str);
+  if (!Number.isFinite(n)) {
+    // Only digits, dots, commas, sign, spaces → likely a locale/format issue
+    if (/^[-+]?[\d.,\s]+$/.test(str)) {
+      return { error: "Use dot as decimal separator, e.g. 3.14" };
+    }
+    return { error: "Value is not a number" };
+  }
 
-  if (/^-?(\d+\.?\d*|\.\d+)$/.test(v)) {
-    const n = parseFloat(v);
-    return isNaN(n) ? { error: "Value is not a number" } : { value: n };
+  // Precision loss: input has more precision than float64 can represent
+  const canonical = numberToDecimalString(n);
+  const normalized = normalizeDecimalString(str);
+  if (normalized !== canonical) {
+    return { error: `Precision exceeded, actual value: ${canonical}` };
   }
 
-  return { error: "Value is not a number" };
+  return { value: n };
 }
 
 /**
- * Normalizes a pasted number string.
- * Strips all non-numeric characters first, then resolves locale format.
+ * Converts a number to a plain decimal string (no exponential notation).
+ * E.g. 1e-7 → "0.0000001", 2e+21 → "2000000000000000000000"
  */
-export function normalizePastedNumber(v: string): string {
-  v = v.trim().replace(/[^\d.,\-−–+\s]/g, "");
-  return normalizeNumberFormat(v);
+export function numberToDecimalString(n: number | undefined): string {
+  if (n === undefined) return "";
+  const s = String(n);
+  if (!s.includes("e") && !s.includes("E")) return s;
+  try {
+    return n.toFixed(20).replace(/\.?0+$/, "");
+  } catch {
+    return s;
+  }
 }
 
 export function validateNumber(

From 1c3d216921701997b4a5e28a3ac54bccb6d3df86 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 12:41:32 +0100
Subject: [PATCH 08/14] refactor: enhance pre-commit hook to include staged
 file handling

---
 .husky/pre-commit | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index f4b8a56d99..3e53f23be4 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1,4 @@
 [ -n "$CI" ] && exit 0
+STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
 pnpm fmt
+[ -n "$STAGED" ] && echo "$STAGED" | xargs git add

From 41857c169291be3b57581df29262c24ce765e2bc Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 12:59:48 +0100
Subject: [PATCH 09/14] refactor: add focus and blur event handling to
 PlNumberField component

---
 .../PlNumberField/PlNumberField.vue           | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 28283a67cc..83d749eaa3 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -28,6 +28,12 @@ import { tryParseNumber, numberToDecimalString, validateNumber } from "./parseNu
 
 const modelValue = defineModel<V>({ required: true });
 
+const emit = defineEmits<{
+  blur: [value: V];
+  focus: [value: V];
+  enter: [value: V];
+}>();
+
 const props = withDefaults(
   defineProps<{
     /** Label on the top border of the field, empty by default */
@@ -202,9 +208,19 @@ function decrement() {
   modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;
 }
 
+function handleBlur() {
+  commitValue();
+  emit("blur", modelValue.value);
+}
+
+function handleFocus() {
+  emit("focus", modelValue.value);
+}
+
 function handleKeyDown(e: KeyboardEvent) {
   if (e.code === "Enter") {
     commitValue();
+    emit("enter", modelValue.value);
   }
 
   if (["ArrowDown", "ArrowUp"].includes(e.code)) {
@@ -255,7 +271,8 @@ function handleMousedown(ev: MouseEvent) {
           :placeholder="placeholder"
           class="text-s flex-grow"
           @input="handleInput"
-          @focusout="commitValue"
+          @focusout="handleBlur"
+          @focusin="handleFocus"
         />
         <PlIcon16
           v-if="canShowClearable"

From 83cedb1ecfcbe835871455ffa2867e56bbf65695 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 13:05:49 +0100
Subject: [PATCH 10/14] refactor: update PlTextField and PlNumberField
 components for improved validation and event handling

---
 ...kit-validation-and-field-components-api.md | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 migrations/2026-03-13-uikit-validation-and-field-components-api.md

diff --git a/migrations/2026-03-13-uikit-validation-and-field-components-api.md b/migrations/2026-03-13-uikit-validation-and-field-components-api.md
new file mode 100644
index 0000000000..b0dd123788
--- /dev/null
+++ b/migrations/2026-03-13-uikit-validation-and-field-components-api.md
@@ -0,0 +1,84 @@
+## PlTextField
+
+### `model-value` is now required and supports `undefined`
+
+Previously, `v-model` defaulted to `""`. Now it is required and accepts `string | undefined`.
+
+```diff
+- <PlTextField v-model="text" />
++ <PlTextField v-model="text" />  <!-- text must be explicitly initialized -->
+```
+
+### `rules` → `validate`
+
+The `:rules` array prop has been replaced with a single `:validate` function that returns an error string or `undefined`.
+
+```diff
+- <PlTextField :rules="[(v) => v.length > 0 || 'Required']" />
++ <PlTextField :validate="(v) => v.length === 0 ? 'Required' : undefined" />
+```
+
+### `clearable` now accepts a factory function
+
+If you need a custom reset value (e.g. `undefined` instead of `""`), pass a function:
+
+```vue
+<PlTextField :clearable="() => undefined" />
+```
+
+Boolean `true` still resets to `""` as before.
+
+---
+
+## PlNumberField
+
+### `useIncrementButtons` → `disableSteps`
+
+The prop was renamed and its logic inverted.
+
+```diff
+- <PlNumberField :use-increment-buttons="false" />
++ <PlNumberField disable-steps />
+```
+
+### `updateOnEnterOrClickOutside` removed
+
+This behavior is now the default and only mode — value is always committed on blur or Enter. Remove the prop.
+
+```diff
+- <PlNumberField :update-on-enter-or-click-outside="true" />
++ <PlNumberField />
+```
+
+### `clearable` prop added
+
+Works the same as in `PlTextField` — pass `true` to show a clear button (resets to `undefined`), or a function for a custom reset value.
+
+### New events: `blur`, `focus`, `enter`
+
+The component now emits `blur`, `focus`, and `enter` events with the parsed model value (`number | undefined`), not the raw DOM event.
+
+```vue
+<PlNumberField v-model="num" @blur="(v) => console.log('committed:', v)" />
+```
+
+### Validation signature unchanged
+
+`:validate` still expects `(v: number) => string | undefined`.
+
+---
+
+## Validation functions (general)
+
+All validation functions across the codebase now return `string | undefined` instead of `boolean | string`.
+
+```diff
+- function validate(v: string): boolean | string {
+-   if (!v) return 'Required';
+-   return true;
+- }
++ function validate(v: string): string | undefined {
++   if (!v) return 'Required';
++   return undefined;
++ }
+```

From 7557e0bd91de686a53aef76d1782094b884e83c2 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 13:32:14 +0100
Subject: [PATCH 11/14] refactor: remove `parse` prop from PlTextField and
 update documentation to use PlNumberField

---
 ...26-03-13-uikit-validation-and-field-components-api.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/migrations/2026-03-13-uikit-validation-and-field-components-api.md b/migrations/2026-03-13-uikit-validation-and-field-components-api.md
index b0dd123788..b29a94d942 100644
--- a/migrations/2026-03-13-uikit-validation-and-field-components-api.md
+++ b/migrations/2026-03-13-uikit-validation-and-field-components-api.md
@@ -1,5 +1,14 @@
 ## PlTextField
 
+### `parse` prop removed — use `PlNumberField` for numeric inputs
+
+The `:parse` prop has been removed from `PlTextField`. If you were using it to parse numbers, switch to `PlNumberField`:
+
+```diff
+- <PlTextField v-model="count" :parse="parseNumber" />
++ <PlNumberField v-model="count" />
+```
+
 ### `model-value` is now required and supports `undefined`
 
 Previously, `v-model` defaulted to `""`. Now it is required and accepts `string | undefined`.

From db639104e21031b03cfb5dd3e9cd137844236a79 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Fri, 13 Mar 2026 16:38:14 +0100
Subject: [PATCH 12/14] refactor: update clearable prop logic in PlNumberField
 for better type handling

---
 .../components/PlNumberField/PlNumberField.vue    | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 83d749eaa3..6ae1dca40b 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -55,7 +55,7 @@ const props = withDefaults(
     /** Additional validity check for input value that must return an error text if failed */
     validate?: (v: number) => string | undefined;
     /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */
-    clearable?: boolean | (() => C);
+    clearable?: V extends undefined ? boolean | (() => C) : false | (() => C);
     /** Makes some of corners not rounded */
     groupPosition?:
       | "top"
@@ -68,18 +68,7 @@ const props = withDefaults(
       | "bottom-right"
       | "middle";
   }>(),
-  {
-    step: 1,
-    label: undefined,
-    placeholder: undefined,
-    minValue: undefined,
-    maxValue: undefined,
-    clearable: false,
-    groupPosition: undefined,
-    disableSteps: false,
-    validate: undefined,
-    errorMessage: undefined,
-  },
+  { step: 1 },
 );
 
 const slots = useSlots();

From 70bd1eb60ca16eaa4f0acd141713c0f354a53cc4 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Mon, 16 Mar 2026 10:33:37 +0100
Subject: [PATCH 13/14] refactor: update PlNumberField and PlTextField
 components for improved validation and required field handling

---
 .../ui/src/pages/PlNumberFieldPage.vue        |  7 ++--
 .../PlNumberField/PlNumberField.vue           | 11 +++--
 .../{ => __test__}/PlNumberField.spec.ts      |  2 +-
 .../{ => __test__}/parseNumber.spec.ts        |  2 +-
 .../components/PlTextField/PlTextField.vue    | 40 +++++--------------
 5 files changed, 23 insertions(+), 39 deletions(-)
 rename lib/ui/uikit/src/components/PlNumberField/{ => __test__}/PlNumberField.spec.ts (99%)
 rename lib/ui/uikit/src/components/PlNumberField/{ => __test__}/parseNumber.spec.ts (99%)

diff --git a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
index 9dc53d601f..45668c4625 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
@@ -3,7 +3,7 @@ import { PlRow, PlContainer, PlCheckbox, PlNumberField, PlBlockPage } from "@pla
 import { reactive } from "vue";
 
 const data = reactive({
-  number: 100 as number | undefined,
+  number: 100 as number,
   disableSteps: false,
 });
 
@@ -30,11 +30,12 @@ function updateNumber(value: number) {
     <PlRow no-gap>
       <PlContainer width="400px">
         <PlNumberField
+          required
           v-model="data.number"
           :min-value="10"
           :max-value="100"
           label="PlNumberField (min: 10, max: 100)"
-          clearable
+          :clearable="false"
           :disable-steps="data.disableSteps"
         />
         <PlNumberField
@@ -42,7 +43,7 @@ function updateNumber(value: number) {
           :min-value="-5"
           :max-value="200"
           label="PlNumberField (min: -5, max: 200)"
-          :clearable="() => undefined"
+          clearable
           :disable-steps="data.disableSteps"
         />
         <PlNumberField
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 6ae1dca40b..a452b26047 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -36,6 +36,8 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
+    /** If `true`, the field is required and will show an error if left empty. */
+    required?: undefined extends V ? undefined | boolean : true;
     /** Label on the top border of the field, empty by default */
     label?: string;
     /** Input placeholder, empty by default */
@@ -94,8 +96,6 @@ function handleInput(event: Event) {
   const result = tryParseNumber(input.value);
   if (result.value !== undefined) {
     modelValue.value = result.value as V;
-  } else if (input.value.trim() === "") {
-    modelValue.value = undefined as V;
   }
 }
 
@@ -105,9 +105,8 @@ function commitValue() {
   const text = displayText.value.trim();
   const result = tryParseNumber(text);
 
-  // Empty or partial (-, ., -.) → clear to undefined
+  // Empty or partial (-, ., -.) → clear display
   if (text === "" || (result.value === undefined && result.error === undefined)) {
-    modelValue.value = undefined as V;
     displayText.value = "";
     return;
   }
@@ -127,6 +126,10 @@ const error = computed(() => {
     return validateNumber(result.value, props);
   }
 
+  if (props.required && displayText.value.trim() === "") {
+    return "Value is required";
+  }
+
   return undefined;
 });
 
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts b/lib/ui/uikit/src/components/PlNumberField/__test__/PlNumberField.spec.ts
similarity index 99%
rename from lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts
rename to lib/ui/uikit/src/components/PlNumberField/__test__/PlNumberField.spec.ts
index d198e27c41..dea69f0324 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.spec.ts
+++ b/lib/ui/uikit/src/components/PlNumberField/__test__/PlNumberField.spec.ts
@@ -1,4 +1,4 @@
-import PlNumberField from "./PlNumberField.vue";
+import PlNumberField from "../PlNumberField.vue";
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
diff --git a/lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts b/lib/ui/uikit/src/components/PlNumberField/__test__/parseNumber.spec.ts
similarity index 99%
rename from lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts
rename to lib/ui/uikit/src/components/PlNumberField/__test__/parseNumber.spec.ts
index 888b1c86ee..721eba526f 100644
--- a/lib/ui/uikit/src/components/PlNumberField/parseNumber.spec.ts
+++ b/lib/ui/uikit/src/components/PlNumberField/__test__/parseNumber.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { tryParseNumber, numberToDecimalString, validateNumber } from "./parseNumber";
+import { tryParseNumber, numberToDecimalString, validateNumber } from "../parseNumber";
 
 describe("tryParseNumber", () => {
   describe("empty and partial inputs → {} (no value, no error)", () => {
diff --git a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
index 33b95952d3..5f4ef9dbcf 100644
--- a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
+++ b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
@@ -29,52 +29,32 @@ const model = defineModel<V>({
 });
 
 const props = defineProps<{
-  /**
-   * The label to display above the input field.
-   */
+  /** The label to display above the input field. */
   label?: string;
   /**
    * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
    * If a function, calls it to get the reset value.
    */
   clearable?: boolean | (() => C);
-  /**
-   * If `true`, the input field is marked as required.
-   */
+  /** If `true`, the input field is marked as required. */
   required?: boolean;
-  /**
-   * An error message to display below the input field.
-   */
+  /** An error message to display below the input field. */
   error?: unknown;
-  /**
-   * A helper text to display below the input field when there are no errors.
-   */
+  /** A helper text to display below the input field when there are no errors. */
   helper?: string;
-  /**
-   * A placeholder text to display inside the input field when it is empty.
-   */
+  /** A placeholder text to display inside the input field when it is empty. */
   placeholder?: string;
-  /**
-   * If `true`, the input field is disabled and cannot be interacted with.
-   */
+  /** If `true`, the input field is disabled and cannot be interacted with. */
   disabled?: boolean;
-  /**
-   * If `true`, the input field has a dashed border.
-   */
+  /** If `true`, the input field has a dashed border. */
   dashed?: boolean;
-  /**
-   * A prefix text to display inside the input field before the value.
-   */
+  /** A prefix text to display inside the input field before the value. */
   prefix?: string;
   /** Additional validity check for input value that must return an error text if failed */
   validate?: (v: V) => string | undefined;
-  /**
-   * The string specifies whether the field should be a password or not, value could be "password" or undefined.
-   */
+  /** The string specifies whether the field should be a password or not, value could be "password" or undefined. */
   type?: "password";
-  /**
-   * Makes some of corners not rounded
-   * */
+  /** Makes some of corners not rounded */
   groupPosition?:
     | "top"
     | "bottom"

From f633ef1eb8b804c254008f1b92dc1e9d9b630dd5 Mon Sep 17 00:00:00 2001
From: AStaroverov <hellbeast92@gmail.com>
Date: Mon, 16 Mar 2026 12:35:45 +0100
Subject: [PATCH 14/14] refactor: update PlNumberField and PlTextField
 components to enhance required field handling and clearable prop logic

---
 .../ui/src/pages/PlNumberFieldPage.vue        |  4 +--
 .../PlNumberField/PlNumberField.vue           | 21 ++++++++++++----
 .../components/PlTextField/PlTextField.vue    | 25 +++++++++++++------
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
index 45668c4625..0b4eaefb15 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
@@ -25,17 +25,15 @@ function updateNumber(value: number) {
       <button @click="updateNumber(-1)">Decrement number</button>
       <button @click="data.number = NaN">Set NaN</button>
       <button @click="data.number = 102">Set 102</button>
-      <button @click="data.number = '102.2aaaa' as unknown as number">Set '102.2aaaa'</button>
     </PlRow>
     <PlRow no-gap>
       <PlContainer width="400px">
         <PlNumberField
-          required
           v-model="data.number"
           :min-value="10"
           :max-value="100"
           label="PlNumberField (min: 10, max: 100)"
-          :clearable="false"
+          clearable
           :disable-steps="data.disableSteps"
         />
         <PlNumberField
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index a452b26047..64ca897bda 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -17,7 +17,15 @@ export default {
 };
 </script>
 
-<script setup lang="ts" generic="V extends undefined | number, C extends V">
+<script
+  setup
+  lang="ts"
+  generic="
+    R extends true | false,
+    V extends undefined | number,
+    C extends Exclude<V, R extends true ? undefined : never>
+  "
+>
 import "./pl-number-field.scss";
 import DoubleContour from "../../utils/DoubleContour.vue";
 import { useLabelNotch } from "../../utils/useLabelNotch";
@@ -37,7 +45,7 @@ const emit = defineEmits<{
 const props = withDefaults(
   defineProps<{
     /** If `true`, the field is required and will show an error if left empty. */
-    required?: undefined extends V ? undefined | boolean : true;
+    required?: R;
     /** Label on the top border of the field, empty by default */
     label?: string;
     /** Input placeholder, empty by default */
@@ -57,7 +65,7 @@ const props = withDefaults(
     /** Additional validity check for input value that must return an error text if failed */
     validate?: (v: number) => string | undefined;
     /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */
-    clearable?: V extends undefined ? boolean | (() => C) : false | (() => C);
+    clearable?: (R extends true ? never : boolean) | (() => C);
     /** Makes some of corners not rounded */
     groupPosition?:
       | "top"
@@ -105,9 +113,12 @@ function commitValue() {
   const text = displayText.value.trim();
   const result = tryParseNumber(text);
 
-  // Empty or partial (-, ., -.) → clear display
+  // Empty or partial (-, ., -.) → clear display and reset model for non-required fields
   if (text === "" || (result.value === undefined && result.error === undefined)) {
     displayText.value = "";
+    if (!props.required) {
+      modelValue.value = undefined as V;
+    }
     return;
   }
 
@@ -142,7 +153,7 @@ const canShowClearable = computed(
 
 function clear() {
   if (typeof props.clearable === "function") {
-    modelValue.value = props.clearable() as V;
+    modelValue.value = props.clearable();
     displayText.value = numberToDecimalString(modelValue.value);
   } else {
     modelValue.value = undefined as V;
diff --git a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
index 5f4ef9dbcf..3dd96e9ea4 100644
--- a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
+++ b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
@@ -7,7 +7,15 @@ export default {
 };
 </script>
 
-<script lang="ts" setup generic="V extends undefined | string, C extends V">
+<script
+  lang="ts"
+  setup
+  generic="
+    R extends true | false,
+    V extends undefined | string,
+    C extends Exclude<V, R extends true ? undefined : never>
+  "
+>
 import { computed, ref, useSlots } from "vue";
 import SvgRequired from "../../assets/images/required.svg?raw";
 import { getErrorMessage } from "../../helpers/error.ts";
@@ -35,9 +43,9 @@ const props = defineProps<{
    * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
    * If a function, calls it to get the reset value.
    */
-  clearable?: boolean | (() => C);
-  /** If `true`, the input field is marked as required. */
-  required?: boolean;
+  clearable?: (R extends true ? never : boolean) | (() => C);
+  /** If `true`, the input field is marked as required and will show an error if left empty. */
+  required?: R;
   /** An error message to display below the input field. */
   error?: unknown;
   /** A helper text to display below the input field when there are no errors. */
@@ -91,8 +99,6 @@ const clear = () => {
 
 const isEmpty = computed(() => model.value === "");
 
-const nonEmpty = computed(() => !isEmpty.value);
-
 const displayErrors = computed(() => {
   const errors: string[] = [];
   const propsError = getErrorMessage(props.error);
@@ -105,13 +111,16 @@ const displayErrors = computed(() => {
       errors.push(error);
     }
   }
+  if (props.required && isEmpty.value) {
+    errors.push("Value is required");
+  }
   return errors;
 });
 
 const hasErrors = computed(() => displayErrors.value.length > 0);
 
 const canShowClearable = computed(
-  () => props.clearable && nonEmpty.value && props.type !== "password" && !props.disabled,
+  () => props.clearable && !isEmpty.value && props.type !== "password" && !props.disabled,
 );
 
 const togglePasswordVisibility = () => (showPassword.value = !showPassword.value);
@@ -130,7 +139,7 @@ useLabelNotch(rootRef);
         error: hasErrors,
         disabled,
         dashed,
-        nonEmpty,
+        nonEmpty: !isEmpty,
       }"
     >
       <label v-if="label" ref="label">