mountain-ui 1.0.102 → 1.0.103
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.103",
|
|
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",
|
|
@@ -1,62 +1,65 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { onMount } from 'svelte';
|
|
3
2
|
import icons from './icons/icons.json';
|
|
4
|
-
import {
|
|
3
|
+
import { svgs } from './svgs.js';
|
|
4
|
+
import { Button, DropdownMenu, IconButton } from 'hamzus-ui';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
let { onClick = (value) => {} } = $props();
|
|
7
7
|
|
|
8
8
|
let activeMenu = $state(icons[0].name);
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
19
|
-
|
|
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
|
-
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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
|
-
|
|
68
|
-
|
|
70
|
+
height: 100%;
|
|
71
|
+
overflow: hidden;
|
|
69
72
|
display: flex;
|
|
70
73
|
}
|
|
71
74
|
|
|
72
75
|
.categories-container {
|
|
73
|
-
|
|
74
|
-
|
|
76
|
+
overflow: auto;
|
|
77
|
+
height: 1fr;
|
|
75
78
|
width: 150px;
|
|
76
|
-
|
|
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
|
-
|
|
85
|
+
overflow: auto;
|
|
84
86
|
}
|
|
85
|
-
|
|
87
|
+
|
|
88
|
+
.icons {
|
|
86
89
|
display: flex;
|
|
87
90
|
flex-wrap: wrap;
|
|
88
91
|
gap: var(--pad-s);
|
|
89
|
-
|
|
90
|
-
</style>
|
|
92
|
+
}
|
|
93
|
+
</style>
|