feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -43,18 +43,18 @@ component Map {
|
||||
data-ui-component="Map"
|
||||
aria-label='{title}'
|
||||
class='wrn-map {class}'
|
||||
>
|
||||
data-wrn-owner="Map" data-wrn-part="root" data-wrn-component="Map" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if title || description}
|
||||
<header class="wrn-map__header">
|
||||
<header class="wrn-map__header" data-wrn-owner="Map" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<div>
|
||||
{#if title}
|
||||
<h3 class="wrn-map__title">{title}</h3>
|
||||
<h3 class="wrn-map__title" data-wrn-owner="Map" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p class="wrn-map__description">{description}</p>
|
||||
<p class="wrn-map__description" data-wrn-owner="Map" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="wrn-map__header-icon"><span class="icon-[lucide--map]" aria-hidden="true"></span>
|
||||
<span class="wrn-map__header-icon" data-wrn-owner="Map" data-wrn-part="headerIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--map]" aria-hidden="true"></span>
|
||||
</span>
|
||||
</header>
|
||||
{/if}
|
||||
@@ -62,18 +62,18 @@ component Map {
|
||||
<div
|
||||
class="wrn-map__viewport"
|
||||
data-size='{size}'
|
||||
>
|
||||
data-wrn-owner="Map" data-wrn-part="viewport" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if !imageSrc}
|
||||
{#if provider === "google" && !apiKey}<p class="wrn-map__selection">Add your Google Maps Embed API key to display this map.</p>{:else}<iframe title="{title || 'Location map'}" src="{mapUrl()}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen style="width:100%;height:100%;min-height:320px;border:0"></iframe>{/if}
|
||||
{:else}<div class="wrn-map__canvas" style="transform:scale({imageZoom})">
|
||||
{#if imageSrc}<img class="wrn-map__image" src="{imageSrc}" alt="{imageAlt}" />{/if}
|
||||
{#if provider === "google" && !apiKey}<p class="wrn-map__selection" data-wrn-owner="Map" data-wrn-part="selection" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Add your Google Maps Embed API key to display this map.</p>{:else}<iframe title="{title || 'Location map'}" src="{mapUrl()}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen style="width:100%;height:100%;min-height:320px;border:0" data-wrn-owner="Map" data-wrn-part="embeddedFrame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></iframe>{/if}
|
||||
{:else}<div class="wrn-map__canvas" style="transform:scale({imageZoom})" data-wrn-owner="Map" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if imageSrc}<img class="wrn-map__image" src="{imageSrc}" alt="{imageAlt}" data-wrn-owner="Map" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>{/if}
|
||||
<div
|
||||
class="wrn-map__grid"
|
||||
style="background-image: linear-gradient(var(--wrn-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px); background-size: 32px 32px;"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
data-wrn-owner="Map" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
||||
|
||||
<div class="wrn-map__content">
|
||||
<div class="wrn-map__content" data-wrn-owner="Map" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
@@ -85,30 +85,30 @@ component Map {
|
||||
class="wrn-map__marker"
|
||||
style='left: {item.x || (20 + index * 12)}%; top: {item.y || (30 + (index % 3) * 18)}%;'
|
||||
@click='chooseMarker(item)'
|
||||
>
|
||||
data-wrn-owner="Map" data-wrn-part="marker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class='{item.icon || "icon-[lucide--map-pin]"}' aria-hidden="true"></span>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{#if selectedLabel}<output class="wrn-map__selection">{selectedLabel}</output>{/if}
|
||||
<div class="wrn-map__controls">
|
||||
{#if selectedLabel}<output class="wrn-map__selection" data-wrn-owner="Map" data-wrn-part="selection" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{selectedLabel}</output>{/if}
|
||||
<div class="wrn-map__controls" data-wrn-owner="Map" data-wrn-part="controls" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Zoom in"
|
||||
class="wrn-map__control"
|
||||
@click='changeZoom(1)'
|
||||
>
|
||||
<span class="icon-[lucide--plus] wrn-map__control-icon" aria-hidden="true"></span>
|
||||
data-wrn-owner="Map" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class="icon-[lucide--plus] wrn-map__control-icon" aria-hidden="true" data-wrn-owner="Map" data-wrn-part="controlIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Zoom out"
|
||||
class="wrn-map__control"
|
||||
@click='changeZoom(-1)'
|
||||
>
|
||||
<span class="icon-[lucide--minus] wrn-map__control-icon" aria-hidden="true"></span>
|
||||
data-wrn-owner="Map" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span class="icon-[lucide--minus] wrn-map__control-icon" aria-hidden="true" data-wrn-owner="Map" data-wrn-part="controlIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</button>
|
||||
</div>{/if}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user