refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -1,5 +1,3 @@
|
||||
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
|
||||
|
||||
//
|
||||
// DataTable -- columns, sorting, filtering, pagination and selection over an
|
||||
// array of records.
|
||||
@@ -737,29 +735,29 @@ component DataTable {
|
||||
data-layout='{layout}'
|
||||
data-loading='{loading ? "true" : "false"}'
|
||||
data-sticky-first='{stickyFirstColumn ? "true" : "false"}'
|
||||
class='wire-table {class}'
|
||||
class='wrn-table {class}'
|
||||
@window:wrnexus:datatable:rows='applyRows(event)'
|
||||
@window:wrnexus:datatable:error='applyError(event)'
|
||||
>
|
||||
{#if caption || description || searchable}
|
||||
<div class="wire-table__toolbar">
|
||||
<div class="wire-table__heading">
|
||||
<div class="wrn-table__toolbar">
|
||||
<div class="wrn-table__heading">
|
||||
{#if caption}
|
||||
<h3 class="wire-table__caption">{caption}</h3>
|
||||
<h3 class="wrn-table__caption">{caption}</h3>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p class="wire-table__description">{description}</p>
|
||||
<p class="wrn-table__description">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="wire-table__actions" data-show="visibleActions().length">
|
||||
<span class="wire-table__selected-count" data-show="selectedCount()">
|
||||
<div class="wrn-table__actions" data-show="visibleActions().length">
|
||||
<span class="wrn-table__selected-count" data-show="selectedCount()">
|
||||
{selectedCount()} selected
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__action"
|
||||
class="wrn-table__action"
|
||||
data-for="entry in visibleActions()"
|
||||
data-key="entry.id"
|
||||
data-tone='{entry.tone}'
|
||||
@@ -771,7 +769,7 @@ component DataTable {
|
||||
</div>
|
||||
|
||||
{#if searchable}
|
||||
<div class="wire-table__search">
|
||||
<div class="wrn-table__search">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="15"
|
||||
@@ -797,15 +795,15 @@ component DataTable {
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wire-table__scroll">
|
||||
<table class="wire-table__table" data-show="layout !== 'comparison'">
|
||||
<div class="wrn-table__scroll">
|
||||
<table class="wrn-table__table" data-show="layout !== 'comparison'">
|
||||
<thead>
|
||||
<tr>
|
||||
{#if selectable}
|
||||
<th class="wire-table__select-cell" scope="col">
|
||||
<th class="wrn-table__select-cell" scope="col">
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__check"
|
||||
class="wrn-table__check"
|
||||
role="checkbox"
|
||||
aria-label="Select all rows on this page"
|
||||
aria-checked='{allVisibleSelected() ? "true" : "false"}'
|
||||
@@ -828,14 +826,14 @@ component DataTable {
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__sort"
|
||||
class="wrn-table__sort"
|
||||
data-show="column.sortable"
|
||||
data-active='{column.active}'
|
||||
@click='sortBy(column.key)'
|
||||
>
|
||||
<span>{column.label}</span>
|
||||
<svg
|
||||
class="wire-table__sort-icon"
|
||||
class="wrn-table__sort-icon"
|
||||
viewBox="0 0 24 24"
|
||||
width="12"
|
||||
height="12"
|
||||
@@ -863,10 +861,10 @@ component DataTable {
|
||||
@click='emitRowClick(row.raw, event)'
|
||||
>
|
||||
{#if selectable}
|
||||
<td class="wire-table__select-cell">
|
||||
<td class="wrn-table__select-cell">
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__check"
|
||||
class="wrn-table__check"
|
||||
role="checkbox"
|
||||
aria-label="Select row"
|
||||
aria-checked='{row.selected}'
|
||||
@@ -893,7 +891,7 @@ component DataTable {
|
||||
</table>
|
||||
|
||||
<!-- Comparison layout: fields down the left, one column per record. -->
|
||||
<table class="wire-table__table wire-table__table--comparison" data-show="layout === 'comparison'">
|
||||
<table class="wrn-table__table wrn-table__table--comparison" data-show="layout === 'comparison'">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{caption}</th>
|
||||
@@ -908,7 +906,7 @@ component DataTable {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr data-for="field in comparisonRows()" data-key="field.key">
|
||||
<th scope="row" class="wire-table__field-label">{field.label}</th>
|
||||
<th scope="row" class="wrn-table__field-label">{field.label}</th>
|
||||
<td
|
||||
data-for="cell in field.cells"
|
||||
data-key="cell.key"
|
||||
@@ -921,26 +919,26 @@ component DataTable {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="wire-table__status" data-show="loading">
|
||||
<span class="wire-table__spinner" aria-hidden="true"></span>
|
||||
<div class="wrn-table__status" data-show="loading">
|
||||
<span class="wrn-table__spinner" aria-hidden="true"></span>
|
||||
<span>{loadingLabel}</span>
|
||||
</div>
|
||||
|
||||
<div class="wire-table__status wire-table__status--error" data-show="loadError">
|
||||
<div class="wrn-table__status wrn-table__status--error" data-show="loadError">
|
||||
<span>{loadError}</span>
|
||||
<button type="button" class="wire-table__action" @click='reload()'>
|
||||
<button type="button" class="wrn-table__action" @click='reload()'>
|
||||
{retryLabel}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="wire-table__status"
|
||||
class="wrn-table__status"
|
||||
data-show="!loading && !loadError && totalCount() === 0"
|
||||
>
|
||||
<span>{emptyMessage()}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__action"
|
||||
class="wrn-table__action"
|
||||
data-show="isFiltered()"
|
||||
@click='clearSearch()'
|
||||
>
|
||||
@@ -949,11 +947,11 @@ component DataTable {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wire-table__footer" data-show="paginated && totalCount() > 0">
|
||||
<p class="wire-table__range">{rangeLabel()}</p>
|
||||
<div class="wrn-table__footer" data-show="paginated && totalCount() > 0">
|
||||
<p class="wrn-table__range">{rangeLabel()}</p>
|
||||
|
||||
<div class="wire-table__pager">
|
||||
<span class="wire-table__page-size">
|
||||
<div class="wrn-table__pager">
|
||||
<span class="wrn-table__page-size">
|
||||
<span>Rows</span>
|
||||
<!-- The shared Dropdown rather than a native select: a select
|
||||
renders its list with the operating system styling, which
|
||||
@@ -961,7 +959,7 @@ component DataTable {
|
||||
slot so it stays reactive -- a prop would be fixed at the
|
||||
value the dropdown was first rendered with. -->
|
||||
<Dropdown
|
||||
class="wire-table__page-dropdown"
|
||||
class="wrn-table__page-dropdown"
|
||||
width="sm"
|
||||
size="sm"
|
||||
placement="top-end"
|
||||
@@ -975,7 +973,7 @@ component DataTable {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__page-button"
|
||||
class="wrn-table__page-button"
|
||||
aria-label="Previous page"
|
||||
disabled='{currentPage() <= 1}'
|
||||
@click='goToPage(currentPage() - 1)'
|
||||
@@ -996,19 +994,19 @@ component DataTable {
|
||||
</button>
|
||||
|
||||
<span
|
||||
class="wire-table__page-indicator"
|
||||
class="wrn-table__page-indicator"
|
||||
data-show="paginationStyle !== 'numbered'"
|
||||
>
|
||||
{currentPage()} / {pageCount()}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="wire-table__page-numbers"
|
||||
class="wrn-table__page-numbers"
|
||||
data-show="paginationStyle === 'numbered'"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__page-number"
|
||||
class="wrn-table__page-number"
|
||||
data-for="entry in pageNumbers()"
|
||||
data-key="entry.number"
|
||||
data-active='{entry.active}'
|
||||
@@ -1021,7 +1019,7 @@ component DataTable {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="wire-table__page-button"
|
||||
class="wrn-table__page-button"
|
||||
aria-label="Next page"
|
||||
disabled='{currentPage() >= pageCount()}'
|
||||
@click='goToPage(currentPage() + 1)'
|
||||
@@ -1045,48 +1043,47 @@ component DataTable {
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
<ComponentBaseStyles hidden />
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--data-map {
|
||||
.wrn-next--data-map {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-md);
|
||||
background: var(--wrn-color-surface);
|
||||
box-shadow: var(--wrn-shadow-1);
|
||||
}
|
||||
|
||||
.wire-table {
|
||||
--table-accent: var(--wire-color-primary);
|
||||
.wrn-table {
|
||||
--table-accent: var(--wrn-color-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
color: var(--wire-color-text);
|
||||
color: var(--wrn-color-text);
|
||||
}
|
||||
|
||||
.wire-table[data-color="secondary"] {
|
||||
--table-accent: var(--wire-color-secondary);
|
||||
.wrn-table[data-color="secondary"] {
|
||||
--table-accent: var(--wrn-color-secondary);
|
||||
}
|
||||
|
||||
.wire-table[data-color="success"] {
|
||||
--table-accent: var(--wire-color-success);
|
||||
.wrn-table[data-color="success"] {
|
||||
--table-accent: var(--wrn-color-success);
|
||||
}
|
||||
|
||||
.wire-table[data-color="danger"] {
|
||||
--table-accent: var(--wire-color-danger);
|
||||
.wrn-table[data-color="danger"] {
|
||||
--table-accent: var(--wrn-color-danger);
|
||||
}
|
||||
|
||||
.wire-table[data-color="info"] {
|
||||
--table-accent: var(--wire-color-info);
|
||||
.wrn-table[data-color="info"] {
|
||||
--table-accent: var(--wrn-color-info);
|
||||
}
|
||||
|
||||
.wire-table__toolbar {
|
||||
.wrn-table__toolbar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
@@ -1094,97 +1091,97 @@ component DataTable {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-table__heading {
|
||||
.wrn-table__heading {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-table__caption {
|
||||
.wrn-table__caption {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text);
|
||||
color: var(--wrn-color-text);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wire-table__description {
|
||||
.wrn-table__description {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.wire-table__actions {
|
||||
.wrn-table__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.wire-table__selected-count {
|
||||
color: var(--wire-color-text-muted);
|
||||
.wrn-table__selected-count {
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wire-table__action {
|
||||
.wrn-table__action {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
min-height: 2.1rem;
|
||||
padding: 0 0.7rem;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-soft);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface-soft);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-sm);
|
||||
font: inherit;
|
||||
font-size: 0.79rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
|
||||
}
|
||||
|
||||
.wire-table__action:hover {
|
||||
.wrn-table__action:hover {
|
||||
color: var(--table-accent);
|
||||
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wire-color-border));
|
||||
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
.wire-table__action[data-tone="danger"] {
|
||||
color: var(--wire-color-danger);
|
||||
border-color: color-mix(in srgb, var(--wire-color-danger) 35%, var(--wire-color-border));
|
||||
.wrn-table__action[data-tone="danger"] {
|
||||
color: var(--wrn-color-danger);
|
||||
border-color: color-mix(in srgb, var(--wrn-color-danger) 35%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
.wire-table__action[data-tone="danger"]:hover {
|
||||
background: color-mix(in srgb, var(--wire-color-danger) 12%, transparent);
|
||||
.wrn-table__action[data-tone="danger"]:hover {
|
||||
background: color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
|
||||
}
|
||||
|
||||
/* Full gridlines: vertical rules between columns as well as rows. */
|
||||
.wire-table[data-gridlines="grid"] .wire-table__table th,
|
||||
.wire-table[data-gridlines="grid"] .wire-table__table td {
|
||||
border-right: 1px solid color-mix(in srgb, var(--wire-color-border) 60%, transparent);
|
||||
.wrn-table[data-gridlines="grid"] .wrn-table__table th,
|
||||
.wrn-table[data-gridlines="grid"] .wrn-table__table td {
|
||||
border-right: 1px solid color-mix(in srgb, var(--wrn-color-border) 60%, transparent);
|
||||
}
|
||||
|
||||
.wire-table[data-gridlines="grid"] .wire-table__table th:last-child,
|
||||
.wire-table[data-gridlines="grid"] .wire-table__table td:last-child {
|
||||
.wrn-table[data-gridlines="grid"] .wrn-table__table th:last-child,
|
||||
.wrn-table[data-gridlines="grid"] .wrn-table__table td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.wire-table__search {
|
||||
.wrn-table__search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-height: 2.35rem;
|
||||
padding: 0 0.7rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
background: var(--wire-color-surface-soft);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
color: var(--wrn-color-text-muted);
|
||||
background: var(--wrn-color-surface-soft);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 0.7rem;
|
||||
}
|
||||
|
||||
.wire-table__search input {
|
||||
.wrn-table__search input {
|
||||
width: 12rem;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
color: var(--wire-color-text);
|
||||
color: var(--wrn-color-text);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
@@ -1192,8 +1189,8 @@ component DataTable {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wire-table__search:focus-within {
|
||||
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wire-color-border));
|
||||
.wrn-table__search:focus-within {
|
||||
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -1205,73 +1202,73 @@ component DataTable {
|
||||
* spilled out over the page beside it instead of scrolling inside its own
|
||||
* box. min-width: 0 alone is not enough once the parent is a grid.
|
||||
*/
|
||||
.wire-table__scroll {
|
||||
.wrn-table__scroll {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 0.9rem;
|
||||
}
|
||||
|
||||
.wire-table[data-bordered="false"] .wire-table__scroll {
|
||||
.wrn-table[data-bordered="false"] .wrn-table__scroll {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wire-table__table {
|
||||
.wrn-table__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.wire-table__table th,
|
||||
.wire-table__table td {
|
||||
.wrn-table__table th,
|
||||
.wrn-table__table td {
|
||||
padding: 0.7rem 0.85rem;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-table[data-density="compact"] .wire-table__table th,
|
||||
.wire-table[data-density="compact"] .wire-table__table td {
|
||||
.wrn-table[data-density="compact"] .wrn-table__table th,
|
||||
.wrn-table[data-density="compact"] .wrn-table__table td {
|
||||
padding: 0.42rem 0.6rem;
|
||||
}
|
||||
|
||||
.wire-table[data-density="comfortable"] .wire-table__table th,
|
||||
.wire-table[data-density="comfortable"] .wire-table__table td {
|
||||
.wrn-table[data-density="comfortable"] .wrn-table__table th,
|
||||
.wrn-table[data-density="comfortable"] .wrn-table__table td {
|
||||
padding: 0.95rem 1rem;
|
||||
}
|
||||
|
||||
.wire-table__table th[data-align="center"],
|
||||
.wire-table__table td[data-align="center"] {
|
||||
.wrn-table__table th[data-align="center"],
|
||||
.wrn-table__table td[data-align="center"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-table__table th[data-align="end"],
|
||||
.wire-table__table td[data-align="end"] {
|
||||
.wrn-table__table th[data-align="end"],
|
||||
.wrn-table__table td[data-align="end"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wire-table__table thead th {
|
||||
.wrn-table__table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
color: var(--wire-color-text-muted);
|
||||
background: var(--wire-color-surface-soft);
|
||||
border-bottom: 1px solid var(--wire-color-border);
|
||||
color: var(--wrn-color-text-muted);
|
||||
background: var(--wrn-color-surface-soft);
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wire-table__table tbody tr {
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--wire-color-border) 60%, transparent);
|
||||
.wrn-table__table tbody tr {
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 60%, transparent);
|
||||
}
|
||||
|
||||
.wire-table__table tbody tr:last-child {
|
||||
.wrn-table__table tbody tr:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -1286,24 +1283,24 @@ component DataTable {
|
||||
* about the row, not decoration, so it wins outright; every rule below
|
||||
* sits at the same specificity and is ordered deliberately.
|
||||
*/
|
||||
.wire-table[data-striped="true"] .wire-table__table tbody tr:nth-child(even) {
|
||||
background: color-mix(in srgb, var(--wire-color-surface-soft) 55%, transparent);
|
||||
.wrn-table[data-striped="true"] .wrn-table__table tbody tr:nth-child(even) {
|
||||
background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent);
|
||||
}
|
||||
|
||||
.wire-table[data-striped] .wire-table__table tbody tr:hover:not([data-selected="true"]) {
|
||||
.wrn-table[data-striped] .wrn-table__table tbody tr:hover:not([data-selected="true"]) {
|
||||
background: color-mix(in srgb, var(--table-accent) 7%, transparent);
|
||||
}
|
||||
|
||||
/* Every selected row identical, striped or not. */
|
||||
.wire-table[data-striped] .wire-table__table tbody tr[data-selected="true"] {
|
||||
.wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"] {
|
||||
background: color-mix(in srgb, var(--table-accent) 15%, transparent);
|
||||
}
|
||||
|
||||
.wire-table[data-striped] .wire-table__table tbody tr[data-selected="true"]:hover {
|
||||
.wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"]:hover {
|
||||
background: color-mix(in srgb, var(--table-accent) 22%, transparent);
|
||||
}
|
||||
|
||||
.wire-table__sort {
|
||||
.wrn-table__sort {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1320,29 +1317,29 @@ component DataTable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-table__sort:hover {
|
||||
.wrn-table__sort:hover {
|
||||
color: var(--table-accent);
|
||||
}
|
||||
|
||||
.wire-table__sort-icon {
|
||||
.wrn-table__sort-icon {
|
||||
flex: 0 0 auto;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.wire-table__sort[data-active="true"] {
|
||||
.wrn-table__sort[data-active="true"] {
|
||||
color: var(--table-accent);
|
||||
}
|
||||
|
||||
.wire-table__sort[data-active="true"] .wire-table__sort-icon {
|
||||
.wrn-table__sort[data-active="true"] .wrn-table__sort-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wire-table__select-cell {
|
||||
.wrn-table__select-cell {
|
||||
width: 2.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-table__check {
|
||||
.wrn-table__check {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1351,75 +1348,75 @@ component DataTable {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
color: transparent;
|
||||
background: var(--wire-color-surface-raised);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
background: var(--wrn-color-surface-raised);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 0.32rem;
|
||||
cursor: pointer;
|
||||
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.wire-table__check[aria-checked="true"] {
|
||||
color: var(--wire-color-primary-contrast);
|
||||
.wrn-table__check[aria-checked="true"] {
|
||||
color: var(--wrn-color-primary-contrast);
|
||||
background: var(--table-accent);
|
||||
border-color: var(--table-accent);
|
||||
}
|
||||
|
||||
.wire-table__check:focus-visible {
|
||||
.wrn-table__check:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-accent) 35%, transparent);
|
||||
}
|
||||
|
||||
.wire-table__table--comparison {
|
||||
.wrn-table__table--comparison {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.wire-table__table--comparison th,
|
||||
.wire-table__table--comparison td {
|
||||
.wrn-table__table--comparison th,
|
||||
.wrn-table__table--comparison td {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.wire-table__table--comparison th[scope="row"] {
|
||||
color: var(--wire-color-text-muted);
|
||||
background: var(--wire-color-surface-soft);
|
||||
.wrn-table__table--comparison th[scope="row"] {
|
||||
color: var(--wrn-color-text-muted);
|
||||
background: var(--wrn-color-surface-soft);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 650;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wire-table[data-layout="comparison"] .wire-table__table th:first-child,
|
||||
.wire-table[data-layout="comparison"] .wire-table__table td:first-child {
|
||||
.wrn-table[data-layout="comparison"] .wrn-table__table th:first-child,
|
||||
.wrn-table[data-layout="comparison"] .wrn-table__table td:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.wire-table__status {
|
||||
.wrn-table__status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
padding: 1.75rem 1rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-table__status--error {
|
||||
color: var(--wire-color-danger);
|
||||
.wrn-table__status--error {
|
||||
color: var(--wrn-color-danger);
|
||||
}
|
||||
|
||||
.wire-table__spinner {
|
||||
.wrn-table__spinner {
|
||||
width: 0.95rem;
|
||||
height: 0.95rem;
|
||||
border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
border-top-color: currentColor;
|
||||
border-radius: 50%;
|
||||
animation: wire-table-spin 700ms linear infinite;
|
||||
animation: wrn-table-spin 700ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes wire-table-spin {
|
||||
@keyframes wrn-table-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
@@ -1427,32 +1424,32 @@ component DataTable {
|
||||
|
||||
/* Dim the rows while a refresh is in flight rather than tearing them out:
|
||||
a table that empties on every keystroke is far harder to read. */
|
||||
.wire-table[data-loading="true"] .wire-table__table tbody {
|
||||
.wrn-table[data-loading="true"] .wrn-table__table tbody {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* Keeps the first column readable while the rest scrolls sideways. */
|
||||
.wire-table[data-sticky-first="true"] .wire-table__table th:first-child,
|
||||
.wire-table[data-sticky-first="true"] .wire-table__table td:first-child {
|
||||
.wrn-table[data-sticky-first="true"] .wrn-table__table th:first-child,
|
||||
.wrn-table[data-sticky-first="true"] .wrn-table__table td:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: var(--wire-color-surface);
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
|
||||
.wire-table[data-sticky-first="true"] .wire-table__table thead th:first-child {
|
||||
.wrn-table[data-sticky-first="true"] .wrn-table__table thead th:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.wire-table__empty {
|
||||
.wrn-table__empty {
|
||||
margin: 0;
|
||||
padding: 1.75rem 1rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-table__footer {
|
||||
.wrn-table__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -1460,27 +1457,27 @@ component DataTable {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-table__range {
|
||||
.wrn-table__range {
|
||||
margin: 0;
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.wire-table__pager {
|
||||
.wrn-table__pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-table__page-size {
|
||||
.wrn-table__page-size {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.wire-table__page-dropdown {
|
||||
.wrn-table__page-dropdown {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@@ -1489,7 +1486,7 @@ component DataTable {
|
||||
* outranks the browser default and would crush the icon inside these
|
||||
* fixed-size controls.
|
||||
*/
|
||||
.wire-table__page-button {
|
||||
.wrn-table__page-button {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1498,39 +1495,39 @@ component DataTable {
|
||||
padding: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-soft);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface-soft);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 0.55rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-table__page-button:hover:not(:disabled) {
|
||||
.wrn-table__page-button:hover:not(:disabled) {
|
||||
color: var(--table-accent);
|
||||
border-color: color-mix(in srgb, var(--table-accent) 40%, var(--wire-color-border));
|
||||
border-color: color-mix(in srgb, var(--table-accent) 40%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
.wire-table__page-button:disabled {
|
||||
.wrn-table__page-button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wire-table__page-button svg {
|
||||
.wrn-table__page-button svg {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.wire-table__page-numbers {
|
||||
.wrn-table__page-numbers {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.wire-table__page-number {
|
||||
.wrn-table__page-number {
|
||||
appearance: none;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.4rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.55rem;
|
||||
@@ -1540,19 +1537,19 @@ component DataTable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-table__page-number:hover {
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-soft);
|
||||
.wrn-table__page-number:hover {
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface-soft);
|
||||
}
|
||||
|
||||
.wire-table__page-number[data-active="true"] {
|
||||
color: var(--wire-color-primary-contrast);
|
||||
.wrn-table__page-number[data-active="true"] {
|
||||
color: var(--wrn-color-primary-contrast);
|
||||
background: var(--table-accent);
|
||||
border-color: var(--table-accent);
|
||||
}
|
||||
|
||||
.wire-table__page-indicator {
|
||||
color: var(--wire-color-text-muted);
|
||||
.wrn-table__page-indicator {
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -1563,51 +1560,51 @@ component DataTable {
|
||||
* scrollbar on a phone.
|
||||
*/
|
||||
@media (max-width: 639px) {
|
||||
.wire-table__scroll {
|
||||
.wrn-table__scroll {
|
||||
overflow-x: visible;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wire-table__table,
|
||||
.wire-table__table tbody,
|
||||
.wire-table__table tr,
|
||||
.wire-table__table td {
|
||||
.wrn-table__table,
|
||||
.wrn-table__table tbody,
|
||||
.wrn-table__table tr,
|
||||
.wrn-table__table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-table__table thead {
|
||||
.wrn-table__table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Each row becomes a card. These are the exact tokens Card paints its
|
||||
* surface with (.wire-next__card-panel in ui.css) rather than a lookalike
|
||||
* surface with (.wrn-next__card-panel in ui.css) rather than a lookalike
|
||||
* of my own, so a stacked row and a real Card cannot drift apart.
|
||||
*
|
||||
* The Card component itself cannot be mounted per row: component tags
|
||||
* are resolved once, server side, while these rows are cloned in the
|
||||
* browser from a single template -- every row would share one mount.
|
||||
*/
|
||||
.wire-table__table tbody tr {
|
||||
.wrn-table__table tbody tr {
|
||||
margin-bottom: 0.7rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
background: var(--wire-color-surface);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
box-shadow: var(--wire-shadow-1);
|
||||
background: var(--wrn-color-surface);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-md);
|
||||
box-shadow: var(--wrn-shadow-1);
|
||||
}
|
||||
|
||||
.wire-table[data-striped="true"] .wire-table__table tbody tr:nth-child(even) {
|
||||
background: var(--wire-color-surface);
|
||||
.wrn-table[data-striped="true"] .wrn-table__table tbody tr:nth-child(even) {
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
|
||||
.wire-table[data-striped] .wire-table__table tbody tr[data-selected="true"] {
|
||||
background: color-mix(in srgb, var(--table-accent) 15%, var(--wire-color-surface));
|
||||
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wire-color-border));
|
||||
.wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"] {
|
||||
background: color-mix(in srgb, var(--table-accent) 15%, var(--wrn-color-surface));
|
||||
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
|
||||
}
|
||||
|
||||
.wire-table__table td {
|
||||
.wrn-table__table td {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -1616,32 +1613,101 @@ component DataTable {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wire-table__table td::before {
|
||||
.wrn-table__table td::before {
|
||||
content: attr(data-label);
|
||||
color: var(--wire-color-text-muted);
|
||||
color: var(--wrn-color-text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 650;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wire-table__select-cell {
|
||||
.wrn-table__select-cell {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.wire-table__footer {
|
||||
.wrn-table__footer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wire-table__actions {
|
||||
.wrn-table__actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* The page-size menu is anchored to a control near the bottom of the
|
||||
screen; it must be able to render outside the footer box. */
|
||||
.wire-table__footer,
|
||||
.wire-table__pager {
|
||||
.wrn-table__footer,
|
||||
.wrn-table__pager {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* Shared component foundation. */
|
||||
|
||||
.wrn-component {
|
||||
--wrn-component-color: var(--wrn-color-primary);
|
||||
--wrn-component-scale: 1;
|
||||
margin: 0;
|
||||
color: var(--wrn-color-text);
|
||||
font-family: var(--wrn-font-sans, inherit);
|
||||
}
|
||||
|
||||
.wrn-component--color-primary {
|
||||
--wrn-component-color: var(--wrn-color-primary);
|
||||
}
|
||||
|
||||
.wrn-component--color-secondary {
|
||||
--wrn-component-color: var(--wrn-color-secondary);
|
||||
}
|
||||
|
||||
.wrn-component--color-success {
|
||||
--wrn-component-color: var(--wrn-color-success);
|
||||
}
|
||||
|
||||
.wrn-component--color-warning {
|
||||
--wrn-component-color: var(--wrn-color-warning);
|
||||
}
|
||||
|
||||
.wrn-component--color-danger {
|
||||
--wrn-component-color: var(--wrn-color-danger);
|
||||
}
|
||||
|
||||
.wrn-component--color-info {
|
||||
--wrn-component-color: var(--wrn-color-info);
|
||||
}
|
||||
|
||||
.wrn-component--size-xs {
|
||||
--wrn-component-scale: 0.78;
|
||||
}
|
||||
|
||||
.wrn-component--size-sm {
|
||||
--wrn-component-scale: 0.88;
|
||||
}
|
||||
|
||||
.wrn-component--size-default,
|
||||
.wrn-component--size-md {
|
||||
--wrn-component-scale: 1;
|
||||
}
|
||||
|
||||
.wrn-component--size-lg {
|
||||
--wrn-component-scale: 1.14;
|
||||
}
|
||||
|
||||
.wrn-component--size-xl {
|
||||
--wrn-component-scale: 1.28;
|
||||
}
|
||||
|
||||
.wrn-component:not(.wrn-btn) {
|
||||
font-size: calc(1em * var(--wrn-component-scale));
|
||||
}
|
||||
|
||||
.wrn-component :is(a, button, input, select, textarea):focus-visible {
|
||||
outline-color: var(--wrn-component-color);
|
||||
}
|
||||
|
||||
.wrn-component p {
|
||||
margin: 0;
|
||||
color: var(--wrn-color-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user