@public-ui/sample-react 3.0.6-rc.2 → 3.0.6

package/src/components/nav/links.ts

@@ -128,3 +128,64 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 		_icons: 'codicon codicon-squirrel',
 	},
 ];
+
+export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#/back-page',
+		_icons: 'codicon codicon-home',
+		_children: [
+			{
+				_label: '3.1 Navigation point',
+				_icons: 'codicon codicon-home',
+				_href: '#/back-page',
+			},
+			{
+				_label: '3.2 Navigation point',
+				_target: 'asdasd',
+			},
+			{
+				_label: '3.3 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.3.1 Navigation point',
+						_href: '#/back-page',
+						_active: true,
+					},
+					{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{
+				_label: '3.4 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.4.1 Navigation point',
+						_href: '#/back-page',
+						_children: [
+							{ _label: '3.4.1.1 Navigation point', _href: '#/back-page' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#/back-page' },
+						],
+					},
+					{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{ _label: '3.5 Navigation point', _href: '#/back-page' },
+		],
+	},
+];

package/src/components/table/predefined-settings.tsx

@@ -15,6 +15,7 @@ export const PredefinedSettings: FC = () => {
 			<KolTableStateful
 				_label="Table for demonstration purposes with predefined settings"
 				_minWidth="auto"
+				_hasSettingsMenu
 				_headers={{
 					horizontal: [
 						[

package/src/components/table/routes.ts

@@ -13,6 +13,7 @@ import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatefulWithSingleSelection } from './stateful-with-single-selection';
 import { TableStateless } from './stateless';
 import { TableStatelessWithSelection } from './stateless-with-selection';
+import { TableStatelessWithSettingsMenu } from './stateless-with-settings-menu';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
 import { TableWithFooter } from './with-footer';
 import { TableWithPagination } from './with-pagination';
@@ -30,6 +31,7 @@ export const TABLE_ROUTES: Routes = {
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'stateful-with-selection': TableStatefulWithSelection,
+		'stateless-with-settings-menu': TableStatelessWithSettingsMenu,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,
 		stateless: TableStateless,
 		'stateless-with-selection': TableStatelessWithSelection,

package/src/components/table/stateless-with-settings-menu.tsx

@@ -0,0 +1,52 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolTableStateless } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type Data = {
+	id: string;
+	name: string;
+	role: string;
+	email: string;
+	active: string;
+};
+const DATA: Data[] = [
+	{ id: 'U1001', name: 'Alice Johnson', role: 'Admin', email: 'alice@example.org', active: 'Yes' },
+	{ id: 'U1002', name: 'Bob Smith', role: 'Editor', email: 'bob@example.org', active: 'No' },
+	{ id: 'U1003', name: 'Carol Lee', role: 'Viewer', email: 'carol@example.org', active: 'Yes' },
+	{ id: 'U1004', name: 'David Kim', role: 'Editor', email: 'david@example.org', active: 'Yes' },
+];
+
+export const TableStatelessWithSettingsMenu: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows <code>KolTableStateless</code> with the settings menu enabled via
+				<code>_hasSettingsMenu</code>.
+			</p>
+		</SampleDescription>
+
+		<KolTableStateless
+			_label="Users (stateless with settings menu)"
+			_minWidth="auto"
+			className="w-full"
+			_hasSettingsMenu={true}
+			_headerCells={{
+				horizontal: [
+					[
+						{ key: 'id', label: 'ID', textAlign: 'center' },
+						{ key: 'name', label: 'Name', textAlign: 'center' },
+						{ key: 'role', label: 'Role', textAlign: 'center' },
+						{ key: 'email', label: 'E-Mail', textAlign: 'center' },
+						{ key: 'active', label: 'Active', textAlign: 'center' },
+					],
+				],
+			}}
+			_data={DATA}
+			_on={{
+				onSort: (_e, payload) => console.log('sort', payload),
+				onSelectionChange: (_e, value) => console.log('selection', value),
+			}}
+		/>
+	</>
+);

package/dist/assets/has-closer-BBMh8HY3-DeWbbwrD.js

@@ -1,4 +0,0 @@
-import{m as s}from"./index-CGuVdj-x.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-BBMh8HY3-DeWbbwrD.js.map

package/dist/assets/image-source-RWPv7frZ-CTZqZIfD.js

@@ -1,4 +0,0 @@
-import{n as o}from"./index-CGuVdj-x.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-RWPv7frZ-CTZqZIfD.js.map