@fiscozen/input 0.1.3 → 0.1.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.3",
+  "version": "0.1.5-beta.1",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,7 +9,8 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^0.1.0"
+    "@fiscozen/composables": "^0.1.20-beta.1",
+    "@fiscozen/icons": "^0.1.9"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -27,9 +28,9 @@
     "vite-plugin-dts": "^3.8.3",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/eslint-config": "^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

@@ -0,0 +1,21 @@
+<template>
+  <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 { FzInputProps } from "./types";
+import { useCurrency } from "@fiscozen/composables";
+
+const fzInputRef = ref();
+const props = defineProps<Omit<FzInputProps, "type" | "modelValue">>();
+const { inputRef } = useCurrency();
+
+defineEmits(["update:amount"]);
+
+onMounted(() => {
+  inputRef.value = fzInputRef.value.inputRef;
+});
+const model = defineModel("amount");
+</script>

package/src/FzInput.vue

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

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { FzCurrencyInput } from "..";
+import {ref} from 'vue'
+
+describe.concurrent("FzCurrencyInput", () => {
+  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 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("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/index.ts

@@ -1,2 +1,4 @@
 export { default as FzInput } from "./FzInput.vue";
+export { default as FzCurrencyInput } from "./FzCurrencyInput.vue";
+
 export type * from "./types";

package/src/types.ts

@@ -62,7 +62,8 @@ type FzInputProps = {
    * native readonly input value
    */
   readonly?: boolean;
-
 };
 
-export { FzInputProps };
+type FzCurrencyInputProps = Omit<FzInputProps, "type">;
+
+export { FzInputProps, FzCurrencyInputProps };