vueless 1.2.8-beta.1 → 1.2.8-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.1",
+  "version": "1.2.8-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.form-input/UInput.vue

@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */
@@ -43,6 +43,7 @@ const emit = defineEmits([
 
   /**
    * Triggers when the input gains focus.
+   * @property {FocusEvent} event
    */
   "focus",
 
@@ -53,11 +54,12 @@ const emit = defineEmits([
 
   /**
    * Triggers when the input loses focus.
+   * @property {FocusEvent} event
    */
   "blur",
 
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */

package/ui.form-input-counter/UInputCounter.vue

@@ -27,6 +27,18 @@ const emit = defineEmits([
    * @property {number} modelValue
    */
   "update:modelValue",
+
+  /**
+   * Triggers when the input gains focus.
+   * @property {FocusEvent} event
+   */
+  "focus",
+
+  /**
+   * Triggers when the input loses focus.
+   * @property {FocusEvent} event
+   */
+  "blur",
 ]);
 
 const inputComponentRef = useTemplateRef<InstanceType<typeof UInput>>("inputComponent");
@@ -120,9 +132,15 @@ function onMouseLeave() {
   clearIntervals();
 }
 
-function onBlur() {
+function onFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
+function onBlur(event: FocusEvent) {
   if (Number(count.value) > props.max) count.value = props.max;
   if (Number(count.value) < props.min) count.value = props.min;
+
+  emit("blur", event);
 }
 
 function onInput() {
@@ -187,7 +205,13 @@ const {
       :size="size"
       :disabled="disabled"
       :readonly="readonly"
+      :min-fraction-digits="minFractionDigits"
+      :max-fraction-digits="maxFractionDigits"
+      :decimal-separator="decimalSeparator"
+      :thousands-separator="thousandsSeparator"
+      :prefix="prefix"
       v-bind="counterInputAttrs"
+      @focus="onFocus"
       @blur="onBlur"
       @input="onInput"
     />

package/ui.form-input-counter/config.ts

@@ -33,9 +33,14 @@ export default /*tw*/ {
   subtractIcon: "{UIcon}",
   defaults: {
     size: "md",
+    decimalSeparator: ",",
+    thousandsSeparator: " ",
+    prefix: "",
     step: 1,
-    min: 1,
+    min: 0,
     max: 999,
+    minFractionDigits: 0,
+    maxFractionDigits: 2,
     readonly: false,
     disabled: false,
     /* icons */

package/ui.form-input-counter/tests/UInputCounter.test.ts

@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
 import UInputCounter from "../UInputCounter.vue";
@@ -169,6 +169,90 @@ describe("UInputCounter.vue", () => {
       expect(addButton.props("disabled")).toBe(true);
     });
 
+    it("Min Fraction Digit – set fraction digit when it was not provided", async () => {
+      const initialValue = 12345678;
+      const initialValueWithFactions = "12 345 678,00";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          minFractionDigits: 2,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value).toBe(initialValueWithFactions);
+    });
+
+    it("Max Fraction Digit – truncate fraction digit to max value", async () => {
+      const initialValue = 12345678.011;
+      const initialValueWithFactions = "12 345 678,01";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          maxFractionDigits: 2,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value).toBe(initialValueWithFactions);
+    });
+
+    it("Decimal Separator – set correct decimal separator char", async () => {
+      const initialValue = 12345678.01;
+      const expectedDecimalSubString = "/01";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          decimalSeparator: "/",
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value).toContain(expectedDecimalSubString);
+    });
+
+    it("Thousands Separator – set correct decimal separator char", async () => {
+      const initialValue = 12_345_678.01;
+      const expectedThousandsSeparator = "/";
+      const expectedThousandsSeparatorAmount = 2;
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          thousandsSeparator: expectedThousandsSeparator,
+        },
+      });
+
+      await flushPromises();
+
+      const inputValue = component.get("input").element.value;
+      const separatorCount = inputValue.split(expectedThousandsSeparator).length - 1;
+
+      expect(separatorCount).toBe(expectedThousandsSeparatorAmount);
+    });
+
+    it("Prefix – displays prefix at the beginning of the value", async () => {
+      const initialValue = 12345678;
+      const prefix = "pizza";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          prefix: prefix,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value.startsWith(prefix)).toBe(true);
+    });
+
     it("Readonly – renders text instead of input when readonly set to true", async () => {
       const component = mount(UInputCounter, {
         props: {

package/ui.form-input-counter/types.ts

@@ -25,6 +25,31 @@ export interface Props {
    */
   max?: number;
 
+  /**
+   * Minimal number of signs after the decimal separator (fractional part of a number).
+   */
+  minFractionDigits?: number;
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator?: string;
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator?: string;
+
+  /**
+   * Prefix to display before input value.
+   */
+  prefix?: string;
+
   /**
    * Input size.
    */

package/ui.form-input-number/UInputNumber.vue

@@ -11,7 +11,7 @@ import useFormatNumber from "./useFormatNumber";
 import { COMPONENT_NAME, RAW_DECIMAL_MARK } from "./constants";
 
 import type { Props, Config } from "./types";
-import { getRawValue } from "./utilFormat";
+import { getRawValue, getFixedNumber } from "./utilFormat";
 
 defineOptions({ inheritAttrs: false });
 
@@ -41,8 +41,15 @@ const emit = defineEmits([
    */
   "keyup",
 
+  /**
+   * Triggers when the input gains focus.
+   * @property {FocusEvent} event
+   */
+  "focus",
+
   /**
    * Triggers when the input loses focus.
+   * @property {FocusEvent} event
    */
   "blur",
 ]);
@@ -103,13 +110,17 @@ onMounted(() => {
 });
 
 function onKeyup(event: KeyboardEvent) {
-  const numberValue = !Number.isNaN(parseFloat(rawValue.value)) ? parseFloat(rawValue.value) : "";
+  const numberValue = getFixedNumber(parseFloat(rawValue.value), props.maxFractionDigits || 10);
 
   localValue.value = props.valueType === "number" ? numberValue : rawValue.value || "";
 
   emit("keyup", event);
 }
 
+function onFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
 function onBlur(event: FocusEvent) {
   emit("blur", event);
 }
@@ -164,6 +175,7 @@ const { getDataTest, numberInputAttrs } = useUI<Config>(defaultConfig);
     v-bind="numberInputAttrs"
     :data-test="getDataTest()"
     @keyup="onKeyup"
+    @focus="onFocus"
     @blur="onBlur"
     @input="onInput"
   >

package/ui.form-input-number/utilFormat.ts

@@ -2,6 +2,13 @@ import { RAW_DECIMAL_MARK } from "./constants";
 
 import type { FormatOptions } from "./types";
 
+export function getFixedNumber(value: number, maxDecimals: number = 10): number | "" {
+  if (!isFinite(value) || isNaN(value)) return "";
+  if (maxDecimals < 0) maxDecimals = 10;
+
+  return parseFloat(value.toFixed(maxDecimals));
+}
+
 export function getRawValue(
   value: string,
   options: Pick<FormatOptions, "prefix" | "decimalSeparator" | "thousandsSeparator">,
@@ -26,6 +33,11 @@ export function getFormattedValue(value: string, options: FormatOptions): string
   const isValidMinFractionDigits = minFractionDigits <= maxFractionDigits;
   const actualMinFractionDigit = isValidMinFractionDigits ? minFractionDigits : maxFractionDigits;
 
+  const numericValue = parseFloat(value);
+  const fixedValue = getFixedNumber(numericValue, Math.max(maxFractionDigits, 10));
+
+  if (fixedValue === "") return prefix;
+
   const intlNumberOptions: Intl.NumberFormatOptions = {
     minimumFractionDigits: actualMinFractionDigit,
     maximumFractionDigits: maxFractionDigits,
@@ -38,14 +50,12 @@ export function getFormattedValue(value: string, options: FormatOptions): string
 
   const intlNumber = new Intl.NumberFormat("en-US", intlNumberOptions);
 
-  const formattedValue = intlNumber
-    .formatToParts(value as Intl.StringNumericLiteral)
-    .map((part) => {
-      if (part.type === "group") part.value = thousandsSeparator;
-      if (part.type === "decimal") part.value = decimalSeparator;
+  const formattedValue = intlNumber.formatToParts(fixedValue).map((part) => {
+    if (part.type === "group") part.value = thousandsSeparator;
+    if (part.type === "decimal") part.value = decimalSeparator;
 
-      return part;
-    });
+    return part;
+  });
 
   formattedValue.unshift({ value: prefix, type: "minusSign" });
 

package/ui.form-input-password/UInputPassword.vue

@@ -21,11 +21,23 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */
   "update:modelValue",
+
+  /**
+   * Triggers when the input gains focus.
+   * @property {FocusEvent} event
+   */
+  "focus",
+
+  /**
+   * Triggers when the input loses focus.
+   * @property {FocusEvent} event
+   */
+  "blur",
 ]);
 
 const elementId = props.id || useId();
@@ -51,6 +63,14 @@ function onClickShowPassword() {
   isShownPassword.value = !isShownPassword.value;
 }
 
+function onFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
+function onBlur(event: FocusEvent) {
+  emit("blur", event);
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -80,6 +100,8 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
     :disabled="disabled"
     v-bind="passwordInputAttrs"
     :data-test="getDataTest()"
+    @focus="onFocus"
+    @blur="onBlur"
   >
     <template #left>
       <!--

package/ui.form-listbox/UListbox.vue

@@ -49,6 +49,7 @@ const emit = defineEmits([
 
   /**
    * Triggers when the search input value changes.
+   * @property {string} value
    */
   "searchChange",