@likable-hair/svelte 2.0.6 → 2.0.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.
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import CollapsibleDivider from "../simple/common/CollapsibleDivider.svelte";
|
|
3
3
|
import Icon from "../simple/media/Icon.svelte";
|
|
4
4
|
import MediaQuery from "../simple/common/MediaQuery.svelte";
|
|
5
|
-
export let _pagePadding = "20px 0 0 30px", _menuElementMarginBottom = "30px", _menuElementFontSize = "1.1rem", _menuElementFontWeight = "400", _menuColor = "#454444", _selectedMenuColor = "#0b66cc", _expandedSideBarWidth = "16rem", _collapsedSideBarWidth = "4.6rem", _headerHeight = "80px", _collapseTransitionTime = "0.4s", _sideBarBackgroundColor = "white", _overlayColor = "hsla(240,5%,65%,.2)", _headerBackgroundColor = "#FFFF";
|
|
6
|
-
export let drawerOpened = false, drawerCollapsed = false,
|
|
5
|
+
export let _pagePadding = "20px 0 0 30px", _menuElementMarginBottom = "30px", _menuElementFontSize = "1.1rem", _menuElementFontWeight = "400", _menuColor = "#454444", _selectedMenuColor = "#0b66cc", _expandedSideBarWidth = "16rem", _collapsedSideBarWidth = "4.6rem", _headerHeight = "80px", _collapseTransitionTime = "0.4s", _sideBarBackgroundColor = "white", _overlayColor = "hsla(240,5%,65%,.2)", _headerBackgroundColor = "#FFFF", _dividersColor = "#d2d2d2";
|
|
6
|
+
export let drawerOpened = false, drawerCollapsed = false, menuItems = [], menuIconsSize = 16, selectedMenuElementId = void 0, fullLogo = void 0, partialLogo = void 0, openedHeader = false;
|
|
7
7
|
let dispatch = createEventDispatcher();
|
|
8
8
|
function toggleMenu() {
|
|
9
9
|
drawerOpened = !drawerOpened;
|
|
@@ -13,8 +13,10 @@ function toggleExpansion() {
|
|
|
13
13
|
drawerCollapsed = !drawerCollapsed;
|
|
14
14
|
}
|
|
15
15
|
function handleMenuClick(menu) {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
if ("id" in menu) {
|
|
17
|
+
selectedMenuElementId = menu.id;
|
|
18
|
+
dispatch("menu-click", { menu });
|
|
19
|
+
}
|
|
18
20
|
}
|
|
19
21
|
function handleOverlayClick() {
|
|
20
22
|
}
|
|
@@ -26,7 +28,7 @@ $:
|
|
|
26
28
|
<MediaQuery let:mAndDown>
|
|
27
29
|
<div
|
|
28
30
|
style:--collapsible-side-bar-layout-expanded-width={_expandedSideBarWidth}
|
|
29
|
-
style:--collapsible-side-bar-layout-header-height={_headerHeight}
|
|
31
|
+
style:--collapsible-side-bar-layout-header-height={openedHeader || mAndDown ? _headerHeight : "0px"}
|
|
30
32
|
style:--collapsible-side-bar-layout-collapsed-width={_collapsedSideBarWidth}
|
|
31
33
|
style:--collapsible-side-bar-layout-collapse-transition-time={_collapseTransitionTime}
|
|
32
34
|
style:--collapsible-side-bar-layout-menu-element-margin-bottom={_menuElementMarginBottom}
|
|
@@ -37,6 +39,7 @@ $:
|
|
|
37
39
|
style:--collapsible-side-bar-layout-sidebar-background-color={_sideBarBackgroundColor}
|
|
38
40
|
style:--collapsible-side-bar-layout-overlay-color={_overlayColor}
|
|
39
41
|
style:--collapsible-side-bar-layout-header-background-color={_headerBackgroundColor}
|
|
42
|
+
style:--collapsible-side-bar-layout-divider-color={_dividersColor}
|
|
40
43
|
>
|
|
41
44
|
<header
|
|
42
45
|
class="side-bar"
|
|
@@ -59,9 +62,11 @@ $:
|
|
|
59
62
|
></Icon>
|
|
60
63
|
</div>
|
|
61
64
|
{/if}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
{#if openedHeader || mAndDown}
|
|
66
|
+
<slot name="inner-menu" hamburgerVisible={mAndDown}>
|
|
67
|
+
Menu
|
|
68
|
+
</slot>
|
|
69
|
+
{/if}
|
|
65
70
|
</div>
|
|
66
71
|
</slot>
|
|
67
72
|
</div>
|
|
@@ -85,16 +90,27 @@ $:
|
|
|
85
90
|
class="menu"
|
|
86
91
|
class:collapsed={drawerCollapsed}
|
|
87
92
|
>
|
|
88
|
-
{#each
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
93
|
+
{#each menuItems as menu}
|
|
94
|
+
{#if 'id' in menu}
|
|
95
|
+
<div
|
|
96
|
+
class="menu-row"
|
|
97
|
+
class:selected={menu.id === selectedMenuElementId}
|
|
98
|
+
on:click={() => handleMenuClick(menu)}
|
|
99
|
+
on:keypress
|
|
100
|
+
>
|
|
101
|
+
<div class="menu-icon"><Icon name={menu.icon} size={menuIconsSize}></Icon></div>
|
|
102
|
+
<div class="menu-name">{menu.name}</div>
|
|
103
|
+
</div>
|
|
104
|
+
{:else}
|
|
105
|
+
<div
|
|
106
|
+
style:margin-top={menu.marginTop}
|
|
107
|
+
style:margin-bottom={menu.marginBottom}
|
|
108
|
+
style:margin-right="14px"
|
|
109
|
+
class:divider={menu.divider}
|
|
110
|
+
class="menu-row"
|
|
111
|
+
>
|
|
112
|
+
</div>
|
|
113
|
+
{/if}
|
|
98
114
|
{/each}
|
|
99
115
|
</div>
|
|
100
116
|
</div>
|
|
@@ -102,6 +118,9 @@ $:
|
|
|
102
118
|
<CollapsibleDivider
|
|
103
119
|
bind:collapsed={drawerCollapsed}
|
|
104
120
|
disabled={mAndDown}
|
|
121
|
+
_circleColor={_dividersColor}
|
|
122
|
+
_dividerColor={_dividersColor}
|
|
123
|
+
_iconColor={_dividersColor}
|
|
105
124
|
></CollapsibleDivider>
|
|
106
125
|
<slot name="sidebar-footer" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}></slot>
|
|
107
126
|
</div>
|
|
@@ -129,6 +148,11 @@ $:
|
|
|
129
148
|
|
|
130
149
|
<style>
|
|
131
150
|
|
|
151
|
+
.divider {
|
|
152
|
+
height: 1px;
|
|
153
|
+
background-color: var(--collapsible-side-bar-layout-divider-color);
|
|
154
|
+
}
|
|
155
|
+
|
|
132
156
|
.logo-container {
|
|
133
157
|
padding-left: 16px;
|
|
134
158
|
padding-top: 10px;
|
|
@@ -297,6 +321,10 @@ $:
|
|
|
297
321
|
left: 0;
|
|
298
322
|
}
|
|
299
323
|
|
|
324
|
+
.header-toolbar.collapsed {
|
|
325
|
+
left: 0;
|
|
326
|
+
}
|
|
327
|
+
|
|
300
328
|
.header-toolbar.opened {
|
|
301
329
|
background-color: inherit;
|
|
302
330
|
}
|
|
@@ -309,6 +337,10 @@ $:
|
|
|
309
337
|
padding-left: 0;
|
|
310
338
|
}
|
|
311
339
|
|
|
340
|
+
.main-section.collapsed {
|
|
341
|
+
padding-left: 0;
|
|
342
|
+
}
|
|
343
|
+
|
|
312
344
|
.blurred {
|
|
313
345
|
backdrop-filter: blur(4px);
|
|
314
346
|
}
|
|
@@ -14,17 +14,23 @@ declare const __propDef: {
|
|
|
14
14
|
_sideBarBackgroundColor?: string | undefined;
|
|
15
15
|
_overlayColor?: string | undefined;
|
|
16
16
|
_headerBackgroundColor?: string | undefined;
|
|
17
|
+
_dividersColor?: string | undefined;
|
|
17
18
|
drawerOpened?: boolean | undefined;
|
|
18
19
|
drawerCollapsed?: boolean | undefined;
|
|
19
|
-
|
|
20
|
+
menuItems?: ({
|
|
20
21
|
id: string;
|
|
21
22
|
name: string;
|
|
22
23
|
icon: string;
|
|
23
|
-
}
|
|
24
|
+
} | {
|
|
25
|
+
divider: boolean;
|
|
26
|
+
marginTop: string;
|
|
27
|
+
marginBottom: string;
|
|
28
|
+
})[] | undefined;
|
|
24
29
|
menuIconsSize?: number | undefined;
|
|
25
30
|
selectedMenuElementId?: string | undefined;
|
|
26
31
|
fullLogo?: string | undefined;
|
|
27
32
|
partialLogo?: string | undefined;
|
|
33
|
+
openedHeader?: boolean | undefined;
|
|
28
34
|
};
|
|
29
35
|
events: {
|
|
30
36
|
keypress: KeyboardEvent;
|
package/dist/index.d.ts
CHANGED
|
@@ -43,3 +43,5 @@ export { default as ProductCard } from './components/composed/shop/ProductCard.s
|
|
|
43
43
|
export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
|
|
44
44
|
export { default as mediaQuery } from './stores/mediaQuery';
|
|
45
45
|
export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';
|
|
46
|
+
export { default as CollapsibleSideBarLayout } from './components/layouts/CollapsibleSideBarLayout.svelte';
|
|
47
|
+
export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';
|
package/dist/index.js
CHANGED
|
@@ -43,3 +43,5 @@ export { default as ProductCard } from './components/composed/shop/ProductCard.s
|
|
|
43
43
|
export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
|
|
44
44
|
export { default as mediaQuery } from './stores/mediaQuery';
|
|
45
45
|
export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';
|
|
46
|
+
export { default as CollapsibleSideBarLayout } from './components/layouts/CollapsibleSideBarLayout.svelte';
|
|
47
|
+
export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';
|