WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/DataTable.wrn
+40 -40
View File
@@ -738,20 +738,20 @@ component DataTable {
class='wrn-table {class}'
@window:wrnexus:datatable:rows='applyRows(event)'
@window:wrnexus:datatable:error='applyError(event)'
>
data-wrn-owner="DataTable" data-wrn-part="root" data-wrn-component="DataTable" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}' data-wrn-axis-bordered='{bordered ? "true" : "false"}'>
{#if caption || description || searchable}
<div class="wrn-table__toolbar">
<div class="wrn-table__heading">
<div class="wrn-table__toolbar" data-wrn-owner="DataTable" data-wrn-part="toolbar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<div class="wrn-table__heading" data-wrn-owner="DataTable" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{#if caption}
<h3 class="wrn-table__caption">{caption}</h3>
<h3 class="wrn-table__caption" data-wrn-owner="DataTable" data-wrn-part="caption" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{caption}</h3>
{/if}
{#if description}
<p class="wrn-table__description">{description}</p>
<p class="wrn-table__description" data-wrn-owner="DataTable" data-wrn-part="description" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{description}</p>
{/if}
</div>
<div class="wrn-table__actions" data-show="visibleActions().length">
<span class="wrn-table__selected-count" data-show="selectedCount()">
<div class="wrn-table__actions" data-show="visibleActions().length" data-wrn-owner="DataTable" data-wrn-part="actions" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class="wrn-table__selected-count" data-show="selectedCount()" data-wrn-owner="DataTable" data-wrn-part="selectedCount" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{selectedCount()} selected
</span>
@@ -762,14 +762,14 @@ component DataTable {
data-key="entry.id"
data-tone='{entry.tone}'
@click='runAction(entry, event)'
>
data-wrn-owner="DataTable" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class='{entry.icon}' data-show="entry.icon" aria-hidden="true"></span>
<span>{entry.label}</span>
</button>
</div>
{#if searchable}
<div class="wrn-table__search">
<div class="wrn-table__search" data-wrn-owner="DataTable" data-wrn-part="search" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg
viewBox="0 0 24 24"
width="15"
@@ -779,7 +779,7 @@ component DataTable {
stroke-width="2"
stroke-linecap="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.2-3.2" />
</svg>
@@ -789,18 +789,18 @@ component DataTable {
placeholder='{searchPlaceholder}'
aria-label='{searchPlaceholder}'
@input='updateQuery(event)'
/>
data-wrn-owner="DataTable" data-wrn-part="control" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}"/>
</div>
{/if}
</div>
{/if}
<div class="wrn-table__scroll">
<table class="wrn-table__table" data-show="layout !== 'comparison'">
<div class="wrn-table__scroll" data-wrn-owner="DataTable" data-wrn-part="scroll" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<table class="wrn-table__table" data-show="layout !== 'comparison'" data-wrn-owner="DataTable" data-wrn-part="table" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<thead>
<tr>
{#if selectable}
<th class="wrn-table__select-cell" scope="col">
<th class="wrn-table__select-cell" scope="col" data-wrn-owner="DataTable" data-wrn-part="selectCell" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<button
type="button"
class="wrn-table__check"
@@ -808,8 +808,8 @@ component DataTable {
aria-label="Select all rows on this page"
aria-checked='{allVisibleSelected() ? "true" : "false"}'
@click='toggleAll()'
>
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
data-wrn-owner="DataTable" data-wrn-part="check" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m5 12 5 5 9-9" />
</svg>
</button>
@@ -830,7 +830,7 @@ component DataTable {
data-show="column.sortable"
data-active='{column.active}'
@click='sortBy(column.key)'
>
data-wrn-owner="DataTable" data-wrn-part="sort" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>{column.label}</span>
<svg
class="wrn-table__sort-icon"
@@ -843,7 +843,7 @@ component DataTable {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="sortIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m7 15 5 5 5-5" />
<path d="m7 9 5-5 5 5" />
</svg>
@@ -861,7 +861,7 @@ component DataTable {
@click='emitRowClick(row.raw, event)'
>
{#if selectable}
<td class="wrn-table__select-cell">
<td class="wrn-table__select-cell" data-wrn-owner="DataTable" data-wrn-part="selectCell" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<button
type="button"
class="wrn-table__check"
@@ -869,8 +869,8 @@ component DataTable {
aria-label="Select row"
aria-checked='{row.selected}'
@click='toggleRowAt(row.key, event)'
>
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
data-wrn-owner="DataTable" data-wrn-part="check" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m5 12 5 5 9-9" />
</svg>
</button>
@@ -891,7 +891,7 @@ component DataTable {
</table>
<!-- Comparison layout: fields down the left, one column per record. -->
<table class="wrn-table__table wrn-table__table--comparison" data-show="layout === 'comparison'">
<table class="wrn-table__table wrn-table__table--comparison" data-show="layout === 'comparison'" data-wrn-owner="DataTable" data-wrn-part="table" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<thead>
<tr>
<th scope="col">{caption}</th>
@@ -906,7 +906,7 @@ component DataTable {
</thead>
<tbody>
<tr data-for="field in comparisonRows()" data-key="field.key">
<th scope="row" class="wrn-table__field-label">{field.label}</th>
<th scope="row" class="wrn-table__field-label" data-wrn-owner="DataTable" data-wrn-part="fieldLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{field.label}</th>
<td
data-for="cell in field.cells"
data-key="cell.key"
@@ -919,14 +919,14 @@ component DataTable {
</tbody>
</table>
<div class="wrn-table__status" data-show="loading">
<span class="wrn-table__spinner" aria-hidden="true"></span>
<div class="wrn-table__status" data-show="loading" data-wrn-owner="DataTable" data-wrn-part="status" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class="wrn-table__spinner" aria-hidden="true" data-wrn-owner="DataTable" data-wrn-part="spinner" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}"></span>
<span>{loadingLabel}</span>
</div>
<div class="wrn-table__status wrn-table__status--error" data-show="loadError">
<div class="wrn-table__status wrn-table__status--error" data-show="loadError" data-wrn-owner="DataTable" data-wrn-part="status" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>{loadError}</span>
<button type="button" class="wrn-table__action" @click='reload()'>
<button type="button" class="wrn-table__action" @click='reload()' data-wrn-owner="DataTable" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{retryLabel}
</button>
</div>
@@ -934,24 +934,24 @@ component DataTable {
<div
class="wrn-table__status"
data-show="!loading && !loadError && totalCount() === 0"
>
data-wrn-owner="DataTable" data-wrn-part="status" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>{emptyMessage()}</span>
<button
type="button"
class="wrn-table__action"
data-show="isFiltered()"
@click='clearSearch()'
>
data-wrn-owner="DataTable" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{clearSearchLabel}
</button>
</div>
</div>
<div class="wrn-table__footer" data-show="paginated && totalCount() > 0">
<p class="wrn-table__range">{rangeLabel()}</p>
<div class="wrn-table__footer" data-show="paginated && totalCount() > 0" data-wrn-owner="DataTable" data-wrn-part="footer" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<p class="wrn-table__range" data-wrn-owner="DataTable" data-wrn-part="range" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{rangeLabel()}</p>
<div class="wrn-table__pager">
<span class="wrn-table__page-size">
<div class="wrn-table__pager" data-wrn-owner="DataTable" data-wrn-part="pager" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class="wrn-table__page-size" data-wrn-owner="DataTable" data-wrn-part="pageSize" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>Rows</span>
<!-- The shared Dropdown rather than a native select: a select
renders its list with the operating system styling, which
@@ -978,7 +978,7 @@ component DataTable {
aria-label="Previous page"
disabled='{currentPage() <= 1}'
@click='goToPage(currentPage() - 1)'
>
data-wrn-owner="DataTable" data-wrn-part="pageButton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg
viewBox="0 0 24 24"
width="14"
@@ -989,7 +989,7 @@ component DataTable {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m15 18-6-6 6-6" />
</svg>
</button>
@@ -997,14 +997,14 @@ component DataTable {
<span
class="wrn-table__page-indicator"
data-show="paginationStyle !== 'numbered'"
>
data-wrn-owner="DataTable" data-wrn-part="pageIndicator" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{currentPage()} / {pageCount()}
</span>
<span
class="wrn-table__page-numbers"
data-show="paginationStyle === 'numbered'"
>
data-wrn-owner="DataTable" data-wrn-part="pageNumbers" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<button
type="button"
class="wrn-table__page-number"
@@ -1013,7 +1013,7 @@ component DataTable {
data-active='{entry.active}'
aria-label='{"Page " + entry.number}'
@click='goToPage(entry.number)'
>
data-wrn-owner="DataTable" data-wrn-part="pageNumber" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{entry.number}
</button>
</span>
@@ -1024,7 +1024,7 @@ component DataTable {
aria-label="Next page"
disabled='{currentPage() >= pageCount()}'
@click='goToPage(currentPage() + 1)'
>
data-wrn-owner="DataTable" data-wrn-part="pageButton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg
viewBox="0 0 24 24"
width="14"
@@ -1035,7 +1035,7 @@ component DataTable {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m9 18 6-6-6-6" />
</svg>
</button>