vueless 1.3.9-beta.8 → 1.4.0

package/ui.data-table/tests/UTableRow.test.ts

@@ -1,6 +1,6 @@
 import { flushPromises, mount } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
-import { ref } from "vue";
+import { ref, nextTick } from "vue";
 
 import UTableRow from "../UTableRow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -36,6 +36,10 @@ describe("UTableRow.vue", () => {
     bodyRowAttrs: ref({ class: "row-base" }),
     bodyCellStickyLeftAttrs: ref({ class: "sticky-left" }),
     bodyCellStickyRightAttrs: ref({ class: "sticky-right" }),
+    bodyCellSearchMatchAttrs: ref({ class: "search-match" }),
+    bodyCellSearchMatchTextAttrs: ref({ class: "search-match-text" }),
+    bodyCellSearchMatchActiveAttrs: ref({ class: "search-match-active" }),
+    bodyCellSearchMatchTextActiveAttrs: ref({ class: "search-match-active-text" }),
   };
 
   const defaultConfig = {
@@ -64,6 +68,7 @@ describe("UTableRow.vue", () => {
       config: defaultConfig,
       isChecked: false,
       isExpanded: false,
+      isVisible: true,
       columnPositions,
       ...overrides,
     };
@@ -260,14 +265,17 @@ describe("UTableRow.vue", () => {
         }),
       });
 
-      const icon = component.findComponent(UIcon);
+      let icon = component.findComponent(UIcon);
 
       expect(icon.props("name")).toBe(defaultConfig.defaults.expandIcon);
 
-      component.setProps({ isExpanded: true });
-
+      await component.setProps({ isExpanded: true });
+      await nextTick();
       await flushPromises();
 
+      // Re-query the icon after props update
+      icon = component.findComponent(UIcon);
+
       expect(icon.props("name")).toBe(defaultConfig.defaults.collapseIcon);
     });
 
@@ -286,106 +294,8 @@ describe("UTableRow.vue", () => {
     });
   });
 
-  describe("Events", () => {
-    it("Click – emits click event when row is clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      await component.get("tr").trigger("click");
-
-      expect(component.emitted("click")).toBeTruthy();
-      expect(component.emitted("click")![0][0]).toEqual(defaultRow);
-    });
-
-    it("Double Click – emits dblclick event when row is double-clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      await component.get("tr").trigger("dblclick");
-
-      expect(component.emitted("dblclick")).toBeTruthy();
-      expect(component.emitted("dblclick")![0][0]).toEqual(defaultRow);
-    });
-
-    it("Click Cell – emits clickCell event when cell is clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      const firstCell = component.find("td");
-
-      await firstCell.trigger("click");
-
-      expect(component.emitted("clickCell")).toBeTruthy();
-      expect(component.emitted("clickCell")![0]).toEqual(["John Doe", defaultRow, "name"]);
-    });
-
-    it("Toggle Expand – emits toggleExpand event when expand icon is clicked", async () => {
-      const expandableRow: FlatRow = {
-        ...defaultRow,
-        row: [{ id: "2", name: "Child", nestedLeveL: 1 }],
-      };
-
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ row: expandableRow }),
-      });
-
-      const expandIcon = component.find("[data-row-toggle-icon='1']");
-
-      await expandIcon.trigger("click");
-
-      expect(component.emitted("toggleExpand")).toBeTruthy();
-      expect(component.emitted("toggleExpand")![0][0]).toEqual(expandableRow);
-    });
-
-    it("Toggle Checkbox – emits toggleCheckbox event when checkbox is changed", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ selectable: true }),
-      });
-
-      const checkbox = component.getComponent(UCheckbox);
-
-      await checkbox.vm.$emit("input", defaultRow);
-
-      expect(component.emitted("toggleCheckbox")).toBeTruthy();
-      expect(component.emitted("toggleCheckbox")![0][0]).toEqual(defaultRow);
-    });
-
-    it("Checkbox Cell – prevents row click events when checkbox cell is clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ selectable: true }),
-      });
-
-      const checkboxCell = component.find("td");
-
-      await checkboxCell.trigger("click");
-      await checkboxCell.trigger("dblclick");
-
-      expect(component.emitted("click")).toBeFalsy();
-      expect(component.emitted("dblclick")).toBeFalsy();
-    });
-
-    it("Expand Icon – prevents row click events when expand icon is clicked", async () => {
-      const expandableRow: FlatRow = {
-        ...defaultRow,
-        row: [{ id: "2", name: "Child", nestedLeveL: 1 }],
-      };
-
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ row: expandableRow }),
-      });
-
-      const expandIcon = component.find("[data-row-toggle-icon='1']");
-
-      await expandIcon.trigger("click");
-      await expandIcon.trigger("dblclick");
-
-      expect(component.emitted("click")).toBeFalsy();
-      expect(component.emitted("dblclick")).toBeFalsy();
-    });
-  });
+  // Events are now handled by UTable via event delegation
+  // UTableRow no longer emits click, dblclick, clickCell, toggleExpand, or toggleCheckbox events
 
   describe("Slots", () => {
     it("Cell Slot – renders custom content from cell slot", () => {
@@ -550,5 +460,26 @@ describe("UTableRow.vue", () => {
 
       expect(iconWrapper.exists()).toBe(true);
     });
+
+    it("isVisible – shows row when isVisible is true", () => {
+      const component = mount(UTableRow, {
+        props: getDefaultProps({ isVisible: true }),
+      });
+
+      const row = component.find("tr");
+      const style = row.attributes("style") || "";
+
+      expect(style).not.toContain("display: none");
+    });
+
+    it("isVisible – hides row when isVisible is false", () => {
+      const component = mount(UTableRow, {
+        props: getDefaultProps({ isVisible: false }),
+      });
+
+      const row = component.find("tr");
+
+      expect(row.attributes("style")).toContain("display: none");
+    });
   });
 });

package/ui.data-table/types.ts

@@ -16,6 +16,12 @@ export type RowId = string | number;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Cell = CellObject & any;
 
+export interface SearchMatch {
+  rowId: RowId;
+  columnKey: string;
+  indices: number[];
+}
+
 export interface RowData {
   [key: string]: Cell;
 }
@@ -111,6 +117,41 @@ export interface Props {
    */
   loading?: boolean;
 
+  /**
+   * Enable virtual scrolling for large datasets.
+   */
+  virtualScroll?: boolean;
+
+  /**
+   * Fixed row height in pixels (used for virtual scroll calculations).
+   */
+  rowHeight?: number;
+
+  /**
+   * Height of the scroll container (CSS value).
+   */
+  scrollHeight?: string;
+
+  /**
+   * Number of extra rows to render above/below viewport.
+   */
+  bufferSize?: number;
+
+  /**
+   * Search string to highlight in table cells.
+   */
+  search?: string;
+
+  /**
+   * Index of the current search match to highlight (0-based).
+   */
+  searchMatch?: number;
+
+  /**
+   * Enable text ellipsis for table cells (renders div wrapper for overflow handling).
+   */
+  textEllipsis?: boolean;
+
   /**
    * Component config object.
    */
@@ -135,11 +176,20 @@ export interface UTableRowAttrs {
   bodyRowAttrs: Ref<UnknownObject>;
   bodyCellStickyLeftAttrs: Ref<UnknownObject>;
   bodyCellStickyRightAttrs: Ref<UnknownObject>;
+  bodyCellSearchMatchAttrs: Ref<UnknownObject>;
+  bodyCellSearchMatchTextAttrs: Ref<UnknownObject>;
+  bodyCellSearchMatchActiveAttrs: Ref<UnknownObject>;
+  bodyCellSearchMatchTextActiveAttrs: Ref<UnknownObject>;
 }
 
 export interface UTableRowProps {
   row: FlatRow;
   columns: ColumnObject[];
+  /**
+   * Row index in the parent table (used for slot params).
+   * Optional to keep UTableRow mountable standalone in tests/internal usage.
+   */
+  rowIndex?: number;
   emptyCellLabel?: string;
   selectable: boolean;
   nestedLevel: number;
@@ -149,5 +199,12 @@ export interface UTableRowProps {
   config: Config;
   isChecked: boolean;
   isExpanded: boolean;
+  isVisible: boolean;
   columnPositions: Map<string, number>;
+  search?: string;
+  searchMatchColumns?: Set<string>;
+  activeSearchMatchColumn?: string;
+  textEllipsis?: boolean;
+  onToggleExpand?: (row: Row) => void;
+  onToggleCheckbox?: (row: Row) => void;
 }

package/ui.data-table/utilTable.ts

@@ -7,24 +7,30 @@ export function normalizeColumns(columns: Column[]): ColumnObject[] {
 }
 
 export function mapRowColumns(row: Row, columns: ColumnObject[]): RowData {
-  const filteredRow = Object.entries(row).filter((item) => {
-    return columns.some((column) => column.key === item[0] && column.isShown !== false);
-  });
+  const visibleKeys = new Set(columns.filter((col) => col.isShown !== false).map((col) => col.key));
 
-  return Object.fromEntries(filteredRow) as RowData;
+  const result: RowData = {};
+
+  for (const key of Object.keys(row)) {
+    if (visibleKeys.has(key)) {
+      result[key] = row[key];
+    }
+  }
+
+  return result;
 }
 
 export function getFlatRows(tableRows: Row[]) {
   const rows: FlatRow[] = [];
 
   function addRow(row: Row, nestedLevel: number, parentRowId?: string | number) {
-    if (parentRowId) {
-      row.parentRowId = parentRowId;
-    }
-
-    row.nestedLevel = nestedLevel;
+    const flatRow: FlatRow = {
+      ...row,
+      nestedLevel,
+      ...(parentRowId !== undefined ? { parentRowId } : {}),
+    };
 
-    rows.push(row as FlatRow);
+    rows.push(flatRow);
 
     if (row.row && !Array.isArray(row.row)) {
       addRow(row.row, nestedLevel + 1, row.id);

package/ui.form-checkbox/UCheckbox.vue

@@ -121,10 +121,6 @@ function onChange() {
   emit("input", newModelValue);
 }
 
-function onIconClick() {
-  document.getElementById(elementId)?.click();
-}
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -185,10 +181,10 @@ const {
       @change="onChange"
     />
 
-    <div
+    <label
       v-if="isChecked"
       v-bind="partial ? partiallyCheckedAttrs : checkedAttrs"
-      @click="onIconClick"
+      :for="elementId"
     >
       <UIcon
         v-if="partial"
@@ -198,7 +194,7 @@ const {
       />
 
       <UIcon v-else :name="config.defaults.checkedIcon" color="inherit" v-bind="checkedIconAttrs" />
-    </div>
+    </label>
 
     <template #bottom>
       <!-- @slot Use it to add something below the checkbox. -->

package/ui.text-notify/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   bodyWarning: "{>body} bg-radial-[circle_at_0%_50%] from-warning/25 from-2.17% to-transparent",
   bodyError: "{>body} bg-radial-[circle_at_0%_50%] from-error/25 from-2.17% to-transparent",
   bodyInfo: "{>body} bg-radial-[circle_at_0%_50%] from-info/25 from-2.17% to-transparent",
-  content: "w-full flex flex-col max-w-full text-medium text-inverted",
+  content: "w-full flex flex-col max-w-full text-medium text-inverted break-all text-wrap",
   label: "mb-0.5 font-medium",
   description: "wrap-break-word font-normal",
   statusIcon: "{UIcon} brightness-125 dark:brightness-75",

package/ui.text-number/UNumber.vue

@@ -48,6 +48,38 @@ const preparedNumber = computed(() => {
   );
 });
 
+const formattedNumber = computed(() => {
+  let result = "";
+
+  if (props.currencyAlign === "left" && props.currency) {
+    result += props.currency;
+
+    if (props.currencySpace) {
+      result += " ";
+    }
+  }
+
+  if (props.value) {
+    result += mathSign.value;
+  }
+
+  result += preparedNumber.value.integer;
+
+  if (props.maxFractionDigits > 0) {
+    result += preparedNumber.value.decimalSeparator + preparedNumber.value.fraction;
+  }
+
+  if (props.currencyAlign === "right" && props.currency) {
+    if (props.currencySpace) {
+      result += " ";
+    }
+
+    result += props.currency;
+  }
+
+  return result;
+});
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
@@ -76,10 +108,12 @@ const {
     <!-- @slot Use it to add something before the number. -->
     <slot name="left" />
 
-    <div v-bind="numberAttrs" :data-test="getDataTest()">
+    <template v-if="raw">{{ formattedNumber }}</template>
+
+    <div v-else v-bind="numberAttrs" :data-test="getDataTest()">
       <span v-if="currencyAlign === 'left' && currency" v-bind="currencyAttrs" v-text="currency" />
 
-      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
+      <span v-if="value && mathSign" v-bind="mathSignAttrs" v-text="mathSign" />
 
       <span v-bind="integerAttrs" v-text="preparedNumber.integer" />
 

package/ui.text-number/config.ts

@@ -31,6 +31,7 @@ export default /*tw*/ {
     align: "left",
     currencyAlign: "right",
     currencySpace: false,
+    raw: false,
     minFractionDigits: 0,
     maxFractionDigits: 2,
     decimalSeparator: ",",

package/ui.text-number/storybook/stories.ts

@@ -92,6 +92,17 @@ Sizes.args = { enum: "size" };
 export const CurrencyAlign = EnumTemplate.bind({});
 CurrencyAlign.args = { enum: "currencyAlign", currency: "USD", currencySpace: true };
 
+export const Raw = DefaultTemplate.bind({});
+Raw.args = { raw: true, currency: "USD", currencySpace: true };
+Raw.parameters = {
+  docs: {
+    description: {
+      story:
+        "When `raw` is enabled, the number is displayed without formatting and html tags, showing only the raw value.",
+    },
+  },
+};
+
 export const LimitFractionDigits: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
   components: { UNumber, UCol },
   setup: () => ({ args }),

package/ui.text-number/tests/UNumber.test.ts

@@ -192,6 +192,96 @@ describe("UNumber.vue", () => {
       });
     });
 
+    it("Raw – renders formatted number as plain text without HTML elements when raw is true", () => {
+      const component = mount(UNumber, {
+        props: {
+          value,
+          raw: true,
+        },
+      });
+
+      // Should render plain text without the number div structure
+      expect(component.find("[vl-key='number']").exists()).toBe(false);
+      expect(component.text()).toContain("1 234,56");
+    });
+
+    it("Raw – renders with currency when raw is true and currency is set", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "left",
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("$1 234,56");
+    });
+
+    it("Raw – renders with currency and space when raw is true, currency is set, and currencySpace is true", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "left",
+          currencySpace: true,
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("$ 1 234,56");
+    });
+
+    it("Raw – renders with currency on right when raw is true and currencyAlign is right", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "right",
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("1 234,56$");
+    });
+
+    // eslint-disable-next-line vue/max-len
+    it("Raw – renders with currency on right and space when raw is true, currencyAlign is right, and currencySpace is true", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "right",
+          currencySpace: true,
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("1 234,56 $");
+    });
+
+    it("Raw – renders with sign when raw is true and sign is set", () => {
+      const testNegativeValue = -123;
+
+      const component = mount(UNumber, {
+        props: {
+          value: testNegativeValue,
+          sign: MATH_SIGN_TYPE.auto as Props["sign"],
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toContain(MATH_SIGN.MINUS);
+    });
+
     it("MinFractionDigits – adds zeros to meet the minimum fraction digits requirement", () => {
       const value = 123;
       const minFractionDigits = 2;

package/ui.text-number/types.ts

@@ -48,6 +48,11 @@ export interface Props {
    */
   currencySpace?: boolean;
 
+  /**
+   * Show formatted number as plain text without HTML elements.
+   */
+  raw?: boolean;
+
   /**
    * Minimal number of signs after the decimal separator (fractional part of a number).
    */

package/utils/node/mergeConfigs.d.ts

@@ -4,10 +4,10 @@ export function createMergeConfigs(cx: any): ({ defaultConfig, globalConfig, pro
     propsConfig: any;
     config?: {} | undefined;
     isVariants?: boolean | undefined;
-}) => {};
+}) => any;
 export function createGetMergedConfig(cx: any): ({ defaultConfig, globalConfig, propsConfig, unstyled }: {
     defaultConfig: any;
     globalConfig: any;
     propsConfig: any;
     unstyled: any;
-}) => {};
+}) => any;