svelte-flexiboards 0.4.0 → 0.4.2

package/dist/components/flexi-portal.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-	import { flexiportal, destroyFlexiportal } from '../system/portal.js';
-	import { onMount } from 'svelte';
-
-	// Simply just wait until we're mounted to the DOM before initialising the portal.
-	onMount(() => {
-		flexiportal();
-
-		// Garbage collect on destroy
-		return () => {
-			destroyFlexiportal();
-		};
-	});
-</script>
+<script lang="ts">
+	import { flexiportal, destroyFlexiportal } from '../system/portal.js';
+	import { onMount } from 'svelte';
+
+	// Simply just wait until we're mounted to the DOM before initialising the portal.
+	onMount(() => {
+		flexiportal();
+
+		// Garbage collect on destroy
+		return () => {
+			destroyFlexiportal();
+		};
+	});
+</script>

package/dist/components/flexi-resize.svelte

@@ -1,30 +1,30 @@
-<script module lang="ts">
-	import { flexiresize } from '../system/widget/index.js';
-	import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassValue } from 'svelte/elements';
-
-	type FlexiResizeProps = {
-		children?: Snippet<[{ widget: FlexiWidgetController }]>;
-		class?: ClassValue;
-	};
-</script>
-
-<script lang="ts">
-	let { class: className, children }: FlexiResizeProps = $props();
-
-	const { widget, onpointerdown, onkeydown } = flexiresize();
-</script>
-
-<button
-	style={'user-select: none; touch-action: none;' +
-		(widget.resizability != 'none' && widget.mounted
-			? 'cursor: nwse-resize'
-			: 'cursor: not-allowed')}
-	class={className}
-	disabled={widget.resizability == 'none' || !widget.mounted}
-	{onpointerdown}
-	{onkeydown}
->
-	{@render children?.({ widget })}
-</button>
+<script module lang="ts">
+	import { flexiresize } from '../system/widget/index.js';
+	import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	type FlexiResizeProps = {
+		children?: Snippet<[{ widget: FlexiWidgetController }]>;
+		class?: ClassValue;
+	};
+</script>
+
+<script lang="ts">
+	let { class: className, children }: FlexiResizeProps = $props();
+
+	const { widget, onpointerdown, onkeydown } = flexiresize();
+</script>
+
+<button
+	style={'user-select: none; touch-action: none;' +
+		(widget.resizability != 'none' && widget.mounted
+			? 'cursor: nwse-resize'
+			: 'cursor: not-allowed')}
+	class={className}
+	disabled={widget.resizability == 'none' || !widget.mounted}
+	{onpointerdown}
+	{onkeydown}
+>
+	{@render children?.({ widget })}
+</button>

package/dist/components/flexi-target-loader.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-	import { getInternalFlexitargetCtx } from '../system/target/index.js';
-	import { onMount } from 'svelte';
-
-	// This is a simple component that triggers the initial layout load.
-	// We must do this after instantiating all other components, otherwise we won't have established
-	// the target layout of our Flexiboard.
-
-	const target = getInternalFlexitargetCtx();
-
-	onMount(() => {
-		target.oninitialloadcomplete();
-	});
-</script>
+<script lang="ts">
+	import { getInternalFlexitargetCtx } from '../system/target/index.js';
+	import { onMount } from 'svelte';
+
+	// This is a simple component that triggers the initial layout load.
+	// We must do this after instantiating all other components, otherwise we won't have established
+	// the target layout of our Flexiboard.
+
+	const target = getInternalFlexitargetCtx();
+
+	onMount(() => {
+		target.oninitialloadcomplete();
+	});
+</script>

package/dist/components/flexi-target.svelte

@@ -1,104 +1,104 @@
-<script module lang="ts">
-	import { onDestroy, tick, untrack, type Snippet } from 'svelte';
-	import { flexitarget } from '../system/target/index.js';
-	import type { FlexiTargetController } from '../system/target/base.svelte.js';
-	import type { FlexiTargetPartialConfiguration } from '../system/target/types.js';
-
-	import type { FlexiCommonProps } from '../system/types.js';
-
-	export type FlexiTargetProps = FlexiCommonProps<FlexiTargetController> & {
-		/**
-		 * The header content of the target, above the grid.
-		 */
-		header?: Snippet<[{ target: FlexiTargetController }]>;
-
-		/**
-		 * The child content of the target, which should contain inner FlexiWidget
-		 * definitions.
-		 */
-		children?: Snippet;
-
-		/**
-		 * The footer content of the target, below the grid.
-		 */
-		footer?: Snippet<[{ target: FlexiTargetController }]>;
-
-		/**
-		 * The class names to apply to the target's container element.
-		 */
-		containerClass?: string;
-
-		/**
-		 * The class names to apply to the target's grid element.
-		 */
-		class?: string;
-
-		/**
-		 * The configuration object for the target.
-		 */
-		config?: FlexiTargetPartialConfiguration;
-
-		/**
-		 * The unique identifier for the target.
-		 * Used to identify the target when layouts are imported or exported.
-		 */
-		key?: string;
-	};
-</script>
-
-<script lang="ts">
-	import FlexiGrid from './flexi-grid.svelte';
-	import FlexiTargetLoader from './flexi-target-loader.svelte';
-	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
-	import type { InternalFlexiWidgetController } from '../system/widget/controller.svelte.js';
-
-	let {
-		children,
-		class: className,
-		header,
-		footer,
-		config,
-		containerClass,
-		controller = $bindable(),
-		key,
-		onfirstcreate
-	}: FlexiTargetProps = $props();
-
-	const { target } = flexitarget(config, key);
-
-	// Target created, allow the caller to access it.
-	controller = target;
-	onfirstcreate?.(target);
-
-	// Cleanup target subscriptions when component is destroyed
-	onDestroy(() => {
-		target.destroy();
-	});
-</script>
-
-<div class={containerClass}>
-	{@render header?.({ target: target as FlexiTargetController })}
-
-	<!-- Allow user to specify components directly via a registration component. Once that's done, mount them to the actual target list dynamically -->
-	<FlexiGrid class={className}>
-		{#if children}
-			<!-- Keep the initial widgets 'rendered' so that state inside children snippet doesn't get lost -->
-			<div style={target.prepared ? 'visibility: hidden;' : ''}>
-				{@render children()}
-			</div>
-		{/if}
-		{#if target.prepared}
-			<!-- Render widgets in deterministic order for tabbing and consistent DOM ordering -->
-			{#each target.orderedWidgets as widget (widget.id)}
-				<RenderedFlexiWidget {widget} />
-			{/each}
-
-			{#if target.dropzoneWidget && target.shouldRenderDropzoneWidget}
-				<RenderedFlexiWidget widget={target.dropzoneWidget} />
-			{/if}
-		{/if}
-	</FlexiGrid>
-	{@render footer?.({ target })}
-</div>
-
-<FlexiTargetLoader />
+<script module lang="ts">
+	import { onDestroy, tick, untrack, type Snippet } from 'svelte';
+	import { flexitarget } from '../system/target/index.js';
+	import type { FlexiTargetController } from '../system/target/base.svelte.js';
+	import type { FlexiTargetPartialConfiguration } from '../system/target/types.js';
+
+	import type { FlexiCommonProps } from '../system/types.js';
+
+	export type FlexiTargetProps = FlexiCommonProps<FlexiTargetController> & {
+		/**
+		 * The header content of the target, above the grid.
+		 */
+		header?: Snippet<[{ target: FlexiTargetController }]>;
+
+		/**
+		 * The child content of the target, which should contain inner FlexiWidget
+		 * definitions.
+		 */
+		children?: Snippet;
+
+		/**
+		 * The footer content of the target, below the grid.
+		 */
+		footer?: Snippet<[{ target: FlexiTargetController }]>;
+
+		/**
+		 * The class names to apply to the target's container element.
+		 */
+		containerClass?: string;
+
+		/**
+		 * The class names to apply to the target's grid element.
+		 */
+		class?: string;
+
+		/**
+		 * The configuration object for the target.
+		 */
+		config?: FlexiTargetPartialConfiguration;
+
+		/**
+		 * The unique identifier for the target.
+		 * Used to identify the target when layouts are imported or exported.
+		 */
+		key?: string;
+	};
+</script>
+
+<script lang="ts">
+	import FlexiGrid from './flexi-grid.svelte';
+	import FlexiTargetLoader from './flexi-target-loader.svelte';
+	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
+	import type { InternalFlexiWidgetController } from '../system/widget/controller.svelte.js';
+
+	let {
+		children,
+		class: className,
+		header,
+		footer,
+		config,
+		containerClass,
+		controller = $bindable(),
+		key,
+		onfirstcreate
+	}: FlexiTargetProps = $props();
+
+	const { target } = flexitarget(config, key);
+
+	// Target created, allow the caller to access it.
+	controller = target;
+	onfirstcreate?.(target);
+
+	// Cleanup target subscriptions when component is destroyed
+	onDestroy(() => {
+		target.destroy();
+	});
+</script>
+
+<div class={containerClass}>
+	{@render header?.({ target: target as FlexiTargetController })}
+
+	<!-- Allow user to specify components directly via a registration component. Once that's done, mount them to the actual target list dynamically -->
+	<FlexiGrid class={className}>
+		{#if children}
+			<!-- Keep the initial widgets 'rendered' so that state inside children snippet doesn't get lost -->
+			<div style={target.prepared ? 'visibility: hidden;' : ''}>
+				{@render children()}
+			</div>
+		{/if}
+		{#if target.prepared}
+			<!-- Render widgets in deterministic order for tabbing and consistent DOM ordering -->
+			{#each target.orderedWidgets as widget (widget.id)}
+				<RenderedFlexiWidget {widget} />
+			{/each}
+
+			{#if target.dropzoneWidget && target.shouldRenderDropzoneWidget}
+				<RenderedFlexiWidget widget={target.dropzoneWidget} />
+			{/if}
+		{/if}
+	</FlexiGrid>
+	{@render footer?.({ target })}
+</div>
+
+<FlexiTargetLoader />

package/dist/components/flexi-widget.svelte

@@ -1,81 +1,81 @@
-<script module lang="ts">
-	import type { FlexiCommonProps } from '../system/types.js';
-	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
-	import { onDestroy, onMount } from 'svelte';
-	import type {
-		FlexiWidgetChildrenSnippet,
-		FlexiWidgetClasses,
-		FlexiWidgetConfiguration
-	} from '../system/widget/types.js';
-	import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
-	import { flexiwidget } from '../system/widget/index.js';
-
-	export type FlexiWidgetProps = FlexiCommonProps<FlexiWidgetController> &
-		Exclude<FlexiWidgetConfiguration, 'className' | 'snippet'> & {
-			class?: FlexiWidgetClasses;
-			children?: FlexiWidgetChildrenSnippet;
-		};
-</script>
-
-<script lang="ts">
-	let {
-		class: className = $bindable(),
-		children = $bindable(),
-		controller = $bindable(),
-		onfirstcreate,
-		...propsConfig
-	}: FlexiWidgetProps = $props();
-
-	let config: FlexiWidgetConfiguration = $state({
-		...propsConfig,
-		...(className !== undefined && { className }),
-		...(children !== undefined && { snippet: children })
-	});
-
-	// Callback so that we still fulfil these props.
-	function onWidgetCreated(widget: FlexiWidgetController) {
-		controller = widget;
-		onfirstcreate?.(widget);
-	}
-
-	flexiwidget(config, onWidgetCreated);
-
-	// let derivedClassName = $derived.by(() => {
-	// 	if (typeof widget.className === 'function') {
-	// 		return widget.className(widget);
-	// 	}
-
-	// 	return widget.className;
-	// });
-
-	// let assistiveTextId = generateUniqueId();
-</script>
-
-<!-- Only use noscript as an SSR fallback, because it won't look the same as the hydrated version. -->
-<!-- <noscript style="display: contents;">
-	<div
-		class={derivedClassName}
-		aria-grabbed={widget.isGrabbed}
-		style={widget.style}
-		role="cell"
-		aria-label="Idle widget"
-		aria-colindex={widget.x}
-		aria-rowindex={widget.y}
-		aria-colspan={widget.width}
-		aria-rowspan={widget.height}
-		aria-describedby={assistiveTextId}
-		tabindex={0}
-		bind:this={widget.ref}
-	>
-		<span style={assistiveTextStyle} id={assistiveTextId}>
-			JavaScript is required to manipulate this widget.
-		</span>
-		{#if widget.snippet}
-			{@render widget.snippet({
-				widget
-			})}
-		{:else if widget.component}
-			<widget.component {...widget.componentProps ?? {}} />
-		{/if}
-	</div>
-</noscript> -->
+<script module lang="ts">
+	import type { FlexiCommonProps } from '../system/types.js';
+	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
+	import { onDestroy, onMount } from 'svelte';
+	import type {
+		FlexiWidgetChildrenSnippet,
+		FlexiWidgetClasses,
+		FlexiWidgetConfiguration
+	} from '../system/widget/types.js';
+	import type { FlexiWidgetController } from '../system/widget/base.svelte.js';
+	import { flexiwidget } from '../system/widget/index.js';
+
+	export type FlexiWidgetProps = FlexiCommonProps<FlexiWidgetController> &
+		Exclude<FlexiWidgetConfiguration, 'className' | 'snippet'> & {
+			class?: FlexiWidgetClasses;
+			children?: FlexiWidgetChildrenSnippet;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className = $bindable(),
+		children = $bindable(),
+		controller = $bindable(),
+		onfirstcreate,
+		...propsConfig
+	}: FlexiWidgetProps = $props();
+
+	let config: FlexiWidgetConfiguration = $state({
+		...propsConfig,
+		...(className !== undefined && { className }),
+		...(children !== undefined && { snippet: children })
+	});
+
+	// Callback so that we still fulfil these props.
+	function onWidgetCreated(widget: FlexiWidgetController) {
+		controller = widget;
+		onfirstcreate?.(widget);
+	}
+
+	flexiwidget(config, onWidgetCreated);
+
+	// let derivedClassName = $derived.by(() => {
+	// 	if (typeof widget.className === 'function') {
+	// 		return widget.className(widget);
+	// 	}
+
+	// 	return widget.className;
+	// });
+
+	// let assistiveTextId = generateUniqueId();
+</script>
+
+<!-- Only use noscript as an SSR fallback, because it won't look the same as the hydrated version. -->
+<!-- <noscript style="display: contents;">
+	<div
+		class={derivedClassName}
+		aria-grabbed={widget.isGrabbed}
+		style={widget.style}
+		role="cell"
+		aria-label="Idle widget"
+		aria-colindex={widget.x}
+		aria-rowindex={widget.y}
+		aria-colspan={widget.width}
+		aria-rowspan={widget.height}
+		aria-describedby={assistiveTextId}
+		tabindex={0}
+		bind:this={widget.ref}
+	>
+		<span style={assistiveTextStyle} id={assistiveTextId}>
+			JavaScript is required to manipulate this widget.
+		</span>
+		{#if widget.snippet}
+			{@render widget.snippet({
+				widget
+			})}
+		{:else if widget.component}
+			<widget.component {...widget.componentProps ?? {}} />
+		{/if}
+	</div>
+</noscript> -->

package/dist/components/rendered-flexi-widget.svelte

@@ -1,64 +1,64 @@
-<script module lang="ts">
-	import { InternalFlexiWidgetController } from '../system/widget/controller.svelte.js';
-	import { renderedflexiwidget } from '../system/widget/index.js';
-	import WidgetTransitionPlaceholder from './widget-transition-placeholder.svelte';
-
-	export type RenderedFlexiWidgetProps = {
-		widget: InternalFlexiWidgetController;
-	};
-</script>
-
-<script lang="ts">
-	let { widget }: RenderedFlexiWidgetProps = $props();
-
-	const { onpointerdown, onkeydown } = renderedflexiwidget(widget);
-
-	let derivedClassName = $derived.by(() => {
-		if (typeof widget.className === 'function') {
-			return widget.className(widget);
-		}
-
-		return widget.className;
-	});
-
-	let ariaLabel = $derived.by(() => {
-		if (widget.isShadow) {
-			return 'Widget action preview';
-		}
-		if (widget.draggable && widget.resizable) {
-			return 'Interactive widget';
-		}
-
-		return 'Static widget';
-	});
-</script>
-
-<div
-	class={derivedClassName}
-	style={widget.style}
-	{onpointerdown}
-	{onkeydown}
-	aria-grabbed={widget.draggable && !widget.isShadow ? widget.isGrabbed : undefined}
-	aria-label={ariaLabel}
-	aria-dropeffect={widget.draggable ? 'move' : undefined}
-	role="cell"
-	aria-colindex={widget.x}
-	aria-rowindex={widget.y}
-	aria-colspan={widget.width}
-	aria-rowspan={widget.height}
-	tabindex={widget.draggable && !widget.hasGrabbers ? 0 : undefined}
-	bind:this={widget.ref}
->
-	{#if widget.snippet}
-		{@render widget.snippet({
-			widget
-		})}
-	{:else if widget.component}
-		<widget.component {...widget.componentProps ?? {}} />
-	{/if}
-</div>
-
-<!-- When it exists, this temporarily occupies the widget's destination space, allowing the widget to be absolutely positioned to interpolate to its final destination. -->
-{#if widget.shouldDrawPlaceholder}
-	<WidgetTransitionPlaceholder />
-{/if}
+<script module lang="ts">
+	import { InternalFlexiWidgetController } from '../system/widget/controller.svelte.js';
+	import { renderedflexiwidget } from '../system/widget/index.js';
+	import WidgetTransitionPlaceholder from './widget-transition-placeholder.svelte';
+
+	export type RenderedFlexiWidgetProps = {
+		widget: InternalFlexiWidgetController;
+	};
+</script>
+
+<script lang="ts">
+	let { widget }: RenderedFlexiWidgetProps = $props();
+
+	const { onpointerdown, onkeydown } = renderedflexiwidget(widget);
+
+	let derivedClassName = $derived.by(() => {
+		if (typeof widget.className === 'function') {
+			return widget.className(widget);
+		}
+
+		return widget.className;
+	});
+
+	let ariaLabel = $derived.by(() => {
+		if (widget.isShadow) {
+			return 'Widget action preview';
+		}
+		if (widget.draggable && widget.resizable) {
+			return 'Interactive widget';
+		}
+
+		return 'Static widget';
+	});
+</script>
+
+<div
+	class={derivedClassName}
+	style={widget.style}
+	{onpointerdown}
+	{onkeydown}
+	aria-grabbed={widget.draggable && !widget.isShadow ? widget.isGrabbed : undefined}
+	aria-label={ariaLabel}
+	aria-dropeffect={widget.draggable ? 'move' : undefined}
+	role="cell"
+	aria-colindex={widget.x}
+	aria-rowindex={widget.y}
+	aria-colspan={widget.width}
+	aria-rowspan={widget.height}
+	tabindex={widget.draggable && !widget.hasGrabbers ? 0 : undefined}
+	bind:this={widget.ref}
+>
+	{#if widget.snippet}
+		{@render widget.snippet({
+			widget
+		})}
+	{:else if widget.component}
+		<widget.component {...widget.componentProps ?? {}} />
+	{/if}
+</div>
+
+<!-- When it exists, this temporarily occupies the widget's destination space, allowing the widget to be absolutely positioned to interpolate to its final destination. -->
+{#if widget.shouldDrawPlaceholder}
+	<WidgetTransitionPlaceholder />
+{/if}