svelte-tweakpane-ui 1.0.0

package/dist/internal/GenericBladeFolding.svelte.d.ts

@@ -0,0 +1,95 @@
+import { SvelteComponent } from 'svelte';
+import type { BladeOptions, BladeRef } from '../core/Blade.svelte';
+declare class __sveltets_Render<T extends BladeOptions, U extends BladeRef> {
+	props(): {
+		/**
+		 * Blade configuration exposing Tweakpane's internal
+		 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+		 *
+		 */
+		options: T;
+		/**
+		 * 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?: import('..').Theme | undefined;
+		/**
+		 * Reference to internal Tweakpane
+		 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
+		 *
+		 * This is primarily for internal use, when implementing convenience components wrapping Blade's
+		 * functionality.
+		 * @bindable
+		 * @readonly
+		 */
+		ref?: U | undefined;
+		/**
+		 * Imported Tweakpane `TpPluginBundle` (Aliased as `Plugin`) module to register before creating
+		 * the blade.
+		 *
+		 * This is primarily for internal use, when implementing convenience components wrapping Blade's
+		 * functionality in combination with a Tweakpane plugin.
+		 * @default `undefined`
+		 */
+		plugin?: import('tweakpane').TpPluginBundle | undefined;
+	} & {
+		/**
+		 * DOM class name of the button used to expand and collapse the blade's picker.
+		 * @default `undefined`
+		 * */
+		buttonClass?: string | undefined;
+		/**
+		 * Expand or collapse the blade's picker.
+		 * @default `true`
+		 * @bindable
+		 * */
+		expanded?: boolean | undefined;
+		/**
+		 * The style of value "picker" to use in the blade.
+		 * @default `'popup'`
+		 */
+		picker?: 'inline' | 'popup' | undefined;
+		/**
+		 * Allow users to interactively expand / contract the value picker by clicking its icon.
+		 *
+		 * Most useful when `picker` is `inline`.
+		 * @default `true`
+		 * */
+		userExpandable?: boolean | undefined;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type GenericBladeFoldingProps<T extends BladeOptions, U extends BladeRef> = ReturnType<
+	__sveltets_Render<T, U>['props']
+>;
+export type GenericBladeFoldingEvents<T extends BladeOptions, U extends BladeRef> = ReturnType<
+	__sveltets_Render<T, U>['events']
+>;
+export type GenericBladeFoldingSlots<T extends BladeOptions, U extends BladeRef> = ReturnType<
+	__sveltets_Render<T, U>['slots']
+>;
+/**
+ * This component is for internal use only.
+ *
+ * @sourceLink
+ * [GenericBladeFolding.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericBladeFolding.svelte)
+ */
+export default class GenericBladeFolding<
+	T extends BladeOptions,
+	U extends BladeRef
+> extends SvelteComponent<
+	GenericBladeFoldingProps<T, U>,
+	GenericBladeFoldingEvents<T, U>,
+	GenericBladeFoldingSlots<T, U>
+> {}
+export {};

package/dist/internal/GenericInput.svelte

@@ -0,0 +1,19 @@
+<script context="module"></script>
+
+<script
+	generics="T extends any, U extends GenericInputOptions = GenericInputOptions, V extends GenericInputRef = GenericInputRef"
+>
+	import GenericBinding from './GenericBinding.svelte';
+	import { BROWSER } from 'esm-env';
+	export let options = void 0;
+	export let ref = void 0;
+	export let value;
+	let optionsInternal;
+	$: BROWSER &&
+		(optionsInternal = {
+			...options,
+			readonly: false
+		});
+</script>
+
+<GenericBinding bind:value bind:ref options={optionsInternal} {...$$restProps} />

package/dist/internal/GenericInput.svelte.d.ts

@@ -0,0 +1,116 @@
+import { SvelteComponent } from 'svelte';
+import type { BaseInputParams, InputBindingApi } from '@tweakpane/core';
+export type GenericInputOptions = BaseInputParams;
+export type GenericInputRef = InputBindingApi;
+declare class __sveltets_Render<
+	T extends any,
+	U extends GenericInputOptions = GenericInputOptions,
+	V extends GenericInputRef = GenericInputRef
+> {
+	props(): Omit<
+		{
+			/**
+			 * The binding's target object with values to manipulate.
+			 * @bindable
+			 */
+			object: import('@tweakpane/core').Bindable & {
+				[x: string]: T;
+			};
+			/** 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?: U | 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?: V | 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/core').TpPluginBundle | undefined;
+		},
+		'object' | 'key'
+	> & {
+		/**
+		 * The value to control.
+		 * @bindable
+		 */
+		value: T;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type GenericInputProps<
+	T extends any,
+	U extends GenericInputOptions = GenericInputOptions,
+	V extends GenericInputRef = GenericInputRef
+> = ReturnType<__sveltets_Render<T, U, V>['props']>;
+export type GenericInputEvents<
+	T extends any,
+	U extends GenericInputOptions = GenericInputOptions,
+	V extends GenericInputRef = GenericInputRef
+> = ReturnType<__sveltets_Render<T, U, V>['events']>;
+export type GenericInputSlots<
+	T extends any,
+	U extends GenericInputOptions = GenericInputOptions,
+	V extends GenericInputRef = GenericInputRef
+> = ReturnType<__sveltets_Render<T, U, V>['slots']>;
+/**
+ * This component is for internal use only.
+ *
+ * @sourceLink
+ * [GenericInput.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericInput.svelte)
+ */
+export default class GenericInput<
+	T extends any,
+	U extends GenericInputOptions = GenericInputOptions,
+	V extends GenericInputRef = GenericInputRef
+> extends SvelteComponent<
+	GenericInputProps<T, U, V>,
+	GenericInputEvents<T, U, V>,
+	GenericInputSlots<T, U, V>
+> {}
+export {};

package/dist/internal/GenericInputFolding.svelte

@@ -0,0 +1,40 @@
+<script context="module"></script>
+
+<script
+	generics="T extends any, U extends GenericInputFoldingOptions = GenericInputFoldingOptions, V extends GenericInputFoldingRef = GenericInputFoldingRef"
+>
+	import GenericInput from './GenericInput.svelte';
+	import { updateCollapsibility } from '../utils.js';
+	export let value;
+	export let ref = void 0;
+	export let options = void 0;
+	export let userExpandable = true;
+	export let expanded = false;
+	export let buttonClass = '';
+	export let picker = void 0;
+	let optionsInternal;
+	let gotBinding = false;
+	const initialExpanded = expanded;
+	let internalExpanded = initialExpanded;
+	$: if (!gotBinding && ref) {
+		gotBinding = true;
+		ref.controller?.valueController?.foldable_?.value('expanded').emitter.on('change', (e) => {
+			internalExpanded = e.rawValue;
+			expanded = internalExpanded;
+		});
+	}
+	$: optionsInternal = {
+		...options,
+		expanded: initialExpanded,
+		// only set once
+		picker
+	};
+	$: ref && buttonClass && updateCollapsibility(userExpandable ?? true, ref.element, buttonClass);
+	$: ref &&
+		buttonClass &&
+		expanded !== internalExpanded &&
+		ref.element.getElementsByClassName(buttonClass).length > 0 &&
+		ref.element.getElementsByClassName(buttonClass)[0].click();
+</script>
+
+<GenericInput bind:value bind:ref options={optionsInternal} {...$$restProps} />

package/dist/internal/GenericInputFolding.svelte.d.ts

@@ -0,0 +1,140 @@
+import { SvelteComponent } from 'svelte';
+import type { GenericInputOptions, GenericInputRef } from './GenericInput.svelte';
+export type GenericInputFoldingOptions = GenericInputOptions & {
+	expanded?: boolean;
+};
+export type GenericInputFoldingRef = GenericInputRef;
+declare class __sveltets_Render<
+	T extends any,
+	U extends GenericInputFoldingOptions = GenericInputFoldingOptions,
+	V extends GenericInputFoldingRef = GenericInputFoldingRef
+> {
+	props(): Omit<
+		{
+			/**
+			 * The binding's target object with values to manipulate.
+			 * @bindable
+			 */
+			object: import('@tweakpane/core').Bindable & {
+				[x: string]: T;
+			};
+			/** 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?: U | 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?: V | 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: T;
+	} & {
+		/**
+		 * DOM class name of the button used to expand and collapse the input's picker.
+		 * @default `undefined`
+		 * */
+		buttonClass?: string | undefined;
+		/**
+		 * Expand or collapse the input's picker.
+		 * @default `false`
+		 * @bindable
+		 * */
+		expanded?: boolean | undefined;
+		/**
+		 * The style of value "picker" to use in the input.
+		 * @default `'popup'`
+		 */
+		picker?: 'inline' | 'popup' | undefined;
+		/**
+		 * Allow users to interactively expand / contract the picker.
+		 * @default `true`
+		 * */
+		userExpandable?: boolean | undefined;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type GenericInputFoldingProps<
+	T extends any,
+	U extends GenericInputFoldingOptions = GenericInputFoldingOptions,
+	V extends GenericInputFoldingRef = GenericInputFoldingRef
+> = ReturnType<__sveltets_Render<T, U, V>['props']>;
+export type GenericInputFoldingEvents<
+	T extends any,
+	U extends GenericInputFoldingOptions = GenericInputFoldingOptions,
+	V extends GenericInputFoldingRef = GenericInputFoldingRef
+> = ReturnType<__sveltets_Render<T, U, V>['events']>;
+export type GenericInputFoldingSlots<
+	T extends any,
+	U extends GenericInputFoldingOptions = GenericInputFoldingOptions,
+	V extends GenericInputFoldingRef = GenericInputFoldingRef
+> = ReturnType<__sveltets_Render<T, U, V>['slots']>;
+/**
+ * This component is for internal use only.
+ *
+ * @sourceLink
+ * [GenericInputFolding.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericInputFolding.svelte)
+ */
+export default class GenericInputFolding<
+	T extends any,
+	U extends GenericInputFoldingOptions = GenericInputFoldingOptions,
+	V extends GenericInputFoldingRef = GenericInputFoldingRef
+> extends SvelteComponent<
+	GenericInputFoldingProps<T, U, V>,
+	GenericInputFoldingEvents<T, U, V>,
+	GenericInputFoldingSlots<T, U, V>
+> {}
+export {};

package/dist/internal/GenericMonitor.svelte

@@ -0,0 +1,24 @@
+<script context="module"></script>
+
+<script
+	generics="T extends any, U extends GenericMonitorOptions, V extends GenericMonitorRef = GenericMonitorRef"
+>
+	import GenericBinding from './GenericBinding.svelte';
+	export let value;
+	export let ref = void 0;
+	export let options = void 0;
+	export let rows = void 0;
+	export let bufferSize = void 0;
+	export let interval = void 0;
+	let optionsInternal;
+	$: optionsInternal = {
+		bufferSize,
+		interval: interval ?? 0,
+		// zero confirmed as never updating (not same interface as setInterval())
+		rows,
+		...options,
+		readonly: true
+	};
+</script>
+
+<GenericBinding {value} bind:ref options={optionsInternal} {...$$restProps} />

package/dist/internal/GenericMonitor.svelte.d.ts

@@ -0,0 +1,139 @@
+import { SvelteComponent } from 'svelte';
+import type { BaseMonitorParams, MonitorBindingApi } from '@tweakpane/core';
+export type GenericMonitorOptions = BaseMonitorParams;
+export type GenericMonitorRef = MonitorBindingApi;
+declare class __sveltets_Render<
+	T extends any,
+	U extends GenericMonitorOptions,
+	V extends GenericMonitorRef = GenericMonitorRef
+> {
+	props(): Omit<
+		{
+			/**
+			 * The binding's target object with values to manipulate.
+			 * @bindable
+			 */
+			object: import('@tweakpane/core').Bindable & {
+				[x: string]: T;
+			};
+			/** 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?: U | 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?: V | 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/core').TpPluginBundle | undefined;
+		},
+		'object' | 'key'
+	> & {
+		/**
+		 * The value to control.
+		 * @bindable
+		 */
+		value: T;
+	} & {
+		/**
+		 * Number of past states to retain.
+		 * @default `1`  \
+		 * Or `64` if value is `number` and `graph` is `true`.
+		 * */
+		bufferSize?: number | undefined;
+		/**
+		 * Time between value samples in milliseconds.
+		 *
+		 * Useful when `graph` is true. Defaults to reactive value updates only (`interval={0}`).
+		 * @default `0`
+		 * */
+		interval?: number | undefined;
+		/**
+		 * Number of visible rows of state history.
+		 *
+		 * If `bufferSize` is larger, then the value window will scroll once state history exceeds
+		 * row count.
+		 * @default `1`  \
+		 * Or `3` if value is `string` and `multiline` is `true`.
+		 * */
+		rows?: number | undefined;
+	};
+	events(): {} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots(): {};
+}
+export type GenericMonitorProps<
+	T extends any,
+	U extends GenericMonitorOptions,
+	V extends GenericMonitorRef = GenericMonitorRef
+> = ReturnType<__sveltets_Render<T, U, V>['props']>;
+export type GenericMonitorEvents<
+	T extends any,
+	U extends GenericMonitorOptions,
+	V extends GenericMonitorRef = GenericMonitorRef
+> = ReturnType<__sveltets_Render<T, U, V>['events']>;
+export type GenericMonitorSlots<
+	T extends any,
+	U extends GenericMonitorOptions,
+	V extends GenericMonitorRef = GenericMonitorRef
+> = ReturnType<__sveltets_Render<T, U, V>['slots']>;
+/**
+ * This component is for internal use only.
+ *
+ * @sourceLink
+ * [GenericMonitor.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/internal/GenericMonitor.svelte)
+ */
+export default class GenericMonitor<
+	T extends any,
+	U extends GenericMonitorOptions,
+	V extends GenericMonitorRef = GenericMonitorRef
+> extends SvelteComponent<
+	GenericMonitorProps<T, U, V>,
+	GenericMonitorEvents<T, U, V>,
+	GenericMonitorSlots<T, U, V>
+> {}
+export {};

package/dist/internal/GenericPane.svelte

@@ -0,0 +1,100 @@
+<script>
+	import ClsPad from './ClsPad.svelte';
+	import { applyTheme } from '../theme.js';
+	import { updateCollapsibility } from '../utils.js';
+	import { BROWSER } from 'esm-env';
+	import { getContext, onDestroy, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { Pane as TpPane } from 'tweakpane';
+	export let title = void 0;
+	export let userExpandable = true;
+	export let expanded = true;
+	export let theme = void 0;
+	export let scale = 1;
+	export let userCreatedPane = true;
+	export let paneRef = void 0;
+	const parentStore = writable();
+	const existingParentStore = getContext('parentStore');
+	let pluginsRegistered = [];
+	const registerPlugin = (plugin) => {
+		if (paneRef === void 0) {
+			console.warn('`paneRef is undefined, failed to register plugin "${plugin.id}"');
+		} else {
+			if (pluginsRegistered.includes(plugin.id)) {
+			} else {
+				paneRef?.registerPlugin(plugin);
+				pluginsRegistered.push(plugin.id);
+			}
+		}
+	};
+	setContext('registerPlugin', registerPlugin);
+	setContext('userCreatedPane', userCreatedPane);
+	if ($existingParentStore !== void 0) {
+		console.warn('<Panes> must not be nested');
+	}
+	let _expanded = expanded;
+	if (BROWSER) {
+		$parentStore = new TpPane({ expanded, title });
+		$parentStore.on('fold', () => {
+			_expanded = $parentStore.expanded;
+		});
+		paneRef = $parentStore;
+		setContext('parentStore', parentStore);
+		onDestroy(() => {
+			$parentStore.dispose();
+		});
+	} else {
+		setContext('parentStore', writable(true));
+	}
+	function setScale(scale2) {
+		if (paneRef) {
+			if (scale2 === 1) {
+				paneRef.element.style.removeProperty('transform-origin');
+				paneRef.element.style.removeProperty('transform');
+				paneRef.element.style.removeProperty('width');
+			} else {
+				const clampedScale = Math.max(0, scale2);
+				paneRef.element.style.transformOrigin = '0 0';
+				paneRef.element.style.transform = `scale(${clampedScale})`;
+				paneRef.element.style.width = `${100 / clampedScale}%`;
+			}
+		}
+	}
+	function syncFolded() {
+		if (paneRef) {
+			paneRef.expanded = _expanded;
+		}
+		expanded = _expanded;
+	}
+	$: BROWSER && paneRef && setScale(scale);
+	$: BROWSER &&
+		paneRef &&
+		updateCollapsibility(userExpandable, paneRef.element, 'tp-rotv_b', 'tp-rotv_m');
+	$: BROWSER && paneRef && title && (paneRef.title = title);
+	$: BROWSER && paneRef && applyTheme(paneRef.element, theme);
+	$: _expanded, BROWSER && paneRef && syncFolded();
+	$: BROWSER && paneRef && (_expanded = expanded);
+</script>
+
+{#if BROWSER}
+	<slot />
+{:else if expanded}
+	{#if title === undefined}
+		<ClsPad keysAdd={['containerVerticalPadding']} {theme} />
+	{:else}
+		<ClsPad
+			keysAdd={[
+				'containerVerticalPadding',
+				'containerVerticalPadding',
+				'containerVerticalPadding',
+				'containerUnitSize'
+			]}
+			{theme}
+		/>
+	{/if}
+	<slot />
+{:else if title === undefined}
+	<!-- Nothing renders -->
+{:else}
+	<ClsPad keysAdd={['containerVerticalPadding', 'containerUnitSize']} {theme} />
+{/if}