hamzus-ui 0.0.207 → 0.0.208

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/hamzus-ui/Scrollbar/Scrollbar.svelte +299 -300
  3. package/src/components/hamzus-ui/TableV2/Header.svelte +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.207",
3
+ "version": "0.0.208",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Scrollbar/Scrollbar.svelte CHANGED
@@ -1,308 +1,307 @@
1
1
  <script>
2
- import { onMount, onDestroy } from 'svelte';
3
- import { browser } from '$app/environment';
4
-
5
- export let element = null;
6
- export let thickness = 15;
7
- export let padding = 1;
8
-
9
- let thumbHeight = 0;
10
- let thumbTop = 0;
11
- let hasScrollY = false;
12
-
13
- let thumbWidth = 0;
14
- let thumbLeft = 0;
15
- let hasScrollX = false;
16
-
17
- // ── Mesure ──────────────────────────────────────────────────
18
-
19
- function measure(el) {
20
- const { clientHeight, scrollHeight, scrollTop,
21
- clientWidth, scrollWidth, scrollLeft } = el;
22
-
23
- hasScrollY = scrollHeight > clientHeight;
24
- thumbHeight = hasScrollY ? (clientHeight / scrollHeight) * clientHeight : clientHeight;
25
- thumbTop = hasScrollY
26
- ? (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight)
27
- : 0;
28
-
29
- hasScrollX = scrollWidth > clientWidth;
30
- thumbWidth = hasScrollX ? (clientWidth / scrollWidth) * clientWidth : clientWidth;
31
- thumbLeft = hasScrollX
32
- ? (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbWidth)
33
- : 0;
34
- }
35
-
36
- // ── Press & hold sur la track ───────────────────────────────
37
-
38
- let trackPressInterval = null;
39
-
40
- function stopTrackPress() {
41
- if (trackPressInterval) {
42
- clearInterval(trackPressInterval);
43
- trackPressInterval = null;
44
- }
45
- }
46
-
47
- function onTrackYMouseDown(e) {
48
- if (!element || e.target !== e.currentTarget) return;
49
- e.preventDefault();
50
- const target = e.currentTarget;
51
-
52
- function step() {
53
- if (!element) return;
54
- const rect = target.getBoundingClientRect();
55
- const clickY = e.clientY - rect.top;
56
- const direction = clickY < thumbTop ? -1 : 1;
57
- element.scrollTop += direction * element.clientHeight * 0.8;
58
- measure(element);
59
- if (direction === -1 && thumbTop <= clickY) stopTrackPress();
60
- if (direction === 1 && thumbTop + thumbHeight >= clickY) stopTrackPress();
61
- }
62
-
63
- step();
64
- trackPressInterval = setInterval(step, 120);
65
- window.addEventListener('mouseup', stopTrackPress, { once: true });
66
- }
67
-
68
- function onTrackXMouseDown(e) {
69
- if (!element || e.target !== e.currentTarget) return;
70
- e.preventDefault();
71
- const target = e.currentTarget;
72
-
73
- function step() {
74
- if (!element) return;
75
- const rect = target.getBoundingClientRect();
76
- const clickX = e.clientX - rect.left;
77
- const direction = clickX < thumbLeft ? -1 : 1;
78
- element.scrollLeft += direction * element.clientWidth * 0.8;
79
- measure(element);
80
- if (direction === -1 && thumbLeft <= clickX) stopTrackPress();
81
- if (direction === 1 && thumbLeft + thumbWidth >= clickX) stopTrackPress();
82
- }
83
-
84
- step();
85
- trackPressInterval = setInterval(step, 120);
86
- window.addEventListener('mouseup', stopTrackPress, { once: true });
87
- }
88
-
89
- // ── Drag vertical ───────────────────────────────────────────
90
-
91
- let draggingY = false;
92
- let dragStartY = 0;
93
- let dragStartScrollTop = 0;
94
-
95
- function onThumbYMouseDown(e) {
96
- if (!element) return;
97
- e.preventDefault();
98
- draggingY = true;
99
- dragStartY = e.clientY;
100
- dragStartScrollTop = element.scrollTop;
101
- }
102
-
103
- function onMouseMoveY(e) {
104
- if (!draggingY || !element) return;
105
- const { clientHeight, scrollHeight } = element;
106
- const thumbH = (clientHeight / scrollHeight) * clientHeight;
107
- const ratio = (scrollHeight - clientHeight) / (clientHeight - thumbH);
108
- element.scrollTop = dragStartScrollTop + (e.clientY - dragStartY) * ratio;
109
- }
110
-
111
- function onMouseUpY() { draggingY = false; }
112
-
113
- // ── Drag horizontal ─────────────────────────────────────────
114
-
115
- let draggingX = false;
116
- let dragStartX = 0;
117
- let dragStartScrollLeft = 0;
118
-
119
- function onThumbXMouseDown(e) {
120
- if (!element) return;
121
- e.preventDefault();
122
- draggingX = true;
123
- dragStartX = e.clientX;
124
- dragStartScrollLeft = element.scrollLeft;
125
- }
126
-
127
- function onMouseMoveX(e) {
128
- if (!draggingX || !element) return;
129
- const { clientWidth, scrollWidth } = element;
130
- const thumbW = (clientWidth / scrollWidth) * clientWidth;
131
- const ratio = (scrollWidth - clientWidth) / (clientWidth - thumbW);
132
- element.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * ratio;
133
- }
134
-
135
- function onMouseUpX() { draggingX = false; }
136
-
137
- // ── Listeners globaux (window) ──────────────────────────────
138
-
139
- function onWindowMouseMove(e) {
140
- onMouseMoveY(e);
141
- onMouseMoveX(e);
142
- }
143
-
144
- function onWindowMouseUp() {
145
- onMouseUpY();
146
- onMouseUpX();
147
- }
148
-
149
- function addWindowListeners() {
150
- window.addEventListener('mousemove', onWindowMouseMove);
151
- window.addEventListener('mouseup', onWindowMouseUp);
152
- }
153
-
154
- function removeWindowListeners() {
155
- window.removeEventListener('mousemove', onWindowMouseMove);
156
- window.removeEventListener('mouseup', onWindowMouseUp);
157
- }
158
-
159
- // ── Observer setup ──────────────────────────────────────────
160
-
161
- let resizeObserver = null;
162
-
163
- function handleScroll() {
164
- if (element) measure(element);
165
- }
166
-
167
- function setupObserver(el) {
168
- cleanupObserver();
169
- measure(el);
170
-
171
- resizeObserver = new ResizeObserver(() => measure(el));
172
- resizeObserver.observe(el);
173
- for (const child of Array.from(el.children)) {
174
- resizeObserver.observe(child);
175
- }
176
- el.addEventListener('scroll', handleScroll);
177
- }
178
-
179
- function cleanupObserver() {
180
- if (element) element.removeEventListener('scroll', handleScroll);
181
- resizeObserver?.disconnect();
182
- resizeObserver = null;
183
- }
184
-
185
- // $: réactif à `element` — mais uniquement côté client
186
- $: if (browser && element) {
187
- setupObserver(element);
188
- } else if (browser && !element) {
189
- cleanupObserver();
190
- stopTrackPress();
191
- thumbHeight = 0; thumbTop = 0; hasScrollY = false;
192
- thumbWidth = 0; thumbLeft = 0; hasScrollX = false;
193
- }
194
-
195
- // Les listeners window uniquement après le montage (côté client)
196
- onMount(() => {
197
- addWindowListeners();
198
- return () => {
199
- removeWindowListeners();
200
- cleanupObserver();
201
- stopTrackPress();
202
- };
203
- });
204
-
205
- onDestroy(() => {
206
- // onDestroy peut être appelé côté serveur — ne rien faire si pas browser
207
- if (!browser) return;
208
- removeWindowListeners();
209
- cleanupObserver();
210
- stopTrackPress();
211
- });
2
+ import { onMount, onDestroy } from 'svelte';
3
+ import { browser } from '$app/environment';
4
+
5
+ export let element = null;
6
+ export let thickness = 15;
7
+ export let padding = 1;
8
+
9
+ let thumbHeight = 0;
10
+ let thumbTop = 0;
11
+ let hasScrollY = false;
12
+
13
+ let thumbWidth = 0;
14
+ let thumbLeft = 0;
15
+ let hasScrollX = false;
16
+
17
+ // ── Mesure ──────────────────────────────────────────────────
18
+
19
+ function measure(el) {
20
+ const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = el;
21
+
22
+ hasScrollY = scrollHeight > clientHeight;
23
+ thumbHeight = hasScrollY ? (clientHeight / scrollHeight) * clientHeight : clientHeight;
24
+ thumbTop = hasScrollY
25
+ ? (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight)
26
+ : 0;
27
+
28
+ hasScrollX = scrollWidth > clientWidth;
29
+ thumbWidth = hasScrollX ? (clientWidth / scrollWidth) * clientWidth : clientWidth;
30
+ thumbLeft = hasScrollX
31
+ ? (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbWidth)
32
+ : 0;
33
+ }
34
+
35
+ // ── Press & hold sur la track ───────────────────────────────
36
+
37
+ let trackPressInterval = null;
38
+
39
+ function stopTrackPress() {
40
+ if (trackPressInterval) {
41
+ clearInterval(trackPressInterval);
42
+ trackPressInterval = null;
43
+ }
44
+ }
45
+
46
+ function onTrackYMouseDown(e) {
47
+ if (!element || e.target !== e.currentTarget) return;
48
+ e.preventDefault();
49
+ const target = e.currentTarget;
50
+
51
+ function step() {
52
+ if (!element) return;
53
+ const rect = target.getBoundingClientRect();
54
+ const clickY = e.clientY - rect.top;
55
+ const direction = clickY < thumbTop ? -1 : 1;
56
+ element.scrollTop += direction * element.clientHeight * 0.8;
57
+ measure(element);
58
+ if (direction === -1 && thumbTop <= clickY) stopTrackPress();
59
+ if (direction === 1 && thumbTop + thumbHeight >= clickY) stopTrackPress();
60
+ }
61
+
62
+ step();
63
+ trackPressInterval = setInterval(step, 120);
64
+ window.addEventListener('mouseup', stopTrackPress, { once: true });
65
+ }
66
+
67
+ function onTrackXMouseDown(e) {
68
+ if (!element || e.target !== e.currentTarget) return;
69
+ e.preventDefault();
70
+ const target = e.currentTarget;
71
+
72
+ function step() {
73
+ if (!element) return;
74
+ const rect = target.getBoundingClientRect();
75
+ const clickX = e.clientX - rect.left;
76
+ const direction = clickX < thumbLeft ? -1 : 1;
77
+ element.scrollLeft += direction * element.clientWidth * 0.8;
78
+ measure(element);
79
+ if (direction === -1 && thumbLeft <= clickX) stopTrackPress();
80
+ if (direction === 1 && thumbLeft + thumbWidth >= clickX) stopTrackPress();
81
+ }
82
+
83
+ step();
84
+ trackPressInterval = setInterval(step, 120);
85
+ window.addEventListener('mouseup', stopTrackPress, { once: true });
86
+ }
87
+
88
+ // ── Drag vertical ───────────────────────────────────────────
89
+
90
+ let draggingY = false;
91
+ let dragStartY = 0;
92
+ let dragStartScrollTop = 0;
93
+
94
+ function onThumbYMouseDown(e) {
95
+ if (!element) return;
96
+ e.preventDefault();
97
+ draggingY = true;
98
+ dragStartY = e.clientY;
99
+ dragStartScrollTop = element.scrollTop;
100
+ }
101
+
102
+ function onMouseMoveY(e) {
103
+ if (!draggingY || !element) return;
104
+ const { clientHeight, scrollHeight } = element;
105
+ const thumbH = (clientHeight / scrollHeight) * clientHeight;
106
+ const ratio = (scrollHeight - clientHeight) / (clientHeight - thumbH);
107
+ element.scrollTop = dragStartScrollTop + (e.clientY - dragStartY) * ratio;
108
+ }
109
+
110
+ function onMouseUpY() {
111
+ draggingY = false;
112
+ }
113
+
114
+ // ── Drag horizontal ─────────────────────────────────────────
115
+
116
+ let draggingX = false;
117
+ let dragStartX = 0;
118
+ let dragStartScrollLeft = 0;
119
+
120
+ function onThumbXMouseDown(e) {
121
+ if (!element) return;
122
+ e.preventDefault();
123
+ draggingX = true;
124
+ dragStartX = e.clientX;
125
+ dragStartScrollLeft = element.scrollLeft;
126
+ }
127
+
128
+ function onMouseMoveX(e) {
129
+ if (!draggingX || !element) return;
130
+ const { clientWidth, scrollWidth } = element;
131
+ const thumbW = (clientWidth / scrollWidth) * clientWidth;
132
+ const ratio = (scrollWidth - clientWidth) / (clientWidth - thumbW);
133
+ element.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * ratio;
134
+ }
135
+
136
+ function onMouseUpX() {
137
+ draggingX = false;
138
+ }
139
+
140
+ // ── Listeners globaux (window) ──────────────────────────────
141
+
142
+ function onWindowMouseMove(e) {
143
+ onMouseMoveY(e);
144
+ onMouseMoveX(e);
145
+ }
146
+
147
+ function onWindowMouseUp() {
148
+ onMouseUpY();
149
+ onMouseUpX();
150
+ }
151
+
152
+ function addWindowListeners() {
153
+ window.addEventListener('mousemove', onWindowMouseMove);
154
+ window.addEventListener('mouseup', onWindowMouseUp);
155
+ }
156
+
157
+ function removeWindowListeners() {
158
+ window.removeEventListener('mousemove', onWindowMouseMove);
159
+ window.removeEventListener('mouseup', onWindowMouseUp);
160
+ }
161
+
162
+ // ── Observer setup ──────────────────────────────────────────
163
+
164
+ let resizeObserver = null;
165
+
166
+ function handleScroll() {
167
+ if (element) measure(element);
168
+ }
169
+
170
+ function setupObserver(el) {
171
+ cleanupObserver();
172
+ measure(el);
173
+
174
+ resizeObserver = new ResizeObserver(() => measure(el));
175
+ resizeObserver.observe(el);
176
+ for (const child of Array.from(el.children)) {
177
+ resizeObserver.observe(child);
178
+ }
179
+ el.addEventListener('scroll', handleScroll);
180
+ }
181
+
182
+ function cleanupObserver() {
183
+ if (element) element.removeEventListener('scroll', handleScroll);
184
+ resizeObserver?.disconnect();
185
+ resizeObserver = null;
186
+ }
187
+
188
+ // $: réactif à `element` — mais uniquement côté client
189
+ $: if (browser && element) {
190
+ setupObserver(element);
191
+ } else if (browser && !element) {
192
+ cleanupObserver();
193
+ stopTrackPress();
194
+ thumbHeight = 0;
195
+ thumbTop = 0;
196
+ hasScrollY = false;
197
+ thumbWidth = 0;
198
+ thumbLeft = 0;
199
+ hasScrollX = false;
200
+ }
201
+
202
+ // Les listeners window uniquement après le montage (côté client)
203
+ onMount(() => {
204
+ addWindowListeners();
205
+ return () => {
206
+ removeWindowListeners();
207
+ cleanupObserver();
208
+ stopTrackPress();
209
+ };
210
+ });
211
+
212
+ onDestroy(() => {
213
+ // onDestroy peut être appelé côté serveur — ne rien faire si pas browser
214
+ if (!browser) return;
215
+ removeWindowListeners();
216
+ cleanupObserver();
217
+ stopTrackPress();
218
+ });
212
219
  </script>
213
220
 
214
221
  <div
215
- class="scroll-provider"
216
- style="--track-padding:{padding}px;--track-thickness:{thickness}px;--thumb-width:{thumbWidth}px;--thumb-height:{thumbHeight}px;--thumb-left:{thumbLeft}px;--thumb-top:{thumbTop}px;"
222
+ class="scroll-provider"
223
+ style="--track-padding:{padding}px;--track-thickness:{thickness}px;--thumb-width:{thumbWidth}px;--thumb-height:{thumbHeight}px;--thumb-left:{thumbLeft}px;--thumb-top:{thumbTop}px;"
217
224
  >
218
- {#if hasScrollX}
219
- <div class="track-h" on:mousedown={onTrackXMouseDown}>
220
- <span
221
- class="thumb"
222
- class:dragging={draggingX}
223
- on:mousedown={onThumbXMouseDown}
224
- />
225
- </div>
226
- {/if}
227
-
228
- {#if hasScrollY}
229
- <div class="track-v" on:mousedown={onTrackYMouseDown}>
230
- <span
231
- class="thumb"
232
- class:dragging={draggingY}
233
- on:mousedown={onThumbYMouseDown}
234
- />
235
- </div>
236
- {/if}
225
+ {#if hasScrollX}
226
+ <div class="track-h" on:mousedown={onTrackXMouseDown}>
227
+ <span class="thumb" class:dragging={draggingX} on:mousedown={onThumbXMouseDown} />
228
+ </div>
229
+ {/if}
230
+
231
+ {#if hasScrollY}
232
+ <div class="track-v" on:mousedown={onTrackYMouseDown}>
233
+ <span class="thumb" class:dragging={draggingY} on:mousedown={onThumbYMouseDown} />
234
+ </div>
235
+ {/if}
237
236
  </div>
238
237
 
239
238
  <style>
240
- .scroll-provider {
241
- position: absolute;
242
- top: 0px;
243
- left: 0px;
244
- width: 100%;
245
- height: 100%;
246
- pointer-events: none;
247
- }
248
-
249
- .track-h,
250
- .track-v {
251
- pointer-events: all;
252
- }
253
-
254
- .thumb {
255
- position: absolute;
256
- display: flex;
257
- background-color: var(--bg-blur);
258
- cursor: grab;
259
- transition: background-color 0.15s;
260
- }
261
-
262
- .thumb:hover,
263
- .thumb.dragging {
264
- background-color: var(--accent-b);
265
- cursor: grabbing;
266
- }
267
-
268
- .track-h {
269
- position: absolute;
270
- bottom: 0px;
271
- left: 0px;
272
- width: 100%;
273
- height: var(--track-thickness);
274
- }
275
-
276
- .track-h .thumb {
277
- width: calc(var(--thumb-width) - var(--track-padding) * 2);
278
- height: calc(100% - var(--track-padding) * 2);
279
- left: calc(var(--thumb-left) + var(--track-padding));
280
- top: calc(0px + var(--track-padding));
281
- border-radius: var(--radius-s);
282
- }
283
-
284
- .track-v {
285
- position: absolute;
286
- top: 0px;
287
- right: 0px;
288
- height: 100%;
289
- width: var(--track-thickness);
290
- }
291
-
292
- .track-v .thumb {
293
- height: calc(var(--thumb-height) - var(--track-padding) * 2);
294
- width: calc(100% - var(--track-padding) * 2);
295
- top: calc(var(--thumb-top) + 1px);
296
- left: calc(0px + 1px);
297
- border-radius: var(--radius-s);
298
- }
299
-
300
- @media (max-width:750px) {
301
- .track-h {
302
- height: 5px;
303
- }
304
- .track-v {
305
- width: 5px;
306
- }
307
- }
308
- </style>
239
+ .scroll-provider {
240
+ position: absolute;
241
+ top: 0px;
242
+ left: 0px;
243
+ width: 100%;
244
+ height: 100%;
245
+ pointer-events: none;
246
+ }
247
+
248
+ .track-h,
249
+ .track-v {
250
+ pointer-events: all;
251
+ }
252
+
253
+ .thumb {
254
+ position: absolute;
255
+ display: flex;
256
+ background-color: var(--bg-blur);
257
+ cursor: grab;
258
+ transition: background-color 0.15s;
259
+ }
260
+
261
+ .thumb:hover,
262
+ .thumb.dragging {
263
+ background-color: var(--accent-b);
264
+ cursor: grabbing;
265
+ }
266
+
267
+ .track-h {
268
+ position: absolute;
269
+ bottom: 0px;
270
+ left: 0px;
271
+ width: 100%;
272
+ height: var(--track-thickness);
273
+ }
274
+
275
+ .track-h .thumb {
276
+ width: calc(var(--thumb-width) - var(--track-padding) * 2);
277
+ height: calc(100% - var(--track-padding) * 2);
278
+ left: calc(var(--thumb-left) + var(--track-padding));
279
+ top: calc(0px + var(--track-padding));
280
+ border-radius: var(--radius-s);
281
+ }
282
+
283
+ .track-v {
284
+ position: absolute;
285
+ top: 0px;
286
+ right: 0px;
287
+ height: 100%;
288
+ width: var(--track-thickness);
289
+ }
290
+
291
+ .track-v .thumb {
292
+ height: calc(var(--thumb-height) - var(--track-padding) * 2);
293
+ width: calc(100% - var(--track-padding) * 2);
294
+ top: calc(var(--thumb-top) + 1px);
295
+ left: calc(0px + 1px);
296
+ border-radius: var(--radius-s);
297
+ }
298
+
299
+ @media (max-width: 750px) {
300
+ .track-h {
301
+ height: 5px;
302
+ }
303
+ .track-v {
304
+ width: 5px;
305
+ }
306
+ }
307
+ </style>
package/src/components/hamzus-ui/TableV2/Header.svelte CHANGED
@@ -215,7 +215,7 @@
215
215
  >
216
216
  <DropdownMenu.Trigger slot="trigger">
217
217
  <Button style="width:100%;" avoidRipple={!column.isSearchable} variant="ghost">
218
- <h4>{column.label}</h4>
218
+ <h5>{column.label}</h5>
219
219
  <h4>
220
220
  {$table.sort &&
221
221
  $table.sort.columnName === column.name &&