hamzus-ui 0.0.205 → 0.0.206
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/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +1 -1
- package/src/components/hamzus-ui/SidebarV2/Button.svelte +67 -0
- package/src/components/hamzus-ui/SidebarV2/Menu.svelte +23 -0
- package/src/components/hamzus-ui/SidebarV2/MenuCtx.svelte +7 -0
- package/src/components/hamzus-ui/SidebarV2/Root.svelte +197 -0
- package/src/components/hamzus-ui/SidebarV2/index.js +4 -0
package/index.d.ts
CHANGED
|
@@ -63,6 +63,7 @@ export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip";
|
|
|
63
63
|
// layout
|
|
64
64
|
export { default as ScrollArea } from "./src/components/hamzus-ui/ScrollArea/ScrollArea.svelte"
|
|
65
65
|
export * as Sidebar from "./src/layout/Sidebar"
|
|
66
|
+
export * as SidebarV2 from "./src/components/hamzus-ui/SidebarV2"
|
|
66
67
|
|
|
67
68
|
// special
|
|
68
69
|
export { default as Portal } from "./src/components/hamzus-ui/Portal/Portal.svelte"
|
package/index.js
CHANGED
|
@@ -60,6 +60,7 @@ export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip"
|
|
|
60
60
|
// layout
|
|
61
61
|
export { default as ScrollArea } from "./src/components/hamzus-ui/ScrollArea/ScrollArea.svelte"
|
|
62
62
|
export * as Sidebar from "./src/layout/Sidebar"
|
|
63
|
+
export * as SidebarV2 from "./src/components/hamzus-ui/SidebarV2"
|
|
63
64
|
|
|
64
65
|
// special
|
|
65
66
|
export { default as Portal } from "./src/components/hamzus-ui/Portal/Portal.svelte"
|
package/package.json
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Button from '../Button/Button.svelte';
|
|
3
|
+
import IconButton from '../IconButton/IconButton.svelte';
|
|
4
|
+
import { onMount } from 'svelte';
|
|
5
|
+
|
|
6
|
+
export let goTo = false
|
|
7
|
+
export let goBack = false
|
|
8
|
+
|
|
9
|
+
let isMount = false
|
|
10
|
+
|
|
11
|
+
onMount(()=>{
|
|
12
|
+
isMount = true
|
|
13
|
+
})
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Button
|
|
17
|
+
{...$$restProps}
|
|
18
|
+
style="width:100%;padding:var(--pad-m);justify-content:space-between;"
|
|
19
|
+
variant="ghost"
|
|
20
|
+
>
|
|
21
|
+
{#if goBack && isMount}
|
|
22
|
+
<IconButton size="24px" variant="secondary">
|
|
23
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
24
|
+
<path d="M14.9993 20.67C14.8093 20.67 14.6193 20.6 14.4693 20.45L7.9493 13.93C6.8893 12.87 6.8893 11.13 7.9493 10.07L14.4693 3.55002C14.7593 3.26002 15.2393 3.26002 15.5293 3.55002C15.8193 3.84002 15.8193 4.32002 15.5293 4.61002L9.0093 11.13C8.5293 11.61 8.5293 12.39 9.0093 12.87L15.5293 19.39C15.8193 19.68 15.8193 20.16 15.5293 20.45C15.3793 20.59 15.1893 20.67 14.9993 20.67Z" fill="#292D32"/>
|
|
25
|
+
</svg>
|
|
26
|
+
|
|
27
|
+
</IconButton>
|
|
28
|
+
{/if}
|
|
29
|
+
<div class="content">
|
|
30
|
+
<slot />
|
|
31
|
+
</div>
|
|
32
|
+
{#if goTo && isMount}
|
|
33
|
+
<IconButton size="24px" variant="secondary">
|
|
34
|
+
<svg
|
|
35
|
+
width="24"
|
|
36
|
+
height="24"
|
|
37
|
+
viewBox="0 0 24 24"
|
|
38
|
+
fill="none"
|
|
39
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
40
|
+
>
|
|
41
|
+
<path
|
|
42
|
+
d="M8.90961 20.67C8.71961 20.67 8.52961 20.6 8.37961 20.45C8.08961 20.16 8.08961 19.68 8.37961 19.39L14.8996 12.87C15.3796 12.39 15.3796 11.61 14.8996 11.13L8.37961 4.61002C8.08961 4.32002 8.08961 3.84002 8.37961 3.55002C8.66961 3.26002 9.14961 3.26002 9.43961 3.55002L15.9596 10.07C16.4696 10.58 16.7596 11.27 16.7596 12C16.7596 12.73 16.4796 13.42 15.9596 13.93L9.43961 20.45C9.28961 20.59 9.09961 20.67 8.90961 20.67Z"
|
|
43
|
+
fill="#292D32"
|
|
44
|
+
/>
|
|
45
|
+
</svg>
|
|
46
|
+
</IconButton>
|
|
47
|
+
{/if}
|
|
48
|
+
</Button>
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
<style>
|
|
52
|
+
.content {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
column-gap: var(--pad-m);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.content > :global(svg) {
|
|
59
|
+
width: 24px;
|
|
60
|
+
height: auto;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.content > :global(svg path) {
|
|
64
|
+
fill: var(--font-2);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let openMenu = 'default'
|
|
3
|
+
export let menu = 'default'
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
{#if openMenu === menu}
|
|
7
|
+
<div class="menu">
|
|
8
|
+
<slot/>
|
|
9
|
+
</div>
|
|
10
|
+
{/if}
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
.menu {
|
|
14
|
+
max-height: 100%;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
flex: 1;
|
|
19
|
+
row-gap: var(--pad-m);
|
|
20
|
+
overflow-y: auto;
|
|
21
|
+
padding: var(--pad-m);
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import IconButton from '../IconButton/IconButton.svelte';
|
|
3
|
+
import { onDestroy, onMount } from 'svelte';
|
|
4
|
+
|
|
5
|
+
export let isOpen = false;
|
|
6
|
+
export let width = 0;
|
|
7
|
+
export let localStorageName = 'hamzus-sidebar-storage';
|
|
8
|
+
|
|
9
|
+
const defaultWidth = 250
|
|
10
|
+
const widthToHide = 249;
|
|
11
|
+
const maxWidth = 350;
|
|
12
|
+
const timeToClose = 500;
|
|
13
|
+
|
|
14
|
+
let startWidth = null;
|
|
15
|
+
let startX = null;
|
|
16
|
+
let endX = null;
|
|
17
|
+
|
|
18
|
+
$: lastWidth = width === 0 ? (lastWidth ?? defaultWidth) : width
|
|
19
|
+
$: console.log(lastWidth);
|
|
20
|
+
|
|
21
|
+
onMount(() => {
|
|
22
|
+
const newWidth = localStorage.getItem(localStorageName)
|
|
23
|
+
if (newWidth) width = parseInt(newWidth)
|
|
24
|
+
else width = defaultWidth
|
|
25
|
+
isOpen = true
|
|
26
|
+
return handleDestroy;
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
function handleMouseDown(event) {
|
|
30
|
+
startWidth = width;
|
|
31
|
+
startX = event.clientX;
|
|
32
|
+
|
|
33
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
34
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function handleMouseMove(event) {
|
|
38
|
+
endX = event.clientX;
|
|
39
|
+
calcWidth();
|
|
40
|
+
}
|
|
41
|
+
function handleMouseUp(event) {
|
|
42
|
+
endX = event.clientX;
|
|
43
|
+
calcWidth();
|
|
44
|
+
|
|
45
|
+
startWidth = null;
|
|
46
|
+
startX = null;
|
|
47
|
+
endX = null;
|
|
48
|
+
|
|
49
|
+
handleDestroy();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function calcWidth() {
|
|
53
|
+
let newWidth = startWidth + endX - startX;
|
|
54
|
+
|
|
55
|
+
if (newWidth > maxWidth) {
|
|
56
|
+
newWidth = maxWidth;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (newWidth < widthToHide) {
|
|
60
|
+
handleClose();
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
localStorage.setItem(localStorageName, width);
|
|
67
|
+
|
|
68
|
+
isOpen = true;
|
|
69
|
+
width = newWidth;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function handleClose() {
|
|
73
|
+
isOpen = false;
|
|
74
|
+
width = 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function handleDestroy() {
|
|
78
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
79
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
function handleToggle() {
|
|
83
|
+
isOpen = !isOpen;
|
|
84
|
+
if (!isOpen) {
|
|
85
|
+
width = 0;
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
width = lastWidth;
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<section
|
|
94
|
+
class="sidebar"
|
|
95
|
+
class:is-changing={startWidth !== null}
|
|
96
|
+
class:open={isOpen}
|
|
97
|
+
style="--sidebar-width:{width}px;--sidebar-min-width:{widthToHide}px;"
|
|
98
|
+
>
|
|
99
|
+
<div class="sidebar-container">
|
|
100
|
+
<slot />
|
|
101
|
+
</div>
|
|
102
|
+
</section>
|
|
103
|
+
<div
|
|
104
|
+
class="trigger"
|
|
105
|
+
class:open={isOpen}
|
|
106
|
+
style="--sidebar-width:{width}px;"
|
|
107
|
+
on:mousedown={handleMouseDown}
|
|
108
|
+
>
|
|
109
|
+
<div class="trigger-btn">
|
|
110
|
+
<IconButton variant="secondary" size="20px" onClick={handleToggle}>
|
|
111
|
+
<svg
|
|
112
|
+
width="24"
|
|
113
|
+
height="24"
|
|
114
|
+
viewBox="0 0 24 24"
|
|
115
|
+
fill="none"
|
|
116
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
117
|
+
>
|
|
118
|
+
<path
|
|
119
|
+
d="M14.9993 20.67C14.8093 20.67 14.6193 20.6 14.4693 20.45L7.9493 13.93C6.8893 12.87 6.8893 11.13 7.9493 10.07L14.4693 3.55002C14.7593 3.26002 15.2393 3.26002 15.5293 3.55002C15.8193 3.84002 15.8193 4.32002 15.5293 4.61002L9.0093 11.13C8.5293 11.61 8.5293 12.39 9.0093 12.87L15.5293 19.39C15.8193 19.68 15.8193 20.16 15.5293 20.45C15.3793 20.59 15.1893 20.67 14.9993 20.67Z"
|
|
120
|
+
fill="#292D32"
|
|
121
|
+
/>
|
|
122
|
+
</svg>
|
|
123
|
+
</IconButton>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<style>
|
|
128
|
+
.sidebar {
|
|
129
|
+
position: fixed;
|
|
130
|
+
top: 0px;
|
|
131
|
+
left: 0px;
|
|
132
|
+
width: min(100%, var(--sidebar-width));
|
|
133
|
+
height: 100dvh;
|
|
134
|
+
background-color: var(--bg-1);
|
|
135
|
+
border-right: 1px solid var(--stroke);
|
|
136
|
+
z-index: 10000;
|
|
137
|
+
transition: width 0.1s ease-out;
|
|
138
|
+
overflow: clip;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.sidebar:not(.open) {
|
|
142
|
+
width: 0px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:global(:root:has(.sidebar.is-changing)) {
|
|
146
|
+
--default-cursor: col-resize;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.sidebar-container {
|
|
150
|
+
height: 100%;
|
|
151
|
+
min-width: var(--sidebar-min-width);
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
flex-shrink: 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.trigger {
|
|
158
|
+
cursor: col-resize;
|
|
159
|
+
position: fixed;
|
|
160
|
+
top: 0px;
|
|
161
|
+
left: var(--sidebar-width);
|
|
162
|
+
height: 100dvh;
|
|
163
|
+
z-index: 100000;
|
|
164
|
+
transition: left 0.1s ease-out;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.trigger::after {
|
|
168
|
+
content: '';
|
|
169
|
+
position: absolute;
|
|
170
|
+
top: 0px;
|
|
171
|
+
left: 100%;
|
|
172
|
+
width: 25px;
|
|
173
|
+
height: 100%;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.trigger-btn {
|
|
177
|
+
position: absolute;
|
|
178
|
+
top: 50%;
|
|
179
|
+
left: 0px;
|
|
180
|
+
z-index: 10;
|
|
181
|
+
transform: translate(-50%, -50%);
|
|
182
|
+
transition: left 0.2s ease-out;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.trigger:not(.open) .trigger-btn {
|
|
186
|
+
transform: translate(-50%, -50%) rotate(180deg);
|
|
187
|
+
}
|
|
188
|
+
.trigger:not(.open):hover .trigger-btn {
|
|
189
|
+
left: 15px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@media (max-width: 768px) {
|
|
193
|
+
.trigger {
|
|
194
|
+
display: none;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
</style>
|