svelte-tweakpane-ui 1.0.0

package/dist/core/Button.svelte

@@ -0,0 +1,59 @@
+<script context="module"></script>
+
+<script>
+	import ClsPad from '../internal/ClsPad.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { getElementIndex, isRootPane } from '../utils.js';
+	import { BROWSER } from 'esm-env';
+	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
+	export let title = 'Button';
+	export let label = void 0;
+	export let disabled = false;
+	export let theme = void 0;
+	const parentStore = getContext('parentStore');
+	const userCreatedPane = getContext('userCreatedPane');
+	const dispatch = createEventDispatcher();
+	let indexElement;
+	let button;
+	let index;
+	function create() {
+		if (button) button.dispose();
+		button = $parentStore.addButton({
+			disabled,
+			index,
+			label,
+			title
+		});
+		button.on('click', () => {
+			dispatch('click');
+		});
+	}
+	onMount(() => {
+		index = indexElement ? getElementIndex(indexElement) : 0;
+	});
+	onDestroy(() => {
+		button?.dispose();
+	});
+	$: index !== void 0 && $parentStore && !button && create();
+	$: button && (button.title = title);
+	$: button && (button.label = label);
+	$: button && (button.disabled = disabled);
+	$: theme &&
+		$parentStore &&
+		(userCreatedPane || !isRootPane($parentStore)) &&
+		console.warn(
+			'Set theme on the <Pane> component, not on its children! (Check nested <Button> components for a theme prop.)'
+		);
+</script>
+
+{#if parentStore}
+	{#if BROWSER}
+		<div bind:this={indexElement} style="display: none;" />
+	{:else}
+		<ClsPad keysAdd={['containerUnitSize', 'containerVerticalPadding']} {theme} />
+	{/if}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<svelte:self on:click {disabled} {label} {title} />
+	</InternalPaneInline>
+{/if}

package/dist/core/Button.svelte.d.ts

@@ -0,0 +1,65 @@
+import { SvelteComponent } from 'svelte';
+export type ButtonClickEvent = CustomEvent<null>;
+import type { Theme } from '../theme.js';
+declare const __propDef: {
+	props: {
+		/**
+		 * Text inside of the button.
+		 * @default `'Button'`
+		 * */ title?: string | undefined;
+		/**
+		 * Text displayed next to the button.
+		 * @default `undefined`
+		 * */ label?: string | undefined;
+		/**
+		 * Prevent interactivity and gray out the control.
+		 * @default `false`
+		 * */ disabled?: boolean | undefined;
+		/**
+		 * Custom color scheme.
+		 * @default `undefined`  \
+		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+		 * set with `setGlobalDefaultTheme()`.)
+		 * */ theme?: Theme | undefined;
+	};
+	slots: {};
+	events: {
+		/**
+		 * Fires when the button is clicked.
+		 * @event
+		 * */
+		click: ButtonClickEvent;
+	};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+/**
+ * A humble but effective push button.
+ *
+ * Wraps the Tweakpane [`addButton`](https://tweakpane.github.io/docs/ui-components/#button) method.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the button in `<Pane position='inline'>`.
+ *
+ * See the `<ButtonGrid>` and `<RadioGrid>` components for a convenient way to lay out multiple
+ * buttons.
+ *
+ * @emits {void} click - When the button is clicked.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button } from 'svelte-tweakpane-ui';
+ *
+ * let count = 0;
+ * </script>
+ *
+ * <Button on:click={() => count++} label="Count" title="Increment" />
+ * <pre>Count: {count}</pre>
+ * ```
+ *
+ * @sourceLink
+ * [Button.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Button.svelte)
+ */
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {}
+export {};

package/dist/core/Folder.svelte

@@ -0,0 +1,69 @@
+<script>
+	import ClsPad from '../internal/ClsPad.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { getElementIndex, isRootPane, updateCollapsibility } from '../utils.js';
+	import { BROWSER } from 'esm-env';
+	import { getContext, onDestroy, onMount, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	export let title = 'Folder';
+	export let disabled = false;
+	export let expanded = true;
+	export let userExpandable = true;
+	export let theme = void 0;
+	const parentStore = getContext('parentStore');
+	const folderStore = writable();
+	const userCreatedPane = getContext('userCreatedPane');
+	let indexElement;
+	let index;
+	let folderRef = void 0;
+	setContext('parentStore', folderStore);
+	function create() {
+		$folderStore = $parentStore.addFolder({
+			disabled,
+			expanded,
+			index,
+			title
+		});
+		$folderStore.on('fold', () => {
+			expanded = $folderStore.expanded;
+		});
+		folderRef = $folderStore;
+	}
+	onMount(() => {
+		index = indexElement ? getElementIndex(indexElement) : 0;
+	});
+	onDestroy(() => {
+		$folderStore?.dispose();
+	});
+	$: $parentStore && !folderRef && index !== void 0 && create();
+	$: folderRef && updateCollapsibility(userExpandable, folderRef.element, 'tp-fldv_b', 'tp-fldv_m');
+	$: folderRef && (folderRef.title = title);
+	$: folderRef && (folderRef.disabled = disabled);
+	$: folderRef && expanded !== void 0 && (folderRef.expanded = expanded);
+	$: theme &&
+		$parentStore &&
+		(userCreatedPane || !isRootPane($parentStore)) &&
+		console.warn(
+			'Set theme on the <Pane> component, not on its children! (Check nested <Folder> components for a theme prop.)'
+		);
+</script>
+
+{#if parentStore}
+	{#if BROWSER}
+		<div bind:this={indexElement} style="display: none;">
+			<slot />
+		</div>
+	{:else}
+		<ClsPad keysAdd={['containerUnitSize']} {theme} />
+		{#if expanded}
+			<ClsPad keysAdd={['containerVerticalPadding', 'containerVerticalPadding']} {theme} />
+			<slot />
+		{/if}
+	{/if}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<svelte:self bind:expanded {disabled} {title} {userExpandable}>
+			<slot />
+		</svelte:self>
+	</InternalPaneInline>
+{/if}

package/dist/core/Folder.svelte.d.ts

@@ -0,0 +1,78 @@
+import { SvelteComponent } from 'svelte';
+import type { Theme } from '../theme.js';
+declare const __propDef: {
+	props: {
+		/**
+		 * Text in folder title bar.
+		 *
+		 * Unlike a `<Pane>`, a `<Folder>`'s title bar is always visible and the title is always shown.
+		 * It can be set to an empty string if you want an unadorned title bar.
+		 * @default `'Folder'`
+		 * */ title?: string | undefined;
+		/**
+		 * Prevent interactivity and gray out the control.
+		 * @default `false`
+		 * */ disabled?: boolean | undefined;
+		/**
+		 * Expand or collapse folder.
+		 *
+		 * When bound it will indicate whether the folder is expanded or collapsed.
+		 * @default `true`
+		 * @bindable
+		 * */ expanded?: boolean | undefined;
+		/**
+		 * Allow the user to be collapse and expand the folder by clicking its title bar.
+		 * @default `true`
+		 * */ userExpandable?: boolean | undefined;
+		/**
+		 * Custom color scheme.
+		 * @default `undefined`  \
+		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+		 * set with `setGlobalDefaultTheme()`.
+		 * */ theme?: Theme | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		/**
+		 * Any Tweakpane component, except a `<Pane>`.
+		 */
+		default: {};
+	};
+};
+export type FolderProps = typeof __propDef.props;
+export type FolderEvents = typeof __propDef.events;
+export type FolderSlots = typeof __propDef.slots;
+/**
+ * Organize multiple controls into a collapsable folder.
+ *
+ * Wraps the Tweakpane [`addFolder`](https://tweakpane.github.io/docs/ui-components/#folder) method.
+ *
+ * May also be used to label and group multiple controls without user-collapsibility by setting
+ * `userExpandable` to `false` and `expanded` to true.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the folder in `<Pane position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button, Checkbox, Folder, Monitor } from 'svelte-tweakpane-ui';
+ *
+ * let expanded = true;
+ * let count = 0;
+ * </script>
+ *
+ * <Folder bind:expanded title="Reticulation Management Folder">
+ * <Button on:click={() => count++} title="Increment" />
+ * <Monitor value={count} label="Count" />
+ * </Folder>
+ *
+ * <Checkbox bind:value={expanded} label="Expanded" />
+ * ```
+ *
+ * @sourceLink
+ * [Folder.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Folder.svelte)
+ */
+export default class Folder extends SvelteComponent<FolderProps, FolderEvents, FolderSlots> {}
+export {};

package/dist/core/Pane.svelte

@@ -0,0 +1,51 @@
+<script context="module"></script>
+
+<script>
+	import InternalPaneDraggable from '../internal/InternalPaneDraggable.svelte';
+	import InternalPaneFixed from '../internal/InternalPaneFixed.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { removeKeys } from '../utils';
+	import { BROWSER } from 'esm-env';
+	import { beforeUpdate } from 'svelte';
+	export let expanded = void 0;
+	export let position = void 0;
+	export let width = void 0;
+	export let x = void 0;
+	export let y = void 0;
+	beforeUpdate(() => {
+		if ($$props.position === 'inline' || $$props.position === 'fixed') {
+			x = $$props.x;
+			y = $$props.y;
+			width = $$props.width;
+			expanded = $$props.expanded;
+		}
+	});
+</script>
+
+<!-- Only prerender inline panes, because fixed / absolute positioned objects don't affect layout
+-->
+{#if position === undefined || position === 'draggable'}
+	{#if BROWSER}
+		<InternalPaneDraggable bind:expanded bind:width bind:x bind:y {...$$restProps}>
+			<slot />
+		</InternalPaneDraggable>
+	{:else}
+		<div style="display: none;">
+			<slot />
+		</div>
+	{/if}
+{:else if position === 'inline'}
+	<InternalPaneInline bind:expanded {width} {...removeKeys($$restProps, 'storePositionLocally')}>
+		<slot />
+	</InternalPaneInline>
+{:else if position === 'fixed'}
+	{#if BROWSER}
+		<InternalPaneFixed bind:expanded bind:x bind:y {width} {...$$restProps}>
+			<slot />
+		</InternalPaneFixed>
+	{:else}
+		<div style="display: none;">
+			<slot />
+		</div>
+	{/if}
+{/if}