svelte-tweakpane-ui 1.0.0

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

@@ -0,0 +1,72 @@
+import { SvelteComponent } from 'svelte';
+import type { Theme } from '../theme.js';
+declare const __propDef: {
+	props: {
+		/**
+		 * Prevent interactivity and gray out the control.
+		 * @default `false`
+		 * */ disabled?: boolean | undefined;
+		/**
+		 * Active page index.
+		 *
+		 * Note that SSR will always render the first page height, regardless of the initial active
+		 * index.
+		 * @default `0`
+		 * @bindable
+		 * */ selectedIndex?: number | 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: {
+		/**
+		 * A `<TabPage>` component.
+		 */
+		default: {};
+	};
+};
+export type TabGroupProps = typeof __propDef.props;
+export type TabGroupEvents = typeof __propDef.events;
+export type TabGroupSlots = typeof __propDef.slots;
+/**
+ * Contains a collection of `<TabPage>` components to be presented as a tabs.
+ *
+ * Wrapper around Tweakpane's [`addTab`](https://tweakpane.github.io/docs/ui-components/#tab) method.
+ *
+ * The name of this concept within the underlying vanilla JS Tweakpane API is `tab`, but it has been
+ * changed to `TabGroup` in _Svelte Tweakpane UI_ to clarify it's relationship to the `<TabPage>`
+ * component.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the tab in `<Pane position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button, TabGroup, TabPage } from 'svelte-tweakpane-ui';
+ * </script>
+ *
+ * <TabGroup>
+ * <TabPage title="A">
+ *   <Button on:click={() => alert('A...')} title="Button A" />
+ * </TabPage>
+ * <TabPage title="B">
+ *   <Button on:click={() => alert('B...')} title="Button B" />
+ * </TabPage>
+ * </TabGroup>
+ * ```
+ *
+ * @sourceLink
+ * [TabGroup.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/TabGroup.svelte)
+ */
+export default class TabGroup extends SvelteComponent<
+	TabGroupProps,
+	TabGroupEvents,
+	TabGroupSlots
+> {}
+export {};

package/dist/core/TabPage.svelte

@@ -0,0 +1,85 @@
+<script>
+	import TabGroup from './TabGroup.svelte';
+	import ClsPad from '../internal/ClsPad.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { getElementIndex, isRootPane } from '../utils.js';
+	import { BROWSER } from 'esm-env';
+	import { getContext, onDestroy, onMount, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	export let title = 'Tab Page';
+	export let disabled = false;
+	export let selected = false;
+	export let theme = void 0;
+	const tabGroupStore = getContext('tabGroupStore');
+	const tabIndexStore = getContext('tabIndexStore');
+	const userCreatedPane = getContext('userCreatedPane');
+	const parentStore = getContext('parentStore');
+	const tabPageStore = writable();
+	setContext('parentStore', tabPageStore);
+	let indexElement;
+	let index;
+	onMount(() => {
+		index = indexElement ? getElementIndex(indexElement) : 0;
+	});
+	function create() {
+		if (!$tabGroupStore) {
+			$tabGroupStore = $parentStore.addTab({
+				// tabs MUST be created with at least one page how to handle tabs with no children?
+				disabled: false,
+				index: $tabIndexStore,
+				// could be cleaner to have children create the tab as needed?
+				pages: [{ title }]
+			});
+			$tabPageStore = $tabGroupStore.pages[0];
+			selected = true;
+		} else if (!$tabPageStore && $tabGroupStore) {
+			$tabPageStore = $tabGroupStore.addPage({ index, title });
+		}
+		$tabGroupStore?.on('select', () => {
+			$tabPageStore && (selected = $tabPageStore.selected);
+		});
+	}
+	onDestroy(() => {
+		$tabPageStore?.dispose();
+	});
+	$: index !== void 0 && $parentStore && $tabIndexStore !== void 0 && create();
+	$: $tabPageStore && ($tabPageStore.title = title);
+	$: $tabPageStore && ($tabPageStore.disabled = disabled);
+	$: $tabPageStore && ($tabPageStore.selected = selected);
+	$: theme &&
+		$parentStore &&
+		(userCreatedPane || !isRootPane($parentStore)) &&
+		console.warn(
+			'Set theme on the <Pane> component, not on its children! (Check nested <TabPage> components for a theme prop.)'
+		);
+</script>
+
+{#if parentStore && tabIndexStore !== undefined}
+	{#if BROWSER}
+		<div bind:this={indexElement} style="display: none;">
+			<slot />
+		</div>
+	{:else}
+		<div class="ssr-tab-page">
+			<!-- Tab bar -->
+			<ClsPad keysAdd={['containerUnitSize']} {theme} />
+			<slot />
+		</div>
+	{/if}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<TabGroup>
+			<svelte:self {disabled} {selected} {theme} {title}>
+				<slot />
+			</svelte:self>
+		</TabGroup>
+	</InternalPaneInline>
+{/if}
+
+<style>
+	/* Measure only the first (most likely active) tab */
+	div.ssr-tab-page:not(:first-child) {
+		overflow: hidden;
+		display: none;
+	}
+</style>

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

@@ -0,0 +1,82 @@
+import { SvelteComponent } from 'svelte';
+import type { Theme } from '../theme.js';
+declare const __propDef: {
+	props: {
+		/**
+		 * Text in the tab.
+		 * @default `'Tab Page'`
+		 * */ title?: string | undefined;
+		/**
+		 * Prevent interactivity and gray out the control.
+		 * @default `false`
+		 * */ disabled?: boolean | undefined;
+		/**
+		 * Sets the page is the active tab.
+		 *
+		 * When bound it will indicate whether the tab is active.
+		 * @default `false`
+		 * @bindable
+		 * */ selected?: 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 TabPageProps = typeof __propDef.props;
+export type TabPageEvents = typeof __propDef.events;
+export type TabPageSlots = typeof __propDef.slots;
+/**
+ * Contains a collection of Tweakpane controls to be presented as a single group inside a `<TabGroup>`
+ * component.
+ *
+ * Provides `page` values to Tweakpane's
+ * [`addTab`](https://tweakpane.github.io/docs/ui-components/#tab) method.
+ *
+ * The name of this concept within the underlying vanilla JS Tweakpane API is `page`, but it has been
+ * changed to `TabPage` in _Svelte Tweakpane UI_ for clarity its relationship to the `<TabGroup>`
+ * component.
+ *
+ * Usage outside of a `<TabGroup>` component wouldn't make much sense, but in such cases the
+ * `<TabPage>` will be implicitly wrapped in a `<TabGroup>` and `<Pane position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button, TabGroup, TabPage } from 'svelte-tweakpane-ui';
+ *
+ * let countA = 0;
+ * let countB = 0;
+ * </script>
+ *
+ * <TabGroup>
+ * <TabPage title="A">
+ *   <Button on:click={() => countA++} title="Button A" />
+ * </TabPage>
+ * <TabPage title="B">
+ *   <Button on:click={() => countB++} title="Button B" />
+ * </TabPage>
+ * </TabGroup>
+ *
+ * <pre>
+ * Count A: {countA}
+ * Count B: {countB}
+ * </pre>
+ * ```
+ *
+ * @sourceLink
+ * [TabPage.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/TabPage.svelte)
+ */
+export default class TabPage extends SvelteComponent<TabPageProps, TabPageEvents, TabPageSlots> {}
+export {};

package/dist/extra/AutoObject.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { isColorObject } from '@tweakpane/core';
+	import { Point2d } from '@tweakpane/core/dist/input-binding/point-2d/model/point-2d.js';
+	import { Point3d } from '@tweakpane/core/dist/input-binding/point-3d/model/point-3d.js';
+	import { Point4d } from '@tweakpane/core/dist/input-binding/point-4d/model/point-4d.js';
+	import Text from '../control/Text.svelte';
+	import Binding from '../core/Binding.svelte';
+	import Folder from '../core/Folder.svelte';
+	import InternalPaneInline from '../internal/InternalPaneInline.svelte';
+	import { getContext } from 'svelte';
+	export let theme = void 0;
+	export let prettyLabels = true;
+	export let object;
+	const parentStore = getContext('parentStore');
+	function isPointObject(obj) {
+		return Point2d.isObject(obj) || Point3d.isObject(obj) || Point4d.isObject(obj);
+	}
+	function prettify(value, active = true) {
+		if (!active) return value;
+		return value
+			.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+			.replace(/[_-]+/g, ' ')
+			.toLowerCase()
+			.replace(/\b[a-z]/g, (letter) => {
+				return letter.toUpperCase();
+			});
+	}
+</script>
+
+{#if parentStore}
+	{#each Object.keys(object) as key (key)}
+		{#if object[key].constructor === Object && !isColorObject(object[key]) && !isPointObject(object[key])}
+			<Folder title={prettify(key, prettyLabels)}>
+				<svelte:self bind:object={object[key]} bind:prettyLabels />
+			</Folder>
+		{:else if typeof object[key] === 'string'}
+			<Text bind:value={object[key]} label={prettify(key, prettyLabels)} />
+		{:else}
+			<Binding bind:object {key} label={prettify(key, prettyLabels)} />
+		{/if}
+	{/each}
+{:else}
+	<InternalPaneInline {theme} userCreatedPane={false}>
+		<svelte:self bind:object bind:prettyLabels />
+	</InternalPaneInline>
+{/if}

package/dist/extra/AutoObject.svelte.d.ts

@@ -0,0 +1,108 @@
+import { SvelteComponent } from 'svelte';
+import type { Theme } from '../theme.js';
+import type { BindingObject } from '../utils.js';
+declare const __propDef: {
+	props: {
+		/**
+		 * Custom color scheme.
+		 * @default `undefined`  \
+		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+		 * set with `setGlobalDefaultTheme()`.
+		 * */ theme?: Theme | undefined;
+		/**
+		 * Transforms keys into more pleasant control labels (e.g. capitalization and spaces in lieu of
+		 * camelCase, kebab-case, etc.)
+		 * @default `true`
+		 * */ prettyLabels?: boolean | undefined;
+		/**
+		 * Object to create an automatic set of Tweakpane controls for.
+		 *
+		 * Keys will be used as labels, and a (reasonably) appropriate Tweakpane control will be used
+		 * for each value's type.
+		 * @bindable
+		 * */ object: BindingObject;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type AutoObjectProps = typeof __propDef.props;
+export type AutoObjectEvents = typeof __propDef.events;
+export type AutoObjectSlots = typeof __propDef.slots;
+/**
+ * Rapid-development component which automatically creates a set of Tweakpane controls for an arbitrary
+ * object.
+ *
+ * Object keys will be used as labels, and a (reasonably) appropriate Tweakpane control will be used
+ * for each value's type.
+ *
+ * Values are generally mapped to controls according to the logic outlined in the [Tweakpane input
+ * binding documentation](https://tweakpane.github.io/docs/input-bindings/).
+ *
+ * This component is intended for quick tests where you want "best guess" non-customizable controls for
+ * an entire object, without considering the ideal component for each value.
+ *
+ * See `<AutoValue>` for a variation that works directly on a stand-alone value that isn't wrapped in
+ * an object.
+ *
+ * Records within the object will wrap their contents in a `<Folder>` component. Value objects in the
+ * shape of color or point objects will show a more specialized control.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the component in `<Pane
+ * position='inline'>`.
+ *
+ * `<AutoObject>` was inspired by the
+ * [`<TWPAutoMutable>`](https://github.com/MrFoxPro/solid-tweakpane/blob/master/src/automutable.tsx)
+ * component in [Dmitriy Nikiforov's](https://github.com/MrFoxPro)
+ * [solid-tweakpane](https://github.com/MrFoxPro/solid-tweakpane) library.
+ *
+ * Plugin component behavior is not available in `<AutoObject>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { AutoObject } from 'svelte-tweakpane-ui';
+ *
+ * let object = {
+ *   // Creates a <Checkbox>
+ *   someBoolean: true,
+ *   // Creates a <Color> picker
+ *   someColor: {
+ *     r: 255,
+ *     g: 0,
+ *
+ *     b: 55
+ *   },
+ *   // Wraps children in a <Folder>
+ *   someFolder: {
+ *     b: 2,
+ *     a: 1,
+ *     c: 3
+ *   },
+ *   // Creates a <Slider>
+ *   someNumber: 1,
+ *   // creates a <Point>
+ *   somePoint: {
+ *     x: 1,
+ *     y: 2
+ *   },
+ *   // Creates a <Text>
+ *   someString: 'test'
+ * };
+ * </script>
+ *
+ * <AutoObject bind:object />
+ *
+ * <pre>{JSON.stringify(object, null, 2)}</pre>
+ * ```
+ *
+ * @sourceLink
+ * [AutoObject.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/extra/AutoObject.svelte)
+ */
+export default class AutoObject extends SvelteComponent<
+	AutoObjectProps,
+	AutoObjectEvents,
+	AutoObjectSlots
+> {}
+export {};

package/dist/extra/AutoValue.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Text from '../control/Text.svelte';
+	import GenericBinding from '../internal/GenericBinding.svelte';
+	export let value;
+</script>
+
+{#if typeof value === 'string'}
+	<Text bind:value {...$$restProps} />
+{:else}
+	<GenericBinding bind:value {...$$restProps} />
+{/if}

package/dist/extra/AutoValue.svelte.d.ts

@@ -0,0 +1,123 @@
+import { SvelteComponent } from 'svelte';
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & {
+					[x: string]: string | number | boolean | object;
+				};
+				/** The key for the value in the target `object` that the control should manipulate. */
+				key: string | number;
+				/**
+				 * Prevent interactivity and gray out the control.
+				 * @default `false`
+				 */
+				disabled?: boolean | undefined;
+				/**
+				 * Text displayed next to control.
+				 * @default `undefined`
+				 */
+				label?: string | undefined;
+				/**
+				 * Tweakpane's internal options object.
+				 *
+				 * See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+				 *
+				 * Valid types are contingent on the type of the value `key` points to in `object`.
+				 *
+				 * This is intended internal use, when implementing convenience components wrapping Binding's
+				 * functionality. Options of interest are instead exposed as top-level props in _Svelte
+				 * Tweakpane UI_.
+				 * @default `undefined`
+				 */
+				options?: import('tweakpane').BindingParams | undefined;
+				/**
+				 * Custom color scheme.
+				 *
+				 * @default `undefined`  \
+				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
+				 * set with `setGlobalDefaultTheme()`.
+				 */
+				theme?: import('..').Theme | undefined;
+				/**
+				 * Reference to internal Tweakpane
+				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
+				 * this control.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality.
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('..').BindingRef | undefined;
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
+				 * the binding's containing `<Pane>`.
+				 *
+				 * This is primarily for internal use, when implementing convenience components wrapping
+				 * Binding's functionality in combination with a Tweakpane plugin.
+				 * @default `undefined`
+				 */
+				plugin?: import('tweakpane').TpPluginBundle | undefined;
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * The value to control.
+			 * @bindable
+			 */
+			value: string | number | boolean | object;
+		},
+		'options' | 'ref' | 'plugin'
+	>;
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type AutoValueProps = typeof __propDef.props;
+export type AutoValueEvents = typeof __propDef.events;
+export type AutoValueSlots = typeof __propDef.slots;
+/**
+ * Rapid-development component which automatically creates a Tweakpane control for an arbitrary value.
+ *
+ * A (reasonably) appropriate Tweakpane control will be used for the value type.
+ *
+ * This component is intended for quick tests where you don't want to fuss with component selection or
+ * customization.
+ *
+ * See `<AutoObject>` for a variation that works directly on a stand-alone value that isn't wrapped in
+ * an object.
+ *
+ * The value is generally mapped to controls according to the logic outlined in the [Tweakpane input
+ * binding documentation](https://tweakpane.github.io/docs/input-bindings/).
+ *
+ * Plugin component behavior is not available in `<AutoValue>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { AutoValue } from 'svelte-tweakpane-ui';
+ *
+ * let number = 0;
+ * let color = '#ff00ff';
+ * let point = { x: 0, y: 0 };
+ * let text = 'Cosmic manifold';
+ * </script>
+ *
+ * <AutoValue bind:value={number} label="Number" />
+ * <AutoValue bind:value={color} label="Color" />
+ * <AutoValue bind:value={point} label="Point" />
+ * <AutoValue bind:value={text} label="Text" />
+ * ```
+ */
+export default class AutoValue extends SvelteComponent<
+	AutoValueProps,
+	AutoValueEvents,
+	AutoValueSlots
+> {}
+export {};

package/dist/extra/Element.svelte

@@ -0,0 +1,53 @@
+<script>
+	import Blade from '../core/Blade.svelte';
+	import ClsPad from '../internal/ClsPad.svelte';
+	import { BROWSER } from 'esm-env';
+	export let maxHeight = void 0;
+	export let resetStyle = true;
+	const options = {
+		view: 'separator'
+	};
+	let ref;
+	let sourceDiv;
+	$: if (ref && ref.element) {
+		ref.element.replaceChildren(sourceDiv);
+	}
+</script>
+
+{#if BROWSER}
+	<Blade bind:ref {options} {...$$restProps} />
+{:else}
+	<ClsPad
+		keysAdd={['containerVerticalPadding', 'containerVerticalPadding']}
+		theme={$$props.theme}
+	/>
+{/if}
+
+<div bind:this={sourceDiv} class="element">
+	<div
+		class="element-container"
+		style:height={BROWSER ? null : `${maxHeight}px`}
+		style:max-height={maxHeight !== undefined ? `${maxHeight}px` : null}
+		style:overflow={BROWSER ? null : 'hidden'}
+	>
+		<div class:reset={resetStyle}>
+			<slot />
+		</div>
+	</div>
+</div>
+
+<style>
+	div.element {
+		padding-right: var(--cnt-hp);
+		padding-left: var(--cnt-hp);
+	}
+
+	div.element-container {
+		overflow: hidden;
+		border-radius: var(--bld-br);
+	}
+
+	div.reset {
+		all: initial;
+	}
+</style>