@onsvisual/svelte-components 0.1.90-component.toolbar → 0.1.91-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.
|
@@ -12,6 +12,8 @@ export let helpText = null;
|
|
|
12
12
|
export let selected = false;
|
|
13
13
|
export let custom = false;
|
|
14
14
|
export let hasAriaControls = false;
|
|
15
|
+
export let sticky = false;
|
|
16
|
+
export let transient = false;
|
|
15
17
|
const dispatch = createEventDispatcher();
|
|
16
18
|
let buttonElement;
|
|
17
19
|
// Get activeModalId store from context
|
|
@@ -31,9 +33,17 @@ $: isActive = $activeModalId === id;
|
|
|
31
33
|
// Subscribe to the store to determine if this modal is active
|
|
32
34
|
function handleClick() {
|
|
33
35
|
if (!disabled) {
|
|
36
|
+
if (transient) {
|
|
37
|
+
// If it's a transient button, just trigger the action and return
|
|
38
|
+
dispatch("click");
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
34
41
|
dispatch("click");
|
|
42
|
+
if ($activeModalId === id && sticky) {
|
|
43
|
+
// If it's already active and sticky, keep it selected
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
35
46
|
activeModalId.set(isActive ? null : id); // Toggle the modal
|
|
36
|
-
// maybe something here to check if selected
|
|
37
47
|
}
|
|
38
48
|
}
|
|
39
49
|
</script>
|
|
@@ -47,9 +57,9 @@ function handleClick() {
|
|
|
47
57
|
<button
|
|
48
58
|
type="button"
|
|
49
59
|
aria-label="{label}"
|
|
50
|
-
class="
|
|
51
|
-
|
|
52
|
-
|
|
60
|
+
class="toolbar-button {disabled ? 'disabled' : ''} {isActive && !transient
|
|
61
|
+
? 'selected'
|
|
62
|
+
: ''} {classes}"
|
|
53
63
|
on:click="{handleClick}"
|
|
54
64
|
disabled="{disabled}"
|
|
55
65
|
bind:this="{buttonElement}"
|
|
@@ -57,7 +67,11 @@ function handleClick() {
|
|
|
57
67
|
aria-controls="{hasAriaControls ? `panel-${id}` : undefined}"
|
|
58
68
|
>
|
|
59
69
|
{#if icon}
|
|
60
|
-
<Icon
|
|
70
|
+
<Icon
|
|
71
|
+
type="{icon}"
|
|
72
|
+
selected="{!transient ? (isActive ? true : false) : false}"
|
|
73
|
+
disabled="{disabled}"
|
|
74
|
+
/>
|
|
61
75
|
{:else}
|
|
62
76
|
{label}
|
|
63
77
|
{/if}
|
|
@@ -77,6 +91,37 @@ function handleClick() {
|
|
|
77
91
|
{/if}
|
|
78
92
|
</div>
|
|
79
93
|
|
|
94
|
+
<!--
|
|
95
|
+
|
|
96
|
+
/* /* Slightly darker gray when clicked */
|
|
97
|
+
|
|
98
|
+
/*
|
|
99
|
+
button:active {
|
|
100
|
+
background-color: #d6d6d6;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
button.active {
|
|
104
|
+
background-color: #ddd; /* Selected button background */
|
|
105
|
+
border: 2px solid #333; /* Active button border */
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
button:hover:active {
|
|
109
|
+
background-color: #ccc; /* Slightly more contrast when active */
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
button:disabled {
|
|
113
|
+
opacity: 0.5;
|
|
114
|
+
cursor: not-allowed;
|
|
115
|
+
background-color: #f2f2f2;
|
|
116
|
+
border: 1px solid #ddd;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
button:hover:disabled {
|
|
120
|
+
background-color: #f2f2f2; /* Keep it the same so disabled buttons don’t change on hover */
|
|
121
|
+
border: 1px solid #ddd;
|
|
122
|
+
} */
|
|
123
|
+
-->
|
|
124
|
+
|
|
80
125
|
<style>
|
|
81
126
|
.toolbar-button-wrapper {
|
|
82
127
|
position: relative;
|
|
@@ -101,4 +146,16 @@ function handleClick() {
|
|
|
101
146
|
.selected {
|
|
102
147
|
background: #e9eff4;
|
|
103
148
|
border-radius: 8px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
button:hover {
|
|
152
|
+
background-color: #f5f5f6;
|
|
153
|
+
border-radius: 8px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
button:focus {
|
|
157
|
+
outline: 2px solid #fbc900;
|
|
158
|
+
outline-offset: 2px;
|
|
159
|
+
box-shadow: 0 0 2px 2px #222222;
|
|
160
|
+
border-radius: 8px;
|
|
104
161
|
}</style>
|