@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

package/dist/components/avatar/QAvatar.svelte

@@ -1,44 +1,44 @@
-<script>import { useSize } from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
-export let shape = "circle", size = "md", src = void 0, video = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class };
-export { userStyles as style };
-$:
-  sizeObj = useSize(size);
-$:
-  shapeClass = createClasses([
-    shape === "circle" && "circle",
-    shape === "rounded" && "round",
-    shape.includes("top") && "top-round",
-    shape.includes("bottom") && "bottom-round",
-    shape.includes("left") && "left-round",
-    shape.includes("right") && "right-round"
-  ]);
-$:
-  classes = createClasses([shapeClass, sizeObj.class], {
-    component: "q-avatar",
-    userClasses
-  });
-$:
-  style = createStyles(
-    {
-      width: sizeObj.style,
-      height: sizeObj.style
-    },
-    userStyles
-  );
+<script lang="ts">
+  import { useSize } from "../../composables";
+  import type { QAvatarProps } from "./props";
+
+  let {
+    alt,
+    shape = "circle",
+    size = "md",
+    src,
+    sources,
+    video = false,
+    children,
+    videoAccessibility,
+    ...props
+  }: QAvatarProps = $props();
+
+  const qSize = $derived(useSize(size, "q-avatar"));
+  const qShape = $derived(`q-avatar--${shape}`);
 </script>
 
-{#if video === true}
-  <!-- svelte-ignore a11y-media-has-caption -->
-  <video class={classes} {style} autoplay loop playsinline {...$$restProps} on:click>
-    <source {src} type="video/mp4" />
-  </video>
-{:else if src !== undefined}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <img class={classes} {style} {src} {...$$restProps} on:click />
-{:else}
-  <div class={classes} {style} {...$$restProps} on:click>
-    <slot />
-  </div>
-{/if}
+<div
+  {...props}
+  class={["q-avatar", qShape, qSize.class, props.class]}
+  style:--size={qSize.style}
+  data-quaff
+>
+  {#if video}
+    <video autoplay loop muted playsinline>
+      {#if sources && sources.length > 0}
+        {#each sources as { src, type } (type)}
+          <source {src} {type} />
+        {/each}
+      {:else if src}
+        <source {src} type="video/mp4" />
+      {/if}
+
+      {@render videoAccessibility?.()}
+    </video>
+  {:else if src}
+    <img {src} {alt} />
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/components/avatar/QAvatar.svelte.d.ts

@@ -1,27 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QAvatarProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        shape?: QAvatarProps["shape"];
-        size?: QAvatarProps["size"];
-        src?: QAvatarProps["src"];
-        video?: QAvatarProps["video"];
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QAvatarProps_ = typeof __propDef.props;
 export { QAvatarProps_ as QAvatarProps };
 export type QAvatarEvents = typeof __propDef.events;
 export type QAvatarSlots = typeof __propDef.slots;
-export default class QAvatar extends SvelteComponent<QAvatarProps, QAvatarEvents, QAvatarSlots> {
+export default class QAvatar extends SvelteComponentTyped<QAvatarProps_, QAvatarEvents, QAvatarSlots> {
 }

package/dist/components/avatar/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QAvatarDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+export declare const QAvatarDocs: QComponentDocs;

package/dist/components/avatar/docs.js

@@ -1,15 +1,10 @@
-import { QAvatarDocsProps } from "./docs.props";
-export let QAvatarDocs = {
+import { QAvatarDocsProps, QAvatarDocsSnippets } from "./docs.props";
+export const QAvatarDocs = {
     name: "QAvatar",
     description: "Avatars can be used in many different ways as with icons or for user profile images/videos, for example. They can have many different shapes, the default one being a circle.",
     docs: {
         props: QAvatarDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: "The default slot can be used to display initials inside the avatar.",
-            },
-        ],
+        snippets: QAvatarDocsSnippets,
         methods: [],
         events: [
             {

package/dist/components/avatar/docs.props.d.ts

@@ -1,8 +1,3 @@
-export declare const QAvatarDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QAvatarDocsProps: ParsedProp[];
+export declare const QAvatarDocsSnippets: ParsedSnippet[];

package/dist/components/avatar/docs.props.js

@@ -1,34 +1,87 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 6a4f00f36c683337912c3fec88921ecc
 export const QAvatarDocsProps = [
     {
-        name: "shape",
-        type: "QAvatarShapeOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "shape",
+        type: {
+            name: "QAvatarShapeOptions",
+            isClickable: true,
+        },
         description: "Shape of the avatar.",
-        default: "circle",
+        default: '"circle"',
     },
     {
-        name: "size",
-        type: "QAvatarSizeOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "size",
+        type: {
+            name: "QAvatarSizeOptions",
+            isClickable: true,
+        },
         description: 'Size of the avatar, can be a custom size using CSS units. If no unit is specified, "px" will be used.',
-        default: "md",
+        default: '"md"',
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "src",
-        type: "string",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: 'Source of the image to be used as the avatar. Can be a url or a path to a local file.\nIf the "video" prop is set to true, this will be used as an MP4 video source. If you want to use a different video format, use the "sources" prop.',
+        default: "undefined",
+    },
+    {
+        isArray: true,
         optional: true,
-        clickableType: false,
-        description: "Source of the image to use as the avatar. Can be a url or a path to a local file.",
+        isSnippet: false,
+        name: "sources",
+        type: {
+            name: "QAvatarVideoSrcOptions",
+            isClickable: true,
+        },
+        description: 'Only for video avatars. Use this prop to specify multiple sources for the video. The browser will play the first source it can support. This overrides the "src" prop.\nIf used while the "video" prop is set to false, this prop has no effect.',
         default: "undefined",
     },
     {
-        name: "video",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'If set to true, will use the "src" prop as a video source.',
+        isSnippet: false,
+        name: "video",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: 'If set to true, the avatar will be treaded as a video avatar.\nThis means that the "src" prop will be used as an MP4 video source and the "sources" prop can be used to specify multiple sources for the video.',
         default: "false",
     },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "alt",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "alt property for the image.",
+        default: "undefined",
+    },
+];
+export const QAvatarDocsSnippets = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "videoAccessibility",
+        type: [],
+        description: 'Accessibility controls you might want to add inside the <video> element.\nFor example, you might want to add a <p> tag in case the video player doesn\'t work.\nThis can also be use to add captions or subtitles to the video or even to add the sources manually (without using the "src" or "sources" props).\nThis snippet will be added inside the <video> tag.',
+        default: "undefined",
+    },
 ];

package/dist/components/avatar/index.scss

@@ -1,12 +1,14 @@
+@use "$css/variables";
+
 //? Basic styles
 .q-avatar {
   object-fit: cover;
   object-position: center;
   aspect-ratio: 1;
   transition:
-    var(--speed3) transform,
-    var(--speed3) border-radius,
-    var(--speed3) padding;
+    variables.$speed3 transform,
+    variables.$speed3 border-radius,
+    variables.$speed3 padding;
   border-radius: 0;
 
   display: flex;

package/dist/components/avatar/props.d.ts

@@ -1,25 +1,68 @@
-import type { QuaffSizes, CssValue, NativeProps } from "../../utils/types";
-export type QAvatarShapeOptions = "circle" | "rounded" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
-export type QAvatarSizeOptions = QuaffSizes | CssValue | number;
-export interface QAvatarProps extends NativeProps {
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type QAvatarShapeOptions = "circle" | "square" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
+export type QAvatarSizeOptions = Q.Size | Q.CssValue | number;
+export type VideoTypes = "video/mp4" | "video/webm" | "video/ogg" | "video/quicktime" | "video/mpeg" | "video/3gpp" | "video/3gpp2" | "video/3gp2";
+export type QAvatarVideoSrcOptions = {
+    /**
+     * Sets the URL of the media resource.
+     */
+    src: string;
+    /**
+     * Sets the MIME type of a media resource.
+     */
+    type: VideoTypes;
+};
+export interface QAvatarProps extends HTMLAttributes<HTMLElement> {
     /**
      * Shape of the avatar.
-     * @default circle
+     *
+     * @default "circle"
      */
     shape?: QAvatarShapeOptions;
     /**
      * Size of the avatar, can be a custom size using CSS units. If no unit is specified, "px" will be used.
-     * @default md
+     *
+     * @default "md"
      */
     size?: QAvatarSizeOptions;
     /**
-     * Source of the image to use as the avatar. Can be a url or a path to a local file.
+     * Source of the image to be used as the avatar. Can be a url or a path to a local file.
+     *
+     * If the "video" prop is set to true, this will be used as an MP4 video source. If you want to use a different video format, use the "sources" prop.
+     *
      * @default undefined
      */
     src?: string;
     /**
-     * If set to true, will use the "src" prop as a video source.
+     * Only for video avatars. Use this prop to specify multiple sources for the video. The browser will play the first source it can support. This overrides the "src" prop.
+     *
+     * If used while the "video" prop is set to false, this prop has no effect.
+     *
+     * @default undefined
+     */
+    sources?: QAvatarVideoSrcOptions[];
+    /**
+     * If set to true, the avatar will be treaded as a video avatar.
+     * This means that the "src" prop will be used as an MP4 video source and the "sources" prop can be used to specify multiple sources for the video.
+     *
      * @default false
      */
     video?: boolean;
+    /**
+     * alt property for the image.
+     *
+     * @default undefined
+     */
+    alt?: string;
+    /**
+     * Accessibility controls you might want to add inside the <video> element.
+     * For example, you might want to add a <p> tag in case the video player doesn't work.
+     * This can also be use to add captions or subtitles to the video or even to add the sources manually (without using the "src" or "sources" props).
+     *
+     * This snippet will be added inside the <video> tag.
+     *
+     * @default undefined
+     */
+    videoAccessibility?: Snippet;
 }

package/dist/components/breadcrumbs/QBreadcrumbs.scss

@@ -0,0 +1,10 @@
+.q-breadcrumbs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+
+  & > .q-breadcrumbs__separator:first-child {
+    display: none;
+  }
+}

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,18 +1,36 @@
-<script>import { createClasses } from "../../utils/props";
-import { onMount, setContext } from "svelte";
-export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = void 0;
-export { userClasses as class };
-let breadcrumbElement;
-onMount(() => breadcrumbElement.firstChild?.remove());
-setContext("activeColor", activeColor);
-setContext("separator", { type: separator, color: separatorColor, gutter });
-$:
-  classes = createClasses([], {
-    component: "q-breadcrumbs",
-    userClasses
+<script lang="ts">
+  import { setContext, untrack } from "svelte";
+  import { QBreadcrumbsCtxName } from "../../utils";
+  import type { QBreadcrumbsProps } from "./props";
+
+  let {
+    activeColor = "primary",
+    gutter = "sm",
+    separator = "/",
+    separatorColor = "outline",
+    children,
+    ...props
+  }: QBreadcrumbsProps = $props();
+
+  let breadrumbElement: HTMLDivElement;
+
+  $effect(() => {
+    untrack(() => breadrumbElement.firstChild?.remove());
+  });
+
+  setContext(QBreadcrumbsCtxName.activeColor, activeColor);
+  setContext(QBreadcrumbsCtxName.separator, {
+    type: separator,
+    color: separatorColor,
+    gutter,
   });
 </script>
 
-<div class={classes} bind:this={breadcrumbElement}>
-  <slot />
+<div
+  bind:this={breadrumbElement}
+  {...props}
+  class={["q-breadcrumbs", props.class]}
+  data-quaff
+>
+  {@render children?.()}
 </div>

package/dist/components/breadcrumbs/QBreadcrumbs.svelte.d.ts

@@ -1,23 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QBreadcrumbsProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        separator?: QBreadcrumbsProps["separator"];
-        gutter?: QBreadcrumbsProps["gutter"];
-        activeColor?: QBreadcrumbsProps["activeColor"];
-        separatorColor?: QBreadcrumbsProps["separatorColor"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QBreadcrumbsProps_ = typeof __propDef.props;
 export { QBreadcrumbsProps_ as QBreadcrumbsProps };
 export type QBreadcrumbsEvents = typeof __propDef.events;
 export type QBreadcrumbsSlots = typeof __propDef.slots;
-export default class QBreadcrumbs extends SvelteComponent<QBreadcrumbsProps, QBreadcrumbsEvents, QBreadcrumbsSlots> {
+export default class QBreadcrumbs extends SvelteComponentTyped<QBreadcrumbsProps_, QBreadcrumbsEvents, QBreadcrumbsSlots> {
 }

package/dist/components/breadcrumbs/QBreadcrumbsEl.scss

@@ -0,0 +1,10 @@
+@use "$css/mixins";
+
+.q-breadcrumbs__el {
+  display: flex;
+  align-items: center;
+
+  & > .q-icon {
+    @include mixins.margin("r-sm");
+  }
+}

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,59 +1,76 @@
-<script>import { getContext } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { createClasses } from "../../utils/props";
-import { isRouteActive } from "../../composables/use-router-link";
-import { Quaff } from "../../stores/Quaff";
-export let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "active", userClasses = void 0;
-export { userClasses as class };
-const activeColor = getContext("activeColor");
-const separator = getContext("separator");
-$:
-  isActive = isRouteActive($Quaff.router, href || to);
-$:
-  classes = createClasses([isActive && activeClass], {
-    component: "q-breadcrumbs",
-    element: "el",
-    quaffClasses: [isActive && `${activeColor}-text`],
-    userClasses
-  });
-$:
-  separatorClasses = createClasses([], {
-    component: "q-breadcrumbs",
-    element: "separator",
-    quaffClasses: [`q-px-${separator.gutter}`]
-  });
+<script lang="ts">
+  import { getContext, type Snippet } from "svelte";
+  import { QIcon } from "../..";
+  import { isRouteActive, QBreadcrumbsCtxName } from "../../utils";
+  import type { MaterialSymbol } from "material-symbols";
+  import type { QBreadcrumbsElProps } from "./props";
+
+  let {
+    activeClass = "active",
+    href,
+    label = "",
+    icon,
+    tag = "div",
+    to,
+    children = fallback,
+    ...props
+  }: QBreadcrumbsElProps = $props();
+
+  const activeColor = getContext<string>(QBreadcrumbsCtxName.activeColor);
+  const separator = getContext<{
+    type: `icon:${MaterialSymbol}` | Snippet;
+    color: string;
+    gutter: string;
+  }>(QBreadcrumbsCtxName.separator);
+
+  const classesIfActive = $derived(
+    isRouteActive(href || to)
+      ? `${activeClass} text-${activeColor}`
+      : undefined,
+  );
 </script>
 
-<div class={separatorClasses}>
-  {#if separator.type.startsWith("icon:")}
-    <QIcon name={separator.type.replace("icon:", "")} size="1rem" />
+{#snippet fallback()}
+  {label}
+{/snippet}
+
+{#snippet breadcrumbEl()}
+  {#if icon !== undefined}
+    {#if typeof icon === "string"}
+      <QIcon name={icon} size="1rem" />
+    {:else}
+      {@render icon()}
+    {/if}
+  {/if}
+
+  {@render children()}
+{/snippet}
+
+<div
+  {...props}
+  class={["q-breadcrumbs__separator", `q-px-${separator.gutter}`, props.class]}
+  data-quaff
+>
+  {#if typeof separator.type === "string"}
+    {#if separator.type.startsWith("icon:")}
+      <QIcon
+        name={separator.type.replace("icon:", "") as MaterialSymbol}
+        size="1rem"
+      />
+    {:else}
+      {separator.type}
+    {/if}
   {:else}
-    {separator.type}
+    {@render separator.type()}
   {/if}
 </div>
 
 {#if href !== undefined || to !== undefined}
-  <a href={href || to} class={classes}>
-    {#if icon !== undefined}
-      <QIcon name={icon} size="1rem" />
-    {:else if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-
-    <slot>
-      {label}
-    </slot>
+  <a href={href || to} class={["q-breadcrumbs__el", classesIfActive]}>
+    {@render breadcrumbEl()}
   </a>
 {:else}
-  <svelte:element this={tag} class={classes}>
-    {#if icon !== undefined}
-      <QIcon name={icon} size="1rem" />
-    {:else if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-
-    <slot>
-      {label}
-    </slot>
+  <svelte:element this={tag} class={["q-breadcrumbs__el", classesIfActive]}>
+    {@render breadcrumbEl()}
   </svelte:element>
 {/if}

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte.d.ts

@@ -1,26 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QBreadcrumbsElProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        label?: QBreadcrumbsElProps["label"];
-        icon?: QBreadcrumbsElProps["icon"];
-        tag?: QBreadcrumbsElProps["tag"];
-        to?: QBreadcrumbsElProps["to"];
-        href?: QBreadcrumbsElProps["href"];
-        activeClass?: QBreadcrumbsElProps["activeClass"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        icon: {};
-        default: {};
-    };
+    slots: {};
 };
 type QBreadcrumbsElProps_ = typeof __propDef.props;
 export { QBreadcrumbsElProps_ as QBreadcrumbsElProps };
 export type QBreadcrumbsElEvents = typeof __propDef.events;
 export type QBreadcrumbsElSlots = typeof __propDef.slots;
-export default class QBreadcrumbsEl extends SvelteComponent<QBreadcrumbsElProps, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
+export default class QBreadcrumbsEl extends SvelteComponentTyped<QBreadcrumbsElProps_, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
 }

package/dist/components/breadcrumbs/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QBreadcrumbsDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+export declare const QBreadcrumbsDocs: QComponentDocs;

package/dist/components/breadcrumbs/docs.js

@@ -1,15 +1,10 @@
-import { QBreadcrumbsDocsProps } from "./docs.props";
-export let QBreadcrumbsDocs = {
+import { QBreadcrumbsDocsProps, QBreadcrumbsDocsSnippets } from "./docs.props";
+export const QBreadcrumbsDocs = {
     name: "QBreadcrumbs",
     description: "Breadcrumbs are mostly used as a navigation aid. They allow users to keep track of their location within the page.",
     docs: {
         props: QBreadcrumbsDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: "The default slot is used to inserts breadcrumb elements. Use QBreadcrumbsEl to insert elements.",
-            },
-        ],
+        snippets: QBreadcrumbsDocsSnippets,
         methods: [],
         events: [],
     },