svelte-flexiboards 0.3.2-alpha.4 → 0.3.2

package/README.md

@@ -1,15 +1,15 @@
-# Flexiboards
-
-Headless, reactive drag-and-drop components for Svelte. [https://svelte-flexiboards.vercel.app](https://svelte-flexiboards.vercel.app/)
-
-This version of Flexiboards is currently in an early preview stage, with development ongoing. If you encounter any issues, please report them on the [GitHub issues page](https://github.com/Blakintosh/svelte-flexiboards/issues).
-
-## Installation
-
-```
-npm i svelte-flexiboards
-```
-
-## Licence
-
-Flexiboards is open-source software licenced under the MIT licence. Please see [LICENSE.md](https://github.com/Blakintosh/svelte-flexiboards/blob/main/LICENSE.md) for more information.
+# Flexiboards
+
+Headless, reactive drag-and-drop components for Svelte. [https://svelte-flexiboards.vercel.app](https://svelte-flexiboards.vercel.app/)
+
+This version of Flexiboards is currently in an early preview stage, with development ongoing. If you encounter any issues, please report them on the [GitHub issues page](https://github.com/Blakintosh/svelte-flexiboards/issues).
+
+## Installation
+
+```
+npm i svelte-flexiboards
+```
+
+## Licence
+
+Flexiboards is open-source software licenced under the MIT licence. Please see [LICENSE.md](https://github.com/Blakintosh/svelte-flexiboards/blob/main/LICENSE.md) for more information.

package/dist/components/flexi-add.svelte

@@ -1,87 +1,87 @@
-<script module lang="ts">
-	import {
-		type FlexiAddController,
-		flexiadd,
-		type FlexiAddClasses,
-		type FlexiAddWidgetFn
-	} from '../system/misc/adder.svelte.js';
-	import { onDestroy, type Snippet } from 'svelte';
-	import type { FlexiCommonProps } from '../system/types.js';
-	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
-	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
-
-	/** @deprecated FlexiAdd's children props are now redundant and will be removed in v0.4. */
-	type FlexiAddChildrenProps = {
-		/**
-		 * @deprecated This has been replaced with internal pointer management and is redundant. This event will be removed in v0.4.
-		 */
-		onpointerdown: (event: PointerEvent) => void;
-		/**
-		 * @deprecated This has been moved to the internal button so is now redundant. It will be removed in v0.4.
-		 */
-		style: string;
-	};
-
-	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
-		class?: FlexiAddClasses;
-		children?: Snippet<[{ adder: FlexiAddController; props: FlexiAddChildrenProps }]>;
-		addWidget: FlexiAddWidgetFn;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		children,
-		addWidget,
-		controller = $bindable(),
-		onfirstcreate,
-		class: className
-	}: FlexiAddProps = $props();
-
-	const { adder, onpointerdown, onkeydown } = flexiadd(addWidget);
-	controller = adder;
-	onfirstcreate?.(adder);
-
-	const dummyOnpointerdown = (event: PointerEvent) => {};
-
-	let derivedClassName = $derived.by(() => {
-		if (!adder) {
-			return '';
-		}
-
-		if (typeof className === 'function') {
-			return className(adder);
-		}
-
-		return className;
-	});
-
-	let assistiveTextId = generateUniqueId();
-
-	// Cleanup adder subscriptions when component is destroyed
-	onDestroy(() => {
-		adder.destroy();
-	});
-</script>
-
-<!-- TODO: will probably need a breaking change, because we need a ref to get the start widget position -->
-<button
-	class={derivedClassName}
-	bind:this={adder.ref}
-	aria-describedby={assistiveTextId}
-	style={'touch-action: none;'}
-	{onpointerdown}
-	{onkeydown}
->
-	<span style={assistiveTextStyle} id={assistiveTextId}>
-		Press Enter to drag a new widget into this board.
-	</span>
-	{@render children?.({ adder, props: { style: '', onpointerdown: dummyOnpointerdown } })}
-</button>
-
-<div style="display: none;">
-	<!-- Mimics the behaviour of a FlexiTarget, as we need to render the widget so that we can "drag it in" from -->
-	{#if adder.newWidget}
-		<RenderedFlexiWidget widget={adder.newWidget} />
-	{/if}
-</div>
+<script module lang="ts">
+	import {
+		type FlexiAddController,
+		flexiadd,
+		type FlexiAddClasses,
+		type FlexiAddWidgetFn
+	} from '../system/misc/adder.svelte.js';
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { FlexiCommonProps } from '../system/types.js';
+	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
+	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
+
+	/** @deprecated FlexiAdd's children props are now redundant and will be removed in v0.4. */
+	type FlexiAddChildrenProps = {
+		/**
+		 * @deprecated This has been replaced with internal pointer management and is redundant. This event will be removed in v0.4.
+		 */
+		onpointerdown: (event: PointerEvent) => void;
+		/**
+		 * @deprecated This has been moved to the internal button so is now redundant. It will be removed in v0.4.
+		 */
+		style: string;
+	};
+
+	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
+		class?: FlexiAddClasses;
+		children?: Snippet<[{ adder: FlexiAddController; props: FlexiAddChildrenProps }]>;
+		addWidget: FlexiAddWidgetFn;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		addWidget,
+		controller = $bindable(),
+		onfirstcreate,
+		class: className
+	}: FlexiAddProps = $props();
+
+	const { adder, onpointerdown, onkeydown } = flexiadd(addWidget);
+	controller = adder;
+	onfirstcreate?.(adder);
+
+	const dummyOnpointerdown = (event: PointerEvent) => {};
+
+	let derivedClassName = $derived.by(() => {
+		if (!adder) {
+			return '';
+		}
+
+		if (typeof className === 'function') {
+			return className(adder);
+		}
+
+		return className;
+	});
+
+	let assistiveTextId = generateUniqueId();
+
+	// Cleanup adder subscriptions when component is destroyed
+	onDestroy(() => {
+		adder.destroy();
+	});
+</script>
+
+<!-- TODO: will probably need a breaking change, because we need a ref to get the start widget position -->
+<button
+	class={derivedClassName}
+	bind:this={adder.ref}
+	aria-describedby={assistiveTextId}
+	style={'touch-action: none;'}
+	{onpointerdown}
+	{onkeydown}
+>
+	<span style={assistiveTextStyle} id={assistiveTextId}>
+		Press Enter to drag a new widget into this board.
+	</span>
+	{@render children?.({ adder, props: { style: '', onpointerdown: dummyOnpointerdown } })}
+</button>
+
+<div style="display: none;">
+	<!-- Mimics the behaviour of a FlexiTarget, as we need to render the widget so that we can "drag it in" from -->
+	{#if adder.newWidget}
+		<RenderedFlexiWidget widget={adder.newWidget} />
+	{/if}
+</div>

package/dist/components/flexi-announcer.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-	import { flexiannouncer } from '../system/announcer.svelte.js';
-	import type { InternalFlexiBoardController } from '../system/board/controller.svelte.js';
-	import { assistiveTextStyle } from '../system/shared/utils.svelte.js';
-
-	type FlexiAnnouncerProps = {
-		provider: InternalFlexiBoardController;
-	};
-
-	let { provider }: FlexiAnnouncerProps = $props();
-
-	const controller = flexiannouncer(provider);
-</script>
-
-<div
-	role="region"
-	aria-live={controller.politeness}
-	aria-label="Drag-and-drop announcer"
-	aria-atomic="true"
-	style={assistiveTextStyle}
-	id={controller.id}
->
-	{controller.message}
-</div>
+<script lang="ts">
+	import { flexiannouncer } from '../system/announcer.svelte.js';
+	import type { InternalFlexiBoardController } from '../system/board/controller.svelte.js';
+	import { assistiveTextStyle } from '../system/shared/utils.svelte.js';
+
+	type FlexiAnnouncerProps = {
+		provider: InternalFlexiBoardController;
+	};
+
+	let { provider }: FlexiAnnouncerProps = $props();
+
+	const controller = flexiannouncer(provider);
+</script>
+
+<div
+	role="region"
+	aria-live={controller.politeness}
+	aria-label="Drag-and-drop announcer"
+	aria-atomic="true"
+	style={assistiveTextStyle}
+	id={controller.id}
+>
+	{controller.message}
+</div>

package/dist/components/flexi-board.svelte

@@ -1,58 +1,58 @@
-<script module lang="ts">
-	import { flexiboard } from '../system/board/index.js';
-	import type { FlexiBoardController } from '../system/board/base.svelte.js';
-	import type { FlexiBoardConfiguration } from '../system/board/types.js';
-	import { onDestroy, type Snippet } from 'svelte';
-	import type { FlexiCommonProps } from '../system/types.js';
-	import FlexiLayoutLoader from './flexi-layout-loader.svelte';
-
-	export type FlexiBoardProps = FlexiCommonProps<FlexiBoardController> & {
-		children: Snippet;
-		config?: FlexiBoardConfiguration;
-		class?: ClassValue;
-	};
-</script>
-
-<script lang="ts">
-	import FlexiPortal from './flexi-portal.svelte';
-	import type { ClassValue } from 'svelte/elements';
-	import { generateUniqueId, assistiveTextStyle } from '../system/shared/utils.svelte.js';
-	import FlexiAnnouncer from './flexi-announcer.svelte';
-
-	let { controller = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
-
-	const board = flexiboard(props);
-	controller = board;
-
-	onfirstcreate?.(board);
-
-	let assistiveTextId = generateUniqueId();
-
-	// Cleanup board subscriptions when component is destroyed
-	onDestroy(() => {
-		board.destroy();
-	});
-</script>
-
-<div
-	class={props.class}
-	bind:this={board.ref}
-	style={board.style}
-	role="application"
-	aria-label="Interactive drag-and-drop interface"
-	aria-describedby={assistiveTextId}
->
-	<span style={assistiveTextStyle} id={assistiveTextId}>
-		Press Enter to grab or resize widgets. Once grabbed, use Arrow keys to move/resize the widget,
-		Enter to confirm the action, or Esc to cancel it.
-	</span>
-	{@render props.children()}
-
-	<FlexiAnnouncer provider={board} />
-</div>
-
-<!-- Component that tells the board it can start importing stuff, if needed. -->
-<FlexiLayoutLoader />
-
-<!-- Component that uses a shared portal for rendering grabbed widgets over the pointer. -->
-<FlexiPortal />
+<script module lang="ts">
+	import { flexiboard } from '../system/board/index.js';
+	import type { FlexiBoardController } from '../system/board/base.svelte.js';
+	import type { FlexiBoardConfiguration } from '../system/board/types.js';
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { FlexiCommonProps } from '../system/types.js';
+	import FlexiLayoutLoader from './flexi-layout-loader.svelte';
+
+	export type FlexiBoardProps = FlexiCommonProps<FlexiBoardController> & {
+		children: Snippet;
+		config?: FlexiBoardConfiguration;
+		class?: ClassValue;
+	};
+</script>
+
+<script lang="ts">
+	import FlexiPortal from './flexi-portal.svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { generateUniqueId, assistiveTextStyle } from '../system/shared/utils.svelte.js';
+	import FlexiAnnouncer from './flexi-announcer.svelte';
+
+	let { controller = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
+
+	const board = flexiboard(props);
+	controller = board;
+
+	onfirstcreate?.(board);
+
+	let assistiveTextId = generateUniqueId();
+
+	// Cleanup board subscriptions when component is destroyed
+	onDestroy(() => {
+		board.destroy();
+	});
+</script>
+
+<div
+	class={props.class}
+	bind:this={board.ref}
+	style={board.style}
+	role="application"
+	aria-label="Interactive drag-and-drop interface"
+	aria-describedby={assistiveTextId}
+>
+	<span style={assistiveTextStyle} id={assistiveTextId}>
+		Press Enter to grab or resize widgets. Once grabbed, use Arrow keys to move/resize the widget,
+		Enter to confirm the action, or Esc to cancel it.
+	</span>
+	{@render props.children()}
+
+	<FlexiAnnouncer provider={board} />
+</div>
+
+<!-- Component that tells the board it can start importing stuff, if needed. -->
+<FlexiLayoutLoader />
+
+<!-- Component that uses a shared portal for rendering grabbed widgets over the pointer. -->
+<FlexiPortal />

package/dist/components/flexi-delete.svelte

@@ -1,67 +1,67 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { FlexiCommonProps } from '../system/types.js';
-	import {
-		flexidelete,
-		FlexiDeleteController,
-		type FlexiDeleteClasses
-	} from '../system/misc/deleter.svelte.js';
-	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
-
-	/** @deprecated FlexiDelete's children props are now redundant and will be removed in v0.4. */
-	type FlexiDeleteChildrenProps = {
-		/**
-		 * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
-		 */
-		onpointerenter: (event: PointerEvent) => void;
-		/**
-		 * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
-		 */
-		onpointerleave: (event: PointerEvent) => void;
-	};
-
-	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
-		class?: FlexiDeleteClasses;
-		children?: Snippet<[{ deleter: FlexiDeleteController; props: FlexiDeleteChildrenProps }]>;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		children,
-		controller = $bindable(),
-		onfirstcreate
-	}: FlexiDeleteProps = $props();
-
-	// TODO: remove pointer events in v0.4
-	const { deleter, onpointerenter, onpointerleave } = flexidelete();
-	controller = deleter;
-	onfirstcreate?.(deleter);
-
-	let derivedClassName = $derived.by(() => {
-		if (!deleter) {
-			return '';
-		}
-
-		if (typeof className === 'function') {
-			return className(deleter);
-		}
-
-		return className;
-	});
-
-	let assistiveTextId = generateUniqueId();
-</script>
-
-<div
-	role="region"
-	bind:this={deleter.ref}
-	class={derivedClassName}
-	aria-describedby={assistiveTextId}
->
-	<span style={assistiveTextStyle} id={assistiveTextId}>
-		Drag a widget here and press Enter to delete it.
-	</span>
-	{@render children?.({ deleter, props: { onpointerenter, onpointerleave } })}
-</div>
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FlexiCommonProps } from '../system/types.js';
+	import {
+		flexidelete,
+		FlexiDeleteController,
+		type FlexiDeleteClasses
+	} from '../system/misc/deleter.svelte.js';
+	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
+
+	/** @deprecated FlexiDelete's children props are now redundant and will be removed in v0.4. */
+	type FlexiDeleteChildrenProps = {
+		/**
+		 * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
+		 */
+		onpointerenter: (event: PointerEvent) => void;
+		/**
+		 * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
+		 */
+		onpointerleave: (event: PointerEvent) => void;
+	};
+
+	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
+		class?: FlexiDeleteClasses;
+		children?: Snippet<[{ deleter: FlexiDeleteController; props: FlexiDeleteChildrenProps }]>;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		children,
+		controller = $bindable(),
+		onfirstcreate
+	}: FlexiDeleteProps = $props();
+
+	// TODO: remove pointer events in v0.4
+	const { deleter, onpointerenter, onpointerleave } = flexidelete();
+	controller = deleter;
+	onfirstcreate?.(deleter);
+
+	let derivedClassName = $derived.by(() => {
+		if (!deleter) {
+			return '';
+		}
+
+		if (typeof className === 'function') {
+			return className(deleter);
+		}
+
+		return className;
+	});
+
+	let assistiveTextId = generateUniqueId();
+</script>
+
+<div
+	role="region"
+	bind:this={deleter.ref}
+	class={derivedClassName}
+	aria-describedby={assistiveTextId}
+>
+	<span style={assistiveTextStyle} id={assistiveTextId}>
+		Drag a widget here and press Enter to delete it.
+	</span>
+	{@render children?.({ deleter, props: { onpointerenter, onpointerleave } })}
+</div>

package/dist/components/flexi-grab.svelte

@@ -1,28 +1,28 @@
-<script module lang="ts">
-	import { flexigrab } 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 FlexiGrabProps = {
-		children?: Snippet<[{ widget: FlexiWidgetController }]>;
-		class?: ClassValue;
-	};
-</script>
-
-<script lang="ts">
-	let { class: className, children }: FlexiGrabProps = $props();
-
-	const { widget, onpointerdown, onkeydown } = flexigrab();
-</script>
-
-<button
-	style={'user-select: none; touch-action: none;' +
-		(widget.draggable && widget.mounted ? 'cursor: grab;' : 'cursor: not-allowed;')}
-	disabled={!widget.draggable || !widget.mounted}
-	class={className}
-	{onpointerdown}
-	{onkeydown}
->
-	{@render children?.({ widget })}
-</button>
+<script module lang="ts">
+	import { flexigrab } 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 FlexiGrabProps = {
+		children?: Snippet<[{ widget: FlexiWidgetController }]>;
+		class?: ClassValue;
+	};
+</script>
+
+<script lang="ts">
+	let { class: className, children }: FlexiGrabProps = $props();
+
+	const { widget, onpointerdown, onkeydown } = flexigrab();
+</script>
+
+<button
+	style={'user-select: none; touch-action: none;' +
+		(widget.draggable && widget.mounted ? 'cursor: grab;' : 'cursor: not-allowed;')}
+	disabled={!widget.draggable || !widget.mounted}
+	class={className}
+	{onpointerdown}
+	{onkeydown}
+>
+	{@render children?.({ widget })}
+</button>

package/dist/components/flexi-grid.svelte

@@ -1,27 +1,27 @@
-<script module lang="ts">
-	import { flexigrid } from '../system/grid/index.js';
-	import type { Snippet } from 'svelte';
-
-	export type FlexiGridProps = {
-		children?: Snippet;
-		class?: string;
-	};
-</script>
-
-<script lang="ts">
-	let { children, class: className }: FlexiGridProps = $props();
-
-	const { grid } = flexigrid();
-</script>
-
-<div
-	class={className}
-	role="grid"
-	aria-label="Drag-and-drop grid"
-	aria-colcount={grid.columns}
-	aria-rowcount={grid.rows}
-	bind:this={grid.ref}
-	style={grid?.style}
->
-	{@render children?.()}
-</div>
+<script module lang="ts">
+	import { flexigrid } from '../system/grid/index.js';
+	import type { Snippet } from 'svelte';
+
+	export type FlexiGridProps = {
+		children?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	let { children, class: className }: FlexiGridProps = $props();
+
+	const { grid } = flexigrid();
+</script>
+
+<div
+	class={className}
+	role="grid"
+	aria-label="Drag-and-drop grid"
+	aria-colcount={grid.columns}
+	aria-rowcount={grid.rows}
+	bind:this={grid.ref}
+	style={grid?.style}
+>
+	{@render children?.()}
+</div>

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

@@ -1,10 +1,10 @@
-<script lang="ts">
-	import { getInternalFlexiboardCtx } from '../system/board/index.js';
-
-	// 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 board = getInternalFlexiboardCtx();
-	board.oninitialloadcomplete();
-</script>
+<script lang="ts">
+	import { getInternalFlexiboardCtx } from '../system/board/index.js';
+
+	// 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 board = getInternalFlexiboardCtx();
+	board.oninitialloadcomplete();
+</script>