svelte-tweakpane-ui 1.0.0

package/dist/control/CubicBezier.svelte

@@ -0,0 +1,74 @@
+<script context="module"></script>
+
+<script>
+	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import { CubicBezier } from '@tweakpane/plugin-essentials';
+	import ClsPad from '../internal/ClsPad.svelte';
+	import GenericBladeFolding from '../internal/GenericBladeFolding.svelte';
+	import { fillWith } from '../utils';
+	import { BROWSER } from 'esm-env';
+	export let value;
+	export let label = void 0;
+	export let expanded = void 0;
+	let options;
+	let cubicBezierBlade;
+	const buttonClass = 'tp-cbzv_b';
+	function getValue() {
+		if (Array.isArray(value)) {
+			return value;
+		} else {
+			return [value.x1, value.y1, value.x2, value.y2];
+		}
+	}
+	function setValue() {
+		if (Array.isArray(value)) {
+			cubicBezierBlade.value = new CubicBezier(value[0], value[1], value[2], value[3]);
+		} else {
+			cubicBezierBlade.value = new CubicBezier(value.x1, value.y1, value.x2, value.y2);
+		}
+	}
+	function addEvent() {
+		cubicBezierBlade.on('change', (ev) => {
+			if (Array.isArray(value)) {
+				value = [ev.value.x1, ev.value.y1, ev.value.x2, ev.value.y2];
+			} else {
+				value = {
+					x1: ev.value.x1,
+					y1: ev.value.y1,
+					x2: ev.value.x2,
+					y2: ev.value.y2
+				};
+			}
+		});
+	}
+	$: options = {
+		value: getValue(),
+		label,
+		view: 'cubicbezier'
+	};
+	$: cubicBezierBlade && addEvent();
+	$: value, cubicBezierBlade && setValue();
+</script>
+
+<GenericBladeFolding
+	bind:expanded
+	bind:ref={cubicBezierBlade}
+	{buttonClass}
+	{options}
+	plugin={pluginModule}
+	{...$$restProps}
+/>
+{#if !BROWSER}
+	<ClsPad keysAdd={fillWith('containerUnitSize', 1)} theme={$$props.theme} />
+	{#if expanded && $$props.picker === 'inline'}
+		<ClsPad keysAdd={fillWith('containerUnitSize', 6)} theme={$$props.theme} />
+		<ClsPad keysAdd={fillWith('containerUnitSpacing', 2)} theme={$$props.theme} />
+	{/if}
+{/if}
+
+<style>
+	/* Fix overflow bug from the plugin TODO PR */
+	:global(div.tp-cbzv:not(tp-cbzv-expanded) div.tp-cbzv_p) {
+		overflow: hidden !important;
+	}
+</style>

package/dist/control/CubicBezier.svelte.d.ts

@@ -0,0 +1,204 @@
+import { SvelteComponent } from 'svelte';
+import type { Simplify } from '../utils';
+export type CubicBezierValueObject = {
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
+};
+export type CubicBezierValueTuple = [x1: number, y1: number, x2: number, y2: number];
+export type CubicBezierValue = Simplify<CubicBezierValueObject | CubicBezierValueTuple>;
+import type { CubicBezierApi as CubicBezierRef } from '@tweakpane/plugin-essentials';
+import type { CubicBezierBladeParams as CubicBezierOptions } from '@tweakpane/plugin-essentials/dist/types/cubic-bezier/plugin.d.ts';
+declare const __propDef: {
+	props: Omit<
+		{
+			/**
+			 * Blade configuration exposing Tweakpane's internal
+			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
+			 *
+			 */
+			options: CubicBezierOptions;
+			/**
+			 * 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?: CubicBezierRef | 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;
+		},
+		'options' | 'ref' | 'plugin' | 'buttonClass'
+	> & {
+		/**
+		 * The cubic bezier value to control.
+		 *
+		 * Object value type is a convenience added by _Svelte Tweakpane UI_, and is not part of the
+		 * original `@tweakpane/plugin-essentials` API.
+		 * @bindable
+		 */
+		value: CubicBezierValue;
+		/**
+		 * Text displayed next to the control.
+		 * @default `undefined`
+		 * */
+		label?: string | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type CubicBezierProps = typeof __propDef.props;
+export type CubicBezierEvents = typeof __propDef.events;
+export type CubicBezierSlots = typeof __propDef.slots;
+/**
+ * A control for editing a bezier curve. Ideal for tweaking animation easing values.
+ *
+ * Integrates the [Cubic Bezier](https://github.com/tweakpane/plugin-essentials#cubic-bezier) control
+ * from Tweakpane-creator [Hiroki Kokubun's](https://cocopon.me)  [Essentials
+ * plugin](https://github.com/tweakpane/plugin-essentials).
+ *
+ * _Svelte Tweakpane UI_ extends the original implementation to by supporting tuple values in addition
+ * to object values.
+ *
+ * A utility function `Utils.cubicBezierToEaseFunction()` is also provided to easily convert a cubic
+ * bezier value to an easing function compatible with Svelte's built-in
+ * [motion](https://svelte.dev/docs/svelte-motion),
+ * [transition](https://svelte.dev/docs/svelte-transition), and
+ * [animate](https://svelte.dev/docs/svelte-animate) modules.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the cubic bezier control in `<Pane
+ * position='inline'>`.
+ *
+ * _Note: A memory leak has been observed in situations when the `value` prop is written frequently
+ * from outside the component. See [issue
+ * #18](https://github.com/tweakpane/plugin-essentials/issues/18) on the Plugin Essentials repo for
+ * updates. Consider managing the lifecycle of this component with care until this issue is resolved._
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import {
+ *   CubicBezier,
+ *   type CubicBezierValue,
+ *   RadioGrid,
+ *   Slider,
+ *   Utils
+ * } from 'svelte-tweakpane-ui';
+ * import { tweened } from 'svelte/motion';
+ *
+ * // could also be a tuple
+ * let value: CubicBezierValue = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1.0 };
+ * let duration = 1000;
+ * let moods = ['Set', 'Rise'];
+ * let mood: string = moods[0];
+ *
+ * const positionTween = tweened(0);
+ *
+ * function lerp(value: number, low: number, high: number): number {
+ *   return (1 - value) * low + value * high;
+ * }
+ *
+ * $: positionTween.set(mood === 'Set' ? 0 : 1, {
+ *   duration,
+ *   easing: Utils.cubicBezierToEaseFunction(value)
+ * });
+ *
+ * $: celestialHeight = lerp($positionTween, 20, 80);
+ * $: twilightAmount = lerp($positionTween, 20, -80);
+ * </script>
+ *
+ * <CubicBezier bind:value expanded={true} picker="inline" />
+ * <Slider
+ * bind:value={duration}
+ * min={0}
+ * max={10000}
+ * format={(v) => `${(v / 1000).toFixed(1)}`}
+ * label="Duration (Seconds)"
+ * />
+ * <RadioGrid bind:value={mood} values={['Rise', 'Set']} />
+ *
+ * <div class="demo" style:--a="{twilightAmount}%">
+ * <div class="celestial-object" style:--t="{celestialHeight}%" />
+ * </div>
+ *
+ * <style>
+ * .demo {
+ *   position: relative;
+ *   overflow: hidden;
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(to top, orange var(--a), magenta 100%);
+ * }
+ *
+ * .celestial-object {
+ *   position: absolute;
+ *   bottom: var(--t);
+ *   left: 50%;
+ *   transform-origin: center;
+ *   transform: translate(-50%, 50%);
+ *   aspect-ratio: 1;
+ *   width: 20%;
+ *   background-color: yellow;
+ *   border-radius: 50%;
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [CubicBezier.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/CubicBezier.svelte)
+ */
+export default class CubicBezier extends SvelteComponent<
+	CubicBezierProps,
+	CubicBezierEvents,
+	CubicBezierSlots
+> {}
+export {};

package/dist/control/Image.svelte

@@ -0,0 +1,23 @@
+<script context="module"></script>
+
+<script>
+	import * as pluginModule from '@kitschpatrol/tweakpane-image-plugin';
+	import ClsPad from '../internal/ClsPad.svelte';
+	import GenericInput from '../internal/GenericInput.svelte';
+	import { fillWith } from '../utils';
+	import { BROWSER } from 'esm-env';
+	export let value = 'placeholder';
+	export let fit = void 0;
+	export let extensions = void 0;
+	let options;
+	$: options = {
+		extensions,
+		imageFit: fit,
+		view: 'input-image'
+	};
+</script>
+
+<GenericInput bind:value {options} plugin={pluginModule} {...$$restProps} />
+{#if !BROWSER}
+	<ClsPad keysAdd={fillWith('containerVerticalPadding', 2)} theme={$$props.theme} />
+{/if}

package/dist/control/Image.svelte.d.ts

@@ -0,0 +1,177 @@
+import { SvelteComponent } from 'svelte';
+export type ImageValue = 'placeholder' | File | HTMLImageElement | string | undefined;
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & {
+					[x: string]: ImageValue;
+				};
+				/** 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/core').BaseInputParams | 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('../internal/GenericInput.svelte').GenericInputRef | 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'
+		> & {
+			/**
+			 * Image data
+			 * @default `'placeholder'`
+			 * @bindable
+			 */
+			value: ImageValue;
+		},
+		'ref' | 'plugin' | 'value'
+	> & {
+		/**
+		 * Image data
+		 * @default `'placeholder'`
+		 * @bindable
+		 */
+		value?: ImageValue;
+		/**
+		 * Array of image extension types to accept.
+		 * @default `['.jpg', '.png', '.gif']`
+		 */
+		extensions?: string[] | undefined;
+		/**
+		 * How to display the image in the preview pane.
+		 *
+		 * Renamed from `imageFit` in `tweakpane-image-plugin` for concision.
+		 * @default `'cover'`
+		 */
+		fit?: 'contain' | 'cover' | undefined;
+	};
+	events: {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {};
+};
+export type ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+/**
+ * An image input control.
+ *
+ * Integrates the [tweakpane-image-plugin](https://github.com/metehus/tweakpane-image-plugin),
+ * incorporating work by [Florian Morel](http://ayamflow.fr), [Matheus
+ * Dias](https://www.linkedin.com/in/matheusdbs/), [Palash Bansal](https://github.com/repalash), and
+ * others.
+ *
+ * Note that _Svelte Tweakpane UI_ embeds a
+ * [fork](https://github.com/kitschpatrol/tweakpane-image-plugin) of the plugin with support for
+ * Tweakpane 4. The dependency will be updated to point to the source repository if / when the open
+ * [pull request](https://github.com/metehus/tweakpane-image-plugin/pull/1) with Tweakpane 4 support is
+ * merged.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the image control in `<Pane
+ * position='inline'>`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { Button, Image } from 'svelte-tweakpane-ui';
+ *
+ * let src = 'placeholder';
+ * let kittenIndex = 1;
+ * </script>
+ *
+ * <Image bind:value={src} fit="contain" label="Image" />
+ * <Button
+ * on:click={() => {
+ *   src = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
+ *   kittenIndex = (kittenIndex % 16) + 1;
+ * }}
+ * label="Random Placeholder"
+ * title="Load Kitten"
+ * />
+ *
+ * <div class="demo">
+ * {#if src === 'placeholder'}
+ *   <p>Tap “No Image” above to load an image from disk.</p>
+ * {:else}
+ *   <img alt="" {src} />
+ * {/if}
+ * </div>
+ *
+ * <style>
+ * div.demo {
+ *   display: flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(magenta, orange);
+ * }
+ *
+ * div.demo > img {
+ *   max-width: 80%;
+ *   max-height: 80%;
+ * }
+ *
+ * div.demo > p {
+ *   max-width: 50%;
+ *   color: white;
+ *   text-align: center;
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [Image.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Image.svelte)
+ */
+export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {}
+export {};

package/dist/control/IntervalSlider.svelte

@@ -0,0 +1,37 @@
+<script context="module"></script>
+
+<script>
+	import * as pluginModule from '@tweakpane/plugin-essentials';
+	import GenericSlider from '../internal/GenericSlider.svelte';
+	export let value;
+	export let meanValue = void 0;
+	let internalValue;
+	function updateInternalValue() {
+		if (Array.isArray(value)) {
+			const [min, max] = value;
+			internalValue = { min, max };
+		} else {
+			internalValue = value;
+		}
+	}
+	function updateValue() {
+		if (Array.isArray(value)) {
+			const { min, max } = internalValue;
+			value = [min, max];
+		} else {
+			value = internalValue;
+		}
+	}
+	function updateValueFromMean() {
+		if (meanValue !== void 0) {
+			const r = internalValue.max - internalValue.min;
+			internalValue = { min: meanValue - r / 2, max: meanValue + r / 2 };
+		}
+	}
+	$: value, updateInternalValue();
+	$: internalValue, updateValue();
+	$: meanValue = (internalValue.min + internalValue.max) / 2;
+	$: meanValue, updateValueFromMean();
+</script>
+
+<GenericSlider bind:value={internalValue} plugin={pluginModule} {...$$restProps} />