vueless 1.3.9-beta.9 → 1.4.0

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;
 }
@@ -131,6 +137,21 @@ export interface Props {
    */
   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.
    */
@@ -155,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;
@@ -169,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;