@aiaiai-pt/design-system 0.14.0 → 0.15.0
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.
|
@@ -24,11 +24,18 @@
|
|
|
24
24
|
<span>Clickable row</span>
|
|
25
25
|
{/snippet}
|
|
26
26
|
</ListItem>
|
|
27
|
+
|
|
28
|
+
@example Link row (navigation — renders an <a>, like Button/Card href)
|
|
29
|
+
<ListItem href="/services/potholes">
|
|
30
|
+
{#snippet leading()}<span>Report a pothole</span>{/snippet}
|
|
31
|
+
</ListItem>
|
|
27
32
|
-->
|
|
28
33
|
<script>
|
|
29
34
|
let {
|
|
30
35
|
/** @type {boolean} */
|
|
31
36
|
interactive = false,
|
|
37
|
+
/** @type {string | undefined} — renders an <a> when set (navigation row) */
|
|
38
|
+
href = undefined,
|
|
32
39
|
/** @type {string} */
|
|
33
40
|
class: className = '',
|
|
34
41
|
/** @type {import('svelte').Snippet | undefined} */
|
|
@@ -56,7 +63,16 @@
|
|
|
56
63
|
{/if}
|
|
57
64
|
{/snippet}
|
|
58
65
|
|
|
59
|
-
{#if
|
|
66
|
+
{#if href}
|
|
67
|
+
<a
|
|
68
|
+
{href}
|
|
69
|
+
class="list-item list-item-interactive list-item-link {className}"
|
|
70
|
+
role="listitem"
|
|
71
|
+
{...rest}
|
|
72
|
+
>
|
|
73
|
+
{@render body()}
|
|
74
|
+
</a>
|
|
75
|
+
{:else if interactive}
|
|
60
76
|
<button
|
|
61
77
|
class="list-item list-item-interactive {className}"
|
|
62
78
|
role="listitem"
|
|
@@ -75,6 +91,12 @@
|
|
|
75
91
|
{/if}
|
|
76
92
|
|
|
77
93
|
<style>
|
|
94
|
+
/* Anchor reset — a link row reads as a row, not as link text. */
|
|
95
|
+
.list-item-link {
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
color: inherit;
|
|
98
|
+
}
|
|
99
|
+
|
|
78
100
|
.list-item {
|
|
79
101
|
display: flex;
|
|
80
102
|
align-items: center;
|
|
@@ -29,9 +29,15 @@ type ListItem = {
|
|
|
29
29
|
* <span>Clickable row</span>
|
|
30
30
|
* {/snippet}
|
|
31
31
|
* </ListItem>
|
|
32
|
+
*
|
|
33
|
+
* @example Link row (navigation — renders an <a>, like Button/Card href)
|
|
34
|
+
* <ListItem href="/services/potholes">
|
|
35
|
+
* {#snippet leading()}<span>Report a pothole</span>{/snippet}
|
|
36
|
+
* </ListItem>
|
|
32
37
|
*/
|
|
33
38
|
declare const ListItem: import("svelte").Component<{
|
|
34
39
|
interactive?: boolean;
|
|
40
|
+
href?: any;
|
|
35
41
|
class?: string;
|
|
36
42
|
leading?: any;
|
|
37
43
|
trailing?: any;
|
|
@@ -39,6 +45,7 @@ declare const ListItem: import("svelte").Component<{
|
|
|
39
45
|
} & Record<string, any>, {}, "">;
|
|
40
46
|
type $$ComponentProps = {
|
|
41
47
|
interactive?: boolean;
|
|
48
|
+
href?: any;
|
|
42
49
|
class?: string;
|
|
43
50
|
leading?: any;
|
|
44
51
|
trailing?: any;
|