svelte-tweakpane-ui 1.5.3 → 1.5.4

package/dist/control/Button.svelte

@@ -1,49 +1,49 @@
 <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;
+	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();
+		if (button) button.dispose()
 		button = $parentStore.addButton({
 			disabled,
 			index,
 			label,
-			title
-		});
+			title,
+		})
 		button.on('click', () => {
-			dispatch('click');
-		});
+			dispatch('click')
+		})
 	}
 	onMount(() => {
-		index = indexElement ? getElementIndex(indexElement) : 0;
-	});
+		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);
+		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.)'
-		);
+			'Set theme on the <Pane> component, not on its children! (Check nested <Button> components for a theme prop.)',
+		)
 </script>
 
 {#if parentStore}

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

@@ -1,40 +1,40 @@
-import { SvelteComponent } from 'svelte';
-export type ButtonClickEvent = CustomEvent<null>;
-import type { Theme } from '../theme.js';
+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;
+		 * */ title?: string
 		/**
 		 * Text displayed next to the button.
 		 * @default `undefined`
-		 * */ label?: string | undefined;
+		 * */ label?: string | undefined
 		/**
 		 * Prevent interactivity and gray out the control.
 		 * @default `false`
-		 * */ disabled?: boolean;
+		 * */ disabled?: boolean
 		/**
 		 * Custom color scheme.
 		 * @default `undefined`  \
 		 * Inherits default Tweakpane theme equivalent to
 		 * `ThemeUtils.presets.standard`, or the theme set with
 		 * `setGlobalDefaultTheme()`.)
-		 * */ theme?: Theme | undefined;
-	};
-	slots: {};
+		 * */ 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;
+		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.
  *
@@ -50,9 +50,9 @@ export type ButtonSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { Button } from 'svelte-tweakpane-ui';
+ * import { Button } from 'svelte-tweakpane-ui'
  *
- * let count = 0;
+ * let count = 0
  * </script>
  *
  * <Button on:click={() => count++} label="Count" title="Increment" />
@@ -63,4 +63,4 @@ export type ButtonSlots = typeof __propDef.slots;
  * [Button.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Button.svelte)
  */
 export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {}
-export {};
+export {}

package/dist/control/ButtonGrid.svelte

@@ -1,44 +1,44 @@
 <script context="module"></script>
 
 <script>
-	import Blade from '../core/Blade.svelte';
-	import ClsPad from '../internal/ClsPad.svelte';
-	import { fillWith } from '../utils';
-	import { getGridDimensions } from '../utils.js';
-	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials';
-	import { BROWSER } from 'esm-env';
-	import { createEventDispatcher } from 'svelte';
-	export let columns = void 0;
-	export let rows = void 0;
-	export let buttons = [];
-	export let label = void 0;
-	const dispatch = createEventDispatcher();
-	let options;
-	let gridBlade;
-	let gridDimensions;
+	import Blade from '../core/Blade.svelte'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import { fillWith } from '../utils'
+	import { getGridDimensions } from '../utils.js'
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials'
+	import { BROWSER } from 'esm-env'
+	import { createEventDispatcher } from 'svelte'
+	export let columns = void 0
+	export let rows = void 0
+	export let buttons = []
+	export let label = void 0
+	const dispatch = createEventDispatcher()
+	let options
+	let gridBlade
+	let gridDimensions
 	function cells(x, y) {
-		const index = y * gridDimensions.columns + x;
+		const index = y * gridDimensions.columns + x
 		if (index >= 0 && index < buttons.length) {
 			return {
-				title: `${buttons[index]}`
-			};
+				title: `${buttons[index]}`,
+			}
 		}
-		return { title: '' };
+		return { title: '' }
 	}
-	$: gridDimensions = getGridDimensions(buttons.length, columns, rows);
+	$: gridDimensions = getGridDimensions(buttons.length, columns, rows)
 	$: options = {
 		cells,
 		label,
 		size: [gridDimensions.columns, gridDimensions.rows],
-		view: 'buttongrid'
-	};
+		view: 'buttongrid',
+	}
 	$: 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
-		});
-	});
+			label: event.cell.title,
+		})
+	})
 </script>
 
 <Blade bind:ref={gridBlade} {options} plugin={pluginModule} {...$$restProps} />

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

@@ -1,20 +1,20 @@
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent } from 'svelte'
 export type ButtonGridClickEvent = CustomEvent<{
 	cell: {
-		x: number;
-		y: number;
-	};
-	index: number;
-	label: string;
-}>;
-import type { ButtonGridApi as ButtonGridRef } from '@kitschpatrol/tweakpane-plugin-essentials';
-import type { ButtonGridBladeParams as ButtonGridOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/button-grid/plugin.d.ts';
+		x: number
+		y: number
+	}
+	index: number
+	label: string
+}>
+import type { ButtonGridApi as ButtonGridRef } from '@kitschpatrol/tweakpane-plugin-essentials'
+import type { ButtonGridBladeParams as ButtonGridOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/button-grid/plugin.d.ts'
 declare const __propDef: {
 	props: {
 		/**
 		 * Array of names, each of which will become the title of a button in the grid.
 		 * */
-		buttons: string[];
+		buttons: string[]
 		/**
 		 * Number of columns to arrange the buttons into.
 		 *
@@ -23,12 +23,12 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * Dynamic based on quantity of `buttons`.
 		 * */
-		columns?: number;
+		columns?: number
 		/**
 		 * Text displayed next to the button grid.
 		 * @default `undefined`
 		 */
-		label?: string;
+		label?: string
 		/**
 		 * Number of rows to arrange the buttons into.
 		 *
@@ -37,7 +37,7 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * Dynamic based on quantity of `buttons`.
 		 * */
-		rows?: number;
+		rows?: number
 	} & Omit<
 		{
 			/**
@@ -45,19 +45,19 @@ declare const __propDef: {
 			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
 			 *
 			 */
-			options: ButtonGridOptions;
+			options: ButtonGridOptions
 			/**
 			 * Prevent interactivity and gray out the control.
 			 * @default `false`
 			 */
-			disabled?: boolean;
+			disabled?: boolean
 			/**
 			 * Custom color scheme.
 			 * @default `undefined`  \
 			 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 			 * set with `setGlobalDefaultTheme()`.
 			 */
-			theme?: import('..').Theme | undefined;
+			theme?: import('..').Theme | undefined
 			/**
 			 * Reference to internal Tweakpane
 			 * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
@@ -70,7 +70,7 @@ declare const __propDef: {
 			 * @bindable
 			 * @readonly
 			 */
-			ref?: ButtonGridRef | undefined;
+			ref?: ButtonGridRef | undefined
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 			 * the `<Blade>`'s containing `<Pane>`.
@@ -82,11 +82,11 @@ declare const __propDef: {
 			 *
 			 * @default `undefined`
 			 */
-			plugin?: import('../utils').Plugin | undefined;
+			plugin?: import('../utils').Plugin | undefined
 		},
 		'ref' | 'options' | 'plugin'
-	>;
-	slots: {};
+	>
+	slots: {}
 	events: {
 		/**
 		 * Fires when a button is clicked.
@@ -95,12 +95,12 @@ declare const __propDef: {
 		 * `event.detail` parameter.
 		 * @event
 		 * */
-		click: ButtonGridClickEvent;
-	};
-};
-export type ButtonGridProps = typeof __propDef.props;
-export type ButtonGridEvents = typeof __propDef.events;
-export type ButtonGridSlots = typeof __propDef.slots;
+		click: ButtonGridClickEvent
+	}
+}
+export type ButtonGridProps = typeof __propDef.props
+export type ButtonGridEvents = typeof __propDef.events
+export type ButtonGridSlots = typeof __propDef.slots
 /**
  * A grid of `<Button>` components.
  *
@@ -132,29 +132,29 @@ export type ButtonGridSlots = typeof __propDef.slots;
  *   Button,
  *   ButtonGrid,
  *   type ButtonGridClickEvent,
- *   Pane
- * } from 'svelte-tweakpane-ui';
+ *   Pane,
+ * } from 'svelte-tweakpane-ui'
  *
  * const keyboard = [
  *   ...Array.from(
  *     {
- *       length: 26
+ *       length: 26,
  *     },
- *     (_, index) => String.fromCodePoint(65 + index)
+ *     (_, index) => String.fromCodePoint(65 + index),
  *   ),
  *   ',',
  *   '.',
  *   '!',
- *   '⌫'
- * ];
+ *   '⌫',
+ * ]
  *
- * let textBuffer = '';
+ * let textBuffer = ''
  *
  * function handleClick(event: ButtonGridClickEvent) {
  *   textBuffer =
  *     event.detail.label === '⌫'
  *       ? textBuffer.slice(0, -1)
- *       : textBuffer + event.detail.label;
+ *       : textBuffer + event.detail.label
  * }
  * </script>
  *
@@ -202,4 +202,4 @@ export default class ButtonGrid extends SvelteComponent<
 	ButtonGridEvents,
 	ButtonGridSlots
 > {}
-export {};
+export {}

package/dist/control/Checkbox.svelte

@@ -1,8 +1,8 @@
 <script context="module"></script>
 
 <script>
-	import GenericInput from '../internal/GenericInput.svelte';
-	export let value;
+	import GenericInput from '../internal/GenericInput.svelte'
+	export let value
 </script>
 
 <GenericInput bind:value on:change {...$$restProps} />

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

@@ -1,6 +1,6 @@
-import { SvelteComponent } from 'svelte';
-import type { ValueChangeEvent } from '../utils.js';
-export type CheckboxChangeEvent = ValueChangeEvent<boolean>;
+import { SvelteComponent } from 'svelte'
+import type { ValueChangeEvent } from '../utils.js'
+export type CheckboxChangeEvent = ValueChangeEvent<boolean>
 declare const __propDef: {
 	props: Omit<
 		{
@@ -8,26 +8,26 @@ declare const __propDef: {
 			 * The value to control.
 			 * @bindable
 			 */
-			value: boolean;
+			value: boolean
 		} & Omit<
 			{
 				/**
 				 * The binding's target object with values to manipulate.
 				 * @bindable
 				 */
-				object: import('@tweakpane/core').Bindable & Record<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;
+				key: string
 				/**
 				 * Prevent interactivity and gray out the control.
 				 * @default `false`
 				 */
-				disabled?: boolean;
+				disabled?: boolean
 				/**
 				 * Text displayed next to control.
 				 * @default `undefined`
 				 */
-				label?: string | undefined;
+				label?: string | undefined
 				/**
 				 * Tweakpane's internal options object.
 				 *
@@ -40,7 +40,7 @@ declare const __propDef: {
 				 * Tweakpane UI_.
 				 * @default `undefined`
 				 */
-				options?: import('@tweakpane/core').BaseInputParams | undefined;
+				options?: import('@tweakpane/core').BaseInputParams | undefined
 				/**
 				 * Custom color scheme.
 				 *
@@ -48,7 +48,7 @@ declare const __propDef: {
 				 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 				 * set with `setGlobalDefaultTheme()`.
 				 */
-				theme?: import('..').Theme | undefined;
+				theme?: import('..').Theme | undefined
 				/**
 				 * Reference to internal Tweakpane
 				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
@@ -62,7 +62,7 @@ declare const __propDef: {
 				 * @bindable
 				 * @readonly
 				 */
-				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined;
+				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 				 * the `<Binding>`'s containing `<Pane>`.
@@ -74,13 +74,13 @@ declare const __propDef: {
 				 *
 				 * @default `undefined`
 				 */
-				plugin?: import('../utils.js').Plugin | undefined;
+				plugin?: import('../utils.js').Plugin | undefined
 			},
 			'object' | 'key'
 		>,
 		'ref' | 'options' | 'plugin'
-	>;
-	slots: {};
+	>
+	slots: {}
 	events: {
 		/**
 		 * Fires when `value` changes.
@@ -93,12 +93,12 @@ declare const __propDef: {
 		 * @extends ValueChangeEvent
 		 * @event
 		 * */
-		change: CheckboxChangeEvent;
-	};
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
+		change: CheckboxChangeEvent
+	}
+}
+export type CheckboxProps = typeof __propDef.props
+export type CheckboxEvents = typeof __propDef.events
+export type CheckboxSlots = typeof __propDef.slots
 /**
  * A checkbox.
  *
@@ -111,9 +111,9 @@ export type CheckboxSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- *  import { Checkbox } from 'svelte-tweakpane-ui';
+ *  import { Checkbox } from 'svelte-tweakpane-ui'
  *
- *  let reticulationEnabled: boolean = false;
+ *  let reticulationEnabled: boolean = false
  * </script>
  *
  * <Checkbox bind:value={reticulationEnabled} label="Reticulation" />
@@ -128,4 +128,4 @@ export default class Checkbox extends SvelteComponent<
 	CheckboxEvents,
 	CheckboxSlots
 > {}
-export {};
+export {}

package/dist/control/Color.svelte

@@ -1,28 +1,28 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from '../internal/ClsPad.svelte';
-	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
-	import { objectToTuple } from '../utils';
-	import { fillWith } from '../utils';
-	import { isColorObject, isRgbaColorObject, isRgbColorObject } from '@tweakpane/core';
-	import { BROWSER } from 'esm-env';
-	import { shallowEqual } from 'fast-equals';
-	export let value;
-	export let expanded = void 0;
-	export let type = void 0;
-	let internalValue;
-	let options;
-	let ref;
-	const buttonClass = 'tp-colswv_b';
+	import ClsPad from '../internal/ClsPad.svelte'
+	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
+	import { objectToTuple } from '../utils'
+	import { fillWith } from '../utils'
+	import { isColorObject, isRgbaColorObject, isRgbColorObject } from '@tweakpane/core'
+	import { BROWSER } from 'esm-env'
+	import { shallowEqual } from 'fast-equals'
+	export let value
+	export let expanded = void 0
+	export let type = void 0
+	let internalValue
+	let options
+	let ref
+	const buttonClass = 'tp-colswv_b'
 	function updateInternalValueFromValue() {
 		if (typeof value === 'string') {
 			if (internalValue !== value) {
-				internalValue = value;
+				internalValue = value
 			}
 		} else if (isColorObject(value)) {
 			if (!shallowEqual(value, internalValue)) {
-				internalValue = { ...value };
+				internalValue = { ...value }
 			}
 		} else if (Array.isArray(value)) {
 			let newInternalValue =
@@ -30,54 +30,54 @@
 					? { r: value[0], g: value[1], b: value[2], a: value[3] }
 					: value.length === 3
 						? { r: value[0], g: value[1], b: value[2] }
-						: void 0;
+						: void 0
 			if (newInternalValue === void 0) {
-				console.error('Unreachable');
+				console.error('Unreachable')
 			} else if (!shallowEqual(newInternalValue, internalValue)) {
-				internalValue = newInternalValue;
+				internalValue = newInternalValue
 			}
 		} else {
-			console.error('Unreachable');
+			console.error('Unreachable')
 		}
 	}
 	function updateValueFromInternalValue() {
 		if (typeof value === 'string' && typeof internalValue === 'string') {
 			if (internalValue !== value) {
-				value = internalValue;
+				value = internalValue
 			}
 		} else if (Array.isArray(value) && isColorObject(internalValue)) {
 			const newValue = isRgbaColorObject(internalValue)
 				? objectToTuple(internalValue, ['r', 'g', 'b', 'a'])
 				: isRgbColorObject(internalValue)
 					? objectToTuple(internalValue, ['r', 'g', 'b'])
-					: void 0;
+					: void 0
 			if (newValue === void 0) {
-				console.error('Unreachable color type mismatch');
+				console.error('Unreachable color type mismatch')
 			} else if (!shallowEqual(newValue, value)) {
-				value = newValue;
+				value = newValue
 			}
 		} else if (isColorObject(value) && isColorObject(internalValue)) {
 			if (!shallowEqual(internalValue, value)) {
-				value = { ...internalValue };
+				value = { ...internalValue }
 			}
 		} else {
-			console.error('Unreachable color type mismatch');
+			console.error('Unreachable color type mismatch')
 		}
 	}
 	function addListeners() {
 		ref.on('change', () => {
-			ref.refresh();
-		});
+			ref.refresh()
+		})
 	}
-	$: value, updateInternalValueFromValue();
-	$: internalValue, updateValueFromInternalValue();
-	$: ref !== void 0 && addListeners();
+	$: value, updateInternalValueFromValue()
+	$: internalValue, updateValueFromInternalValue()
+	$: ref !== void 0 && addListeners()
 	$: options = {
 		color: {
-			type
+			type,
 		},
-		view: 'color'
-	};
+		view: 'color',
+	}
 </script>
 
 <GenericInputFolding