@fiscozen/input 0.1.7 → 0.1.9

package/dist/src/FzCurrencyInput.vue.d.ts

@@ -0,0 +1,124 @@
+declare const _default: import('vue').DefineComponent<{
+    amount: import('vue').PropType<any>;
+    error: {
+        type: import('vue').PropType<boolean>;
+    };
+    name: {
+        type: import('vue').PropType<string>;
+    };
+    size: {
+        type: import('vue').PropType<"sm" | "md" | "lg">;
+    };
+    required: {
+        type: import('vue').PropType<boolean>;
+    };
+    label: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+    pattern: {
+        type: import('vue').PropType<string>;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    leftIcon: {
+        type: import('vue').PropType<string>;
+    };
+    leftIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    rightIcon: {
+        type: import('vue').PropType<string>;
+    };
+    rightIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    valid: {
+        type: import('vue').PropType<boolean>;
+    };
+    readonly: {
+        type: import('vue').PropType<boolean>;
+    };
+    nullOnEmpty: {
+        type: import('vue').PropType<boolean>;
+    };
+    minimumFractionDigits: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    maximumFractionDigits: {
+        type: import('vue').PropType<number | null>;
+        default: number;
+    };
+}, {
+    inputRef: import('vue').ComputedRef<HTMLInputElement | null | undefined>;
+    containerRef: import('vue').ComputedRef<HTMLElement | null | undefined>;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:amount": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    amount: import('vue').PropType<any>;
+    error: {
+        type: import('vue').PropType<boolean>;
+    };
+    name: {
+        type: import('vue').PropType<string>;
+    };
+    size: {
+        type: import('vue').PropType<"sm" | "md" | "lg">;
+    };
+    required: {
+        type: import('vue').PropType<boolean>;
+    };
+    label: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+    pattern: {
+        type: import('vue').PropType<string>;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    leftIcon: {
+        type: import('vue').PropType<string>;
+    };
+    leftIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    rightIcon: {
+        type: import('vue').PropType<string>;
+    };
+    rightIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    valid: {
+        type: import('vue').PropType<boolean>;
+    };
+    readonly: {
+        type: import('vue').PropType<boolean>;
+    };
+    nullOnEmpty: {
+        type: import('vue').PropType<boolean>;
+    };
+    minimumFractionDigits: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    maximumFractionDigits: {
+        type: import('vue').PropType<number | null>;
+        default: number;
+    };
+}>> & {
+    "onUpdate:amount"?: ((...args: any[]) => any) | undefined;
+}, {
+    minimumFractionDigits: number;
+    maximumFractionDigits: number | null;
+}, {}>;
+export default _default;

package/dist/src/FzInput.vue.d.ts

@@ -0,0 +1,131 @@
+import { Ref } from 'vue';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<any>;
+    error: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    name: {
+        type: import('vue').PropType<string>;
+    };
+    size: {
+        type: import('vue').PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+    type: {
+        type: import('vue').PropType<"number" | "text" | "password" | "email" | "tel" | "url">;
+        default: string;
+    };
+    required: {
+        type: import('vue').PropType<boolean>;
+    };
+    label: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+    pattern: {
+        type: import('vue').PropType<string>;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    leftIcon: {
+        type: import('vue').PropType<string>;
+    };
+    leftIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    rightIcon: {
+        type: import('vue').PropType<string>;
+    };
+    rightIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    valid: {
+        type: import('vue').PropType<boolean>;
+    };
+    readonly: {
+        type: import('vue').PropType<boolean>;
+    };
+}, {
+    inputRef: Ref<HTMLInputElement | null>;
+    containerRef: Ref<HTMLElement | null>;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: (...args: any[]) => void;
+    input: (...args: any[]) => void;
+    paste: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    error: {
+        type: import('vue').PropType<boolean>;
+        default: boolean;
+    };
+    name: {
+        type: import('vue').PropType<string>;
+    };
+    size: {
+        type: import('vue').PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+    type: {
+        type: import('vue').PropType<"number" | "text" | "password" | "email" | "tel" | "url">;
+        default: string;
+    };
+    required: {
+        type: import('vue').PropType<boolean>;
+    };
+    label: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+    pattern: {
+        type: import('vue').PropType<string>;
+    };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
+    disabled: {
+        type: import('vue').PropType<boolean>;
+    };
+    leftIcon: {
+        type: import('vue').PropType<string>;
+    };
+    leftIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    rightIcon: {
+        type: import('vue').PropType<string>;
+    };
+    rightIconVariant: {
+        type: import('vue').PropType<import('@fiscozen/icons/src/types').IconVariant>;
+    };
+    valid: {
+        type: import('vue').PropType<boolean>;
+    };
+    readonly: {
+        type: import('vue').PropType<boolean>;
+    };
+}>> & {
+    onPaste?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+}, {
+    error: boolean;
+    size: "sm" | "md" | "lg";
+    type: "number" | "text" | "password" | "email" | "tel" | "url";
+}, {}>, {
+    "left-icon"?(_: {}): any;
+    "right-icon"?(_: {}): any;
+    errorMessage?(_: {}): any;
+    helpText?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FzInput } from './FzInput.vue';
+export { default as FzCurrencyInput } from './FzCurrencyInput.vue';
+export type * from './types';

package/dist/src/types.d.ts

@@ -0,0 +1,83 @@
+import { IconVariant } from '@fiscozen/icons';
+
+type FzInputProps = {
+    /**
+     * The label displayed on top of the input
+     */
+    label: string;
+    /**
+     * The size of the input
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The placeholder displayed in the input
+     */
+    placeholder?: string;
+    /**
+     * If set to true, the input is required
+     */
+    required?: boolean;
+    /**
+     * If set to true, the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If set to true, the input is in error state
+     */
+    error?: boolean;
+    /**
+     * Left icon name
+     */
+    leftIcon?: string;
+    /**
+     * Left icon variant
+     */
+    leftIconVariant?: IconVariant;
+    /**
+     * Right icon name
+     */
+    rightIcon?: string;
+    /**
+     * Right icon variant
+     */
+    rightIconVariant?: IconVariant;
+    /**
+     * The input type
+     */
+    type?: "text" | "password" | "email" | "number" | "tel" | "url";
+    /**
+     * If set to true, the input is valid
+     */
+    valid?: boolean;
+    /**
+     * Pattern to validate the input
+     */
+    pattern?: string;
+    /**
+     * Defines the textarea key in a form
+     */
+    name?: string;
+    /**
+     * native readonly input value
+     */
+    readonly?: boolean;
+};
+interface FzCurrencyInputProps extends Omit<FzInputProps, "type" | "modelValue"> {
+    /**
+     * Is set to true, an empty string will be casted to null
+     */
+    nullOnEmpty?: boolean;
+    /**
+     * Minimum number of decimal places allowed, set null to allow arbitrary decimal values length
+     * note that limits from Intl.NumberFormat still apply
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+     */
+    minimumFractionDigits?: number;
+    /**
+     * Maximum number of decimal places allowed, set null to allow arbitrary decimal values length
+     * note that limits from Intl.NumberFormat still apply
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+     */
+    maximumFractionDigits?: number | null;
+}
+export { FzInputProps, FzCurrencyInputProps };

package/dist/src/useInputStyle.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+import { FzInputProps } from './types';
+
+export default function useInputStyle(props: FzInputProps, container: Ref<HTMLElement | null>): {
+    staticContainerClass: string;
+    computedContainerClass: import('vue').ComputedRef<string[]>;
+    computedLabelClass: import('vue').ComputedRef<string[]>;
+    staticInputClass: string;
+    computedHelpClass: import('vue').ComputedRef<string[]>;
+    computedErrorClass: import('vue').ComputedRef<string[]>;
+    containerWidth: import('vue').ComputedRef<string>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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.9",
-    "@fiscozen/composables": "^0.1.24"
+    "@fiscozen/composables": "^0.1.29",
+    "@fiscozen/icons": "^0.1.12"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

package/src/FzCurrencyInput.vue

@@ -1,26 +1,118 @@
 <template>
-  <FzInput ref="fzInputRef" v-bind="props" type="text"></FzInput>
+  <FzInput
+    ref="fzInputRef"
+    v-bind="props"
+    :modelValue="fzInputModel"
+    type="text"
+    @paste="onPaste"
+  ></FzInput>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import FzInput from "./FzInput.vue";
 import { FzCurrencyInputProps } from "./types";
 import { useCurrency } from "@fiscozen/composables";
 
 const fzInputRef = ref<InstanceType<typeof FzInput>>();
+const fzInputModel = ref();
 const containerRef = computed(() => fzInputRef.value?.containerRef);
 const inputRef = computed(() => fzInputRef.value?.inputRef);
-const props = defineProps<FzCurrencyInputProps>();
-const { inputRef: currencyInputRef } = useCurrency();
+const props = withDefaults(defineProps<FzCurrencyInputProps>(), {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+const {
+  inputRef: currencyInputRef,
+  setValue,
+  emitAmount,
+  parse,
+  format,
+} = useCurrency({
+  minimumFractionDigits: props.minimumFractionDigits,
+  maximumFractionDigits: props.maximumFractionDigits,
+});
 
 defineEmits(["update:amount"]);
 
+const onPaste = (e: ClipboardEvent) => {
+  e.preventDefault();
+
+  if (props.readonly) {
+    return;
+  }
+
+  let rawPastedText;
+  if (e.clipboardData && e.clipboardData.getData) {
+    rawPastedText = e.clipboardData.getData("text/plain");
+  } else {
+    throw "invalid paste value";
+  }
+
+  // Fix for firefox paste handling on `contenteditable` elements where `e.target` is the text node, not the element
+  let eventTarget;
+  if ((!e.target as any)?.tagName) {
+    eventTarget = (e as any).explicitOriginalTarget;
+  } else {
+    eventTarget = e.target;
+  }
+
+  let isNegative = rawPastedText.slice(0, 1) === "-";
+  const separatorRegex = /[,.]/g;
+  const separators: string[] = [...rawPastedText.matchAll(separatorRegex)].map(
+    (regexRes) => regexRes[0],
+  );
+
+  const uniqueSeparators = new Set(separators);
+  let decimalSeparator = ".";
+  let thousandSeparator = "";
+  let unknownSeparator;
+
+  // case 1: there are 2 different separators pasted, therefore we can assume the rightmost is the decimal separator
+  if (uniqueSeparators.size > 1) {
+    decimalSeparator = separators[separators.length - 1];
+    thousandSeparator = separators[0];
+  }
+
+  // case 2: there are multiple instances of the same separator, therefore it must be the thousand separator
+  if (uniqueSeparators.size === 1) {
+    if (separators.length > 1) {
+      thousandSeparator = separators[0];
+    }
+
+    // case 3: there is only one instance of a separator  with < 3 digits afterwards (must be decimal separator)
+    unknownSeparator = separators[0];
+    const splitted = rawPastedText.split(unknownSeparator);
+
+    if (splitted[1].length !== 3) {
+      decimalSeparator = unknownSeparator;
+    }
+  }
+
+  // case 3: there is only one instance of a separator with 3 digits afterwards. Here we cannot make assumptions
+  //         we will format based on settings
+  //@ts-ignore
+  let safeText = rawPastedText.replaceAll(thousandSeparator, "").trim();
+  safeText = safeText.replaceAll(decimalSeparator, ".").trim();
+
+  const safeNum = parse(safeText);
+  safeText = format(safeNum);
+  setValue(safeText);
+  emitAmount(safeNum);
+};
+
 onMounted(() => {
   currencyInputRef.value = inputRef.value;
+  nextTick(() => {
+    fzInputModel.value = inputRef.value?.value;
+  });
 });
 const model = defineModel("amount");
 
+watch(model, (newVal) => {
+  fzInputModel.value = newVal as string;
+});
+
 defineExpose({
   inputRef,
   containerRef,

package/src/FzInput.vue

@@ -8,12 +8,14 @@
       ref="containerRef"
       @click="inputRef?.focus()"
     >
-      <FzIcon
-        v-if="leftIcon"
-        :name="leftIcon"
-        :size="size"
-        :variant="leftIconVariant"
-      />
+      <slot name="left-icon">
+        <FzIcon
+          v-if="leftIcon"
+          :name="leftIcon"
+          :size="size"
+          :variant="leftIconVariant"
+        />
+      </slot>
       <input
         :type="type"
         :required="required ? required : false"
@@ -27,19 +29,22 @@
         :pattern="pattern"
         :name
         @focus="(e) => $emit('focus', e)"
+        @paste="(e) => $emit('paste', e)"
       />
-      <FzIcon
-        v-if="valid"
-        name="check"
-        :size="size"
-        class="text-semantic-success"
-      />
-      <FzIcon
-        v-if="rightIcon"
-        :name="rightIcon"
-        :size="size"
-        :variant="rightIconVariant"
-      />
+      <slot name="right-icon">
+        <FzIcon
+          v-if="valid"
+          name="check"
+          :size="size"
+          class="text-semantic-success"
+        />
+        <FzIcon
+          v-if="rightIcon"
+          :name="rightIcon"
+          :size="size"
+          :variant="rightIconVariant"
+        />
+      </slot>
     </div>
     <div
       v-if="error && $slots.errorMessage"
@@ -92,7 +97,7 @@ const {
   containerWidth,
 } = useInputStyle(props, containerRef);
 
-const emit = defineEmits(["input", "focus"]);
+const emit = defineEmits(["input", "focus", "paste"]);
 defineExpose({
   inputRef,
   containerRef,

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -37,4 +37,93 @@ describe.concurrent("FzCurrencyInput", () => {
     await new Promise((resolve) => window.setTimeout(resolve, 100));
     expect(inputElement.element.value).toBe("12,30");
   });
+
+  it("should allow to set value at 0", async () => {
+    const wrapper = mount(FzCurrencyInput, {
+      props: {
+        label: "Label",
+        amount: 10,
+        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
+      },
+    });
+
+    const inputElement = wrapper.find("input");
+    await inputElement.trigger("blur");
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("10,00");
+    wrapper.setProps({ amount: 0 });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("0,00");
+  });
+
+  it("should handle pasted values using the best possible euristic to parse and render it correctly", async () => {
+    const wrapper = mount(FzCurrencyInput, {
+      props: {
+        label: "Label",
+        "onUpdate:amount": (e) => wrapper.setProps({ amount: e }),
+      },
+    });
+
+    const inputElement = wrapper.find("input");
+    // we need to mock the paste event
+    await inputElement.trigger("paste", {
+      clipboardData: {
+        getData() {
+          return "1.233.222,43";
+        },
+      },
+    });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1233222,43");
+
+    await inputElement.trigger("paste", {
+      clipboardData: {
+        getData() {
+          return "1.23";
+        },
+      },
+    });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1,23");
+
+    await inputElement.trigger("paste", {
+      clipboardData: {
+        getData() {
+          return "1,23";
+        },
+      },
+    });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1,23");
+
+    await inputElement.trigger("paste", {
+      clipboardData: {
+        getData() {
+          return "1.232.111";
+        },
+      },
+    });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1232111,00");
+
+    await inputElement.trigger("paste", {
+      clipboardData: {
+        getData() {
+          return "1.232";
+        },
+      },
+    });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1,23");
+
+    await inputElement.trigger("paste", {
+      clipboardData: {
+        getData() {
+          return "1.232555";
+        },
+      },
+    });
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    expect(inputElement.element.value).toBe("1,23");
+  });
 });

package/src/types.ts

@@ -70,6 +70,18 @@ interface FzCurrencyInputProps
    * Is set to true, an empty string will be casted to null
    */
   nullOnEmpty?: boolean;
+  /**
+   * Minimum number of decimal places allowed, set null to allow arbitrary decimal values length
+   * note that limits from Intl.NumberFormat still apply
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+   */
+  minimumFractionDigits?: number;
+  /**
+   * Maximum number of decimal places allowed, set null to allow arbitrary decimal values length
+   * note that limits from Intl.NumberFormat still apply
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+   */
+  maximumFractionDigits?: number | null;
 }
 
 export { FzInputProps, FzCurrencyInputProps };