svelte-flexiboards 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Blakintosh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/flexi-add.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+	import {
+		FlexiAddController,
+		flexiadd,
+		type FlexiAddWidgetFn
+	} from '../system/manage.svelte.js';
+	import FlexiWidget from './rendered-flexi-widget.svelte';
+	import type { FlexiWidgetConfiguration } from '../system/widget.svelte.js';
+	import type { Snippet } from 'svelte';
+	import type { FlexiCommonProps } from '../system/types.js';
+	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
+
+	type FlexiAddChildrenProps = {
+		onpointerdown: (event: PointerEvent) => void;
+	};
+
+	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
+		children?: Snippet<[{ adder: FlexiAddController; props: FlexiAddChildrenProps }]>;
+		addWidget: FlexiAddWidgetFn;
+	};
+</script>
+
+<script lang="ts">
+	let { children, addWidget, controller }: FlexiAddProps = $props();
+
+	const { adder, onpointerdown } = flexiadd(addWidget);
+	controller = adder;
+</script>
+
+{@render children?.({ adder, props: { onpointerdown } })}
+
+<!-- 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}

package/dist/components/flexi-add.svelte.d.ts

@@ -0,0 +1,16 @@
+import { FlexiAddController, type FlexiAddWidgetFn } from '../system/manage.svelte.js';
+import type { Snippet } from 'svelte';
+import type { FlexiCommonProps } from '../system/types.js';
+type FlexiAddChildrenProps = {
+    onpointerdown: (event: PointerEvent) => void;
+};
+export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
+    children?: Snippet<[{
+        adder: FlexiAddController;
+        props: FlexiAddChildrenProps;
+    }]>;
+    addWidget: FlexiAddWidgetFn;
+};
+declare const FlexiAdd: import("svelte").Component<FlexiAddProps, {}, "">;
+type FlexiAdd = ReturnType<typeof FlexiAdd>;
+export default FlexiAdd;

package/dist/components/flexi-board.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import {
+		flexiboard,
+		type FlexiBoardConfiguration,
+		type FlexiBoardController
+	} from '../system/provider.svelte.js';
+	import type { Snippet } from 'svelte';
+	import type { FlexiCommonProps, SvelteClassValue } from '../system/types.js';
+	import FlexiLayoutLoader from './flexi-layout-loader.svelte';
+
+	export type FlexiBoardProps = FlexiCommonProps<FlexiBoardController> & {
+		children: Snippet;
+		config?: FlexiBoardConfiguration;
+		class?: SvelteClassValue;
+	};
+</script>
+
+<script lang="ts">
+	let { controller: board = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
+
+	board = flexiboard(props);
+	onfirstcreate?.(board);
+</script>
+
+<div class={props.class} bind:this={board.ref} style={board.style}>
+	{@render props.children()}
+</div>
+
+<!-- Component that tells the board it can start importing stuff, if needed. -->
+<FlexiLayoutLoader />

package/dist/components/flexi-board.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type FlexiBoardConfiguration, type FlexiBoardController } from '../system/provider.svelte.js';
+import type { Snippet } from 'svelte';
+import type { FlexiCommonProps, SvelteClassValue } from '../system/types.js';
+export type FlexiBoardProps = FlexiCommonProps<FlexiBoardController> & {
+    children: Snippet;
+    config?: FlexiBoardConfiguration;
+    class?: SvelteClassValue;
+};
+declare const FlexiBoard: import("svelte").Component<FlexiBoardProps, {}, "controller">;
+type FlexiBoard = ReturnType<typeof FlexiBoard>;
+export default FlexiBoard;

package/dist/components/flexi-delete.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FlexiCommonProps, SvelteClassValue } from '../system/types.js';
+	import { flexidelete } from '../system/manage.svelte.js';
+
+	type FlexiDeleteChildrenProps = {
+		onpointerenter: (event: PointerEvent) => void;
+		onpointerleave: (event: PointerEvent) => void;
+	};
+
+	export type FlexiDeleteProps = {
+		children?: Snippet<[{ props: FlexiDeleteChildrenProps }]>;
+	};
+</script>
+
+<script lang="ts">
+	let { children }: FlexiDeleteProps = $props();
+
+	const { onpointerenter, onpointerleave } = flexidelete();
+</script>
+
+{@render children?.({ props: { onpointerenter, onpointerleave } })}

package/dist/components/flexi-delete.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type FlexiDeleteChildrenProps = {
+    onpointerenter: (event: PointerEvent) => void;
+    onpointerleave: (event: PointerEvent) => void;
+};
+export type FlexiDeleteProps = {
+    children?: Snippet<[{
+        props: FlexiDeleteChildrenProps;
+    }]>;
+};
+declare const FlexiDelete: import("svelte").Component<FlexiDeleteProps, {}, "">;
+type FlexiDelete = ReturnType<typeof FlexiDelete>;
+export default FlexiDelete;

package/dist/components/flexi-grab.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+	import { flexigrab, type FlexiWidgetController } from '../system/widget.svelte.js';
+	import type { Snippet } from 'svelte';
+	import type { SvelteClassValue } from '../system/types.js';
+
+	type FlexiGrabProps = {
+		children?: Snippet<[{ widget: FlexiWidgetController }]>;
+		class?: SvelteClassValue;
+	};
+</script>
+
+<script lang="ts">
+	let { class: className, children }: FlexiGrabProps = $props();
+
+	const { widget, onpointerdown } = flexigrab();
+</script>
+
+<button class={className} {onpointerdown}>
+	{@render children?.({ widget })}
+</button>

package/dist/components/flexi-grab.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type FlexiWidgetController } from '../system/widget.svelte.js';
+import type { Snippet } from 'svelte';
+import type { SvelteClassValue } from '../system/types.js';
+type FlexiGrabProps = {
+    children?: Snippet<[{
+        widget: FlexiWidgetController;
+    }]>;
+    class?: SvelteClassValue;
+};
+declare const FlexiGrab: import("svelte").Component<FlexiGrabProps, {}, "">;
+type FlexiGrab = ReturnType<typeof FlexiGrab>;
+export default FlexiGrab;

package/dist/components/flexi-grid.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+	import { flexigrid } from '../system/grid.svelte';
+	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} bind:this={grid.ref} style={grid?.style}>
+	{@render children?.()}
+</div>

package/dist/components/flexi-grid.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export type FlexiGridProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const FlexiGrid: import("svelte").Component<FlexiGridProps, {}, "">;
+type FlexiGrid = ReturnType<typeof FlexiGrid>;
+export default FlexiGrid;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { getInternalFlexiboardCtx } from '../system/provider.svelte.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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlexiLayoutLoader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiLayoutLoader = InstanceType<typeof FlexiLayoutLoader>;
+export default FlexiLayoutLoader;

package/dist/components/flexi-resize.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+	import { flexiresize, type FlexiWidgetController } from '../system/widget.svelte.js';
+	import type { Snippet } from 'svelte';
+	import type { SvelteClassValue } from '../system/types.js';
+
+	type FlexiResizeProps = {
+		children?: Snippet<[{ widget: FlexiWidgetController }]>;
+		class?: SvelteClassValue;
+	};
+</script>
+
+<script lang="ts">
+	let { class: className, children }: FlexiResizeProps = $props();
+
+	const { widget, onpointerdown } = flexiresize();
+</script>
+
+<button class={className} {onpointerdown}>
+	{@render children?.({ widget })}
+</button>

package/dist/components/flexi-resize.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type FlexiWidgetController } from '../system/widget.svelte.js';
+import type { Snippet } from 'svelte';
+import type { SvelteClassValue } from '../system/types.js';
+type FlexiResizeProps = {
+    children?: Snippet<[{
+        widget: FlexiWidgetController;
+    }]>;
+    class?: SvelteClassValue;
+};
+declare const FlexiResize: import("svelte").Component<FlexiResizeProps, {}, "">;
+type FlexiResize = ReturnType<typeof FlexiResize>;
+export default FlexiResize;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { getInternalFlexitargetCtx } from '../system/target.svelte.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 target = getInternalFlexitargetCtx();
+	target.oninitialloadcomplete();
+</script>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlexiTargetLoader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiTargetLoader = InstanceType<typeof FlexiTargetLoader>;
+export default FlexiTargetLoader;

package/dist/components/flexi-target.svelte

@@ -0,0 +1,93 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		flexitarget,
+		type FlexiTargetConfiguration,
+		type FlexiTargetController,
+		type FlexiTargetPartialConfiguration
+	} from '../system/target.svelte.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';
+
+	let {
+		children,
+		class: className,
+		header,
+		footer,
+		config,
+		containerClass,
+		controller = $bindable(),
+		key,
+		onfirstcreate
+	}: FlexiTargetProps = $props();
+
+	const { onpointerenter, onpointerleave, target } = flexitarget(config, key);
+
+	// Target created, allow the caller to access it.
+	controller = target;
+	onfirstcreate?.(target);
+</script>
+
+<div>
+	<div class={containerClass} {onpointerenter} {onpointerleave} role="grid" tabindex={0}>
+		{@render header?.({ target })}
+
+		<!-- 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 !target.prepared && children}
+				{@render children()}
+			{:else if target.prepared}
+				{#each target.widgets as widget (widget)}
+					<RenderedFlexiWidget {widget} />
+				{/each}
+			{/if}
+		</FlexiGrid>
+		{@render footer?.({ target })}
+	</div>
+</div>
+
+<FlexiTargetLoader />

package/dist/components/flexi-target.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import { type FlexiTargetController, type FlexiTargetPartialConfiguration } from '../system/target.svelte.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;
+};
+declare const FlexiTarget: import("svelte").Component<FlexiTargetProps, {}, "controller">;
+type FlexiTarget = ReturnType<typeof FlexiTarget>;
+export default FlexiTarget;

package/dist/components/flexi-widget.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import {
+		type FlexiWidgetController,
+		flexiwidget,
+		type FlexiWidgetConfiguration,
+		type FlexiWidgetChildrenSnippet,
+		type FlexiWidgetClasses
+	} from '../system/widget.svelte.js';
+	import type { FlexiCommonProps } from '../system/types.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: className,
+		snippet: children
+	});
+
+	const { widget } = flexiwidget(config);
+
+	controller = widget;
+	onfirstcreate?.(widget);
+</script>

package/dist/components/flexi-widget.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type FlexiWidgetController, type FlexiWidgetConfiguration, type FlexiWidgetChildrenSnippet, type FlexiWidgetClasses } from '../system/widget.svelte.js';
+import type { FlexiCommonProps } from '../system/types.js';
+export type FlexiWidgetProps = FlexiCommonProps<FlexiWidgetController> & Exclude<FlexiWidgetConfiguration, 'className' | 'snippet'> & {
+    class?: FlexiWidgetClasses;
+    children?: FlexiWidgetChildrenSnippet;
+};
+declare const FlexiWidget: import("svelte").Component<FlexiWidgetProps, {}, "children" | "class" | "controller">;
+type FlexiWidget = ReturnType<typeof FlexiWidget>;
+export default FlexiWidget;

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/index.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,44 @@
+<script module lang="ts">
+	import { renderedflexiwidget, type FlexiWidgetController } from '../system/widget.svelte.js';
+
+	export type RenderedFlexiWidgetProps = {
+		widget: FlexiWidgetController;
+	};
+</script>
+
+<script lang="ts">
+	let { widget }: RenderedFlexiWidgetProps = $props();
+
+	const { onpointerdown } = renderedflexiwidget(widget);
+
+	let derivedClassName = $derived.by(() => {
+		if (typeof widget.className === 'function') {
+			return widget.className(widget);
+		}
+
+		return widget.className;
+	});
+</script>
+
+<div
+	class={derivedClassName}
+	style={widget.style}
+	{onpointerdown}
+	aria-grabbed={widget.isGrabbed}
+	aria-label="Flexi Widget"
+	aria-roledescription="Flexi Widget"
+	aria-dropeffect="move"
+	role="gridcell"
+	tabindex={0}
+	bind:this={widget.ref}
+>
+	{#if widget.snippet}
+		{@render widget.snippet({
+			widget,
+			component: widget.component,
+			componentProps: widget.componentProps
+		})}
+	{:else if widget.component}
+		<widget.component {...widget.componentProps ?? {}} />
+	{/if}
+</div>

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

@@ -0,0 +1,7 @@
+import { type FlexiWidgetController } from '../system/widget.svelte.js';
+export type RenderedFlexiWidgetProps = {
+    widget: FlexiWidgetController;
+};
+declare const RenderedFlexiWidget: import("svelte").Component<RenderedFlexiWidgetProps, {}, "">;
+type RenderedFlexiWidget = ReturnType<typeof RenderedFlexiWidget>;
+export default RenderedFlexiWidget;

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import FlexiBoard, { type FlexiBoardProps } from "./components/flexi-board.svelte";
+import FlexiTarget, { type FlexiTargetProps } from "./components/flexi-target.svelte";
+import FlexiWidget, { type FlexiWidgetProps } from "./components/flexi-widget.svelte";
+import FlexiGrab from "./components/flexi-grab.svelte";
+import FlexiResize from "./components/flexi-resize.svelte";
+import FlexiAdd from "./components/flexi-add.svelte";
+import FlexiDelete from "./components/flexi-delete.svelte";
+import type { FlexiBoardConfiguration } from "./system/provider.svelte.js";
+import type { FlexiTargetConfiguration } from "./system/target.svelte.js";
+import type { FlexiWidgetChildrenSnippet, FlexiWidgetChildrenSnippetParameters, FlexiWidgetConfiguration } from "./system/widget.svelte.js";
+import type { FlexiBoardController } from "./system/provider.svelte.js";
+import type { FlexiTargetController } from "./system/target.svelte.js";
+import type { FlexiWidgetController } from "./system/widget.svelte.js";
+import type { AdderWidgetConfiguration, FlexiAddController, FlexiAddWidgetFn } from "./system/manage.svelte.js";
+export * from "./system/types.js";
+export { FlexiBoard, type FlexiBoardConfiguration, type FlexiBoardProps, FlexiTarget, type FlexiTargetConfiguration, type FlexiTargetProps, FlexiWidget, type FlexiWidgetConfiguration, type FlexiWidgetProps, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, type FlexiAddWidgetFn, type AdderWidgetConfiguration, type FlexiWidgetController, type FlexiBoardController, type FlexiTargetController, type FlexiAddController, type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters };

package/dist/index.js

@@ -0,0 +1,10 @@
+// Reexport your entry components here
+import FlexiBoard, {} from "./components/flexi-board.svelte";
+import FlexiTarget, {} from "./components/flexi-target.svelte";
+import FlexiWidget, {} from "./components/flexi-widget.svelte";
+import FlexiGrab from "./components/flexi-grab.svelte";
+import FlexiResize from "./components/flexi-resize.svelte";
+import FlexiAdd from "./components/flexi-add.svelte";
+import FlexiDelete from "./components/flexi-delete.svelte";
+export * from "./system/types.js";
+export { FlexiBoard, FlexiTarget, FlexiWidget, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete };