svelte-tweakpane-ui 1.2.7 → 1.3.0

package/dist/control/IntervalSlider.svelte

@@ -5,6 +5,7 @@
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
 	export let meanValue = void 0;
+	export let wide = void 0;
 	let internalValue;
 	function updateInternalValue() {
 		if (Array.isArray(value)) {
@@ -28,10 +29,26 @@
 			internalValue = { min: meanValue - r / 2, max: meanValue + r / 2 };
 		}
 	}
+	let ref;
+	function updateWide(wide2) {
+		const inputField = ref?.element.querySelector('div.tp-rsltxtv_t');
+		if (wide2) {
+			inputField?.style.setProperty('display', 'none');
+		} else {
+			inputField?.style.removeProperty('display');
+		}
+	}
+	$: ref && wide !== void 0 && updateWide(wide);
 	$: value, updateInternalValue();
 	$: internalValue, updateValue();
 	$: meanValue = (internalValue.min + internalValue.max) / 2;
 	$: meanValue, updateValueFromMean();
 </script>
 
-<GenericSlider bind:value={internalValue} on:change plugin={pluginModule} {...$$restProps} />
+<GenericSlider
+	bind:value={internalValue}
+	bind:ref
+	on:change
+	plugin={pluginModule}
+	{...$$restProps}
+/>

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

@@ -1,6 +1,7 @@
 import { SvelteComponent } from 'svelte';
 import type { Simplify } from '../utils';
 import type { ValueChangeEvent } from '../utils.js';
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
 export type IntervalSliderValueTuple = [min: number, max: number];
 export type IntervalSliderValueObject = {
 	min: number;
@@ -63,6 +64,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * Interval value to control.
@@ -124,7 +131,7 @@ declare const __propDef: {
 					 * @bindable
 					 * @readonly
 					 */
-					ref?: import('tweakpane').SliderInputBindingApi | undefined;
+					ref?: GenericSliderRef | undefined;
 					/**
 					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 					 * the `<Binding>`'s containing `<Pane>`.

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

@@ -44,12 +44,6 @@ declare const __propDef: {
 		 * @default `{ ticks: 5, pixels: 40, value: 10 }`
 		 * */
 		unit?: RingUnit | undefined;
-		/**
-		 * When `true`, expand the width of the ring control at the expense of the numeric input
-		 * field.
-		 * @default `false`
-		 * */
-		wide?: boolean | undefined;
 	} & Omit<
 		{
 			/**
@@ -91,6 +85,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * A `number` value to control.

package/dist/control/Slider.svelte

@@ -3,6 +3,17 @@
 <script>
 	import GenericSlider from '../internal/GenericSlider.svelte';
 	export let value;
+	export let wide = void 0;
+	let ref;
+	function updateWide(wide2) {
+		const inputField = ref?.element.querySelector('div.tp-sldtxtv_t');
+		if (wide2) {
+			inputField?.style.setProperty('display', 'none');
+		} else {
+			inputField?.style.removeProperty('display');
+		}
+	}
+	$: ref && wide !== void 0 && updateWide(wide);
 </script>
 
-<GenericSlider bind:value on:change {...$$restProps} />
+<GenericSlider bind:value bind:ref bind:wide on:change {...$$restProps} />

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from 'svelte';
 import type { ValueChangeEvent } from '../utils.js';
+import type { SliderInputBindingApi as GenericSliderRef } from 'tweakpane';
 export type SliderChangeEvent = ValueChangeEvent<number>;
 declare const __propDef: {
 	props: {
@@ -49,6 +50,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * A `number` value to control.
@@ -108,7 +115,7 @@ declare const __propDef: {
 					 * @bindable
 					 * @readonly
 					 */
-					ref?: import('tweakpane').SliderInputBindingApi | undefined;
+					ref?: GenericSliderRef | undefined;
 					/**
 					 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
 					 * the `<Binding>`'s containing `<Pane>`.

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

@@ -14,12 +14,6 @@ declare const __propDef: {
 		 * `value`](https://github.com/cocopon/tweakpane/blob/66dfbea04bfe9b7f031673c955ceda1f92356e75/packages/core/src/common/number/util.ts#L54).
 		 */
 		amount?: number | undefined;
-		/**
-		 * When `true`, expand the width of the wheel control at the expense of the numeric input
-		 * field.
-		 * @default `false`
-		 * */
-		wide?: boolean | undefined;
 	} & Omit<
 		{
 			/**
@@ -61,6 +55,12 @@ declare const __propDef: {
 			 * No step constraint.
 			 */
 			step?: number | undefined;
+			/**
+			 * When `true`, expand the width of the control at the expense of the numeric input
+			 * field.
+			 * @default `false`
+			 */
+			wide?: boolean | undefined;
 		} & {
 			/**
 			 * A `number` value to control.

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

@@ -31,10 +31,7 @@ declare const __propDef: {
 		 * set with `setGlobalDefaultTheme()`.
 		 * */ theme?: Theme | undefined;
 	};
-	/**
-	 * Prevent interactivity and gray out the control.
-	 * @default `false`
-	 * */ events: {
+	events: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {
@@ -43,6 +40,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type FolderProps = typeof __propDef.props;
 export type FolderEvents = typeof __propDef.events;

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

@@ -446,6 +446,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type PaneProps = typeof __propDef.props;
 export type PaneEvents = typeof __propDef.events;

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

@@ -56,6 +56,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type SeparatorProps = typeof __propDef.props;
 export type SeparatorEvents = typeof __propDef.events;

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

@@ -30,6 +30,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type TabGroupProps = typeof __propDef.props;
 export type TabGroupEvents = typeof __propDef.events;

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

@@ -33,6 +33,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type TabPageProps = typeof __propDef.props;
 export type TabPageEvents = typeof __propDef.events;

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

@@ -79,6 +79,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type ElementProps = typeof __propDef.props;
 export type ElementEvents = typeof __propDef.events;

package/dist/internal/ClsPad.svelte.d.ts

@@ -87,6 +87,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type ClsPadProps = typeof __propDef.props;
 export type ClsPadEvents = typeof __propDef.events;

package/dist/internal/GenericPane.svelte.d.ts

@@ -76,6 +76,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type GenericPaneProps = typeof __propDef.props;
 export type GenericPaneEvents = typeof __propDef.events;

package/dist/internal/GenericSlider.svelte

@@ -8,6 +8,7 @@
 	export let pointerScale = void 0;
 	export let keyScale = void 0;
 	export let format = void 0;
+	export let ref = void 0;
 	let formatProxy = format;
 	$: formatProxy !== format && (formatProxy = format);
 	let optionsInternal;
@@ -22,4 +23,4 @@
 	};
 </script>
 
-<GenericInput bind:value on:change options={optionsInternal} {...$$restProps} />
+<GenericInput bind:value bind:ref on:change options={optionsInternal} {...$$restProps} />

package/dist/internal/GenericSlider.svelte.d.ts

@@ -43,6 +43,12 @@ declare class __sveltets_Render<T extends number | IntervalSliderValue> {
 		 * No step constraint.
 		 * */
 		step?: number | undefined;
+		/**
+		 * When `true`, expand the width of the control at the expense of the numeric input
+		 * field.
+		 * @default `false`
+		 * */
+		wide?: boolean | undefined;
 	} & {
 		/**
 		 * The value to control.

package/dist/internal/InternalMonitorBoolean.svelte.d.ts

@@ -111,6 +111,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalMonitorBooleanProps = typeof __propDef.props;
 export type InternalMonitorBooleanEvents = typeof __propDef.events;

package/dist/internal/InternalMonitorNumber.svelte.d.ts

@@ -132,6 +132,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalMonitorNumberProps = typeof __propDef.props;
 export type InternalMonitorNumberEvents = typeof __propDef.events;

package/dist/internal/InternalMonitorString.svelte.d.ts

@@ -116,6 +116,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalMonitorStringProps = typeof __propDef.props;
 export type InternalMonitorStringEvents = typeof __propDef.events;

package/dist/internal/InternalPaneDraggable.svelte.d.ts

@@ -169,6 +169,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalPaneDraggableProps = typeof __propDef.props;
 export type InternalPaneDraggableEvents = typeof __propDef.events;

package/dist/internal/InternalPaneFixed.svelte.d.ts

@@ -108,6 +108,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalPaneFixedProps = typeof __propDef.props;
 export type InternalPaneFixedEvents = typeof __propDef.events;

package/dist/internal/InternalPaneInline.svelte.d.ts

@@ -94,6 +94,8 @@ declare const __propDef: {
 		 */
 		default: {};
 	};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type InternalPaneInlineProps = typeof __propDef.props;
 export type InternalPaneInlineEvents = typeof __propDef.events;

package/dist/monitor/WaveformMonitor.svelte.d.ts

@@ -134,6 +134,8 @@ declare const __propDef: {
 		[evt: string]: CustomEvent<any>;
 	};
 	slots: {};
+	exports?: {} | undefined;
+	bindings?: string | undefined;
 };
 export type WaveformMonitorProps = typeof __propDef.props;
 export type WaveformMonitorEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "type": "module",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "repository": {
@@ -202,32 +202,32 @@
   "devDependencies": {
     "@kitschpatrol/shared-config": "^4.6.6",
     "@phenomnomnominal/tsquery": "^6.1.3",
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.44.1",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.9",
+    "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/eslint": "^8.56.10",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.12.13",
     "bumpp": "^9.4.1",
     "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.15",
+    "glob": "^10.4.1",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.7.0",
     "publint": "^0.2.8",
     "read-package-up": "^11.0.0",
     "svelte": "^4.2.17",
-    "svelte-check": "^3.7.1",
-    "svelte-language-server": "^0.16.9",
-    "svelte2tsx": "^0.7.8",
+    "svelte-check": "^3.8.0",
+    "svelte-language-server": "^0.16.10",
+    "svelte2tsx": "^0.7.9",
     "ts-morph": "^22.0.0",
     "tslib": "^2.6.2",
-    "tsx": "^4.10.5",
+    "tsx": "^4.11.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "yaml": "^2.4.2"
   },
   "scripts": {
@@ -247,7 +247,7 @@
     "build:13-build-docs": "pnpm run docs-build",
     "check": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json",
     "check-watch": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json --watch",
-    "clean": "git clean -fdX",
+    "clean": "git clean -fdX && rm ./pnpm-lock.yaml",
     "docs-build": "pnpm -C ./docs run build",
     "docs-dev": "pnpm -C ./docs run dev",
     "docs-preview": "pnpm -C ./docs run preview",