iconograph-ui 1.4.12 → 1.4.14
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/example/src/routes/user/+page.svelte +2 -1
- package/lib/assets/icons/icon-next-grey.svg +42 -0
- package/lib/form/ActionButton.svelte +13 -1
- package/lib/layout/HeadSection.svelte +1 -0
- package/lib/table/TableFilter.svelte +2 -1
- package/lib/user/SelectUserInput.svelte +1 -1
- package/package.json +1 -1
|
@@ -60,8 +60,9 @@
|
|
|
60
60
|
</div>
|
|
61
61
|
<span class="margin-l-s" style="text-transform: uppercase; color: #888; font-weight: 600;"></span>
|
|
62
62
|
</div>
|
|
63
|
-
<div style="margin-right: 60px;">
|
|
63
|
+
<div style="margin-right: 60px; display: flex; gap: 8px;">
|
|
64
64
|
<ActionButton options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
|
|
65
|
+
<ActionButton style={"icon"} options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
|
|
65
66
|
</div>
|
|
66
67
|
</div>
|
|
67
68
|
</div>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<svg
|
|
3
|
+
viewBox="0 0 24 24"
|
|
4
|
+
width="96px"
|
|
5
|
+
height="96px"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg1"
|
|
8
|
+
sodipodi:docname="icon-next-w.svg"
|
|
9
|
+
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
|
|
10
|
+
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
11
|
+
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
14
|
+
<defs
|
|
15
|
+
id="defs1" />
|
|
16
|
+
<sodipodi:namedview
|
|
17
|
+
id="namedview1"
|
|
18
|
+
pagecolor="#505050"
|
|
19
|
+
bordercolor="#ffffff"
|
|
20
|
+
borderopacity="1"
|
|
21
|
+
inkscape:showpageshadow="0"
|
|
22
|
+
inkscape:pageopacity="0"
|
|
23
|
+
inkscape:pagecheckerboard="1"
|
|
24
|
+
inkscape:deskcolor="#505050"
|
|
25
|
+
inkscape:zoom="3.6902135"
|
|
26
|
+
inkscape:cx="34.279859"
|
|
27
|
+
inkscape:cy="51.081055"
|
|
28
|
+
inkscape:window-width="1366"
|
|
29
|
+
inkscape:window-height="697"
|
|
30
|
+
inkscape:window-x="296"
|
|
31
|
+
inkscape:window-y="1072"
|
|
32
|
+
inkscape:window-maximized="1"
|
|
33
|
+
inkscape:current-layer="svg1" />
|
|
34
|
+
<path
|
|
35
|
+
style="color:#000000;fill:#777777;stroke-linecap:square;-inkscape-stroke:none"
|
|
36
|
+
d="M 8.7481553,4.4712861 15.251845,10.974975"
|
|
37
|
+
id="path7" />
|
|
38
|
+
<path
|
|
39
|
+
id="path8"
|
|
40
|
+
style="color:#000000;fill:#777777;stroke-width:1.19665;stroke-linecap:square;-inkscape-stroke:none"
|
|
41
|
+
d="M 8.0956441,2.2032465 5.980469,4.3184215 7.0392251,5.3771777 13.762794,12.1025 7.0392251,18.828406 5.980469,19.884825 8.0956441,22 9.1544,20.94358 l 7.780572,-7.782908 1.058756,-1.058756 v -5.85e-4 L 17.729039,11.837226 15.878553,9.98674 15.877969,9.987324 9.1544,3.2620026 Z" />
|
|
42
|
+
</svg>
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import detailsIcon from '../assets/icons/icon-details.svg?url';
|
|
7
7
|
|
|
8
8
|
export let options = [];
|
|
9
|
+
export let style = "classic";
|
|
9
10
|
|
|
10
11
|
let open = false;
|
|
11
12
|
let dropdownEl;
|
|
@@ -23,7 +24,11 @@
|
|
|
23
24
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
24
25
|
<div class="dropdown {open ? 'open' : ''}" bind:this={dropdownEl} use:clickOutside on:click_outside={() => {open = false}}
|
|
25
26
|
on:click|preventDefault|stopPropagation={openDropdown}>
|
|
26
|
-
|
|
27
|
+
{#if style == "icon"}
|
|
28
|
+
<div style:background-image={`url("${detailsIcon}")`} class="icon"></div>
|
|
29
|
+
{:else}
|
|
30
|
+
<div style:background-image={`url("${detailsIcon}")`}>Actions</div>
|
|
31
|
+
{/if}
|
|
27
32
|
|
|
28
33
|
<!-- Liste déroulante -->
|
|
29
34
|
{#if open}
|
|
@@ -74,6 +79,13 @@
|
|
|
74
79
|
.dropdown > div:first-of-type:hover {
|
|
75
80
|
background-color: #ddd;
|
|
76
81
|
}
|
|
82
|
+
.dropdown > div:first-of-type.icon {
|
|
83
|
+
min-width: 1px;
|
|
84
|
+
background-size: 16px auto;
|
|
85
|
+
background-repeat: no-repeat;
|
|
86
|
+
background-position: center center;
|
|
87
|
+
padding-left: 24px;
|
|
88
|
+
}
|
|
77
89
|
.list {
|
|
78
90
|
position: absolute;
|
|
79
91
|
top: 100%;
|
|
@@ -138,11 +138,12 @@
|
|
|
138
138
|
box-sizing: border-box;
|
|
139
139
|
border: 1px solid var(--main-border-color);
|
|
140
140
|
border-radius: 8px;
|
|
141
|
-
min-width:
|
|
141
|
+
min-width: 150px;
|
|
142
142
|
padding: 4px 0px;
|
|
143
143
|
box-shadow: #00000012 0 0px 8px;
|
|
144
144
|
}
|
|
145
145
|
.select-filter > div {
|
|
146
|
+
display: block ruby;
|
|
146
147
|
padding: 6px 16px;
|
|
147
148
|
font-size: 13px;
|
|
148
149
|
}
|