vueless 1.2.8 → 1.2.10-beta.0

package/ui.form-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border rounded-medium border-default outline-transparent
+      border border-solid rounded-medium border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-input/tests/UInput.test.ts

@@ -318,7 +318,7 @@ describe("UInput.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -336,7 +336,7 @@ describe("UInput.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

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

@@ -10,7 +10,7 @@ export default /*tw*/ {
     },
   },
   counterInput: {
-    base: "{UInputNumber} w-fit",
+    base: "{UInputNumber} w-inherit",
     numberInput: {
       base: "{UInput}",
       input: "text-center",
@@ -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-file/tests/UInputFile.test.ts

@@ -269,7 +269,7 @@ describe("UInputFile.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -287,7 +287,7 @@ describe("UInputFile.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Custom ${defaultLabel}`);
     });

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",
 ]);
@@ -97,19 +104,23 @@ watch(
 );
 
 onMounted(() => {
-  if (localValue.value) {
+  if (localValue.value || localValue.value === 0) {
     setValue(stringLocalValue.value);
   }
 });
 
 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-label/ULabel.vue

@@ -33,6 +33,10 @@ const isHorizontalPlacement = computed(() => {
   return props.align === PLACEMENT.left || props.align === PLACEMENT.right;
 });
 
+const tag = computed(() => {
+  return props.for ? "label" : "div";
+});
+
 const isTopWithDescPlacement = computed(() => {
   return props.align === PLACEMENT.topWithDesc;
 });
@@ -95,7 +99,8 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
 
     <!-- `v-bind` isn't assigned, because the div is system -->
     <div v-if="label || hasSlotContent(slots['label'], { label }) || error || description">
-      <label
+      <component
+        :is="tag"
         v-if="label || hasSlotContent(slots['label'], { label })"
         ref="label"
         :for="props.for"
@@ -110,7 +115,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         <slot name="label" :label="label">
           {{ label }}
         </slot>
-      </label>
+      </component>
 
       <div
         v-if="isShownError"
@@ -132,7 +137,8 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
   </div>
 
   <div v-else ref="wrapper" v-bind="wrapperAttrs">
-    <label
+    <component
+      :is="tag"
       v-if="label || hasSlotContent(slots['label'], { label })"
       v-bind="labelAttrs"
       ref="label"
@@ -147,7 +153,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <slot name="label" :label="label">
         {{ label }}
       </slot>
-    </label>
+    </component>
 
     <div v-bind="contentAttrs" :data-test="getDataTest('content')">
       <!-- @slot Use it to add label content. -->

package/ui.form-label/tests/ULabel.test.ts

@@ -16,7 +16,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").text()).toContain(label);
+      expect(component.find("[vl-key='label']").text()).toContain(label);
     });
 
     it("For – applied to label element", () => {
@@ -29,7 +29,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("for")).toBe(forId);
+      expect(component.find("[vl-key='label']").attributes("for")).toBe(forId);
     });
 
     it("For – applies interactive classes when true", () => {
@@ -42,7 +42,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("class")).toContain(interactiveClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).toContain(interactiveClasses);
     });
 
     it("Description – description is rendered with provided text", () => {
@@ -133,7 +133,7 @@ describe("ULabel.vue", () => {
           },
         });
 
-        expect(component.get("label").attributes("class")).toContain(expectedClass);
+        expect(component.find("[vl-key='label']").attributes("class")).toContain(expectedClass);
       });
     });
 
@@ -148,7 +148,7 @@ describe("ULabel.vue", () => {
       });
 
       expect(component.attributes("class")).toContain(disabledClasses);
-      expect(component.get("label").attributes("class")).toContain(disabledClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).toContain(disabledClasses);
     });
 
     it("Disabled – does not apply disabled class when false", () => {
@@ -162,7 +162,7 @@ describe("ULabel.vue", () => {
       });
 
       expect(component.attributes("class")).not.toContain(disabledClasses);
-      expect(component.get("label").attributes("class")).not.toContain(disabledClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain(disabledClasses);
     });
 
     it("Disabled – interactive class is not applied when disabled true", () => {
@@ -176,7 +176,9 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("class")).not.toContain(interactiveClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain(
+        interactiveClasses,
+      );
     });
 
     it("Disabled – topInside label doesn't have focus styles disabled", () => {
@@ -190,7 +192,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("class")).not.toContain(focusClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain(focusClasses);
     });
 
     it("Disabled – error is not rendered when disabled is true", () => {
@@ -294,7 +296,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      const labelElement = component.get("label");
+      const labelElement = component.find("[vl-key='label']");
 
       expect(labelElement.text()).toBe(slotContent);
       expect(labelElement.text()).not.toContain(defaultLabel);
@@ -313,7 +315,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").text()).toBe(slotContent);
+      expect(component.find("[vl-key='label']").text()).toBe(slotContent);
     });
 
     it("Bottom – renders content from bottom slot", () => {
@@ -337,7 +339,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      const labelElement = component.get("label");
+      const labelElement = component.find("[vl-key='label']");
 
       await labelElement.trigger("click");
 
@@ -346,7 +348,7 @@ describe("ULabel.vue", () => {
   });
 
   describe("Exposed properties", () => {
-    it("Exposes label element ref", () => {
+    it("Exposes label element ref as a div", () => {
       const defaultLabel = "Label";
 
       const component = mount(ULabel, {
@@ -355,6 +357,21 @@ describe("ULabel.vue", () => {
         },
       });
 
+      expect(component.vm.labelElement).toBeDefined();
+      expect(component.vm.labelElement!.tagName).toBe("DIV");
+      expect(component.vm.labelElement!.textContent).toBe(defaultLabel);
+    });
+
+    it("Exposes label element ref as a label", () => {
+      const defaultLabel = "Label";
+
+      const component = mount(ULabel, {
+        props: {
+          label: defaultLabel,
+          for: "test-id",
+        },
+      });
+
       expect(component.vm.labelElement).toBeDefined();
       expect(component.vm.labelElement!.tagName).toBe("LABEL");
       expect(component.vm.labelElement!.textContent).toBe(defaultLabel);

package/ui.form-listbox/UListbox.vue

@@ -49,6 +49,7 @@ const emit = defineEmits([
 
   /**
    * Triggers when the search input value changes.
+   * @property {string} value
    */
   "searchChange",
 
@@ -56,6 +57,12 @@ const emit = defineEmits([
    * Triggers when the search input loses focus.
    */
   "searchBlur",
+
+  /**
+   * Triggers when the search v-model updates.
+   * @property {string} query
+   */
+  "update:search",
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
@@ -66,7 +73,7 @@ const addOptionRef = useTemplateRef<HTMLLIElement>("add-option");
 
 const wrapperMaxHeight = ref("");
 
-const search = ref("");
+const localSearch = ref(props.search ?? "");
 
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
   usePointer(props.options, optionsRef, wrapperRef);
@@ -79,6 +86,15 @@ const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>
   props?.config?.i18n,
 );
 
+const searchModel = computed({
+  get: () => localSearch.value,
+  set: (value: string) => {
+    emit("update:search", value);
+
+    localSearch.value = value ?? "";
+  },
+});
+
 const selectedValue = computed({
   get: () => {
     if (props.multiple && !Array.isArray(props.modelValue)) {
@@ -87,11 +103,7 @@ const selectedValue = computed({
 
     return props.modelValue;
   },
-  set: (value) => {
-    if (search.value) search.value = "";
-
-    emit("update:modelValue", value);
-  },
+  set: (value) => emit("update:modelValue", value),
 });
 
 const addOptionKeyCombination = computed(() => {
@@ -99,7 +111,7 @@ const addOptionKeyCombination = computed(() => {
 });
 
 const filteredOptions = computed(() => {
-  const normalizedSearch = search.value.toLowerCase().trim();
+  const normalizedSearch = searchModel.value.toLowerCase().trim();
 
   let options = [...props.options];
 
@@ -117,7 +129,7 @@ const filteredOptions = computed(() => {
 });
 
 watch(
-  () => [props.options, props.size, props.visibleOptions, props.searchable],
+  () => [props.options, props.size, props.visibleOptions, props.searchable, searchModel.value],
   () => {
     nextTick(() => {
       const options = [
@@ -418,7 +430,7 @@ const {
       v-if="searchable"
       :id="elementId"
       ref="listbox-input"
-      v-model="search"
+      v-model="searchModel"
       :placeholder="localeMessages.search"
       :size="size"
       :debounce="debounce"

package/ui.form-listbox/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       my-2 p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
-      rounded-medium border border-default bg-default
+      rounded-medium border border-solid border-default bg-default
       overflow-auto [-webkit-overflow-scrolling:touch]
       focus:outline-hidden
     `,