svelte-tweakpane-ui 1.5.3 → 1.5.4

package/dist/core/TabPage.svelte

@@ -1,26 +1,26 @@
 <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;
+	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;
-	});
+		index = indexElement ? getElementIndex(indexElement) : 0
+	})
 	function create() {
 		if (!$tabGroupStore) {
 			$tabGroupStore = $parentStore.addTab({
@@ -28,30 +28,30 @@
 				disabled: false,
 				index: $tabIndexStore,
 				// Could be cleaner to have children create the tab as needed?
-				pages: [{ title }]
-			});
-			$tabPageStore = $tabGroupStore.pages[0];
-			selected = true;
+				pages: [{ title }],
+			})
+			$tabPageStore = $tabGroupStore.pages[0]
+			selected = true
 		} else if (!$tabPageStore && $tabGroupStore) {
-			$tabPageStore = $tabGroupStore.addPage({ index, title });
+			$tabPageStore = $tabGroupStore.addPage({ index, title })
 		}
 		$tabGroupStore?.on('select', () => {
-			$tabPageStore && (selected = $tabPageStore.selected);
-		});
+			$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);
+		$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.)'
-		);
+			'Set theme on the <Pane> component, not on its children! (Check nested <TabPage> components for a theme prop.)',
+		)
 </script>
 
 {#if parentStore && tabIndexStore !== undefined}

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

@@ -1,44 +1,44 @@
-import { SvelteComponent } from 'svelte';
-import type { Theme } from '../theme.js';
+import { SvelteComponent } from 'svelte'
+import type { Theme } from '../theme.js'
 declare const __propDef: {
 	props: {
 		/**
 		 * Text in the tab.
 		 * @default `'Tab Page'`
-		 * */ title?: string;
+		 * */ title?: string
 		/**
 		 * Prevent interactivity and gray out the control.
 		 * @default `false`
-		 * */ disabled?: boolean;
+		 * */ disabled?: boolean
 		/**
 		 * Sets the page is the active tab.
 		 *
 		 * When bound it will indicate whether the tab is active.
 		 * @default `false`
 		 * @bindable
-		 * */ selected?: boolean;
+		 * */ selected?: boolean
 		/**
 		 * Custom color scheme.
 		 * @default `undefined`  \
 		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 		 * set with `setGlobalDefaultTheme()`.)
-		 * */ theme?: Theme | undefined;
-	};
+		 * */ theme?: Theme | undefined
+	}
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
+		[evt: string]: CustomEvent<any>
+	}
 	slots: {
 		/**
 		 * Any Tweakpane component, except a `<Pane>`.
 		 */
-		default: {};
-	};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type TabPageProps = typeof __propDef.props;
-export type TabPageEvents = typeof __propDef.events;
-export type TabPageSlots = typeof __propDef.slots;
+		default: {}
+	}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+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.
@@ -56,10 +56,10 @@ export type TabPageSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { Button, TabGroup, TabPage } from 'svelte-tweakpane-ui';
+ * import { Button, TabGroup, TabPage } from 'svelte-tweakpane-ui'
  *
- * let countA = 0;
- * let countB = 0;
+ * let countA = 0
+ * let countB = 0
  * </script>
  *
  * <TabGroup>
@@ -81,4 +81,4 @@ export type TabPageSlots = typeof __propDef.slots;
  * [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 {};
+export {}

package/dist/extra/AutoObject.svelte

@@ -1,39 +1,39 @@
 <script context="module"></script>
 
 <script>
-	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 { 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 copy from 'fast-copy';
-	import { createEventDispatcher, getContext } from 'svelte';
-	export let theme = void 0;
-	export let prettyLabels = true;
-	export let object;
-	const dispatch = createEventDispatcher();
-	const parentStore = getContext('parentStore');
+	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 { 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 copy from 'fast-copy'
+	import { createEventDispatcher, getContext } from 'svelte'
+	export let theme = void 0
+	export let prettyLabels = true
+	export let object
+	const dispatch = createEventDispatcher()
+	const parentStore = getContext('parentStore')
 	function isPointObject(testObject) {
 		return (
 			Point2d.isObject(testObject) || Point3d.isObject(testObject) || Point4d.isObject(testObject)
-		);
+		)
 	}
 	function prettify(value, active = true) {
-		if (!active) return value;
+		if (!active) return value
 		return value
 			.replaceAll(/([\da-z])([A-Z])/g, '$1 $2')
 			.replaceAll(/[_-]+/g, ' ')
 			.toLowerCase()
-			.replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase());
+			.replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase())
 	}
 	function changeEventAggregator(event) {
 		dispatch('change', {
 			value: copy(object),
-			origin: event.detail.origin
-		});
+			origin: event.detail.origin,
+		})
 	}
 </script>
 

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

@@ -1,7 +1,7 @@
-import { SvelteComponent } from 'svelte';
-import type { BindingObject, ValueChangeEvent } from '../utils.js';
-export type AutoObjectChangeEvent = ValueChangeEvent<BindingObject>;
-import type { Theme } from '../theme.js';
+import { SvelteComponent } from 'svelte'
+import type { BindingObject, ValueChangeEvent } from '../utils.js'
+export type AutoObjectChangeEvent = ValueChangeEvent<BindingObject>
+import type { Theme } from '../theme.js'
 declare const __propDef: {
 	props: {
 		/**
@@ -9,21 +9,21 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
 		 * set with `setGlobalDefaultTheme()`.
-		 * */ theme?: Theme | undefined;
+		 * */ 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;
+		 * */ prettyLabels?: boolean
 		/**
 		 * 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;
-	};
-	slots: {};
+		 * */ object: BindingObject
+	}
+	slots: {}
 	events: {
 		/**
 		 * Fires when a value in the `object` changes.
@@ -36,12 +36,12 @@ declare const __propDef: {
 		 * @extends ValueChangeEvent
 		 * @event
 		 * */
-		change: AutoObjectChangeEvent;
-	};
-};
-export type AutoObjectProps = typeof __propDef.props;
-export type AutoObjectEvents = typeof __propDef.events;
-export type AutoObjectSlots = typeof __propDef.slots;
+		change: AutoObjectChangeEvent
+	}
+}
+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.
@@ -76,7 +76,7 @@ export type AutoObjectSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { AutoObject } from 'svelte-tweakpane-ui';
+ * import { AutoObject } from 'svelte-tweakpane-ui'
  *
  * let object = {
  *   // Creates a <Checkbox>
@@ -86,24 +86,24 @@ export type AutoObjectSlots = typeof __propDef.slots;
  *     r: 255,
  *     g: 0,
  *
- *     b: 55
+ *     b: 55,
  *   },
  *   // Wraps children in a <Folder>
  *   someFolder: {
  *     b: 2,
  *     a: 1,
- *     c: 3
+ *     c: 3,
  *   },
  *   // Creates a <Slider>
  *   someNumber: 1,
  *   // creates a <Point>
  *   somePoint: {
  *     x: 1,
- *     y: 2
+ *     y: 2,
  *   },
  *   // Creates a <Text>
- *   someString: 'test'
- * };
+ *   someString: 'test',
+ * }
  * </script>
  *
  * <AutoObject bind:object />
@@ -119,4 +119,4 @@ export default class AutoObject extends SvelteComponent<
 	AutoObjectEvents,
 	AutoObjectSlots
 > {}
-export {};
+export {}

package/dist/extra/AutoValue.svelte

@@ -1,9 +1,9 @@
 <script context="module"></script>
 
 <script>
-	import Text from '../control/Text.svelte';
-	import GenericBinding from '../internal/GenericBinding.svelte';
-	export let value;
+	import Text from '../control/Text.svelte'
+	import GenericBinding from '../internal/GenericBinding.svelte'
+	export let value
 </script>
 
 {#if typeof value === 'string'}

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

@@ -1,6 +1,6 @@
-import { SvelteComponent } from 'svelte';
-import type { ValueChangeEvent } from '../utils.js';
-export type AutoValueChangeEvent = ValueChangeEvent<boolean | number | object | string>;
+import { SvelteComponent } from 'svelte'
+import type { ValueChangeEvent } from '../utils.js'
+export type AutoValueChangeEvent = ValueChangeEvent<boolean | number | object | string>
 declare const __propDef: {
 	props: Omit<
 		{
@@ -8,7 +8,7 @@ declare const __propDef: {
 			 * The value to control.
 			 * @bindable
 			 */
-			value: string | number | boolean | object;
+			value: string | number | boolean | object
 		} & Omit<
 			{
 				/**
@@ -16,19 +16,19 @@ declare const __propDef: {
 				 * @bindable
 				 */
 				object: import('@tweakpane/core').Bindable &
-					Record<string, string | number | boolean | object>;
+					Record<string, string | number | boolean | object>
 				/** 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.
 				 *
@@ -41,7 +41,7 @@ declare const __propDef: {
 				 * Tweakpane UI_.
 				 * @default `undefined`
 				 */
-				options?: import('tweakpane').BindingParams | undefined;
+				options?: import('tweakpane').BindingParams | undefined
 				/**
 				 * Custom color scheme.
 				 *
@@ -49,7 +49,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
@@ -63,7 +63,7 @@ declare const __propDef: {
 				 * @bindable
 				 * @readonly
 				 */
-				ref?: import('..').BindingRef | undefined;
+				ref?: import('..').BindingRef | undefined
 				/**
 				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 				 * the `<Binding>`'s containing `<Pane>`.
@@ -75,13 +75,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.
@@ -94,12 +94,12 @@ declare const __propDef: {
 		 * @extends ValueChangeEvent
 		 * @event
 		 * */
-		change: AutoValueChangeEvent;
-	};
-};
-export type AutoValueProps = typeof __propDef.props;
-export type AutoValueEvents = typeof __propDef.events;
-export type AutoValueSlots = typeof __propDef.slots;
+		change: AutoValueChangeEvent
+	}
+}
+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.
  *
@@ -120,12 +120,12 @@ export type AutoValueSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { AutoValue } from 'svelte-tweakpane-ui';
+ * import { AutoValue } from 'svelte-tweakpane-ui'
  *
- * let number = 0;
- * let color = { r: 255, g: 0, b: 255 };
- * let point = { x: 0, y: 0 };
- * let text = 'Cosmic manifold';
+ * let number = 0
+ * let color = { r: 255, g: 0, b: 255 }
+ * let point = { x: 0, y: 0 }
+ * let text = 'Cosmic manifold'
  * </script>
  *
  * <AutoValue bind:value={number} label="Number" />
@@ -142,4 +142,4 @@ export default class AutoValue extends SvelteComponent<
 	AutoValueEvents,
 	AutoValueSlots
 > {}
-export {};
+export {}

package/dist/extra/Element.svelte

@@ -1,15 +1,15 @@
 <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;
+	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;
-	$: ref?.element.replaceChildren(sourceDiv);
+		view: 'separator',
+	}
+	let ref
+	let sourceDiv
+	$: ref?.element.replaceChildren(sourceDiv)
 </script>
 
 {#if BROWSER}

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from 'svelte';
-import type { BladeRef } from '../core/Blade.svelte';
+import { SvelteComponent } from 'svelte'
+import type { BladeRef } from '../core/Blade.svelte'
 declare const __propDef: {
 	props: {
 		/**
@@ -14,14 +14,14 @@ declare const __propDef: {
 		 * @default `undefined`  \
 		 * No max height.
 		 */
-		maxHeight?: number;
+		maxHeight?: number
 		/**
 		 * Whether to reset the CSS of the element block to its default values.
 		 * Avoids inheritance of Tweakpane's CSS styles. Note that this uses a
 		 * simple `all: initial;` rule.
 		 * @default `true`
 		 */
-		resetStyle?: boolean;
+		resetStyle?: boolean
 	} & Omit<
 		{
 			/**
@@ -29,19 +29,19 @@ declare const __propDef: {
 			 * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
 			 *
 			 */
-			options: import('tweakpane').BaseBladeParams;
+			options: import('tweakpane').BaseBladeParams
 			/**
 			 * 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.
@@ -54,7 +54,7 @@ declare const __propDef: {
 			 * @bindable
 			 * @readonly
 			 */
-			ref?: BladeRef | undefined;
+			ref?: BladeRef | undefined
 			/**
 			 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 			 * the `<Blade>`'s containing `<Pane>`.
@@ -66,25 +66,25 @@ declare const __propDef: {
 			 *
 			 * @default `undefined`
 			 */
-			plugin?: import('../core/Blade.svelte').Plugin | undefined;
+			plugin?: import('../core/Blade.svelte').Plugin | undefined
 		},
 		'ref' | 'disabled' | 'options' | 'plugin'
-	>;
+	>
 	events: {
-		[evt: string]: CustomEvent<any>;
-	};
+		[evt: string]: CustomEvent<any>
+	}
 	slots: {
 		/**
 		 * Any HTML Element.
 		 */
-		default: {};
-	};
-	exports?: {} | undefined;
-	bindings?: string | undefined;
-};
-export type ElementProps = typeof __propDef.props;
-export type ElementEvents = typeof __propDef.events;
-export type ElementSlots = typeof __propDef.slots;
+		default: {}
+	}
+	exports?: {} | undefined
+	bindings?: string | undefined
+}
+export type ElementProps = typeof __propDef.props
+export type ElementEvents = typeof __propDef.events
+export type ElementSlots = typeof __propDef.slots
 /**
  * A component for embedding arbitrary HTML elements into a pane.
  *
@@ -116,10 +116,10 @@ export type ElementSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { Button, Element, Pane, Wheel } from 'svelte-tweakpane-ui';
+ * import { Button, Element, Pane, Wheel } from 'svelte-tweakpane-ui'
  *
- * let gradientAngle = 45;
- * let textAngle = 0;
+ * let gradientAngle = 45
+ * let textAngle = 0
  * </script>
  *
  * <Pane position="inline" title="Element Demo">
@@ -148,8 +148,8 @@ export type ElementSlots = typeof __propDef.slots;
  * </Element>
  * <Button
  *   on:click={() => {
- *     gradientAngle = 45;
- *     textAngle = 0;
+ *     gradientAngle = 45
+ *     textAngle = 0
  *   }}
  *   disabled={gradientAngle === 45 && textAngle === 0}
  *   title="Reset"
@@ -182,4 +182,4 @@ export type ElementSlots = typeof __propDef.slots;
  * [Element.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/extra/Element.svelte)
  */
 export default class Element extends SvelteComponent<ElementProps, ElementEvents, ElementSlots> {}
-export {};
+export {}