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.
- package/dist/control/Button.svelte +30 -30
- package/dist/control/Button.svelte.d.ts +18 -18
- package/dist/control/ButtonGrid.svelte +25 -25
- package/dist/control/ButtonGrid.svelte.d.ts +35 -35
- package/dist/control/Checkbox.svelte +2 -2
- package/dist/control/Checkbox.svelte.d.ts +23 -23
- package/dist/control/Color.svelte +34 -34
- package/dist/control/Color.svelte.d.ts +40 -40
- package/dist/control/CubicBezier.svelte +30 -30
- package/dist/control/CubicBezier.svelte.d.ts +47 -47
- package/dist/control/File.svelte +20 -20
- package/dist/control/File.svelte.d.ts +38 -38
- package/dist/control/Image.svelte +22 -22
- package/dist/control/Image.svelte.d.ts +31 -31
- package/dist/control/IntervalSlider.svelte +24 -24
- package/dist/control/IntervalSlider.svelte.d.ts +39 -39
- package/dist/control/List.svelte +35 -35
- package/dist/control/List.svelte.d.ts +31 -31
- package/dist/control/Point.svelte +31 -31
- package/dist/control/Point.svelte.d.ts +81 -81
- package/dist/control/RadioGrid.svelte +24 -24
- package/dist/control/RadioGrid.svelte.d.ts +40 -40
- package/dist/control/Ring.svelte +9 -9
- package/dist/control/Ring.svelte.d.ts +40 -40
- package/dist/control/RotationEuler.svelte +25 -25
- package/dist/control/RotationEuler.svelte.d.ts +53 -53
- package/dist/control/RotationQuaternion.svelte +24 -24
- package/dist/control/RotationQuaternion.svelte.d.ts +47 -47
- package/dist/control/Slider.svelte +9 -9
- package/dist/control/Slider.svelte.d.ts +32 -32
- package/dist/control/Stepper.svelte +16 -16
- package/dist/control/Stepper.svelte.d.ts +32 -32
- package/dist/control/Text.svelte +13 -13
- package/dist/control/Text.svelte.d.ts +26 -26
- package/dist/control/Textarea.svelte +34 -34
- package/dist/control/Textarea.svelte.d.ts +29 -29
- package/dist/control/Wheel.svelte +8 -8
- package/dist/control/Wheel.svelte.d.ts +32 -32
- package/dist/core/Binding.svelte +60 -60
- package/dist/core/Binding.svelte.d.ts +33 -33
- package/dist/core/Blade.svelte +30 -30
- package/dist/core/Blade.svelte.d.ts +21 -21
- package/dist/core/Folder.svelte +34 -34
- package/dist/core/Folder.svelte.d.ts +22 -22
- package/dist/core/Pane.svelte +17 -17
- package/dist/core/Pane.svelte.d.ts +56 -56
- package/dist/core/Separator.svelte +5 -5
- package/dist/core/Separator.svelte.d.ts +20 -20
- package/dist/core/TabGroup.svelte +29 -29
- package/dist/core/TabGroup.svelte.d.ts +18 -18
- package/dist/core/TabPage.svelte +36 -36
- package/dist/core/TabPage.svelte.d.ts +21 -21
- package/dist/extra/AutoObject.svelte +20 -20
- package/dist/extra/AutoObject.svelte.d.ts +22 -22
- package/dist/extra/AutoValue.svelte +3 -3
- package/dist/extra/AutoValue.svelte.d.ts +26 -26
- package/dist/extra/Element.svelte +10 -10
- package/dist/extra/Element.svelte.d.ts +26 -26
- package/dist/index.d.ts +48 -48
- package/dist/index.js +35 -35
- package/dist/internal/ClsPad.svelte +11 -11
- package/dist/internal/ClsPad.svelte.d.ts +17 -17
- package/dist/internal/GenericBinding.svelte +11 -11
- package/dist/internal/GenericBinding.svelte.d.ts +25 -25
- package/dist/internal/GenericBladeFolding.svelte +19 -19
- package/dist/internal/GenericBladeFolding.svelte.d.ts +20 -20
- package/dist/internal/GenericInput.svelte +7 -7
- package/dist/internal/GenericInput.svelte.d.ts +27 -27
- package/dist/internal/GenericInputFolding.svelte +21 -21
- package/dist/internal/GenericInputFolding.svelte.d.ts +32 -32
- package/dist/internal/GenericMonitor.svelte +10 -10
- package/dist/internal/GenericMonitor.svelte.d.ts +29 -29
- package/dist/internal/GenericPane.svelte +48 -48
- package/dist/internal/GenericPane.svelte.d.ts +22 -22
- package/dist/internal/GenericSlider.svelte +15 -15
- package/dist/internal/GenericSlider.svelte.d.ts +29 -29
- package/dist/internal/InternalMonitorBoolean.svelte +5 -5
- package/dist/internal/InternalMonitorBoolean.svelte.d.ts +31 -31
- package/dist/internal/InternalMonitorNumber.svelte +14 -14
- package/dist/internal/InternalMonitorNumber.svelte.d.ts +37 -37
- package/dist/internal/InternalMonitorString.svelte +9 -9
- package/dist/internal/InternalMonitorString.svelte.d.ts +32 -32
- package/dist/internal/InternalPaneDraggable.svelte +169 -173
- package/dist/internal/InternalPaneDraggable.svelte.d.ts +30 -30
- package/dist/internal/InternalPaneFixed.svelte +13 -13
- package/dist/internal/InternalPaneFixed.svelte.d.ts +23 -23
- package/dist/internal/InternalPaneInline.svelte +14 -14
- package/dist/internal/InternalPaneInline.svelte.d.ts +21 -21
- package/dist/monitor/FpsGraph.svelte +35 -35
- package/dist/monitor/FpsGraph.svelte.d.ts +50 -42
- package/dist/monitor/Monitor.svelte +4 -4
- package/dist/monitor/Monitor.svelte.d.ts +87 -88
- package/dist/monitor/Profiler.svelte +37 -37
- package/dist/monitor/Profiler.svelte.d.ts +78 -76
- package/dist/monitor/WaveformMonitor.svelte +12 -12
- package/dist/monitor/WaveformMonitor.svelte.d.ts +39 -39
- package/dist/theme.d.ts +61 -61
- package/dist/theme.js +49 -53
- package/dist/utils.d.ts +62 -66
- package/dist/utils.js +78 -78
- package/license.txt +1 -1
- package/package.json +100 -115
- package/readme.md +1 -1
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { SvelteComponent } from 'svelte'
|
|
2
|
-
import type { Simplify } from '../utils'
|
|
3
|
-
import type { ValueChangeEvent } from '../utils.js'
|
|
1
|
+
import { SvelteComponent } from 'svelte'
|
|
2
|
+
import type { Simplify } from '../utils'
|
|
3
|
+
import type { ValueChangeEvent } from '../utils.js'
|
|
4
4
|
import type {
|
|
5
5
|
RgbaColorObject,
|
|
6
|
-
RgbColorObject
|
|
7
|
-
} from '@tweakpane/core/dist/input-binding/color/model/color.js'
|
|
8
|
-
export type ColorValueRgbTuple = [r: number, g: number, b: number]
|
|
9
|
-
export type ColorValueRgbaTuple = [r: number, g: number, b: number, a: number]
|
|
10
|
-
export type ColorValueRgbObject = Simplify<RgbColorObject
|
|
11
|
-
export type ColorValueRgbaObject = Simplify<RgbaColorObject
|
|
12
|
-
export type ColorValueString = string
|
|
6
|
+
RgbColorObject,
|
|
7
|
+
} from '@tweakpane/core/dist/input-binding/color/model/color.js'
|
|
8
|
+
export type ColorValueRgbTuple = [r: number, g: number, b: number]
|
|
9
|
+
export type ColorValueRgbaTuple = [r: number, g: number, b: number, a: number]
|
|
10
|
+
export type ColorValueRgbObject = Simplify<RgbColorObject>
|
|
11
|
+
export type ColorValueRgbaObject = Simplify<RgbaColorObject>
|
|
12
|
+
export type ColorValueString = string
|
|
13
13
|
export type ColorValue = Simplify<
|
|
14
14
|
| ColorValueRgbaObject
|
|
15
15
|
| ColorValueRgbaTuple
|
|
16
16
|
| ColorValueRgbObject
|
|
17
17
|
| ColorValueRgbTuple
|
|
18
18
|
| ColorValueString
|
|
19
|
-
|
|
20
|
-
export type ColorChangeEvent = ValueChangeEvent<ColorValue
|
|
21
|
-
import type { ColorInputParams as ColorOptions } from 'tweakpane'
|
|
19
|
+
>
|
|
20
|
+
export type ColorChangeEvent = ValueChangeEvent<ColorValue>
|
|
21
|
+
import type { ColorInputParams as ColorOptions } from 'tweakpane'
|
|
22
22
|
declare const __propDef: {
|
|
23
23
|
props: {
|
|
24
24
|
/**
|
|
@@ -28,35 +28,35 @@ declare const __propDef: {
|
|
|
28
28
|
* optional `a` keys.
|
|
29
29
|
* @bindable
|
|
30
30
|
* */
|
|
31
|
-
value: ColorValue
|
|
31
|
+
value: ColorValue
|
|
32
32
|
/**
|
|
33
33
|
* Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
|
|
34
34
|
* @default `'int'`
|
|
35
35
|
* */
|
|
36
|
-
type?: 'float' | 'int'
|
|
36
|
+
type?: 'float' | 'int'
|
|
37
37
|
} & Omit<
|
|
38
38
|
{
|
|
39
39
|
/**
|
|
40
40
|
* DOM class name of the button used to expand and collapse the input's picker.
|
|
41
41
|
* @default `undefined`
|
|
42
42
|
*/
|
|
43
|
-
buttonClass?: string
|
|
43
|
+
buttonClass?: string
|
|
44
44
|
/**
|
|
45
45
|
* Expand or collapse the input's picker.
|
|
46
46
|
* @default `false`
|
|
47
47
|
* @bindable
|
|
48
48
|
*/
|
|
49
|
-
expanded?: boolean
|
|
49
|
+
expanded?: boolean
|
|
50
50
|
/**
|
|
51
51
|
* The style of value "picker" to use in the input.
|
|
52
52
|
* @default `'popup'`
|
|
53
53
|
*/
|
|
54
|
-
picker?: 'inline' | 'popup'
|
|
54
|
+
picker?: 'inline' | 'popup'
|
|
55
55
|
/**
|
|
56
56
|
* Allow users to interactively expand / contract the picker.
|
|
57
57
|
* @default `true`
|
|
58
58
|
*/
|
|
59
|
-
userExpandable?: boolean
|
|
59
|
+
userExpandable?: boolean
|
|
60
60
|
} & {
|
|
61
61
|
/**
|
|
62
62
|
* A color value to control.
|
|
@@ -65,26 +65,26 @@ declare const __propDef: {
|
|
|
65
65
|
* optional `a` keys.
|
|
66
66
|
* @bindable
|
|
67
67
|
*/
|
|
68
|
-
value: ColorValue
|
|
68
|
+
value: ColorValue
|
|
69
69
|
} & Omit<
|
|
70
70
|
{
|
|
71
71
|
/**
|
|
72
72
|
* The binding's target object with values to manipulate.
|
|
73
73
|
* @bindable
|
|
74
74
|
*/
|
|
75
|
-
object: import('@tweakpane/core').Bindable & Record<string, ColorValue
|
|
75
|
+
object: import('@tweakpane/core').Bindable & Record<string, ColorValue>
|
|
76
76
|
/** The key for the value in the target `object` that the control should manipulate. */
|
|
77
|
-
key: string
|
|
77
|
+
key: string
|
|
78
78
|
/**
|
|
79
79
|
* Prevent interactivity and gray out the control.
|
|
80
80
|
* @default `false`
|
|
81
81
|
*/
|
|
82
|
-
disabled?: boolean
|
|
82
|
+
disabled?: boolean
|
|
83
83
|
/**
|
|
84
84
|
* Text displayed next to control.
|
|
85
85
|
* @default `undefined`
|
|
86
86
|
*/
|
|
87
|
-
label?: string | undefined
|
|
87
|
+
label?: string | undefined
|
|
88
88
|
/**
|
|
89
89
|
* Tweakpane's internal options object.
|
|
90
90
|
*
|
|
@@ -97,7 +97,7 @@ declare const __propDef: {
|
|
|
97
97
|
* Tweakpane UI_.
|
|
98
98
|
* @default `undefined`
|
|
99
99
|
*/
|
|
100
|
-
options?: ColorOptions | undefined
|
|
100
|
+
options?: ColorOptions | undefined
|
|
101
101
|
/**
|
|
102
102
|
* Custom color scheme.
|
|
103
103
|
*
|
|
@@ -105,7 +105,7 @@ declare const __propDef: {
|
|
|
105
105
|
* Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
|
|
106
106
|
* set with `setGlobalDefaultTheme()`.
|
|
107
107
|
*/
|
|
108
|
-
theme?: import('..').Theme | undefined
|
|
108
|
+
theme?: import('..').Theme | undefined
|
|
109
109
|
/**
|
|
110
110
|
* Reference to internal Tweakpane
|
|
111
111
|
* [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
|
|
@@ -119,7 +119,7 @@ declare const __propDef: {
|
|
|
119
119
|
* @bindable
|
|
120
120
|
* @readonly
|
|
121
121
|
*/
|
|
122
|
-
ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
|
|
122
|
+
ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
|
|
123
123
|
/**
|
|
124
124
|
* Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
|
|
125
125
|
* the `<Binding>`'s containing `<Pane>`.
|
|
@@ -131,13 +131,13 @@ declare const __propDef: {
|
|
|
131
131
|
*
|
|
132
132
|
* @default `undefined`
|
|
133
133
|
*/
|
|
134
|
-
plugin?: import('../utils').Plugin | undefined
|
|
134
|
+
plugin?: import('../utils').Plugin | undefined
|
|
135
135
|
},
|
|
136
136
|
'object' | 'key'
|
|
137
137
|
>,
|
|
138
138
|
'ref' | 'options' | 'plugin' | 'buttonClass'
|
|
139
|
-
|
|
140
|
-
slots: {}
|
|
139
|
+
>
|
|
140
|
+
slots: {}
|
|
141
141
|
events: {
|
|
142
142
|
/**
|
|
143
143
|
* Fires when `value` changes.
|
|
@@ -150,12 +150,12 @@ declare const __propDef: {
|
|
|
150
150
|
* @extends ValueChangeEvent
|
|
151
151
|
* @event
|
|
152
152
|
* */
|
|
153
|
-
change: ColorChangeEvent
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
export type ColorProps = typeof __propDef.props
|
|
157
|
-
export type ColorEvents = typeof __propDef.events
|
|
158
|
-
export type ColorSlots = typeof __propDef.slots
|
|
153
|
+
change: ColorChangeEvent
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
export type ColorProps = typeof __propDef.props
|
|
157
|
+
export type ColorEvents = typeof __propDef.events
|
|
158
|
+
export type ColorSlots = typeof __propDef.slots
|
|
159
159
|
/**
|
|
160
160
|
* A color picker.
|
|
161
161
|
*
|
|
@@ -169,10 +169,10 @@ export type ColorSlots = typeof __propDef.slots;
|
|
|
169
169
|
* @example
|
|
170
170
|
* ```svelte
|
|
171
171
|
* <script lang="ts">
|
|
172
|
-
* import { Color } from 'svelte-tweakpane-ui'
|
|
172
|
+
* import { Color } from 'svelte-tweakpane-ui'
|
|
173
173
|
*
|
|
174
|
-
* let startColor = '#fff000'
|
|
175
|
-
* let endColor = '#ff00ff'
|
|
174
|
+
* let startColor = '#fff000'
|
|
175
|
+
* let endColor = '#ff00ff'
|
|
176
176
|
* </script>
|
|
177
177
|
*
|
|
178
178
|
* <Color bind:value={startColor} label="Start Color" />
|
|
@@ -193,4 +193,4 @@ export type ColorSlots = typeof __propDef.slots;
|
|
|
193
193
|
* [Color.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Color.svelte)
|
|
194
194
|
*/
|
|
195
195
|
export default class Color extends SvelteComponent<ColorProps, ColorEvents, ColorSlots> {}
|
|
196
|
-
export {}
|
|
196
|
+
export {}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>
|
|
4
|
-
import ClsPad from '../internal/ClsPad.svelte'
|
|
5
|
-
import GenericBladeFolding from '../internal/GenericBladeFolding.svelte'
|
|
6
|
-
import { fillWith } from '../utils'
|
|
7
|
-
import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials'
|
|
8
|
-
import { CubicBezier } from '@kitschpatrol/tweakpane-plugin-essentials'
|
|
9
|
-
import { BROWSER } from 'esm-env'
|
|
10
|
-
import copy from 'fast-copy'
|
|
11
|
-
import { shallowEqual } from 'fast-equals'
|
|
12
|
-
import { createEventDispatcher } from 'svelte'
|
|
13
|
-
export let value
|
|
14
|
-
export let label = void 0
|
|
15
|
-
export let expanded = void 0
|
|
16
|
-
const dispatch = createEventDispatcher()
|
|
17
|
-
let options
|
|
18
|
-
let cubicBezierBlade
|
|
19
|
-
const buttonClass = 'tp-cbzv_b'
|
|
4
|
+
import ClsPad from '../internal/ClsPad.svelte'
|
|
5
|
+
import GenericBladeFolding from '../internal/GenericBladeFolding.svelte'
|
|
6
|
+
import { fillWith } from '../utils'
|
|
7
|
+
import * as pluginModule from '@kitschpatrol/tweakpane-plugin-essentials'
|
|
8
|
+
import { CubicBezier } from '@kitschpatrol/tweakpane-plugin-essentials'
|
|
9
|
+
import { BROWSER } from 'esm-env'
|
|
10
|
+
import copy from 'fast-copy'
|
|
11
|
+
import { shallowEqual } from 'fast-equals'
|
|
12
|
+
import { createEventDispatcher } from 'svelte'
|
|
13
|
+
export let value
|
|
14
|
+
export let label = void 0
|
|
15
|
+
export let expanded = void 0
|
|
16
|
+
const dispatch = createEventDispatcher()
|
|
17
|
+
let options
|
|
18
|
+
let cubicBezierBlade
|
|
19
|
+
const buttonClass = 'tp-cbzv_b'
|
|
20
20
|
function getValue() {
|
|
21
|
-
return Array.isArray(value) ? value : [value.x1, value.y1, value.x2, value.y2]
|
|
21
|
+
return Array.isArray(value) ? value : [value.x1, value.y1, value.x2, value.y2]
|
|
22
22
|
}
|
|
23
23
|
function setValue() {
|
|
24
24
|
if (
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
cubicBezierBlade.value.x1,
|
|
27
27
|
cubicBezierBlade.value.y1,
|
|
28
28
|
cubicBezierBlade.value.x2,
|
|
29
|
-
cubicBezierBlade.value.y2
|
|
29
|
+
cubicBezierBlade.value.y2,
|
|
30
30
|
])
|
|
31
31
|
) {
|
|
32
32
|
cubicBezierBlade.value = Array.isArray(value)
|
|
33
33
|
? new CubicBezier(value[0], value[1], value[2], value[3])
|
|
34
|
-
: new CubicBezier(value.x1, value.y1, value.x2, value.y2)
|
|
34
|
+
: new CubicBezier(value.x1, value.y1, value.x2, value.y2)
|
|
35
35
|
dispatch('change', {
|
|
36
36
|
value: copy(value),
|
|
37
|
-
origin: 'external'
|
|
38
|
-
})
|
|
37
|
+
origin: 'external',
|
|
38
|
+
})
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
function addEvent() {
|
|
@@ -49,22 +49,22 @@
|
|
|
49
49
|
x1: event.value.x1,
|
|
50
50
|
y1: event.value.y1,
|
|
51
51
|
x2: event.value.x2,
|
|
52
|
-
y2: event.value.y2
|
|
53
|
-
}
|
|
52
|
+
y2: event.value.y2,
|
|
53
|
+
}
|
|
54
54
|
dispatch('change', {
|
|
55
55
|
value: copy(value),
|
|
56
|
-
origin: 'internal'
|
|
57
|
-
})
|
|
56
|
+
origin: 'internal',
|
|
57
|
+
})
|
|
58
58
|
}
|
|
59
|
-
})
|
|
59
|
+
})
|
|
60
60
|
}
|
|
61
61
|
$: options = {
|
|
62
62
|
value: getValue(),
|
|
63
63
|
label,
|
|
64
|
-
view: 'cubicbezier'
|
|
65
|
-
}
|
|
66
|
-
$: cubicBezierBlade && addEvent()
|
|
67
|
-
$: value, cubicBezierBlade && setValue()
|
|
64
|
+
view: 'cubicbezier',
|
|
65
|
+
}
|
|
66
|
+
$: cubicBezierBlade && addEvent()
|
|
67
|
+
$: value, cubicBezierBlade && setValue()
|
|
68
68
|
</script>
|
|
69
69
|
|
|
70
70
|
<GenericBladeFolding
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { SvelteComponent } from 'svelte'
|
|
2
|
-
import type { Simplify } from '../utils'
|
|
3
|
-
import type { ValueChangeEvent } from '../utils.js'
|
|
1
|
+
import { SvelteComponent } from 'svelte'
|
|
2
|
+
import type { Simplify } from '../utils'
|
|
3
|
+
import type { ValueChangeEvent } from '../utils.js'
|
|
4
4
|
export type CubicBezierValueObject = {
|
|
5
|
-
x1: number
|
|
6
|
-
y1: number
|
|
7
|
-
x2: number
|
|
8
|
-
y2: number
|
|
9
|
-
}
|
|
10
|
-
export type CubicBezierValueTuple = [x1: number, y1: number, x2: number, y2: number]
|
|
11
|
-
export type CubicBezierValue = Simplify<CubicBezierValueObject | CubicBezierValueTuple
|
|
12
|
-
export type CubicBezierChangeEvent = ValueChangeEvent<CubicBezierValue
|
|
13
|
-
import type { CubicBezierApi as CubicBezierRef } from '@kitschpatrol/tweakpane-plugin-essentials'
|
|
14
|
-
import type { CubicBezierBladeParams as CubicBezierOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/cubic-bezier/plugin.d.ts'
|
|
5
|
+
x1: number
|
|
6
|
+
y1: number
|
|
7
|
+
x2: number
|
|
8
|
+
y2: number
|
|
9
|
+
}
|
|
10
|
+
export type CubicBezierValueTuple = [x1: number, y1: number, x2: number, y2: number]
|
|
11
|
+
export type CubicBezierValue = Simplify<CubicBezierValueObject | CubicBezierValueTuple>
|
|
12
|
+
export type CubicBezierChangeEvent = ValueChangeEvent<CubicBezierValue>
|
|
13
|
+
import type { CubicBezierApi as CubicBezierRef } from '@kitschpatrol/tweakpane-plugin-essentials'
|
|
14
|
+
import type { CubicBezierBladeParams as CubicBezierOptions } from '@kitschpatrol/tweakpane-plugin-essentials/dist/types/cubic-bezier/plugin.d.ts'
|
|
15
15
|
declare const __propDef: {
|
|
16
16
|
props: {
|
|
17
17
|
/**
|
|
@@ -21,56 +21,56 @@ declare const __propDef: {
|
|
|
21
21
|
* original `@tweakpane/plugin-essentials` API.
|
|
22
22
|
* @bindable
|
|
23
23
|
*/
|
|
24
|
-
value: CubicBezierValue
|
|
24
|
+
value: CubicBezierValue
|
|
25
25
|
/**
|
|
26
26
|
* Text displayed next to the control.
|
|
27
27
|
* @default `undefined`
|
|
28
28
|
* */
|
|
29
|
-
label?: string
|
|
29
|
+
label?: string
|
|
30
30
|
} & Omit<
|
|
31
31
|
{
|
|
32
32
|
/**
|
|
33
33
|
* DOM class name of the button used to expand and collapse the blade's picker.
|
|
34
34
|
* @default `undefined`
|
|
35
35
|
*/
|
|
36
|
-
buttonClass?: string
|
|
36
|
+
buttonClass?: string
|
|
37
37
|
/**
|
|
38
38
|
* Expand or collapse the blade's picker.
|
|
39
39
|
* @default `true`
|
|
40
40
|
* @bindable
|
|
41
41
|
*/
|
|
42
|
-
expanded?: boolean
|
|
42
|
+
expanded?: boolean
|
|
43
43
|
/**
|
|
44
44
|
* The style of value "picker" to use in the blade.
|
|
45
45
|
* @default `'popup'`
|
|
46
46
|
*/
|
|
47
|
-
picker?: 'inline' | 'popup'
|
|
47
|
+
picker?: 'inline' | 'popup'
|
|
48
48
|
/**
|
|
49
49
|
* Allow users to interactively expand / contract the value picker by clicking its icon.
|
|
50
50
|
*
|
|
51
51
|
* Most useful when `picker` is `inline`.
|
|
52
52
|
* @default `true`
|
|
53
53
|
*/
|
|
54
|
-
userExpandable?: boolean
|
|
54
|
+
userExpandable?: boolean
|
|
55
55
|
} & {
|
|
56
56
|
/**
|
|
57
57
|
* Blade configuration exposing Tweakpane's internal
|
|
58
58
|
* [`BladeParams`](https://tweakpane.github.io/docs/api/interfaces/BaseBladeParams.html).
|
|
59
59
|
*
|
|
60
60
|
*/
|
|
61
|
-
options: CubicBezierOptions
|
|
61
|
+
options: CubicBezierOptions
|
|
62
62
|
/**
|
|
63
63
|
* Prevent interactivity and gray out the control.
|
|
64
64
|
* @default `false`
|
|
65
65
|
*/
|
|
66
|
-
disabled?: boolean
|
|
66
|
+
disabled?: boolean
|
|
67
67
|
/**
|
|
68
68
|
* Custom color scheme.
|
|
69
69
|
* @default `undefined` \
|
|
70
70
|
* Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
|
|
71
71
|
* set with `setGlobalDefaultTheme()`.
|
|
72
72
|
*/
|
|
73
|
-
theme?: import('..').Theme | undefined
|
|
73
|
+
theme?: import('..').Theme | undefined
|
|
74
74
|
/**
|
|
75
75
|
* Reference to internal Tweakpane
|
|
76
76
|
* [`BladeApi`](https://tweakpane.github.io/docs/api/classes/BladeApi.html) for this blade.
|
|
@@ -83,7 +83,7 @@ declare const __propDef: {
|
|
|
83
83
|
* @bindable
|
|
84
84
|
* @readonly
|
|
85
85
|
*/
|
|
86
|
-
ref?: CubicBezierRef | undefined
|
|
86
|
+
ref?: CubicBezierRef | undefined
|
|
87
87
|
/**
|
|
88
88
|
* Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
|
|
89
89
|
* the `<Blade>`'s containing `<Pane>`.
|
|
@@ -95,11 +95,11 @@ declare const __propDef: {
|
|
|
95
95
|
*
|
|
96
96
|
* @default `undefined`
|
|
97
97
|
*/
|
|
98
|
-
plugin?: import('../utils').Plugin | undefined
|
|
98
|
+
plugin?: import('../utils').Plugin | undefined
|
|
99
99
|
},
|
|
100
100
|
'ref' | 'options' | 'plugin' | 'buttonClass'
|
|
101
|
-
|
|
102
|
-
slots: {}
|
|
101
|
+
>
|
|
102
|
+
slots: {}
|
|
103
103
|
events: {
|
|
104
104
|
/**
|
|
105
105
|
* Fires when `value` changes.
|
|
@@ -112,12 +112,12 @@ declare const __propDef: {
|
|
|
112
112
|
* @extends ValueChangeEvent
|
|
113
113
|
* @event
|
|
114
114
|
* */
|
|
115
|
-
change: CubicBezierChangeEvent
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
export type CubicBezierProps = typeof __propDef.props
|
|
119
|
-
export type CubicBezierEvents = typeof __propDef.events
|
|
120
|
-
export type CubicBezierSlots = typeof __propDef.slots
|
|
115
|
+
change: CubicBezierChangeEvent
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
export type CubicBezierProps = typeof __propDef.props
|
|
119
|
+
export type CubicBezierEvents = typeof __propDef.events
|
|
120
|
+
export type CubicBezierSlots = typeof __propDef.slots
|
|
121
121
|
/**
|
|
122
122
|
* A control for editing a bezier curve. Ideal for tweaking animation easing values.
|
|
123
123
|
*
|
|
@@ -149,34 +149,34 @@ export type CubicBezierSlots = typeof __propDef.slots;
|
|
|
149
149
|
* type CubicBezierValue,
|
|
150
150
|
* RadioGrid,
|
|
151
151
|
* Slider,
|
|
152
|
-
* Utils
|
|
153
|
-
* } from 'svelte-tweakpane-ui'
|
|
154
|
-
* import { tweened } from 'svelte/motion'
|
|
152
|
+
* Utils,
|
|
153
|
+
* } from 'svelte-tweakpane-ui'
|
|
154
|
+
* import { tweened } from 'svelte/motion'
|
|
155
155
|
*
|
|
156
156
|
* // could also be a tuple
|
|
157
157
|
* let value: CubicBezierValue = {
|
|
158
158
|
* x1: 0.25,
|
|
159
159
|
* y1: 0.1,
|
|
160
160
|
* x2: 0.25,
|
|
161
|
-
* y2: 1
|
|
162
|
-
* }
|
|
163
|
-
* let duration = 1000
|
|
164
|
-
* let moods = ['Set', 'Rise']
|
|
165
|
-
* let mood: string = moods[0]
|
|
161
|
+
* y2: 1,
|
|
162
|
+
* }
|
|
163
|
+
* let duration = 1000
|
|
164
|
+
* let moods = ['Set', 'Rise']
|
|
165
|
+
* let mood: string = moods[0]
|
|
166
166
|
*
|
|
167
|
-
* const positionTween = tweened(0)
|
|
167
|
+
* const positionTween = tweened(0)
|
|
168
168
|
*
|
|
169
169
|
* function lerp(value: number, low: number, high: number): number {
|
|
170
|
-
* return (1 - value) * low + value * high
|
|
170
|
+
* return (1 - value) * low + value * high
|
|
171
171
|
* }
|
|
172
172
|
*
|
|
173
173
|
* $: positionTween.set(mood === 'Set' ? 0 : 1, {
|
|
174
174
|
* duration,
|
|
175
|
-
* easing: Utils.cubicBezierToEaseFunction(value)
|
|
176
|
-
* })
|
|
175
|
+
* easing: Utils.cubicBezierToEaseFunction(value),
|
|
176
|
+
* })
|
|
177
177
|
*
|
|
178
|
-
* $: celestialHeight = lerp($positionTween, 20, 80)
|
|
179
|
-
* $: twilightAmount = lerp($positionTween, 20, -80)
|
|
178
|
+
* $: celestialHeight = lerp($positionTween, 20, 80)
|
|
179
|
+
* $: twilightAmount = lerp($positionTween, 20, -80)
|
|
180
180
|
* </script>
|
|
181
181
|
*
|
|
182
182
|
* <CubicBezier bind:value expanded={true} picker="inline" />
|
|
@@ -224,4 +224,4 @@ export default class CubicBezier extends SvelteComponent<
|
|
|
224
224
|
CubicBezierEvents,
|
|
225
225
|
CubicBezierSlots
|
|
226
226
|
> {}
|
|
227
|
-
export {}
|
|
227
|
+
export {}
|
package/dist/control/File.svelte
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
<script context="module"></script>
|
|
2
2
|
|
|
3
3
|
<script>
|
|
4
|
-
import ClsPad from '../internal/ClsPad.svelte'
|
|
5
|
-
import GenericInput from '../internal/GenericInput.svelte'
|
|
6
|
-
import { fillWith } from '../utils'
|
|
7
|
-
import * as pluginModule from '@kitschpatrol/tweakpane-plugin-file-import'
|
|
8
|
-
import { BROWSER } from 'esm-env'
|
|
9
|
-
import { shallowEqual } from 'fast-equals'
|
|
10
|
-
export let value = void 0
|
|
11
|
-
export let rows = void 0
|
|
12
|
-
export let invalidExtensionMessage = void 0
|
|
13
|
-
export let extensions = void 0
|
|
14
|
-
let internalValue
|
|
4
|
+
import ClsPad from '../internal/ClsPad.svelte'
|
|
5
|
+
import GenericInput from '../internal/GenericInput.svelte'
|
|
6
|
+
import { fillWith } from '../utils'
|
|
7
|
+
import * as pluginModule from '@kitschpatrol/tweakpane-plugin-file-import'
|
|
8
|
+
import { BROWSER } from 'esm-env'
|
|
9
|
+
import { shallowEqual } from 'fast-equals'
|
|
10
|
+
export let value = void 0
|
|
11
|
+
export let rows = void 0
|
|
12
|
+
export let invalidExtensionMessage = void 0
|
|
13
|
+
export let extensions = void 0
|
|
14
|
+
let internalValue
|
|
15
15
|
function updateInternalValueFromValue() {
|
|
16
|
-
const newInternalValue = value ?? ''
|
|
16
|
+
const newInternalValue = value ?? ''
|
|
17
17
|
if (!shallowEqual(internalValue, newInternalValue)) {
|
|
18
|
-
internalValue = newInternalValue
|
|
18
|
+
internalValue = newInternalValue
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
function updateValueFromInternalValue() {
|
|
22
22
|
if (internalValue instanceof File) {
|
|
23
23
|
if (!shallowEqual(value, internalValue)) {
|
|
24
|
-
value = internalValue
|
|
24
|
+
value = internalValue
|
|
25
25
|
}
|
|
26
26
|
} else if (value !== void 0) {
|
|
27
|
-
value = void 0
|
|
27
|
+
value = void 0
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
let options
|
|
30
|
+
let options
|
|
31
31
|
$: options = {
|
|
32
32
|
extensions,
|
|
33
33
|
filetypes: extensions,
|
|
34
34
|
invalidFiletypeMessage: invalidExtensionMessage,
|
|
35
35
|
lineCount: rows,
|
|
36
|
-
view: 'file-input'
|
|
37
|
-
}
|
|
38
|
-
$: value, updateInternalValueFromValue()
|
|
39
|
-
$: internalValue, updateValueFromInternalValue()
|
|
36
|
+
view: 'file-input',
|
|
37
|
+
}
|
|
38
|
+
$: value, updateInternalValueFromValue()
|
|
39
|
+
$: internalValue, updateValueFromInternalValue()
|
|
40
40
|
</script>
|
|
41
41
|
|
|
42
42
|
<GenericInput
|