iconograph-ui 1.5.6 → 1.6.1
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/README.md +1 -1
- package/example/src/lib/components/CustomTable.svelte +3 -2
- package/example/src/routes/+layout.svelte +6 -40
- package/example/static/css/testapp.css +1 -0
- package/lib/layout/SectionContent.svelte +6 -1
- package/lib/navigation/MainMenu.svelte +105 -6
- package/lib/navigation/MenuItem.svelte +25 -7
- package/lib/table/Table.svelte +2 -2
- package/lib/table/TableFilter.svelte +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,5 +4,5 @@ A Svelte Kit components library
|
|
|
4
4
|
|
|
5
5
|
# Instructions
|
|
6
6
|
|
|
7
|
-
In the main repository, run `docker compose up` that starts a server accessible on `http://localhost:
|
|
7
|
+
In the main repository, run `docker compose up` that starts a server accessible on `http://localhost:8003`
|
|
8
8
|
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
let settings = [
|
|
25
25
|
{
|
|
26
26
|
field: "name", label: "Nom", component: CustomLink, width: 120, props: {},
|
|
27
|
-
sort: (a, b) => a.name.localeCompare(b.name)
|
|
27
|
+
sort: (a, b) => a.name.localeCompare(b.name),
|
|
28
|
+
filterValue: "Saint",
|
|
28
29
|
},
|
|
29
30
|
{ field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
|
|
30
31
|
{ field: "type", label: "Type", component: CustomLabel, props: {}, width: 120, sort: (a, b) => null, filterOptions: enumType},
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
|
|
42
43
|
</script>
|
|
43
44
|
|
|
44
|
-
<Table uri={uri} columns={settings} actions={false} header={true} pagination={true} filtering={true}>
|
|
45
|
+
<Table uri={uri} columns={settings} defaultFilters={[ settings[0], settings[1] ]} actions={false} header={true} pagination={true} filtering={true}>
|
|
45
46
|
<div slot="actionButton">
|
|
46
47
|
<Button label="Ajouter"></Button>
|
|
47
48
|
</div>
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
</script>
|
|
28
28
|
|
|
29
|
-
<MainMenu menu={menu} isOpen={isMenuOpen} ></MainMenu>
|
|
29
|
+
<MainMenu menu={menu} bind:isOpen={isMenuOpen} ></MainMenu>
|
|
30
30
|
|
|
31
31
|
<div id="main-container" class="{isMenuOpen ? 'menu-open' : ''}" >
|
|
32
32
|
<div style="display: contents">
|
|
@@ -49,53 +49,19 @@
|
|
|
49
49
|
transition: 0.3s all ease-in-out;
|
|
50
50
|
padding-bottom: 48px;
|
|
51
51
|
}
|
|
52
|
+
/* TODO: Integrate as a component
|
|
52
53
|
#main-container.menu-open {
|
|
53
|
-
width: calc(100% -
|
|
54
|
-
left:
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
#main-container section > article {
|
|
59
|
-
width: calc(100% - 48px);
|
|
60
|
-
max-width: min(calc(100% - 24px), 1100px) !important;
|
|
61
|
-
margin-bottom: 30px;
|
|
62
|
-
padding: 24px 24px;
|
|
63
|
-
background-color: #ffffff;
|
|
64
|
-
box-sizing: border-box;
|
|
65
|
-
border: 1px solid #e4e4e4;
|
|
66
|
-
border-radius: 8px;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
@media (max-width: 1040px) {
|
|
70
|
-
#main-container.menu-open > section {
|
|
71
|
-
width: 100%;
|
|
72
|
-
min-width: 300px;
|
|
73
|
-
}
|
|
74
|
-
nav {
|
|
75
|
-
z-index: 50;
|
|
76
|
-
}
|
|
77
|
-
#main-container.menu-open section > article {
|
|
78
|
-
width: calc(100% - 88px);
|
|
79
|
-
}
|
|
54
|
+
width: calc(100% - 285px);
|
|
55
|
+
left: 285px;
|
|
80
56
|
}
|
|
57
|
+
*/
|
|
81
58
|
|
|
82
59
|
@media (max-width: 780px) {
|
|
83
60
|
#main-container {
|
|
84
61
|
left: 0px;
|
|
62
|
+
width: 100%;
|
|
85
63
|
margin-top: 0px;
|
|
86
64
|
}
|
|
87
|
-
#main-container.menu-open {
|
|
88
|
-
width: 100vw;
|
|
89
|
-
left: 0px;
|
|
90
|
-
}
|
|
91
|
-
article {
|
|
92
|
-
width: calc(100% - 88px);
|
|
93
|
-
margin-bottom: 30px;
|
|
94
|
-
padding: 24px 24px;
|
|
95
|
-
}
|
|
96
|
-
#main-container section > article {
|
|
97
|
-
width: calc(100% - 88px);
|
|
98
|
-
}
|
|
99
65
|
}
|
|
100
66
|
</style>
|
|
101
67
|
|
|
@@ -8,7 +8,15 @@
|
|
|
8
8
|
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
<nav class="{isOpen ? '' : '
|
|
11
|
+
<nav class="{isOpen ? 'menu-open' : ''}">
|
|
12
|
+
<header>
|
|
13
|
+
<div class="{isOpen ? 'menu-open' : ''}" >
|
|
14
|
+
<div on:click={() => isOpen = !isOpen}>
|
|
15
|
+
<div></div><div></div><div></div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
12
20
|
<div class="logo" >
|
|
13
21
|
<!-- Logo -->
|
|
14
22
|
</div>
|
|
@@ -16,19 +24,86 @@
|
|
|
16
24
|
<div class="main">
|
|
17
25
|
<ul>
|
|
18
26
|
{#each menu.main as item}
|
|
19
|
-
<MenuItem item={item}></MenuItem>
|
|
27
|
+
<MenuItem item={item} isOpen={isOpen}></MenuItem>
|
|
20
28
|
{/each}
|
|
21
29
|
</ul>
|
|
22
30
|
</div>
|
|
23
31
|
|
|
24
32
|
<div class="bottom" >
|
|
25
33
|
{#each menu.bottom as item}
|
|
26
|
-
<MenuItem item={item}></MenuItem>
|
|
34
|
+
<MenuItem item={item} isOpen={isOpen} ></MenuItem>
|
|
27
35
|
{/each}
|
|
28
36
|
</div>
|
|
29
37
|
</nav>
|
|
30
38
|
|
|
31
39
|
<style>
|
|
40
|
+
header {
|
|
41
|
+
background-color: transparent;
|
|
42
|
+
height: 36px;
|
|
43
|
+
padding: 14px;
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 10px;
|
|
46
|
+
right: -11px;
|
|
47
|
+
z-index: 300;
|
|
48
|
+
}
|
|
49
|
+
header > div {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 10px;
|
|
52
|
+
left: 0px;
|
|
53
|
+
width: 32px;
|
|
54
|
+
height: 32px;
|
|
55
|
+
border-radius: 30px;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
background-color: #fff;
|
|
58
|
+
border: 1px solid var(--main-border-color);
|
|
59
|
+
transition: all ease-in-out 0.3s;
|
|
60
|
+
align-self: flex-end;
|
|
61
|
+
}
|
|
62
|
+
header > div > div {
|
|
63
|
+
position: relative;
|
|
64
|
+
top: -4px;
|
|
65
|
+
left: -2px;
|
|
66
|
+
width: 32px;
|
|
67
|
+
height: 32px;
|
|
68
|
+
}
|
|
69
|
+
header > div.menu-open {
|
|
70
|
+
background-color: #fff;
|
|
71
|
+
box-shadow: inset;
|
|
72
|
+
}
|
|
73
|
+
header > div > div > div{
|
|
74
|
+
display: inline-block;
|
|
75
|
+
position: absolute;
|
|
76
|
+
vertical-align: top;
|
|
77
|
+
background-color: #333;
|
|
78
|
+
border-radius: 0px;
|
|
79
|
+
height: 2px;
|
|
80
|
+
width: 16px;
|
|
81
|
+
transition: all 0.3s;
|
|
82
|
+
border-radius: 0px;
|
|
83
|
+
}
|
|
84
|
+
header > div > div > div:nth-of-type(1){
|
|
85
|
+
top: 15px;
|
|
86
|
+
left: 10px;
|
|
87
|
+
}
|
|
88
|
+
header > div > div > div:nth-of-type(2){
|
|
89
|
+
top: 20px;
|
|
90
|
+
left: 10px;
|
|
91
|
+
}
|
|
92
|
+
header > div > div > div:nth-of-type(3){
|
|
93
|
+
top: 24px;
|
|
94
|
+
left: 10px;
|
|
95
|
+
}
|
|
96
|
+
header > div.menu-open > div > div:nth-of-type(1){
|
|
97
|
+
top: 20px;
|
|
98
|
+
transform: rotate(45deg);
|
|
99
|
+
}
|
|
100
|
+
header > div.menu-open > div > div:nth-of-type(2){
|
|
101
|
+
display: none;
|
|
102
|
+
}
|
|
103
|
+
header > div.menu-open > div > div:nth-of-type(3){
|
|
104
|
+
top: 20px;
|
|
105
|
+
transform: rotate(-45deg);
|
|
106
|
+
}
|
|
32
107
|
nav {
|
|
33
108
|
background-color: var(--main-bg-color);
|
|
34
109
|
position: fixed;
|
|
@@ -44,14 +119,15 @@
|
|
|
44
119
|
transition: all ease-in-out 0.4s;
|
|
45
120
|
display: flex;
|
|
46
121
|
flex-direction: column;
|
|
47
|
-
align-items:
|
|
122
|
+
align-items: flex-start;
|
|
48
123
|
z-index: 200;
|
|
49
124
|
}
|
|
50
|
-
nav.
|
|
125
|
+
nav.menu-open {
|
|
51
126
|
transform: translateX(0px);
|
|
127
|
+
width: 285px;
|
|
52
128
|
}
|
|
53
129
|
nav > .logo {
|
|
54
|
-
width:
|
|
130
|
+
width: 48px;
|
|
55
131
|
height: 40px;
|
|
56
132
|
min-height: 40px;
|
|
57
133
|
background-image: var(--logo-minimized);
|
|
@@ -59,6 +135,7 @@
|
|
|
59
135
|
background-repeat: no-repeat;
|
|
60
136
|
background-position: center center;
|
|
61
137
|
margin-bottom: 32px;
|
|
138
|
+
margin-left: 17px;
|
|
62
139
|
}
|
|
63
140
|
|
|
64
141
|
nav > .main {
|
|
@@ -81,4 +158,26 @@
|
|
|
81
158
|
width: 30px;
|
|
82
159
|
}
|
|
83
160
|
|
|
161
|
+
|
|
162
|
+
@media (max-width: 780px) {
|
|
163
|
+
nav{
|
|
164
|
+
transform: translateX(-85px);
|
|
165
|
+
}
|
|
166
|
+
nav.menu-open {
|
|
167
|
+
transform: translateX(0px);
|
|
168
|
+
width: 285px;
|
|
169
|
+
}
|
|
170
|
+
header {
|
|
171
|
+
top: 10px;
|
|
172
|
+
right: initial;
|
|
173
|
+
left: 105px;
|
|
174
|
+
}
|
|
175
|
+
nav.menu-open > header {
|
|
176
|
+
left: 20px;
|
|
177
|
+
}
|
|
178
|
+
header > div {
|
|
179
|
+
border: none;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
84
183
|
</style>
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
export let item;
|
|
3
|
+
export let isOpen = false;
|
|
3
4
|
let isHover = false;
|
|
4
5
|
</script>
|
|
5
6
|
|
|
6
7
|
<li>
|
|
7
8
|
<a aria-label="{item.name} tab menu" href="{item.uri}" class="menu-item {item.selected ? 'selected' : ''}"
|
|
8
9
|
on:mouseenter={() => isHover = true} on:mouseleave={() => isHover = false} data-sveltekit-preload-data="off">
|
|
9
|
-
<div>
|
|
10
|
+
<div class="{isOpen ? 'menu-open' : ''}">
|
|
10
11
|
<div><!-- Lateral Color Border --></div>
|
|
11
|
-
<div style="background-image: url({item.selected || isHover ? item.iconHover: item.icon})"
|
|
12
|
+
<div style="background-image: url({item.selected || isHover ? item.iconHover: item.icon})">
|
|
13
|
+
{item.name}
|
|
14
|
+
</div>
|
|
12
15
|
</div>
|
|
13
16
|
</a>
|
|
14
17
|
</li>
|
|
@@ -39,26 +42,41 @@
|
|
|
39
42
|
.menu-item > div > div:nth-of-type(1) {
|
|
40
43
|
height: 100%;
|
|
41
44
|
width: 5px;
|
|
45
|
+
min-width: 5px;
|
|
42
46
|
background-color: transparent;
|
|
43
|
-
transition: all
|
|
47
|
+
transition: all linear 0.17s;
|
|
44
48
|
border-top-right-radius: 8px;
|
|
45
49
|
border-bottom-right-radius: 8px;
|
|
46
50
|
}
|
|
47
51
|
.menu-item > div > div:nth-of-type(2) {
|
|
48
52
|
height: 48px;
|
|
49
|
-
width:
|
|
53
|
+
width: 0px;
|
|
50
54
|
margin: 0px 12px;
|
|
51
55
|
border-radius: 12px;
|
|
52
56
|
background-size: 26px auto;
|
|
53
|
-
background-position:
|
|
57
|
+
background-position: 11px center;
|
|
54
58
|
background-repeat: no-repeat;
|
|
55
|
-
transition: all
|
|
59
|
+
transition: all linear 0.17s;
|
|
60
|
+
line-height: 48px;
|
|
61
|
+
padding-left: 48px;
|
|
62
|
+
overflow-x: hidden;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
color: var(--theme-text-darkgrey);
|
|
65
|
+
font-family: var(--theme-title-font);
|
|
66
|
+
}
|
|
67
|
+
.menu-item > div.menu-open > div:nth-of-type(2) {
|
|
68
|
+
height: 48px;
|
|
69
|
+
width: 200px;
|
|
70
|
+
display: flex;
|
|
56
71
|
}
|
|
57
|
-
|
|
58
72
|
.menu-item.selected > div > div:nth-of-type(1) {
|
|
59
73
|
background-color: var(--theme-main-color);
|
|
60
74
|
}
|
|
75
|
+
.menu-item.selected > div > div:nth-of-type(2) {
|
|
76
|
+
color: var(--theme-main-color);
|
|
77
|
+
}
|
|
61
78
|
.menu-item:hover > div > div:nth-of-type(2) {
|
|
62
79
|
background-color: var(--theme-bg-color-light);
|
|
80
|
+
color: var(--theme-main-color);
|
|
63
81
|
}
|
|
64
82
|
</style>
|
package/lib/table/Table.svelte
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
import loaderIcon from '../assets/icons/loader-ring-grey.svg?url';
|
|
9
9
|
|
|
10
10
|
export let columns = [];
|
|
11
|
+
export let defaultFilters = [];
|
|
11
12
|
export let uri;
|
|
12
13
|
export let actions = false;
|
|
13
14
|
export let header = false;
|
|
@@ -65,7 +66,6 @@
|
|
|
65
66
|
|
|
66
67
|
const resBody = await response.json();
|
|
67
68
|
|
|
68
|
-
console.log(resBody);
|
|
69
69
|
data = resBody.data;
|
|
70
70
|
total = resBody.count ? resBody.count : 0;
|
|
71
71
|
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
|
|
128
128
|
<div>
|
|
129
129
|
{#if filtering}
|
|
130
|
-
<TableFilter columns={columns} on:filter={(e) => resetAndGetData(e.detail)}></TableFilter>
|
|
130
|
+
<TableFilter columns={columns} filters={defaultFilters} on:filter={(e) => resetAndGetData(e.detail)}></TableFilter>
|
|
131
131
|
{/if}
|
|
132
132
|
</div>
|
|
133
133
|
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
export let columns;
|
|
11
11
|
|
|
12
12
|
let selectedColumnsToFilter = [];
|
|
13
|
+
export { selectedColumnsToFilter as filters };
|
|
13
14
|
let aggregateFilters = {};
|
|
14
15
|
|
|
15
16
|
async function addFilter(col) {
|
|
@@ -31,7 +32,6 @@
|
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
async function submitFilter() {
|
|
34
|
-
console.log(aggregateFilters);
|
|
35
35
|
dispatch("filter", aggregateFilters);
|
|
36
36
|
}
|
|
37
37
|
|