svelte-tweakpane-ui 1.0.0 → 1.0.2

package/dist/control/ButtonGrid.svelte

@@ -32,14 +32,13 @@
 		size: [gridDimensions.columns, gridDimensions.rows],
 		view: 'buttongrid'
 	};
-	$: gridBlade &&
-		gridBlade.on('click', (ev) => {
-			dispatch('click', {
-				cell: { x: ev.index[0], y: ev.index[1] },
-				index: ev.index[1] * gridDimensions.columns + ev.index[0],
-				label: ev.cell.title
-			});
+	$: gridBlade?.on('click', (event) => {
+		dispatch('click', {
+			cell: { x: event.index[0], y: event.index[1] },
+			index: event.index[1] * gridDimensions.columns + event.index[0],
+			label: event.cell.title
 		});
+	});
 </script>
 
 <Blade bind:ref={gridBlade} {options} plugin={pluginModule} {...$$restProps} />

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

@@ -128,7 +128,9 @@ export type ButtonGridSlots = typeof __propDef.slots;
  * } from 'svelte-tweakpane-ui';
  *
  * const keyboard = [
- *   ...Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)),
+ *   ...Array.from({ length: 26 }, (_, index) =>
+ *     String.fromCodePoint(65 + index)
+ *   ),
  *   ',',
  *   '.',
  *   '!',
@@ -137,11 +139,11 @@ export type ButtonGridSlots = typeof __propDef.slots;
  *
  * let textBuffer = '';
  *
- * function handleClick(e: ButtonGridClickEvent) {
+ * function handleClick(event: ButtonGridClickEvent) {
  *   textBuffer =
- *     e.detail.label === '⌫'
+ *     event.detail.label === '⌫'
  *       ? textBuffer.slice(0, -1)
- *       : textBuffer + e.detail.label;
+ *       : textBuffer + event.detail.label;
  * }
  * </script>
  *

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

@@ -7,11 +7,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: boolean;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, boolean>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -25,11 +25,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: ColorValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, ColorValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/CubicBezier.svelte

@@ -14,31 +14,23 @@
 	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];
-		}
+		return Array.isArray(value) ? value : [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);
-		}
+		cubicBezierBlade.value = Array.isArray(value)
+			? new CubicBezier(value[0], value[1], value[2], value[3])
+			: 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
-				};
-			}
+		cubicBezierBlade.on('change', (event) => {
+			value = Array.isArray(value)
+				? [event.value.x1, event.value.y1, event.value.x2, event.value.y2]
+				: {
+						x1: event.value.x1,
+						y1: event.value.y1,
+						x2: event.value.x2,
+						y2: event.value.y2
+					};
 		});
 	}
 	$: options = {

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

@@ -118,6 +118,9 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * Usage outside of a `<Pane>` component will implicitly wrap the cubic bezier control in `<Pane
  * position='inline'>`.
  *
+ * Complete functionality of the `scale` prop is [pending a pull
+ * request](https://github.com/tweakpane/plugin-essentials/pull/19).
+ *
  * _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
@@ -136,7 +139,7 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * 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 value: CubicBezierValue = { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 };
  * let duration = 1000;
  * let moods = ['Set', 'Rise'];
  * let mood: string = moods[0];
@@ -160,7 +163,7 @@ export type CubicBezierSlots = typeof __propDef.slots;
  * <Slider
  * bind:value={duration}
  * min={0}
- * max={10000}
+ * max={10_000}
  * format={(v) => `${(v / 1000).toFixed(1)}`}
  * label="Duration (Seconds)"
  * />

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

@@ -8,11 +8,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: ImageValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, ImageValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -125,14 +123,14 @@ export type ImageSlots = typeof __propDef.slots;
  * <script lang="ts">
  * import { Button, Image } from 'svelte-tweakpane-ui';
  *
- * let src = 'placeholder';
+ * let source = 'placeholder';
  * let kittenIndex = 1;
  * </script>
  *
- * <Image bind:value={src} fit="contain" label="Image" />
+ * <Image bind:value={source} fit="contain" label="Image" />
  * <Button
  * on:click={() => {
- *   src = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
+ *   source = `https://placekitten.com/1024/1024?image=${kittenIndex}`;
  *   kittenIndex = (kittenIndex % 16) + 1;
  * }}
  * label="Random Placeholder"
@@ -140,10 +138,10 @@ export type ImageSlots = typeof __propDef.slots;
  * />
  *
  * <div class="demo">
- * {#if src === 'placeholder'}
+ * {#if source === 'placeholder'}
  *   <p>Tap “No Image” above to load an image from disk.</p>
  * {:else}
- *   <img alt="" {src} />
+ *   <img alt="" src={source} />
  * {/if}
  * </div>
  *

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

@@ -14,11 +14,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: IntervalSliderValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, IntervalSliderValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/List.svelte

@@ -10,8 +10,8 @@
 	let listBlade;
 	let bladeOptions;
 	function addEvent() {
-		listBlade.on('change', (ev) => {
-			value = ev.value;
+		listBlade.on('change', (event) => {
+			value = event.value;
 		});
 	}
 	function getInitialValue() {
@@ -20,35 +20,29 @@
 			if (Array.isArray(internalOptions)) {
 				value = internalOptions[0].value;
 				return value;
-			} else {
-				value = internalOptions[Object.keys(internalOptions)[0]];
-				return value;
 			}
-		} else {
+			value = internalOptions[Object.keys(internalOptions)[0]];
 			return value;
 		}
+		return value;
 	}
-	function isArrayStyleListOptions(obj) {
+	function isArrayStyleListOptions(object) {
 		return (
-			Array.isArray(obj) &&
-			obj.every(
+			Array.isArray(object) &&
+			object.every(
 				(item) => typeof item === 'object' && item !== null && 'text' in item && 'value' in item
 			)
 		);
 	}
-	function isObjectStyleListOptions(obj) {
-		return typeof obj === 'object' && obj !== null && !Array.isArray(obj);
+	function isObjectStyleListOptions(object) {
+		return typeof object === 'object' && object !== null && !Array.isArray(object);
 	}
 	function getInternalOptions(options2) {
-		if (isArrayStyleListOptions(options2)) {
-			return options2;
-		} else if (isObjectStyleListOptions(options2)) {
-			return options2;
-		} else {
-			return options2.map((value2) => {
-				return { value: value2, text: JSON.stringify(value2) };
-			});
-		}
+		return isArrayStyleListOptions(options2)
+			? options2
+			: isObjectStyleListOptions(options2)
+				? options2
+				: options2.map((value2) => ({ value: value2, text: JSON.stringify(value2) }));
 	}
 	function setValue() {
 		listBlade.value = value;

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

@@ -1,13 +1,11 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
 export type ListOptionsArray<T> = T[];
-export type ListOptionsObjectArray<T> = {
+export type ListOptionsObjectArray<T> = Array<{
 	value: T;
 	text: string;
-}[];
-export type ListOptionsRecord<T> = {
-	[text: string]: T;
-};
+}>;
+export type ListOptionsRecord<T> = Record<string, T>;
 export type ListOptions<T> = Simplify<
 	ListOptionsArray<T> | ListOptionsObjectArray<T> | ListOptionsRecord<T>
 >;

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

@@ -31,10 +31,10 @@ export type PointOptions<
 > = Dimensions extends '4'
 	? Point4dInputParams[Axis]
 	: Dimensions extends '3'
-	  ? Point3dInputParams[Axis]
-	  : Dimensions extends '2'
-	    ? Point2dInputParams[Axis]
-	    : never;
+		? Point3dInputParams[Axis]
+		: Dimensions extends '2'
+			? Point2dInputParams[Axis]
+			: never;
 declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointValue4d> {
 	props(): Omit<
 		Omit<
@@ -43,11 +43,9 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: T;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, T>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
@@ -74,10 +72,10 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 					| (T extends PointValue4d
 							? Point4dInputParams
 							: T extends PointValue3d
-							  ? Point3dInputParams
-							  : T extends PointValue2d
-							    ? Point2dInputParams
-							    : unknown)
+								? Point3dInputParams
+								: T extends PointValue2d
+									? Point2dInputParams
+									: unknown)
 					| undefined;
 				/**
 				 * Custom color scheme.
@@ -207,10 +205,10 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_1 extends PointValue4d
 										? Point4dInputParams
 										: T_1 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_1 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_1 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['x']
 						| undefined;
@@ -231,14 +229,14 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_2 extends PointValue4d
 										? Point4dInputParams
 										: T_2 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_2 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_2 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['y']
 						| undefined;
-			  }
+				}
 			: unknown) &
 		(T extends PointValue3d | PointValue4d
 			? {
@@ -255,14 +253,14 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_3 extends PointValue4d
 										? Point4dInputParams
 										: T_3 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_3 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_3 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['z']
 						| undefined;
-			  }
+				}
 			: unknown) &
 		(T extends PointValue4d
 			? {
@@ -279,14 +277,14 @@ declare class __sveltets_Render<T extends PointValue2d | PointValue3d | PointVal
 									? T_4 extends PointValue4d
 										? Point4dInputParams
 										: T_4 extends PointValue3d
-										  ? Point3dInputParams
-										  : T_4 extends PointValue2d
-										    ? Point2dInputParams
-										    : unknown
+											? Point3dInputParams
+											: T_4 extends PointValue2d
+												? Point2dInputParams
+												: unknown
 									: never
 								: never)['w']
 						| undefined;
-			  }
+				}
 			: unknown);
 	events(): {} & {
 		[evt: string]: CustomEvent<any>;

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

@@ -7,11 +7,9 @@ declare class __sveltets_Render<T extends number | string | boolean> {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: T;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, T>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -33,11 +33,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -22,11 +22,73 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: RotationEulerValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, RotationEulerValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string /**
+				 * Integrates the [euler
+				 * rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts)
+				 * control from [0b5vr's](https://0b5vr.com)
+				 * [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
+				 *
+				 * _Svelte Tweakpane UI_ extends the original API to support tuple values in addition to object values.
+				 * (Useful when working with frameworks like [three.js](https://threejs.org) /
+				 * [threlte](https://threlte.xyz).)
+				 *
+				 * A utility function `Utils.eulerToCssTransform()` is also provided to easily convert a quaternion
+				 * value object or tuple into a CSS transform string.
+				 *
+				 * See also <RotationQuaternion> if you're feeling gimbal locked.
+				 *
+				 * Usage outside of a `<Pane>` component will implicitly wrap the profiler in `<Pane
+				 * position='inline'>`.
+				 *
+				 * @example
+				 * ```svelte
+				 * <script lang="ts">
+				 * import {
+				 *   Button,
+				 *   RotationEuler,
+				 *   type RotationEulerValueObject,
+				 *   Utils
+				 * } from 'svelte-tweakpane-ui';
+				 *
+				 * // Value could also be a tuple
+				 * // e.g. [0, 0, 0]
+				 * let value: RotationEulerValueObject = { x: 0, y: 0, z: 0 };
+				 *
+				 * $: transform = Utils.eulerToCssTransform(value);
+				 * $: valueRows = Object.values(value)
+				 *   .map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`)
+				 *   .join('\n');
+				 * </script>
+				 *
+				 * <RotationEuler
+				 * bind:value
+				 * expanded={true}
+				 * label="CSS Rotation"
+				 * picker={'inline'}
+				 * />
+				 * <Button on:click={() => (value = { x: 0, y: 0, z: 0 })} title="Reset" />
+				 *
+				 * <div class="billboard" style:transform>
+				 * <pre>{valueRows}</pre>
+				 * </div>
+				 *
+				 * <style>
+				 * div.billboard {
+				 *   display: flex;
+				 *   align-items: center;
+				 *   justify-content: center;
+				 *   aspect-ratio: 1;
+				 *   width: 100%;
+				 *   background: linear-gradient(45deg, magenta, orange);
+				 * }
+				 * </style>
+				 * ```
+				 *
+				 * @sourceLink
+				 * [RotationEuler.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/RotationEuler.svelte)
+				 */;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -21,11 +21,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: RotationQuaternionValue;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, RotationQuaternionValue>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -7,11 +7,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/Text.svelte

@@ -13,7 +13,7 @@
 		}
 	}
 	function updateListeners(live2, destroy = false) {
-		let input = ref?.controller.valueController.view.element.getElementsByTagName('input')[0];
+		let input = ref?.controller.valueController.view.element.querySelector('input');
 		if (input) {
 			input.removeEventListener('input', onInput);
 			!destroy && live2 && input.addEventListener('input', onInput);

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

@@ -8,11 +8,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, string>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/control/Textarea.svelte

@@ -22,7 +22,7 @@
 		value = event.target.value;
 	}
 	function updateListeners(live2, destroy = false) {
-		var input = ref?.controller.valueController.view.element.getElementsByTagName('textarea')[0];
+		const input = ref?.controller.valueController.view.element.querySelector('textarea');
 		if (input) {
 			input.removeEventListener('blur', onBlur);
 			input.removeEventListener('input', onInput);

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

@@ -9,11 +9,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: string;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, string>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

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

@@ -7,11 +7,9 @@ declare const __propDef: {
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & {
-					[x: string]: number;
-				};
+				object: import('@tweakpane/core').Bindable & Record<string, number>;
 				/** The key for the value in the target `object` that the control should manipulate. */
-				key: string | number;
+				key: string;
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`

package/dist/core/Blade.svelte

@@ -26,7 +26,7 @@
 			index,
 			...options,
 			disabled
-			// why last?
+			// Why last?
 		});
 		ref = _ref;
 	}

package/dist/core/TabGroup.svelte

@@ -22,15 +22,13 @@
 		$tabGroupStore?.dispose();
 	});
 	function setUpListeners(t) {
-		t?.on('select', (e) => {
-			selectedIndex = e.index;
+		t?.on('select', (event) => {
+			selectedIndex = event.index;
 		});
 	}
 	function setSelectedIndex(index) {
 		const tabPageApi = $tabGroupStore?.pages.at(index);
-		if (tabPageApi) {
-			if (!tabPageApi.selected) tabPageApi.selected = true;
-		}
+		if (tabPageApi && !tabPageApi.selected) tabPageApi.selected = true;
 	}
 	$: BROWSER && setUpListeners($tabGroupStore);
 	$: BROWSER && setSelectedIndex(selectedIndex);

package/dist/core/TabPage.svelte

@@ -24,10 +24,10 @@
 	function create() {
 		if (!$tabGroupStore) {
 			$tabGroupStore = $parentStore.addTab({
-				// tabs MUST be created with at least one page how to handle tabs with no children?
+				// 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?
+				// Could be cleaner to have children create the tab as needed?
 				pages: [{ title }]
 			});
 			$tabPageStore = $tabGroupStore.pages[0];