mountain-ui 1.0.139 → 1.0.140

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Icon.svelte +3 -8
  3. package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Input.svelte +4 -4
  4. package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/TableView.svelte +49 -4
  5. package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/View.svelte +125 -9
  6. package/src/routes/exemple/[project_normalized_name]/[entity_slug]/create/+page.svelte +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mountain-ui",
3
3
  "private": false,
4
- "version": "1.0.139",
4
+ "version": "1.0.140",
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/Icon.svelte CHANGED
@@ -1,10 +1,5 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path
3
- d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z"
4
- fill="#292D32"
5
- />
6
- <path
7
- d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z"
8
- fill="#292D32"
9
- />
2
+ <path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="#292D32"/>
3
+ <path d="M9 10.75C7.48 10.75 6.25 9.52 6.25 8C6.25 6.48 7.48 5.25 9 5.25C10.52 5.25 11.75 6.48 11.75 8C11.75 9.52 10.52 10.75 9 10.75ZM9 6.75C8.31 6.75 7.75 7.31 7.75 8C7.75 8.69 8.31 9.25 9 9.25C9.69 9.25 10.25 8.69 10.25 8C10.25 7.31 9.69 6.75 9 6.75Z" fill="#292D32"/>
4
+ <path d="M2.67075 19.7001C2.43075 19.7001 2.19075 19.5801 2.05075 19.3701C1.82075 19.0301 1.91075 18.5601 2.26075 18.3301L7.19075 15.0201C8.27075 14.2901 9.76075 14.3801 10.7407 15.2101L11.0707 15.5001C11.5707 15.9301 12.4207 15.9301 12.9107 15.5001L17.0707 11.9301C18.1307 11.0201 19.8007 11.0201 20.8707 11.9301L22.5007 13.3301C22.8107 13.6001 22.8507 14.0701 22.5807 14.3901C22.3107 14.7001 21.8407 14.7401 21.5207 14.4701L19.8907 13.0701C19.3907 12.6401 18.5407 12.6401 18.0407 13.0701L13.8807 16.6401C12.8207 17.5501 11.1507 17.5501 10.0807 16.6401L9.75075 16.3501C9.29075 15.9601 8.53075 15.9201 8.02075 16.2701L3.09075 19.5801C2.96075 19.6601 2.81075 19.7001 2.67075 19.7001Z" fill="#292D32"/>
10
5
  </svg>
package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/Input.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import { projectRegistry } from '../../../../projectRegistry/registry.svelte';
3
3
  import Label from '../../../components/Label.svelte';
4
4
  import Line from '../../../components/Line.svelte';
5
- import { Button, DropdownMenu, IconButton, Tag } from 'hamzus-ui';
5
+ import { Button, DropdownMenu, IconButton, sendRequest, Tag, toast } from 'hamzus-ui';
6
6
 
7
7
  let {
8
8
  value = $bindable(''),
@@ -46,7 +46,7 @@
46
46
  return;
47
47
  }
48
48
 
49
- fileId = request.data.id;
49
+ const fileId = request.data.id;
50
50
 
51
51
  isUploading = false;
52
52
 
@@ -188,7 +188,7 @@
188
188
  height: 34px;
189
189
  width: 100%;
190
190
  column-gap: var(--pad-m);
191
- padding: var(--pad-xs);
191
+ padding: var(--pad-xs) var(--pad-m) var(--pad-xs) var(--pad-xs);
192
192
  border-radius: var(--radius-l);
193
193
  }
194
194
 
@@ -200,7 +200,7 @@
200
200
  height: 26px;
201
201
  width: 100%;
202
202
  object-fit: cover;
203
- border-radius: var(--radius-xl);
203
+ border-radius: var(--radius-s);
204
204
  overflow: clip;
205
205
  }
206
206
  </style>
package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/TableView.svelte CHANGED
@@ -1,13 +1,58 @@
1
1
  <script>
2
+ import { projectRegistry } from '../../../../projectRegistry/registry.svelte';
2
3
  import ViewText from '../../../components/ViewText.svelte';
3
4
  import { Tag } from 'hamzus-ui';
4
5
 
5
- let {value, choices} = $props()
6
+ let { value, choices } = $props();
7
+
8
+ const targetProject = projectRegistry.getTargetProject();
6
9
  </script>
7
10
 
8
11
  {#if value && value.formated}
9
- {@const data = choices.filter((el) => el.value === value.formated)[0]}
10
- <Tag label={value.formated} color={data.color.replace('--', '')}></Tag>
12
+ <div class="images">
13
+ {#each value.formated as fileId, index}
14
+ {#if index < 2}
15
+ <div class="image">
16
+ <img
17
+ src="{import.meta.env
18
+ .VITE_API_URL}/get-image-low-res?__project_normalized_name={targetProject.normalized_name}&fileId={fileId}"
19
+ />
20
+ </div>
21
+ {/if}
22
+ {/each}
23
+ {#if value.formated.length > 2}
24
+ {@const number = value.formated.length - 2}
25
+ <h5>+ {number}</h5>
26
+ {/if}
27
+ </div>
11
28
  {:else}
12
- <ViewText>-</ViewText>
29
+ <ViewText>-</ViewText>
13
30
  {/if}
31
+
32
+ <style>
33
+ .images {
34
+ display: flex;
35
+ column-gap: var(--pad-xs);
36
+ width: 100%;
37
+ }
38
+
39
+ .image {
40
+ display: flex;
41
+ height: 25px;
42
+ width: 25px;
43
+ padding: var(--pad-xs);
44
+ border-radius: var(--radius-l);
45
+ }
46
+
47
+ .image:hover {
48
+ background-color: var(--bg-blur);
49
+ }
50
+
51
+ .image img {
52
+ height: 100%;
53
+ width: 100%;
54
+ object-fit: cover;
55
+ border-radius: var(--radius-s);
56
+ overflow: clip;
57
+ }
58
+ </style>
package/src/lib/registry/fieldTypeRegistry/fieldTypes/files/FilesImage/View.svelte CHANGED
@@ -1,18 +1,134 @@
1
1
  <script>
2
+ import { projectRegistry } from '../../../../projectRegistry/registry.svelte';
3
+
2
4
  import Label from '../../../components/Label.svelte';
3
5
  import LineView from '../../../components/LineView.svelte';
4
6
  import ViewText from '../../../components/ViewText.svelte';
5
- import { Tag } from 'hamzus-ui';
7
+ import { IconButton, Tag } from 'hamzus-ui';
8
+
9
+ let { value, choices, compact, unique, secret, label, required } = $props();
10
+
11
+ const targetProject = projectRegistry.getTargetProject();
12
+
13
+ let targetImageId = $state(null)
6
14
 
7
- let {value, choices, compact, unique, secret, label, required } = $props()
15
+ function openImage(fileId) {
16
+ targetImageId = fileId
17
+ }
8
18
  </script>
19
+ {#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>
35
+ {/if}
9
36
  <LineView {compact}>
10
37
  <Label {unique} {secret} {label} {required}></Label>
11
- {#if value && value.formated}
12
- {@const data = choices.filter((el) => el.value === value.formated)[0]}
13
- <Tag label={value.formated} color={data.color.replace('--', '')}></Tag>
14
- {:else}
15
- <ViewText>-</ViewText>
16
- {/if}
38
+ {#if value && value.formated}
39
+ <div class="images">
40
+ {#each value.formated as fileId, index}
41
+ <div class="image" onclick={()=>{openImage(fileId)}}>
42
+ <img
43
+ src="{import.meta.env
44
+ .VITE_API_URL}/get-image-low-res?__project_normalized_name={targetProject.normalized_name}&fileId={fileId}"
45
+ />
46
+ </div>
47
+ {/each}
48
+ </div>
49
+ {:else}
50
+ <ViewText>-</ViewText>
51
+ {/if}
52
+ </LineView>
53
+
54
+
55
+ <style>
56
+ .images {
57
+ display: flex;
58
+ column-gap: var(--pad-xs);
59
+ width: 100%;
60
+ }
61
+
62
+ .image {
63
+ display: flex;
64
+ height: 25px;
65
+ width: 25px;
66
+ padding: var(--pad-xs);
67
+ border-radius: var(--radius-l);
68
+ cursor: pointer;
69
+ }
70
+
71
+ .image:hover {
72
+ background-color: var(--bg-blur);
73
+ }
74
+
75
+ .image img {
76
+ height: 100%;
77
+ width: 100%;
78
+ object-fit: cover;
79
+ border-radius: var(--radius-s);
80
+ overflow: clip;
81
+ }
82
+
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
+ }
17
113
 
18
- </LineView>
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
+ }
134
+ </style>
package/src/routes/exemple/[project_normalized_name]/[entity_slug]/create/+page.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
  path:"/create-entry",
30
30
  data:{
31
31
  ...ctx,
32
- entity_id:entity.id
32
+ entityId:entity.id
33
33
  }
34
34
  })
35
35