Reformat & some fixes

.github/workflows/pages.yaml

@@ -2,13 +2,13 @@ name: Deploy to Github Pages
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:

README.md

@@ -137,12 +137,19 @@ export const booksCrud = new CrudDefinition(
 		],
 
 		// See below about state processors and providers.
-		stateProcessor: new CallbackStateProcessor(function (data: any, action: BaseCrudAction, requestParameters = {}): void {
+		stateProcessor: new CallbackStateProcessor(function (
+			data: any,
+			action: BaseCrudAction,
+			requestParameters = {}
+		): void {
 			console.info('TODO: process new, edit or delete data based on the current action');
 		}),
 
 		// See below about state processors and providers.
-		stateProvider: new CallbackStateProvider(function (action: BaseCrudAction, requestParameters: KeyValueObject = {}): Array | null {
+		stateProvider: new CallbackStateProvider(function (
+			action: BaseCrudAction,
+			requestParameters: KeyValueObject = {}
+		): Array | null {
 			console.info('TODO: return actual data, like from an API');
 
 			return null;
@@ -171,7 +178,7 @@ Create a `src/routes/[crud]/[action]/+page.svelte` file with the following code:
 <script lang="ts">
 	import Dashboard from '$lib/admin/Dashboard/Dashboard.svelte';
 	import { page } from '$app/stores';
-	import { browser } from "$app/environment";
+	import { browser } from '$app/environment';
 	import { dashboard } from '../../../../testApp/Dashboard.ts';
 	import { getRequestParams } from '$lib/admin/request.ts';
 
@@ -181,7 +188,7 @@ Create a `src/routes/[crud]/[action]/+page.svelte` file with the following code:
 </script>
 
 {#key $page}
-	<Dashboard {dashboard} {crud} {action} {requestParameters} />
+<Dashboard {dashboard} {crud} {action} {requestParameters} />
 {/key}
 
 <script lang="ts">
@@ -202,7 +209,7 @@ Create a `src/routes/[crud]/[action]/+page.svelte` file with the following code:
 	// Same here as the previous "page" store, but the "browser" var contains
 	//   a boolean that is set to "false" during server-side rendering, and to
 	//   "true" when the Svelte component is mounted to the DOM.
-	import { browser } from "$app/environment";
+	import { browser } from '$app/environment';
 
 	// That's your custom dashboard!
 	// The "$lib" alias is configured by SvelteKit,
@@ -232,7 +239,7 @@ Here is the shorter version with no comments, if you want to copy-paste for a qu
 <script lang="ts">
 	import { DashboardComponent, getRequestParams } from '@orbitale/svelte-admin';
 	import { page } from '$app/stores';
-	import { browser } from "$app/environment";
+	import { browser } from '$app/environment';
 	import { dashboard } from '$lib/admin/Dashboard.ts';
 
 	$: crud = $page.params.crud;
@@ -241,7 +248,7 @@ Here is the shorter version with no comments, if you want to copy-paste for a qu
 </script>
 
 {#key $page}
-	<Dashboard {dashboard} {crud} {action} {requestParameters} />
+<Dashboard {dashboard} {crud} {action} {requestParameters} />
 {/key}
 ```
 
@@ -257,8 +264,8 @@ export interface StateProvider {
 }
 ```
 
-* The `action` object is the same as one of the Crud actions, the ones you configure in your `CrudDefinition` objects.<br>It allows you to return different data in the `List` and ̀`Edit` actions, with a simple `if` statement to discriminate both.
-* The `requestParameters` is just a key=>value object, matching this typescript type: `{[key: string]: string}`.<br>As you have seen above in the default Svelte template we wrote, these come from both the QueryString and the Route Params.<br>It will therefore contain the `[crud]` and `[action]` parameters extracted from the URL, but also the entity ID if you add it via `?id=...` for example.
+- The `action` object is the same as one of the Crud actions, the ones you configure in your `CrudDefinition` objects.<br>It allows you to return different data in the `List` and ̀`Edit` actions, with a simple `if` statement to discriminate both.
+- The `requestParameters` is just a key=>value object, matching this typescript type: `{[key: string]: string}`.<br>As you have seen above in the default Svelte template we wrote, these come from both the QueryString and the Route Params.<br>It will therefore contain the `[crud]` and `[action]` parameters extracted from the URL, but also the entity ID if you add it via `?id=...` for example.
 
 The return type `StateProviderResult` corresponds to the `object | Array<any> | null` type, so you could return almost anything that represents an entity, or a list of entities.
 

src/lib/admin/Crud/CrudForm.svelte

@@ -77,12 +77,7 @@
 			</FormGroup>
 		{/each}
 	{:else}
-		<Tabs
-			fields={tabbed_fields}
-			action={crudAction}
-			{defaultData}
-			on:fieldChange
-		/>
+		<Tabs fields={tabbed_fields} action={crudAction} {defaultData} on:fieldChange />
 	{/if}
 
 	<Button kind={submitButtonType} type="submit">{$_('crud.form.submit')}</Button>

src/lib/admin/Crud/CrudList.svelte

@@ -25,7 +25,9 @@
 
 	let rows = crud.options.stateProvider.provide(action, requestParameters);
 	if (rows && !Array.isArray(rows)) {
-		throw new Error('CrudList expected state provider to return an array, current result is non-empty and not an array.');
+		throw new Error(
+			'CrudList expected state provider to return an array, current result is non-empty and not an array.'
+		);
 	}
 	if (!rows || !rows.length) {
 		rows = [createEmptyRow(action)];

src/lib/admin/Crud/Tabs.svelte

@@ -19,7 +19,7 @@
 		{#each fields as tabbed_field (tabbed_field.name)}
 			<TabContent>
 				<CrudFormField
-					action={action}
+					{action}
 					field={tabbed_field}
 					{defaultData}
 					value={defaultData[tabbed_field.name]}

src/lib/admin/DataTable/actions/ItemActions.svelte

@@ -6,7 +6,7 @@
 	import type { Action } from '../../actions';
 
 	export let actions: Action[] = [];
-	export let item: object|undefined = undefined;
+	export let item: object | undefined = undefined;
 </script>
 
 <Grid style="max-width: 14rem;">

src/lib/admin/DataTable/actions/SingleAction.svelte

@@ -7,7 +7,7 @@
 	import { type Action, CallbackAction, UrlAction } from '../../actions';
 
 	export let action: Action;
-	export let item: object|undefined = undefined;
+	export let item: object | undefined = undefined;
 
 	function clickLink() {
 		console.info('CLICK args', arguments);

src/lib/admin/FieldDefinitions/TabsField.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'svelte';
-import type { Field, FieldInterface } from './Field';
+import type { FieldInterface } from './Field';
 import TabsFieldComponent from '../Crud/FieldComponents/TabsField.svelte';
 import type { Options } from './Options';
 

src/lib/admin/index.js

@@ -1,6 +1,7 @@
 //
-// Classes
+// Classes & functions
 //
+export { CallbackAction, UrlAction } from './actions.ts';
 export { BaseCrudAction, NewAction, EditAction, ListAction, DeleteAction } from './Crud/actions.ts';
 export { CrudDefinition } from './Crud/definition.ts';
 
@@ -15,11 +16,13 @@ export { TextField } from './FieldDefinitions/Text.ts';
 export { ToggleField } from './FieldDefinitions/Toggle.ts';
 export { UrlField } from './FieldDefinitions/Url.ts';
 
-export { Submenu } from './Menu/MenuLinks.ts';
+export { Submenu, Divider } from './Menu/MenuLinks.ts';
 
 export { CallbackStateProcessor } from './State/Processor.ts';
 export { CallbackStateProvider } from './State/Provider.ts';
 
+export { getRequestParams } from './request.ts';
+
 //
 // Components
 //

src/routes/+page.svelte

@@ -10,11 +10,14 @@
 	<h1>Svelte Admin demo app</h1>
 
 	<p>
-		Svelte Admin is a (currently prototype) admin generator delivered as a Typescript library and a set of Svelte components as rendering system.
+		Svelte Admin is a (currently prototype) admin generator delivered as a Typescript library and a
+		set of Svelte components as rendering system.
 	</p>
 
 	<p>
-		If you detect any bug in this demo, feel free to clone the project or submit an issue in the [Github Repository (https://github.com/Orbitale/SvelteAdmin)](https://github.com/Orbitale/SvelteAdmin)!
+		If you detect any bug in this demo, feel free to clone the project or submit an issue in the
+		[Github Repository
+		(https://github.com/Orbitale/SvelteAdmin)](https://github.com/Orbitale/SvelteAdmin)!
 	</p>
 
 	<p>Here are the available CRUDs for the demo app:</p>

src/routes/admin/[crud]/[action]/+page.server.ts

@@ -1,4 +1,4 @@
-import {dashboard} from "../../../../testApp/Dashboard.ts";
+import { dashboard } from '../../../../testApp/Dashboard.ts';
 
 export const prerender = true;
 
@@ -10,8 +10,8 @@ export function entries() {
 		for (const action of crud.options.actions) {
 			routes.push({
 				crud: crud.name,
-				action: action.name,
-			})
+				action: action.name
+			});
 		}
 	}
 

src/routes/admin/[crud]/[action]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Dashboard from '$lib/admin/Dashboard/Dashboard.svelte';
 	import { page } from '$app/stores';
-	import { browser } from "$app/environment";
+	import { browser } from '$app/environment';
 	import { dashboard } from '../../../../testApp/Dashboard.ts';
 	import { getRequestParams } from '$lib/admin/request.ts';
 

src/testApp/BookCrud.ts

@@ -50,7 +50,9 @@ export const bookCrud = new CrudDefinition('books', {
 			requestParameters
 		});
 		if (operation.name === 'delete') {
-			alert(`Book ${requestParameters.id} was requested for deletion, but it's only a demo app, so as everything is in memory, you will still see it, please forgive us :)`)
+			alert(
+				`Book ${requestParameters.id} was requested for deletion, but it's only a demo app, so as everything is in memory, you will still see it, please forgive us :)`
+			);
 		}
 	}),
 

svelte.config.js

@@ -1,23 +1,20 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
-import { optimizeImports } from "carbon-preprocess-svelte";
+import { optimizeImports } from 'carbon-preprocess-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: [
-		vitePreprocess(),
-		optimizeImports(),
-	],
+	preprocess: [vitePreprocess(), optimizeImports()],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter({
-			fallback: 'index.html',
-		}),
+			fallback: 'index.html'
+		})
 	},
 
 	customElement: true,