sit-onyx 1.0.0-beta.154 → 1.0.0-beta.155

package/dist/components/OnyxDataGrid/OnyxDataGrid.vue.d.ts

@@ -1,7 +1,7 @@
-import { type DataGridFeature, type TypeRenderMap } from "./features";
+import { type ColumnGroupConfig, type DataGridFeature, type TypeRenderMap } from "./features";
 import type { DataGridEntry, OnyxDataGridProps } from "./types";
-declare const _default: <TEntry extends DataGridEntry, TTypeRenderer extends TypeRenderMap<TEntry>, TFeatureName extends symbol, TFeatures extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] | []>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & OnyxDataGridProps<TEntry, TTypeRenderer, TFeatureName, TFeatures> & Partial<{}>> & import("vue").PublicProps;
+declare const _default: <TEntry extends DataGridEntry, TTypeRenderer extends TypeRenderMap<TEntry>, TColumnGroup extends ColumnGroupConfig, TFeatureName extends symbol, TFeatures extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] | []>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & OnyxDataGridProps<TEntry, TColumnGroup, TTypeRenderer, TFeatureName, TFeatures> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/components/OnyxDataGrid/features/index.d.ts

@@ -1,13 +1,14 @@
 import { type Component, type MaybeRefOrGetter, type WatchSource } from "vue";
 import { type OnyxI18n } from "../../../i18n";
 import type { OnyxMenuItem } from "../../OnyxNavBar/modules";
+import type { TableColumnGroup } from "../../OnyxTable/types";
 import type { DataGridRendererCell, DataGridRendererColumn, DataGridRendererRow } from "../OnyxDataGridRenderer/types";
 import type { DataGridEntry, DataGridMetadata } from "../types";
 /**
  * Function type for modifying the normalized column configuration.
  */
 export type ModifyColumns<TEntry extends DataGridEntry> = {
-    func: (columns: Readonly<NormalizedColumnConfig<TEntry, PropertyKey>[]>) => NormalizedColumnConfig<TEntry, PropertyKey>[];
+    func: (columns: Readonly<NormalizedColumnConfig<TEntry>[]>) => NormalizedColumnConfig<TEntry>[];
 };
 /**
  * Defines how a specific column type should be rendered.
@@ -24,14 +25,20 @@ export type TypeRenderMap<TEntry extends DataGridEntry> = Record<PropertyKey, Ty
 /**
  * ColumnConfig as it can be defined by the user.
  */
-export type ColumnConfig<TEntry extends DataGridEntry, TTypes> = keyof TEntry | NormalizedColumnConfig<TEntry, TTypes>;
+export type ColumnConfig<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig, TTypes> = keyof TEntry | NormalizedColumnConfig<TEntry, TColumnGroup, TTypes>;
 export type DefaultSupportedTypes = "string" | "number";
+/**
+ * Configuration for the column groupings.
+ */
+export type ColumnGroupConfig = Record<string, {
+    label: string;
+}>;
 /**
  * Normalized column config for internal usage.
  */
-export type NormalizedColumnConfig<TEntry extends DataGridEntry, TTypes = PropertyKey> = {
+export type NormalizedColumnConfig<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig = any, TTypes = PropertyKey> = {
     /**
-     * The `key` identifies which property of an `data` entry is used as a value.
+     * The `key` identifies which property of an `data` entry is used as `modelValue` for a cell.
      */
     key: keyof TEntry;
     /**
@@ -44,6 +51,14 @@ export type NormalizedColumnConfig<TEntry extends DataGridEntry, TTypes = Proper
      * If not defined the values are displayed as plain strings.
      */
     type?: TTypes | DefaultSupportedTypes;
+    /**
+     * Key of the ColumnGroup that this column should be visually grouped in.
+     * The columns have to be defined in the correct order.
+     * So columns that should be grouped together have to actually be defined after eachother.
+     *
+     * The label for the column group can be configured via the `columnGroups` prop.
+     */
+    columnGroupKey?: keyof TColumnGroup;
 };
 /**
  * Complete Type for a single data grid feature.
@@ -89,7 +104,7 @@ export type DataGridFeature<TEntry extends DataGridEntry, TTypeRenderer extends
          * `iconComponent` of an action is shown after the header label.
          * The components must be ARIA-conform buttons.
          */
-        actions?: (column: NormalizedColumnConfig<TEntry, keyof TTypeRenderer>) => {
+        actions?: (column: NormalizedColumnConfig<TEntry>) => {
             iconComponent: Component;
             menuItems: Component<typeof OnyxMenuItem>[];
         }[];
@@ -117,10 +132,12 @@ export type DataGridFeature<TEntry extends DataGridEntry, TTypeRenderer extends
  */
 export declare function createFeature<TArgs extends any[], TFeature extends DataGridFeature<any, any, any>, T extends (...args: TArgs) => CheckDataGridFeature<TFeature>>(featureDefinition: T): T;
 type CheckDataGridFeature<T> = T extends DataGridFeature<infer A, TypeRenderMap<infer A>, infer C> ? DataGridFeature<A, TypeRenderMap<A>, C> : never;
-export type UseDataGridFeaturesOptions<TEntry extends DataGridEntry> = {
-    columnConfig: MaybeRefOrGetter<ColumnConfig<TEntry, PropertyKey>[]>;
+export type UseDataGridFeaturesOptions<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig> = {
+    columnConfig: MaybeRefOrGetter<ColumnConfig<TEntry, TColumnGroup, PropertyKey>[]>;
     i18n: OnyxI18n;
+    columnGroups: MaybeRefOrGetter<TColumnGroup>;
 };
+export declare const createTableColumnGroups: <TEntry extends DataGridEntry>(columns?: NormalizedColumnConfig<TEntry>[], columnGroups?: ColumnGroupConfig) => TableColumnGroup[] | undefined;
 /**
  * Uses the defined datagrid features to provide factory functions.
  * These factories are to be used to map data and configuration to `OnyxDataGridRenderer` properties.
@@ -155,7 +172,9 @@ export type UseDataGridFeaturesOptions<TEntry extends DataGridEntry> = {
  * </template>
  * ```
  */
-export declare const useDataGridFeatures: <TEntry extends DataGridEntry, TFeatureName extends symbol, TTypeRenderer extends TypeRenderMap<TEntry>, T extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] | []>(features: T, { i18n, columnConfig }: UseDataGridFeaturesOptions<TEntry>) => {
+export declare const useDataGridFeatures: <TEntry extends DataGridEntry, TFeatureName extends symbol, TTypeRenderer extends TypeRenderMap<TEntry>, TColumnGroup extends ColumnGroupConfig, T extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] | []>(features: T, { i18n, columnConfig, columnGroups }: UseDataGridFeaturesOptions<TEntry, TColumnGroup>) => {
+    /** Uses the column definition and available column group config to generate the column groups for the underlying OnyxTable */
+    createRendererColumnGroups: () => TableColumnGroup[] | undefined;
     /** Takes the column definition and maps all, calls mutation func and maps at the end to RendererCell */
     createRendererRows: (entries: TEntry[]) => DataGridRendererRow<TEntry, DataGridMetadata>[];
     /** Takes the column definition and creates a RenderHeader for each, adds actions from features */

package/dist/components/OnyxDataGrid/features/selection/TestCase.vue.d.ts

@@ -7,7 +7,7 @@ type __VLS_Props = {
     /**
      * props passed through to DataGrid
      */
-    dataGrid: Pick<OnyxDataGridProps<any, any, any, any>, "columns" | "data">;
+    dataGrid: Pick<OnyxDataGridProps<any, any, any, any, any>, "columns" | "data">;
     /**
      * props passed through to the feature
      */

package/dist/components/OnyxDataGrid/features/selection/selection.d.ts

@@ -8,7 +8,7 @@ export declare const useSelection: <TEntry extends DataGridEntry>(options?: Sele
     name: symbol;
     watch: (Readonly<Ref<boolean, boolean>> | Ref<SelectionState, SelectionState>)[];
     modifyColumns: {
-        func: (columnConfig: readonly import("..").NormalizedColumnConfig<TEntry, PropertyKey>[]) => import("..").NormalizedColumnConfig<TEntry, PropertyKey>[];
+        func: (columnConfig: readonly import("..").NormalizedColumnConfig<TEntry, any, PropertyKey>[]) => import("..").NormalizedColumnConfig<TEntry, any, PropertyKey>[];
     };
     typeRenderer: {
         [SELECTION_COLUMN]: {

package/dist/components/OnyxDataGrid/features/sorting/TestCase.vue.d.ts

@@ -1,6 +1,6 @@
 import type { DataGridEntry, OnyxDataGridProps } from "../../../..";
 import { DataGridFeatures } from "../../../..";
-type __VLS_Props = Pick<OnyxDataGridProps<any, any, any, any>, "columns" | "data">;
+type __VLS_Props = Pick<OnyxDataGridProps<any, any, any, any, any>, "columns" | "data">;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sortChange: (sortState: DataGridFeatures.SortState<DataGridEntry>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{

package/dist/components/OnyxDataGrid/features/sorting/sorting.d.ts

@@ -10,7 +10,7 @@ export declare const useSorting: <TEntry extends DataGridEntry>(options?: SortOp
         func: (data: Readonly<TEntry>[]) => void;
     };
     header: {
-        actions: ({ key: column }: import("..").NormalizedColumnConfig<any, PropertyKey>) => {
+        actions: ({ key: column }: import("..").NormalizedColumnConfig<any, any, PropertyKey>) => {
             iconComponent: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
             }>;

package/dist/components/OnyxDataGrid/types.d.ts

@@ -1,5 +1,5 @@
 import type { KeysOfUnion, MaybePick, UnionByKey } from "../../types";
-import type { ColumnConfig, DataGridFeature, TypeRenderMap } from "./features";
+import type { ColumnConfig, ColumnGroupConfig, DataGridFeature, TypeRenderMap } from "./features";
 export type DataGridMetadata = Record<string, unknown>;
 /**
  * Unwraps the defined typeRenderers
@@ -8,7 +8,7 @@ export type RenderTypesFromFeature<TFeatures extends DataGridFeature<any, any, a
 /**
  * @experimental The DataGrid is still working in progress and the props will change in the future.
  */
-export type OnyxDataGridProps<TEntry extends DataGridEntry, TTypeRenderer extends TypeRenderMap<TEntry>, TFeatureName extends symbol, TFeatures extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] = DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[], TTypes = RenderTypesFromFeature<TFeatures>> = {
+export type OnyxDataGridProps<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig, TTypeRenderer extends TypeRenderMap<TEntry>, TFeatureName extends symbol, TFeatures extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] = DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[], TTypes = RenderTypesFromFeature<TFeatures>> = {
     /**
      * Features that should be applied.
      * They allow the modification of the behavior and rendering.
@@ -19,7 +19,11 @@ export type OnyxDataGridProps<TEntry extends DataGridEntry, TTypeRenderer extend
     /**
      * The order of and which columns should be rendered.
      */
-    columns: ColumnConfig<TEntry, TTypes>[];
+    columns: ColumnConfig<TEntry, TColumnGroup, TTypes>[];
+    /**
+     * Configuration for the column groups defined via the `columns` configuration.
+     */
+    columnGroups?: TColumnGroup;
     /**
      * The data that should be used to fill the datagrid.
      */