mountain-ui 1.0.140 → 1.0.142
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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mountain-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.142",
|
|
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",
|
|
@@ -25,32 +25,33 @@
|
|
|
25
25
|
let isUploading = $state(false);
|
|
26
26
|
|
|
27
27
|
async function handleFileChange(event) {
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
isUploading = true;
|
|
29
|
+
for (const file of event.target.files ?? []) {
|
|
30
|
+
if (!file) return;
|
|
30
31
|
|
|
31
|
-
isUploading = true;
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
if (request.statusType === 'error') {
|
|
41
|
-
isUploading = false;
|
|
42
|
-
toast.error({
|
|
43
|
-
title: 'Erreur !',
|
|
44
|
-
description: request.message
|
|
33
|
+
const request = await sendRequest({
|
|
34
|
+
path: '/upload-image',
|
|
35
|
+
data: {
|
|
36
|
+
file
|
|
37
|
+
}
|
|
45
38
|
});
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
39
|
|
|
49
|
-
|
|
40
|
+
if (request.statusType === 'error') {
|
|
41
|
+
isUploading = false;
|
|
42
|
+
toast.error({
|
|
43
|
+
title: 'Erreur !',
|
|
44
|
+
description: request.message
|
|
45
|
+
});
|
|
46
|
+
continue;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const fileId = request.data.id;
|
|
50
50
|
|
|
51
|
-
isUploading = false;
|
|
52
51
|
|
|
53
|
-
|
|
52
|
+
addFieldId(fileId);
|
|
53
|
+
}
|
|
54
|
+
isUploading = false;
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
function addFieldId(fieldId) {
|
|
@@ -64,7 +65,7 @@
|
|
|
64
65
|
|
|
65
66
|
value = JSON.stringify(decodedValue);
|
|
66
67
|
|
|
67
|
-
|
|
68
|
+
onChange(value);
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
function removeFieldId(fieldId) {
|
|
@@ -74,20 +75,20 @@
|
|
|
74
75
|
|
|
75
76
|
value = JSON.stringify(decodedValue);
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
onChange(value);
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
function openFilePicker() {
|
|
81
82
|
fileInput.click();
|
|
82
83
|
}
|
|
83
84
|
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
function resetInput(params) {
|
|
86
|
+
value = '[]';
|
|
86
87
|
|
|
87
|
-
|
|
88
|
+
if (fileInput) fileInput.value = '';
|
|
88
89
|
|
|
89
90
|
onChange(null);
|
|
90
|
-
|
|
91
|
+
}
|
|
91
92
|
</script>
|
|
92
93
|
|
|
93
94
|
<Line {compact}>
|
|
@@ -99,6 +100,7 @@
|
|
|
99
100
|
bind:this={fileInput}
|
|
100
101
|
on:change={handleFileChange}
|
|
101
102
|
disabled={isUploading}
|
|
103
|
+
multiple
|
|
102
104
|
style="display: none;"
|
|
103
105
|
/>
|
|
104
106
|
|
|
@@ -109,15 +111,45 @@
|
|
|
109
111
|
src="{import.meta.env
|
|
110
112
|
.VITE_API_URL}/get-image?__project_normalized_name={targetProject.normalized_name}&fileId={fileId}"
|
|
111
113
|
/>
|
|
112
|
-
<IconButton
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
114
|
+
<IconButton
|
|
115
|
+
onClick={() => {
|
|
116
|
+
removeFieldId(fileId);
|
|
117
|
+
}}
|
|
118
|
+
loading={isUploading}
|
|
119
|
+
variant="secondary"
|
|
120
|
+
size="24px"
|
|
121
|
+
>
|
|
122
|
+
<svg
|
|
123
|
+
width="24"
|
|
124
|
+
height="24"
|
|
125
|
+
viewBox="0 0 24 24"
|
|
126
|
+
fill="none"
|
|
127
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
128
|
+
>
|
|
129
|
+
<path
|
|
130
|
+
opacity="0.4"
|
|
131
|
+
d="M20.46 3.54L3.54 20.46C2.54 19.46 2 18.01 2 16.19V7.81C2 4.17 4.17 2 7.81 2H16.19C18.01 2 19.46 2.54 20.46 3.54Z"
|
|
132
|
+
fill="#292D32"
|
|
133
|
+
/>
|
|
134
|
+
<path
|
|
135
|
+
opacity="0.4"
|
|
136
|
+
d="M21.9993 7.81014V13.9001L20.3693 12.5001C19.5893 11.8301 18.3293 11.8301 17.5493 12.5001L13.3893 16.0701C12.6793 16.6801 11.5593 16.7401 10.7793 16.2201L21.6093 5.39014C21.7493 5.77014 21.8493 6.17014 21.9093 6.60014C21.9693 6.98014 21.9993 7.39014 21.9993 7.81014Z"
|
|
137
|
+
fill="#292D32"
|
|
138
|
+
/>
|
|
139
|
+
<path
|
|
140
|
+
d="M22.0006 13.9001V16.1901C22.0006 19.8301 19.8306 22.0001 16.1906 22.0001H7.81063C7.39062 22.0001 6.98063 21.9701 6.60063 21.9101C6.17063 21.8501 5.77062 21.7501 5.39062 21.6101L10.7806 16.2201C11.5606 16.7401 12.6806 16.6801 13.3906 16.0701L17.5506 12.5001C18.3306 11.8301 19.5906 11.8301 20.3706 12.5001L22.0006 13.9001Z"
|
|
141
|
+
fill="#292D32"
|
|
142
|
+
/>
|
|
143
|
+
<path
|
|
144
|
+
d="M21.7709 2.22988C21.4709 1.92988 20.9809 1.92988 20.6809 2.22988L2.23086 20.6899C1.93086 20.9899 1.93086 21.4799 2.23086 21.7799C2.38086 21.9199 2.57086 21.9999 2.77086 21.9999C2.97086 21.9999 3.16086 21.9199 3.31086 21.7699L21.7709 3.30988C22.0809 3.00988 22.0809 2.52988 21.7709 2.22988Z"
|
|
145
|
+
fill="#292D32"
|
|
146
|
+
/>
|
|
147
|
+
<path
|
|
148
|
+
d="M7.99914 10.3801C9.31358 10.3801 10.3791 9.31456 10.3791 8.00012C10.3791 6.68568 9.31358 5.62012 7.99914 5.62012C6.6847 5.62012 5.61914 6.68568 5.61914 8.00012C5.61914 9.31456 6.6847 10.3801 7.99914 10.3801Z"
|
|
149
|
+
fill="#292D32"
|
|
150
|
+
/>
|
|
151
|
+
</svg>
|
|
152
|
+
</IconButton>
|
|
121
153
|
</div>
|
|
122
154
|
{/each}
|
|
123
155
|
<Button
|
|
@@ -10,35 +10,134 @@
|
|
|
10
10
|
|
|
11
11
|
const targetProject = projectRegistry.getTargetProject();
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
let targetImageId = $state(null);
|
|
14
|
+
let canGoRight = $state(false);
|
|
15
|
+
let canGoLeft = $state(false);
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
|
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
|
-
|
|
166
|
+
cursor: pointer;
|
|
69
167
|
}
|
|
70
168
|
|
|
71
169
|
.image:hover {
|
|
@@ -80,55 +178,90 @@
|
|
|
80
178
|
overflow: clip;
|
|
81
179
|
}
|
|
82
180
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
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>
|