firstly 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # firstly
 
+## 0.7.0
+
+### Minor Changes
+
+- [#293](https://github.com/jycouet/firstly/pull/293) [`b70928c`](https://github.com/jycouet/firstly/commit/b70928c23ef5e6392abfdd9c57df03e009855abe) Thanks [@jycouet](https://github.com/jycouet)! - Add the cell layer: metadata-driven grids/forms over remult.
+  - **Published** (`firstly/svelte`): `buildCells` / `displayCell` / `<FF_Cell>` / `<FF_CellValue>` / `<GroupFields>` + the `FF_Config.cell` registry, with `%` widths, configurable per-column `sortable` (`defaultSortable`), and a `component`/`props` escape (lazy `CellComponent` thunks). Config is the SSoT on the entity via a new `hub` option on `EntityOptions`. **Plus `<FF_Grid>`** - a batteries-included demo grid (default skin + input, zero setup).
+  - **Boutique** (`src/boutique/grid`, copy-own): `App_Grid` / `App_Group` shells you degit to own the look.
+  - `DemoGrid` / `DemoForm` removed.
+
+## 0.6.3
+
+### Patch Changes
+
+- [#298](https://github.com/jycouet/firstly/pull/298) [`626db86`](https://github.com/jycouet/firstly/commit/626db8664ddcd480bc941ba38c51aaee742188c3) Thanks [@jycouet](https://github.com/jycouet)! - fix(deps): declare `@kitql/helpers` as a runtime dependency
+
+  `esm/index.js` does `import * as h from '@kitql/helpers'` (and re-exports it /
+  builds `ff_Log` from it), but the package only listed it under
+  `devDependencies`. Consumers that didn't happen to hoist it got
+  `Cannot find module '@kitql/helpers'` at runtime. Moved it into `dependencies`.
+
 ## 0.6.2
 
 ### Patch Changes

package/esm/changeLog/index.d.ts

@@ -46,4 +46,5 @@ export declare const withChangeLog: <entityType>(options?: EntityOptions<entityT
     apiRequireId?: import("remult").Allowed;
     dataProvider?: ((defaultDataProvider: import("remult").DataProvider) => import("remult").DataProvider | Promise<import("remult").DataProvider> | undefined | null) | undefined;
     changeLog?: false | ColumnDeciderArgs<entityType> | undefined;
+    hub?: import("../svelte").HubConfig<entityType> | undefined;
 };

package/esm/svelte/FF_Config.svelte

@@ -3,11 +3,11 @@
 
 	import { setFFConfig, type FF_ConfigValue } from './FF_Config.svelte.js'
 
-	let { children, messages, dialog, toast }: { children: Snippet } & FF_ConfigValue = $props()
+	let { children, messages, dialog, toast, cell }: { children: Snippet } & FF_ConfigValue = $props()
 
 	// Hand context a getter over our (reactive) props, not a snapshot - so descendants re-read
 	// the latest values and locale-aware message functions resolve fresh on each render.
-	setFFConfig(() => ({ messages, dialog, toast }))
+	setFFConfig(() => ({ messages, dialog, toast, cell }))
 </script>
 
 {@render children()}

package/esm/svelte/FF_Config.svelte.js

@@ -34,5 +34,8 @@ export function ffConfig() {
         get toast() {
             return get?.().toast ?? {};
         },
+        get cell() {
+            return get?.().cell ?? {};
+        },
     };
 }

package/esm/svelte/grid/DefaultInput.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	// Default cell input bundled with the published <FF_Grid> demo (token-only, currentColor based).
+	// An app that registers its own inputs via FF_Config.cell.inputs overrides this.
+	let {
+		value = $bindable(),
+		id,
+		type = 'text',
+		placeholder,
+	}: { value?: unknown; id?: string; type?: string; placeholder?: string } = $props()
+
+	let checked = $derived(value as boolean)
+</script>
+
+{#if type === 'number'}
+	<input {id} {placeholder} type="number" bind:value />
+{:else if type === 'checkbox'}
+	<input {id} type="checkbox" {checked} onchange={(e) => (value = e.currentTarget.checked)} />
+{:else}
+	<input
+		{id}
+		{placeholder}
+		type="text"
+		value={String(value ?? '')}
+		oninput={(e) => (value = e.currentTarget.value)}
+	/>
+{/if}
+
+<style>
+	input {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 5px 7px;
+		font: inherit;
+		color: inherit;
+		background: transparent;
+		border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+		border-radius: 6px;
+	}
+	input[type='checkbox'] {
+		width: auto;
+	}
+</style>

package/esm/svelte/grid/DefaultInput.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value?: unknown;
+    id?: string;
+    type?: string;
+    placeholder?: string;
+};
+declare const DefaultInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DefaultInput = ReturnType<typeof DefaultInput>;
+export default DefaultInput;

package/esm/svelte/grid/FF_Cell.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { getCellElementConfig, getStyle } from './cellConfig.js'
+	import type { CellProps } from './cellTypes.js'
+	import FF_Cell_Content from './FF_Cell_Content.svelte'
+	import FF_Cell_Error from './FF_Cell_Error.svelte'
+	import FF_Cell_Hint from './FF_Cell_Hint.svelte'
+	import FF_Cell_Label from './FF_Cell_Label.svelte'
+
+	type Props = { debug?: boolean; children?: Snippet; value?: unknown } & CellProps
+
+	let { children, value = $bindable(), ...props }: Props = $props()
+
+	const default_uid = $props.id()
+	let id = $derived(props.key ?? default_uid)
+	let ui = $derived(props.ui)
+	let mode = $derived(props.mode ?? 'edit')
+	let debug = $derived(props.debug === true ? true : undefined)
+
+	// getCellElementConfig() reads context, so resolve the base ONCE at init; merge reactive
+	// per-instance overrides in a $derived so a later props.content.config change re-styles.
+	const contentBase = getCellElementConfig('content')
+	const labelBase = getCellElementConfig('label')
+	let contentConfig = $derived({ ...contentBase, ...props.content?.config })
+
+	let hasError = $derived(!!props.error?.html)
+	let labelProps = $derived(
+		props.label
+			? {
+					...props.label,
+					config: {
+						...labelBase,
+						...props.label.config,
+						...(!hasError ? { width: 100 } : {}),
+					},
+				}
+			: undefined,
+	)
+</script>
+
+<div
+	data-ff-cell
+	style:--width={ui?.width ?? 100}
+	style:--margin-left={ui?.marginLeft ?? 0}
+	style:--margin-right={ui?.marginRight ?? 0}
+	style:--width-mobile={ui?.mobile?.width ?? 100}
+	style:--margin-left-mobile={ui?.mobile?.marginLeft ?? 0}
+	style:--margin-right-mobile={ui?.mobile?.marginRight ?? 0}
+	data-ff-cell-debug={debug}
+>
+	<FF_Cell_Label {id} elementProps={labelProps} />
+	<FF_Cell_Error {id} elementProps={props.error} />
+	{#if children}
+		<div data-ff-cells style={getStyle(contentConfig)}>{@render children?.()}</div>
+	{:else}
+		<FF_Cell_Content {id} {mode} contentProps={props.content} bind:value />
+	{/if}
+	<FF_Cell_Hint {id} elementProps={props.hint} />
+</div>
+
+<style>
+	[data-ff-cells] {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+	[data-ff-cell] {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		box-sizing: border-box;
+		padding: var(--ff-spacing, 0.5rem);
+		flex: 1 1 calc(var(--width, 100) * 1%);
+		max-width: calc(var(--width, 100) * 1%);
+		min-width: 0;
+		margin-left: calc(var(--margin-left, 0) * 1%);
+		margin-right: calc(var(--margin-right, 0) * 1%);
+	}
+	:global([data-ff-cell] > *) {
+		flex: 0 0 100%;
+		width: 100%;
+	}
+	[data-ff-cell][data-ff-cell-debug] {
+		outline: 1px solid var(--destructive, red);
+		outline-offset: -1px;
+	}
+	@media screen and (max-width: 40rem) {
+		[data-ff-cell] {
+			flex: 1 1 calc(var(--width-mobile, 100) * 1%);
+			max-width: calc(var(--width-mobile, 100) * 1%);
+			margin-left: calc(var(--margin-left-mobile, 0) * 1%);
+			margin-right: calc(var(--margin-right-mobile, 0) * 1%);
+			padding: 0.15rem;
+		}
+	}
+</style>

package/esm/svelte/grid/FF_Cell.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { CellProps } from './cellTypes.js';
+type Props = {
+    debug?: boolean;
+    children?: Snippet;
+    value?: unknown;
+} & CellProps;
+declare const FFCell: import("svelte").Component<Props, {}, "value">;
+type FFCell = ReturnType<typeof FFCell>;
+export default FFCell;

package/esm/svelte/grid/FF_CellValue.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" generics="E">
+	// Published cell-value renderer: the ONE place that turns a resolved Cell + row into output.
+	// Render order: cellSnippet → component (props + rowToProps) → field_link <a> → displayCell.
+	// Reused by the boutique FF_Grid and any app's own App_Grid, so the component+props escape is free.
+	// resolveCellComponent returns the Component synchronously for eager `() => Comp` thunks (so
+	// {#await} renders straight through, no flash) and a Promise for lazy `() => import(...)` thunks.
+	import { displayCell } from './buildCells.js'
+	import { resolveCellComponent } from './cellComponent.js'
+	import type { Cell } from './cellTypes.js'
+
+	let { cell, row }: { cell: Cell<E>; row: E } = $props()
+
+	const resolvedComp = $derived(cell.component ? resolveCellComponent(cell.component) : undefined)
+	const compProps = $derived({ ...(cell.props ?? {}), ...(cell.rowToProps?.(row) ?? {}) })
+	const href = $derived(cell.kind === 'field_link' ? cell.field?.options.href : undefined)
+</script>
+
+{#if cell.cellSnippet}{@render cell.cellSnippet({
+		row,
+		cell,
+	})}{:else if cell.component}{#await resolvedComp then C}{#if C}{@const Cc = C}<Cc
+				{...compProps}
+			/>{/if}{/await}{:else if href}<a data-ff-link href={href(row)}>{displayCell(cell, row)}</a
+	>{:else}{displayCell(cell, row)}{/if}

package/esm/svelte/grid/FF_CellValue.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Cell } from './cellTypes.js';
+declare function $$render<E>(): {
+    props: {
+        cell: Cell<E>;
+        row: E;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E> {
+    props(): ReturnType<typeof $$render<E>>['props'];
+    events(): ReturnType<typeof $$render<E>>['events'];
+    slots(): ReturnType<typeof $$render<E>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E>['props']>, ReturnType<__sveltets_Render<E>['events']>, ReturnType<__sveltets_Render<E>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E>['bindings']>;
+    } & ReturnType<__sveltets_Render<E>['exports']>;
+    <E>(internal: unknown, props: ReturnType<__sveltets_Render<E>['props']> & {}): ReturnType<__sveltets_Render<E>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FFCellValue: $$IsomorphicComponent;
+type FFCellValue<E> = InstanceType<typeof FFCellValue<E>>;
+export default FFCellValue;

package/esm/svelte/grid/FF_Cell_Content.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { getCellElementConfig, getStyle } from './cellConfig.js'
+	import type { CellContentProps, CellMode } from './cellTypes.js'
+
+	interface Props {
+		id: string
+		contentProps?: CellContentProps
+		value?: unknown
+		mode: CellMode
+	}
+	let { id, contentProps, value = $bindable(), mode }: Props = $props()
+	const base = getCellElementConfig('content')
+	const contentConfig = $derived({ ...base, ...contentProps?.config })
+	const Component = $derived(
+		mode === 'edit'
+			? contentProps?.component
+			: (contentProps?.componentReadonly ?? contentProps?.component),
+	)
+</script>
+
+{#if Component}
+	<div
+		id={id + '-content'}
+		data-ff-cell-content
+		class={contentConfig.class}
+		style={getStyle(contentConfig)}
+	>
+		<Component {id} {...contentProps?.props} bind:value>
+			{#if typeof contentProps?.children === 'string'}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted, app-authored content -->
+				{@html contentProps?.children}
+			{:else}
+				{contentProps?.children}
+			{/if}
+		</Component>
+	</div>
+{/if}

package/esm/svelte/grid/FF_Cell_Content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CellContentProps, CellMode } from './cellTypes.js';
+interface Props {
+    id: string;
+    contentProps?: CellContentProps;
+    value?: unknown;
+    mode: CellMode;
+}
+declare const FFCellContent: import("svelte").Component<Props, {}, "value">;
+type FFCellContent = ReturnType<typeof FFCellContent>;
+export default FFCellContent;

package/esm/svelte/grid/FF_Cell_Error.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getCellElementConfig, getStyle } from './cellConfig.js'
+	import type { CellElementProps } from './cellTypes.js'
+
+	interface Props {
+		id: string
+		elementProps?: CellElementProps
+	}
+	let { id, elementProps }: Props = $props()
+	const base = getCellElementConfig('error')
+	const config = $derived({ ...base, ...elementProps?.config })
+</script>
+
+{#if elementProps?.html}
+	<div id={id + '-error'} data-ff-cell-error class={config.class} style={getStyle(config)}>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted, app-authored error html -->
+		{@html elementProps?.html}
+	</div>
+{/if}
+
+<style>
+	[data-ff-cell-error] {
+		color: var(--color-error, red);
+		font-size: smaller;
+	}
+</style>

package/esm/svelte/grid/FF_Cell_Error.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CellElementProps } from './cellTypes.js';
+interface Props {
+    id: string;
+    elementProps?: CellElementProps;
+}
+declare const FFCellError: import("svelte").Component<Props, {}, "">;
+type FFCellError = ReturnType<typeof FFCellError>;
+export default FFCellError;

package/esm/svelte/grid/FF_Cell_Hint.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getCellElementConfig, getStyle } from './cellConfig.js'
+	import type { CellElementProps } from './cellTypes.js'
+
+	interface Props {
+		id: string
+		elementProps?: CellElementProps
+	}
+	let { id, elementProps }: Props = $props()
+	const base = getCellElementConfig('hint')
+	const config = $derived({ ...base, ...elementProps?.config })
+</script>
+
+{#if elementProps?.html}
+	<div id={id + '-hint'} data-ff-cell-hint class={config.class} style={getStyle(config)}>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted, app-authored hint html -->
+		{@html elementProps?.html}
+	</div>
+{/if}
+
+<style>
+	[data-ff-cell-hint] {
+		color: var(--muted-foreground, color-mix(in srgb, currentColor 60%, transparent));
+		font-size: smaller;
+	}
+</style>

package/esm/svelte/grid/FF_Cell_Hint.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CellElementProps } from './cellTypes.js';
+interface Props {
+    id: string;
+    elementProps?: CellElementProps;
+}
+declare const FFCellHint: import("svelte").Component<Props, {}, "">;
+type FFCellHint = ReturnType<typeof FFCellHint>;
+export default FFCellHint;

package/esm/svelte/grid/FF_Cell_Label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getCellElementConfig, getStyle } from './cellConfig.js'
+	import type { CellElementProps } from './cellTypes.js'
+
+	interface Props {
+		id: string
+		elementProps?: CellElementProps
+	}
+	let { id, elementProps }: Props = $props()
+	const base = getCellElementConfig('label')
+	const config = $derived({ ...base, ...elementProps?.config })
+</script>
+
+{#if elementProps}
+	<label
+		id={id + '-label'}
+		data-ff-cell-label
+		for={id}
+		class={config.class}
+		style={getStyle(config)}
+	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted, app-authored caption -->
+		{@html elementProps?.html}
+	</label>
+{/if}
+
+<style>
+	[data-ff-cell-label] {
+		display: block;
+		max-width: 100%;
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+</style>

package/esm/svelte/grid/FF_Cell_Label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CellElementProps } from './cellTypes.js';
+interface Props {
+    id: string;
+    elementProps?: CellElementProps;
+}
+declare const FFCellLabel: import("svelte").Component<Props, {}, "">;
+type FFCellLabel = ReturnType<typeof FFCellLabel>;
+export default FFCellLabel;