@milaboratories/uikit 2.10.45 → 2.11.0

package/src/components/PlNumberField/parseNumber.ts

@@ -1,124 +1,151 @@
-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 === "-";
-}
-
-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;
+/**
+ * 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 === "-.";
 }
 
-function stringToNumber(v: string) {
-  return parseFloat(clearNumericValue(v));
-}
-
-function clearInput(v: string): string {
-  v = v.trim();
-
-  if (isPartial(v)) {
-    return v;
+/**
+ * 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 normalizeDecimalString(s: string): string {
+  let sign = "";
+  if (s.startsWith("-")) {
+    sign = "-";
+    s = s.slice(1);
+  } else if (s.startsWith("+")) {
+    s = s.slice(1);
   }
 
-  if (/^-[^0-9.]/.test(v)) {
-    return "-";
-  }
+  // Remove leading zeros (keep one before decimal point)
+  s = s.replace(/^0+(?=\d)/, "");
+  if (s.startsWith(".")) s = "0" + s;
 
-  const match = v.match(/^(.*)[.,][^0-9].*$/);
-  if (match) {
-    return match[1] + ".";
+  // Remove trailing zeros after decimal point, then trailing dot
+  if (s.includes(".")) {
+    s = s.replace(/0+$/, "").replace(/\.$/, "");
   }
 
-  if (v.match(NUMBER_REGEX)) {
-    return clearNumericValue(v);
-  }
+  if (s === "" || s === "0") return "0";
 
-  const n = stringToNumber(v);
+  return sign + s;
+}
 
-  return isNaN(n) ? "" : String(+n);
+/** 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;
 }
 
-export function parseNumber(
-  props: {
-    minValue?: number;
-    maxValue?: number;
-    validate?: (v: number) => string | undefined;
-  },
-  str: string,
-): ParseResult {
+export function tryParseNumber(str: string): ParseResult {
   str = str.trim();
-
-  const cleanInput = clearInput(str);
-
-  if (str === "") {
-    return {
-      value: undefined,
-      cleanInput,
-    };
+  if (str === "") return {};
+  if (isPartialInput(str)) return {};
+
+  // 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 };
   }
 
-  if (!str.match(NUMBER_REGEX)) {
-    return {
-      error: Error("Value is not a number"),
-      cleanInput,
-    };
+  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 (isPartial(str)) {
-    return {
-      error: Error("Enter a number"),
-      cleanInput,
-    };
+  // 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}` };
   }
 
-  const value = stringToNumber(str);
+  return { value: n };
+}
 
-  if (isNaN(value)) {
-    return {
-      error: Error("Value is not a number"),
-      cleanInput,
-    };
+/**
+ * Converts a number to a plain decimal string (no exponential notation).
+ * E.g. 1e-7 → "0.0000001", 2e+21 → "2000000000000000000000"
+ */
+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(
+  value: number,
+  props: {
+    minValue?: number;
+    maxValue?: number;
+    validate?: (v: number) => string | undefined;
+  },
+): 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);
 }

package/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);

package/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>

package/src/components/PlTextField/PlTextField.vue

@@ -7,13 +7,20 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<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";
 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,58 +32,37 @@ const slots = useSlots();
 /**
  * The current value of the input field.
  */
-const model = defineModel<string>({
-  default: "",
+const model = defineModel<V>({
+  required: true,
 });
 
 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;
-  /**
-   * If `true`, the input field is marked as required.
-   */
-  required?: boolean;
-  /**
-   * An error message to display below the input field.
-   */
+  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.
-   */
+  /** 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;
-  /**
-   * 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)[];
-  /**
-   * The string specifies whether the field should be a password or not, value could be "password" or undefined.
-   */
+  /** 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. */
   type?: "password";
-  /**
-   * Makes some of corners not rounded
-   * */
+  /** Makes some of corners not rounded */
   groupPosition?:
     | "top"
     | "bottom"
@@ -107,24 +93,26 @@ const passwordIcon = computed(() => (showPassword.value ? "view-show" : "view-hi
 
 const clear = () => {
   if (props.clearable) {
-    model.value = "";
+    model.value = (typeof props.clearable === "function" ? props.clearable() : "") as V;
   }
 };
 
-const validationData = useValidation(model, props.rules || []);
-
 const isEmpty = computed(() => model.value === "");
 
-const nonEmpty = computed(() => !isEmpty.value);
-
 const displayErrors = computed(() => {
   const errors: string[] = [];
   const propsError = getErrorMessage(props.error);
   if (propsError) {
     errors.push(propsError);
   }
-  if (!validationData.value.isValid) {
-    errors.push(...validationData.value.errors);
+  if (props.validate) {
+    const error = props.validate(model.value as V);
+    if (error) {
+      errors.push(error);
+    }
+  }
+  if (props.required && isEmpty.value) {
+    errors.push("Value is required");
   }
   return errors;
 });
@@ -132,7 +120,7 @@ const displayErrors = computed(() => {
 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);
@@ -151,7 +139,7 @@ useLabelNotch(rootRef);
         error: hasErrors,
         disabled,
         dashed,
-        nonEmpty,
+        nonEmpty: !isEmpty,
       }"
     >
       <label v-if="label" ref="label">

package/src/components/PlTextField/__tests__/TextField.spec.ts

@@ -18,7 +18,7 @@ describe("TextField", () => {
     const wrapper = mount(PlTextField, {
       props: {
         modelValue: "initialText",
-        "onUpdate:modelValue": (e: string) => wrapper.setProps({ modelValue: e }),
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
       },
     });
 
@@ -31,7 +31,7 @@ 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 }),
       },
     });
 

package/dist/components/PlNumberField/__tests__/PlNumberField.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlNumberField.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/PlNumberField/__tests__/PlNumberField.spec.ts"],"names":[],"mappings":""}