38 lines
2.5 KiB
Plaintext
38 lines
2.5 KiB
Plaintext
<%#
|
|
Popover menu: pure <details>/<summary>, zero-JS. Mirrors html-css-foundation .menu.
|
|
Config:
|
|
trigger { class?(="btn", "" ⇒ none) · label?(aria-label) · icon? · text? · html?(raw inner, wins) }
|
|
align? "left" left-align the popover (default right)
|
|
up? boolean open upward (footer menus)
|
|
open? boolean start open
|
|
kebab? boolean bare kebab trigger (adds .kebab)
|
|
width? number|string popover min-width (number ⇒ px)
|
|
items: Item[] popover content, top→bottom
|
|
Item ∈ { head } · { sep } · { label, icon?, href? ⇒ <a>, danger? } (default: menu-item button)
|
|
· { group: { legend?, name, control?(="checkbox"|"radio"), options:{value,label,checked?}[] } }
|
|
%><%
|
|
const t = locals.trigger || {};
|
|
const sumCls = "class" in t ? t.class : "btn";
|
|
const items = locals.items || [];
|
|
const popCls = "menu-pop" + (locals.align === "left" ? " left" : "") + (locals.up ? " up" : "");
|
|
const width = locals.width;
|
|
-%>
|
|
<details class="menu<%= locals.kebab ? " kebab" : "" %>"<%= locals.open ? " open" : "" %>>
|
|
<summary<% if (sumCls) { %> class="<%= sumCls %>"<% } %><% if (t.label) { %> aria-label="<%= t.label %>"<% } %>><% if (t.html != null) { %><%- t.html %><% } else { if (t.icon) { %><svg class="ico ico-sm"><use href="#<%= t.icon %>"/></svg><% } if (t.text) { %><%= t.text %><% } } %></summary>
|
|
<div class="<%= popCls %>"<% if (width != null) { %> style="min-width:<%= typeof width === "number" ? width + "px" : width %>"<% } %>>
|
|
<% items.forEach((it) => { -%>
|
|
<% if (it.head != null) { -%>
|
|
<div class="menu-head"><%= it.head %></div>
|
|
<% } else if (it.sep) { -%>
|
|
<div class="menu-sep"></div>
|
|
<% } else if (it.group) { const g = it.group; -%>
|
|
<fieldset class="menu-field"><% if (g.legend) { %><legend class="menu-head"><%= g.legend %></legend><% } %><% g.options.forEach((o) => { %><label class="menu-check"><input type="<%= g.control || "checkbox" %>" name="<%= g.name %>" value="<%= o.value %>"<%= o.checked ? " checked" : "" %>><%= o.label %></label><% }) %></fieldset>
|
|
<% } else if (it.href) { -%>
|
|
<a class="menu-item<%= it.danger ? " danger" : "" %>" href="<%= it.href %>"><% if (it.icon) { %><svg class="ico"><use href="#<%= it.icon %>"/></svg><% } %><%= it.label %></a>
|
|
<% } else { -%>
|
|
<button class="menu-item<%= it.danger ? " danger" : "" %>" type="button"><% if (it.icon) { %><svg class="ico"><use href="#<%= it.icon %>"/></svg><% } %><%= it.label %></button>
|
|
<% } -%>
|
|
<% }) -%>
|
|
</div>
|
|
</details>
|