hamzus-ui 0.0.122 → 0.0.124

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/Dialog/Dialog.svelte +82 -3
  3. package/src/components/hamzus-ui/DropdownMenu/Root.svelte +15 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.122",
3
+ "version": "0.0.124",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Dialog/Dialog.svelte CHANGED
@@ -3,6 +3,23 @@
3
3
  import Portal from '../Portal/Portal.svelte';
4
4
 
5
5
  export let isOpen = true;
6
+ export let direction = "center";
7
+ export let width = "min(100%, 350px)";
8
+
9
+ const positionBeforeAnimation = {
10
+ "left-top":[-10,0],
11
+ "left":[-10,0],
12
+ "left-bottom":[-10,0],
13
+
14
+ "center-top":[0,-10],
15
+ "center":[0,10],
16
+ "center-bottom":[0,10],
17
+
18
+ "right-top":[10,0],
19
+ "right":[10,0],
20
+ "right-bottom":[10,0],
21
+ }
22
+
6
23
 
7
24
  function handleClose() {
8
25
  isOpen = false;
@@ -11,8 +28,8 @@
11
28
 
12
29
  {#if isOpen}
13
30
  <Portal target="body">
14
- <div class="dialog">
15
- <div class="dialog-container">
31
+ <div class="dialog {direction}" style="--left:{positionBeforeAnimation[direction][0]}px;--top:{positionBeforeAnimation[direction][1]}px;">
32
+ <div class="dialog-container" style="width: {width};">
16
33
  <IconButton style="position:absolute;top:var(--pad-m);right:var(--pad-m);" label="ghost" variant="ghost" onClick={handleClose}>
17
34
  <svg
18
35
  width="25"
@@ -46,16 +63,78 @@
46
63
  display: flex;
47
64
  align-items: center;
48
65
  justify-content: center;
66
+ padding: var(--pad-m);
49
67
  background-color: var(--bg-blur);
50
68
  backdrop-filter: blur(20px);
51
69
  -webkit-backdrop-filter: blur(20px);
70
+ animation: entry .2s ease-out;
52
71
  }
72
+ .dialog.left-top {
73
+ align-items: start;
74
+ justify-content: start;
75
+ }
76
+ .dialog.left {
77
+ align-items: center;
78
+ justify-content: start;
79
+ }
80
+ .dialog.left-bottom {
81
+ align-items: end;
82
+ justify-content: start;
83
+ }
84
+
85
+ .dialog.center-top {
86
+ align-items: start;
87
+ justify-content: center;
88
+ }
89
+ .dialog.center {
90
+ align-items: center;
91
+ justify-content: center;
92
+ }
93
+ .dialog.center-bottom {
94
+ align-items: end;
95
+ justify-content: center;
96
+ }
97
+ .dialog.right-top {
98
+ align-items: start;
99
+ justify-content: end;
100
+ }
101
+ .dialog.right {
102
+ align-items: center;
103
+ justify-content: end;
104
+ }
105
+ .dialog.right-bottom {
106
+ align-items: end;
107
+ justify-content: end;
108
+ }
109
+
110
+ @keyframes entry {
111
+ from {
112
+ opacity: 0;
113
+ }
114
+ to {
115
+ opacity: 1;
116
+ }
117
+ }
118
+
119
+
53
120
  .dialog-container {
54
- width: min(100%, 350px);
55
121
  min-height: 45px;
122
+ max-height: 100%;
56
123
  padding: var(--pad-xxl);
57
124
  border-radius: var(--radius-m);
58
125
  background-color: var(--bg-1);
59
126
  position: relative;
127
+ animation: entry-container .2s ease-out;
128
+ overflow: auto;
60
129
  }
130
+
131
+ @keyframes entry-container {
132
+ from {
133
+ transform: translate(var(--left), var(--top));
134
+ }
135
+ to {
136
+ transform: translate(0, 0);
137
+ }
138
+ }
139
+
61
140
  </style>
package/src/components/hamzus-ui/DropdownMenu/Root.svelte CHANGED
@@ -173,8 +173,12 @@
173
173
  }
174
174
 
175
175
  // si il est hors de la vue (horizontalement) alors on le set a droite (fix pour la table)
176
- if (triggerRight <= 0) {
177
- leftCalc = window.innerWidth - contentWidth
176
+ if (triggerRight <= ((contentWidth - triggerWidth) / 2)) {
177
+ leftCalc = window.innerWidth - contentWidth - padding
178
+ }
179
+
180
+ if (triggerLeft <= ((contentWidth - triggerWidth) / 2)) {
181
+ leftCalc = padding
178
182
  }
179
183
 
180
184
  top = topCalc;
@@ -206,6 +210,15 @@
206
210
  // on contraint la max height du dropdown
207
211
  }
208
212
 
213
+ // si il est hors de la vue (horizontalement) alors on le set a droite (fix pour la table)
214
+ if (triggerRight <= ((contentWidth - triggerWidth) / 2)) {
215
+ leftCalc = window.innerWidth - contentWidth - padding
216
+ }
217
+
218
+ if (triggerLeft <= ((contentWidth - triggerWidth) / 2)) {
219
+ leftCalc = padding
220
+ }
221
+
209
222
  top = topCalc;
210
223
  left = leftCalc;
211
224
  },