svelte-tweakpane-ui 1.5.8 → 1.6.0-preview.1
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/Color.svelte +0 -6
- package/dist/control/ColorPlus.svelte +43 -0
- package/dist/control/ColorPlus.svelte.d.ts +192 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +1 -0
- package/package.json +8 -3
- package/readme.md +3 -1
|
@@ -64,14 +64,8 @@
|
|
|
64
64
|
console.error('Unreachable color type mismatch')
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
function addListeners() {
|
|
68
|
-
ref.on('change', () => {
|
|
69
|
-
ref.refresh()
|
|
70
|
-
})
|
|
71
|
-
}
|
|
72
67
|
$: value, updateInternalValueFromValue()
|
|
73
68
|
$: internalValue, updateValueFromInternalValue()
|
|
74
|
-
$: ref !== void 0 && addListeners()
|
|
75
69
|
$: options = {
|
|
76
70
|
color: {
|
|
77
71
|
type,
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script context="module"></script>
|
|
2
|
+
|
|
3
|
+
<script>
|
|
4
|
+
import * as pluginModule from 'tweakpane-plugin-color-plus/lite'
|
|
5
|
+
import { ColorPlusModel } from 'tweakpane-plugin-color-plus/lite'
|
|
6
|
+
import ClsPad from '../internal/ClsPad.svelte'
|
|
7
|
+
import GenericInputFolding from '../internal/GenericInputFolding.svelte'
|
|
8
|
+
import { fillWith } from '../utils'
|
|
9
|
+
import { BROWSER } from 'esm-env'
|
|
10
|
+
export let value
|
|
11
|
+
export let expanded = void 0
|
|
12
|
+
export let type = void 0
|
|
13
|
+
let options
|
|
14
|
+
let ref
|
|
15
|
+
const buttonClass = 'tp-colswv_b'
|
|
16
|
+
$: options = {
|
|
17
|
+
color: {
|
|
18
|
+
type,
|
|
19
|
+
},
|
|
20
|
+
view: 'color-plus',
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<GenericInputFolding
|
|
25
|
+
bind:value
|
|
26
|
+
bind:expanded
|
|
27
|
+
bind:ref
|
|
28
|
+
on:change
|
|
29
|
+
{buttonClass}
|
|
30
|
+
{options}
|
|
31
|
+
plugin={pluginModule}
|
|
32
|
+
{...$$restProps}
|
|
33
|
+
/>
|
|
34
|
+
{#if !BROWSER && expanded && $$props.picker === 'inline'}
|
|
35
|
+
<!-- Main swatch -->
|
|
36
|
+
<ClsPad keysAdd={fillWith('containerUnitSize', 6)} theme={$$props.theme} />
|
|
37
|
+
<ClsPad keysAdd={fillWith('containerUnitSpacing', 3)} theme={$$props.theme} />
|
|
38
|
+
<!-- Detect alpha slider... -->
|
|
39
|
+
{#if ColorPlusModel.getFormat(value, false, type)?.alpha}
|
|
40
|
+
<ClsPad keysAdd={fillWith('containerUnitSize', 1)} theme={$$props.theme} />
|
|
41
|
+
<ClsPad extra={2} keysAdd={fillWith('containerVerticalPadding', 2)} theme={$$props.theme} />
|
|
42
|
+
{/if}
|
|
43
|
+
{/if}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { SvelteComponent } from 'svelte'
|
|
2
|
+
import type { ValueChangeEvent } from '../utils.js'
|
|
3
|
+
import type { ColorPlusValue } from 'tweakpane-plugin-color-plus/lite'
|
|
4
|
+
export type { ColorPlusValue } from 'tweakpane-plugin-color-plus/lite'
|
|
5
|
+
export type ColorPlusChangeEvent = ValueChangeEvent<ColorPlusValue>
|
|
6
|
+
declare const __propDef: {
|
|
7
|
+
props: {
|
|
8
|
+
/**
|
|
9
|
+
* A color value to control.
|
|
10
|
+
*
|
|
11
|
+
* Use either a color-like string (e.g. #ff00ff), a number, an object with `r`, `b`, `g`, and
|
|
12
|
+
* optional `a` keys, or a tuple.
|
|
13
|
+
* @bindable
|
|
14
|
+
* */
|
|
15
|
+
value: ColorPlusValue
|
|
16
|
+
/**
|
|
17
|
+
* Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to 255.
|
|
18
|
+
* @default `'int'`
|
|
19
|
+
* */
|
|
20
|
+
type?: 'float' | 'int'
|
|
21
|
+
} & Omit<
|
|
22
|
+
{
|
|
23
|
+
/**
|
|
24
|
+
* DOM class name of the button used to expand and collapse the input's picker.
|
|
25
|
+
* @default `undefined`
|
|
26
|
+
*/
|
|
27
|
+
buttonClass?: string
|
|
28
|
+
/**
|
|
29
|
+
* Expand or collapse the input's picker.
|
|
30
|
+
* @default `false`
|
|
31
|
+
* @bindable
|
|
32
|
+
*/
|
|
33
|
+
expanded?: boolean
|
|
34
|
+
/**
|
|
35
|
+
* The style of value "picker" to use in the input.
|
|
36
|
+
* @default `'popup'`
|
|
37
|
+
*/
|
|
38
|
+
picker?: 'inline' | 'popup'
|
|
39
|
+
/**
|
|
40
|
+
* Allow users to interactively expand / contract the picker.
|
|
41
|
+
* @default `true`
|
|
42
|
+
*/
|
|
43
|
+
userExpandable?: boolean
|
|
44
|
+
} & {
|
|
45
|
+
/**
|
|
46
|
+
* A color value to control.
|
|
47
|
+
*
|
|
48
|
+
* Use either a color-like string (e.g. #ff00ff), a number, an object with `r`, `b`, `g`, and
|
|
49
|
+
* optional `a` keys, or a tuple.
|
|
50
|
+
* @bindable
|
|
51
|
+
*/
|
|
52
|
+
value: ColorPlusValue
|
|
53
|
+
} & Omit<
|
|
54
|
+
{
|
|
55
|
+
/**
|
|
56
|
+
* The binding's target object with values to manipulate.
|
|
57
|
+
* @bindable
|
|
58
|
+
*/
|
|
59
|
+
object: import('@tweakpane/core').Bindable & Record<string, ColorPlusValue>
|
|
60
|
+
/** The key for the value in the target `object` that the control should manipulate. */
|
|
61
|
+
key: string
|
|
62
|
+
/**
|
|
63
|
+
* Prevent interactivity and gray out the control.
|
|
64
|
+
* @default `false`
|
|
65
|
+
*/
|
|
66
|
+
disabled?: boolean
|
|
67
|
+
/**
|
|
68
|
+
* Text displayed next to control.
|
|
69
|
+
* @default `undefined`
|
|
70
|
+
*/
|
|
71
|
+
label?: string | undefined
|
|
72
|
+
/**
|
|
73
|
+
* Tweakpane's internal options object.
|
|
74
|
+
*
|
|
75
|
+
* See [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
|
|
76
|
+
*
|
|
77
|
+
* Valid types are contingent on the type of the value `key` points to in `object`.
|
|
78
|
+
*
|
|
79
|
+
* This is intended internal use, when implementing convenience components wrapping Binding's
|
|
80
|
+
* functionality. Options of interest are instead exposed as top-level props in _Svelte
|
|
81
|
+
* Tweakpane UI_.
|
|
82
|
+
* @default `undefined`
|
|
83
|
+
*/
|
|
84
|
+
options?: any
|
|
85
|
+
/**
|
|
86
|
+
* Custom color scheme.
|
|
87
|
+
*
|
|
88
|
+
* @default `undefined` \
|
|
89
|
+
* Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme
|
|
90
|
+
* set with `setGlobalDefaultTheme()`.
|
|
91
|
+
*/
|
|
92
|
+
theme?: import('..').Theme | undefined
|
|
93
|
+
/**
|
|
94
|
+
* Reference to internal Tweakpane
|
|
95
|
+
* [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html) for
|
|
96
|
+
* this control.
|
|
97
|
+
*
|
|
98
|
+
* This property is exposed for advanced use cases only, such as when implementing convenience
|
|
99
|
+
* components wrapping `<Binding>`'s functionality.
|
|
100
|
+
*
|
|
101
|
+
* Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
|
|
102
|
+
*
|
|
103
|
+
* @bindable
|
|
104
|
+
* @readonly
|
|
105
|
+
*/
|
|
106
|
+
ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
|
|
107
|
+
/**
|
|
108
|
+
* Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to automatically register in
|
|
109
|
+
* the `<Binding>`'s containing `<Pane>`.
|
|
110
|
+
*
|
|
111
|
+
* This property is exposed for advanced use cases only, such as when implementing convenience
|
|
112
|
+
* components wrapping `<Binding>`'s functionality in combination with a Tweakpane plugin.
|
|
113
|
+
*
|
|
114
|
+
* Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane UI_ abstractions.
|
|
115
|
+
*
|
|
116
|
+
* @default `undefined`
|
|
117
|
+
*/
|
|
118
|
+
plugin?: import('../utils.js').Plugin | undefined
|
|
119
|
+
},
|
|
120
|
+
'object' | 'key'
|
|
121
|
+
>,
|
|
122
|
+
'ref' | 'options' | 'plugin' | 'buttonClass'
|
|
123
|
+
>
|
|
124
|
+
slots: {}
|
|
125
|
+
events: {
|
|
126
|
+
/**
|
|
127
|
+
* Fires when `value` changes.
|
|
128
|
+
*
|
|
129
|
+
* _This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead._
|
|
130
|
+
*
|
|
131
|
+
* The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`)
|
|
132
|
+
* and changes resulting from programmatic manipulation of the `value` (`external`).
|
|
133
|
+
*
|
|
134
|
+
* @extends ValueChangeEvent
|
|
135
|
+
* @event
|
|
136
|
+
* */
|
|
137
|
+
change: ColorPlusChangeEvent
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
export type ColorPlusProps = typeof __propDef.props
|
|
141
|
+
export type ColorPlusEvents = typeof __propDef.events
|
|
142
|
+
export type ColorPlusSlots = typeof __propDef.slots
|
|
143
|
+
/**
|
|
144
|
+
* A color picker with support for additional color value formats.
|
|
145
|
+
*
|
|
146
|
+
* Integrates the color control from the [Color Plus
|
|
147
|
+
* plugin](https://github.com/kitschpatrol/tweakpane-plugin-color-plus).
|
|
148
|
+
*
|
|
149
|
+
* This component looks just like the Tweakpane-native `<Color>` control, but
|
|
150
|
+
* it adds support for all [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) color string formats as well as a
|
|
151
|
+
* wider range of color object keys.
|
|
152
|
+
*
|
|
153
|
+
* The plugin on which `<ColorPlus>` is based is still under active development, but can generally be used as a drop-in replacement for the `Color` control. Please report any issues you might encountered.
|
|
154
|
+
*
|
|
155
|
+
* `<ColorPlus>` might replace the `<Color>` control entirely in the next major version of `svelte-tweakpane-ui`.
|
|
156
|
+
*
|
|
157
|
+
* Usage outside of a `<Pane>` component will implicitly wrap the color picker in `<Pane
|
|
158
|
+
* position="inline">`.
|
|
159
|
+
*
|
|
160
|
+
* @emits {ColorPlusChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
|
|
161
|
+
*
|
|
162
|
+
* @example
|
|
163
|
+
* ```svelte
|
|
164
|
+
* <script lang="ts">
|
|
165
|
+
* import { ColorPlus } from 'svelte-tweakpane-ui'
|
|
166
|
+
*
|
|
167
|
+
* let startColor = 'oklch(93.7% 0.199 105deg / 1)'
|
|
168
|
+
* let endColor = 'oklch(70.2% 0.322 328deg / 1)'
|
|
169
|
+
* </script>
|
|
170
|
+
*
|
|
171
|
+
* <ColorPlus bind:value={startColor} label="Start Color" />
|
|
172
|
+
* <ColorPlus bind:value={endColor} label="End Color" />
|
|
173
|
+
*
|
|
174
|
+
* <div class="demo" style:--a={startColor} style:--b={endColor}></div>
|
|
175
|
+
*
|
|
176
|
+
* <style>
|
|
177
|
+
* .demo {
|
|
178
|
+
* aspect-ratio: 1;
|
|
179
|
+
* width: 100%;
|
|
180
|
+
* background: linear-gradient(to top, var(--a), var(--b));
|
|
181
|
+
* }
|
|
182
|
+
* </style>
|
|
183
|
+
* ```
|
|
184
|
+
*
|
|
185
|
+
* @sourceLink
|
|
186
|
+
* [ColorPlus.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/ColorPlus.svelte)
|
|
187
|
+
*/
|
|
188
|
+
export default class ColorPlus extends SvelteComponent<
|
|
189
|
+
ColorPlusProps,
|
|
190
|
+
ColorPlusEvents,
|
|
191
|
+
ColorPlusSlots
|
|
192
|
+
> {}
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,11 @@ export {
|
|
|
11
11
|
type ColorValueRgbTuple,
|
|
12
12
|
type ColorValueString,
|
|
13
13
|
} from './control/Color.svelte'
|
|
14
|
+
export {
|
|
15
|
+
default as ColorPlus,
|
|
16
|
+
type ColorPlusChangeEvent,
|
|
17
|
+
type ColorPlusValue,
|
|
18
|
+
} from './control/ColorPlus.svelte'
|
|
14
19
|
export {
|
|
15
20
|
default as CubicBezier,
|
|
16
21
|
type CubicBezierChangeEvent,
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Button } from './control/Button.svelte'
|
|
|
2
2
|
export { default as ButtonGrid } from './control/ButtonGrid.svelte'
|
|
3
3
|
export { default as Checkbox } from './control/Checkbox.svelte'
|
|
4
4
|
export { default as Color } from './control/Color.svelte'
|
|
5
|
+
export { default as ColorPlus } from './control/ColorPlus.svelte'
|
|
5
6
|
export { default as CubicBezier } from './control/CubicBezier.svelte'
|
|
6
7
|
export { default as File } from './control/File.svelte'
|
|
7
8
|
export { default as Image } from './control/Image.svelte'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-tweakpane-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0-preview.1",
|
|
4
4
|
"description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -69,6 +69,10 @@
|
|
|
69
69
|
"types": "./dist/control/Color.svelte.d.ts",
|
|
70
70
|
"svelte": "./dist/control/Color.svelte"
|
|
71
71
|
},
|
|
72
|
+
"./ColorPlus.svelte": {
|
|
73
|
+
"types": "./dist/control/ColorPlus.svelte.d.ts",
|
|
74
|
+
"svelte": "./dist/control/ColorPlus.svelte"
|
|
75
|
+
},
|
|
72
76
|
"./CubicBezier.svelte": {
|
|
73
77
|
"types": "./dist/control/CubicBezier.svelte.d.ts",
|
|
74
78
|
"svelte": "./dist/control/CubicBezier.svelte"
|
|
@@ -198,7 +202,8 @@
|
|
|
198
202
|
"fast-equals": "^5.2.2",
|
|
199
203
|
"nanoid": "^5.1.5",
|
|
200
204
|
"svelte-persisted-store": "0.12.0",
|
|
201
|
-
"tweakpane": "4.0.5"
|
|
205
|
+
"tweakpane": "4.0.5",
|
|
206
|
+
"tweakpane-plugin-color-plus": "0.1.6"
|
|
202
207
|
},
|
|
203
208
|
"devDependencies": {
|
|
204
209
|
"@kitschpatrol/shared-config": "^5.4.2",
|
|
@@ -268,7 +273,7 @@
|
|
|
268
273
|
"kit-examples": "tsx ./scripts/generate-kit-examples.ts",
|
|
269
274
|
"kit-preview": "vite preview",
|
|
270
275
|
"lint": "kpi lint && svelte-check --tsconfig ./tsconfig.build.json",
|
|
271
|
-
"release": "pnpm run build && bumpp --commit 'Release: %s' && pnpm publish --ignore-scripts --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
|
|
276
|
+
"release": "pnpm run build && bumpp --preid preview --commit 'Release: %s' && pnpm publish --tag preview --ignore-scripts --otp $(op read 'op://Personal/Npmjs/one-time password?attribute=otp')",
|
|
272
277
|
"rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts' -o -name '*.html' \\) -type f | grep -v src/examples`",
|
|
273
278
|
"test": "pnpm run --sequential /^test:/",
|
|
274
279
|
"test:integration": "playwright test",
|
package/readme.md
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
## Overview
|
|
36
36
|
|
|
37
|
-
🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of <!-- component-count -->
|
|
37
|
+
🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of <!-- component-count -->34<!-- /component-count --> idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
|
|
38
38
|
|
|
39
39
|
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.
|
|
40
40
|
|
|
@@ -100,6 +100,8 @@ npm install svelte-tweakpane-ui
|
|
|
100
100
|
A checkbox.
|
|
101
101
|
- **[Color](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/color)**\
|
|
102
102
|
A color picker.
|
|
103
|
+
- **[ColorPlus](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/colorplus)**\
|
|
104
|
+
A color picker with support for additional color value formats.
|
|
103
105
|
- **[CubicBezier](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/cubicbezier)**\
|
|
104
106
|
A control for editing a bezier curve. Ideal for tweaking animation easing values.
|
|
105
107
|
- **[File](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/file)**\
|