vueless 0.0.497 → 0.0.499

package/ui.data-table/storybook/{stories.js → stories.ts}

@@ -1,13 +1,23 @@
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 import { getRandomId } from "../../utils/ui.ts";
 
-import UTable from "../../ui.data-table/UTable.vue";
+import UTable from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UMoney from "../../ui.text-money/UMoney.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Row, UTableProps } from "../types.ts";
+
+interface UTableArgs extends UTableProps {
+  slotTemplate?: string;
+  enum: "size";
+  numberOfRows: number;
+  row: Row | typeof getRow | typeof getNestedRow | typeof getNestedContentRow;
+}
+
 const SHORT_STORY_PARAMETERS = {
   docs: {
     story: {
@@ -45,7 +55,7 @@ export default {
     row: getRow,
     numberOfRows: 5,
   },
-};
+} as Meta;
 
 function getDateDividerRow() {
   return {
@@ -128,7 +138,51 @@ function getRow() {
   };
 }
 
-const DefaultTemplate = (args) => ({
+function getNestedContentRow(index: number) {
+  if (index === 0) {
+    return {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: "Row with nested content",
+      key_2: "Basic data",
+      key_3: "More info",
+      nestedData: {
+        isChecked: false,
+        isHidden: true,
+        rows: [
+          {
+            id: getRandomId(),
+            key_1: "Detail 1A",
+            key_2: "Info 1B",
+            key_3: "Data 1C",
+          },
+          {
+            id: getRandomId(),
+            key_1: "Detail 2A",
+            key_2: "Info 2B",
+            key_3: "Data 2C",
+          },
+          {
+            id: getRandomId(),
+            key_1: "Detail 3A",
+            key_2: "Info 3B",
+            key_3: "Data 3C",
+          },
+        ],
+      },
+    };
+  } else {
+    return {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: `Regular row ${index}`,
+      key_2: "Standard info",
+      key_3: "Basic data",
+    };
+  }
+}
+
+const DefaultTemplate: StoryFn<UTableArgs> = (args: UTableArgs) => ({
   components: { UTable, UButton, ULink, UMoney, UBadge, URow },
   setup() {
     const slots = getSlotNames(UTable.__name);
@@ -140,12 +194,12 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       :rows="args.rows || itemsData"
     >
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UTable>
   `,
   computed: {
     itemsData() {
-      let rows = [];
+      const rows = [];
 
       if (typeof args.row === "function") {
         for (let i = 0; i < args.numberOfRows; i++) {
@@ -160,7 +214,7 @@ const DefaultTemplate = (args) => ({
   },
 });
 
-const EmptyTemplate = (args) => ({
+const EmptyTemplate: StoryFn<UTableArgs> = (args: UTableArgs) => ({
   components: { UTable },
   setup() {
     const slots = getSlotNames(UTable.__name);
@@ -185,49 +239,7 @@ NestedContent.args = {
     { key: "key_2", label: "Title 2" },
     { key: "key_3", label: "Title 3" },
   ],
-  row: (index) => {
-    if (index === 0) {
-      return {
-        id: getRandomId(),
-        isChecked: false,
-        key_1: "Row with nested content",
-        key_2: "Basic data",
-        key_3: "More info",
-        nestedData: {
-          isChecked: false,
-          isHidden: true,
-          rows: [
-            {
-              id: getRandomId(),
-              key_1: "Detail 1A",
-              key_2: "Info 1B",
-              key_3: "Data 1C",
-            },
-            {
-              id: getRandomId(),
-              key_1: "Detail 2A",
-              key_2: "Info 2B",
-              key_3: "Data 2C",
-            },
-            {
-              id: getRandomId(),
-              key_1: "Detail 3A",
-              key_2: "Info 3B",
-              key_3: "Data 3C",
-            },
-          ],
-        },
-      };
-    } else {
-      return {
-        id: getRandomId(),
-        isChecked: false,
-        key_1: `Regular row ${index}`,
-        key_2: "Standard info",
-        key_3: "Basic data",
-      };
-    }
-  },
+  row: getNestedContentRow,
   slotTemplate: `
     <template #nested-content="{ row }">
       <div class="p-4 bg-gray-100">
@@ -313,7 +325,7 @@ DateDivider.args = { dateDivider: true, row: getDateDividerRow };
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
 DateDividerCustomLabel.args = {
   rows: Array(10)
-    .fill()
+    .fill({})
     .map(() => getDateDividerRow()),
   dateDivider: [{ date: new Date().toString(), label: "Custom label for specific date" }],
 };
@@ -407,6 +419,7 @@ CellSlots.args = {
     { key: "tags", label: "tags" },
   ],
   row: {
+    id: getRandomId(),
     link: "some link",
     money: {
       sum: 10,
@@ -419,6 +432,7 @@ CellSlots.args = {
     },
     row: [
       {
+        id: getRandomId(),
         isHidden: false,
         link: "some link",
         money: {
@@ -432,6 +446,7 @@ CellSlots.args = {
         },
       },
       {
+        id: getRandomId(),
         isHidden: false,
         link: "some link",
         money: {

package/ui.data-table/types.ts

@@ -0,0 +1,142 @@
+import defaultConfig from "./config.ts";
+
+import type { UnknownObject } from "../types.ts";
+import type { Ref } from "vue";
+
+type RowKeys =
+  | number
+  | string
+  | boolean
+  | undefined
+  | Date
+  | Row
+  | Row[]
+  | string
+  | ((row: Row) => string);
+
+export interface CellObject {
+  contentClasses?: string | ((value: unknown | string, row: Row) => string);
+  class?: string | ((value: unknown | string, row: Row) => string);
+  [key: string]: unknown | string;
+}
+
+export type RowId = string | number;
+export type Cell = CellObject | string;
+
+export interface RowData {
+  [key: string]: Cell;
+}
+
+export interface DateDivider {
+  date: Date | string;
+  label?: string;
+}
+
+export interface Row {
+  id: RowId;
+  isChecked?: boolean;
+  isHidden?: boolean;
+  rowDate?: string | Date;
+  row?: Row | Row[];
+  nestedData?: Row;
+  class?: string | ((row: Row) => string);
+  [key: string]: Cell | RowKeys;
+}
+
+export interface ColumnObject {
+  key: string;
+  label?: string;
+  isHidden?: string;
+  class?: string | ((value: unknown | string, row: Row) => string);
+  tdClass?: string;
+  thClass?: string;
+}
+
+export type Column = ColumnObject | string;
+export type Config = Partial<typeof defaultConfig>;
+
+export interface RowScopedProps {
+  value: unknown | string | number;
+  row: Row;
+}
+
+export interface UTableProps {
+  /**
+   * Table columns (headers).
+   */
+  columns: Column[];
+
+  /**
+   * Table rows data.
+   */
+  rows: Row[];
+
+  /**
+   * Label to display for empty cell values.
+   */
+  emptyCellLabel?: string;
+
+  /**
+   * Show date divider line between dates.
+   */
+  dateDivider?: boolean | DateDivider[];
+
+  /**
+   * Allow rows selecting.
+   */
+  selectable?: boolean;
+
+  /**
+   * Makes the table compact (fewer spacings).
+   */
+  compact?: boolean;
+
+  /**
+   * Set header sticky.
+   */
+  stickyHeader?: boolean;
+
+  /**
+   * Set footer sticky.
+   */
+  stickyFooter?: boolean;
+
+  /**
+   * Set table loader state.
+   */
+  loading?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}
+
+export interface UTableRowAttrs {
+  bodyCellContentAttrs: Ref<UnknownObject>;
+  bodyCellCheckboxAttrs: Ref<UnknownObject>;
+  bodyCheckboxAttrs: Ref<UnknownObject>;
+  bodyCellNestedAttrs: Ref<UnknownObject>;
+  bodyCellNestedExpandIconAttrs: Ref<UnknownObject>;
+  bodyCellNestedCollapseIconAttrs: Ref<UnknownObject>;
+  bodyCellBaseAttrs: Ref<UnknownObject>;
+  bodyCellNestedExpandIconWrapperAttrs: Ref<UnknownObject>;
+  bodyRowCheckedAttrs: Ref<UnknownObject>;
+  bodyRowAttrs: Ref<UnknownObject>;
+}
+
+export interface UTableRowProps {
+  row: Row;
+  columns: ColumnObject[];
+  emptyCellLabel?: string;
+  selectable: boolean;
+  nestedLevel: number;
+  dataTest: string;
+  attrs: UTableRowAttrs;
+  config: Config;
+}

package/ui.data-table/{useAttrs.js → useAttrs.ts}

@@ -1,12 +1,23 @@
 import { computed } from "vue";
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
+
+import type { Row, UTableProps, Config } from "./types.ts";
+import type { UseAttrs } from "../types.ts";
+import type { Ref } from "vue";
+
+export type UTableState = {
+  tableRows: Ref<Row[]>;
+  isShownActionsHeader: Ref<boolean>;
+  isHeaderSticky: Ref<boolean>;
+  isFooterSticky: Ref<boolean>;
+};
 
 export default function useAttrs(
-  props,
-  { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
-) {
+  props: UTableProps,
+  { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky }: UTableState,
+): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
@@ -27,15 +38,23 @@ export default function useAttrs(
 
   const keysAttrs = getKeysAttrs({}, extendingKeys, {
     stickyHeader: {
-      extend: computed(() => [
-        isShownActionsHeader.value && extendingKeysClasses.stickyHeaderActions.value,
-        isShownActionsHeader.value &&
-          isHeaderSticky.value &&
-          extendingKeysClasses.stickyHeaderActions.value,
-        !isShownActionsHeader.value &&
-          isHeaderSticky.value &&
-          extendingKeysClasses.stickyHeaderRow.value,
-      ]),
+      extend: computed(() => {
+        const classes = [];
+
+        if (isShownActionsHeader.value) {
+          classes.push(extendingKeysClasses.stickyHeaderActions.value);
+        }
+
+        if (isShownActionsHeader.value && isHeaderSticky.value) {
+          classes.push(extendingKeysClasses.stickyHeaderActions.value);
+        }
+
+        if (!isShownActionsHeader.value && isHeaderSticky.value) {
+          classes.push(extendingKeysClasses.stickyHeaderRow.value);
+        }
+
+        return classes;
+      }),
     },
     stickyHeaderCell: {
       base: computed(() => [extendingKeysClasses.headerCellBase.value]),
@@ -73,7 +92,6 @@ export default function useAttrs(
 
   return {
     config,
-    keysAttrs,
     ...keysAttrs,
     hasSlotContent,
   };

package/ui.data-table/{utilTable.js → utilTable.ts}

@@ -1,21 +1,23 @@
 import { getRandomId } from "../utils/ui.ts";
 
-export function normalizeColumns(columns) {
-  return columns.map((column) => (typeof column === "string" ? { label: column } : column));
+import type { Column, ColumnObject, Row, RowData, RowId } from "./types.ts";
+
+export function normalizeColumns(columns: Column[]): ColumnObject[] {
+  return columns.map((column) =>
+    typeof column === "string" ? { label: column, key: column } : column,
+  );
 }
 
-export function getFilteredRow(row, columns) {
+export function mapRowColumns(row: Row, columns: ColumnObject[]): RowData {
   const filteredRow = Object.entries(row).filter((item) => {
-    const isShownColumn = columns.some((column) => column.key === item[0] && !column.isHidden);
-
-    if (isShownColumn) return item;
+    return columns.some((column) => column.key === item[0] && !column.isHidden);
   });
 
-  return Object.fromEntries(filteredRow);
+  return Object.fromEntries(filteredRow) as RowData;
 }
 
-export function syncRowCheck(row, selectedRows) {
-  row.isChecked = selectedRows.includes(row.id);
+export function syncRowCheck(row: Row, selectedRows: RowId[]) {
+  row.isChecked = selectedRows.map((rowId) => String(rowId)).includes(String(row.id));
 
   if (row.row && !Array.isArray(row.row)) {
     row.row = syncRowCheck(row.row, selectedRows);
@@ -24,7 +26,7 @@ export function syncRowCheck(row, selectedRows) {
   return row;
 }
 
-export function addRowId(row) {
+export function addRowId(row: Row) {
   const hasRowId = typeof row.id !== "undefined" && row.id !== null && row.id !== "";
 
   row.id = hasRowId ? row.id : getRandomId();
@@ -40,11 +42,11 @@ export function addRowId(row) {
   return row;
 }
 
-export function toggleRowVisibility(row, targetRowId) {
+export function toggleRowVisibility(row: Row, targetRowId: string | number) {
   if (row.id === targetRowId) {
-    if (Object.hasOwn(row, "isHidden")) {
+    if (row.hasOwnProperty("isHidden")) {
       row.isHidden = !row.isHidden;
-    } else if (row.nestedData && Object.hasOwn(row.nestedData, "isHidden")) {
+    } else if (row.nestedData && row.nestedData.hasOwnProperty("isHidden")) {
       row.nestedData.isHidden = !row.nestedData.isHidden;
     }
 
@@ -64,18 +66,22 @@ export function toggleRowVisibility(row, targetRowId) {
   }
 }
 
-export function switchRowCheck(row, isChecked) {
+export function switchRowCheck(row: Row, isChecked: boolean) {
   row.isChecked = isChecked;
 
-  if (row.row) {
+  if (row.row && !Array.isArray(row.row)) {
     switchRowCheck(row.row, isChecked);
   }
+
+  if (row.row && Array.isArray(row.row)) {
+    row.row.map((currentRow) => switchRowCheck(currentRow, isChecked));
+  }
 }
 
-export function getFlatRows(tableRows) {
-  const rows = [];
+export function getFlatRows(tableRows: Row[]) {
+  const rows: Row[] = [];
 
-  function addRow(row) {
+  function addRow(row: Row) {
     rows.push(row);
 
     if (row.row && !Array.isArray(row.row)) {

package/ui.form-calendar/UCalendar.vue

@@ -40,11 +40,11 @@ import defaultConfig from "./config.ts";
 
 import type { UCalendarProps, DateValue, RangeDate, Locale } from "./types.ts";
 import type { ComputedRef, Ref } from "vue";
+import type { DateLocale } from "./utilFormatting.ts";
 
 import DayView from "./UCalendarDayView.vue";
 import MonthView from "./UCalendarMonthView.vue";
 import YearView from "./UCalendarYearView.vue";
-import type { DateLocale } from "./utilFormatting.ts";
 
 type DefaultLocale = typeof defaultConfig.i18n;
 

package/utils/node/mergeConfigs.js

@@ -131,10 +131,11 @@ export function createMergeConfigs(cx) {
       console.error("CompoundVariants should be an array.");
     }
 
-    const globalConfigUniqueItems = cloneDeep(globalConfig.compoundVariants || []);
-    const propsConfigUniqueItems = cloneDeep(propsConfig.compoundVariants || []);
+    const defaultCompoundVariants = expandCompoundVariants(defaultConfig.compoundVariants);
+    const globalCompoundVariants = expandCompoundVariants(globalConfig.compoundVariants);
+    const propsCompoundVariants = expandCompoundVariants(propsConfig.compoundVariants);
 
-    const config = defaultConfig.compoundVariants?.map((defaultConfigItem) => {
+    const config = defaultCompoundVariants?.map((defaultConfigItem) => {
       /**
        * Compare two objects by keys for match.
        */
@@ -151,25 +152,27 @@ export function createMergeConfigs(cx) {
       }
 
       /**
-       * Find the same compound variant item in custom config if exist.
+       * Find the same compound variant item in custom config if existed.
        */
       function findItem(config = []) {
-        const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
-        const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
+        config = cloneDeep(config);
+
+        const globalConfigUniqueItemIndex = globalCompoundVariants.findIndex(isSameItem);
+        const propsConfigUniqueItemIndex = propsCompoundVariants.findIndex(isSameItem);
 
         if (~globalConfigUniqueItemIndex) {
-          globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
+          globalCompoundVariants.splice(globalConfigUniqueItemIndex, 1);
         }
 
         if (~propsConfigUniqueItemIndex) {
-          propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
+          propsCompoundVariants.splice(propsConfigUniqueItemIndex, 1);
         }
 
         return config.find(isSameItem);
       }
 
-      const globalConfigItem = findItem(globalConfig.compoundVariants);
-      const propsConfigItem = findItem(propsConfig.compoundVariants);
+      const globalConfigItem = findItem(globalCompoundVariants);
+      const propsConfigItem = findItem(propsCompoundVariants);
 
       return globalConfigItem || propsConfigItem
         ? {
@@ -181,7 +184,35 @@ export function createMergeConfigs(cx) {
         : defaultConfigItem;
     });
 
-    return [...(config || []), ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+    return [...(config || []), ...globalCompoundVariants, ...propsCompoundVariants];
+  }
+
+  /**
+   * Convert compound variants with arrays in values into compound variants with primitives.
+   */
+  function expandCompoundVariants(compoundVariants) {
+    compoundVariants = cloneDeep(compoundVariants || []);
+
+    function expand(compoundVariant) {
+      const keysWithArray = Object.keys(compoundVariant).filter((key) =>
+        Array.isArray(compoundVariant[key]),
+      );
+
+      if (!keysWithArray.length) {
+        return [compoundVariant];
+      }
+
+      const [firstKey] = keysWithArray;
+      const expandedArray = compoundVariant[firstKey].map((value) => ({
+        ...compoundVariant,
+        [firstKey]: value,
+      }));
+
+      // Recursively expand the remaining array keys
+      return expandedArray.flatMap((expandedCompoundVariant) => expand(expandedCompoundVariant));
+    }
+
+    return compoundVariants.flatMap(expand);
   }
 
   return mergeConfigs;