@fiscozen/input 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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.15",
+    "@fiscozen/icons": "^0.1.9"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -28,8 +29,8 @@
     "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/eslint-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCurrencyInput.vue

@@ -0,0 +1,24 @@
+<template>
+    <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'
+
+const fzInputRef = ref();
+const props = defineProps<Omit<FzInputProps, 'type'>>();
+const {inputRef} = useCurrency();
+
+onMounted(() => {
+    inputRef.value = fzInputRef.value.inputRef
+})
+const model = defineModel()
+
+</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>

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import { FzCurrencyInput } from "..";
+
+describe.concurrent("FzCurrencyInput", () => {
+    it('renders floating numbers as currency', async () => {
+        const val = 1234.56
+
+        const wrapper = mount(FzCurrencyInput, {
+            props: {
+                label: "Label",
+                modelValue: val,
+                'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: 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')
+    })
+});

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

@@ -65,4 +65,6 @@ type FzInputProps = {
 
 };
 
-export { FzInputProps };
+type FzCurrencyInputProps = Omit<FzInputProps, 'type'>
+
+export { FzInputProps, FzCurrencyInputProps };