@tialro2/rnbokit 1.0.15 → 1.0.18
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/README.md +242 -242
- package/dist/RNBO.css +113 -113
- package/dist/RNBO.svelte +230 -230
- package/dist/RNBOcomponents/AudioDropIn.svelte +125 -125
- package/dist/RNBOcomponents/ExtMidiIn.svelte +85 -85
- package/dist/RNBOcomponents/ExtMidiOut.svelte +85 -85
- package/dist/RNBOcomponents/MicIn.svelte +80 -80
- package/dist/RNBOcomponents/RNBOInlet.svelte +66 -66
- package/dist/RNBOcomponents/RNBOInport.svelte +21 -21
- package/dist/RNBOcomponents/RNBOMidiIn.svelte +63 -63
- package/dist/RNBOcomponents/RNBOMidiOut.svelte +22 -22
- package/dist/RNBOcomponents/RNBOOutport.svelte +36 -36
- package/dist/RNBOcomponents/RNBOParam.svelte +37 -37
- package/dist/RNBOcomponents/XYMidiIn.svelte +93 -93
- package/dist/UIcomponents/Controls.svelte +12 -12
- package/dist/UIcomponents/FileDropZone.svelte +118 -118
- package/dist/UIcomponents/ProgressBar.svelte +35 -35
- package/dist/UIcomponents/RadioGroup.svelte +27 -27
- package/dist/UIcomponents/RadioItem.svelte +96 -96
- package/dist/index.js +20 -20
- package/package.json +10 -10
|
@@ -1,96 +1,96 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
/**
|
|
3
|
-
* @typedef {Object} Props
|
|
4
|
-
* @property {any} group
|
|
5
|
-
* @property {any} name
|
|
6
|
-
* @property {any} value
|
|
7
|
-
* @property {string} [title]
|
|
8
|
-
* @property {string} [label]
|
|
9
|
-
* @property {import('svelte').Snippet} [children]
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
/** @type {Props} */
|
|
13
|
-
let {
|
|
14
|
-
group = $bindable(),
|
|
15
|
-
name,
|
|
16
|
-
value,
|
|
17
|
-
title = '',
|
|
18
|
-
label = '',
|
|
19
|
-
onkeydown,
|
|
20
|
-
onkeyup,
|
|
21
|
-
onkeypress,
|
|
22
|
-
onclick,
|
|
23
|
-
onchange,
|
|
24
|
-
children
|
|
25
|
-
} = $props();
|
|
26
|
-
let elemInput = $state();
|
|
27
|
-
function onKeyDown(event) {
|
|
28
|
-
if (['Enter', 'Space'].includes(event.code)) {
|
|
29
|
-
event.preventDefault();
|
|
30
|
-
elemInput.click();
|
|
31
|
-
}
|
|
32
|
-
onkeydown();
|
|
33
|
-
}
|
|
34
|
-
let checked = $derived(value === group);
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<label>
|
|
38
|
-
<!-- A11y attributes are not allowed on <label> -->
|
|
39
|
-
<div
|
|
40
|
-
class="RNBOradio-item {checked ? 'RNBOchecked' : 'RNBOhover'}"
|
|
41
|
-
data-testid="radio-item"
|
|
42
|
-
role="radio"
|
|
43
|
-
aria-checked={checked}
|
|
44
|
-
aria-label={label}
|
|
45
|
-
tabindex="0"
|
|
46
|
-
{title}
|
|
47
|
-
onkeydown={onKeyDown}
|
|
48
|
-
{onkeyup}
|
|
49
|
-
{onkeypress}
|
|
50
|
-
>
|
|
51
|
-
<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
|
|
52
|
-
<div class="RNBOradio-input">
|
|
53
|
-
<input
|
|
54
|
-
bind:this={elemInput}
|
|
55
|
-
type="radio"
|
|
56
|
-
bind:group
|
|
57
|
-
{name}
|
|
58
|
-
{value}
|
|
59
|
-
tabindex="-1"
|
|
60
|
-
{onclick}
|
|
61
|
-
{onchange}
|
|
62
|
-
id="test"
|
|
63
|
-
/>
|
|
64
|
-
</div>
|
|
65
|
-
{@render children?.()}
|
|
66
|
-
</div>
|
|
67
|
-
</label>
|
|
68
|
-
|
|
69
|
-
<style>
|
|
70
|
-
.RNBOradio-item {
|
|
71
|
-
font-size: 1rem;
|
|
72
|
-
line-height: 1.5rem;
|
|
73
|
-
text-align: center;
|
|
74
|
-
flex: 1 1 auto;
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
padding: 0.2rem;
|
|
77
|
-
padding-left: 0.75rem;
|
|
78
|
-
padding-right: 0.75rem;
|
|
79
|
-
margin: 0.25rem;
|
|
80
|
-
background-color: rgba(var(--local-accent-color), 0);
|
|
81
|
-
border-radius: var(--local-rounded-base);
|
|
82
|
-
}
|
|
83
|
-
.RNBOhover:hover {
|
|
84
|
-
background-color: rgba(var(--local-accent-color), 0.2);
|
|
85
|
-
transition: var(--local-animation) var(--local-animation-duration);
|
|
86
|
-
}
|
|
87
|
-
.RNBOchecked {
|
|
88
|
-
background-color: rgba(var(--local-accent-color), 1);
|
|
89
|
-
transition: var(--local-animation) var(--local-animation-duration);
|
|
90
|
-
}
|
|
91
|
-
.RNBOradio-input {
|
|
92
|
-
overflow: hidden;
|
|
93
|
-
width: 0;
|
|
94
|
-
height: 0;
|
|
95
|
-
}
|
|
96
|
-
</style>
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {Object} Props
|
|
4
|
+
* @property {any} group
|
|
5
|
+
* @property {any} name
|
|
6
|
+
* @property {any} value
|
|
7
|
+
* @property {string} [title]
|
|
8
|
+
* @property {string} [label]
|
|
9
|
+
* @property {import('svelte').Snippet} [children]
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/** @type {Props} */
|
|
13
|
+
let {
|
|
14
|
+
group = $bindable(),
|
|
15
|
+
name,
|
|
16
|
+
value,
|
|
17
|
+
title = '',
|
|
18
|
+
label = '',
|
|
19
|
+
onkeydown,
|
|
20
|
+
onkeyup,
|
|
21
|
+
onkeypress,
|
|
22
|
+
onclick,
|
|
23
|
+
onchange,
|
|
24
|
+
children
|
|
25
|
+
} = $props();
|
|
26
|
+
let elemInput = $state();
|
|
27
|
+
function onKeyDown(event) {
|
|
28
|
+
if (['Enter', 'Space'].includes(event.code)) {
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
elemInput.click();
|
|
31
|
+
}
|
|
32
|
+
onkeydown();
|
|
33
|
+
}
|
|
34
|
+
let checked = $derived(value === group);
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<label>
|
|
38
|
+
<!-- A11y attributes are not allowed on <label> -->
|
|
39
|
+
<div
|
|
40
|
+
class="RNBOradio-item {checked ? 'RNBOchecked' : 'RNBOhover'}"
|
|
41
|
+
data-testid="radio-item"
|
|
42
|
+
role="radio"
|
|
43
|
+
aria-checked={checked}
|
|
44
|
+
aria-label={label}
|
|
45
|
+
tabindex="0"
|
|
46
|
+
{title}
|
|
47
|
+
onkeydown={onKeyDown}
|
|
48
|
+
{onkeyup}
|
|
49
|
+
{onkeypress}
|
|
50
|
+
>
|
|
51
|
+
<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
|
|
52
|
+
<div class="RNBOradio-input">
|
|
53
|
+
<input
|
|
54
|
+
bind:this={elemInput}
|
|
55
|
+
type="radio"
|
|
56
|
+
bind:group
|
|
57
|
+
{name}
|
|
58
|
+
{value}
|
|
59
|
+
tabindex="-1"
|
|
60
|
+
{onclick}
|
|
61
|
+
{onchange}
|
|
62
|
+
id="test"
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
65
|
+
{@render children?.()}
|
|
66
|
+
</div>
|
|
67
|
+
</label>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
.RNBOradio-item {
|
|
71
|
+
font-size: 1rem;
|
|
72
|
+
line-height: 1.5rem;
|
|
73
|
+
text-align: center;
|
|
74
|
+
flex: 1 1 auto;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
padding: 0.2rem;
|
|
77
|
+
padding-left: 0.75rem;
|
|
78
|
+
padding-right: 0.75rem;
|
|
79
|
+
margin: 0.25rem;
|
|
80
|
+
background-color: rgba(var(--local-accent-color), 0);
|
|
81
|
+
border-radius: var(--local-rounded-base);
|
|
82
|
+
}
|
|
83
|
+
.RNBOhover:hover {
|
|
84
|
+
background-color: rgba(var(--local-accent-color), 0.2);
|
|
85
|
+
transition: var(--local-animation) var(--local-animation-duration);
|
|
86
|
+
}
|
|
87
|
+
.RNBOchecked {
|
|
88
|
+
background-color: rgba(var(--local-accent-color), 1);
|
|
89
|
+
transition: var(--local-animation) var(--local-animation-duration);
|
|
90
|
+
}
|
|
91
|
+
.RNBOradio-input {
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
width: 0;
|
|
94
|
+
height: 0;
|
|
95
|
+
}
|
|
96
|
+
</style>
|
package/dist/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
// Reexport your entry components here
|
|
2
|
-
export { default as RNBO } from './RNBO.svelte';
|
|
3
|
-
export { default as RNBOParam } from './RNBOcomponents/RNBOParam.svelte';
|
|
4
|
-
export { default as RNBOMidiIn } from './RNBOcomponents/RNBOMidiIn.svelte';
|
|
5
|
-
// export { default as RNBOMidiOut } from './RNBOcomponents/RNBOMidiOut.svelte';
|
|
6
|
-
export { default as RNBOInlet } from './RNBOcomponents/RNBOInlet.svelte';
|
|
7
|
-
export { default as RNBOInport } from './RNBOcomponents/RNBOInport.svelte';
|
|
8
|
-
export { default as RNBOOutport } from './RNBOcomponents/RNBOOutport.svelte';
|
|
9
|
-
|
|
10
|
-
export { default as XYMidiIn } from './RNBOcomponents/XYMidiIn.svelte';
|
|
11
|
-
export { default as ExtMidiIn } from './RNBOcomponents/ExtMidiIn.svelte';
|
|
12
|
-
// export { default as ExtMidiOut } from './RNBOcomponents/ExtMidiOut.svelte';
|
|
13
|
-
export { default as MicIn } from './RNBOcomponents/MicIn.svelte';
|
|
14
|
-
export { default as AudioDropIn } from './RNBOcomponents/AudioDropIn.svelte';
|
|
15
|
-
|
|
16
|
-
export { default as FileDropZone } from './UIcomponents/FileDropZone.svelte';
|
|
17
|
-
export { default as ProgressBar } from './UIcomponents/ProgressBar.svelte';
|
|
18
|
-
export { default as RadioGroup } from './UIcomponents/RadioGroup.svelte';
|
|
19
|
-
export { default as RadioItem } from './UIcomponents/RadioItem.svelte';
|
|
20
|
-
export { default as RangeSlider } from './UIcomponents/RangeSlider.svelte';
|
|
1
|
+
// Reexport your entry components here
|
|
2
|
+
export { default as RNBO } from './RNBO.svelte';
|
|
3
|
+
export { default as RNBOParam } from './RNBOcomponents/RNBOParam.svelte';
|
|
4
|
+
export { default as RNBOMidiIn } from './RNBOcomponents/RNBOMidiIn.svelte';
|
|
5
|
+
// export { default as RNBOMidiOut } from './RNBOcomponents/RNBOMidiOut.svelte';
|
|
6
|
+
export { default as RNBOInlet } from './RNBOcomponents/RNBOInlet.svelte';
|
|
7
|
+
export { default as RNBOInport } from './RNBOcomponents/RNBOInport.svelte';
|
|
8
|
+
export { default as RNBOOutport } from './RNBOcomponents/RNBOOutport.svelte';
|
|
9
|
+
|
|
10
|
+
export { default as XYMidiIn } from './RNBOcomponents/XYMidiIn.svelte';
|
|
11
|
+
export { default as ExtMidiIn } from './RNBOcomponents/ExtMidiIn.svelte';
|
|
12
|
+
// export { default as ExtMidiOut } from './RNBOcomponents/ExtMidiOut.svelte';
|
|
13
|
+
export { default as MicIn } from './RNBOcomponents/MicIn.svelte';
|
|
14
|
+
export { default as AudioDropIn } from './RNBOcomponents/AudioDropIn.svelte';
|
|
15
|
+
|
|
16
|
+
export { default as FileDropZone } from './UIcomponents/FileDropZone.svelte';
|
|
17
|
+
export { default as ProgressBar } from './UIcomponents/ProgressBar.svelte';
|
|
18
|
+
export { default as RadioGroup } from './UIcomponents/RadioGroup.svelte';
|
|
19
|
+
export { default as RadioItem } from './UIcomponents/RadioItem.svelte';
|
|
20
|
+
export { default as RangeSlider } from './UIcomponents/RangeSlider.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tialro2/rnbokit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": {
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -18,21 +18,21 @@
|
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@playwright/test": "^1.60.0",
|
|
20
20
|
"@sveltejs/adapter-auto": "^7.0.1",
|
|
21
|
-
"@sveltejs/kit": "^2.
|
|
22
|
-
"@sveltejs/package": "^2.5.
|
|
21
|
+
"@sveltejs/kit": "^2.63.0",
|
|
22
|
+
"@sveltejs/package": "^2.5.8",
|
|
23
23
|
"@sveltejs/vite-plugin-svelte": "^7.1.2",
|
|
24
|
-
"eslint": "^10.4.
|
|
24
|
+
"eslint": "^10.4.1",
|
|
25
25
|
"eslint-config-prettier": "^10.1.8",
|
|
26
|
-
"eslint-plugin-svelte": "^3.
|
|
26
|
+
"eslint-plugin-svelte": "^3.19.0",
|
|
27
27
|
"prettier": "^3.8.3",
|
|
28
|
-
"prettier-plugin-svelte": "^
|
|
28
|
+
"prettier-plugin-svelte": "^4.1.0",
|
|
29
29
|
"publint": "^0.3.21",
|
|
30
|
-
"svelte": "^5.
|
|
31
|
-
"svelte-check": "^4.
|
|
30
|
+
"svelte": "^5.56.2",
|
|
31
|
+
"svelte-check": "^4.6.0",
|
|
32
32
|
"tslib": "^2.8.1",
|
|
33
33
|
"typescript": "^6.0.3",
|
|
34
|
-
"vite": "^8.0.
|
|
35
|
-
"vitest": "^4.1.
|
|
34
|
+
"vite": "^8.0.16",
|
|
35
|
+
"vitest": "^4.1.8"
|
|
36
36
|
},
|
|
37
37
|
"svelte": "./dist/index.js",
|
|
38
38
|
"types": "./dist/index.d.ts",
|