release: WRNexusJS 0.8.0

packages/image/components/ImageCard.wrn

@@ -0,0 +1,21 @@
+component ImageCard {
+  props {
+    title: string = ""
+    description: string = ""
+    src: string = ""
+    alt: string = ""
+    width: string = ""
+    height: string = ""
+    href: string = ""
+    actionLabel: string = ""
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+  view {
+    <Card {...attrs} title='{title}' description='{description}' actionHref='{href}' actionLabel='{actionLabel}' color='{color}' size='{size}' class='{class}'>
+      <OptimizedImage src='{src}' alt='{alt}' width='{width}' height='{height}' rounded="true" color='{color}' size='{size}' />
+      <slot></slot>
+    </Card>
+  }
+}

packages/image/components/OptimizedImage.wrn

@@ -0,0 +1,41 @@
+component OptimizedImage {
+  outputs {
+    load(payload: { sourceEvent: Event; src: string })
+    error(payload: { sourceEvent: Event; src: string })
+  }
+  props {
+    src: string = ""
+    srcset: string = ""
+    sizes: string = ""
+    alt: string = ""
+    width: string = ""
+    height: string = ""
+    loading: string = "lazy"
+    decoding: string = "async"
+    fetchpriority: string = "auto"
+    placeholder: string = ""
+    objectFit: string = "cover"
+    rounded: boolean = false
+    color: string = "primary"
+    size: string = "md"
+    class: string = ""
+  }
+  view {
+    <img
+      {...attrs}
+      src='{src}'
+      srcset='{srcset}'
+      sizes='{sizes}'
+      alt='{alt}'
+      width='{width}'
+      height='{height}'
+      loading='{loading}'
+      decoding='{decoding}'
+      fetchpriority='{fetchpriority}'
+      style='object-fit:{objectFit};background-image:{placeholder ? "url(" + placeholder + ")" : "none"};background-size:cover'
+      class='wire-next wire-next--color-{color} wire-next--size-{size} max-w-full {rounded ? "rounded-[var(--wire-radius-sm)]" : ""} {class}'
+      @load='output.load({ sourceEvent: event, src: src })'
+      @error='output.error({ sourceEvent: event, src: src })'
+    />
+  }
+}

packages/image/components/Picture.wrn

@@ -0,0 +1,21 @@
+component Picture {
+  props {
+    sources: unknown[] = []
+    src: string = ""
+    srcset: string = ""
+    sizes: string = ""
+    alt: string = ""
+    width: string = ""
+    height: string = ""
+    loading: string = "lazy"
+    decoding: string = "async"
+    fetchpriority: string = "auto"
+    class: string = ""
+  }
+  view {
+    <picture {...attrs} class='{class}'>
+      {#each sources as source}<source type='{source.type}' srcset='{source.srcset}' sizes='{source.sizes || sizes}' media='{source.media || ""}' />{/each}
+      <img src='{src}' srcset='{srcset}' sizes='{sizes}' alt='{alt}' width='{width}' height='{height}' loading='{loading}' decoding='{decoding}' fetchpriority='{fetchpriority}' class="max-w-full" />
+    </picture>
+  }
+}