hamzus-ui 0.0.175 → 0.0.177

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 (4) hide show
  1. package/index.d.ts +1 -0
  2. package/index.js +1 -0
  3. package/package.json +1 -1
  4. package/src/components/hamzus-ui/Caroussel/Caroussel.svelte +116 -0
package/index.d.ts CHANGED
@@ -39,6 +39,7 @@ export { default as TimePicker } from "./src/components/hamzus-ui/TimePicker/Tim
39
39
  export * as Tabs from "./src/components/hamzus-ui/Tabs"
40
40
 
41
41
  // data
42
+ export { default as Caroussel } from "./src/components/hamzus-ui/Caroussel/Caroussel.svelte"
42
43
  export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
43
44
  export * as Table from "./src/components/hamzus-ui/Table"
44
45
  export * as DataList from "./src/components/hamzus-ui/DataList"
package/index.js CHANGED
@@ -36,6 +36,7 @@ export { default as TimePicker } from "./src/components/hamzus-ui/TimePicker/Tim
36
36
  export * as Tabs from "./src/components/hamzus-ui/Tabs"
37
37
 
38
38
  // data
39
+ export { default as Caroussel } from "./src/components/hamzus-ui/Caroussel/Caroussel.svelte"
39
40
  export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
40
41
  export * as Table from "./src/components/hamzus-ui/Table"
41
42
  export * as DataList from "./src/components/hamzus-ui/DataList"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.175",
3
+ "version": "0.0.177",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Caroussel/Caroussel.svelte ADDED
@@ -0,0 +1,116 @@
1
+ <!-- Carousel.svelte -->
2
+ <script>
3
+ import Button from '../Button/Button.svelte';
4
+ import IconButton from '../IconButton/IconButton.svelte';
5
+ import { onMount } from 'svelte';
6
+
7
+ let currentIndex = 0;
8
+ let container;
9
+ let childCount = 0;
10
+
11
+ onMount(() => {
12
+ childCount = container.children.length;
13
+ // Ajouter la classe 'active' au premier enfant
14
+ if (container.children[0]) {
15
+ container.children[0].classList.add('active');
16
+ }
17
+ });
18
+
19
+ function goto(index) {
20
+ for (const child of container.children) {
21
+ if (child.classList.contains("active")) child.classList.remove('active');
22
+ }
23
+
24
+ currentIndex = index
25
+
26
+ container.children[currentIndex]?.classList.add('active');
27
+ }
28
+
29
+ function next() {
30
+ container.children[currentIndex]?.classList.remove('active');
31
+ currentIndex = (currentIndex + 1) % childCount;
32
+ container.children[currentIndex]?.classList.add('active');
33
+ }
34
+
35
+ function prev() {
36
+ container.children[currentIndex]?.classList.remove('active');
37
+ currentIndex = (currentIndex - 1 + childCount) % childCount;
38
+ container.children[currentIndex]?.classList.add('active');
39
+ }
40
+ </script>
41
+
42
+ <div class="carousel">
43
+ <div class="prev">
44
+ <IconButton onClick={prev} variant="ghost">
45
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
46
+ <path d="M9.56945 18.8201C9.37945 18.8201 9.18945 18.7501 9.03945 18.6001L2.96945 12.5301C2.67945 12.2401 2.67945 11.7601 2.96945 11.4701L9.03945 5.40012C9.32945 5.11012 9.80945 5.11012 10.0995 5.40012C10.3895 5.69012 10.3895 6.17012 10.0995 6.46012L4.55945 12.0001L10.0995 17.5401C10.3895 17.8301 10.3895 18.3101 10.0995 18.6001C9.95945 18.7501 9.75945 18.8201 9.56945 18.8201Z" fill="#292D32"/>
47
+ <path d="M20.4999 12.75H3.66992C3.25992 12.75 2.91992 12.41 2.91992 12C2.91992 11.59 3.25992 11.25 3.66992 11.25H20.4999C20.9099 11.25 21.2499 11.59 21.2499 12C21.2499 12.41 20.9099 12.75 20.4999 12.75Z" fill="#292D32"/>
48
+ </svg>
49
+ </IconButton>
50
+ </div>
51
+
52
+ <div class="carousel-content" bind:this={container}>
53
+ <slot />
54
+ </div>
55
+
56
+ <div class="next">
57
+ <IconButton onClick={next} variant="ghost">
58
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
59
+ <path d="M14.4291 18.8201C14.2391 18.8201 14.0491 18.7501 13.8991 18.6001C13.6091 18.3101 13.6091 17.8301 13.8991 17.5401L19.4391 12.0001L13.8991 6.46012C13.6091 6.17012 13.6091 5.69012 13.8991 5.40012C14.1891 5.11012 14.6691 5.11012 14.9591 5.40012L21.0291 11.4701C21.3191 11.7601 21.3191 12.2401 21.0291 12.5301L14.9591 18.6001C14.8091 18.7501 14.6191 18.8201 14.4291 18.8201Z" fill="#292D32"/>
60
+ <path d="M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z" fill="#292D32"/>
61
+ </svg>
62
+ </IconButton>
63
+ </div>
64
+ {#if container}
65
+ <div class="nav">
66
+ {#each Array.from({length: container.children.length}) as _, index}
67
+ <Button onClick={()=>{goto(index)}} variant="{index === currentIndex ? "primary" : "secondary"}"></Button>
68
+ {/each}
69
+ </div>
70
+ {/if}
71
+ </div>
72
+
73
+ <style>
74
+ .carousel {
75
+ width: 100%;
76
+ display: flex;
77
+ flex-direction: column;
78
+ align-items: center;
79
+ row-gap: var(--pad-m);
80
+ position: relative;
81
+ }
82
+
83
+ .carousel-content {
84
+ width: 100%;
85
+ min-height: 150px;
86
+ overflow: hidden;
87
+ }
88
+
89
+ .nav {
90
+ display: flex;
91
+ align-items: center;
92
+ column-gap: var(--pad-xs);
93
+ }
94
+
95
+ .prev {
96
+ position: absolute;
97
+ top: 50%;
98
+ left: var(--pad-xs);
99
+ transform: translateY(-50%);
100
+ }
101
+
102
+ .next {
103
+ position: absolute;
104
+ top: 50%;
105
+ right: var(--pad-xs);
106
+ transform: translateY(-50%);
107
+ }
108
+
109
+ .carousel-content :global(> *) {
110
+ display: none;
111
+ }
112
+
113
+ .carousel-content :global(> .active) {
114
+ display: flex;
115
+ }
116
+ </style>