sit-onyx 1.0.0-beta.45 → 1.0.0-beta.47

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

@@ -0,0 +1,17 @@
+import type { DataGridEntry, DataGridMetadata } from "../types";
+import type { OnyxDataGridRendererProps } from "./types";
+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 & Readonly<{}> & Readonly<{}>, never>, never> & OnyxDataGridRendererProps<TEntry, TMetadata>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,87 @@
+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 & {
+    /**
+     * Will define which columns and their headers are rendered in which order.
+     */
+    columns: DataGridRendererColumn<TEntry, object>[];
+    rows: DataGridRendererRow<TEntry, TMetadata>[];
+};
+/**
+ * Describes how a column header is rendered in the data grid.
+ */
+export type DataGridRendererColumn<TEntry extends DataGridEntry, TProps extends object> = {
+    /**
+     * (Unique) Key of the column - usually a key of the table data.
+     * But can also be used for custom columns.
+     */
+    key: keyof TEntry;
+    /**
+     * The component that renders the header content and is placed into the `<th>` element.
+     */
+    component: FunctionalComponent<WithHTMLAttributes<TProps>>;
+    /**
+     * Attributes and data that is provided to the component using `v-bind`.
+     */
+    props: WithHTMLAttributes<TProps>;
+    /**
+     * Attributes that are bound directly to the `<th>` element of the column.
+     */
+    thAttributes?: ThHTMLAttributes;
+};
+/**
+ * Describes how a specific row is rendered in the data grid.
+ */
+export type DataGridRendererRow<TEntry extends DataGridEntry, TMetadata extends DataGridMetadata = DataGridMetadata> = {
+    /**
+     * Unique id of the row.
+     */
+    id: PropertyKey;
+    /**
+     * Describes how a cell in a specific row is rendered in the data grid.
+     * Only cells that are defined in the columns will be rendered in the defined order.
+     */
+    cells: Partial<Record<keyof TEntry, DataGridRendererCell<TEntry, TMetadata>>>;
+    /**
+     * Attributes that are bound directly to the `<tr>` element of the row.
+     */
+    trAttributes?: HTMLAttributes;
+};
+/**
+ * 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> = {
+    /**
+     * The component that renders the actual cell content and is placed into the `<td>` element.
+     */
+    component: DataGridRendererCellComponent<TEntry, TMetadata>;
+    /**
+     * Attributes and data that is provided to the component using `v-bind`.
+     */
+    props: DataGridRendererCellComponentProps<TEntry, TMetadata>;
+    /**
+     * Attributes that are bound directly to the `<td>` element of the cell.
+     */
+    tdAttributes?: TdHTMLAttributes;
+};
+/**
+ * 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> = {
+    /**
+     * Complete row data.
+     */
+    row: TEntry;
+    /**
+     * Cell data that is provided to the component via the `metadata` prop.
+     */
+    metadata?: TMetadata;
+    /**
+     * Cell data that is provided to the component via the `modelValue` prop.
+     * If the cell renders readonly, this will just be the non-editable value.
+     */
+    modelValue?: TEntry[keyof TEntry];
+};

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

@@ -0,0 +1,8 @@
+export type DataGridMetadata = Record<string, unknown>;
+/**
+ * "Raw" user data for a data grid entry/row, e.g. fetched from a backend service.
+ */
+export type DataGridEntry = {
+    id: PropertyKey;
+    [key: PropertyKey]: unknown;
+};

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

@@ -15,4 +15,27 @@ export type OnyxTableProps = DensityProp & {
      * - Warning: Don't set a max-height/width on the table when `withPageScrolling` is set.
      */
     withPageScrolling?: boolean;
+    /**
+     * Optional column groups that are rendered above the table head to group columns together.
+     * Slot `head` must be filled for this to work and `withVerticalBorders` property should be set.
+     */
+    columnGroups?: TableColumnGroup[];
+};
+/**
+ * Table group that is rendered as `<colgroup>` and corresponding `<th scope="colgroup">` inside the table.
+ */
+export type TableColumnGroup = {
+    /**
+     * Unique key to identify the column group.
+     */
+    key: PropertyKey;
+    /**
+     * Number of columns to span. Must be >= 1.
+     * Sum of all column group spans must add up to the total number of table columns.
+     */
+    span: number;
+    /**
+     * Header text to display.
+     */
+    header?: string;
 };