svelte-tweakpane-ui 1.5.3 → 1.5.4

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

@@ -1,6 +1,6 @@
-import { SvelteComponent } from 'svelte';
-import type { ValueChangeEvent } from '../utils.js';
-import type { RingSeries } from '@kitschpatrol/tweakpane-plugin-camerakit/dist/types/util.js';
+import { SvelteComponent } from 'svelte'
+import type { ValueChangeEvent } from '../utils.js'
+import type { RingSeries } from '@kitschpatrol/tweakpane-plugin-camerakit/dist/types/util.js'
 type RingUnit = {
 	/**
 	 * The value for the unit.
@@ -8,7 +8,7 @@ type RingUnit = {
 	 * This sets the interval between each `value` labeled on the ring. For example a `value` of
 	 * `20` will show value labels 0, 20, 40... etc. spaced according to the `pixels` value.
 	 */
-	value: number;
+	value: number
 	/**
 	 * The number of pixels per unit.
 	 *
@@ -16,34 +16,34 @@ type RingUnit = {
 	 * example, if `pixels` is 100 and `value` is 10, you will see a value label on the ring in
 	 * the form of 10...(100 pixels)...20...(100 pixels)...30... etc.
 	 */
-	pixels: number;
+	pixels: number
 	/**
 	 * The number of vertical tick marks between each `value` label on the ring.
 	 *
 	 * For example, if `pixels` is `100`, `value` is `10, and `ticks` is `10`, you will have a
 	 * vertical tick mark every 10 pixels, and a value label every 100 pixels.
 	 */
-	ticks: number;
-};
-export type { RingSeries, RingUnit };
-export type RingChangeEvent = ValueChangeEvent<number>;
+	ticks: number
+}
+export type { RingSeries, RingUnit }
+export type RingChangeEvent = ValueChangeEvent<number>
 declare const __propDef: {
 	props: {
 		/**
 		 * A `number` value to control.
 		 * @bindable
 		 * */
-		value: number;
+		value: number
 		/**
 		 * Style variations.
 		 * @default `0`
 		 * */
-		series?: RingSeries;
+		series?: RingSeries
 		/**
 		 * Density and value mapping of the ring's tick marks.
 		 * @default `{ ticks: 5, pixels: 40, value: 10 }`
 		 * */
-		unit?: RingUnit;
+		unit?: RingUnit
 	} & Omit<
 		{
 			/**
@@ -52,70 +52,70 @@ declare const __propDef: {
 			 * Specifying both a `min` and a `max` prop turns the control into a slider.
 			 * @default `undefined`
 			 */
-			min?: number;
+			min?: number
 			/**
 			 * Maximum value.
 			 *
 			 * Specifying both a `min` and a `max` prop turns the control into a slider.
 			 * @default `undefined`
 			 */
-			max?: number;
+			max?: number
 			/**
 			 * A function to customize the point value's string representation (e.g. rounding, etc.).
 			 * @default `undefined`  \
 			 * Normal `.toString()` formatting.
 			 */
-			format?: ((value: number) => string) | undefined;
+			format?: ((value: number) => string) | undefined
 			/**
 			 * The unit scale for key-based input for all dimensions (e.g. the up and down arrow keys).
 			 * @default `1`  \
 			 * Or `stepValue` if defined.
 			 */
-			keyScale?: number;
+			keyScale?: number
 			/**
 			 * The unit scale for pointer-based input for all dimensions.
 			 * @default `undefined`  \
 			 * [Dynamic based on magnitude of
 			 * `value`](https://github.com/cocopon/tweakpane/blob/66dfbea04bfe9b7f031673c955ceda1f92356e75/packages/core/src/common/number/util.ts#L54).
 			 */
-			pointerScale?: number;
+			pointerScale?: number
 			/**
 			 * The minimum step interval.
 			 * @default `undefined`  \
 			 * No step constraint.
 			 */
-			step?: number;
+			step?: number
 			/**
 			 * When `true`, expand the width of the control at the expense of the numeric input
 			 * field.
 			 * @default `false`
 			 */
-			wide?: boolean;
+			wide?: boolean
 		} & {
 			/**
 			 * A `number` value to control.
 			 * @bindable
 			 */
-			value: number;
+			value: number
 		} & Omit<
 				{
 					/**
 					 * The binding's target object with values to manipulate.
 					 * @bindable
 					 */
-					object: import('@tweakpane/core').Bindable & Record<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;
+					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.
 					 *
@@ -128,7 +128,7 @@ declare const __propDef: {
 					 * Tweakpane UI_.
 					 * @default `undefined`
 					 */
-					options?: import('tweakpane').NumberInputParams | undefined;
+					options?: import('tweakpane').NumberInputParams | undefined
 					/**
 					 * Custom color scheme.
 					 *
@@ -136,7 +136,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
@@ -150,7 +150,7 @@ declare const __propDef: {
 					 * @bindable
 					 * @readonly
 					 */
-					ref?: import('tweakpane').SliderInputBindingApi | undefined;
+					ref?: import('tweakpane').SliderInputBindingApi | undefined
 					/**
 					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 					 * the `<Binding>`'s containing `<Pane>`.
@@ -162,13 +162,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.
@@ -181,12 +181,12 @@ declare const __propDef: {
 		 * @extends ValueChangeEvent
 		 * @event
 		 * */
-		change: RingChangeEvent;
-	};
-};
-export type RingProps = typeof __propDef.props;
-export type RingEvents = typeof __propDef.events;
-export type RingSlots = typeof __propDef.slots;
+		change: RingChangeEvent
+	}
+}
+export type RingProps = typeof __propDef.props
+export type RingEvents = typeof __propDef.events
+export type RingSlots = typeof __propDef.slots
 /**
  * A control evoking the focus ring on a proper camera lens.
  *
@@ -205,15 +205,15 @@ export type RingSlots = typeof __propDef.slots;
  * @example
  * ```svelte
  * <script lang="ts">
- * import { Ring, type RingUnit } from 'svelte-tweakpane-ui';
+ * import { Ring, type RingUnit } from 'svelte-tweakpane-ui'
  *
  * let unitConfig: RingUnit = {
  *   value: 20,
  *   pixels: 40,
- *   ticks: 5
- * };
+ *   ticks: 5,
+ * }
  *
- * let angle = 45;
+ * let angle = 45
  * </script>
  *
  * <Ring

package/dist/control/RotationEuler.svelte

@@ -1,43 +1,43 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from '../internal/ClsPad.svelte';
-	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
-	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation';
-	import { BROWSER } from 'esm-env';
-	import { shallowEqual } from 'fast-equals';
-	export let value;
-	export let order = void 0;
-	export let unit = void 0;
-	export let optionsX = void 0;
-	export let optionsY = void 0;
-	export let optionsZ = void 0;
-	export let expanded = void 0;
-	let options;
-	let internalValue;
-	const buttonClass = 'tp-rotationswatchv_b';
+	import ClsPad from '../internal/ClsPad.svelte'
+	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation'
+	import { BROWSER } from 'esm-env'
+	import { shallowEqual } from 'fast-equals'
+	export let value
+	export let order = void 0
+	export let unit = void 0
+	export let optionsX = void 0
+	export let optionsY = void 0
+	export let optionsZ = void 0
+	export let expanded = void 0
+	let options
+	let internalValue
+	const buttonClass = 'tp-rotationswatchv_b'
 	function updateInternalValueFromValue() {
 		if (Array.isArray(value)) {
-			const newInternalValue = { x: value[0], y: value[1], z: value[2] };
+			const newInternalValue = { x: value[0], y: value[1], z: value[2] }
 			if (!shallowEqual(newInternalValue, internalValue)) {
-				internalValue = newInternalValue;
+				internalValue = newInternalValue
 			}
 		} else if (!shallowEqual(value, internalValue)) {
-			internalValue = { ...value };
+			internalValue = { ...value }
 		}
 	}
 	function updateValueFromInternalValue() {
 		if (Array.isArray(value)) {
-			const newValue = [internalValue.x, internalValue.y, internalValue.z];
+			const newValue = [internalValue.x, internalValue.y, internalValue.z]
 			if (!shallowEqual(newValue, value)) {
-				value = newValue;
+				value = newValue
 			}
 		} else if (!shallowEqual(internalValue, value)) {
-			value = { ...internalValue };
+			value = { ...internalValue }
 		}
 	}
-	$: value, updateInternalValueFromValue();
-	$: internalValue, updateValueFromInternalValue();
+	$: value, updateInternalValueFromValue()
+	$: internalValue, updateValueFromInternalValue()
 	$: options = {
 		x: optionsX,
 		y: optionsY,
@@ -45,8 +45,8 @@
 		order,
 		rotationMode: 'euler',
 		unit,
-		view: 'rotation'
-	};
+		view: 'rotation',
+	}
 </script>
 
 <GenericInputFolding

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

@@ -1,21 +1,21 @@
-import { SvelteComponent } from 'svelte';
-import type { Simplify } from '../utils';
-import type { ValueChangeEvent } from '../utils.js';
-import type { EulerOrder } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/EulerOrder.js';
-import type { EulerUnit } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/EulerUnit.js';
-import type { PointDimensionParams } from '@tweakpane/core';
-export type RotationEulerOptions = Simplify<PointDimensionParams>;
-export type RotationEulerOrder = EulerOrder;
-export type RotationEulerUnit = EulerUnit;
+import { SvelteComponent } from 'svelte'
+import type { Simplify } from '../utils'
+import type { ValueChangeEvent } from '../utils.js'
+import type { EulerOrder } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/EulerOrder.js'
+import type { EulerUnit } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/EulerUnit.js'
+import type { PointDimensionParams } from '@tweakpane/core'
+export type RotationEulerOptions = Simplify<PointDimensionParams>
+export type RotationEulerOrder = EulerOrder
+export type RotationEulerUnit = EulerUnit
 export type RotationEulerValueObject = {
-	x: number;
-	y: number;
-	z: number;
-};
-export type RotationEulerValueTuple = [x: number, y: number, z: number];
-export type RotationEulerValue = Simplify<RotationEulerValueObject | RotationEulerValueTuple>;
-export type RotationEulerChangeEvent = ValueChangeEvent<RotationEulerValue>;
-import type { RotationInputPluginEulerParams as RotationEulerOptionsInternal } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/RotationInputPluginEulerParams';
+	x: number
+	y: number
+	z: number
+}
+export type RotationEulerValueTuple = [x: number, y: number, z: number]
+export type RotationEulerValue = Simplify<RotationEulerValueObject | RotationEulerValueTuple>
+export type RotationEulerChangeEvent = ValueChangeEvent<RotationEulerValue>
+import type { RotationInputPluginEulerParams as RotationEulerOptionsInternal } from '@kitschpatrol/tweakpane-plugin-rotation/dist/types/RotationInputPluginEulerParams'
 declare const __propDef: {
 	props: {
 		/**
@@ -27,7 +27,7 @@ declare const __propDef: {
 		 * See the `order` prop to specify the sequence in which rotations are applied.
 		 * @bindable
 		 * */
-		value: RotationEulerValue;
+		value: RotationEulerValue
 		/**
 		 * Input parameters specific to the X dimension.
 		 *
@@ -35,7 +35,7 @@ declare const __propDef: {
 		 * object of options, not a value.
 		 * @default `undefined`
 		 * */
-		optionsX?: RotationEulerOptions;
+		optionsX?: RotationEulerOptions
 		/**
 		 * Input parameters specific to the Y dimension.
 		 *
@@ -43,7 +43,7 @@ declare const __propDef: {
 		 * object of options, not a value.
 		 * @default `undefined`
 		 * */
-		optionsY?: RotationEulerOptions;
+		optionsY?: RotationEulerOptions
 		/**
 		 * Input parameters specific to the Z dimension.
 		 *
@@ -51,7 +51,7 @@ declare const __propDef: {
 		 * object of options, not a value.
 		 * @default `undefined`
 		 * */
-		optionsZ?: RotationEulerOptions;
+		optionsZ?: RotationEulerOptions
 		/**
 		 * Order of in which rotations are applied.
 		 *
@@ -60,35 +60,35 @@ declare const __propDef: {
 		 * behavior.
 		 * @default `'XYZ'`
 		 * */
-		order?: RotationEulerOrder;
+		order?: RotationEulerOrder
 		/**
 		 * Units of rotation.
 		 * @default `'rad'`
 		 */
-		unit?: RotationEulerUnit;
+		unit?: RotationEulerUnit
 	} & Omit<
 		{
 			/**
 			 * DOM class name of the button used to expand and collapse the input's picker.
 			 * @default `undefined`
 			 */
-			buttonClass?: string;
+			buttonClass?: string
 			/**
 			 * Expand or collapse the input's picker.
 			 * @default `false`
 			 * @bindable
 			 */
-			expanded?: boolean;
+			expanded?: boolean
 			/**
 			 * The style of value "picker" to use in the input.
 			 * @default `'popup'`
 			 */
-			picker?: 'inline' | 'popup';
+			picker?: 'inline' | 'popup'
 			/**
 			 * Allow users to interactively expand / contract the picker.
 			 * @default `true`
 			 */
-			userExpandable?: boolean;
+			userExpandable?: boolean
 		} & {
 			/**
 			 * The rotation value to control.
@@ -99,26 +99,26 @@ declare const __propDef: {
 			 * See the `order` prop to specify the sequence in which rotations are applied.
 			 * @bindable
 			 */
-			value: RotationEulerValue;
+			value: RotationEulerValue
 		} & Omit<
 				{
 					/**
 					 * The binding's target object with values to manipulate.
 					 * @bindable
 					 */
-					object: import('@tweakpane/core').Bindable & Record<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;
+					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.
 					 *
@@ -131,7 +131,7 @@ declare const __propDef: {
 					 * Tweakpane UI_.
 					 * @default `undefined`
 					 */
-					options?: RotationEulerOptionsInternal | undefined;
+					options?: RotationEulerOptionsInternal | undefined
 					/**
 					 * Custom color scheme.
 					 *
@@ -139,7 +139,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
@@ -153,7 +153,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>`.
@@ -165,13 +165,13 @@ declare const __propDef: {
 					 *
 					 * @default `undefined`
 					 */
-					plugin?: import('../utils').Plugin | undefined;
+					plugin?: import('../utils').Plugin | undefined
 				},
 				'object' | 'key'
 			>,
 		'ref' | 'options' | 'plugin' | 'buttonClass'
-	>;
-	slots: {};
+	>
+	slots: {}
 	events: {
 		/**
 		 * Fires when `value` changes.
@@ -184,12 +184,12 @@ declare const __propDef: {
 		 * @extends ValueChangeEvent
 		 * @event
 		 * */
-		change: RotationEulerChangeEvent;
-	};
-};
-export type RotationEulerProps = typeof __propDef.props;
-export type RotationEulerEvents = typeof __propDef.events;
-export type RotationEulerSlots = typeof __propDef.slots;
+		change: RotationEulerChangeEvent
+	}
+}
+export type RotationEulerProps = typeof __propDef.props
+export type RotationEulerEvents = typeof __propDef.events
+export type RotationEulerSlots = typeof __propDef.slots
 /**
  * Integrates the [euler
  * rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts)
@@ -218,35 +218,35 @@ export type RotationEulerSlots = typeof __propDef.slots;
  *   Button,
  *   RotationEuler,
  *   type RotationEulerValueObject,
- *   Utils
- * } from 'svelte-tweakpane-ui';
+ *   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
- * };
+ *   z: 0,
+ * }
  *
- * $: transform = Utils.eulerToCssTransform(value);
+ * $: transform = Utils.eulerToCssTransform(value)
  * $: valueRows = Object.values(value)
  *   .map((v) => `${v >= 0 ? '+' : ''}${v.toFixed(6)}`)
- *   .join('\n');
+ *   .join('\n')
  * </script>
  *
  * <RotationEuler
  * bind:value
  * expanded={true}
  * label="CSS Rotation"
- * picker={'inline'}
+ * picker="inline"
  * />
  * <Button
  * on:click={() =>
  *   (value = {
  *     x: 0,
  *     y: 0,
- *     z: 0
+ *     z: 0,
  *   })}
  * title="Reset"
  * />
@@ -275,4 +275,4 @@ export default class RotationEuler extends SvelteComponent<
 	RotationEulerEvents,
 	RotationEulerSlots
 > {}
-export {};
+export {}

package/dist/control/RotationQuaternion.svelte

@@ -1,50 +1,50 @@
 <script context="module"></script>
 
 <script>
-	import ClsPad from '../internal/ClsPad.svelte';
-	import GenericInputFolding from '../internal/GenericInputFolding.svelte';
-	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation';
-	import { BROWSER } from 'esm-env';
-	import { shallowEqual } from 'fast-equals';
-	export let value;
-	export let optionsX = void 0;
-	export let optionsY = void 0;
-	export let optionsZ = void 0;
-	export let optionsW = void 0;
-	export let expanded = void 0;
-	let options;
-	let internalValue;
-	const buttonClass = 'tp-rotationswatchv_b';
+	import ClsPad from '../internal/ClsPad.svelte'
+	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
+	import * as pluginModule from '@kitschpatrol/tweakpane-plugin-rotation'
+	import { BROWSER } from 'esm-env'
+	import { shallowEqual } from 'fast-equals'
+	export let value
+	export let optionsX = void 0
+	export let optionsY = void 0
+	export let optionsZ = void 0
+	export let optionsW = void 0
+	export let expanded = void 0
+	let options
+	let internalValue
+	const buttonClass = 'tp-rotationswatchv_b'
 	function updateInternalValueFromValue() {
 		if (Array.isArray(value)) {
-			const newInternalValue = { x: value[0], y: value[1], z: value[2], w: value[3] };
+			const newInternalValue = { x: value[0], y: value[1], z: value[2], w: value[3] }
 			if (!shallowEqual(newInternalValue, internalValue)) {
-				internalValue = newInternalValue;
+				internalValue = newInternalValue
 			}
 		} else if (!shallowEqual(value, internalValue)) {
-			internalValue = { ...value };
+			internalValue = { ...value }
 		}
 	}
 	function updateValueFromInternalValue() {
 		if (Array.isArray(value)) {
-			const newValue = [internalValue.x, internalValue.y, internalValue.z, internalValue.w];
+			const newValue = [internalValue.x, internalValue.y, internalValue.z, internalValue.w]
 			if (!shallowEqual(newValue, value)) {
-				value = newValue;
+				value = newValue
 			}
 		} else if (!shallowEqual(internalValue, value)) {
-			value = { ...internalValue };
+			value = { ...internalValue }
 		}
 	}
-	$: value, updateInternalValueFromValue();
-	$: internalValue, updateValueFromInternalValue();
+	$: value, updateInternalValueFromValue()
+	$: internalValue, updateValueFromInternalValue()
 	$: options = {
 		x: optionsX,
 		y: optionsY,
 		z: optionsZ,
 		w: optionsW,
 		rotationMode: 'quaternion',
-		view: 'rotation'
-	};
+		view: 'rotation',
+	}
 </script>
 
 <GenericInputFolding