mountain-ui 1.0.140 → 1.0.141

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/View.svelte +206 -73
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mountain-ui",
3
3
  "private": false,
4
- "version": "1.0.140",
4
+ "version": "1.0.141",
5
5
  "description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
6
6
  "type": "module",
7
7
  "module": "index.js",
package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/View.svelte CHANGED
@@ -10,35 +10,134 @@
10
10
 
11
11
  const targetProject = projectRegistry.getTargetProject();
12
12
 
13
- let targetImageId = $state(null)
13
+ let targetImageId = $state(null);
14
+ let canGoRight = $state(false);
15
+ let canGoLeft = $state(false);
14
16
 
15
- function openImage(fileId) {
16
- targetImageId = fileId
17
- }
17
+ function openImage(fileId) {
18
+ targetImageId = fileId;
19
+
20
+ const index = value?.formated?.indexOf(targetImageId);
21
+
22
+ canGoLeft = index === -1 || index === 0;
23
+ canGoRight = index === -1 || index === value.formated.length - 1;
24
+ }
25
+
26
+ function goLeft() {
27
+ const index = value?.formated?.indexOf(targetImageId);
28
+
29
+ if (index === -1 || index === 0) {
30
+ return;
31
+ }
32
+
33
+ openImage(value.formated[index - 1]);
34
+ }
35
+
36
+ function goRight() {
37
+ const index = value?.formated?.indexOf(targetImageId);
38
+
39
+ if (index === -1 || index === value.formated.length - 1) {
40
+ return;
41
+ }
42
+
43
+ openImage(value.formated[index + 1]);
44
+ }
18
45
  </script>
46
+
19
47
  {#if targetImageId}
20
- <div class="image-preview">
21
- <div class="image-container">
22
- <img src="{import.meta.env
23
- .VITE_API_URL}/get-image?__project_normalized_name={targetProject.normalized_name}&fileId={targetImageId}" alt="" srcset="">
24
- </div>
25
- <div class="btn">
26
- <IconButton variant="secondary" onClick={()=>{targetImageId = null}}>
27
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M18.3012 7.09848L7.09691 18.3028C6.71409 18.6856 6.07918 18.6856 5.69636 18.3028C5.31355 17.92 5.31355 17.2851 5.69636 16.9023L16.9007 5.69794C17.2835 5.31512 17.9184 5.31512 18.3012 5.69794C18.684 6.08075 18.684 6.71566 18.3012 7.09848Z" fill="#292D32"/>
29
- <path d="M18.3032 18.3021C17.9204 18.6849 17.2855 18.6849 16.9026 18.3021L5.69832 7.09773C5.3155 6.71492 5.3155 6.08 5.69832 5.69719C6.08113 5.31438 6.71604 5.31438 7.09886 5.69719L18.3032 16.9015C18.686 17.2843 18.686 17.9192 18.3032 18.3021Z" fill="#292D32"/>
30
- </svg>
31
-
32
- </IconButton>
33
- </div>
34
- </div>
48
+ <div class="image-preview">
49
+ <div class="image-container">
50
+ <img
51
+ src="{import.meta.env
52
+ .VITE_API_URL}/get-image?__project_normalized_name={targetProject.normalized_name}&fileId={targetImageId}"
53
+ alt=""
54
+ srcset=""
55
+ />
56
+ </div>
57
+ <div class="btn">
58
+ <IconButton
59
+ variant="secondary"
60
+ onClick={() => {
61
+ targetImageId = null;
62
+ }}
63
+ >
64
+ <svg
65
+ width="24"
66
+ height="24"
67
+ viewBox="0 0 24 24"
68
+ fill="none"
69
+ xmlns="http://www.w3.org/2000/svg"
70
+ >
71
+ <path
72
+ d="M18.3012 7.09848L7.09691 18.3028C6.71409 18.6856 6.07918 18.6856 5.69636 18.3028C5.31355 17.92 5.31355 17.2851 5.69636 16.9023L16.9007 5.69794C17.2835 5.31512 17.9184 5.31512 18.3012 5.69794C18.684 6.08075 18.684 6.71566 18.3012 7.09848Z"
73
+ fill="#292D32"
74
+ />
75
+ <path
76
+ d="M18.3032 18.3021C17.9204 18.6849 17.2855 18.6849 16.9026 18.3021L5.69832 7.09773C5.3155 6.71492 5.3155 6.08 5.69832 5.69719C6.08113 5.31438 6.71604 5.31438 7.09886 5.69719L18.3032 16.9015C18.686 17.2843 18.686 17.9192 18.3032 18.3021Z"
77
+ fill="#292D32"
78
+ />
79
+ </svg>
80
+ </IconButton>
81
+ </div>
82
+ <div class="left">
83
+ <IconButton
84
+
85
+ desabled={canGoLeft}
86
+ variant="secondary"
87
+ onClick={() => {
88
+ goLeft();
89
+ }}
90
+ >
91
+ <svg
92
+ width="24"
93
+ height="24"
94
+ viewBox="0 0 24 24"
95
+ fill="none"
96
+ xmlns="http://www.w3.org/2000/svg"
97
+ >
98
+ <path
99
+ 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"
100
+ fill="#292D32"
101
+ />
102
+ </svg>
103
+ </IconButton>
104
+ </div>
105
+ <div class="right">
106
+ <IconButton
107
+
108
+ desabled={canGoRight}
109
+ variant="secondary"
110
+ onClick={() => {
111
+ goRight();
112
+ }}
113
+ >
114
+ <svg
115
+ width="24"
116
+ height="24"
117
+ viewBox="0 0 24 24"
118
+ fill="none"
119
+ xmlns="http://www.w3.org/2000/svg"
120
+ >
121
+ <path
122
+ 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"
123
+ fill="#292D32"
124
+ />
125
+ </svg>
126
+ </IconButton>
127
+ </div>
128
+ </div>
35
129
  {/if}
36
130
  <LineView {compact}>
37
131
  <Label {unique} {secret} {label} {required}></Label>
38
132
  {#if value && value.formated}
39
133
  <div class="images">
40
134
  {#each value.formated as fileId, index}
41
- <div class="image" onclick={()=>{openImage(fileId)}}>
135
+ <div
136
+ class="image"
137
+ onclick={() => {
138
+ openImage(fileId);
139
+ }}
140
+ >
42
141
  <img
43
142
  src="{import.meta.env
44
143
  .VITE_API_URL}/get-image-low-res?__project_normalized_name={targetProject.normalized_name}&fileId={fileId}"
@@ -51,7 +150,6 @@
51
150
  {/if}
52
151
  </LineView>
53
152
 
54
-
55
153
  <style>
56
154
  .images {
57
155
  display: flex;
@@ -65,7 +163,7 @@
65
163
  width: 25px;
66
164
  padding: var(--pad-xs);
67
165
  border-radius: var(--radius-l);
68
- cursor: pointer;
166
+ cursor: pointer;
69
167
  }
70
168
 
71
169
  .image:hover {
@@ -80,55 +178,90 @@
80
178
  overflow: clip;
81
179
  }
82
180
 
83
- .image-preview {
84
- position: fixed;
85
- top: 0px;
86
- left: 0px;
87
- padding: var(--pad-m);
88
- background-color: var(--bg-blur);
89
- width: 100%;
90
- height: 100%;
91
- z-index: 1000;
92
- backdrop-filter: blur(20px);
93
- -webkit-backdrop-filter: blur(20px);
94
- animation:blur .5s ease-out;
95
- }
96
- .btn {
97
- position: absolute;
98
- top: var(--pad-m);
99
- right: var(--pad-m);
100
- }
101
-
102
- .image-container {
103
- width: 100%;
104
- height: 100%;
105
- animation:apear .2s ease-out;
106
- }
107
-
108
- .image-container img {
109
- width: 100%;
110
- height: 100%;
111
- object-fit: contain;
112
- }
113
-
114
- @keyframes blur {
115
- from {
116
- backdrop-filter: blur(0px);
117
- -webkit-backdrop-filter: blur(0px);
118
- }
119
- to {
120
- backdrop-filter: blur(20px);
121
- -webkit-backdrop-filter: blur(20px);
122
- }
123
- }
124
- @keyframes apear {
125
- from {
126
- opacity: 0;
127
- transform: translateY(-5px);
128
- }
129
- to {
130
- opacity: 1;
131
- transform: translateY(0px);
132
- }
133
- }
181
+ .image-preview {
182
+ position: fixed;
183
+ top: 0px;
184
+ left: 0px;
185
+ padding: var(--pad-m);
186
+ background-color: var(--bg-blur);
187
+ width: 100%;
188
+ height: 100%;
189
+ z-index: 1000;
190
+ backdrop-filter: blur(20px);
191
+ -webkit-backdrop-filter: blur(20px);
192
+ animation: blur 0.5s ease-out;
193
+ }
194
+ .btn {
195
+ position: absolute;
196
+ top: var(--pad-m);
197
+ right: var(--pad-m);
198
+ }
199
+
200
+ .image-container {
201
+ width: 100%;
202
+ height: 100%;
203
+ animation: apear 0.2s ease-out;
204
+ }
205
+
206
+ .image-container img {
207
+ width: 100%;
208
+ height: 100%;
209
+ object-fit: contain;
210
+ }
211
+
212
+ .left {
213
+ position: absolute;
214
+ top: 50%;
215
+ left: var(--pad-m);
216
+ transform: translateY(-50%);
217
+ animation: apearLeft 0.5s ease-out;
218
+ }
219
+ .right {
220
+ position: absolute;
221
+ top: 50%;
222
+ right: var(--pad-m);
223
+ transform: translateY(-50%);
224
+ animation: apearRight 0.5s ease-out;
225
+ }
226
+
227
+ @keyframes blur {
228
+ from {
229
+ backdrop-filter: blur(0px);
230
+ -webkit-backdrop-filter: blur(0px);
231
+ }
232
+ to {
233
+ backdrop-filter: blur(20px);
234
+ -webkit-backdrop-filter: blur(20px);
235
+ }
236
+ }
237
+ @keyframes apear {
238
+ from {
239
+ opacity: 0;
240
+ transform: translateY(-5px);
241
+ }
242
+ to {
243
+ opacity: 1;
244
+ transform: translateY(0px);
245
+ }
246
+ }
247
+ @keyframes apearLeft {
248
+ from {
249
+ opacity: 0;
250
+ transform: translate(-5px, -50%);
251
+ }
252
+ to {
253
+ opacity: 1;
254
+ transform: translate(0px, -50%);
255
+ }
256
+ }
257
+ @keyframes apearRight {
258
+ from {
259
+ opacity: 0;
260
+ transform: translate(5px, -50%);
261
+ }
262
+ to {
263
+ opacity: 1;
264
+ transform: translate(0px, -50%);
265
+ }
266
+ }
134
267
  </style>