102 lines
2.9 KiB
Plaintext
102 lines
2.9 KiB
Plaintext
component Footer {
|
|
props {
|
|
@event select = function
|
|
@event action = function
|
|
size = "default"
|
|
color = "primary"
|
|
label = "Footer navigation"
|
|
items = []
|
|
columns = 3
|
|
maxWidth = "compact"
|
|
copyright = ""
|
|
class = ""
|
|
}
|
|
|
|
functions {
|
|
function groupedItems() {
|
|
const groups = []
|
|
let group = null
|
|
items.forEach((item) => {
|
|
if (item.type === "header") {
|
|
group = {
|
|
heading: item,
|
|
links: []
|
|
}
|
|
groups.push(group)
|
|
return
|
|
}
|
|
if (!group) {
|
|
group = {
|
|
heading: null,
|
|
links: []
|
|
}
|
|
groups.push(group)
|
|
}
|
|
group.links.push(item)
|
|
})
|
|
return groups
|
|
}
|
|
|
|
function selectItem(item) {
|
|
$emit(item.type === "action" ? "action" : "select", {
|
|
item: item,
|
|
value: item.value || ""
|
|
})
|
|
}
|
|
}
|
|
|
|
view {
|
|
<footer class="wire-footer wire-footer--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} wire-footer--columns-{columns} {class}">
|
|
<div class="wire-footer__grid">
|
|
<div class="wire-footer__pre">
|
|
<slot name="pre-footer" />
|
|
</div>
|
|
|
|
<nav class="wire-footer__links" aria-label="{label}">
|
|
{#each groupedItems() as group}
|
|
<section class="wire-footer__column">
|
|
{#if group.heading}
|
|
<strong class="wire-footer__heading">{group.heading.label}</strong>
|
|
{/if}
|
|
<div class="wire-footer__column-links">
|
|
{#each group.links as item}
|
|
<a class="wire-footer__link wire-footer__link--{item.type || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectItem(item)">
|
|
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
|
|
<span>{item.label}</span>
|
|
{#if item.external}<span aria-hidden="true">↗</span>{/if}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
{/each}
|
|
</nav>
|
|
|
|
<div class="wire-footer__post">
|
|
<slot name="post-footer" />
|
|
</div>
|
|
</div>
|
|
|
|
{#if copyright}
|
|
<div class="wire-footer__bottom">
|
|
<div class="wire-footer__copyright-left">
|
|
<slot name="copyright-left" />
|
|
</div>
|
|
<div class="wire-footer__copyright">{copyright}</div>
|
|
<div class="wire-footer__copyright-right">
|
|
<slot name="copyright-right" />
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="wire-footer__bottom wire-footer__bottom--slots">
|
|
<div class="wire-footer__copyright-left">
|
|
<slot name="copyright-left" />
|
|
</div>
|
|
<div class="wire-footer__copyright-right">
|
|
<slot name="copyright-right" />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</footer>
|
|
}
|
|
}
|