sit-onyx 1.0.0-beta.255 → 1.0.0-beta.256

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

@@ -1,14 +1,20 @@
-import type { ComputedRef } from "vue";
 import "./base.scss";
+import type { BaseFeatureOptions } from "./types";
 export declare const BASE_FEATURE_SYMBOL: unique symbol;
-export type BaseFeatureOptions = {
-    skeleton: ComputedRef<number | boolean>;
-};
+export declare const BASE_MUTATION_ORDER: number;
 /**
  * The Base feature includes everything that should be provided as built-in functionality of the `OnyxDataGrid` component.
  */
-export declare const BASE_FEATURE: ({ skeleton }: import("..").DataGridFeatureContext) => {
+export declare const BASE_FEATURE: (options?: BaseFeatureOptions) => ({ skeleton }: import("..").DataGridFeatureContext) => {
     readonly name: typeof BASE_FEATURE_SYMBOL;
+    readonly watch: [Readonly<import("vue").Ref<number | boolean, number | boolean>>, import("vue").ComputedRef<{
+        is: import("../../../OnyxHeadline/types.ts").HeadlineType;
+        showAs?: Exclude<import("../../../OnyxHeadline/types.ts").HeadlineType, "h5" | "h6">;
+        hash?: string;
+        skeleton?: import("../../../../composables/useSkeletonState.ts").SkeletonInjected;
+        text: string;
+        rowCount?: boolean | number;
+    } | undefined>];
     readonly modifyColumns: {
         readonly func: (columns: readonly import("..").InternalColumnConfig<any, any>[]) => import("..").InternalColumnConfig<any, any>[] | {
             type: {
@@ -23,12 +29,12 @@ export declare const BASE_FEATURE: ({ skeleton }: import("..").DataGridFeatureCo
         }[];
     };
     readonly mutation: {
+        readonly order: number;
         readonly func: (rows: Readonly<any>[]) => {}[];
     };
     readonly scrollContainerAttributes: () => {
         class: string;
     };
-    readonly watch: [Readonly<import("vue").Ref<number | boolean, number | boolean>>];
     readonly typeRenderer: {
         readonly number: Readonly<import("..").TypeRenderer<import("../../types").DataGridEntry, import("../renderer").NumberCellOptions>>;
         readonly string: Readonly<import("..").TypeRenderer<import("../../types").DataGridEntry, import("../renderer").StringCellOptions>>;
@@ -38,4 +44,9 @@ export declare const BASE_FEATURE: ({ skeleton }: import("..").DataGridFeatureCo
         readonly timestamp: Readonly<import("..").TypeRenderer<import("../../types").DataGridEntry, import("../renderer").DateCellOptions>>;
         readonly skeleton: Readonly<import("..").TypeRenderer<import("../../types").DataGridEntry, import("../renderer").StringCellOptions>>;
     };
+    readonly slots: {
+        readonly headline: (slotContent: () => import("vue").VNode[]) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+    };
 };

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

@@ -0,0 +1,8 @@
+import type { MaybeRef } from "vue";
+import type { DataGridHeadline } from "../../types";
+export type BaseFeatureOptions = {
+    /**
+     * Optional headline to show.
+     */
+    headline?: Readonly<MaybeRef<string | DataGridHeadline>>;
+};

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

@@ -36,7 +36,7 @@ export type TypeRenderMap<TEntry extends DataGridEntry, TKey extends PropertyKey
 /**
  * ColumnConfig as it can be defined by the user.
  */
-export type ColumnConfig<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig = Record<string, never>, TTypes extends ColumnConfigTypeOption<PropertyKey, unknown> = never> = keyof TEntry | PublicNormalizedColumnConfig<TEntry, TColumnGroup, TTypes | RenderTypesFromFeature<[typeof BASE_FEATURE]>>;
+export type ColumnConfig<TEntry extends DataGridEntry, TColumnGroup extends ColumnGroupConfig = Record<string, never>, TTypes extends ColumnConfigTypeOption<PropertyKey, unknown> = never> = keyof TEntry | PublicNormalizedColumnConfig<TEntry, TColumnGroup, TTypes | RenderTypesFromFeature<[ReturnType<typeof BASE_FEATURE>]>>;
 export type DefaultSupportedTypes = "string" | "number" | DatetimeFormat;
 /**
  * Configuration for the column groupings.
@@ -132,6 +132,8 @@ export type DataGridFeatureDescription<TEntry extends DataGridEntry, TTypeRender
          * Defines the order in which the mutation is handled.
          * This can be used to control the sequence of operations when multiple mutations are applied.
          *
+         * The higher the order, the earlier the mutation is applied.
+         *
          * @default 0
          */
         order?: number;
@@ -192,7 +194,7 @@ export type DataGridFeatureOptions<TEntry extends DataGridEntry, TColumnOptions
      *
      * @default true
      */
-    enabled?: MaybeRef<boolean>;
+    enabled?: MaybeRef<boolean | undefined>;
     /**
      * Options for each column. Will override default/global options of the feature.
      */

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

@@ -6,9 +6,10 @@ export declare const LAZY_LOADING_ROW_ID: unique symbol;
 export declare const LAZY_LOADING_TYPE_RENDERER: unique symbol;
 export declare const BUTTON_LOADING_ROW_ID: unique symbol;
 export declare const BUTTON_LOADING_TYPE_RENDERER: unique symbol;
+export declare const PAGINATION_MUTATION_ORDER: number;
 export declare const usePagination: (options?: PaginationOptions) => (ctx: import("..").DataGridFeatureContext) => {
     name: symbol;
-    watch: (Readonly<Ref<number | boolean, number | boolean>> | import("vue").ComputedRef<(column?: PropertyKey) => boolean> | Ref<PaginationState, PaginationState>)[];
+    watch: (import("vue").ComputedRef<(column?: PropertyKey) => boolean> | Ref<PaginationState, PaginationState> | Readonly<Ref<number | boolean, number | boolean>>)[];
     mutation: {
         order: number;
         func: (entries: Readonly<any>[]) => Readonly<any>[];

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

@@ -4,9 +4,9 @@ import "./selection.scss";
 import type { SelectionOptions, SelectionState } from "./types";
 export declare const SELECTION_FEATURE: unique symbol;
 export declare const SELECTION_MUTATION_ORDER = 1000;
-export declare const useSelection: <TEntry extends DataGridEntry>(options?: SelectionOptions) => ({ i18n }: import("..").DataGridFeatureContext) => {
+export declare const useSelection: <TEntry extends DataGridEntry>(options?: SelectionOptions) => (ctx: import("..").DataGridFeatureContext) => {
     name: symbol;
-    watch: (Readonly<Ref<boolean, boolean>> | Ref<SelectionState, SelectionState>)[];
+    watch: (Readonly<Ref<boolean, boolean>> | import("vue").ComputedRef<(column?: PropertyKey) => boolean> | Ref<SelectionState, SelectionState>)[];
     modifyColumns: import("../../../../utils/feature.ts").SingleOrderableMapping<import("..").InternalColumnConfig<TEntry, any>[], import("..").InternalColumnConfig<TEntry, any>[], readonly import("..").InternalColumnConfig<TEntry, any>[]>;
     mutation: {
         func: (rows: Readonly<any>[]) => Readonly<any>[];

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

@@ -1,4 +1,5 @@
 import { type MaybeRef, type MaybeRefOrGetter } from "vue";
+import type { DataGridFeatureOptions } from "..";
 import type { DataGridEntry } from "../../types";
 export type SelectionState = {
     /**
@@ -26,15 +27,11 @@ export type SelectionState = {
 /**
  * The options of the selection feature for the OnyxDataGrid component.
  */
-export type SelectionOptions = {
+export type SelectionOptions = Pick<DataGridFeatureOptions<DataGridEntry, object>, "enabled"> & {
     /**
      * The currently active selection.
      */
     selectionState?: MaybeRef<SelectionState>;
-    /**
-     * If the row selection column is shown or not.
-     */
-    disabled?: MaybeRefOrGetter<boolean>;
     /**
      * If `true` the selection checkbox of a row will only be shown if the row is hovered or selected.
      */

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

@@ -1,6 +1,7 @@
 import type { SkeletonInjected } from "src/composables/useSkeletonState";
 import type { HTMLAttributes } from "vue";
 import type { IfExtends, IfNotEmpty, MaybePick, RecordValues, UnionByKey } from "../../types";
+import type { OnyxHeadlineProps } from "../OnyxHeadline/types";
 import type { OnyxTableProps } from "../OnyxTable/types";
 import type { ColumnConfig, ColumnConfigTypeOption, ColumnGroupConfig, DataGridFeature, InternalColumnConfig, TypeRenderer, TypeRenderMap } from "./features";
 import type { BASE_FEATURE } from "./features/base/base";
@@ -20,7 +21,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, TColumnGroup extends ColumnGroupConfig, TTypeRenderer extends TypeRenderMap<TEntry>, TFeatureName extends symbol, TFeatures extends DataGridFeature<TEntry, TTypeRenderer, TFeatureName>[] = never, TTypes extends ColumnConfigTypeOption<PropertyKey, unknown> = RenderTypesFromFeature<[
-    typeof BASE_FEATURE,
+    ReturnType<typeof BASE_FEATURE>,
     ...TFeatures
 ]>> = {
     /**
@@ -51,6 +52,10 @@ export type OnyxDataGridProps<TEntry extends DataGridEntry, TColumnGroup extends
      *  Whether to show skeleton rows. Can be set to `true` to use a pre-defined skeleton row count or you can pass a number to define a specific count.
      */
     skeleton?: SkeletonInjected;
+    /**
+     * Headline to display above the data grid.
+     */
+    headline?: string | DataGridHeadline;
 } & Omit<OnyxTableProps, "columnGroups" | "scrollContainerAttrs">;
 /**
  * "Raw" user data for a data grid entry/row, e.g. fetched from a backend service.
@@ -80,3 +85,14 @@ export type DataGridEntryOptions = {
     }>, "label">[];
 };
 export declare const DataGridRowOptionsSymbol: unique symbol;
+export type DataGridHeadline = Partial<OnyxHeadlineProps> & {
+    /**
+     * Headline text.
+     */
+    text: string;
+    /**
+     * Optional row count to display. If set to `true`, the count will be determined automatically.
+     * Can also be set to a custom number (useful when e.g. using async pagination).
+     */
+    rowCount?: boolean | number;
+};