@likable-hair/svelte 2.0.7 → 2.0.9

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.
Files changed (5) hide show
  1. package/dist/components/layouts/CollapsibleSideBarLayout.svelte +50 -18
  2. package/dist/components/layouts/CollapsibleSideBarLayout.svelte.d.ts +8 -2
  3. package/dist/components/simple/buttons/Button.svelte +35 -30
  4. package/dist/components/simple/buttons/Button.svelte.d.ts +24 -23
  5. package/package.json +1 -1
package/dist/components/layouts/CollapsibleSideBarLayout.svelte CHANGED
@@ -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, menuElements = [], menuIconsSize = 16, selectedMenuElementId = void 0, fullLogo = void 0, partialLogo = void 0;
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
- selectedMenuElementId = menu.id;
17
- dispatch("menu-click", { menu });
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
- <slot name="inner-menu" hamburgerVisible={mAndDown}>
63
- Menu
64
- </slot>
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 menuElements as menu}
89
- <div
90
- class="menu-row"
91
- class:selected={menu.id === selectedMenuElementId}
92
- on:click={() => handleMenuClick(menu)}
93
- on:keypress
94
- >
95
- <div class="menu-icon"><Icon name={menu.icon} size={menuIconsSize}></Icon></div>
96
- <div class="menu-name">{menu.name}</div>
97
- </div>
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
  }
package/dist/components/layouts/CollapsibleSideBarLayout.svelte.d.ts CHANGED
@@ -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
- menuElements?: {
20
+ menuItems?: ({
20
21
  id: string;
21
22
  name: string;
22
23
  icon: string;
23
- }[] | undefined;
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/components/simple/buttons/Button.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>export let type = "default", active = false, loading = false, icon = void 0, iconSize = 15, maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = void 0, height = void 0, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = void 0, color = void 0, display = void 0, justifyContent = void 0, alignItems = void 0, backgroundColor = void 0, hoverBackgroundColor = "#88888847", activeBackgroundColor = hoverBackgroundColor, borderRadius = void 0, border = void 0, boxShadow = void 0, loaderHeight = "15px", loaderWidth = void 0, disabled = false;
1
+ <script>export let buttonType = "default", type = "button", active = false, loading = false, icon = void 0, iconSize = 15, disabled = false;
2
+ export let _maxWidth = void 0, _maxHeight = void 0, _minWidth = void 0, _minHeight = void 0, _width = void 0, _height = void 0, _textAlign = "center", _cursor = "pointer", _padding = "8px", _fontSize = void 0, _color = void 0, _display = void 0, _justifyContent = void 0, _alignItems = void 0, _backgroundColor = void 0, _hoverBackgroundColor = "#88888847", _activeBackgroundColor = _hoverBackgroundColor, _borderRadius = void 0, _border = void 0, _boxShadow = void 0, _loaderHeight = "15px", _loaderWidth = void 0;
2
3
  import { createEventDispatcher } from "svelte";
3
4
  const dispatch = createEventDispatcher();
4
5
  function handleClick(event) {
@@ -16,54 +17,58 @@ function handleKeyPress(event) {
16
17
  });
17
18
  }
18
19
  $:
19
- defaultBorderRadius = type == "icon" ? "50%" : "5px";
20
+ defaultBorderRadius = buttonType == "icon" ? "50%" : "5px";
20
21
  $:
21
22
  position = $$slots.append ? "relative" : void 0;
22
23
  import Icon from "../media/Icon.svelte";
23
24
  import CircularLoader from "../loaders/CircularLoader.svelte";
24
25
  </script>
25
26
 
26
- <div
27
- style:width
28
- style:max-width={maxWidth}
29
- style:min-width={minWidth}
30
- style:height
31
- style:max-height={maxHeight}
32
- style:min-height={minHeight}
33
- style:text-align={textAlign}
27
+ <button
28
+ type={type}
29
+ style:box-sizing="content-box"
30
+ style:font-family="inherit"
31
+ style:width={_width}
32
+ style:max-width={_maxWidth}
33
+ style:min-width={_minWidth}
34
+ style:height={_height}
35
+ style:max-height={_maxHeight}
36
+ style:min-height={_minHeight}
37
+ style:text-align={_textAlign}
34
38
  style:position
35
- style:cursor
36
- style:padding
37
- style:font-size={fontSize}
38
- style:color
39
- style:display
40
- style:justify-content={justifyContent}
41
- style:align-items={alignItems}
42
- style:--button-border={border}
43
- style:--button-border-radius={borderRadius
44
- ? borderRadius
39
+ style:cursor={_cursor}
40
+ style:padding={_padding}
41
+ style:font-size={_fontSize}
42
+ style:color={_color}
43
+ style:display={_display}
44
+ style:justify-content={_justifyContent}
45
+ style:align-items={_alignItems}
46
+ style:--button-border={_border}
47
+ style:--button-border-radius={_borderRadius
48
+ ? _borderRadius
45
49
  : defaultBorderRadius}
46
50
  style:--button-background-color={active
47
- ? activeBackgroundColor
48
- : backgroundColor}
49
- style:--button-hover-background-color={hoverBackgroundColor}
50
- style:--button-box-shadow={boxShadow}
51
+ ? _activeBackgroundColor
52
+ : _backgroundColor}
53
+ style:--button-hover-background-color={_hoverBackgroundColor}
54
+ style:--button-box-shadow={_boxShadow}
51
55
  style:--button-icon-height={iconSize + 5 + "pt"}
52
56
  style:--button-icon-width={iconSize + 5 + "pt"}
53
57
  class="button no-select"
54
- class:button-default={type === "default"}
55
- class:button-text={type === "text"}
56
- class:button-icon={type === "icon"}
58
+ class:button-default={buttonType === "default"}
59
+ class:button-text={buttonType === "text"}
60
+ class:button-icon={buttonType === "icon"}
57
61
  on:click={handleClick}
58
62
  on:keypress={handleKeyPress}
59
63
  >
60
64
  {#if loading}
61
65
  <div
62
- style:height={'calc(' + loaderHeight + ' + .6rem)'}
66
+ style:height={'calc(' + _loaderHeight + ' + .6rem)'}
63
67
  style:display="flex"
68
+ style:justify-content="center"
64
69
  style:align-items="center"
65
70
  >
66
- <CircularLoader {color} height={loaderHeight} width={loaderWidth} />
71
+ <CircularLoader color={_color} height={_loaderHeight} width={_loaderWidth} />
67
72
  </div>
68
73
  {:else}
69
74
  {#if !!icon}
@@ -77,7 +82,7 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
77
82
  </span>
78
83
  {/if}
79
84
  {/if}
80
- </div>
85
+ </button>
81
86
 
82
87
  <style>
83
88
  .append-item {
package/dist/components/simple/buttons/Button.svelte.d.ts CHANGED
@@ -1,34 +1,35 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- type?: "default" | "text" | "icon" | undefined;
4
+ buttonType?: "default" | "text" | "icon" | undefined;
5
+ type?: "submit" | "button" | undefined;
5
6
  active?: boolean | undefined;
6
7
  loading?: boolean | undefined;
7
8
  icon?: string | undefined;
8
9
  iconSize?: number | undefined;
9
- maxWidth?: string | undefined;
10
- maxHeight?: string | undefined;
11
- minWidth?: string | undefined;
12
- minHeight?: string | undefined;
13
- width?: string | undefined;
14
- height?: string | undefined;
15
- textAlign?: string | undefined;
16
- cursor?: string | undefined;
17
- padding?: string | undefined;
18
- fontSize?: string | undefined;
19
- color?: string | null | undefined;
20
- display?: string | undefined;
21
- justifyContent?: string | undefined;
22
- alignItems?: string | undefined;
23
- backgroundColor?: string | undefined;
24
- hoverBackgroundColor?: string | undefined;
25
- activeBackgroundColor?: string | undefined;
26
- borderRadius?: string | undefined;
27
- border?: string | undefined;
28
- boxShadow?: string | undefined;
29
- loaderHeight?: string | undefined;
30
- loaderWidth?: string | undefined;
31
10
  disabled?: boolean | undefined;
11
+ _maxWidth?: string | undefined;
12
+ _maxHeight?: string | undefined;
13
+ _minWidth?: string | undefined;
14
+ _minHeight?: string | undefined;
15
+ _width?: string | undefined;
16
+ _height?: string | undefined;
17
+ _textAlign?: string | undefined;
18
+ _cursor?: string | undefined;
19
+ _padding?: string | undefined;
20
+ _fontSize?: string | undefined;
21
+ _color?: string | null | undefined;
22
+ _display?: string | undefined;
23
+ _justifyContent?: string | undefined;
24
+ _alignItems?: string | undefined;
25
+ _backgroundColor?: string | undefined;
26
+ _hoverBackgroundColor?: string | undefined;
27
+ _activeBackgroundColor?: string | undefined;
28
+ _borderRadius?: string | undefined;
29
+ _border?: string | undefined;
30
+ _boxShadow?: string | undefined;
31
+ _loaderHeight?: string | undefined;
32
+ _loaderWidth?: string | undefined;
32
33
  };
33
34
  events: {
34
35
  click: CustomEvent<{
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair",
4
- "version": "2.0.7",
4
+ "version": "2.0.9",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && npm run package",