mountain-ui 1.0.102 → 1.0.104

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/lib/components/Icons/IconSelector.svelte +44 -41
  3. package/src/lib/components/User/UserDropdown.svelte +5 -5
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mountain-ui",
3
3
  "private": false,
4
- "version": "1.0.102",
4
+ "version": "1.0.104",
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/components/Icons/IconSelector.svelte CHANGED
@@ -1,62 +1,65 @@
1
1
  <script>
2
- import { onMount } from 'svelte';
3
2
  import icons from './icons/icons.json';
4
- import { Button, DropdownMenu, IconButton, Tabs } from 'hamzus-ui';
3
+ import { svgs } from './svgs.js';
4
+ import { Button, DropdownMenu, IconButton } from 'hamzus-ui';
5
5
 
6
- let {onClick= (value)=>{}} = $props()
6
+ let { onClick = (value) => {} } = $props();
7
7
 
8
8
  let activeMenu = $state(icons[0].name);
9
9
 
10
- const svgs = import.meta.glob('./icons/**/*.svg', {
11
- query: '?raw',
12
- import: 'default'
13
- });
14
- async function loadSvg(theme, name) {
15
- return await svgs[`./icons/${theme}/${name}.svg`]();
10
+ function getSvg(theme, name) {
11
+ return svgs[`${theme}|${name}`] ?? '';
16
12
  }
17
13
 
18
- function handleClick(cat, child) {
19
- onClick(cat + "|" + child)
20
- }
14
+ function handleClick(cat, child) {
15
+ onClick(`${cat}|${child}`);
16
+ }
21
17
  </script>
22
18
 
23
19
  <DropdownMenu.Root direction="bottom">
24
20
  <DropdownMenu.Trigger slot="trigger">
25
- <slot/>
21
+ <slot />
26
22
  </DropdownMenu.Trigger>
23
+
27
24
  <DropdownMenu.Content slot="content" width="500px">
28
25
  <div class="content">
29
26
  <div class="categories-container">
30
27
  <div class="categories">
31
28
  {#each icons as iconTheme}
32
29
  <Button
33
- variant={activeMenu === iconTheme.name ? "secondary" : "ghost"}
30
+ variant={activeMenu === iconTheme.name ? 'secondary' : 'ghost'}
34
31
  onClick={() => {
35
32
  activeMenu = iconTheme.name;
36
33
  }}
37
34
  >
38
- <h6>
39
- {iconTheme.name}
40
- </h6>
35
+ <h6>{iconTheme.name}</h6>
41
36
  </Button>
42
37
  {/each}
43
38
  </div>
44
39
  </div>
45
- <div class="icons-container">
46
- <div class="icons">
47
- {#if activeMenu}
48
- {@const iconTheme = icons.find((iconTheme) => iconTheme.name === activeMenu)}
49
- {#each iconTheme.children as child}
50
- {#await loadSvg(activeMenu, child) then svg}
51
- <IconButton variant="ghost" onClick={()=>{handleClick(activeMenu, child)}}>
52
- {@html svg}
53
- </IconButton>
54
- {/await}
55
- {/each}
56
- {/if}
40
+
41
+ <div class="icons-container">
42
+ <div class="icons">
43
+ {#if activeMenu}
44
+ {@const iconTheme = icons.find(
45
+ (iconTheme) => iconTheme.name === activeMenu
46
+ )}
47
+
48
+ {#if iconTheme}
49
+ {#each iconTheme.children as child}
50
+ {@const svg = getSvg(activeMenu, child)}
51
+
52
+ <IconButton
53
+ variant="ghost"
54
+ onClick={() => handleClick(activeMenu, child)}
55
+ >
56
+ {@html svg}
57
+ </IconButton>
58
+ {/each}
59
+ {/if}
60
+ {/if}
61
+ </div>
57
62
  </div>
58
- </div>
59
-
60
63
  </div>
61
64
  </DropdownMenu.Content>
62
65
  </DropdownMenu.Root>
@@ -64,27 +67,27 @@
64
67
  <style>
65
68
  .content {
66
69
  width: 100%;
67
- height: 100%;
68
- overflow: hidden;
70
+ height: 100%;
71
+ overflow: hidden;
69
72
  display: flex;
70
73
  }
71
74
 
72
75
  .categories-container {
73
- overflow: auto;
74
- height: 1fr;
76
+ overflow: auto;
77
+ height: 1fr;
75
78
  width: 150px;
76
- border-right: 1px solid var(--stroke);
79
+ border-right: 1px solid var(--stroke);
77
80
  }
78
81
 
79
-
80
82
  .icons-container {
81
83
  width: 100%;
82
84
  height: 1fr;
83
- overflow: auto;
85
+ overflow: auto;
84
86
  }
85
- .icons {
87
+
88
+ .icons {
86
89
  display: flex;
87
90
  flex-wrap: wrap;
88
91
  gap: var(--pad-s);
89
- }
90
- </style>
92
+ }
93
+ </style>
package/src/lib/components/User/UserDropdown.svelte CHANGED
@@ -67,7 +67,7 @@
67
67
  </div>
68
68
  <TargetProjectSubscriptionCard {getProjectHref}></TargetProjectSubscriptionCard>
69
69
  <div class="content">
70
- <Button href={settingsHref} variant="ghost" style="width:100%;">
70
+ <Button href={settingsHref} variant="ghost" style="width:100%;column-gap: var(--pad-m);">
71
71
  <svg
72
72
  width="24"
73
73
  height="24"
@@ -88,7 +88,7 @@
88
88
  <h5>Paramètres</h5>
89
89
  </Button>
90
90
  <span class="separator"></span>
91
- <Button href={reportHref} variant="ghost" style="width:100%;">
91
+ <Button href={reportHref} variant="ghost" style="width:100%;column-gap: var(--pad-m);">
92
92
  <svg
93
93
  width="24"
94
94
  height="24"
@@ -112,7 +112,7 @@
112
112
 
113
113
  <h5>Signaler un problème</h5>
114
114
  </Button>
115
- <Button href={guideHref} variant="ghost" style="width:100%;">
115
+ <Button href={guideHref} variant="ghost" style="width:100%;column-gap: var(--pad-m);">
116
116
  <svg
117
117
  width="24"
118
118
  height="24"
@@ -142,7 +142,7 @@
142
142
  </Button>
143
143
  <span class="separator"></span>
144
144
  {#if hubHref}
145
- <Button href={hubHref} variant="ghost" style="width:100%;">
145
+ <Button href={hubHref} variant="ghost" style="width:100%;column-gap: var(--pad-m);">
146
146
  <svg
147
147
  width="24"
148
148
  height="24"
@@ -176,7 +176,7 @@
176
176
  </Button>
177
177
  <span class="separator"></span>
178
178
  {/if}
179
- <Button variant="ghost" style="width:100%;" onClick={handleLogout}>
179
+ <Button variant="ghost" style="width:100%;column-gap: var(--pad-m);" onClick={handleLogout}>
180
180
  <svg
181
181
  width="24"
182
182
  height="24"