vueless 1.5.0 → 1.5.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.0",
+  "version": "1.5.1-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.form-input-counter/tests/UInputCounter.test.ts

@@ -4,7 +4,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import UInputCounter from "../UInputCounter.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UInputNumber from "../../ui.form-input-number/UInputNumber.vue";
-import UInput from "../../ui.form-input/UInput.vue";
 
 import type { Props } from "../types";
 
@@ -363,7 +362,11 @@ describe("UInputCounter.vue", () => {
 
       await flushPromises();
 
-      await component.getComponent(UInputNumber).findComponent(UInput).trigger("keyup");
+      const input = component.get("input");
+
+      input.element.value = "43";
+      await input.trigger("input", { data: "3" });
+      await flushPromises();
 
       expect(component.emitted("update:modelValue")).toBeUndefined();
 
@@ -371,7 +374,7 @@ describe("UInputCounter.vue", () => {
       await flushPromises();
 
       expect(component.emitted("update:modelValue")).toBeDefined();
-      expect(component.emitted("update:modelValue")![0][0]).toBe(initialValue);
+      expect(component.emitted("update:modelValue")![0][0]).toBe(43);
     });
   });
 });

package/ui.form-input-number/UInputNumber.vue

@@ -58,14 +58,20 @@ const numberInputRef = useTemplateRef<InstanceType<typeof UInput>>("numberInput"
 
 const elementId = props.id || useId();
 
-const { formattedValue, rawValue, setValue } = useFormatNumber(elementId, () => ({
-  minFractionDigits: props.minFractionDigits,
-  maxFractionDigits: props.maxFractionDigits,
-  decimalSeparator: props.decimalSeparator,
-  thousandsSeparator: props.thousandsSeparator,
-  positiveOnly: props.positiveOnly,
-  prefix: props.prefix,
-}));
+const input = computed(() => numberInputRef.value?.inputRef || null);
+
+const { formattedValue, rawValue, setValue } = useFormatNumber(
+  input,
+  () => ({
+    minFractionDigits: props.minFractionDigits,
+    maxFractionDigits: props.maxFractionDigits,
+    decimalSeparator: props.decimalSeparator,
+    thousandsSeparator: props.thousandsSeparator,
+    positiveOnly: props.positiveOnly,
+    prefix: props.prefix,
+  }),
+  () => emit("update:modelValue", currentValue()),
+);
 
 const localValue = computed({
   get: () => props.modelValue ?? "",
@@ -79,10 +85,6 @@ const localLabel = computed(() => {
   return `${props.label}${comma} ${currency}`.trim();
 });
 
-const input = computed(() => {
-  return numberInputRef.value?.inputRef || null;
-});
-
 const stringLocalValue = computed(() => {
   if (Object.is(localValue.value, -0)) return "-0";
 
@@ -94,10 +96,17 @@ const stringLocalValue = computed(() => {
     : String(localValue.value);
 });
 
+/** Compares by numeric value, so `"1"` and `"1.00"` match. */
+function isSameNumber(a: string, b: string) {
+  if (a === b) return true;
+
+  return parseFloat(a) === parseFloat(b);
+}
+
 watch(
   () => props.modelValue,
   () => {
-    if (stringLocalValue.value !== String(rawValue.value)) {
+    if (!isSameNumber(stringLocalValue.value, String(rawValue.value))) {
       setValue(stringLocalValue.value);
     }
   },
@@ -109,11 +118,13 @@ onMounted(() => {
   }
 });
 
-function onKeyup(event: KeyboardEvent) {
-  const numberValue = getFixedNumber(parseFloat(rawValue.value), props.maxFractionDigits || 10);
-  const value = props.valueType === "number" ? numberValue : rawValue.value || "";
+function currentValue() {
+  return props.valueType === "number"
+    ? getFixedNumber(parseFloat(rawValue.value), props.maxFractionDigits || 10)
+    : rawValue.value || "";
+}
 
-  emit("update:modelValue", value);
+function onKeyup(event: KeyboardEvent) {
   emit("keyup", event);
 }
 

package/ui.form-input-number/tests/UInputNumber.test.ts

@@ -6,8 +6,11 @@ import UInput from "../../ui.form-input/UInput.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { DOMWrapper } from "@vue/test-utils";
 import type { Props } from "../types";
 
+type InputWrapper = Omit<DOMWrapper<HTMLInputElement>, "exists">;
+
 describe("UInputNumber.vue", () => {
   describe("Props", () => {
     it("Model Value – set correct value with number type", async () => {
@@ -22,9 +25,7 @@ describe("UInputNumber.vue", () => {
 
       await flushPromises();
 
-      await component.getComponent(UInput).trigger("keyup");
-
-      expect(component.emitted("update:modelValue")![0][0]).toBe(initialValue);
+      expect(component.vm.rawValue).toBe("12345678.23");
     });
 
     it("Model Value – set correct value with string type", async () => {
@@ -39,9 +40,7 @@ describe("UInputNumber.vue", () => {
 
       await flushPromises();
 
-      await component.getComponent(UInput).trigger("keyup");
-
-      expect(component.emitted("update:modelValue")![0][0]).toBe(initialValue);
+      expect(component.vm.rawValue).toBe(initialValue);
     });
 
     it("Min Fraction Digit – set fraction digit when it was not provided", async () => {
@@ -488,4 +487,137 @@ describe("UInputNumber.vue", () => {
       expect(component.vm.input!.tagName).toBe("INPUT");
     });
   });
+
+  describe("Events", () => {
+    async function mountInput(props: Partial<Props> = {}, options = {}) {
+      const component = mount(UInputNumber, {
+        props: { modelValue: "", valueType: "string", ...props },
+        ...options,
+      });
+
+      await flushPromises();
+
+      return component;
+    }
+
+    async function typeInto(input: InputWrapper, value: string, data?: string) {
+      input.element.value = value;
+      await input.trigger("input", data ? { data } : {});
+      await flushPromises();
+    }
+
+    // Paste, drag-drop, autofill and IME commits produce no keyup, but must still reach the model.
+    it("Update Model Value – emits on input without a trailing keyup", async () => {
+      const component = await mountInput();
+
+      await typeInto(component.get("input"), "13");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("13");
+
+      component.unmount();
+    });
+
+    it("Update Model Value – emits a number-typed value without a trailing keyup", async () => {
+      const component = await mountInput({ valueType: "number" });
+
+      await typeInto(component.get("input"), "13");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe(13);
+
+      component.unmount();
+    });
+
+    it("Update Model Value – emits 0 as a real value", async () => {
+      const component = await mountInput();
+
+      await typeInto(component.get("input"), "0");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("0");
+
+      component.unmount();
+    });
+
+    it("Update Model Value – emits once per change, not twice on keyup", async () => {
+      const component = await mountInput();
+      const input = component.get("input");
+
+      await typeInto(input, "13");
+      await input.trigger("keyup");
+
+      expect(component.emitted("update:modelValue")).toHaveLength(1);
+
+      component.unmount();
+    });
+
+    it("Update Model Value – stays silent when the model already matches the input", async () => {
+      const component = await mountInput({ modelValue: "13" });
+
+      await component.get("input").trigger("blur");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+
+      component.unmount();
+    });
+
+    it("Update Model Value – stays silent when the model pushes a value in", async () => {
+      const component = await mountInput({ modelValue: "13" });
+
+      await component.setProps({ modelValue: "42" });
+      await flushPromises();
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+
+      component.unmount();
+    });
+
+    it("Formats input mounted inside a shadow root", async () => {
+      const host = document.createElement("div");
+      const shadowRoot = host.attachShadow({ mode: "open" });
+      const container = document.createElement("div");
+
+      shadowRoot.appendChild(container);
+      document.body.appendChild(host);
+
+      const component = await mountInput({}, { attachTo: container });
+      const input = component.get("input");
+
+      // Behind a shadow boundary, so a document lookup would leave the input unbound.
+      expect(document.getElementById(input.element.id)).toBeNull();
+
+      await typeInto(input, "42");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("42");
+
+      component.unmount();
+      host.remove();
+    });
+
+    it("Strips non-numeric characters from typed input", async () => {
+      const component = await mountInput();
+      const input = component.get("input");
+
+      for (const char of "13232fffffrege") {
+        await typeInto(input, input.element.value + char, char);
+      }
+
+      // Displayed with the default thousands separator; the model keeps the raw digits.
+      expect(input.element.value).toBe("13 232");
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("13232");
+
+      component.unmount();
+    });
+
+    it("Stops listening to the input once unmounted", async () => {
+      const component = await mountInput();
+      const element = component.get("input").element;
+
+      component.unmount();
+
+      element.value = "77";
+      element.dispatchEvent(new Event("input"));
+      await flushPromises();
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+    });
+  });
 });

package/ui.form-input-number/useFormatNumber.ts

@@ -4,15 +4,22 @@ import { getRawValue, getFormattedValue } from "./utilFormat";
 
 import { RAW_DECIMAL_MARK } from "./constants";
 
+import type { MaybeRefOrGetter } from "vue";
 import type { FormatOptions } from "./types";
 
 const digitSet = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
 const comma = ",";
 const minus = "-";
 
+/**
+ * Formats an input as a number. Takes the element itself, so inputs in a shadow root
+ * or detached at mount still bind, unlike a `document.getElementById` lookup.
+ * `onChange` fires for user input only, never for a programmatic `setValue`.
+ */
 export default function useFormatNumber(
-  elementId: string = "",
+  inputSource: MaybeRefOrGetter<HTMLInputElement | null | undefined>,
   formatOptions: (() => FormatOptions) | FormatOptions,
+  onChange?: () => void,
 ) {
   let inputElement: HTMLInputElement | null = null;
 
@@ -31,22 +38,31 @@ export default function useFormatNumber(
     { deep: true },
   );
 
+  // Follow the element: it can appear after mount or be swapped out entirely.
+  watch(() => toValue(inputSource) ?? null, bindInput, { flush: "post" });
+
   onMounted(() => {
     validateOptions();
-    inputElement = document.getElementById(elementId) as HTMLInputElement;
+    bindInput(toValue(inputSource) ?? null);
+  });
+
+  onBeforeUnmount(() => bindInput(null));
+
+  function bindInput(element: HTMLInputElement | null) {
+    if (element === inputElement) return;
 
     if (inputElement) {
-      inputElement.addEventListener("input", onInput);
-      inputElement.addEventListener("keydown", onKeydown);
+      inputElement.removeEventListener("input", onInput);
+      inputElement.removeEventListener("keydown", onKeydown);
     }
-  });
 
-  onBeforeUnmount(() => {
+    inputElement = element;
+
     if (inputElement) {
-      inputElement.removeEventListener("input", onInput);
+      inputElement.addEventListener("input", onInput);
       inputElement.addEventListener("keydown", onKeydown);
     }
-  });
+  }
 
   function validateOptions() {
     const warnMessages = [];
@@ -115,19 +131,30 @@ export default function useFormatNumber(
   }
 
   async function onInput(event: Event) {
-    if (!event.target || !inputElement) return;
+    const previousRawValue = rawValue.value;
+
+    await handleInput(event);
+
+    if (rawValue.value !== previousRawValue) onChange?.();
+  }
+
+  async function handleInput(event: Event) {
+    if (!inputElement) return;
+
+    // Read `data` before awaiting — the event is spent once dispatch returns.
+    const eventData = (event as InputEvent).data || "";
 
     await nextTick();
 
-    const cursorStart = inputElement.selectionStart || 0;
-    const cursorEnd = inputElement.selectionEnd || 0;
+    // The bound element, not `event.target`, which may be released after the await.
+    const input = inputElement;
 
-    const input = event.target as HTMLInputElement;
+    const cursorStart = input.selectionStart || 0;
+    const cursorEnd = input.selectionEnd || 0;
 
     let value = input.value || "";
 
     const prevCursorPosition = cursorEnd - 1;
-    const eventData = (event as InputEvent).data || "";
 
     if (value === minus) {
       formattedValue.value = minus;