vueless 1.3.9-beta.9 → 1.4.0

package/ui.data-table/storybook/stories.ts

@@ -1,3 +1,5 @@
+import { ref } from "vue";
+
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 
 import {
@@ -18,6 +20,8 @@ import UBadge from "../../ui.text-badge/UBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
+import UInputSearch from "../../ui.form-input-search/UInputSearch.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import tooltip from "../../v.tooltip/vTooltip";
 import type { Row, Props, ColumnObject } from "../types";
@@ -1044,3 +1048,89 @@ VirtualScroll.parameters = {
     },
   },
 };
+
+export const VirtualSearch: StoryFn<UTableArgs> = (args: UTableArgs) => ({
+  components: { UTable, UInputSearch, UButton, URow, UText },
+  setup() {
+    const rows = generateNestedRows(100000);
+    const search = ref("");
+    const searchMatch = ref(-1);
+    const totalMatches = ref(0);
+
+    function onPrev() {
+      if (totalMatches.value === 0) return;
+
+      searchMatch.value = searchMatch.value <= 0 ? totalMatches.value - 1 : searchMatch.value - 1;
+    }
+
+    function onNext() {
+      if (totalMatches.value === 0) return;
+
+      searchMatch.value = searchMatch.value >= totalMatches.value - 1 ? 0 : searchMatch.value + 1;
+    }
+
+    return { args, rows, search, searchMatch, totalMatches, onPrev, onNext };
+  },
+  template: `
+    <URow align="stretch" gap="xs" class="mb-4">
+      <UInputSearch
+        v-model="search"
+        placeholder="Search in table..."
+        size="md"
+        @clear="searchMatch = -1"
+      >
+        <template #right>
+          <UText :label="searchMatch + 1 + ' / ' + totalMatches" :wrap="false" class="ml-1" />
+        </template>
+      </UInputSearch>
+
+      <UButton
+        square
+        size="sm"
+        title="Prev"
+        variant="soft"
+        icon="keyboard_arrow_up"
+        :disabled="totalMatches === 0"
+        @click="onPrev"
+      />
+
+      <UButton
+        square
+        size="sm"
+        title="Next"
+        variant="soft"
+        icon="keyboard_arrow_down"
+        :disabled="totalMatches === 0"
+        @click="onNext"
+      />
+    </URow>
+
+    <UTable
+      :columns="[
+        { key: 'orderId', label: 'Order ID', thClass: 'w-1/5' },
+        { key: 'customerName', label: 'Customer Name' },
+        { key: 'status', label: 'Status' },
+        { key: 'totalPrice', label: 'Total Price' },
+      ]"
+      :rows="rows"
+      compact
+      virtual-scroll
+      :row-height="45"
+      :buffer-size="10"
+      :search="search"
+      :search-match="searchMatch"
+      @search="totalMatches = $event"
+    />
+  `,
+});
+VirtualSearch.parameters = {
+  docs: {
+    description: {
+      story:
+        "Search functionality with virtual scrolling. " +
+        "Use `search` prop to pass a search string and `searchMatch` prop to highlight a specific match. " +
+        "The `@search` event emits the total number of matches found. " +
+        "Use Prev/Next buttons to navigate between matches.",
+    },
+  },
+};

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

@@ -430,6 +430,141 @@ describe("UTable.vue", () => {
 
       expect(tableRows.length).toBe(manyRows.length);
     });
+
+    it("Scroll Height – accepts scrollHeight prop", () => {
+      const scrollHeight = "500px";
+
+      const component = mountUTable(
+        getDefaultProps({
+          virtualScroll: true,
+          scrollHeight,
+        }),
+      );
+
+      expect(component.vm.$props.scrollHeight).toBe(scrollHeight);
+    });
+
+    it("Search – uses default empty search value", () => {
+      const component = mountUTable(getDefaultProps());
+
+      expect(component.vm.$props.search).toBe("");
+    });
+
+    it("Search – accepts search string", () => {
+      const searchQuery = "john";
+
+      const component = mountUTable(
+        getDefaultProps({
+          search: searchQuery,
+        }),
+      );
+
+      expect(component.vm.$props.search).toBe(searchQuery);
+    });
+
+    it("Search – emits search event with total matches count", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "doe" });
+      await nextTick();
+
+      expect(component.emitted("search")).toBeTruthy();
+      expect(component.emitted("search")![0][0]).toBe(1);
+    });
+
+    it("Search – emits search event with zero when no matches found", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      // First set a search that has matches
+      await component.setProps({ search: "doe" });
+      await nextTick();
+
+      // Then set a search with no matches
+      await component.setProps({ search: "nonexistent" });
+      await nextTick();
+
+      const emittedEvents = component.emitted("search");
+
+      expect(emittedEvents).toBeTruthy();
+      expect(emittedEvents![emittedEvents!.length - 1][0]).toBe(0);
+    });
+
+    it("Search – finds multiple matches across different rows", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "example" });
+      await nextTick();
+
+      const emittedEvents = component.emitted("search");
+
+      expect(emittedEvents).toBeTruthy();
+      expect(emittedEvents![0][0]).toBe(3); // All 3 rows have "example.com" in email
+    });
+
+    it("Search – is case insensitive", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "DOE" });
+      await nextTick();
+
+      const emittedEvents = component.emitted("search");
+
+      expect(emittedEvents).toBeTruthy();
+      expect(emittedEvents![0][0]).toBe(1);
+
+      // Clear search first to trigger a new event
+      await component.setProps({ search: "" });
+      await nextTick();
+
+      await component.setProps({ search: "doe" });
+      await nextTick();
+
+      expect(emittedEvents![emittedEvents!.length - 1][0]).toBe(1);
+    });
+
+    it("Search – finds partial matches", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "Jo" });
+      await nextTick();
+
+      expect(component.emitted("search")![0][0]).toBeGreaterThan(0);
+    });
+
+    it("Search Match – uses default searchMatch value", () => {
+      const component = mountUTable(getDefaultProps());
+
+      expect(component.vm.$props.searchMatch).toBe(-1);
+    });
+
+    it("Search Match – accepts searchMatch index", () => {
+      const searchMatchIndex = 2;
+
+      const component = mountUTable(
+        getDefaultProps({
+          search: "example",
+          searchMatch: searchMatchIndex,
+        }),
+      );
+
+      expect(component.vm.$props.searchMatch).toBe(searchMatchIndex);
+    });
+
+    it("Search Match – passes search props to table rows", async () => {
+      const searchQuery = "john";
+
+      const component = mountUTable(
+        getDefaultProps({
+          search: searchQuery,
+        }),
+      );
+
+      await nextTick();
+
+      const tableRow = component.getComponent(UTableRow);
+
+      expect(tableRow.props("search")).toBe(searchQuery);
+    });
   });
 
   describe("Slots", () => {
@@ -608,7 +743,7 @@ describe("UTable.vue", () => {
       await firstRow.trigger("click");
 
       expect(component.emitted("clickRow")).toBeTruthy();
-      expect(component.emitted("clickRow")![0][0]).toEqual(defaultRows[0]);
+      expect(component.emitted("clickRow")![0][0]).toMatchObject(defaultRows[0]);
     });
 
     it("Double Click Row – emits doubleClickRow event when row is double-clicked", async () => {
@@ -619,7 +754,7 @@ describe("UTable.vue", () => {
       await firstRow.trigger("dblclick");
 
       expect(component.emitted("doubleClickRow")).toBeTruthy();
-      expect(component.emitted("doubleClickRow")![0][0]).toEqual(defaultRows[0]);
+      expect(component.emitted("doubleClickRow")![0][0]).toMatchObject(defaultRows[0]);
     });
 
     it("Click Cell – emits clickCell event when cell is clicked", async () => {
@@ -630,22 +765,25 @@ describe("UTable.vue", () => {
       await firstCell.trigger("click");
 
       expect(component.emitted("clickCell")).toBeTruthy();
-      expect(component.emitted("clickCell")![0]).toEqual([
-        defaultRows[0].name,
-        defaultRows[0],
-        "name",
-      ]);
+      const emittedData = component.emitted("clickCell")![0];
+
+      expect(emittedData[0]).toBe(defaultRows[0].name);
+      expect(emittedData[1]).toMatchObject(defaultRows[0]);
+      expect(emittedData[2]).toBe("name");
     });
 
     it("Toggle Row Checkbox – emits update:selectedRows when row checkbox is clicked", async () => {
       const component = mountUTable(getDefaultProps({ selectable: true }));
 
-      const rowCheckbox = component.find("tbody tr").find("input[type='checkbox']");
+      const checkboxCell = component.find("tbody tr td[data-checkbox-id]");
 
-      await rowCheckbox.trigger("change");
+      await checkboxCell.trigger("click");
 
       expect(component.emitted("update:selectedRows")).toBeTruthy();
-      expect(component.emitted("update:selectedRows")![0][0]).toEqual([defaultRows[0]]);
+      const emittedRows = component.emitted("update:selectedRows")![0][0] as Row[];
+
+      expect(emittedRows).toHaveLength(1);
+      expect(emittedRows[0]).toMatchObject(defaultRows[0]);
     });
 
     it("Toggle Expand – emits row-expand and update:expandedRows when expand icon is clicked", async () => {
@@ -664,7 +802,7 @@ describe("UTable.vue", () => {
       await expandIcon.trigger("click");
 
       expect(component.emitted("row-expand")).toBeTruthy();
-      expect(component.emitted("row-expand")![0][0]).toEqual(expandableRow);
+      expect(component.emitted("row-expand")![0][0]).toMatchObject(expandableRow);
       expect(component.emitted("update:expandedRows")).toBeTruthy();
       expect(component.emitted("update:expandedRows")![0][0]).toEqual(["1"]);
     });
@@ -690,7 +828,7 @@ describe("UTable.vue", () => {
       await collapseIcon.trigger("click");
 
       expect(component.emitted("row-collapse")).toBeTruthy();
-      expect(component.emitted("row-collapse")![0][0]).toEqual(expandableRow);
+      expect(component.emitted("row-collapse")![0][0]).toMatchObject(expandableRow);
       expect(component.emitted("update:expandedRows")).toBeTruthy();
       expect(component.emitted("update:expandedRows")![0][0]).toEqual([]);
     });
@@ -698,20 +836,33 @@ describe("UTable.vue", () => {
     it("Multiple Row Selection – emits update:selectedRows with all selected rows", async () => {
       const component = mountUTable(getDefaultProps({ selectable: true }));
 
-      const tableRows = component.findAll("tbody tr");
-
       // Select first row
-      await tableRows[0].find("input[type='checkbox']").trigger("change");
+      let tableRows = component.findAll("tbody tr");
+
+      await tableRows[0].find("td[data-checkbox-id]").trigger("click");
+      await nextTick();
+
+      // Update props with the first selected row
+      const firstEmit = component.emitted("update:selectedRows")![0][0] as Row[];
+
+      await component.setProps({ selectedRows: firstEmit });
+      await nextTick();
+
+      // Re-query the DOM after props update
+      tableRows = component.findAll("tbody tr");
+
       // Select second row
-      await tableRows[1].find("input[type='checkbox']").trigger("change");
+      await tableRows[1].find("td[data-checkbox-id]").trigger("click");
+      await nextTick();
 
       const emittedEvents = component.emitted("update:selectedRows");
 
       expect(emittedEvents).toBeTruthy();
-      expect(emittedEvents![emittedEvents!.length - 1][0]).toEqual([
-        defaultRows[0],
-        defaultRows[1],
-      ]);
+      const emittedRows = emittedEvents![emittedEvents!.length - 1][0] as Row[];
+
+      expect(emittedRows).toHaveLength(2);
+      expect(emittedRows[0]).toMatchObject(defaultRows[0]);
+      expect(emittedRows[1]).toMatchObject(defaultRows[1]);
     });
 
     it("Nested Row Expansion – emits update:expandedRows for nested rows", async () => {
@@ -765,5 +916,151 @@ describe("UTable.vue", () => {
       expect(component.emitted("clickRow")).toBeFalsy();
       expect(component.emitted("doubleClickRow")).toBeFalsy();
     });
+
+    it("Search Event – emits when search prop changes", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "doe" });
+      await nextTick();
+
+      expect(component.emitted("search")).toBeTruthy();
+      expect(component.emitted("search")![0][0]).toBe(1);
+    });
+
+    it("Search Event – emits updated count when search changes", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "doe" });
+      await nextTick();
+
+      const initialCount = component.emitted("search")![0][0];
+
+      await component.setProps({ search: "example" });
+      await nextTick();
+
+      const updatedCount = component.emitted("search")![1][0];
+
+      expect(updatedCount).toBeGreaterThan(initialCount as number);
+    });
+
+    it("Search Event – emits zero when search is cleared", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      await component.setProps({ search: "doe" });
+      await nextTick();
+
+      await component.setProps({ search: "" });
+      await nextTick();
+
+      const emittedEvents = component.emitted("search");
+
+      expect(emittedEvents![emittedEvents!.length - 1][0]).toBe(0);
+    });
+
+    it("Search Event – counts all occurrences in a single cell", async () => {
+      const rowsWithDuplicates: Row[] = [
+        {
+          id: "1",
+          name: "Test Test Test",
+          email: "test@example.com",
+          role: "User",
+        },
+      ];
+
+      const component = mountUTable(getDefaultProps({ rows: rowsWithDuplicates }));
+
+      await component.setProps({ search: "test" });
+      await nextTick();
+
+      expect(component.emitted("search")![0][0]).toBe(4);
+    });
+  });
+
+  describe("Virtual Scroll with Search", () => {
+    it("Virtual Scroll with Search – renders only visible rows with search", async () => {
+      const manyRows = Array.from({ length: 100 }, (_, i) => ({
+        id: String(i + 1),
+        name: `User ${i + 1}`,
+        email: `user${i + 1}@example.com`,
+        role: i % 2 === 0 ? "Admin" : "User",
+      }));
+
+      const component = mountUTable(
+        getDefaultProps({
+          rows: manyRows,
+          virtualScroll: true,
+          rowHeight: 40,
+          scrollHeight: "400px",
+        }),
+      );
+
+      await component.setProps({ search: "Admin" });
+      await nextTick();
+
+      const tableRows = component.findAllComponents(UTableRow);
+
+      expect(tableRows.length).toBeLessThan(manyRows.length);
+      expect(component.emitted("search")).toBeTruthy();
+    });
+
+    it("Virtual Scroll with Search – passes search match columns to rows", async () => {
+      const component = mountUTable(
+        getDefaultProps({
+          virtualScroll: true,
+          search: "john",
+        }),
+      );
+
+      await nextTick();
+
+      const tableRow = component.getComponent(UTableRow);
+
+      expect(tableRow.props("search")).toBe("john");
+      expect(tableRow.props("searchMatchColumns")).toBeDefined();
+    });
+
+    it("Virtual Scroll with Search – handles searchMatch prop", async () => {
+      const manyRows = Array.from({ length: 50 }, (_, i) => ({
+        id: String(i + 1),
+        name: `User ${i + 1}`,
+        email: `user${i + 1}@example.com`,
+        role: "User",
+      }));
+
+      const component = mountUTable(
+        getDefaultProps({
+          rows: manyRows,
+          virtualScroll: true,
+          search: "user",
+          searchMatch: 0,
+        }),
+      );
+
+      await nextTick();
+
+      expect(component.vm.$props.searchMatch).toBe(0);
+    });
+
+    it("Virtual Scroll with Search – emits search event with virtual scroll enabled", async () => {
+      const manyRows = Array.from({ length: 100 }, (_, i) => ({
+        id: String(i + 1),
+        name: `User ${i + 1}`,
+        email: `user${i + 1}@example.com`,
+        role: "User",
+      }));
+
+      const component = mountUTable(
+        getDefaultProps({
+          rows: manyRows,
+          virtualScroll: true,
+        }),
+      );
+
+      await component.setProps({ search: "user" });
+      await nextTick();
+
+      expect(component.emitted("search")).toBeTruthy();
+      expect(component.emitted("search")![0][0]).toBeGreaterThan(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");
+    });
   });
 });