@miozu/jera 0.7.0 → 0.7.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/package.json
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
subroutes = [],
|
|
35
35
|
badge = null,
|
|
36
36
|
preload = true,
|
|
37
|
+
variant = 'default',
|
|
37
38
|
onclick = null,
|
|
38
39
|
isActiveRoute = () => false,
|
|
39
40
|
class: className = '',
|
|
@@ -74,6 +75,7 @@
|
|
|
74
75
|
class="nav-item {className}"
|
|
75
76
|
class:active
|
|
76
77
|
class:collapsed={isCollapsed}
|
|
78
|
+
data-variant={variant}
|
|
77
79
|
title={isCollapsed ? label : null}
|
|
78
80
|
data-sveltekit-preload-data={preloadAttr}
|
|
79
81
|
>
|
|
@@ -94,16 +96,22 @@
|
|
|
94
96
|
<button
|
|
95
97
|
class="nav-item expandable {className}"
|
|
96
98
|
class:collapsed={isCollapsed}
|
|
99
|
+
data-variant={variant}
|
|
97
100
|
onclick={handleClick}
|
|
98
101
|
onmouseenter={handleMouseEnter}
|
|
99
102
|
onmouseleave={handleMouseLeave}
|
|
100
103
|
title={isCollapsed ? label : null}
|
|
101
104
|
>
|
|
105
|
+
{@render leading?.()}
|
|
102
106
|
{#if Icon}
|
|
103
107
|
<Icon size={18} class="nav-icon" />
|
|
104
108
|
{/if}
|
|
105
109
|
{#if !isCollapsed}
|
|
106
110
|
<span class="nav-label" transition:fade={{ duration: 150 }}>{label}</span>
|
|
111
|
+
{#if badge != null}
|
|
112
|
+
<span class="nav-badge" transition:fade={{ duration: 150 }}>{badge}</span>
|
|
113
|
+
{/if}
|
|
114
|
+
{@render trailing?.()}
|
|
107
115
|
<span transition:fade={{ duration: 150 }}>
|
|
108
116
|
<svg
|
|
109
117
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -122,6 +130,7 @@
|
|
|
122
130
|
</svg>
|
|
123
131
|
</span>
|
|
124
132
|
{/if}
|
|
133
|
+
{@render children?.()}
|
|
125
134
|
</button>
|
|
126
135
|
{#if expanded && !isCollapsed && subroutes.length > 0}
|
|
127
136
|
<ul class="subnav-list" transition:slide={{ duration: 200, easing: cubicOut }}>
|
|
@@ -143,6 +152,7 @@
|
|
|
143
152
|
class="nav-item {className}"
|
|
144
153
|
class:active
|
|
145
154
|
class:collapsed={isCollapsed}
|
|
155
|
+
data-variant={variant}
|
|
146
156
|
onclick={handleClick}
|
|
147
157
|
title={isCollapsed ? label : null}
|
|
148
158
|
>
|
|
@@ -295,4 +305,44 @@
|
|
|
295
305
|
font-weight: 500;
|
|
296
306
|
background-color: color-mix(in srgb, var(--color-base0D) 15%, transparent);
|
|
297
307
|
}
|
|
308
|
+
|
|
309
|
+
/* Variants */
|
|
310
|
+
.nav-item[data-variant="warning"] {
|
|
311
|
+
color: var(--color-base0A);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.nav-item[data-variant="warning"]:hover {
|
|
315
|
+
color: var(--color-base0A);
|
|
316
|
+
background-color: color-mix(in srgb, var(--color-base0A) 10%, transparent);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.nav-item[data-variant="warning"] :global(svg) {
|
|
320
|
+
color: var(--color-base0A);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.nav-item[data-variant="danger"] {
|
|
324
|
+
color: var(--color-base08);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.nav-item[data-variant="danger"]:hover {
|
|
328
|
+
color: var(--color-base08);
|
|
329
|
+
background-color: color-mix(in srgb, var(--color-base08) 10%, transparent);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.nav-item[data-variant="danger"] :global(svg) {
|
|
333
|
+
color: var(--color-base08);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.nav-item[data-variant="success"] {
|
|
337
|
+
color: var(--color-base0B);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.nav-item[data-variant="success"]:hover {
|
|
341
|
+
color: var(--color-base0B);
|
|
342
|
+
background-color: color-mix(in srgb, var(--color-base0B) 10%, transparent);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.nav-item[data-variant="success"] :global(svg) {
|
|
346
|
+
color: var(--color-base0B);
|
|
347
|
+
}
|
|
298
348
|
</style>
|