@likable-hair/svelte 3.3.7 → 3.3.8
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/components/simple/lists/ColorInvertedSelector.svelte +1 -0
- package/dist/components/simple/lists/HierarchyMenu.css +18 -0
- package/dist/components/simple/lists/HierarchyMenu.svelte +276 -0
- package/dist/components/simple/lists/HierarchyMenu.svelte.d.ts +42 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--hierarchy-menu-default-gap: 4px;
|
|
3
|
+
--hierarchy-menu-default-width: 100%;
|
|
4
|
+
--hierarchy-menu-default-element-border-radius: 8px;
|
|
5
|
+
--hierarchy-menu-default-element-background-color: transparent;
|
|
6
|
+
--hierarchy-menu-default-element-color: inherit;
|
|
7
|
+
--hierarchy-menu-default-element-hover-background-color: rgb(var(--global-color-background-300), .5);
|
|
8
|
+
--hierarchy-menu-default-element-hover-color: inherit;
|
|
9
|
+
--hierarchy-menu-default-element-active-background-color: rgb(var(--global-color-background-300), .5);
|
|
10
|
+
--hierarchy-menu-default-element-active-color: inherit;
|
|
11
|
+
--hierarchy-menu-default-element-selected-background-color: rgb(var(--global-color-primary-500), .6);
|
|
12
|
+
--hierarchy-menu-default-element-selected-color: rgb(var(--global-color-grey-50));
|
|
13
|
+
--hierarchy-menu-default-element-selected-font-weight: 700;
|
|
14
|
+
--hierarchy-menu-default-element-padding: 8px;
|
|
15
|
+
--hierarchy-menu-default-element-cursor: pointer;
|
|
16
|
+
--hierarchy-menu-default-icon-button-padding: 0px 12px 0px 2px;
|
|
17
|
+
--hierarchy-menu-default-sub-options-padding: 8px 0px 8px 40px;
|
|
18
|
+
}
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
<script context="module"></script>
|
|
2
|
+
|
|
3
|
+
<script>import "../../../css/main.css";
|
|
4
|
+
import "./HierarchyMenu.css";
|
|
5
|
+
import { createEventDispatcher } from "svelte";
|
|
6
|
+
import { Icon } from "../../..";
|
|
7
|
+
import { slide } from "svelte/transition";
|
|
8
|
+
import { sineIn } from "svelte/easing";
|
|
9
|
+
export let options, selected = void 0, expanded = [], iconsOnly = false;
|
|
10
|
+
let dispatch = createEventDispatcher();
|
|
11
|
+
function handleOptionClick(option) {
|
|
12
|
+
selected = option.name;
|
|
13
|
+
dispatch("optionClick", { option });
|
|
14
|
+
}
|
|
15
|
+
function handleExpandOptionClick(option) {
|
|
16
|
+
if (expanded.includes(option.name))
|
|
17
|
+
expanded = expanded.filter((e) => e !== option.name);
|
|
18
|
+
else
|
|
19
|
+
expanded = [...expanded, option.name];
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<div class="hierarchy-container">
|
|
24
|
+
{#each options as option}
|
|
25
|
+
{@const isExpanded = expanded.includes(option.name)}
|
|
26
|
+
<div class="menu-element">
|
|
27
|
+
<div
|
|
28
|
+
class="main-option"
|
|
29
|
+
role="presentation"
|
|
30
|
+
class:selected={option.name === selected}
|
|
31
|
+
on:click={() => handleOptionClick(option)}
|
|
32
|
+
>
|
|
33
|
+
<div>
|
|
34
|
+
<slot name="prepend" {option}>
|
|
35
|
+
{#if !!option.options}
|
|
36
|
+
<button
|
|
37
|
+
class="style-less-button icon-button"
|
|
38
|
+
class:no-transform={iconsOnly}
|
|
39
|
+
on:click|stopPropagation={(event) => {
|
|
40
|
+
if(!iconsOnly) {
|
|
41
|
+
handleExpandOptionClick(option)
|
|
42
|
+
} else {
|
|
43
|
+
handleOptionClick(option)
|
|
44
|
+
}
|
|
45
|
+
}}
|
|
46
|
+
>
|
|
47
|
+
{#if !!option.icon}
|
|
48
|
+
<Icon name={option.icon} />
|
|
49
|
+
{:else if isExpanded}
|
|
50
|
+
<Icon name="mdi-chevron-down" />
|
|
51
|
+
{:else}
|
|
52
|
+
<Icon name="mdi-chevron-right" />
|
|
53
|
+
{/if}
|
|
54
|
+
</button>
|
|
55
|
+
|
|
56
|
+
{#if !iconsOnly}
|
|
57
|
+
<button
|
|
58
|
+
class="style-less-button expand-button"
|
|
59
|
+
on:click|stopPropagation={() => handleExpandOptionClick(option)}
|
|
60
|
+
>
|
|
61
|
+
{#if isExpanded}
|
|
62
|
+
<Icon name="mdi-chevron-down" />
|
|
63
|
+
{:else}
|
|
64
|
+
<Icon name="mdi-chevron-right" />
|
|
65
|
+
{/if}
|
|
66
|
+
</button>
|
|
67
|
+
{/if}
|
|
68
|
+
{:else if !!option.icon}
|
|
69
|
+
<div class="icon-only">
|
|
70
|
+
<Icon name={option.icon} />
|
|
71
|
+
</div>
|
|
72
|
+
{/if}
|
|
73
|
+
</slot>
|
|
74
|
+
</div>
|
|
75
|
+
{#if !iconsOnly}
|
|
76
|
+
<slot name="option" {option}>
|
|
77
|
+
<div class="label">
|
|
78
|
+
{option.label}
|
|
79
|
+
</div>
|
|
80
|
+
</slot>
|
|
81
|
+
{#if !!$$slots.append}
|
|
82
|
+
<div
|
|
83
|
+
on:click|stopPropagation={() => {}}
|
|
84
|
+
on:keydown={() => {}}
|
|
85
|
+
role="presentation"
|
|
86
|
+
>
|
|
87
|
+
<slot name="append" {option} />
|
|
88
|
+
</div>
|
|
89
|
+
{/if}
|
|
90
|
+
{/if}
|
|
91
|
+
</div>
|
|
92
|
+
{#if !!option.options && isExpanded && !iconsOnly}
|
|
93
|
+
<div
|
|
94
|
+
class="sub-options-container"
|
|
95
|
+
transition:slide={{
|
|
96
|
+
duration: 150,
|
|
97
|
+
easing: sineIn,
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
{#each option.options as subOption}
|
|
101
|
+
<div class="sub-menu-element">
|
|
102
|
+
<div
|
|
103
|
+
role="presentation"
|
|
104
|
+
class:selected={subOption.name === selected}
|
|
105
|
+
on:click={() => handleOptionClick(subOption)}
|
|
106
|
+
class="main-option sub-element-main-option"
|
|
107
|
+
>
|
|
108
|
+
<div>
|
|
109
|
+
<slot name="prepend" option={subOption}>
|
|
110
|
+
<div class="style-less-button sub-icon-button">
|
|
111
|
+
{#if !!subOption.icon}
|
|
112
|
+
<Icon name={subOption.icon} />
|
|
113
|
+
{/if}
|
|
114
|
+
</div>
|
|
115
|
+
</slot>
|
|
116
|
+
</div>
|
|
117
|
+
<slot name="option" option={subOption}>
|
|
118
|
+
<div class="label">
|
|
119
|
+
{subOption.label}
|
|
120
|
+
</div>
|
|
121
|
+
</slot>
|
|
122
|
+
{#if !!$$slots.append}
|
|
123
|
+
<div
|
|
124
|
+
on:click|stopPropagation={() => {}}
|
|
125
|
+
on:keydown={() => {}}
|
|
126
|
+
role="presentation"
|
|
127
|
+
>
|
|
128
|
+
<slot name="append" option={subOption} />
|
|
129
|
+
</div>
|
|
130
|
+
{/if}
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
{/each}
|
|
134
|
+
</div>
|
|
135
|
+
{/if}
|
|
136
|
+
</div>
|
|
137
|
+
{/each}
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<style>
|
|
141
|
+
.hierarchy-container {
|
|
142
|
+
display: flex;
|
|
143
|
+
flex-direction: column;
|
|
144
|
+
gap: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
|
|
145
|
+
height: var(--hierarchy-menu-height, var(--hierarchy-menu-default-height));
|
|
146
|
+
width: var(--hierarchy-menu-width, var(--hierarchy-menu-default-width));
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.sub-options-container {
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
gap: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
|
|
153
|
+
margin-top: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
|
|
154
|
+
margin-bottom: var(--hierarchy-menu-gap, var(--hierarchy-menu-default-gap));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.sub-element-main-option {
|
|
158
|
+
padding: var(
|
|
159
|
+
--hierarchy-menu-sub-options-padding,
|
|
160
|
+
var(--hierarchy-menu-default-sub-options-padding)
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.main-option {
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
gap: 4px;
|
|
168
|
+
cursor: var(
|
|
169
|
+
--hierarchy-menu-element-cursor,
|
|
170
|
+
var(--hierarchy-menu-default-element-cursor)
|
|
171
|
+
);
|
|
172
|
+
border-radius: var(
|
|
173
|
+
--hierarchy-menu-element-border-radius,
|
|
174
|
+
var(--hierarchy-menu-default-element-border-radius)
|
|
175
|
+
);
|
|
176
|
+
background-color: var(
|
|
177
|
+
--hierarchy-menu-element-background-color,
|
|
178
|
+
var(--hierarchy-menu-default-element-background-color)
|
|
179
|
+
);
|
|
180
|
+
color: var(
|
|
181
|
+
--hierarchy-menu-element-color,
|
|
182
|
+
var(--hierarchy-menu-default-element-color)
|
|
183
|
+
);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.main-option:not(.sub-element-main-option) {
|
|
187
|
+
padding: var(
|
|
188
|
+
--hierarchy-menu-element-padding,
|
|
189
|
+
var(--hierarchy-menu-default-element-padding)
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.main-option.selected {
|
|
194
|
+
background-color: var(
|
|
195
|
+
--hierarchy-menu-element-selected-background-color,
|
|
196
|
+
var(--hierarchy-menu-default-element-selected-background-color)
|
|
197
|
+
);
|
|
198
|
+
color: var(
|
|
199
|
+
--hierarchy-menu-element-selected-color,
|
|
200
|
+
var(--hierarchy-menu-default-element-selected-color)
|
|
201
|
+
);
|
|
202
|
+
font-weight: var(
|
|
203
|
+
--hierarchy-menu-element-selected-font-weight,
|
|
204
|
+
var(--hierarchy-menu-default-element-selected-font-weight)
|
|
205
|
+
);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.main-option:hover:not(.selected) {
|
|
209
|
+
background-color: var(
|
|
210
|
+
--hierarchy-menu-element-hover-background-color,
|
|
211
|
+
var(--hierarchy-menu-default-element-hover-background-color)
|
|
212
|
+
);
|
|
213
|
+
color: var(
|
|
214
|
+
--hierarchy-menu-element-hover-color,
|
|
215
|
+
var(--hierarchy-menu-default-element-hover-color)
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.main-option:active:not(.selected) {
|
|
220
|
+
background-color: var(
|
|
221
|
+
--hierarchy-menu-element-active-background-color,
|
|
222
|
+
var(--hierarchy-menu-default-element-active-background-color)
|
|
223
|
+
);
|
|
224
|
+
color: var(
|
|
225
|
+
--hierarchy-menu-element-active-color,
|
|
226
|
+
var(--hierarchy-menu-default-element-active-color)
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.style-less-button {
|
|
231
|
+
background: none;
|
|
232
|
+
color: inherit;
|
|
233
|
+
border: none;
|
|
234
|
+
padding: 0;
|
|
235
|
+
font: inherit;
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
outline: inherit;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.main-option:hover .expand-button {
|
|
241
|
+
display: block;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.main-option:hover .icon-button:not(.no-transform) {
|
|
245
|
+
display: none;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.icon-only {
|
|
249
|
+
padding: var(
|
|
250
|
+
--hierarchy-menu-icon-button-padding,
|
|
251
|
+
var(--hierarchy-menu-default-icon-button-padding)
|
|
252
|
+
);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.expand-button {
|
|
256
|
+
display: none;
|
|
257
|
+
padding: var(
|
|
258
|
+
--hierarchy-menu-icon-button-padding,
|
|
259
|
+
var(--hierarchy-menu-default-icon-button-padding)
|
|
260
|
+
);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.icon-button {
|
|
264
|
+
padding: var(
|
|
265
|
+
--hierarchy-menu-icon-button-padding,
|
|
266
|
+
var(--hierarchy-menu-default-icon-button-padding)
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.sub-icon-button {
|
|
271
|
+
padding: var(
|
|
272
|
+
--hierarchy-menu-icon-button-padding,
|
|
273
|
+
var(--hierarchy-menu-default-icon-button-padding)
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
</style>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
export type Option = {
|
|
3
|
+
label: string;
|
|
4
|
+
name: string;
|
|
5
|
+
icon?: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
options?: Omit<Option, "options">[];
|
|
8
|
+
};
|
|
9
|
+
import "../../../css/main.css";
|
|
10
|
+
import "./HierarchyMenu.css";
|
|
11
|
+
declare const __propDef: {
|
|
12
|
+
props: {
|
|
13
|
+
options: Option[];
|
|
14
|
+
selected?: string | undefined;
|
|
15
|
+
expanded?: string[] | undefined;
|
|
16
|
+
iconsOnly?: boolean | undefined;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
optionClick: CustomEvent<{
|
|
20
|
+
option: Option;
|
|
21
|
+
}>;
|
|
22
|
+
} & {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {
|
|
26
|
+
prepend: {
|
|
27
|
+
option: Omit<Option, "options">;
|
|
28
|
+
};
|
|
29
|
+
option: {
|
|
30
|
+
option: Omit<Option, "options">;
|
|
31
|
+
};
|
|
32
|
+
append: {
|
|
33
|
+
option: Omit<Option, "options">;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
export type HierarchyMenuProps = typeof __propDef.props;
|
|
38
|
+
export type HierarchyMenuEvents = typeof __propDef.events;
|
|
39
|
+
export type HierarchyMenuSlots = typeof __propDef.slots;
|
|
40
|
+
export default class HierarchyMenu extends SvelteComponent<HierarchyMenuProps, HierarchyMenuEvents, HierarchyMenuSlots> {
|
|
41
|
+
}
|
|
42
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ export { default as SelectableMenuList } from './components/simple/lists/Selecta
|
|
|
30
30
|
export { default as SelectableVerticalList } from './components/simple/lists/SelectableVerticalList.svelte';
|
|
31
31
|
export { default as SidebarMenuList } from './components/simple/lists/SidebarMenuList.svelte';
|
|
32
32
|
export { default as SimpleTable } from './components/simple/lists/SimpleTable.svelte';
|
|
33
|
+
export { default as HierarchyMenu } from './components/simple/lists/HierarchyMenu.svelte';
|
|
33
34
|
export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';
|
|
34
35
|
export { default as Skeleton } from './components/simple/loaders/Skeleton.svelte';
|
|
35
36
|
export { default as AlertBanner } from './components/simple/notifiers/AlertBanner.svelte';
|
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ export { default as SelectableMenuList } from './components/simple/lists/Selecta
|
|
|
30
30
|
export { default as SelectableVerticalList } from './components/simple/lists/SelectableVerticalList.svelte';
|
|
31
31
|
export { default as SidebarMenuList } from './components/simple/lists/SidebarMenuList.svelte';
|
|
32
32
|
export { default as SimpleTable } from './components/simple/lists/SimpleTable.svelte';
|
|
33
|
+
export { default as HierarchyMenu } from './components/simple/lists/HierarchyMenu.svelte';
|
|
33
34
|
export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';
|
|
34
35
|
export { default as Skeleton } from './components/simple/loaders/Skeleton.svelte';
|
|
35
36
|
export { default as AlertBanner } from './components/simple/notifiers/AlertBanner.svelte';
|