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/TreeView.wrn
+14 -14
View File
@@ -50,26 +50,26 @@ component TreeView {
}
view {
<section {...attrs} data-ui-component="TreeView" class='wrn-tree-view {class}'>
{#if title}<strong class="wrn-tree-view__title">{title}</strong>{/if}
{#if description}<p class="wrn-tree-view__description">{description}</p>{/if}
<div class="wrn-tree-view__tree" role="tree" aria-label='{title}' data-wrn-roving="vertical">
<section {...attrs} data-ui-component="TreeView" class='wrn-tree-view {class}' data-wrn-owner="TreeView" data-wrn-part="root" data-wrn-component="TreeView" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if title}<strong class="wrn-tree-view__title" data-wrn-owner="TreeView" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</strong>{/if}
{#if description}<p class="wrn-tree-view__description" data-wrn-owner="TreeView" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{description}</p>{/if}
<div class="wrn-tree-view__tree" role="tree" aria-label='{title}' data-wrn-roving="vertical" data-wrn-owner="TreeView" data-wrn-part="tree" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each items as item, index}
<div class="wrn-tree-view__branch" role="none">
<div class="wrn-tree-view__row" role="treeitem" aria-level="1" aria-expanded='{item.children && item.children.length ? isExpanded(nodeValue(item, index, "root-")) : ""}' aria-selected='{selectedValue === nodeValue(item, index, "root-") ? "true" : "false"}'>
<div class="wrn-tree-view__branch" role="none" data-wrn-owner="TreeView" data-wrn-part="branch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-tree-view__row" role="treeitem" aria-level="1" aria-expanded='{item.children && item.children.length ? isExpanded(nodeValue(item, index, "root-")) : ""}' aria-selected='{selectedValue === nodeValue(item, index, "root-") ? "true" : "false"}' data-wrn-owner="TreeView" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.children && item.children.length}
<button type="button" class="wrn-tree-view__toggle" aria-label='{isExpanded(nodeValue(item, index, "root-")) ? "Collapse " + item[labelKey] : "Expand " + item[labelKey]}' @click='toggleNode(item, nodeValue(item, index, "root-"), event)'><span class="icon-[lucide--chevron-right]" aria-hidden="true"></span></button>
{:else}<span class="wrn-tree-view__toggle" aria-hidden="true"></span>{/if}
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(item, nodeValue(item, index, "root-"), event)'>
<button type="button" class="wrn-tree-view__toggle" aria-label='{isExpanded(nodeValue(item, index, "root-")) ? "Collapse " + item[labelKey] : "Expand " + item[labelKey]}' @click='toggleNode(item, nodeValue(item, index, "root-"), event)' data-wrn-owner="TreeView" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span class="icon-[lucide--chevron-right]" aria-hidden="true"></span></button>
{:else}<span class="wrn-tree-view__toggle" aria-hidden="true" data-wrn-owner="TreeView" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>{/if}
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(item, nodeValue(item, index, "root-"), event)' data-wrn-owner="TreeView" data-wrn-part="node" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}<span class='{item.icon}' aria-hidden="true"></span>{/if}<span>{item[labelKey]}</span>
</button>
</div>
{#if item.children && item.children.length}
<div class="wrn-tree-view__group" role="group" data-show='isExpanded(nodeValue(item, index, "root-"))'>
<div class="wrn-tree-view__group" role="group" data-show='isExpanded(nodeValue(item, index, "root-"))' data-wrn-owner="TreeView" data-wrn-part="group" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each item.children as child, childIndex}
<div class="wrn-tree-view__row" role="treeitem" aria-level="2" aria-selected='{selectedValue === nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-") ? "true" : "false"}'>
<span class="wrn-tree-view__toggle" aria-hidden="true"></span>
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(child, nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-"), event)'>
<div class="wrn-tree-view__row" role="treeitem" aria-level="2" aria-selected='{selectedValue === nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-") ? "true" : "false"}' data-wrn-owner="TreeView" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-tree-view__toggle" aria-hidden="true" data-wrn-owner="TreeView" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(child, nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-"), event)' data-wrn-owner="TreeView" data-wrn-part="node" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if child.icon}<span class='{child.icon}' aria-hidden="true"></span>{/if}<span>{child[labelKey]}</span>
</button>
</div>
@@ -77,7 +77,7 @@ component TreeView {
</div>
{/if}
</div>
{:empty}<p class="wrn-tree-view__empty">No tree items available.</p>{/each}
{:empty}<p class="wrn-tree-view__empty" data-wrn-owner="TreeView" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">No tree items available.</p>{/each}
</div>
<slot />
</section>