Merge branch 'main' into fix/1614-Replace-cursor-pointer-with-default

.changeset/pre.json

@@ -264,6 +264,7 @@
  "spotty-worms-leave",
  "stale-dodos-relax",
  "stale-keys-crash",
+ "stale-owls-burn",
  "stale-parrots-fold",
  "strange-elephants-cover",
  "strange-starfishes-sparkle",

.changeset/stale-owls-burn.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": minor
+---
+
+feat: implement basic OnyxDataGridRenderer component
+
+- also support column grouping for the `OnyxTable` component via the `columnGroups` property

apps/demo-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # demo-app
 
+## 1.0.0-beta.47
+
+### Patch Changes
+
+- Updated dependencies [8aa66eb]
+ - [email protected]
+
 ## 1.0.0-beta.46
 
 ### Patch Changes

apps/demo-app/package.json

@@ -1,7 +1,7 @@
 {
  "name": "demo-app",
  "private": true,
- "version": "1.0.0-beta.46",
+ "version": "1.0.0-beta.47",
  "type": "module",
  "scripts": {
  "dev": "turbo run vite --filter demo-app",

apps/playground/CHANGELOG.md

@@ -1,5 +1,12 @@
 # playground
 
+## 1.0.0-beta.47
+
+### Patch Changes
+
+- Updated dependencies [8aa66eb]
+ - [email protected]
+
 ## 1.0.0-beta.46
 
 ### Patch Changes

apps/playground/package.json

@@ -1,6 +1,6 @@
 {
  "name": "playground",
- "version": "1.0.0-beta.46",
+ "version": "1.0.0-beta.47",
  "description": "Playground for the onyx Vue components",
  "type": "module",
  "author": "Schwarz IT KG",

packages/chartjs-plugin/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-beta.47
+
+### Patch Changes
+
+- Updated dependencies [8aa66eb]
+ - [email protected]
+
 ## 1.0.0-beta.46
 
 ### Patch Changes

packages/chartjs-plugin/package.json

@@ -1,7 +1,7 @@
 {
  "name": "@sit-onyx/chartjs-plugin",
  "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
- "version": "1.0.0-beta.46",
+ "version": "1.0.0-beta.47",
  "type": "module",
  "author": "Schwarz IT KG",
  "license": "Apache-2.0",

packages/nuxt/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-beta.48
+
+### Patch Changes
+
+- Updated dependencies [8aa66eb]
+ - [email protected]
+
 ## 1.0.0-beta.47
 
 ### Patch Changes

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sit-onyx/nuxt",
- "version": "1.0.0-beta.47",
+ "version": "1.0.0-beta.48",
  "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
  "author": "Schwarz IT KG",
  "license": "Apache-2.0",

packages/sit-onyx/CHANGELOG.md

@@ -1,5 +1,13 @@
 # sit-onyx
 
+## 1.0.0-beta.47
+
+### Minor Changes
+
+- 8aa66eb: feat: implement basic OnyxDataGridRenderer component
+
+ - also support column grouping for the `OnyxTable` component via the `columnGroups` property
+
 ## 1.0.0-beta.46
 
 ### Patch Changes

packages/sit-onyx/package.json

@@ -1,7 +1,7 @@
 {
  "name": "sit-onyx",
  "description": "A design system and Vue.js component library created by Schwarz IT",
- "version": "1.0.0-beta.46",
+ "version": "1.0.0-beta.47",
  "type": "module",
  "author": "Schwarz IT KG",
  "license": "Apache-2.0",

packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h, type TdHTMLAttributes } from "vue";
+import type { DataGridEntry } from "../types";
+import OnyxDataGridRenderer from "./OnyxDataGridRenderer.vue";
+import type { DataGridRendererCell, DataGridRendererColumn, DataGridRendererRow } from "./types";
+
+const meta: Meta<typeof OnyxDataGridRenderer> = {
+ title: "Support/DataGridRenderer",
+ component: OnyxDataGridRenderer,
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxDataGridRenderer>;
+
+export const Default = {
+ args: {
+ columns: Array.from({ length: 4 }, (_, index) => getDummyColumn(index + 1)),
+ rows: Array.from({ length: 10 }, (_, index) => getDummyRow(index + 1)),
+ },
+} satisfies Story;
+
+/**
+ * This example shows a data grid that renders grouped rows and columns.
+ */
+export const GroupedData = {
+ args: {
+ withVerticalBorders: true,
+ columnGroups: [
+ {
+ key: "ungrouped",
+ span: 1,
+ },
+ {
+ key: "group-1",
+ span: 2,
+ header: "Group 1",
+ },
+ {
+ key: "group-2",
+ span: 1,
+ header: "Group 2",
+ },
+ ],
+ columns: Array.from({ length: 4 }, (_, index) => getDummyColumn(index + 1)),
+ rows: [
+ {
+ id: "row-1",
+ cells: {
+ "column-1": getDummyCell(`Row 1 and 2, cell 1`, { rowspan: 2 }),
+ "column-2": getDummyCell(`Row 1, cell 2`),
+ "column-3": getDummyCell(`Row 1, cell 3`),
+ "column-4": getDummyCell(`Row 1, cell 4`),
+ },
+ },
+ {
+ id: "row-2",
+ cells: {
+ "column-2": getDummyCell(`Row 2, cell 2`, {
+ style: {
+ borderLeftStyle: "none",
+ },
+ }),
+ "column-3": getDummyCell(`Row 2, cell 3`),
+ "column-4": getDummyCell(`Row 2, cell 4`),
+ },
+ },
+ {
+ id: "row-3",
+ cells: {
+ "column-1": getDummyCell(`Row 3, cell 1`),
+ "column-2": getDummyCell(`Row 3, cell 2`),
+ "column-3": getDummyCell(`Row 3, cell 3`),
+ "column-4": getDummyCell(`Row 3, cell 4`),
+ },
+ },
+ {
+ id: "row-4",
+ cells: {
+ "column-1": getDummyCell(`Row 4, cell 1`),
+ "column-2": getDummyCell(`Row 4, cell 2 and 3`, {
+ colspan: 3,
+ }),
+ },
+ },
+ ],
+ },
+} satisfies Story;
+
+/**
+ * Creates a new column for use as Storybook example.
+ */
+function getDummyColumn(columnNumber: number): DataGridRendererColumn<DataGridEntry, object> {
+ return {
+ key: `column-${columnNumber}`,
+ component: (props) => h("span", props.title),
+ props: {
+ title: `Column ${columnNumber}`,
+ },
+ };
+}
+
+/**
+ * Creates a new cell for use as Storybook example.
+ */
+function getDummyCell(
+ id: string,
+ tdAttributes?: TdHTMLAttributes,
+): DataGridRendererCell<DataGridEntry> {
+ return {
+ component: (props) => h("span", props.row.id.toString()),
+ tdAttributes,
+ props: {
+ row: {
+ id,
+ },
+ },
+ };
+}
+
+/**
+ * Creates a new row for use as Storybook example.
+ */
+function getDummyRow(
+ rowNumber: number,
+): DataGridRendererRow<{ id: PropertyKey; [key: PropertyKey]: unknown }> {
+ return {
+ id: `row-${rowNumber}`,
+ cells: {
+ "column-1": getDummyCell(`Row ${rowNumber}, cell 1`),
+ "column-2": getDummyCell(`Row ${rowNumber}, cell 2`),
+ "column-3": getDummyCell(`Row ${rowNumber}, cell 3`),
+ "column-4": getDummyCell(`Row ${rowNumber}, cell 4`),
+ },
+ };
+}

packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup generic="TEntry extends DataGridEntry, TMetadata extends DataGridMetadata">
+import OnyxTable from "../../OnyxTable/OnyxTable.vue";
+import type { DataGridEntry, DataGridMetadata } from "../types";
+import type { OnyxDataGridRendererProps } from "./types";
+
+const props = defineProps<OnyxDataGridRendererProps<TEntry, TMetadata>>();
+</script>
+
+<template>
+ <OnyxTable class="onyx-data-grid" v-bind="props">
+ <template #head>
+ <tr>
+ <th
+ v-for="column in props.columns"
+ :key="column.key"
+ v-bind="column.thAttributes"
+ scope="col"
+ >
+ <component :is="column.component" v-bind="column.props" />
+ </th>
+ </tr>
+ </template>
+
+ <tr v-for="row in props.rows" :key="row.id" v-bind="row.trAttributes">
+ <template v-for="column in props.columns" :key="column.key">
+ <td v-if="row.cells[column.key]" v-bind="row.cells[column.key]!.tdAttributes">
+ <!-- We are safe to use the Non-Null Assertion operator ("!") here, as we check beforehand with "v-if" -->
+ <component :is="row.cells[column.key]!.component" v-bind="row.cells[column.key]!.props" />
+ </td>
+ </template>
+ </tr>
+ </OnyxTable>
+</template>
+
+<style lang="scss">
+@use "../../../styles/mixins/layers.scss";
+
+.onyx-data-grid {
+ @include layers.component() {
+ }
+}
+</style>