@fiscozen/input 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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.21",
+    "@fiscozen/composables": "^0.1.24",
     "@fiscozen/icons": "^0.1.9"
   },
   "devDependencies": {

package/src/FzCurrencyInput.vue

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

@@ -3,35 +3,38 @@ import { mount } from "@vue/test-utils";
 import { FzCurrencyInput } from "..";
 
 describe.concurrent("FzCurrencyInput", () => {
-    it('renders floating numbers as currency', async () => {
-        const val = 1234.56
+  it("renders floating numbers as currency", async () => {
+    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')
-        expect(inputElement.element.value).toBe('12.3')
-        await inputElement.trigger('blur')
-        expect(inputElement.element.value).toBe('12,30')
-    })
+    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");
+  });
 });

package/src/types.ts

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