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/Modal.wrn
+18 -18
View File
@@ -96,7 +96,7 @@ component Modal {
}
view {
<div
<div data-wrn-owner="Modal" data-wrn-part="root" data-wrn-component="Modal" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
{...attrs}
data-ui-component="Modal"
data-open='{(open || visible) ? "true" : "false"}'
@@ -112,7 +112,7 @@ component Modal {
@wrnexus:modal:close='hideModal("api", event)'
>
{#if triggerLabel}
<button
<button data-wrn-owner="Modal" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__trigger"
aria-haspopup="dialog"
@@ -130,7 +130,7 @@ component Modal {
</button>
{/if}
<span
<span data-wrn-owner="Modal" data-wrn-part="triggerSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__trigger-slot"
@click='showModal(event)'
>
@@ -140,13 +140,13 @@ component Modal {
</slot>
</span>
<div
<div data-wrn-owner="Modal" data-wrn-part="layer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__layer"
data-show="(open || visible)"
role="presentation"
@keydown='handleKeydown(event)'
>
<button
<button data-wrn-owner="Modal" data-wrn-part="backdrop" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__backdrop"
aria-label='{closeLabel}'
@@ -154,28 +154,28 @@ component Modal {
>
</button>
<section
<section data-wrn-owner="Modal" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__panel"
role="dialog"
aria-modal="true"
aria-label='{label || title}'
tabindex="-1"
>
{#if showHeader}<header
{#if showHeader}<header data-wrn-owner="Modal" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__header"
>
<div
<div data-wrn-owner="Modal" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__heading"
>
{#if icon}
<span
<span data-wrn-owner="Modal" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class='wrn-modal__icon {icon}'
aria-hidden="true"
>
</span>
{/if}
<div
<div data-wrn-owner="Modal" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__heading-copy"
>
<slot
@@ -192,7 +192,7 @@ component Modal {
</div>
{#if showClose}
<button
<button data-wrn-owner="Modal" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__close"
aria-label='{closeLabel}'
@@ -216,17 +216,17 @@ component Modal {
{/if}
</header>{/if}
<div
<div data-wrn-owner="Modal" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__body"
>
<slot></slot>
</div>
{#if showFooter}
<footer
<footer data-wrn-owner="Modal" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__footer"
>
<div
<div data-wrn-owner="Modal" data-wrn-part="customFooter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__custom-footer"
>
<slot
@@ -235,11 +235,11 @@ component Modal {
</slot>
</div>
<div
<div data-wrn-owner="Modal" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__actions"
>
{#if cancelLabel}
<button
<button data-wrn-owner="Modal" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__button wrn-modal__button--secondary"
@click='cancelModal(event)'
@@ -256,14 +256,14 @@ component Modal {
{/if}
{#if confirmLabel}
<button
<button data-wrn-owner="Modal" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__button wrn-modal__button--primary"
disabled='{confirmDisabled || confirmLoading}'
@click='confirmModal(event)'
>
{#if confirmLoading}
<span
<span data-wrn-owner="Modal" data-wrn-part="spinner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__spinner"
aria-hidden="true"
>