@fiscozen/input 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,8 +9,8 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^0.1.14",
-    "@fiscozen/composables": "^0.1.33"
+    "@fiscozen/icons": "^0.1.22",
+    "@fiscozen/composables": "^0.1.36"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -29,8 +29,8 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCurrencyInput.vue

@@ -5,14 +5,32 @@
     :modelValue="fzInputModel"
     type="text"
     @paste="onPaste"
-  ></FzInput>
+  >
+    <template #right-icon v-if="step">
+      <div class="flex flex-col justify-between items-center">
+        <FzIcon
+          name="angle-up"
+          size="xs"
+          class="fz__currencyinput__arrowup cursor-pointer"
+          @click="stepUpDown(step)"
+        ></FzIcon>
+        <FzIcon
+          name="angle-down"
+          size="xs"
+          class="fz__currencyinput__arrowdown cursor-pointer"
+          @click="stepUpDown(-step)"
+        ></FzIcon>
+      </div>
+    </template>
+  </FzInput>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import FzInput from "./FzInput.vue";
 import { FzCurrencyInputProps } from "./types";
-import { useCurrency } from "@fiscozen/composables";
+import { roundTo, useCurrency } from "@fiscozen/composables";
+import { FzIcon } from "@fiscozen/icons";
 
 const fzInputRef = ref<InstanceType<typeof FzInput>>();
 const fzInputModel = ref();
@@ -31,6 +49,9 @@ const {
 } = useCurrency({
   minimumFractionDigits: props.minimumFractionDigits,
   maximumFractionDigits: props.maximumFractionDigits,
+  min: props.min,
+  max: props.max,
+  step: props.step,
 });
 
 defineEmits(["update:amount"]);
@@ -107,10 +128,22 @@ onMounted(() => {
     fzInputModel.value = inputRef.value?.value;
   });
 });
-const model = defineModel("amount");
+const model = defineModel<number>("amount");
+
+const stepUpDown = (amount: number) => {
+  if (!props.step) {
+    return;
+  }
+  const value = model.value || 0;
+  let stepVal = props.forceStep ? roundTo(props.step, value) : value;
+  stepVal += amount;
+  const safeText = format(stepVal);
+  setValue(safeText);
+  emitAmount(stepVal);
+};
 
 watch(model, (newVal) => {
-  fzInputModel.value = newVal as string;
+  fzInputModel.value = newVal;
 });
 
 defineExpose({

package/src/FzInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fz-input w-full flex flex-col gap-8">
-    <label :class="['text-sm', computedLabelClass]" :for="uniqueId">
+    <label :class="['text-sm', computedLabelClass]" :for="uniqueId" v-if="label">
       {{ label }}{{ required ? " *" : "" }}
     </label>
     <div

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -23,7 +23,7 @@ describe.concurrent("FzCurrencyInput", () => {
     const wrapper = mount(FzCurrencyInput, {
       props: {
         label: "Label",
-        amount: "",
+        amount: 0,
         "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
       },
     });
@@ -126,4 +126,79 @@ describe.concurrent("FzCurrencyInput", () => {
     await new Promise((resolve) => window.setTimeout(resolve, 100));
     expect(inputElement.element.value).toBe("1,23");
   });
+
+  it("should limit value according to min/max setting", async () => {
+    const wrapper = mount(FzCurrencyInput, {
+      props: {
+        label: "Label",
+        amount: 10,
+        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
+        min: 2,
+        max: 20,
+      },
+    });
+
+    const inputElement = wrapper.find("input");
+    await inputElement.trigger("blur");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("10,00");
+    await wrapper.setProps({ amount: 1 });
+    await inputElement.trigger("blur");
+    expect(inputElement.element.value).toBe("2,00");
+    await wrapper.setProps({ amount: 23 });
+    await inputElement.trigger("blur");
+    expect(inputElement.element.value).toBe("20,00");
+  });
+
+  it("should step correctly when using quantization via the 'step' prop", async () => {
+    const wrapper = mount(FzCurrencyInput, {
+      props: {
+        label: "Label",
+        amount: 1,
+        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
+        step: 4,
+      },
+    });
+
+    const inputElement = wrapper.find("input");
+    const arrowUp = wrapper.find(".fz__currencyinput__arrowup");
+    const arrowDown = wrapper.find(".fz__currencyinput__arrowdown");
+
+    await inputElement.trigger("blur");
+    expect(inputElement.element.value).toBe("1,00");
+    await arrowUp.trigger("click");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("5,00");
+    await arrowDown.trigger("click");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1,00");
+    await arrowDown.trigger("click");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("-3,00");
+  });
+
+  it("should enforce quantization via the 'forcedStep' prop", async () => {
+    const wrapper = mount(FzCurrencyInput, {
+      props: {
+        label: "Label",
+        amount: 8,
+        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
+        step: 4,
+        forceStep: true,
+      },
+    });
+
+    const inputElement = wrapper.find("input");
+    await inputElement.trigger("blur");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("8,00");
+    await wrapper.setProps({ amount: 5 });
+    await inputElement.trigger("blur");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("4,00");
+    await wrapper.setProps({ amount: -7 });
+    await inputElement.trigger("blur");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("-8,00");
+  });
 });

package/src/types.ts

@@ -4,7 +4,7 @@ type FzInputProps = {
   /**
    * The label displayed on top of the input
    */
-  label: string;
+  label?: string;
   /**
    * The size of the input
    */
@@ -97,6 +97,22 @@ interface FzCurrencyInputProps
    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
    */
   maximumFractionDigits?: number;
+  /**
+   * Minimum number value
+   */
+  min?: number;
+  /**
+   * Maximum number value
+   */
+  max?: number;
+  /**
+   * Quantized step
+   */
+  step?: number;
+  /**
+   * Allow only mutiples of step
+   */
+  forceStep?: boolean;
 }
 
 export { FzInputProps, FzCurrencyInputProps };