@cfasim-ui/components 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "Vue 3 UI components for cfasim-ui",
   "license": "Apache-2.0",

package/src/NumberInput/NumberInput.spec.ts

@@ -6,5 +6,5 @@ test("NumberInput page renders demos", async ({ page }) => {
   const demos = page.locator(".demo-preview");
   await expect(demos.first()).toBeVisible();
   await expect(demos.first().getByText("Days")).toBeVisible();
-  await expect(demos.first().locator('input[type="number"]')).toBeVisible();
+  await expect(demos.first().locator('input[type="text"]')).toBeVisible();
 });

package/src/NumberInput/NumberInput.test.ts

@@ -113,15 +113,27 @@ describe("NumberInput", () => {
     expect(wrapper.props("modelValue")).toBeCloseTo(0.85);
   });
 
-  it("defaults step/min/max for percent mode", () => {
+  it("validates min/max for percent mode", async () => {
     const wrapper = mount(NumberInput, {
-      props: { modelValue: 0.5, label: "Rate", percent: true },
+      props: {
+        modelValue: 0.5,
+        label: "Rate",
+        percent: true,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
     });
     const input = wrapper.find("input");
-    const el = input.element as HTMLInputElement;
-    expect(el.step).toBe("1");
-    expect(el.min).toBe("0");
-    expect(el.max).toBe("100");
+
+    await input.setValue(110);
+    await input.trigger("blur");
+    expect(wrapper.find(".input-error").text()).toBe("Max 100%");
+    expect(wrapper.props("modelValue")).toBe(0.5);
+
+    await input.setValue(-5);
+    await input.trigger("blur");
+    expect(wrapper.find(".input-error").text()).toBe("Min 0%");
+    expect(wrapper.props("modelValue")).toBe(0.5);
   });
 
   it("does not show suffix when percent is not set", () => {
@@ -311,6 +323,141 @@ describe("NumberInput", () => {
     vi.useRealTimers();
   });
 
+  it("increments value on ArrowUp", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 100,
+        label: "Count",
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.props("modelValue")).toBe(101);
+    expect((input.element as HTMLInputElement).value).toBe("101");
+  });
+
+  it("decrements value on ArrowDown", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 100,
+        label: "Count",
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.trigger("keydown", { key: "ArrowDown" });
+    expect(wrapper.props("modelValue")).toBe(99);
+  });
+
+  it("steps by custom step prop", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 100,
+        label: "Count",
+        step: 5,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.props("modelValue")).toBe(105);
+  });
+
+  it("steps by 10x with shift+arrow", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 100,
+        label: "Count",
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.trigger("keydown", { key: "ArrowUp", shiftKey: true });
+    expect(wrapper.props("modelValue")).toBe(110);
+  });
+
+  it("converts step prop to display units in percent mode", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 0.5,
+        label: "Rate",
+        percent: true,
+        step: 0.01,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    expect((input.element as HTMLInputElement).value).toBe("50");
+
+    await input.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.props("modelValue")).toBeCloseTo(0.51);
+    expect((input.element as HTMLInputElement).value).toBe("51");
+  });
+
+  it("clamps arrow step to min/max", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 99,
+        label: "Count",
+        max: 100,
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.props("modelValue")).toBe(100);
+    await input.trigger("keydown", { key: "ArrowUp" });
+    expect(wrapper.props("modelValue")).toBe(100);
+  });
+
+  it("displays numbers with comma separators", () => {
+    const wrapper = mount(NumberInput, {
+      props: { modelValue: 1000000, label: "Population" },
+    });
+    const input = wrapper.find("input");
+    expect((input.element as HTMLInputElement).value).toBe("1,000,000");
+  });
+
+  it("keeps commas during editing and commits on blur", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 1500,
+        label: "Count",
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    expect((input.element as HTMLInputElement).value).toBe("1,500");
+
+    await input.setValue("2500");
+    await input.trigger("blur");
+    expect((input.element as HTMLInputElement).value).toBe("2,500");
+    expect(wrapper.props("modelValue")).toBe(2500);
+  });
+
+  it("accepts comma-formatted input and parses correctly", async () => {
+    const wrapper = mount(NumberInput, {
+      props: {
+        modelValue: 100,
+        label: "Count",
+        "onUpdate:modelValue": (v: number | undefined) =>
+          wrapper.setProps({ modelValue: v }),
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("1,234,567");
+    await input.trigger("blur");
+    expect(wrapper.props("modelValue")).toBe(1234567);
+  });
+
   it("syncs local value when model changes externally", async () => {
     const wrapper = mount(NumberInput, {
       props: {
@@ -322,7 +469,7 @@ describe("NumberInput", () => {
     const input = wrapper.find("input");
     expect((input.element as HTMLInputElement).value).toBe("100");
 
-    await wrapper.setProps({ modelValue: 500 });
-    expect((input.element as HTMLInputElement).value).toBe("500");
+    await wrapper.setProps({ modelValue: 5000 });
+    expect((input.element as HTMLInputElement).value).toBe("5,000");
   });
 });

package/src/NumberInput/NumberInput.vue

@@ -24,7 +24,7 @@ const sliderStep = computed(() => props.step ?? (props.percent ? 0.01 : 1));
 function formatSliderValue(v: number | undefined) {
   if (v == null) return "";
   if (props.percent) return (v * 100).toFixed(0) + "%";
-  return String(v);
+  return v.toLocaleString("en-US");
 }
 
 function toDisplay(v: number | undefined) {
@@ -36,15 +36,63 @@ function fromDisplay(v: number) {
   return props.percent ? v / 100 : v;
 }
 
-const local = ref(toDisplay(model.value));
+function formatWithCommas(v: number | undefined): string {
+  if (v == null) return "";
+  return v.toLocaleString("en-US");
+}
+
+function stripCommas(s: string): string {
+  return s.replace(/,/g, "");
+}
+
+const local = ref(formatWithCommas(toDisplay(model.value)));
 const sliderLocal = ref(model.value);
 const validationError = ref<string>();
 
 watch(model, (v) => {
-  local.value = toDisplay(v);
+  local.value = formatWithCommas(toDisplay(v));
   sliderLocal.value = v;
 });
 
+function reformatInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const raw = stripCommas(input.value);
+  if (raw === "" || raw === "-") return;
+  const parsed = Number(raw);
+  if (Number.isNaN(parsed)) return;
+
+  const formatted = formatWithCommas(parsed);
+  if (formatted === input.value) return;
+
+  const cursorPos = input.selectionStart ?? 0;
+  const commasBefore = (input.value.slice(0, cursorPos).match(/,/g) || [])
+    .length;
+  local.value = formatted;
+
+  requestAnimationFrame(() => {
+    const rawPos = cursorPos - commasBefore;
+    let newPos = 0;
+    let rawCount = 0;
+    for (let i = 0; i < formatted.length; i++) {
+      if (formatted[i] !== ",") rawCount++;
+      if (rawCount >= rawPos) {
+        newPos = i + 1;
+        break;
+      }
+    }
+    if (rawCount < rawPos) newPos = formatted.length;
+    input.setSelectionRange(newPos, newPos);
+  });
+}
+
+function onBlur() {
+  commit();
+  const parsed = Number(stripCommas(local.value));
+  if (!Number.isNaN(parsed)) {
+    local.value = formatWithCommas(parsed);
+  }
+}
+
 let liveTimeout: ReturnType<typeof setTimeout> | null = null;
 function onInputEvent() {
   if (!props.live || props.slider) return;
@@ -68,7 +116,7 @@ function validate(displayValue: number): string | undefined {
 }
 
 function commit() {
-  const parsed = Number(local.value);
+  const parsed = Number(stripCommas(local.value));
   if (Number.isNaN(parsed)) return;
 
   const error = validate(parsed);
@@ -82,7 +130,7 @@ function commit() {
 function onSliderUpdate(v: number[] | undefined) {
   if (!v) return;
   sliderLocal.value = v[0];
-  local.value = toDisplay(v[0]);
+  local.value = formatWithCommas(toDisplay(v[0]));
   if (props.live) {
     model.value = v[0];
   }
@@ -93,7 +141,25 @@ function onSliderCommit(v: number[] | undefined) {
   model.value = v[0];
 }
 
-const inputStep = computed(() => props.step ?? (props.percent ? 1 : undefined));
+const inputStep = computed(() => {
+  if (props.step != null) return props.percent ? props.step * 100 : props.step;
+  return 1;
+});
+
+function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
+  event.preventDefault();
+  const parsed = Number(stripCommas(local.value));
+  const current = Number.isNaN(parsed) ? 0 : parsed;
+  const step = inputStep.value * (event.shiftKey ? 10 : 1);
+  let next = current + step * direction;
+  if (inputMin.value != null) next = Math.max(next, inputMin.value);
+  if (inputMax.value != null) next = Math.min(next, inputMax.value);
+  local.value = formatWithCommas(next);
+  validationError.value = undefined;
+  model.value = fromDisplay(next);
+  sliderLocal.value = model.value;
+}
+
 const inputMin = computed(() => {
   if (props.min != null) return props.percent ? props.min * 100 : props.min;
   return props.percent ? 0 : undefined;
@@ -112,16 +178,19 @@ const inputMax = computed(() => {
     </span>
     <span v-if="!props.slider" class="input-wrapper">
       <input
-        type="number"
-        v-model.number="local"
+        type="text"
+        inputmode="decimal"
+        v-model="local"
         :placeholder="props.placeholder"
-        :step="inputStep"
-        :min="inputMin"
-        :max="inputMax"
         :aria-invalid="!!validationError"
-        @blur="commit"
+        @blur="onBlur"
         @keydown.enter="commit"
-        @input="onInputEvent"
+        @keydown.up="onArrowStep($event, 1)"
+        @keydown.down="onArrowStep($event, -1)"
+        @input="
+          reformatInput($event);
+          onInputEvent();
+        "
         @change="onChangeEvent"
       />
       <span v-if="props.percent" class="input-suffix">%</span>
@@ -157,16 +226,19 @@ const inputMax = computed(() => {
   <div v-else>
     <span v-if="!props.slider" class="input-wrapper">
       <input
-        type="number"
-        v-model.number="local"
+        type="text"
+        inputmode="decimal"
+        v-model="local"
         :placeholder="props.placeholder"
-        :step="inputStep"
-        :min="inputMin"
-        :max="inputMax"
         :aria-invalid="!!validationError"
-        @blur="commit"
+        @blur="onBlur"
         @keydown.enter="commit"
-        @input="onInputEvent"
+        @keydown.up="onArrowStep($event, 1)"
+        @keydown.down="onArrowStep($event, -1)"
+        @input="
+          reformatInput($event);
+          onInputEvent();
+        "
         @change="onChangeEvent"
       />
       <span v-if="props.percent" class="input-suffix">%</span>