svelte-tweakpane-ui 1.2.6 → 1.2.7

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 (4) hide show
  1. package/dist/control/List.svelte +4 -1
  2. package/dist/core/Binding.svelte +8 -0
  3. package/package.json +6 -6
  4. package/readme.md +81 -1
package/dist/control/List.svelte CHANGED
@@ -53,7 +53,10 @@
53
53
  ? options2
54
54
  : isObjectStyleListOptions(options2)
55
55
  ? options2
56
- : options2.map((value2) => ({ value: value2, text: JSON.stringify(value2) }));
56
+ : options2.map((value2) => ({
57
+ value: value2,
58
+ text: typeof value2 === 'object' ? JSON.stringify(value2) : String(value2)
59
+ }));
57
60
  }
58
61
  function setValue() {
59
62
  if (!shallowEqual(listBlade.value, value)) {
package/dist/core/Binding.svelte CHANGED
@@ -44,9 +44,13 @@
44
44
  _ref?.dispose();
45
45
  });
46
46
  const dispatch = createEventDispatcher();
47
+ let lastObject = object;
47
48
  let lastValue = copy(object[key]);
48
49
  let internalChange = false;
49
50
  function onBoundValueChange(object2) {
51
+ if (lastObject !== object2) {
52
+ internalChange = false;
53
+ }
50
54
  if (!shallowEqual(object2[key], lastValue)) {
51
55
  lastValue = copy(object2[key]);
52
56
  dispatch('change', {
@@ -60,6 +64,10 @@
60
64
  }
61
65
  }
62
66
  internalChange = false;
67
+ if (lastObject !== object2) {
68
+ lastObject = object2;
69
+ create();
70
+ }
63
71
  }
64
72
  function onTweakpaneChange() {
65
73
  internalChange = true;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-tweakpane-ui",
3
- "version": "1.2.6",
3
+ "version": "1.2.7",
4
4
  "type": "module",
5
5
  "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
6
6
  "repository": {
@@ -200,24 +200,24 @@
200
200
  "tweakpane": "4.0.3"
201
201
  },
202
202
  "devDependencies": {
203
- "@kitschpatrol/shared-config": "^4.6.3",
203
+ "@kitschpatrol/shared-config": "^4.6.6",
204
204
  "@phenomnomnominal/tsquery": "^6.1.3",
205
205
  "@playwright/test": "^1.44.0",
206
206
  "@stkb/rewrap": "^0.1.0",
207
207
  "@sveltejs/adapter-static": "^3.0.1",
208
- "@sveltejs/kit": "^2.5.8",
208
+ "@sveltejs/kit": "^2.5.9",
209
209
  "@sveltejs/package": "^2.3.1",
210
210
  "@sveltejs/vite-plugin-svelte": "^3.1.0",
211
211
  "@types/eslint": "^8.56.10",
212
212
  "@types/fs-extra": "^11.0.4",
213
- "@types/node": "^20.12.11",
213
+ "@types/node": "^20.12.12",
214
214
  "bumpp": "^9.4.1",
215
215
  "eslint": "^8.57.0",
216
216
  "fs-extra": "^11.2.0",
217
217
  "glob": "^10.3.15",
218
218
  "npm-run-all": "^4.1.5",
219
219
  "postcss-html": "^1.7.0",
220
- "publint": "^0.2.7",
220
+ "publint": "^0.2.8",
221
221
  "read-package-up": "^11.0.0",
222
222
  "svelte": "^4.2.17",
223
223
  "svelte-check": "^3.7.1",
@@ -225,7 +225,7 @@
225
225
  "svelte2tsx": "^0.7.8",
226
226
  "ts-morph": "^22.0.0",
227
227
  "tslib": "^2.6.2",
228
- "tsx": "^4.10.2",
228
+ "tsx": "^4.10.5",
229
229
  "typescript": "^5.4.5",
230
230
  "vite": "^5.2.11",
231
231
  "yaml": "^2.4.2"
package/readme.md CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  ## Overview
37
37
 
38
- 🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of 31 idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
38
+ 🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of <!-- component-count -->31<!-- /component-count --> idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
39
39
 
40
40
  The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they were made for Svelte. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
41
41
 
@@ -68,6 +68,86 @@ npm install svelte-tweakpane-ui
68
68
  <Button on:click={() => alert('🎛️')} />
69
69
  ```
70
70
 
71
+ ## Components
72
+
73
+ <!-- component-list -->
74
+
75
+ ### Core
76
+
77
+ - **[Binding](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/binding)**\
78
+ Wraps the Tweakpane [`addBinding`](https://tweakpane.github.io/docs/input-bindings/) method.
79
+ - **[Blade](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/blade)**\
80
+ Wraps the Tweakpane [`addBlade`](https://tweakpane.github.io/docs/blades/) method.
81
+ - **[Folder](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/folder)**\
82
+ Organize multiple controls into a collapsable folder.
83
+ - **[Pane](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/pane)**\
84
+ The root `<Pane>` component, used for organizing controls into a single group and controlling how and where the Tweakpane is displayed.
85
+ - **[Separator](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/separator)**\
86
+ A convenience component providing a subtle visual separator between controls, in the spirit of the HTML `<hr>` element.
87
+ - **[TabGroup](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/tabgroup)**\
88
+ Contains a collection of `<TabPage>` components to be presented as a tabs.
89
+ - **[TabPage](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/tabpage)**\
90
+ Contains a collection of Tweakpane controls to be presented as a single group inside a `<TabGroup>` component.
91
+
92
+ ### Control
93
+
94
+ - **[Button](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/button)**\
95
+ A humble but effective push button.
96
+ - **[ButtonGrid](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/buttongrid)**\
97
+ A grid of `<Button>` components.
98
+ - **[Checkbox](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/checkbox)**\
99
+ A checkbox.
100
+ - **[Color](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/color)**\
101
+ A color picker.
102
+ - **[CubicBezier](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/cubicbezier)**\
103
+ A control for editing a bezier curve. Ideal for tweaking animation easing values.
104
+ - **[Image](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/image)**\
105
+ An image input control.
106
+ - **[IntervalSlider](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/intervalslider)**\
107
+ A twin-handled slider control for specifying range values.
108
+ - **[List](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/list)**\
109
+ An option list picker, similar to an HTML `<select>` element.
110
+ - **[Point](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/point)**\
111
+ Wraps the Tweakpane [point bindings](https://tweakpane.github.io/docs/input-bindings/#point).
112
+ - **[RadioGrid](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/radiogrid)**\
113
+ A grid of radio buttons.
114
+ - **[Ring](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/ring)**\
115
+ A control evoking the focus ring on a proper camera lens.
116
+ - **[RotationEuler](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/rotationeuler)**\
117
+ Integrates the [euler rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginEuler.ts) control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
118
+ - **[RotationQuaternion](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/rotationquaternion)**\
119
+ Integrates the [quaternion rotation](https://github.com/0b5vr/tweakpane-plugin-rotation/blob/dev/src/RotationInputPluginQuaternion.ts) control from [0b5vr](https://0b5vr.com)'s [tweakpane-plugin-rotation](https://github.com/0b5vr/tweakpane-plugin-rotation).
120
+ - **[Slider](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/slider)**\
121
+ A slider component providing fine-grained control over numeric values.
122
+ - **[Text](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/text)**\
123
+ A text field, in the spirit of the HTML `<input type="text">` element.
124
+ - **[Textarea](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/textarea)**\
125
+ A multi-line text input field, in the spirit of the HTML `<textarea>` element.
126
+ - **[Wheel](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/wheel)**\
127
+ A control evoking a dial on a proper camera body.
128
+
129
+ ### Monitor
130
+
131
+ - **[FpsGraph](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/fpsgraph)**\
132
+ A control for monitoring and graphing frame rates over time.
133
+ - **[Monitor](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/monitor)**\
134
+ Wraps the Tweakpane [monitor binding](https://tweakpane.github.io/docs/monitor-bindings/) functionality for `boolean`, `number`, and `string` values.
135
+ - **[Profiler](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/profiler)**\
136
+ Measure and visualize multiple quantities over time.
137
+ - **[WaveformMonitor](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/waveformmonitor)**\
138
+ Visualize multiple numeric values as a waveform.
139
+
140
+ ### Extra
141
+
142
+ - **[AutoObject](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/autoobject)**\
143
+ Rapid-development component which automatically creates a set of Tweakpane controls for an arbitrary object.
144
+ - **[AutoValue](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/autovalue)**\
145
+ Rapid-development component which automatically creates a Tweakpane control for an arbitrary value.
146
+ - **[Element](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/element)**\
147
+ A component for embedding arbitrary HTML elements into a pane.
148
+
149
+ <!-- /component-list -->
150
+
71
151
  ## Maintainers
72
152
 
73
153
  [@kitschpatrol](https://github.com/kitschpatrol)