@r2digisolutions/components 0.14.5 → 0.14.6
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.
|
@@ -43,50 +43,57 @@
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
const itemClass = (item: NavRailItem) => [
|
|
46
|
-
'relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors',
|
|
46
|
+
'group relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors',
|
|
47
47
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
|
|
48
48
|
value === item.id
|
|
49
|
-
? 'bg-
|
|
49
|
+
? 'bg-brand-500/15 text-brand-500'
|
|
50
50
|
: 'text-secondary hover:bg-surface-overlay hover:text-primary',
|
|
51
51
|
item.disabled && 'pointer-events-none cursor-not-allowed opacity-40'
|
|
52
52
|
];
|
|
53
|
+
|
|
54
|
+
const glyphClass = (item: NavRailItem) => [
|
|
55
|
+
'h-5 w-5',
|
|
56
|
+
value === item.id ? 'text-brand-500' : 'text-secondary group-hover:text-primary'
|
|
57
|
+
];
|
|
53
58
|
</script>
|
|
54
59
|
|
|
55
60
|
{#snippet railButton(item: NavRailItem)}
|
|
56
|
-
<Tooltip content={item.label} side="right">
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
{
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
{
|
|
85
|
-
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
61
|
+
<Tooltip content={item.label} side="right" class="relative w-full justify-center">
|
|
62
|
+
<RailMark active={value === item.id} length="full" class="z-10" />
|
|
63
|
+
{#if item.href && !item.disabled}
|
|
64
|
+
<a
|
|
65
|
+
href={item.href}
|
|
66
|
+
aria-label={item.label}
|
|
67
|
+
aria-current={value === item.id ? 'page' : undefined}
|
|
68
|
+
class={itemClass(item)}
|
|
69
|
+
onclick={() => select(item.id, item.disabled)}
|
|
70
|
+
>
|
|
71
|
+
{#if item.icon}
|
|
72
|
+
<item.icon class={glyphClass(item)} strokeWidth={1.75} />
|
|
73
|
+
{:else}
|
|
74
|
+
<span class={['text-xs font-semibold', value === item.id && 'text-brand-500']}>
|
|
75
|
+
{item.label.slice(0, 1)}
|
|
76
|
+
</span>
|
|
77
|
+
{/if}
|
|
78
|
+
</a>
|
|
79
|
+
{:else}
|
|
80
|
+
<button
|
|
81
|
+
type="button"
|
|
82
|
+
aria-label={item.label}
|
|
83
|
+
aria-current={value === item.id ? 'page' : undefined}
|
|
84
|
+
disabled={item.disabled}
|
|
85
|
+
class={itemClass(item)}
|
|
86
|
+
onclick={() => select(item.id, item.disabled)}
|
|
87
|
+
>
|
|
88
|
+
{#if item.icon}
|
|
89
|
+
<item.icon class={glyphClass(item)} strokeWidth={1.75} />
|
|
90
|
+
{:else}
|
|
91
|
+
<span class={['text-xs font-semibold', value === item.id && 'text-brand-500']}>
|
|
92
|
+
{item.label.slice(0, 1)}
|
|
93
|
+
</span>
|
|
94
|
+
{/if}
|
|
95
|
+
</button>
|
|
96
|
+
{/if}
|
|
90
97
|
</Tooltip>
|
|
91
98
|
{/snippet}
|
|
92
99
|
|
|
@@ -102,7 +109,7 @@
|
|
|
102
109
|
</div>
|
|
103
110
|
{/if}
|
|
104
111
|
|
|
105
|
-
<nav class="gap-1 flex flex-1 flex-col items-center" aria-label="Rail">
|
|
112
|
+
<nav class="gap-1 flex w-full flex-1 flex-col items-center" aria-label="Rail">
|
|
106
113
|
{#each items as item (item.id)}
|
|
107
114
|
{@render railButton(item)}
|
|
108
115
|
{/each}
|
|
@@ -110,7 +117,7 @@
|
|
|
110
117
|
|
|
111
118
|
{#if footerItems.length > 0}
|
|
112
119
|
<div class="w-8 py-2"><Divider /></div>
|
|
113
|
-
<nav class="gap-1 flex flex-col items-center" aria-label="Rail footer">
|
|
120
|
+
<nav class="gap-1 flex w-full flex-col items-center" aria-label="Rail footer">
|
|
114
121
|
{#each footerItems as item (item.id)}
|
|
115
122
|
{@render railButton(item)}
|
|
116
123
|
{/each}
|