@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/README.md

@@ -6,13 +6,13 @@ Quaff is an experimental project utilizing [Beer CSS](https://www.beercss.com/)
 
 ## Developing
 
-Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've installed dependencies with `bun install`, start a development server:
 
 ```bash
-npm run dev
+bun run dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
+bun run dev -- --open
 ```
 
 Everything inside `src/lib` is part of the library, everything inside `src/routes` can be used as a showcase or preview app.
@@ -22,16 +22,16 @@ Everything inside `src/lib` is part of the library, everything inside `src/route
 To build the library:
 
 ```bash
-npm run package
+bun run package
 ```
 
 To create a production version of your showcase app:
 
 ```bash
-npm run build
+bun run build
 ```
 
-You can preview the production build with `npm run preview`.
+You can preview the production build with `bun run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
 

package/dist/classes/QContext.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+ * This class allows to manipulate reactive contexts more easily.
+ * It avoids having to pass a Svelte store down the components but rather use runes to keep the context reactive.
+ *
+ * This class should be used when the context has to be modified from a child component. Otherwise, using svelte's context API should be enough.
+ */
+export default class QContext<T> {
+    #private;
+    constructor(contextName: string, init: T);
+    /**
+     * Gets the value of context with id `contextName`
+     * @param contextName - Name of the context to get
+     * @returns The context's value
+     */
+    static get<T>(contextName: string): QContext<T> | undefined;
+    /**
+     * Prevents the propagation of the context further down
+     * @param contextName - Name of the context to get
+     * @returns The context result
+     */
+    static reset(contextName: string): void;
+    /**
+     * Updates the context's inner value with `newVal`
+     * @param newVal - New value to update the context with
+     */
+    update(newVal: T): void;
+    /**
+     * Updates the property of id `key` with `newVal` in the context's inner value
+     * @param key - Key to update
+     * @param newVal - New value to update the context's property with
+     */
+    updateEntry(key: keyof T, newVal: NonNullable<T>[keyof T]): void;
+    /**
+     * Updates the given properties their corresponding values in the context's inner value
+     * @param from - Object containing keys to update with their respective value
+     */
+    updateEntries(from: Record<keyof T, NonNullable<T>[keyof T]>): void;
+    /**
+     * Inner value of the context
+     */
+    get value(): T;
+}

package/dist/classes/QContext.svelte.js

@@ -0,0 +1,63 @@
+import { getContext, setContext } from "svelte";
+/**
+ * This class allows to manipulate reactive contexts more easily.
+ * It avoids having to pass a Svelte store down the components but rather use runes to keep the context reactive.
+ *
+ * This class should be used when the context has to be modified from a child component. Otherwise, using svelte's context API should be enough.
+ */
+export default class QContext {
+    #state = $state();
+    constructor(contextName, init) {
+        this.#state = init;
+        setContext(contextName, this);
+    }
+    /**
+     * Gets the value of context with id `contextName`
+     * @param contextName - Name of the context to get
+     * @returns The context's value
+     */
+    static get(contextName) {
+        return getContext(contextName);
+    }
+    /**
+     * Prevents the propagation of the context further down
+     * @param contextName - Name of the context to get
+     * @returns The context result
+     */
+    static reset(contextName) {
+        setContext(contextName, undefined);
+    }
+    /**
+     * Updates the context's inner value with `newVal`
+     * @param newVal - New value to update the context with
+     */
+    update(newVal) {
+        this.#state = newVal;
+    }
+    /**
+     * Updates the property of id `key` with `newVal` in the context's inner value
+     * @param key - Key to update
+     * @param newVal - New value to update the context's property with
+     */
+    updateEntry(key, newVal) {
+        if (!this.#state || typeof this.#state !== "object" || !Object.hasOwn(this.#state, key)) {
+            throw new Error(`${key.toString()} doesn't exist on ${this.#state}`);
+        }
+        this.#state[key] = newVal;
+    }
+    /**
+     * Updates the given properties their corresponding values in the context's inner value
+     * @param from - Object containing keys to update with their respective value
+     */
+    updateEntries(from) {
+        for (const key in from) {
+            this.updateEntry(key, from[key]);
+        }
+    }
+    /**
+     * Inner value of the context
+     */
+    get value() {
+        return this.#state;
+    }
+}

package/dist/classes/QScrollObserver.svelte.d.ts

@@ -0,0 +1,44 @@
+type Direction = "up" | "right" | "down" | "left";
+type WindowScrollType = "scrollX" | "scrollY";
+type DocumentScrollType = "scrollLeft" | "scrollTop";
+type ScrollType = {
+    window: WindowScrollType;
+    document: DocumentScrollType;
+};
+type Target = HTMLDivElement | typeof window | Document | string;
+type ScrollObserverOptions = {
+    debounce?: number;
+    horizontal?: boolean;
+};
+/**
+ * A scroll observer utility.
+ * @example
+ * ```js
+ * // Inside the <script> tag
+ * const scroll = new QScrollObserver();
+ *
+ * $inspect(scroll.direction)
+ * ```
+ *
+ * @param target - Element or selector of the element to add the scroll listener on
+ * @param options - Options of the observer
+ * @param options.horizontal - If set to `true`, observe horizontal scrolling rather than vertical
+ * @param options.debounce - Time in milliseconds between each observation update
+ */
+export default class QScrollObserver {
+    protected scrollType: ScrollType;
+    protected lastScroll: number;
+    protected horizontal: boolean;
+    protected clearTimer: (() => void) | null;
+    protected target: Exclude<Target, string> | null;
+    direction: Direction;
+    changedDirection: boolean;
+    delta: number;
+    inflectionPoint: number;
+    position: number;
+    constructor(target?: Target | null, { horizontal, debounce }?: ScrollObserverOptions);
+    protected getScrollPosition(target?: HTMLElement | typeof window | undefined): number;
+    protected updateDirection(target: HTMLElement): void;
+    protected handleDebounce(target: HTMLElement, debounce: number): void;
+}
+export {};

package/dist/classes/QScrollObserver.svelte.js

@@ -0,0 +1,95 @@
+import { onMount } from "svelte";
+import { elFromSelector } from "../utils";
+/**
+ * A scroll observer utility.
+ * @example
+ * ```js
+ * // Inside the <script> tag
+ * const scroll = new QScrollObserver();
+ *
+ * $inspect(scroll.direction)
+ * ```
+ *
+ * @param target - Element or selector of the element to add the scroll listener on
+ * @param options - Options of the observer
+ * @param options.horizontal - If set to `true`, observe horizontal scrolling rather than vertical
+ * @param options.debounce - Time in milliseconds between each observation update
+ */
+export default class QScrollObserver {
+    scrollType = {
+        window: "scrollY",
+        document: "scrollTop",
+    };
+    lastScroll;
+    horizontal = false;
+    clearTimer = null;
+    target = null;
+    direction = $state("down");
+    changedDirection = $state(false);
+    delta = $state(0);
+    inflectionPoint = $state(0);
+    position = $state(0);
+    constructor(target, { horizontal, debounce } = { horizontal: false, debounce: 250 }) {
+        this.horizontal = horizontal ?? false;
+        this.scrollType = horizontal
+            ? { window: "scrollX", document: "scrollLeft" }
+            : { window: "scrollY", document: "scrollTop" };
+        this.lastScroll = 0;
+        this.position = 0;
+        this.inflectionPoint = 0;
+        this.direction = horizontal ? "right" : "down";
+        const handler = (e) => {
+            const eventTarget = e.target;
+            if (!eventTarget || !this.target || eventTarget !== this.target) {
+                return;
+            }
+            if (debounce) {
+                this.handleDebounce(this.target, debounce);
+            }
+            else {
+                this.updateDirection(this.target);
+            }
+        };
+        onMount(() => {
+            let parsedTarget = elFromSelector(target ?? null);
+            if (parsedTarget === null) {
+                console.warn(`The given target (${target}) is null, observing window instead`);
+                parsedTarget = window;
+            }
+            this.target = parsedTarget;
+            parsedTarget.addEventListener("scroll", handler, { capture: true });
+            return () => {
+                this.clearTimer?.();
+                parsedTarget.removeEventListener("scroll", handler, true);
+            };
+        });
+    }
+    getScrollPosition(target = window) {
+        return Math.max(0, target === window
+            ? target[this.scrollType.window]
+            : target[this.scrollType.document]);
+    }
+    updateDirection(target) {
+        this.clearTimer?.();
+        const newScrollPosition = this.getScrollPosition(target);
+        this.position = newScrollPosition;
+        this.delta = newScrollPosition - this.lastScroll;
+        const newDirection = this.delta > 0 ? (this.horizontal ? "right" : "down") : this.horizontal ? "left" : "up";
+        this.changedDirection = newDirection !== this.direction;
+        if (this.changedDirection) {
+            this.direction = newDirection;
+            this.inflectionPoint = newScrollPosition;
+        }
+        this.lastScroll = newScrollPosition <= 0 ? 0 : newScrollPosition;
+    }
+    handleDebounce(target, debounce) {
+        if (this.clearTimer) {
+            return;
+        }
+        const timer = setTimeout(this.updateDirection.bind(this, target), debounce);
+        this.clearTimer = () => {
+            clearTimeout(timer);
+            this.clearTimer = null;
+        };
+    }
+}

package/dist/classes/QTheme.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HexValue, QuaffColors, Mode } from "../utils/colors";
+type ThemeColors = Record<`${keyof QuaffColors}-${Mode}`, HexValue>;
+declare class QTheme {
+    themeColors: ThemeColors;
+    constructor();
+    private apply;
+    updateThemeColor(color: keyof ThemeColors, newVal: HexValue): void;
+    setTheme(from: string): void;
+}
+declare const _default: QTheme;
+export default _default;

package/dist/classes/QTheme.svelte.js

@@ -0,0 +1,49 @@
+import { generateColors } from "../utils/colors";
+function extractColorFromCssVar(cssVar) {
+    const rootStyles = getComputedStyle(document.documentElement);
+    // remove var(...) to get only the color
+    const varName = cssVar.replace(/var\(([a-z0-9-]+)\)/, "$1");
+    return rootStyles.getPropertyValue(varName).trim();
+}
+function prepareThemeColors(from) {
+    if (from.startsWith("var(")) {
+        from = extractColorFromCssVar(from);
+    }
+    const theme = generateColors(from);
+    //@ts-expect-error The properties are added in the next for loop
+    const themeColors = {};
+    let mode;
+    for (mode in theme) {
+        let color;
+        for (color in theme[mode]) {
+            const cssColor = `${color}-${mode}`;
+            themeColors[cssColor] = theme[mode][color];
+        }
+    }
+    return themeColors;
+}
+class QTheme {
+    themeColors = $state({});
+    constructor() {
+        this.themeColors = prepareThemeColors("#0039b4");
+    }
+    apply() {
+        const root = document.documentElement;
+        if (root === null) {
+            return;
+        }
+        let colorName;
+        for (colorName in this.themeColors) {
+            root.style.setProperty(`--${colorName}`, this.themeColors[colorName]);
+        }
+    }
+    updateThemeColor(color, newVal) {
+        this.themeColors[color] = newVal;
+    }
+    setTheme(from) {
+        const newTheme = prepareThemeColors(from);
+        this.themeColors = newTheme;
+        this.apply();
+    }
+}
+export default new QTheme();

package/dist/classes/Quaff.svelte.d.ts

@@ -0,0 +1,14 @@
+declare class Quaff {
+    version: string;
+    protected dark: boolean;
+    private toggleDarkMode;
+    private setDarkMode;
+    get darkMode(): {
+        readonly isActive: boolean;
+        toggle: () => void;
+        set: (newVal: boolean) => void;
+    };
+    get router(): import("@sveltejs/kit").Page<Record<string, string>, string | null>;
+}
+declare const _default: Quaff;
+export default _default;

package/dist/classes/Quaff.svelte.js

@@ -0,0 +1,35 @@
+import { get } from "svelte/store";
+import version from "../helpers/version";
+import { page } from "$app/stores";
+class Quaff {
+    version = version;
+    dark = $state(false);
+    toggleDarkMode() {
+        this.dark = !this.dark;
+        const mode = {
+            from: this.dark ? "light" : "dark",
+            to: this.dark ? "dark" : "light",
+        };
+        const body = document.querySelector("body");
+        body?.classList.replace(`body--${mode.from}`, `body--${mode.to}`);
+        document.cookie = `current_mode=${mode.to}; max-age=31536000; path="/"; SameSite=strict`;
+    }
+    setDarkMode(newVal) {
+        this.dark = newVal;
+    }
+    get darkMode() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        return {
+            get isActive() {
+                return self.dark;
+            },
+            toggle: () => this.toggleDarkMode(),
+            set: (newVal) => this.setDarkMode(newVal),
+        };
+    }
+    get router() {
+        return get(page);
+    }
+}
+export default new Quaff();

package/dist/components/avatar/QAvatar.scss

@@ -0,0 +1,97 @@
+@use "$css/variables";
+
+@layer q-avatar {
+  // Basic styles
+  .q-avatar {
+    height: var(--size);
+    width: var(--size);
+
+    & > img,
+    & > video {
+      object-fit: cover;
+      object-position: center;
+      aspect-ratio: 1;
+      width: 100%;
+      height: 100%;
+    }
+    transition:
+      variables.$speed3 transform,
+      variables.$speed3 border-radius,
+      variables.$speed3 padding;
+    border-radius: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 1rem;
+    text-transform: uppercase;
+
+    overflow: hidden;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    &.circle {
+      margin: 0;
+    }
+  }
+
+  // Sizes
+  $sizes: (
+    "xs": 0,
+    "sm": 1,
+    "md": 2,
+    "lg": 3,
+    "xl": 4,
+  );
+
+  .q-avatar {
+    @each $size, $val in $sizes {
+      &--#{$size} {
+        --size: calc(2rem + #{$val} * 0.5rem);
+      }
+    }
+  }
+
+  // Border radius
+  $positions-y: "top", "bottom";
+  $positions-x: "right", "left";
+
+  .q-avatar {
+    border-radius: 50%;
+
+    &--top-right-round {
+      border-bottom-left-radius: 0;
+    }
+    &--top-left-round {
+      border-bottom-right-radius: 0;
+    }
+    &--bottom-right-round {
+      border-top-left-radius: 0;
+    }
+    &--bottom-left-round {
+      border-top-right-radius: 0;
+    }
+
+    @each $pos-y in $positions-y {
+      &--#{$pos-y}-round {
+        @extend .q-avatar--#{$pos-y}-left-round;
+        @extend .q-avatar--#{$pos-y}-right-round;
+      }
+    }
+
+    @each $pos-x in $positions-x {
+      &--#{$pos-x}-round {
+        @extend .q-avatar--top-#{$pos-x}-round;
+        @extend .q-avatar--bottom-#{$pos-x}-round;
+      }
+    }
+
+    &--round {
+      border-radius: 0.5rem;
+    }
+  }
+}

package/dist/components/avatar/QAvatar.svelte

@@ -1,52 +1,37 @@
-<script>import { useSize } from "../../composables";
-export let shape = "circle", size = "md", src = void 0, video = false, userClasses = "";
-export { userClasses as class };
-$:
-  sizeObj = useSize(size);
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { useSize } from "../../composables/useSize";
+  let {
+    alt,
+    shape = "circle",
+    size = "md",
+    src,
+    video = false,
+    children,
+    videoAccessibility,
+    ...props
+  } = $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="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
-    class:q-avatar--circle={shape === "circle"}
-    class:q-avatar--round={shape === "rounded"}
-    class:q-avatar--top-round={shape?.includes("top")}
-    class:q-avatar--bottom-round={shape?.includes("bottom")}
-    class:q-avatar--left-round={shape?.includes("left")}
-    class:q-avatar--right-round={shape?.includes("right")}
-    style:width={sizeObj.style}
-    style:height={sizeObj.style}
-    autoplay loop playsinline {...$$restProps} on:click>
-    <source {src} type="video/mp4" />
-  </video>
-{:else if src !== undefined}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <img
-    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
-    class:q-avatar--circle={shape === "circle"}
-    class:q-avatar--round={shape === "rounded"}
-    class:q-avatar--top-round={shape?.includes("top")}
-    class:q-avatar--bottom-round={shape?.includes("bottom")}
-    class:q-avatar--left-round={shape?.includes("left")}
-    class:q-avatar--right-round={shape?.includes("right")}
-    style:width={sizeObj.style}
-    style:height={sizeObj.style}
-    {src} {...$$restProps} on:click />
-{:else}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div
-    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
-    class:q-avatar--circle={shape === "circle"}
-    class:q-avatar--round={shape === "rounded"}
-    class:q-avatar--top-round={shape?.includes("top")}
-    class:q-avatar--bottom-round={shape?.includes("bottom")}
-    class:q-avatar--left-round={shape?.includes("left")}
-    class:q-avatar--right-round={shape?.includes("right")}
-    style:width={sizeObj.style}
-    style:height={sizeObj.style}
-    {...$$restProps} on:click>
-    <slot />
-  </div>
-{/if}
+<div
+  {...props}
+  class="q-avatar{qShape ? ` ${qShape}` : ''}{qSize.class
+    ? ` ${qSize.class}`
+    : ''}{props.class ? ` ${props.class}` : ''}"
+  style:--size={qSize.style}
+>
+  {#if video}
+    <video>
+      <source {src} type="video/mp4" />
+      <track kind="captions" />
+      {@render videoAccessibility?.()}
+    </video>
+  {:else if src !== undefined}
+    <img {src} {alt} />
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

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

@@ -1,26 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QAvatarProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        shape?: QAvatarProps["shape"];
-        size?: QAvatarProps["size"];
-        src?: QAvatarProps["src"];
-        video?: QAvatarProps["video"];
-        class?: string | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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> {
-}
+declare const QAvatar: import("svelte").Component<QAvatarProps, {}, "">;
+export default QAvatar;

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

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

package/dist/components/avatar/docs.js

@@ -1,5 +1,5 @@
 import { QAvatarDocsProps } from "./docs.props";
-export let QAvatarDocs = {
+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: {

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 24254a62ac601e8b6e85a3b74a7b3297
+// @quaffHash 1e0adf78358181054a99b1cbccf54f26
 export const QAvatarDocsProps = [
     {
         name: "shape",
@@ -7,7 +7,7 @@ export const QAvatarDocsProps = [
         optional: true,
         clickableType: true,
         description: "Shape of the avatar.",
-        default: "circle",
+        default: '"circle"',
     },
     {
         name: "size",
@@ -15,14 +15,14 @@ export const QAvatarDocsProps = [
         optional: true,
         clickableType: 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"',
     },
     {
         name: "src",
         type: "string",
         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.",
+        description: "Source of the image to be used as the avatar. Can be a url or a path to a local file.",
         default: "undefined",
     },
     {
@@ -30,7 +30,23 @@ export const QAvatarDocsProps = [
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: 'If set to true, will use the "src" prop as a video source.',
+        description: 'If set to true, the "src" prop will be used as a video source.',
         default: "false",
     },
+    {
+        name: "alt",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "alt property for the image.",
+        default: "undefined",
+    },
+    {
+        name: "videoAccessibility",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        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.",
+        default: "undefined",
+    },
 ];