@fiscozen/input 0.1.5-beta.1 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.5-beta.1",
+  "version": "0.1.5",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,7 +9,7 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/composables": "^0.1.20-beta.1",
+    "@fiscozen/composables": "^0.1.21",
     "@fiscozen/icons": "^0.1.9"
   },
   "devDependencies": {

package/src/FzCurrencyInput.vue

@@ -1,21 +1,24 @@
 <template>
-  <FzInput ref="fzInputRef" v-bind="props" type="text"></FzInput>
+    <FzInput
+        ref="fzInputRef"
+        v-bind="props"
+        :model-value="model"
+    ></FzInput>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import FzInput from "./FzInput.vue";
-import { FzInputProps } from "./types";
-import { useCurrency } from "@fiscozen/composables";
+import {onMounted, ref} from 'vue'
+import FzInput from './FzInput.vue'
+import {FzCurrencyInputProps} from './types'
+import {useCurrency} from '@fiscozen/composables'
 
 const fzInputRef = ref();
-const props = defineProps<Omit<FzInputProps, "type" | "modelValue">>();
-const { inputRef } = useCurrency();
-
-defineEmits(["update:amount"]);
+const props = defineProps<FzCurrencyInputProps>();
+const {inputRef} = useCurrency();
 
 onMounted(() => {
-  inputRef.value = fzInputRef.value.inputRef;
-});
-const model = defineModel("amount");
-</script>
+    inputRef.value = fzInputRef.value.inputRef
+})
+const model = defineModel()
+
+</script>

package/src/FzInput.vue

@@ -92,11 +92,11 @@ const {
   containerWidth,
 } = useInputStyle(props, containerRef);
 
-const emit = defineEmits(["input", "focus"]);
+const emit = defineEmits(['input', 'focus']);
 defineExpose({
   inputRef,
-  containerRef,
-});
+  containerRef
+})
 </script>
 
 <style scoped></style>

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -1,42 +1,37 @@
 import { describe, it, expect } from "vitest";
-import { flushPromises, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import { FzCurrencyInput } from "..";
-import {ref} from 'vue'
 
 describe.concurrent("FzCurrencyInput", () => {
-  it("renders floating numbers as currency", async () => {
+    it('renders floating numbers as currency', async () => {
+        const val = 1234.56
 
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: 1234.56,
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-      },
-    });
+        const wrapper = mount(FzCurrencyInput, {
+            props: {
+                label: "Label",
+                modelValue: val,
+                'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e})
+            },
+        });
 
-    const inputElement = wrapper.find("input");
-    await inputElement.trigger("blur");
-    // flushPromises doesn't seem to be enoughsince the implementation 
-    // of the composable uses setTimeout itself
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("1234,56");
-  });
-  it("should not allow inputs other than digits and separators", async () => {
-    const wrapper = mount(FzCurrencyInput, {
-      props: {
-        label: "Label",
-        amount: '',
-        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
-      },
-    });
+        const inputElement = wrapper.find('input')
+        await inputElement.setValue(val)
+        await inputElement.trigger('blur')
+        expect(inputElement.element.value).toBe('1.234,56')
+    })
+    it('should not allow inputs other than digits and separators', async () => {
+        const wrapper = mount(FzCurrencyInput, {
+            props: {
+                label: "Label",
+                'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e})
+            },
+        });
 
-    const inputElement = wrapper.find("input");
-    await inputElement.setValue("as12.3");
-    await inputElement.trigger("input");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("12.3");
-    await inputElement.trigger("blur");
-    await new Promise((resolve) => window.setTimeout(resolve, 100));
-    expect(inputElement.element.value).toBe("12,30");
-  });
+        const inputElement = wrapper.find('input')
+        await inputElement.setValue('as12.3')
+        await inputElement.trigger('input')
+        expect(inputElement.element.value).toBe('12.3')
+        await inputElement.trigger('blur')
+        expect(inputElement.element.value).toBe('12,30')
+    })
 });

package/src/types.ts

@@ -62,8 +62,14 @@ type FzInputProps = {
    * native readonly input value
    */
   readonly?: boolean;
+
 };
 
-type FzCurrencyInputProps = Omit<FzInputProps, "type">;
+interface FzCurrencyInputProps extends Omit<FzInputProps, 'type'> {
+  /**
+   * Is set to true, an empty string will be casted to null
+   */
+  nullOnEmpty?: boolean;
+}
 
 export { FzInputProps, FzCurrencyInputProps };