sit-onyx 1.0.0-beta.98 → 1.0.0-dev-20250912111044

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

@@ -0,0 +1,33 @@
+import { OnyxBreadcrumbItemProps } from './types.js';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Item content / page name.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Item content / page name.
+         */
+        default(): unknown;
+    };
+    refs: {
+        componentRef: HTMLLIElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxBreadcrumbItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxBreadcrumbItemProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    active: boolean | "auto";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    componentRef: HTMLLIElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,15 @@
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { SharedLinkProps } from '../OnyxRouterLink/types.js';
+export type OnyxBreadcrumbItemProps = DensityProp & {
+    /**
+     * Whether the nav item is currently active.
+     * If any nested option is active, the parent nav item will also be marked as active.
+     * If "auto" and a [router](https://onyx.schwarz/development/router.html) is provided, the active state will be determined automatically based on the current route.
+     */
+    active?: boolean | "auto";
+    /**
+     * Whether to show a skeleton item.
+     */
+    skeleton?: SkeletonInjected;
+} & Partial<Pick<SharedLinkProps, "href">>;

package/dist/components/OnyxButton/ButtonOrLinkLayout.d.vue.ts

@@ -0,0 +1,33 @@
+import { OnyxButtonProps } from './types.js';
+type __VLS_Props = Pick<OnyxButtonProps, "disabled" | "link" | "loading" | "type" | "autofocus">;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Button content.
+         */
+        default(): unknown;
+    }> & {
+        /**
+         * Button content.
+         */
+        default(): unknown;
+    };
+    refs: {
+        buttonRef: HTMLButtonElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: import('./types.js', { with: { "resolution-mode": "import" } }).ButtonType;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    buttonRef: HTMLButtonElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,26 @@
+import { OnyxButtonProps } from './types.js';
+declare const _default: import('vue').DefineComponent<OnyxButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxButtonProps> & Readonly<{}>, {
+    skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
+    disabled: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean>;
+    loading: boolean;
+    type: import('./types.js', { with: { "resolution-mode": "import" } }).ButtonType;
+    color: import('./types.js', { with: { "resolution-mode": "import" } }).ButtonColor;
+    mode: import('./types.js', { with: { "resolution-mode": "import" } }).ButtonMode;
+    iconPosition: "left" | "right";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rippleRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
+        events: import('vue').Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        rippleTriggerRef: HTMLSpanElement;
+    }, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {
+        events: import('vue').Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
+    }, {}, {}, {}, {}> | null;
+}, any>;
+export default _default;

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

@@ -1,7 +1,8 @@
-import type { DensityProp } from "../../composables/density";
-import type { SkeletonInjected } from "../../composables/useSkeletonState";
-import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm.core";
+import { DensityProp } from '../../composables/density.js';
+import { SkeletonInjected } from '../../composables/useSkeletonState.js';
+import { AutofocusProp } from '../../types/index.js';
+import { FormInjected } from '../OnyxForm/OnyxForm.core.js';
+import { WithLinkProp } from '../OnyxRouterLink/types.js';
 export type OnyxButtonProps = DensityProp & AutofocusProp & {
     /**
      * The text content of the button.
@@ -31,10 +32,19 @@ export type OnyxButtonProps = DensityProp & AutofocusProp & {
      * An icon which will be displayed on the left side of the label.
      */
     icon?: string;
+    /**
+     * Position where the icon is placed.
+     */
+    iconPosition?: "left" | "right";
     /**
      * Whether to show a skeleton button.
      */
     skeleton?: SkeletonInjected;
+    /**
+     * If set, the button will be rendered as link.
+     * Note that not all button properties are supported when used as link, e.g. `disabled`, `type` and `autofocus` are not supported.
+     */
+    link?: WithLinkProp["link"];
 };
 export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];

package/dist/components/{OnyxHeadline/OnyxHeadline.vue.d.ts → OnyxCard/OnyxCard.d.vue.ts}

@@ -1,14 +1,14 @@
-import type { OnyxHeadlineProps } from "./types";
+import { OnyxCardProps } from './types.js';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Headline content.
+         * Card content.
          */
         default(): unknown;
     }> & {
         /**
-         * Headline content.
+         * Card content.
          */
         default(): unknown;
     };
@@ -16,7 +16,9 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<OnyxHeadlineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OnyxHeadlineProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<OnyxCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxCardProps> & Readonly<{}>, {
+    clickable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -0,0 +1,9 @@
+import { DensityProp } from '../../composables/density.js';
+import { WithLinkProp } from '../OnyxRouterLink/types.js';
+export type OnyxCardProps = DensityProp & WithLinkProp & {
+    /**
+     * Whether the whole card should be clickable (will render it as `<button>`).
+     * **Important**: If clickable, the card must not contain interactive elements like other buttons etc.
+     */
+    clickable?: boolean;
+};

package/dist/components/OnyxCheckbox/{OnyxCheckbox.vue.d.ts → OnyxCheckbox.d.vue.ts}

@@ -1,17 +1,17 @@
-import type { SelectOptionValue } from "../../types";
-import type { OnyxCheckboxProps } from "./types";
+import { SelectOptionValue } from '../../types/index.js';
+import { OnyxCheckboxProps } from './types.js';
 declare const _default: <TValue extends SelectOptionValue = SelectOptionValue>(__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<{
         readonly onValidityChange?: ((validity: ValidityState) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onValidityChange" | "onUpdate:modelValue"> & Partial<{}> & OnyxCheckboxProps<TValue>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onValidityChange"> & OnyxCheckboxProps<TValue> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        input: Readonly<import('vue').ShallowRef<HTMLInputElement | null>>;
+    }>): void;
     attrs: any;
     slots: {};
     emit: ((evt: "validityChange", validity: ValidityState) => void) & ((evt: "update:modelValue", value: boolean) => void);
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1,11 +1,9 @@
-import type { RequiredMarkerProp } from "../../composables/required";
-import type { CustomValidityProp } from "../../composables/useCustomValidity";
-import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
-export type OnyxCheckboxProps<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredMarkerProp & CustomValidityProp & AutofocusProp & {
+import { BaseSelectOption, Nullable, SelectOptionValue } from '../../types/index.js';
+export type OnyxCheckboxProps<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & {
     /**
      * Whether the checkbox is checked.
      */
-    modelValue?: boolean;
+    modelValue?: Nullable<boolean>;
     /**
      * If `true`, an indeterminate indicator is shown.
      */

package/dist/components/OnyxCheckboxGroup/{OnyxCheckboxGroup.vue.d.ts → OnyxCheckboxGroup.d.vue.ts}

@@ -1,16 +1,16 @@
-import type { SelectOptionValue } from "../../types";
-import type { OnyxCheckboxGroupProps } from "./types";
+import { SelectOptionValue } from '../../types/index.js';
+import { OnyxCheckboxGroupProps } from './types.js';
 declare const _default: <TValue extends SelectOptionValue>(__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<{
         readonly "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & Partial<{}> & OnyxCheckboxGroupProps<TValue>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxCheckboxGroupProps<TValue> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        inputs: import('vue').ComputedRef<HTMLInputElement[]>;
+    }>): void;
     attrs: any;
     slots: {};
     emit: (evt: "update:modelValue", value: TValue[]) => void;
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1,11 +1,8 @@
-import type { DensityProp } from "../../composables/density";
-import type { RequiredMarkerProp } from "../../composables/required";
-import type { CustomValidityProp } from "../../composables/useCustomValidity";
-import type { SkeletonInjected } from "../../composables/useSkeletonState";
-import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm.core";
-import type { SharedFormElementProps } from "../OnyxFormElement/types";
-export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp & Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "labelTooltip" | "hideLabel"> & {
+import { RequiredProp } from '../../composables/required.js';
+import { CustomValidityProp } from '../../composables/useCustomValidity.js';
+import { AutofocusProp, BaseSelectOption, Nullable, Orientation, SelectOptionValue } from '../../types/index.js';
+import { SharedFormElementProps } from '../OnyxFormElement/types.js';
+export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> = Pick<BaseSelectOption, "truncation"> & Pick<SharedFormElementProps, "label" | "labelTooltip" | "hideLabel" | "density" | "skeleton" | "disabled" | "requiredMarker"> & {
     /**
      * Checkbox options.
      */
@@ -13,11 +10,11 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
     /**
      * Currently checked checkboxes.
      */
-    modelValue?: TValue[];
+    modelValue?: Nullable<TValue[]>;
     /**
-     * Direction of the checkboxes.
+     * Orientation of the checkboxes.
      */
-    direction?: Direction;
+    orientation?: Orientation;
     /**
      * If true, an additional checkbox will be displayed to check/uncheck all options.
      * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior.
@@ -29,13 +26,5 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
          */
         label?: string;
     };
-    /**
-     * Whether all checkboxes should be disabled.
-     */
-    disabled?: FormInjected<boolean>;
-    /**
-     * If set, the specified number of skeleton radio buttons will be shown.
-     */
-    skeleton?: SkeletonInjected;
 };
-export type CheckboxGroupOption<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredMarkerProp & CustomValidityProp & AutofocusProp;
+export type CheckboxGroupOption<TValue extends SelectOptionValue = SelectOptionValue> = BaseSelectOption<TValue> & RequiredProp & CustomValidityProp & AutofocusProp;

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

@@ -0,0 +1,16 @@
+import { OnyxTableSlots } from '../OnyxTable/types.js';
+import { ColumnConfigTypeOption, ColumnGroupConfig, DataGridFeature, TypeRenderMap } from './features/index.js';
+import { DataGridEntry, OnyxDataGridProps } from './types.js';
+declare const _default: <TEntry extends DataGridEntry, TTypeRenderer extends TypeRenderMap<TEntry>, TColumnGroup extends ColumnGroupConfig, TTypes extends ColumnConfigTypeOption<PropertyKey, unknown>, 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: Readonly<Pick<OnyxTableSlots, "empty">> & Pick<OnyxTableSlots, "empty">;
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/OnyxDataGrid/OnyxDataGridRenderer/{OnyxDataGridRenderer.vue.d.ts → OnyxDataGridRenderer.d.vue.ts}

@@ -1,14 +1,12 @@
-import type { DataGridEntry, DataGridMetadata } from "../types";
-import type { OnyxDataGridRendererProps } from "./types";
+import { DataGridEntry, DataGridMetadata } from '../types.js';
+import { DataGridRendererSlots, OnyxDataGridRendererProps } from './types.js';
 declare const _default: <TEntry extends DataGridEntry, TMetadata extends DataGridMetadata>(__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> & Partial<{}> & OnyxDataGridRendererProps<TEntry, TMetadata>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & OnyxDataGridRendererProps<TEntry, TMetadata> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {};
+    slots: Readonly<DataGridRendererSlots> & DataGridRendererSlots;
     emit: {};
-}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1,18 +1,20 @@
-import type { FunctionalComponent, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "vue";
-import type { WithHTMLAttributes } from "../../../types";
-import type { OnyxTableProps } from "../../OnyxTable/types";
-import type { DataGridEntry, DataGridMetadata } from "../types";
-export type OnyxDataGridRendererProps<TEntry extends DataGridEntry = DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = OnyxTableProps & {
+import { Component, FunctionalComponent, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'vue';
+import { Nullable, WithHTMLAttributes } from '../../../types/index.js';
+import { OnyxTableProps, OnyxTableSlots } from '../../OnyxTable/types.js';
+import { DataGridEntry } from '../types.js';
+export type DataGridRendererCellMetadata = Record<string, unknown>;
+export type DataGridRendererSlots = Omit<OnyxTableSlots, "default" | "head">;
+export type OnyxDataGridRendererProps<TEntry extends DataGridEntry = DataGridEntry, TMetadata extends DataGridRendererCellMetadata = DataGridRendererCellMetadata> = OnyxTableProps & {
     /**
      * Will define which columns and their headers are rendered in which order.
      */
-    columns: DataGridRendererColumn<TEntry, object>[];
+    columns: DataGridRendererColumn<TEntry>[];
     rows: DataGridRendererRow<TEntry, TMetadata>[];
 };
 /**
  * Describes how a column header is rendered in the data grid.
  */
-export type DataGridRendererColumn<TEntry extends DataGridEntry, TProps extends object> = {
+export type DataGridRendererColumn<TEntry extends DataGridEntry, TProps = any> = {
     /**
      * (Unique) Key of the column - usually a key of the table data.
      * But can also be used for custom columns.
@@ -21,11 +23,20 @@ export type DataGridRendererColumn<TEntry extends DataGridEntry, TProps extends
     /**
      * The component that renders the header content and is placed into the `<th>` element.
      */
-    component: FunctionalComponent<WithHTMLAttributes<TProps>>;
+    component: Component<Nullable<TProps>>;
     /**
-     * Attributes and data that is provided to the component using `v-bind`.
+     * Props that are passed to the component that renders the header content.
+     */
+    props?: TProps;
+    /**
+     * Width of the column. Any track-list value that can be used by [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) is possible.
+     * So the column can have a fixed width using a static value like `100px` or `2rem`.
+     * The width can also be defined using a fractional flex value like `1fr` or `0.5fr`.
+     * To define min and max widths, use the [`minmax`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) function, e.g. `minmax(4rem, 10rem)`.
+     *
+     * @default "minmax(min-content, 1fr)"
      */
-    props: WithHTMLAttributes<TProps>;
+    width?: string;
     /**
      * Attributes that are bound directly to the `<th>` element of the column.
      */
@@ -34,7 +45,7 @@ export type DataGridRendererColumn<TEntry extends DataGridEntry, TProps extends
 /**
  * Describes how a specific row is rendered in the data grid.
  */
-export type DataGridRendererRow<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = {
+export type DataGridRendererRow<TEntry extends DataGridEntry, TMetadata extends DataGridRendererCellMetadata = DataGridRendererCellMetadata> = {
     /**
      * Unique id of the row.
      */
@@ -48,11 +59,16 @@ export type DataGridRendererRow<TEntry extends DataGridEntry, TMetadata extends
      * Attributes that are bound directly to the `<tr>` element of the row.
      */
     trAttributes?: HTMLAttributes;
+    /**
+     * Defines which columns are rendered in which order for this row.
+     * Cell content must be included in the "cells" object.
+     */
+    columns: Pick<DataGridRendererColumn<TEntry>, "key">[];
 };
 /**
  * Describes how a single cell in a specific row is rendered in the data grid.
  */
-export type DataGridRendererCell<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = {
+export type DataGridRendererCell<TEntry extends DataGridEntry, TMetadata extends DataGridRendererCellMetadata = DataGridRendererCellMetadata> = {
     /**
      * The component that renders the actual cell content and is placed into the `<td>` element.
      */
@@ -69,8 +85,12 @@ export type DataGridRendererCell<TEntry extends DataGridEntry, TMetadata extends
 /**
  * Vue component that renders the actual content of a single data grid cell.
  */
-export type DataGridRendererCellComponent<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = FunctionalComponent<WithHTMLAttributes<DataGridRendererCellComponentProps<TEntry, TMetadata>, TdHTMLAttributes>>;
-export type DataGridRendererCellComponentProps<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata> = {
+export type DataGridRendererCellComponent<TEntry extends DataGridEntry, TMetadata extends DataGridRendererCellMetadata = DataGridRendererCellMetadata> = FunctionalComponent<WithHTMLAttributes<DataGridRendererCellComponentProps<TEntry, TMetadata>, TdHTMLAttributes>>;
+export type DataGridRendererCellComponentProps<TEntry extends DataGridEntry, TMetadata extends DataGridRendererCellMetadata> = {
+    /**
+     * The key of the column for which the cell is rendered.
+     */
+    key: keyof TEntry;
     /**
      * Complete row data.
      */

package/dist/components/OnyxDataGrid/features/{HeaderCell.vue.d.ts → HeaderCell.d.vue.ts}

@@ -15,7 +15,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,2 +1,15 @@
-export * from "./sorting/types";
-export { useSorting } from "./sorting/sorting";
+export * from './filtering/types.js';
+export * from './hideColumns/types.js';
+export * from './pagination/types.js';
+export * from './resizing/types.js';
+export * from './selection/types.js';
+export * from './sorting/types.js';
+export * from './stickyColumns/types.js';
+export { useFiltering } from './filtering/filtering.js';
+export { useHideColumns } from './hideColumns/hideColumns.js';
+export { usePagination } from './pagination/pagination.js';
+export * from './renderer.js';
+export { useResizing } from './resizing/resizing.js';
+export { useSelection } from './selection/selection.js';
+export { useSorting } from './sorting/sorting.js';
+export { useStickyColumns } from './stickyColumns/stickyColumns.js';

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

@@ -0,0 +1,52 @@
+import { BaseFeatureOptions } from './types.js';
+export declare const BASE_FEATURE_SYMBOL: unique symbol;
+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: (options?: BaseFeatureOptions) => ({ skeleton }: import('../index.js').DataGridFeatureContext) => {
+    readonly name: typeof BASE_FEATURE_SYMBOL;
+    readonly watch: [Readonly<import('vue').Ref<number | boolean, number | boolean>>, import('vue').ComputedRef<{
+        is: import('../../../OnyxHeadline/types.js').HeadlineType;
+        showAs?: Exclude<import('../../../OnyxHeadline/types.js').HeadlineType, "h5" | "h6">;
+        hash?: string;
+        skeleton?: import('../../../../index.js').SkeletonInjected;
+        text: string;
+        rowCount?: boolean | number;
+    } | undefined>];
+    readonly modifyColumns: {
+        readonly func: (columns: readonly import('../index.js').InternalColumnConfig<any, any>[]) => import('../index.js').InternalColumnConfig<any, any>[] | {
+            type: {
+                name: string;
+            };
+            key: string | number | symbol;
+            width?: string | undefined;
+            columnGroupKey?: string | number | symbol | undefined;
+            tdAttributes?: import('vue').TdHTMLAttributes;
+            thAttributes?: import('vue').ThHTMLAttributes;
+            label: string;
+        }[];
+    };
+    readonly mutation: {
+        readonly order: number;
+        readonly func: (rows: Readonly<any>[]) => {}[];
+    };
+    readonly scrollContainerAttributes: () => {
+        class: string;
+    };
+    readonly typeRenderer: {
+        readonly number: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').NumberCellOptions>>;
+        readonly string: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').StringCellOptions>>;
+        readonly date: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').DateCellOptions>>;
+        readonly "datetime-local": Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').DateCellOptions>>;
+        readonly time: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').DateCellOptions>>;
+        readonly timestamp: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').DateCellOptions>>;
+        readonly skeleton: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').StringCellOptions>>;
+        readonly boolean: Readonly<import('../index.js').TypeRenderer<import('../../types.js').DataGridEntry, import('../renderer.js').BooleanCellOptions>>;
+    };
+    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 { MaybeRef } from 'vue';
+import { DataGridHeadline } from '../../types.js';
+export type BaseFeatureOptions = {
+    /**
+     * Optional headline to show.
+     */
+    headline?: Readonly<MaybeRef<string | DataGridHeadline>>;
+};

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

@@ -0,0 +1,31 @@
+import { Ref } from 'vue';
+import { DataGridEntry } from '../../types.js';
+import { FilterOptions } from './types.js';
+export declare const FILTERING_FEATURE: unique symbol;
+export declare const FILTERING_MUTATION_ORDER = 0;
+export declare const useFiltering: <TEntry extends DataGridEntry>(options?: FilterOptions<TEntry>) => (ctx: import('../index.js').DataGridFeatureContext) => {
+    name: symbol;
+    watch: (Ref<Partial<Record<keyof DataGridEntry, string | undefined>>, Partial<Record<keyof DataGridEntry, string | undefined>>> | import('vue').ComputedRef<{ [TKey in keyof TEntry]?: ({ [TKey_2 in keyof TEntry]?: {
+        config?: import('./types.js').FilterConfig<TEntry> | undefined;
+    } | undefined; }[TKey] & {
+        enabled?: boolean;
+    }) | undefined; } | undefined>)[];
+    mutation: {
+        func: (entries: Readonly<TEntry>[]) => Readonly<TEntry>[];
+        order: number;
+    };
+    header: {
+        actions: ({ key: column }: import('../index.js').InternalColumnConfig<any, any>) => {
+            iconComponent: {
+                iconComponent: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                    [key: string]: any;
+                }>;
+                alwaysShowInHeader: true;
+            } | undefined;
+            menuItems: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>[];
+            showFlyoutMenu: true;
+        }[];
+    };
+};