sol-components 2.1.0

package/web/views/table.js

@@ -0,0 +1,73 @@
+import { appendCell } from './_helpers.js';
+
+export function render(container, data, host, options = {}) {
+  const { hideHeader, mkBnodeLink } = options;
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  const table = document.createElement('table');
+  table.setAttribute('role', 'table');
+
+  if (!hideHeader) {
+    const thead = document.createElement('thead');
+    const tr = document.createElement('tr');
+    tr.setAttribute('role', 'row');
+    vars.forEach(v => {
+      const th = document.createElement('th');
+      th.setAttribute('role', 'columnheader');
+      th.setAttribute('tabindex', '0');
+      th.setAttribute('aria-sort', 'none');
+      th.setAttribute('aria-label', `${v}, sortable column`);
+      th.textContent = v;
+      tr.appendChild(th);
+    });
+    thead.appendChild(tr);
+    table.appendChild(thead);
+  }
+
+  const tbody = document.createElement('tbody');
+  tbody.setAttribute('role', 'rowgroup');
+  bindings.forEach(row => {
+    const tr = document.createElement('tr');
+    tr.setAttribute('role', 'row');
+    vars.forEach(v => {
+      const td = document.createElement('td');
+      td.setAttribute('role', 'cell');
+      appendCell(td, row[v], mkBnodeLink);
+      tr.appendChild(td);
+    });
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+
+  if (!hideHeader) addSort(table);
+  container.appendChild(table);
+}
+
+function addSort(table) {
+  const ths = table.querySelectorAll('th');
+  let col = -1, dir = 1;
+  const doSort = (i) => {
+    dir = col === i ? -dir : 1;
+    col = i;
+    ths.forEach((h, j) => {
+      const active = j === i;
+      const order  = active ? (dir > 0 ? 'asc' : 'desc') : '';
+      h.setAttribute('data-sort', order);
+      h.setAttribute('aria-sort', active ? (dir > 0 ? 'ascending' : 'descending') : 'none');
+    });
+    const tbody = table.querySelector('tbody');
+    Array.from(tbody.querySelectorAll('tr'))
+      .sort((a, b) => dir * (a.cells[i]?.textContent || '')
+        .localeCompare(b.cells[i]?.textContent || '', undefined, { numeric: true, sensitivity: 'base' }))
+      .forEach(r => tbody.appendChild(r));
+  };
+  ths.forEach((th, i) => {
+    th.addEventListener('click', () => doSort(i));
+    th.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        doSort(i);
+      }
+    });
+  });
+}

package/web/views/tabs.js

@@ -0,0 +1,57 @@
+import { siblingUrl } from '../../core/here.js';
+
+/**
+ * Built-in view renderer for sol-query — "tabs".
+ * Turns a result set of URIs + labels into a <sol-tabs> element. Each row
+ * becomes one tab: anchor href = link column, anchor text = label column.
+ *
+ * Column selection: uses vars named `link` + `label` when present,
+ * otherwise falls back to the first two columns in order (1st = link,
+ * 2nd = label). If only one column is returned, it's used for both.
+ *
+ * Any additional result columns are forwarded as attributes on the anchor,
+ * so <sol-tabs> can pass them through to the panel component. e.g. a query
+ * with `?link ?label ?view` lets the `view` value land on the panel element.
+ *
+ * The handler attribute on <sol-query view="tabs"> is forwarded onto the
+ * <sol-tabs> element, so authors can choose the component each tab wraps
+ * around:
+ *   <sol-query view="tabs" handler="sol-live-edit" …>
+ *
+ * Usage: <sol-query view="tabs" endpoint="…" sparql="SELECT ?link ?label …">
+ */
+
+export async function render(container, data, host) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) { container.textContent = 'No results'; return; }
+
+  const hasNamed = vars.includes('link') && vars.includes('label');
+  const linkVar  = hasNamed ? 'link'  : vars[0];
+  const labelVar = hasNamed ? 'label' : (vars[1] ?? vars[0]);
+  const extraVars = vars.filter(v => v !== linkVar && v !== labelVar);
+
+  await import(siblingUrl('../sol-tabs.js', import.meta.url));
+
+  const tabs = document.createElement('sol-tabs');
+
+  // Forward a handler from the host sol-query (if any) to the new tabs.
+  const handler = host?.getAttribute?.('handler');
+  if (handler) tabs.setAttribute('handler', handler);
+
+  for (const row of bindings) {
+    const url   = row[linkVar]?.value;
+    const label = row[labelVar]?.value || url || '';
+    if (!url) continue;
+    const a = document.createElement('a');
+    a.setAttribute('href', url);
+    a.textContent = label;
+    for (const v of extraVars) {
+      const cell = row[v];
+      if (cell?.value != null) a.setAttribute(v, cell.value);
+    }
+    tabs.appendChild(a);
+  }
+
+  container.appendChild(tabs);
+}