@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/media/NeoImage.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import type { NeoImageProps } from './neo-image.model.js';
+
+  import { onMount } from 'svelte';
+
+  import NeoIconImage from '../icons/NeoIconImage.svelte';
+  import NeoIconInfo from '../icons/NeoIconWarning.svelte';
+  import { computeBorderRadius } from '../utils/border.utils.js';
+  import { Logger } from '../utils/logger.utils.js';
+  import { toSize } from '../utils/style.utils.js';
+
+  let {
+    // Snippet
+    children,
+
+    // State
+    ref = $bindable(),
+    src = $bindable(),
+    fallback,
+    alt,
+    error = $bindable(false),
+    loaded = $bindable(false),
+    skeleton,
+    delay = 0,
+    showAltText,
+
+    // Styles
+    rounded,
+    glass,
+
+    // Size
+    width: _width,
+    height: _height,
+    ratio,
+    flex,
+    fit,
+
+    // Events
+    onerror,
+    onload,
+
+    // Other props
+    containerProps: _containerProps = {},
+    ...rest
+  }: NeoImageProps = $props();
+
+  const { tag = 'div', ...containerProps } = $derived(_containerProps);
+
+  const width = $derived(toSize(_width));
+  const height = $derived(toSize(_height));
+
+  let ready = $state(delay === null);
+  const loading = $derived(ready && !loaded && !error);
+
+  onMount(() => {
+    if (ready) return;
+    if (!delay) return ready = true;
+    setTimeout(() => {
+      ready = true;
+    }, delay);
+  });
+
+  const onError: NeoImageProps['onerror'] = (e) => {
+    onerror?.(e);
+    error = true;
+    Logger.error('Image failed to load', e);
+    if (!ref || !fallback || src === fallback || e.defaultPrevented) return;
+    src = fallback;
+  };
+
+  const onLoad: NeoImageProps['onload'] = (e) => {
+    loaded = true;
+    error = false;
+    onload?.(e);
+  };
+</script>
+
+<svelte:element
+  this={tag}
+  data-error={error}
+  data-loaded={loaded}
+  data-fallback={(error && src === fallback)}
+  data-src={(error && src === fallback) ? src : undefined}
+  class:neo-image={true}
+  class:neo-rounded={rounded}
+  class:neo-skeleton={skeleton || loading}
+  class:neo-glass={glass}
+  class:neo-error={error}
+  style:flex
+  style:width={width?.absolute}
+  style:min-width={width?.min}
+  style:max-width={width?.max}
+  style:height={height?.absolute}
+  style:min-height={height?.min}
+  style:max-height={height?.max}
+  style:aspect-ratio={ratio}
+  style:--neo-image-border-radius={computeBorderRadius(rounded)}
+  {...containerProps}
+>
+  <div class="neo-image-icon">
+    {#if error}
+      <NeoIconInfo />
+      {@render children?.()}
+    {:else}
+      <NeoIconImage delay={0.3} />
+    {/if}
+  </div>
+  <img
+    bind:this={ref}
+    class:neo-image-img={true}
+    class:neo-rounded={rounded}
+    class:neo-alt-text={showAltText}
+    {src}
+    {alt}
+    loading="lazy"
+    decoding="auto"
+    style:object-fit={fit}
+    onerror={onError}
+    onload={onLoad}
+    {...rest}
+  />
+</svelte:element>
+
+<style>.neo-image,
+.neo-image-img {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--neo-image-border-radius, var(--neo-border-radius, 0.5rem));
+  transition: border-radius 0.3s ease, color 0.3s ease, background-color 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
+}
+.neo-image.neo-rounded,
+.neo-image-img.neo-rounded {
+  border-radius: var(--neo-image-border-radius, var(--neo-border-radius-xxl));
+}
+
+.neo-image {
+  position: relative;
+  background-color: transparent;
+  visibility: visible;
+}
+.neo-image-icon {
+  position: absolute;
+  top: calc(50% - var(--neo-image-icon-size, 20%) / 2);
+  left: calc(50% - var(--neo-image-icon-size, 20%) / 2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-gap-xxs, 0.5rem);
+  align-items: center;
+  justify-content: center;
+  width: var(--neo-image-icon-size, 20%);
+  height: var(--neo-image-icon-size, 20%);
+  color: var(--neo-text-color-inverse);
+  visibility: hidden;
+  opacity: 0.75;
+  transition: visibility 0.3s ease, opacity 0.3s ease;
+}
+.neo-image-icon :global(> svg) {
+  width: 100%;
+  height: 100%;
+}
+.neo-image.neo-skeleton {
+  --neo-skeleton-start: 1;
+  --neo-skeleton-end: calc(1 + var(--neo-skeleton-step, -0.3));
+  color: var(--neo-skeleton-color);
+  background-color: var(--neo-skeleton-color);
+  background-clip: padding-box;
+  border-color: var(--neo-skeleton-color);
+  opacity: 1;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
+  animation-delay: 1s;
+}
+@keyframes skeleton {
+  0%, 80%, 100% {
+    opacity: var(--neo-skeleton-start);
+  }
+  40% {
+    opacity: var(--neo-skeleton-end);
+  }
+}
+.neo-image.neo-skeleton .neo-image-img {
+  opacity: 0;
+}
+.neo-image.neo-skeleton .neo-image-icon {
+  visibility: visible;
+}
+.neo-image.neo-error {
+  background-color: var(--neo-image-error-bg, color-mix(in srgb, var(--neo-skeleton-color) 75%, var(--neo-dark-color-error-75)));
+}
+.neo-image.neo-error .neo-image-img:not(.neo-alt-text) {
+  opacity: 0;
+}
+.neo-image.neo-error .neo-image-img:not(.neo-alt-text)[alt] {
+  align-content: flex-end;
+  overflow: hidden;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+.neo-image.neo-error .neo-image-icon {
+  visibility: visible;
+}
+.neo-image.neo-glass {
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+}</style>

package/dist/media/NeoImage.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoImageProps } from './neo-image.model.js';
+declare const NeoImage: import("svelte").Component<NeoImageProps, {}, "src" | "loaded" | "error" | "ref">;
+type NeoImage = ReturnType<typeof NeoImage>;
+export default NeoImage;

package/dist/media/NeoMedia.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import type { NeoMediaContext, NeoMediaProps } from './neo-media.model.js';
+
+  import { NeoMediaType } from './neo-media.model.js';
+  import NeoImage from './NeoImage.svelte';
+  import NeoSkeletonMedia from '../skeletons/NeoSkeletonMedia.svelte';
+  import NeoSkeletonText from '../skeletons/NeoSkeletonText.svelte';
+  import { toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
+  import { getColorVariable } from '../utils/colors.utils.js';
+  import { coerce, computeGlassFilter, computeShadowElevation, getDefaultElevation, parseBlur } from '../utils/shadow.utils.js';
+  import { toSize } from '../utils/style.utils.js';
+
+  let {
+    // Snippet
+    children,
+    caption,
+
+    // State
+    ref = $bindable(),
+    tag = 'figure',
+    type: _type,
+    loading = false,
+
+    // Media,
+    image,
+
+    // Styles
+    borderless,
+    pressed,
+    rounded,
+    glass,
+    color,
+    tinted,
+    filled,
+    start,
+
+    // Size
+    flex,
+    width: _width,
+    height: _height,
+    ratio,
+
+    // Shadow
+    elevation: _elevation = getDefaultElevation(pressed),
+    blur: _blur,
+
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Other props
+    captionProps: _captionProps = {},
+    skeletonTextProps,
+    skeletonMediaProps,
+    ...rest
+  }: NeoMediaProps = $props();
+
+  const { tag: captionTag = 'figcaption', ...captionProps } = $derived(_captionProps);
+  const type = $derived.by(() => {
+    if (_type) return _type;
+    if (image?.src) return NeoMediaType.Image;
+  });
+
+  const elevation = $derived(coerce(_elevation));
+  const blur = $derived(parseBlur(_blur, elevation));
+  const filter = $derived(computeGlassFilter(blur, glass));
+
+  const boxShadow = $derived(computeShadowElevation(elevation, { glass, pressed }));
+
+  const width = $derived(toSize(_width));
+  const height = $derived(toSize(_height));
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
+
+  const context = $derived<NeoMediaContext>({
+    // State
+    loading,
+    type,
+
+    // Styles
+    borderless,
+    pressed,
+    rounded,
+    glass,
+    color,
+    tinted,
+    filled,
+
+    // shadow
+    elevation,
+    blur,
+  });
+</script>
+
+<svelte:element
+  bind:this={ref}
+  this={tag}
+  class:neo-media={true}
+  class:neo-glass={glass}
+  class:neo-filled={filled}
+  class:neo-tinted={tinted}
+  class:neo-rounded={rounded}
+  class:neo-pressed={pressed}
+  class:neo-borderless={borderless}
+  class:neo-start={start}
+  class:neo-inset={elevation < 0}
+  class:neo-flat={!elevation}
+  style:flex
+  style:width={width?.absolute}
+  style:min-width={width?.min}
+  style:max-width={width?.max}
+  style:height={height?.absolute}
+  style:min-height={height?.min}
+  style:max-height={height?.max}
+  style:--neo-media-color={getColorVariable(color)}
+  style:--neo-media-glass-blur={filter}
+  style:--neo-media-box-shadow={boxShadow}
+  style:--neo-media-border-radius={computeBorderRadius(rounded)}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  {...rest}
+>
+  {#if type === NeoMediaType.Image}
+    <NeoImage skeleton={loading} {rounded} {glass} {ratio} {...image} />
+  {:else}
+    <NeoSkeletonMedia {loading} {glass} {rounded} {type} {ratio} {...skeletonMediaProps}>
+      {@render children?.(context)}
+    </NeoSkeletonMedia>
+  {/if}
+
+  {#if caption}
+    <NeoSkeletonText lines="1" {loading} {glass} {...skeletonTextProps}>
+      <svelte:element this={captionTag} class:neo-media-caption={true} {...captionProps}>
+        {#if typeof caption === 'function'}
+          {@render caption(context)}
+        {:else}
+          {caption}
+        {/if}
+      </svelte:element>
+    </NeoSkeletonText>
+  {/if}
+</svelte:element>
+
+<style>.neo-media {
+  display: flex;
+  flex: var(--neo-media-flex, 1 1 auto);
+  flex-direction: column;
+  gap: var(--neo-media-gap, var(--neo-gap-xs, 0.625rem));
+  margin: var(--neo-media-margin, var(--neo-shadow-margin, 0.625rem));
+  padding: var(--neo-media-padding, var(--neo-gap, 1rem));
+  color: var(--neo-media-color, inherit);
+  background-clip: padding-box;
+  border: var(--neo-media-border-width, var(--neo-border-width, 1px)) var(--neo-media-border-color, transparent) solid;
+  border-radius: var(--neo-media-border-radius, var(--neo-border-radius-lg));
+  box-shadow: var(--neo-media-box-shadow, var(--neo-box-shadow-flat));
+  transition: color 0.15s ease, padding 0.3s ease, margin 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease-out;
+}
+.neo-media .neo-media-caption {
+  transition: margin 0.3s ease;
+}
+@starting-style {
+  .neo-media.neo-start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+}
+.neo-media.neo-flat:not(.neo-borderless) {
+  border-color: var(--neo-media-border-color, var(--neo-border-color));
+}
+.neo-media.neo-borderless {
+  border-color: transparent;
+}
+.neo-media.neo-rounded {
+  border-radius: var(--neo-media-border-radius, var(--neo-border-radius-3xl));
+}
+.neo-media.neo-rounded .neo-media-caption {
+  margin-inline: 0.75rem;
+}
+.neo-media.neo-glass {
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  --neo-border-color: var(--neo-glass-border-color);
+  --neo-background-color-tinted: var(--neo-glass-background-color-tinted);
+  background-color: var(--neo-media-bg-color, var(--neo-glass-background-color));
+  backdrop-filter: var(--neo-media-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
+}
+.neo-media.neo-glass:not(.neo-borderless, .neo-inset, .neo-flat .neo-filled) {
+  border-color: var(--neo-media-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+}
+.neo-media.neo-glass.neo-flat:not(.neo-borderless) {
+  border-color: var(--neo-media-border-color, var(--neo-glass-border-color-flat));
+}
+.neo-media.neo-tinted {
+  background-color: var(--neo-media-bg-color, var(--neo-background-color-tinted));
+}
+.neo-media.neo-filled {
+  background-color: var(--neo-media-bg-color, var(--neo-background-color));
+}
+.neo-media.neo-filled.neo-glass {
+  border-color: var(--neo-media-border-color, var(--neo-filled-top-border-color) var(--neo-filled-right-border-color) var(--neo-filled-bottom-border-color) var(--neo-filled-left-border-color));
+}</style>

package/dist/media/NeoMedia.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoMediaProps } from './neo-media.model.js';
+declare const NeoMedia: import("svelte").Component<NeoMediaProps<import("./neo-media.model.js").NeoMediaTypes, "figure">, {}, "ref">;
+type NeoMedia = ReturnType<typeof NeoMedia>;
+export default NeoMedia;

package/dist/media/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NeoImage } from './NeoImage.svelte';
+export type * from './neo-image.model.js';

package/dist/media/index.js

@@ -0,0 +1 @@
+export { default as NeoImage } from './NeoImage.svelte';

package/dist/media/neo-image.model.d.ts

@@ -0,0 +1,67 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
+import type { SizeInput } from '../utils/style.utils.js';
+export interface NeoImageProps extends Omit<HTMLImgAttributes, 'width' | 'height'>, HTMLRefProps {
+    /**
+     * Whether the image is loaded.
+     */
+    loaded?: boolean;
+    /**
+     * Whether the image failed to load.
+     */
+    error?: boolean;
+    /**
+     * An optional fallback image source to use if the image fails to load.
+     */
+    fallback?: HTMLImgAttributes['src'];
+    /**
+     * Whether to show a skeleton in place of the image, regardless of loading state.
+     */
+    skeleton?: boolean;
+    /**
+     * Keep alternative text visible when the image is not loaded or errored.
+     * By default, the alt text is only visible to screen readers for accessibility.
+     *
+     * @default false
+     */
+    showAltText?: boolean;
+    /**
+     * How long to wait before showing the skeleton if the image is not loaded or errored (in milliseconds).
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Optional flex strategy for the image.
+     */
+    flex?: CSSStyleDeclaration['flex'];
+    /**
+     * Optional width constraints for the image.
+     */
+    width?: SizeInput<'width'>;
+    /**
+     * Optional height constraints for the image.
+     */
+    height?: SizeInput<'height'>;
+    /**
+     * Optional aspect ratio for the image.
+     */
+    ratio?: CSSStyleDeclaration['aspectRatio'];
+    /**
+     * Optional object fit for the image.
+     */
+    fit?: CSSStyleDeclaration['objectFit'];
+    /**
+     * Rounds border radius.
+     */
+    rounded?: BorderRadiusInput;
+    /**
+     * Whether to show the skeleton with a glass effect.
+     */
+    glass?: boolean;
+    /**
+     * Optional props to pass to the container element.
+     */
+    containerProps?: HTMLNeoBaseElement & HTMLTagProps;
+}

package/dist/media/neo-image.model.js

@@ -0,0 +1 @@
+export {};

package/dist/media/neo-media.model.d.ts

@@ -0,0 +1,120 @@
+import type { Snippet } from 'svelte';
+import type { NeoImageProps } from './neo-image.model.js';
+import type { NeoSkeletonMediaProps } from '../skeletons/neo-skeleton-media.model.js';
+import type { NeoSkeletonTextProps } from '../skeletons/neo-skeleton-text.model.js';
+import type { HTMLTransitionProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
+import type { Color } from '../utils/colors.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
+import type { BlurElevation, BlurElevationString, ShadowElevation, ShadowElevationString } from '../utils/shadow.utils.js';
+import type { SizeInput } from '../utils/style.utils.js';
+export type NeoMediaElevation = ShadowElevation | ShadowElevationString;
+export type NeoMediaBlur = BlurElevation | BlurElevationString;
+export declare const NeoMediaType: {
+    readonly Image: "image";
+    readonly Video: "video";
+    readonly Audio: "audio";
+};
+export type NeoMediaTypes = (typeof NeoMediaType)[keyof typeof NeoMediaType];
+export interface NeoMediaContext<Type extends NeoMediaTypes = NeoMediaTypes> {
+    /**
+     * Whether to show the media as a skeleton.
+     */
+    loading?: boolean;
+    /**
+     * The type of media to display.
+     */
+    type?: Type;
+    /**
+     * Whether to show a border around the media (when applicable).
+     */
+    borderless?: boolean;
+    /**
+     * Recess the content of the media if elevation is inset (< 0).
+     */
+    pressed?: boolean;
+    /**
+     * Whether to show the media with a border radius.
+     */
+    rounded?: BorderRadiusInput;
+    /**
+     * Whether to show the media with a glass effect.
+     */
+    glass?: boolean;
+    /**
+     * Color to tint the media with.
+     */
+    color?: Color | CSSStyleDeclaration['color'];
+    /**
+     * Whether to tint the media background with the color.
+     */
+    tinted?: boolean;
+    /**
+     * Whether to fill the media with the color.
+     */
+    filled?: boolean;
+    /**
+     * Whether to display the media as flat on first render.
+     */
+    start?: boolean;
+    /**
+     * Media elevation.
+     * @default 3
+     */
+    elevation?: NeoMediaElevation;
+    /**
+     * The blur level to apply when in glass mode.
+     *
+     * @default elevation, min: 1, max: 5
+     * @see glass
+     */
+    blur?: NeoMediaBlur;
+}
+export interface NeoMediaProps<Type extends NeoMediaTypes = NeoMediaTypes, Tag extends keyof HTMLElementTagNameMap = 'figure'> extends NeoMediaContext<Type>, Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children' | 'color'>, HTMLRefProps, HTMLTransitionProps {
+    /**
+     * Element(s) to render inside the media.
+     */
+    children?: Snippet<[NeoMediaContext<Type>]>;
+    /**
+     * A snippet or a string to display as the media caption.
+     */
+    caption?: string | Snippet<[NeoMediaContext<Type>]>;
+    /**
+     * The HTML tag to use for the media component.
+     *
+     * @default 'figure'
+     */
+    tag?: Tag;
+    /**
+     * The props to pass to the image element.
+     */
+    image?: NeoImageProps;
+    /**
+     * Overrides the default flex value.
+     */
+    flex?: CSSStyleDeclaration['flex'];
+    /**
+     * Optional width constraints.
+     */
+    width?: SizeInput<'width'>;
+    /**
+     * Optional height constraints.
+     */
+    height?: SizeInput<'height'>;
+    /**
+     * Optional aspect ratio for the media.
+     */
+    ratio?: CSSStyleDeclaration['aspectRatio'];
+    /**
+     * The props to pass to the caption element.
+     */
+    captionProps?: HTMLNeoBaseElement & HTMLTagProps;
+    /**
+     * The props to pass to the caption skeleton loader.
+     */
+    skeletonTextProps?: NeoSkeletonTextProps;
+    /**
+     * The props to pass to the media skeleton loader.
+     */
+    skeletonMediaProps?: NeoSkeletonMediaProps;
+}

package/dist/media/neo-media.model.js

@@ -0,0 +1,5 @@
+export const NeoMediaType = {
+    Image: 'image',
+    Video: 'video',
+    Audio: 'audio',
+};