svelte-tweakpane-ui 1.5.3 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/dist/control/Button.svelte +30 -30
  2. package/dist/control/Button.svelte.d.ts +18 -18
  3. package/dist/control/ButtonGrid.svelte +25 -25
  4. package/dist/control/ButtonGrid.svelte.d.ts +35 -35
  5. package/dist/control/Checkbox.svelte +2 -2
  6. package/dist/control/Checkbox.svelte.d.ts +23 -23
  7. package/dist/control/Color.svelte +34 -34
  8. package/dist/control/Color.svelte.d.ts +40 -40
  9. package/dist/control/CubicBezier.svelte +30 -30
  10. package/dist/control/CubicBezier.svelte.d.ts +47 -47
  11. package/dist/control/File.svelte +20 -20
  12. package/dist/control/File.svelte.d.ts +38 -38
  13. package/dist/control/Image.svelte +22 -22
  14. package/dist/control/Image.svelte.d.ts +31 -31
  15. package/dist/control/IntervalSlider.svelte +24 -24
  16. package/dist/control/IntervalSlider.svelte.d.ts +39 -39
  17. package/dist/control/List.svelte +35 -35
  18. package/dist/control/List.svelte.d.ts +31 -31
  19. package/dist/control/Point.svelte +31 -31
  20. package/dist/control/Point.svelte.d.ts +81 -81
  21. package/dist/control/RadioGrid.svelte +24 -24
  22. package/dist/control/RadioGrid.svelte.d.ts +40 -40
  23. package/dist/control/Ring.svelte +9 -9
  24. package/dist/control/Ring.svelte.d.ts +40 -40
  25. package/dist/control/RotationEuler.svelte +25 -25
  26. package/dist/control/RotationEuler.svelte.d.ts +53 -53
  27. package/dist/control/RotationQuaternion.svelte +24 -24
  28. package/dist/control/RotationQuaternion.svelte.d.ts +47 -47
  29. package/dist/control/Slider.svelte +9 -9
  30. package/dist/control/Slider.svelte.d.ts +32 -32
  31. package/dist/control/Stepper.svelte +16 -16
  32. package/dist/control/Stepper.svelte.d.ts +32 -32
  33. package/dist/control/Text.svelte +13 -13
  34. package/dist/control/Text.svelte.d.ts +26 -26
  35. package/dist/control/Textarea.svelte +34 -34
  36. package/dist/control/Textarea.svelte.d.ts +29 -29
  37. package/dist/control/Wheel.svelte +8 -8
  38. package/dist/control/Wheel.svelte.d.ts +32 -32
  39. package/dist/core/Binding.svelte +60 -60
  40. package/dist/core/Binding.svelte.d.ts +33 -33
  41. package/dist/core/Blade.svelte +30 -30
  42. package/dist/core/Blade.svelte.d.ts +21 -21
  43. package/dist/core/Folder.svelte +34 -34
  44. package/dist/core/Folder.svelte.d.ts +22 -22
  45. package/dist/core/Pane.svelte +17 -17
  46. package/dist/core/Pane.svelte.d.ts +56 -56
  47. package/dist/core/Separator.svelte +5 -5
  48. package/dist/core/Separator.svelte.d.ts +20 -20
  49. package/dist/core/TabGroup.svelte +29 -29
  50. package/dist/core/TabGroup.svelte.d.ts +18 -18
  51. package/dist/core/TabPage.svelte +36 -36
  52. package/dist/core/TabPage.svelte.d.ts +21 -21
  53. package/dist/extra/AutoObject.svelte +20 -20
  54. package/dist/extra/AutoObject.svelte.d.ts +22 -22
  55. package/dist/extra/AutoValue.svelte +3 -3
  56. package/dist/extra/AutoValue.svelte.d.ts +26 -26
  57. package/dist/extra/Element.svelte +10 -10
  58. package/dist/extra/Element.svelte.d.ts +26 -26
  59. package/dist/index.d.ts +48 -48
  60. package/dist/index.js +35 -35
  61. package/dist/internal/ClsPad.svelte +11 -11
  62. package/dist/internal/ClsPad.svelte.d.ts +17 -17
  63. package/dist/internal/GenericBinding.svelte +11 -11
  64. package/dist/internal/GenericBinding.svelte.d.ts +25 -25
  65. package/dist/internal/GenericBladeFolding.svelte +19 -19
  66. package/dist/internal/GenericBladeFolding.svelte.d.ts +20 -20
  67. package/dist/internal/GenericInput.svelte +7 -7
  68. package/dist/internal/GenericInput.svelte.d.ts +27 -27
  69. package/dist/internal/GenericInputFolding.svelte +21 -21
  70. package/dist/internal/GenericInputFolding.svelte.d.ts +32 -32
  71. package/dist/internal/GenericMonitor.svelte +10 -10
  72. package/dist/internal/GenericMonitor.svelte.d.ts +29 -29
  73. package/dist/internal/GenericPane.svelte +48 -48
  74. package/dist/internal/GenericPane.svelte.d.ts +22 -22
  75. package/dist/internal/GenericSlider.svelte +15 -15
  76. package/dist/internal/GenericSlider.svelte.d.ts +29 -29
  77. package/dist/internal/InternalMonitorBoolean.svelte +5 -5
  78. package/dist/internal/InternalMonitorBoolean.svelte.d.ts +31 -31
  79. package/dist/internal/InternalMonitorNumber.svelte +14 -14
  80. package/dist/internal/InternalMonitorNumber.svelte.d.ts +37 -37
  81. package/dist/internal/InternalMonitorString.svelte +9 -9
  82. package/dist/internal/InternalMonitorString.svelte.d.ts +32 -32
  83. package/dist/internal/InternalPaneDraggable.svelte +169 -173
  84. package/dist/internal/InternalPaneDraggable.svelte.d.ts +30 -30
  85. package/dist/internal/InternalPaneFixed.svelte +13 -13
  86. package/dist/internal/InternalPaneFixed.svelte.d.ts +23 -23
  87. package/dist/internal/InternalPaneInline.svelte +14 -14
  88. package/dist/internal/InternalPaneInline.svelte.d.ts +21 -21
  89. package/dist/monitor/FpsGraph.svelte +35 -35
  90. package/dist/monitor/FpsGraph.svelte.d.ts +50 -42
  91. package/dist/monitor/Monitor.svelte +4 -4
  92. package/dist/monitor/Monitor.svelte.d.ts +87 -88
  93. package/dist/monitor/Profiler.svelte +37 -37
  94. package/dist/monitor/Profiler.svelte.d.ts +78 -76
  95. package/dist/monitor/WaveformMonitor.svelte +12 -12
  96. package/dist/monitor/WaveformMonitor.svelte.d.ts +39 -39
  97. package/dist/theme.d.ts +61 -61
  98. package/dist/theme.js +49 -53
  99. package/dist/utils.d.ts +62 -66
  100. package/dist/utils.js +78 -78
  101. package/license.txt +1 -1
  102. package/package.json +100 -115
  103. package/readme.md +1 -1
@@ -1,103 +1,103 @@
1
1
  <script context="module"></script>
2
2
 
3
3
  <script generics="T extends BindingObject, U extends BindingOptions, V extends BindingRef">
4
- import ClsPad from '../internal/ClsPad.svelte';
5
- import InternalPaneInline from '../internal/InternalPaneInline.svelte';
6
- import { enforceReadonly, getElementIndex, isRootPane } from '../utils.js';
7
- import { BROWSER, DEV } from 'esm-env';
8
- import copy from 'fast-copy';
9
- import { shallowEqual } from 'fast-equals';
10
- import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
11
- export let object;
12
- export let key;
13
- export let disabled = false;
14
- export let label = void 0;
15
- export let options = void 0;
16
- export let theme = void 0;
17
- export let ref = void 0;
18
- export let plugin = void 0;
19
- const registerPlugin = getContext('registerPlugin');
20
- const parentStore = getContext('parentStore');
21
- const userCreatedPane = getContext('userCreatedPane');
22
- let _ref;
23
- let indexElement;
24
- let index;
4
+ import ClsPad from '../internal/ClsPad.svelte'
5
+ import InternalPaneInline from '../internal/InternalPaneInline.svelte'
6
+ import { enforceReadonly, getElementIndex, isRootPane } from '../utils.js'
7
+ import { BROWSER, DEV } from 'esm-env'
8
+ import copy from 'fast-copy'
9
+ import { shallowEqual } from 'fast-equals'
10
+ import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
11
+ export let object
12
+ export let key
13
+ export let disabled = false
14
+ export let label = void 0
15
+ export let options = void 0
16
+ export let theme = void 0
17
+ export let ref = void 0
18
+ export let plugin = void 0
19
+ const registerPlugin = getContext('registerPlugin')
20
+ const parentStore = getContext('parentStore')
21
+ const userCreatedPane = getContext('userCreatedPane')
22
+ let _ref
23
+ let indexElement
24
+ let index
25
25
  function create() {
26
- if (_ref) _ref.dispose();
26
+ if (_ref) _ref.dispose()
27
27
  if (plugin !== void 0) {
28
- registerPlugin(plugin);
28
+ registerPlugin(plugin)
29
29
  }
30
30
  _ref = $parentStore.addBinding(object, key, {
31
31
  index,
32
32
  label,
33
33
  ...options,
34
- disabled
34
+ disabled,
35
35
  // Why last?
36
- });
37
- ref = _ref;
38
- _ref.on('change', onTweakpaneChange);
36
+ })
37
+ ref = _ref
38
+ _ref.on('change', onTweakpaneChange)
39
39
  }
40
40
  onMount(() => {
41
- index = indexElement ? getElementIndex(indexElement) : 0;
42
- });
41
+ index = indexElement ? getElementIndex(indexElement) : 0
42
+ })
43
43
  onDestroy(() => {
44
- _ref?.dispose();
45
- });
46
- const dispatch = createEventDispatcher();
44
+ _ref?.dispose()
45
+ })
46
+ const dispatch = createEventDispatcher()
47
47
  function safeCopy(value) {
48
48
  if (value instanceof File) {
49
49
  return new File([value], value.name, {
50
50
  lastModified: value.lastModified,
51
- type: value.type
52
- });
51
+ type: value.type,
52
+ })
53
53
  }
54
54
  if (BROWSER && value instanceof HTMLImageElement) {
55
- const copy2 = new Image();
56
- copy2.src = value.src;
57
- return copy2;
55
+ const copy2 = new Image()
56
+ copy2.src = value.src
57
+ return copy2
58
58
  }
59
- return copy(value);
59
+ return copy(value)
60
60
  }
61
- let lastObject = object;
62
- let lastValue = safeCopy(object[key]);
63
- let internalChange = false;
61
+ let lastObject = object
62
+ let lastValue = safeCopy(object[key])
63
+ let internalChange = false
64
64
  function onBoundValueChange(object2) {
65
65
  if (lastObject !== object2) {
66
- internalChange = false;
66
+ internalChange = false
67
67
  }
68
68
  if (!shallowEqual(object2[key], lastValue)) {
69
- lastValue = safeCopy(object2[key]);
69
+ lastValue = safeCopy(object2[key])
70
70
  dispatch('change', {
71
71
  value: safeCopy(object2[key]),
72
- origin: internalChange ? 'internal' : 'external'
73
- });
72
+ origin: internalChange ? 'internal' : 'external',
73
+ })
74
74
  if (!internalChange && _ref) {
75
- _ref.off('change', onTweakpaneChange);
76
- _ref.refresh();
77
- _ref.on('change', onTweakpaneChange);
75
+ _ref.off('change', onTweakpaneChange)
76
+ _ref.refresh()
77
+ _ref.on('change', onTweakpaneChange)
78
78
  }
79
79
  }
80
- internalChange = false;
80
+ internalChange = false
81
81
  if (lastObject !== object2) {
82
- lastObject = object2;
83
- create();
82
+ lastObject = object2
83
+ create()
84
84
  }
85
85
  }
86
86
  function onTweakpaneChange() {
87
- internalChange = true;
88
- object[key] = safeCopy(object[key]);
87
+ internalChange = true
88
+ object[key] = safeCopy(object[key])
89
89
  }
90
- $: DEV && enforceReadonly(_ref, ref, 'Binding', 'ref', true);
91
- $: options, $parentStore !== void 0 && index !== void 0 && create();
92
- $: _ref !== void 0 && (_ref.disabled = disabled);
93
- $: _ref !== void 0 && (_ref.label = label);
94
- $: $parentStore !== void 0 && onBoundValueChange(object);
90
+ $: DEV && enforceReadonly(_ref, ref, 'Binding', 'ref', true)
91
+ $: options, $parentStore !== void 0 && index !== void 0 && create()
92
+ $: _ref !== void 0 && (_ref.disabled = disabled)
93
+ $: _ref !== void 0 && (_ref.label = label)
94
+ $: $parentStore !== void 0 && onBoundValueChange(object)
95
95
  $: theme &&
96
96
  $parentStore !== void 0 &&
97
97
  (userCreatedPane || !isRootPane($parentStore)) &&
98
98
  console.warn(
99
- 'Set theme on the <Pane> component, not on its children! (Check nested <Binding> components for a theme prop.)'
100
- );
99
+ 'Set theme on the <Pane> component, not on its children! (Check nested <Binding> components for a theme prop.)',
100
+ )
101
101
  </script>
102
102
 
103
103
  {#if parentStore}
@@ -1,31 +1,31 @@
1
- import { SvelteComponent } from 'svelte';
2
- import type { BindingObject } from '../utils';
3
- import type { ValueChangeEvent } from '../utils.js';
4
- import type { BindingApi, BindingParams } from '@tweakpane/core';
5
- export type BindingOptions = BindingParams;
6
- export type BindingRef = BindingApi;
7
- export type BindingChangeEvent = ValueChangeEvent<BindingObject>;
8
- import type { Theme } from '../theme.js';
9
- import { type Plugin } from '../utils.js';
1
+ import { SvelteComponent } from 'svelte'
2
+ import type { BindingObject } from '../utils'
3
+ import type { ValueChangeEvent } from '../utils.js'
4
+ import type { BindingApi, BindingParams } from '@tweakpane/core'
5
+ export type BindingOptions = BindingParams
6
+ export type BindingRef = BindingApi
7
+ export type BindingChangeEvent = ValueChangeEvent<BindingObject>
8
+ import type { Theme } from '../theme.js'
9
+ import { type Plugin } from '../utils.js'
10
10
  declare class __sveltets_Render<
11
11
  T extends BindingObject,
12
12
  U extends BindingOptions,
13
- V extends BindingRef
13
+ V extends BindingRef,
14
14
  > {
15
15
  props(): {
16
16
  /**
17
17
  * The binding's target object with values to manipulate.
18
18
  * @bindable
19
- * */ object: T;
20
- /** The key for the value in the target `object` that the control should manipulate. */ key: keyof T;
19
+ * */ object: T
20
+ /** The key for the value in the target `object` that the control should manipulate. */ key: keyof T
21
21
  /**
22
22
  * Prevent interactivity and gray out the control.
23
23
  * @default `false`
24
- * */ disabled?: boolean;
24
+ * */ disabled?: boolean
25
25
  /**
26
26
  * Text displayed next to control.
27
27
  * @default `undefined`
28
- * */ label?: string | undefined;
28
+ * */ label?: string | undefined
29
29
  /**
30
30
  * Tweakpane's internal options object.
31
31
  *
@@ -37,14 +37,14 @@ declare class __sveltets_Render<
37
37
  * functionality. Options of interest are instead exposed as top-level props in _Svelte
38
38
  * Tweakpane UI_.
39
39
  * @default `undefined`
40
- * */ options?: U | undefined;
40
+ * */ options?: U | undefined
41
41
  /**
42
42
  * Custom color scheme.
43
43
  *
44
44
  * @default `undefined` \
45
45
  * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
46
46
  * set with `setGlobalDefaultTheme()`.
47
- * */ theme?: Theme | undefined;
47
+ * */ theme?: Theme | undefined
48
48
  /**
49
49
  * Reference to internal Tweakpane
50
50
  * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
@@ -57,7 +57,7 @@ declare class __sveltets_Render<
57
57
  *
58
58
  * @bindable
59
59
  * @readonly
60
- * */ ref?: V | undefined;
60
+ * */ ref?: V | undefined
61
61
  /**
62
62
  * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
63
63
  * the `<Binding>`'s containing `<Pane>`.
@@ -68,8 +68,8 @@ declare class __sveltets_Render<
68
68
  * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
69
69
  *
70
70
  * @default `undefined`
71
- * */ plugin?: Plugin | undefined;
72
- };
71
+ * */ plugin?: Plugin | undefined
72
+ }
73
73
  events(): {
74
74
  /**
75
75
  * Fires when the value of `object[key]` changes.
@@ -82,25 +82,25 @@ declare class __sveltets_Render<
82
82
  * @extends ValueChangeEvent
83
83
  * @event
84
84
  * */
85
- change: BindingChangeEvent;
86
- };
87
- slots(): {};
85
+ change: BindingChangeEvent
86
+ }
87
+ slots(): {}
88
88
  }
89
89
  export type BindingProps<
90
90
  T extends BindingObject,
91
91
  U extends BindingOptions,
92
- V extends BindingRef
93
- > = ReturnType<__sveltets_Render<T, U, V>['props']>;
92
+ V extends BindingRef,
93
+ > = ReturnType<__sveltets_Render<T, U, V>['props']>
94
94
  export type BindingEvents<
95
95
  T extends BindingObject,
96
96
  U extends BindingOptions,
97
- V extends BindingRef
98
- > = ReturnType<__sveltets_Render<T, U, V>['events']>;
97
+ V extends BindingRef,
98
+ > = ReturnType<__sveltets_Render<T, U, V>['events']>
99
99
  export type BindingSlots<
100
100
  T extends BindingObject,
101
101
  U extends BindingOptions,
102
- V extends BindingRef
103
- > = ReturnType<__sveltets_Render<T, U, V>['slots']>;
102
+ V extends BindingRef,
103
+ > = ReturnType<__sveltets_Render<T, U, V>['slots']>
104
104
  /**
105
105
  * Wraps the Tweakpane [`addBinding`](https://tweakpane.github.io/docs/input-bindings/) method.
106
106
  *
@@ -118,12 +118,12 @@ export type BindingSlots<
118
118
  * @example
119
119
  * ```svelte
120
120
  * <script lang="ts">
121
- * import { Binding, type BindingObject } from 'svelte-tweakpane-ui';
121
+ * import { Binding, type BindingObject } from 'svelte-tweakpane-ui'
122
122
  *
123
- * let object: BindingObject = { r: 0 };
123
+ * let object: BindingObject = { r: 0 }
124
124
  * </script>
125
125
  *
126
- * <Binding bind:object key={'r'} label="Reticulation" />
126
+ * <Binding bind:object key="r" label="Reticulation" />
127
127
  * <pre>Value: {object.r}</pre>
128
128
  * ```
129
129
  *
@@ -133,6 +133,6 @@ export type BindingSlots<
133
133
  export default class Binding<
134
134
  T extends BindingObject,
135
135
  U extends BindingOptions,
136
- V extends BindingRef
136
+ V extends BindingRef,
137
137
  > extends SvelteComponent<BindingProps<T, U, V>, BindingEvents<T, U, V>, BindingSlots<T, U, V>> {}
138
- export {};
138
+ export {}
@@ -1,50 +1,50 @@
1
1
  <script context="module"></script>
2
2
 
3
3
  <script generics="U extends BladeOptions, V extends BladeRef">
4
- import ClsPad from '../internal/ClsPad.svelte';
5
- import InternalPaneInline from '../internal/InternalPaneInline.svelte';
6
- import { enforceReadonly, getElementIndex, isRootPane } from '../utils.js';
7
- import { BROWSER, DEV } from 'esm-env';
8
- import { getContext, onDestroy, onMount } from 'svelte';
9
- export let options;
10
- export let disabled = false;
11
- export let theme = void 0;
12
- export let ref = void 0;
13
- export let plugin = void 0;
14
- const registerPlugin = getContext('registerPlugin');
15
- const parentStore = getContext('parentStore');
16
- const userCreatedPane = getContext('userCreatedPane');
17
- let indexElement;
18
- let index;
19
- let _ref;
4
+ import ClsPad from '../internal/ClsPad.svelte'
5
+ import InternalPaneInline from '../internal/InternalPaneInline.svelte'
6
+ import { enforceReadonly, getElementIndex, isRootPane } from '../utils.js'
7
+ import { BROWSER, DEV } from 'esm-env'
8
+ import { getContext, onDestroy, onMount } from 'svelte'
9
+ export let options
10
+ export let disabled = false
11
+ export let theme = void 0
12
+ export let ref = void 0
13
+ export let plugin = void 0
14
+ const registerPlugin = getContext('registerPlugin')
15
+ const parentStore = getContext('parentStore')
16
+ const userCreatedPane = getContext('userCreatedPane')
17
+ let indexElement
18
+ let index
19
+ let _ref
20
20
  function create() {
21
- if (_ref) _ref.dispose();
21
+ if (_ref) _ref.dispose()
22
22
  if (plugin !== void 0) {
23
- registerPlugin(plugin);
23
+ registerPlugin(plugin)
24
24
  }
25
25
  _ref = $parentStore.addBlade({
26
26
  index,
27
27
  ...options,
28
- disabled
28
+ disabled,
29
29
  // Why last?
30
- });
31
- ref = _ref;
30
+ })
31
+ ref = _ref
32
32
  }
33
33
  onMount(() => {
34
- index = indexElement ? getElementIndex(indexElement) : 0;
35
- });
34
+ index = indexElement ? getElementIndex(indexElement) : 0
35
+ })
36
36
  onDestroy(() => {
37
- _ref?.dispose();
38
- });
39
- $: DEV && enforceReadonly(_ref, ref, 'Blade', 'ref', true);
40
- $: options && $parentStore && index !== void 0 && create();
41
- $: _ref && (_ref.disabled = disabled);
37
+ _ref?.dispose()
38
+ })
39
+ $: DEV && enforceReadonly(_ref, ref, 'Blade', 'ref', true)
40
+ $: options && $parentStore && index !== void 0 && create()
41
+ $: _ref && (_ref.disabled = disabled)
42
42
  $: theme &&
43
43
  $parentStore &&
44
44
  (userCreatedPane || !isRootPane($parentStore)) &&
45
45
  console.warn(
46
- 'Set theme on the <Pane> component, not on its children! (Check nested <Blade> components for a theme prop.)'
47
- );
46
+ 'Set theme on the <Pane> component, not on its children! (Check nested <Blade> components for a theme prop.)',
47
+ )
48
48
  </script>
49
49
 
50
50
  {#if parentStore}
@@ -1,27 +1,27 @@
1
- import { SvelteComponent } from 'svelte';
2
- import type { BaseBladeParams, BladeApi } from 'tweakpane';
3
- export type BladeRef = BladeApi;
4
- export type BladeOptions = BaseBladeParams;
5
- export type { Plugin } from '../utils.js';
6
- import type { Theme } from '../theme.js';
7
- import { type Plugin } from '../utils.js';
1
+ import { SvelteComponent } from 'svelte'
2
+ import type { BaseBladeParams, BladeApi } from 'tweakpane'
3
+ export type BladeRef = BladeApi
4
+ export type BladeOptions = BaseBladeParams
5
+ export type { Plugin } from '../utils.js'
6
+ import type { Theme } from '../theme.js'
7
+ import { type Plugin } from '../utils.js'
8
8
  declare class __sveltets_Render<U extends BladeOptions, V extends BladeRef> {
9
9
  props(): {
10
10
  /**
11
11
  * Blade configuration exposing Tweakpane's internal
12
12
  * [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
13
13
  *
14
- * */ options: U;
14
+ * */ options: U
15
15
  /**
16
16
  * Prevent interactivity and gray out the control.
17
17
  * @default `false`
18
- * */ disabled?: boolean;
18
+ * */ disabled?: boolean
19
19
  /**
20
20
  * Custom color scheme.
21
21
  * @default `undefined` \
22
22
  * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
23
23
  * set with `setGlobalDefaultTheme()`.
24
- * */ theme?: Theme | undefined;
24
+ * */ theme?: Theme | undefined
25
25
  /**
26
26
  * Reference to internal Tweakpane
27
27
  * [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
@@ -33,7 +33,7 @@ declare class __sveltets_Render<U extends BladeOptions, V extends BladeRef> {
33
33
  *
34
34
  * @bindable
35
35
  * @readonly
36
- * */ ref?: V | undefined;
36
+ * */ ref?: V | undefined
37
37
  /**
38
38
  * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
39
39
  * the `<Blade>`'s containing `<Pane>`.
@@ -44,22 +44,22 @@ declare class __sveltets_Render<U extends BladeOptions, V extends BladeRef> {
44
44
  * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
45
45
  *
46
46
  * @default `undefined`
47
- * */ plugin?: Plugin | undefined;
48
- };
47
+ * */ plugin?: Plugin | undefined
48
+ }
49
49
  events(): {} & {
50
- [evt: string]: CustomEvent<any>;
51
- };
52
- slots(): {};
50
+ [evt: string]: CustomEvent<any>
51
+ }
52
+ slots(): {}
53
53
  }
54
54
  export type BladeProps<U extends BladeOptions, V extends BladeRef> = ReturnType<
55
55
  __sveltets_Render<U, V>['props']
56
- >;
56
+ >
57
57
  export type BladeEvents<U extends BladeOptions, V extends BladeRef> = ReturnType<
58
58
  __sveltets_Render<U, V>['events']
59
- >;
59
+ >
60
60
  export type BladeSlots<U extends BladeOptions, V extends BladeRef> = ReturnType<
61
61
  __sveltets_Render<U, V>['slots']
62
- >;
62
+ >
63
63
  /**
64
64
  * Wraps the Tweakpane [`addBlade`](https://tweakpane.github.io/docs/blades/) method.
65
65
  *
@@ -81,12 +81,12 @@ export type BladeSlots<U extends BladeOptions, V extends BladeRef> = ReturnType<
81
81
  * @example
82
82
  * ```svelte
83
83
  * <script lang="ts">
84
- * import { Blade } from 'svelte-tweakpane-ui';
84
+ * import { Blade } from 'svelte-tweakpane-ui'
85
85
  * </script>
86
86
  *
87
87
  * <Blade
88
88
  * options={{
89
- * view: 'separator'
89
+ * view: 'separator',
90
90
  * }}
91
91
  * />
92
92
  * ```
@@ -1,51 +1,51 @@
1
1
  <script>
2
- import ClsPad from '../internal/ClsPad.svelte';
3
- import InternalPaneInline from '../internal/InternalPaneInline.svelte';
4
- import { getElementIndex, isRootPane, updateCollapsibility } from '../utils.js';
5
- import { BROWSER } from 'esm-env';
6
- import { getContext, onDestroy, onMount, setContext } from 'svelte';
7
- import { writable } from 'svelte/store';
8
- export let title = 'Folder';
9
- export let disabled = false;
10
- export let expanded = true;
11
- export let userExpandable = true;
12
- export let theme = void 0;
13
- const parentStore = getContext('parentStore');
14
- const folderStore = writable();
15
- const userCreatedPane = getContext('userCreatedPane');
16
- let indexElement;
17
- let index;
18
- let folderRef = void 0;
19
- setContext('parentStore', folderStore);
2
+ import ClsPad from '../internal/ClsPad.svelte'
3
+ import InternalPaneInline from '../internal/InternalPaneInline.svelte'
4
+ import { getElementIndex, isRootPane, updateCollapsibility } from '../utils.js'
5
+ import { BROWSER } from 'esm-env'
6
+ import { getContext, onDestroy, onMount, setContext } from 'svelte'
7
+ import { writable } from 'svelte/store'
8
+ export let title = 'Folder'
9
+ export let disabled = false
10
+ export let expanded = true
11
+ export let userExpandable = true
12
+ export let theme = void 0
13
+ const parentStore = getContext('parentStore')
14
+ const folderStore = writable()
15
+ const userCreatedPane = getContext('userCreatedPane')
16
+ let indexElement
17
+ let index
18
+ let folderRef = void 0
19
+ setContext('parentStore', folderStore)
20
20
  function create() {
21
21
  $folderStore = $parentStore.addFolder({
22
22
  disabled,
23
23
  expanded,
24
24
  index,
25
- title
26
- });
25
+ title,
26
+ })
27
27
  $folderStore.on('fold', () => {
28
- expanded = $folderStore.expanded;
29
- });
30
- folderRef = $folderStore;
28
+ expanded = $folderStore.expanded
29
+ })
30
+ folderRef = $folderStore
31
31
  }
32
32
  onMount(() => {
33
- index = indexElement ? getElementIndex(indexElement) : 0;
34
- });
33
+ index = indexElement ? getElementIndex(indexElement) : 0
34
+ })
35
35
  onDestroy(() => {
36
- $folderStore?.dispose();
37
- });
38
- $: $parentStore && !folderRef && index !== void 0 && create();
39
- $: folderRef && updateCollapsibility(userExpandable, folderRef.element, 'tp-fldv_b', 'tp-fldv_m');
40
- $: folderRef && (folderRef.title = title);
41
- $: folderRef && (folderRef.disabled = disabled);
42
- $: folderRef && expanded !== void 0 && (folderRef.expanded = expanded);
36
+ $folderStore?.dispose()
37
+ })
38
+ $: $parentStore && !folderRef && index !== void 0 && create()
39
+ $: folderRef && updateCollapsibility(userExpandable, folderRef.element, 'tp-fldv_b', 'tp-fldv_m')
40
+ $: folderRef && (folderRef.title = title)
41
+ $: folderRef && (folderRef.disabled = disabled)
42
+ $: folderRef && expanded !== void 0 && (folderRef.expanded = expanded)
43
43
  $: theme &&
44
44
  $parentStore &&
45
45
  (userCreatedPane || !isRootPane($parentStore)) &&
46
46
  console.warn(
47
- 'Set theme on the <Pane> component, not on its children! (Check nested <Folder> components for a theme prop.)'
48
- );
47
+ 'Set theme on the <Pane> component, not on its children! (Check nested <Folder> components for a theme prop.)',
48
+ )
49
49
  </script>
50
50
 
51
51
  {#if parentStore}
@@ -1,5 +1,5 @@
1
- import { SvelteComponent } from 'svelte';
2
- import type { Theme } from '../theme.js';
1
+ import { SvelteComponent } from 'svelte'
2
+ import type { Theme } from '../theme.js'
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  /**
@@ -8,44 +8,44 @@ declare const __propDef: {
8
8
  * Unlike a `<Pane>`, a `<Folder>`'s title bar is always visible and the title is always shown.
9
9
  * It can be set to an empty string if you want an unadorned title bar.
10
10
  * @default `'Folder'`
11
- * */ title?: string;
11
+ * */ title?: string
12
12
  /**
13
13
  * Prevent interactivity and gray out the control.
14
14
  * @default `false`
15
- * */ disabled?: boolean;
15
+ * */ disabled?: boolean
16
16
  /**
17
17
  * Expand or collapse folder.
18
18
  *
19
19
  * When bound it will indicate whether the folder is expanded or collapsed.
20
20
  * @default `true`
21
21
  * @bindable
22
- * */ expanded?: boolean;
22
+ * */ expanded?: boolean
23
23
  /**
24
24
  * Allow the user to be collapse and expand the folder by clicking its title bar.
25
25
  * @default `true`
26
- * */ userExpandable?: boolean;
26
+ * */ userExpandable?: boolean
27
27
  /**
28
28
  * Custom color scheme.
29
29
  * @default `undefined` \
30
30
  * Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
31
31
  * set with `setGlobalDefaultTheme()`.
32
- * */ theme?: Theme | undefined;
33
- };
32
+ * */ theme?: Theme | undefined
33
+ }
34
34
  events: {
35
- [evt: string]: CustomEvent<any>;
36
- };
35
+ [evt: string]: CustomEvent<any>
36
+ }
37
37
  slots: {
38
38
  /**
39
39
  * Any Tweakpane component, except a `<Pane>`.
40
40
  */
41
- default: {};
42
- };
43
- exports?: {} | undefined;
44
- bindings?: string | undefined;
45
- };
46
- export type FolderProps = typeof __propDef.props;
47
- export type FolderEvents = typeof __propDef.events;
48
- export type FolderSlots = typeof __propDef.slots;
41
+ default: {}
42
+ }
43
+ exports?: {} | undefined
44
+ bindings?: string | undefined
45
+ }
46
+ export type FolderProps = typeof __propDef.props
47
+ export type FolderEvents = typeof __propDef.events
48
+ export type FolderSlots = typeof __propDef.slots
49
49
  /**
50
50
  * Organize multiple controls into a collapsable folder.
51
51
  *
@@ -59,10 +59,10 @@ export type FolderSlots = typeof __propDef.slots;
59
59
  * @example
60
60
  * ```svelte
61
61
  * <script lang="ts">
62
- * import { Button, Checkbox, Folder, Monitor } from 'svelte-tweakpane-ui';
62
+ * import { Button, Checkbox, Folder, Monitor } from 'svelte-tweakpane-ui'
63
63
  *
64
- * let expanded = true;
65
- * let count = 0;
64
+ * let expanded = true
65
+ * let count = 0
66
66
  * </script>
67
67
  *
68
68
  * <Folder bind:expanded title="Reticulation Management Folder">
@@ -77,4 +77,4 @@ export type FolderSlots = typeof __propDef.slots;
77
77
  * [Folder.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/core/Folder.svelte)
78
78
  */
79
79
  export default class Folder extends SvelteComponent<FolderProps, FolderEvents, FolderSlots> {}
80
- export {};
80
+ export {}