@onsvisual/svelte-components 0.1.88-component.toolbar → 0.1.90-component.toolbar
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/@types/index.d.ts +2 -0
- package/dist/@types/inputs/ButtonGroup/ButtonGroup.svelte.d.ts +33 -0
- package/dist/@types/inputs/ButtonGroup/ButtonGroupItem.svelte.d.ts +25 -0
- package/dist/index.js +2 -0
- package/dist/inputs/ButtonGroup/ButtonGroup.svelte +55 -0
- package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte +103 -0
- package/dist/inputs/Toolbar/HelpModal.svelte +1 -1
- package/dist/inputs/Toolbar/Icon.svelte +2 -2
- package/dist/inputs/Toolbar/ToolbarsContainer.svelte +6 -0
- package/package.json +3 -1
package/dist/@types/index.d.ts
CHANGED
|
@@ -53,6 +53,8 @@ export { default as ToolbarDivider } from "./inputs/Toolbar/ToolbarDivider.svelt
|
|
|
53
53
|
export { default as ToolbarsContainer } from "./inputs/Toolbar/ToolbarsContainer.svelte";
|
|
54
54
|
export { default as ToolControl } from "./inputs/Toolbar/ToolControl.svelte";
|
|
55
55
|
export { default as ToolControls } from "./inputs/Toolbar/ToolControls.svelte";
|
|
56
|
+
export { default as ButtonGroup } from "./inputs/ButtonGroup/ButtonGroup.svelte";
|
|
57
|
+
export { default as ButtonGroupItem } from "./inputs/ButtonGroup/ButtonGroupItem.svelte";
|
|
56
58
|
export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
|
|
57
59
|
export { default as Divider } from "./decorators/Divider/Divider.svelte";
|
|
58
60
|
export { default as Em } from "./decorators/Em/Em.svelte";
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} ButtonGroupProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} ButtonGroupEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} ButtonGroupSlots */
|
|
4
|
+
export default class ButtonGroup extends SvelteComponentTyped<{
|
|
5
|
+
value: any;
|
|
6
|
+
legend?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
visuallyHideLegend?: boolean;
|
|
9
|
+
}, {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
}, {
|
|
12
|
+
default: {};
|
|
13
|
+
}> {
|
|
14
|
+
}
|
|
15
|
+
export type ButtonGroupProps = typeof __propDef.props;
|
|
16
|
+
export type ButtonGroupEvents = typeof __propDef.events;
|
|
17
|
+
export type ButtonGroupSlots = typeof __propDef.slots;
|
|
18
|
+
import { SvelteComponentTyped } from "svelte";
|
|
19
|
+
declare const __propDef: {
|
|
20
|
+
props: {
|
|
21
|
+
value: any;
|
|
22
|
+
legend?: string;
|
|
23
|
+
name?: string;
|
|
24
|
+
visuallyHideLegend?: boolean;
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {
|
|
30
|
+
default: {};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} ButtonGroupItemProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} ButtonGroupItemEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} ButtonGroupItemSlots */
|
|
4
|
+
export default class ButtonGroupItem extends SvelteComponentTyped<{
|
|
5
|
+
label?: string;
|
|
6
|
+
value?: string;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
}
|
|
11
|
+
export type ButtonGroupItemProps = typeof __propDef.props;
|
|
12
|
+
export type ButtonGroupItemEvents = typeof __propDef.events;
|
|
13
|
+
export type ButtonGroupItemSlots = typeof __propDef.slots;
|
|
14
|
+
import { SvelteComponentTyped } from "svelte";
|
|
15
|
+
declare const __propDef: {
|
|
16
|
+
props: {
|
|
17
|
+
label?: string;
|
|
18
|
+
value?: string;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
export {};
|
package/dist/index.js
CHANGED
|
@@ -60,6 +60,8 @@ export { default as ToolbarDivider } from "./inputs/Toolbar/ToolbarDivider.svelt
|
|
|
60
60
|
export { default as ToolbarsContainer } from "./inputs/Toolbar/ToolbarsContainer.svelte";
|
|
61
61
|
export { default as ToolControl } from "./inputs/Toolbar/ToolControl.svelte";
|
|
62
62
|
export { default as ToolControls } from "./inputs/Toolbar/ToolControls.svelte";
|
|
63
|
+
export { default as ButtonGroup } from "./inputs/ButtonGroup/ButtonGroup.svelte";
|
|
64
|
+
export { default as ButtonGroupItem } from "./inputs/ButtonGroup/ButtonGroupItem.svelte";
|
|
63
65
|
|
|
64
66
|
// Decorators
|
|
65
67
|
export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { setContext } from "svelte";
|
|
3
|
+
import { writable } from "svelte/store";
|
|
4
|
+
|
|
5
|
+
export let name = "";
|
|
6
|
+
export let legend = "";
|
|
7
|
+
export let value;
|
|
8
|
+
export let visuallyHideLegend = false;
|
|
9
|
+
|
|
10
|
+
// create the store
|
|
11
|
+
const selectedValue = writable(value);
|
|
12
|
+
|
|
13
|
+
// Sync the store with the prop on mount and when the prop changes
|
|
14
|
+
$: selectedValue.set(value);
|
|
15
|
+
|
|
16
|
+
// When store changes and update prop
|
|
17
|
+
|
|
18
|
+
$: if ($selectedValue !== value) {
|
|
19
|
+
value = $selectedValue;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Create a context to share with child Button components
|
|
23
|
+
setContext("buttonGroup", {
|
|
24
|
+
groupName: name,
|
|
25
|
+
selectedValue,
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<fieldset class="button-group">
|
|
30
|
+
{#if legend}
|
|
31
|
+
<legend class:ons-u-vh="{visuallyHideLegend}">{legend}</legend>
|
|
32
|
+
{/if}
|
|
33
|
+
<div class="buttons">
|
|
34
|
+
<slot />
|
|
35
|
+
</div>
|
|
36
|
+
</fieldset>
|
|
37
|
+
|
|
38
|
+
<style>
|
|
39
|
+
.button-group {
|
|
40
|
+
display: inline-block;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
legend {
|
|
44
|
+
font-weight: bold;
|
|
45
|
+
margin-bottom: 0.5rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.buttons {
|
|
49
|
+
display: flex;
|
|
50
|
+
gap: 8px;
|
|
51
|
+
background: #f5f5f6;
|
|
52
|
+
padding: 4px;
|
|
53
|
+
border-radius: 8px;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
}</style>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getContext } from "svelte";
|
|
3
|
+
|
|
4
|
+
export let value = "";
|
|
5
|
+
export let label = "";
|
|
6
|
+
|
|
7
|
+
// Get the parent ButtonGroup context
|
|
8
|
+
const buttonGroup = getContext("buttonGroup");
|
|
9
|
+
const { selectedValue } = buttonGroup;
|
|
10
|
+
|
|
11
|
+
// Reactive variable to track selection
|
|
12
|
+
let selected = false;
|
|
13
|
+
|
|
14
|
+
// Subscribe to selectedValue store
|
|
15
|
+
$: selectedValue.subscribe(($selectedValue) => {
|
|
16
|
+
selected = $selectedValue === value;
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
function handleClick() {
|
|
20
|
+
selectedValue.set(value); // Update the store
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
let buttonRef;
|
|
24
|
+
|
|
25
|
+
function handleKeydown(event) {
|
|
26
|
+
const buttons = Array.from(document.querySelectorAll(`[name="${buttonGroup.groupName}"]`));
|
|
27
|
+
const currentIndex = buttons.indexOf(buttonRef);
|
|
28
|
+
|
|
29
|
+
let newIndex = -1;
|
|
30
|
+
|
|
31
|
+
if (event.key === "ArrowRight" || event.key === "ArrowDown") {
|
|
32
|
+
newIndex = (currentIndex + 1) % buttons.length;
|
|
33
|
+
} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
|
|
34
|
+
newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
|
|
35
|
+
} else if (event.key === "Enter" || event.key === " ") {
|
|
36
|
+
handleClick();
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (newIndex !== -1) {
|
|
41
|
+
buttons[newIndex].focus();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<div class="button-container">
|
|
47
|
+
<input
|
|
48
|
+
type="radio"
|
|
49
|
+
id="{value}"
|
|
50
|
+
name="{buttonGroup.groupName}"
|
|
51
|
+
value="{value}"
|
|
52
|
+
checked="{selected}"
|
|
53
|
+
class="radio-input"
|
|
54
|
+
on:click="{handleClick}"
|
|
55
|
+
on:keydown="{handleKeydown}"
|
|
56
|
+
aria-checked="{selected}"
|
|
57
|
+
tabindex="0"
|
|
58
|
+
bind:this="{buttonRef}"
|
|
59
|
+
/>
|
|
60
|
+
<label for="{value}" class="button" class:selected="{selected}" on:click="{handleClick}">
|
|
61
|
+
{label || value}
|
|
62
|
+
</label>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<style>
|
|
66
|
+
.button-container {
|
|
67
|
+
display: flex;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.radio-input {
|
|
71
|
+
position: absolute;
|
|
72
|
+
opacity: 0;
|
|
73
|
+
width: 0;
|
|
74
|
+
height: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.button {
|
|
78
|
+
flex-grow: 0;
|
|
79
|
+
padding: 4px 8px;
|
|
80
|
+
border: none;
|
|
81
|
+
background: transparent;
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
border-radius: 6px;
|
|
85
|
+
transition: background 0.2s ease, color 0.2s ease;
|
|
86
|
+
color: #707071;
|
|
87
|
+
text-align: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.button:hover {
|
|
91
|
+
background-color: #e8e8e8;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.button:focus {
|
|
95
|
+
box-shadow: orange 0 0 0 2px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.button.selected {
|
|
99
|
+
background: white;
|
|
100
|
+
font-weight: bold;
|
|
101
|
+
color: #206095;
|
|
102
|
+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
|
103
|
+
}</style>
|
|
@@ -79,13 +79,13 @@
|
|
|
79
79
|
d: "M28.7075 27.2925L22.4488 21.035C24.2628 18.8571 25.1674 16.0637 24.9743 13.2359C24.7812 10.4081 23.5054 7.76355 21.4122 5.85244C19.319 3.94134 16.5696 2.9108 13.7359 2.9752C10.9022 3.0396 8.20246 4.19398 6.19824 6.19821C4.19401 8.20243 3.03963 10.9022 2.97523 13.7359C2.91083 16.5695 3.94137 19.319 5.85248 21.4122C7.76358 23.5054 10.4081 24.7812 13.2359 24.9743C16.0637 25.1673 18.8571 24.2628 21.035 22.4487L27.2925 28.7075C27.3854 28.8004 27.4957 28.8741 27.6171 28.9244C27.7385 28.9747 27.8686 29.0005 28 29.0005C28.1314 29.0005 28.2615 28.9747 28.3829 28.9244C28.5043 28.8741 28.6146 28.8004 28.7075 28.7075C28.8004 28.6146 28.8741 28.5043 28.9244 28.3829C28.9747 28.2615 29.0006 28.1314 29.0006 28C29.0006 27.8686 28.9747 27.7385 28.9244 27.6171C28.8741 27.4957 28.8004 27.3854 28.7075 27.2925ZM5.00001 14C5.00001 12.2199 5.52785 10.4799 6.51678 8.99985C7.50572 7.5198 8.91132 6.36625 10.5559 5.68506C12.2004 5.00388 14.01 4.82565 15.7558 5.17291C17.5017 5.52018 19.1053 6.37735 20.364 7.63602C21.6226 8.89469 22.4798 10.4983 22.8271 12.2442C23.1743 13.99 22.9961 15.7996 22.3149 17.4441C21.6337 19.0887 20.4802 20.4943 19.0001 21.4832C17.5201 22.4721 15.78 23 14 23C11.6139 22.9973 9.32623 22.0483 7.63897 20.361C5.95172 18.6738 5.00266 16.3861 5.00001 14Z",
|
|
80
80
|
viewBox: "0 0 32 32",
|
|
81
81
|
},
|
|
82
|
-
|
|
82
|
+
download: {
|
|
83
83
|
selected:
|
|
84
84
|
"M27 6V26H5V6C5 5.46957 5.21071 4.96086 5.58579 4.58579C5.96086 4.21071 6.46957 4 7 4H25C25.5304 4 26.0391 4.21071 26.4142 4.58579C26.7893 4.96086 27 5.46957 27 6Z",
|
|
85
85
|
d: "M28 18V26C28 26.2652 27.8946 26.5196 27.7071 26.7071C27.5196 26.8946 27.2652 27 27 27H5C4.73478 27 4.48043 26.8946 4.29289 26.7071C4.10536 26.5196 4 26.2652 4 26V18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1054 4.73478 17 5 17C5.26522 17 5.51957 17.1054 5.70711 17.2929C5.89464 17.4804 6 17.7348 6 18V25H26V18C26 17.7348 26.1054 17.4804 26.2929 17.2929C26.4804 17.1054 26.7348 17 27 17C27.2652 17 27.5196 17.1054 27.7071 17.2929C27.8946 17.4804 28 17.7348 28 18ZM15.2925 18.7075C15.3854 18.8005 15.4957 18.8742 15.6171 18.9246C15.7385 18.9749 15.8686 19.0008 16 19.0008C16.1314 19.0008 16.2615 18.9749 16.3829 18.9246C16.5043 18.8742 16.6146 18.8005 16.7075 18.7075L21.7075 13.7075C21.8004 13.6146 21.8741 13.5043 21.9244 13.3829C21.9747 13.2615 22.0006 13.1314 22.0006 13C22.0006 12.8686 21.9747 12.7385 21.9244 12.6171C21.8741 12.4957 21.8004 12.3854 21.7075 12.2925C21.6146 12.1996 21.5043 12.1259 21.3829 12.0756C21.2615 12.0253 21.1314 11.9994 21 11.9994C20.8686 11.9994 20.7385 12.0253 20.6171 12.0756C20.4957 12.1259 20.3854 12.1996 20.2925 12.2925L17 15.5863V4C17 3.73478 16.8946 3.48043 16.7071 3.29289C16.5196 3.10536 16.2652 3 16 3C15.7348 3 15.4804 3.10536 15.2929 3.29289C15.1054 3.48043 15 3.73478 15 4V15.5863L11.7075 12.2925C11.5199 12.1049 11.2654 11.9994 11 11.9994C10.7346 11.9994 10.4801 12.1049 10.2925 12.2925C10.1049 12.4801 9.99944 12.7346 9.99944 13C9.99944 13.2654 10.1049 13.5199 10.2925 13.7075L15.2925 18.7075Z",
|
|
86
86
|
viewBox: "0 0 32 32",
|
|
87
87
|
},
|
|
88
|
-
|
|
88
|
+
upload: {
|
|
89
89
|
selected:
|
|
90
90
|
"M27 6V26H5V6C5 5.46957 5.21071 4.96086 5.58579 4.58579C5.96086 4.21071 6.46957 4 7 4H25C25.5304 4 26.0391 4.21071 26.4142 4.58579C26.7893 4.96086 27 5.46957 27 6Z",
|
|
91
91
|
d: "M28 18V26C28 26.2652 27.8946 26.5196 27.7071 26.7071C27.5196 26.8946 27.2652 27 27 27H5C4.73478 27 4.48043 26.8946 4.29289 26.7071C4.10536 26.5196 4 26.2652 4 26V18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1053 4.73478 17 5 17C5.26522 17 5.51957 17.1053 5.70711 17.2929C5.89464 17.4804 6 17.7348 6 18V25H26V18C26 17.7348 26.1054 17.4804 26.2929 17.2929C26.4804 17.1053 26.7348 17 27 17C27.2652 17 27.5196 17.1053 27.7071 17.2929C27.8946 17.4804 28 17.7348 28 18ZM11.7075 9.70749L15 6.41374V18C15 18.2652 15.1054 18.5196 15.2929 18.7071C15.4804 18.8946 15.7348 19 16 19C16.2652 19 16.5196 18.8946 16.7071 18.7071C16.8946 18.5196 17 18.2652 17 18V6.41374L20.2925 9.70749C20.4801 9.89513 20.7346 10.0005 21 10.0005C21.2654 10.0005 21.5199 9.89513 21.7075 9.70749C21.8951 9.51985 22.0006 9.26536 22.0006 8.99999C22.0006 8.73463 21.8951 8.48013 21.7075 8.29249L16.7075 3.29249C16.6146 3.19952 16.5043 3.12576 16.3829 3.07543C16.2615 3.02511 16.1314 2.99921 16 2.99921C15.8686 2.99921 15.7385 3.02511 15.6171 3.07543C15.4957 3.12576 15.3854 3.19952 15.2925 3.29249L10.2925 8.29249C10.1049 8.48013 9.99944 8.73463 9.99944 8.99999C9.99944 9.26536 10.1049 9.51985 10.2925 9.70749C10.4801 9.89513 10.7346 10.0005 11 10.0005C11.2654 10.0005 11.5199 9.89513 11.7075 9.70749Z",
|
|
@@ -30,6 +30,12 @@ onMount(() => {
|
|
|
30
30
|
window.addEventListener("beforeunload", () => {
|
|
31
31
|
sessionStorage.removeItem("showHelpModals");
|
|
32
32
|
});
|
|
33
|
+
let unsubscribe = buttonIds.subscribe((ids) => {
|
|
34
|
+
if (ids.length > 0) {
|
|
35
|
+
activeModalStore.set(ids[0]); // Set first button as active
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
return unsubscribe;
|
|
33
39
|
});
|
|
34
40
|
</script>
|
|
35
41
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.90-component.toolbar",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"homepage": "https://onsvisual.github.io/svelte-components",
|
|
@@ -131,6 +131,8 @@
|
|
|
131
131
|
"./globals.d.ts": "./dist/globals.d.ts",
|
|
132
132
|
"./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
|
|
133
133
|
"./inputs/Button/Icon.svelte": "./dist/inputs/Button/Icon.svelte",
|
|
134
|
+
"./inputs/ButtonGroup/ButtonGroup.svelte": "./dist/inputs/ButtonGroup/ButtonGroup.svelte",
|
|
135
|
+
"./inputs/ButtonGroup/ButtonGroupItem.svelte": "./dist/inputs/ButtonGroup/ButtonGroupItem.svelte",
|
|
134
136
|
"./inputs/Checkbox/Checkbox.svelte": "./dist/inputs/Checkbox/Checkbox.svelte",
|
|
135
137
|
"./inputs/Checkboxes/Checkboxes.svelte": "./dist/inputs/Checkboxes/Checkboxes.svelte",
|
|
136
138
|
"./inputs/Dropdown/Dropdown.svelte": "./dist/inputs/Dropdown/Dropdown.svelte",
|