@quaffui/quaff 0.1.0-prealpha

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2023 Rubatissimo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# Quaff
+
+Quaff is an experimental project utilizing [Beer CSS](https://www.beercss.com/) and parts of [Quasar Framework](https://quasar.dev/) as the base for Svelte components. This independent project is not endorsed by or affiliated with Beer CSS or Quasar Framework.
+
+**This is merely a playground right now, don't expect anything usable!**
+
+## Developing
+
+Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm 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.
+
+## Building
+
+To build the library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Third-party Libraries
+
+This project makes use of the following open source libraries:
+
+- [Beer CSS](https://www.beercss.com/): Copyright (c) 2021 Beer css!. Licensed under the [MIT License](https://github.com/beercss/beercss/blob/main/LICENSE)
+- [Quasar Framework](https://quasar.dev/): Copyright (c) 2015-present Razvan Stoenescu. Licensed under the [MIT License](https://github.com/quasarframework/quasar/blob/dev/LICENSE)

package/dist/components/avatar/QAvatar.svelte

@@ -0,0 +1,43 @@
+<script>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 };
+$:
+  isBasicSize = ["xs", "sm", "md", "lg", "xl"].includes(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, isBasicSize && size], {
+    component: "q-avatar",
+    userClasses
+  });
+$:
+  style = !isBasicSize ? createStyles(
+    {
+      width: size,
+      height: size
+    },
+    userStyles
+  ) : userStyles;
+</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}

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } 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 | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QAvatarProps = typeof __propDef.props;
+export type QAvatarEvents = typeof __propDef.events;
+export type QAvatarSlots = typeof __propDef.slots;
+export default class QAvatar extends SvelteComponentTyped<QAvatarProps, QAvatarEvents, QAvatarSlots> {
+}
+export {};

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

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

package/dist/components/avatar/docs.js

@@ -0,0 +1,22 @@
+import { QAvatarDocsProps } from "./docs.props";
+export let 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.",
+            },
+        ],
+        methods: [],
+        events: [
+            {
+                name: "click",
+                type: "(e: MouseEvent) => void",
+                description: "Emitted when the user clicks on the avatar.",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+export declare const QAvatarDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,34 @@
+export const QAvatarDocsProps = [
+    {
+        name: "shape",
+        type: "QAvatarShapeOptions",
+        optional: true,
+        clickableType: true,
+        description: "Shape of the avatar.",
+        default: "circle",
+    },
+    {
+        name: "size",
+        type: "QAvatarSizeOptions",
+        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",
+    },
+    {
+        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.",
+        default: "undefined",
+    },
+    {
+        name: "video",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: 'If set to true, will use the "src" prop as a video source.',
+        default: "false",
+    },
+];

package/dist/components/avatar/index.scss

@@ -0,0 +1,88 @@
+//? Basic styles
+.q-avatar {
+  object-fit: cover;
+  object-position: center;
+  aspect-ratio: 1;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--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": 1,
+  "sm": 2,
+  "md": 3,
+  "lg": 4,
+  "xl": 5,
+);
+
+.q-avatar {
+  @each $size, $val in $sizes {
+    &--#{$size} {
+      height: 2rem + ($val - 1) * 0.5rem;
+      width: 2rem + ($val - 1) * 0.5rem;
+    }
+  }
+}
+
+//? Border radius
+$positions-y: "top", "bottom";
+$positions-x: "right", "left";
+
+.q-avatar {
+  &--top-right-round {
+    border-top-right-radius: 50%;
+  }
+  &--top-left-round {
+    border-top-left-radius: 50%;
+  }
+  &--bottom-right-round {
+    border-bottom-right-radius: 50%;
+  }
+  &--bottom-left-round {
+    border-bottom-left-radius: 50%;
+  }
+
+  @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;
+    }
+  }
+
+  &--circle {
+    @extend .q-avatar--top-left-round;
+    @extend .q-avatar--top-right-round;
+    @extend .q-avatar--bottom-left-round;
+    @extend .q-avatar--bottom-right-round;
+  }
+
+  &--round {
+    border-radius: 0.5rem;
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { 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 = "xs" | "sm" | "md" | "lg" | "xl" | string;
+export interface QAvatarProps extends NativeProps {
+    /**
+     * Shape of the avatar.
+     * @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
+     */
+    size?: QAvatarSizeOptions;
+    /**
+     * Source of the image to use as the avatar. Can be a url or a path to a local file.
+     * @default undefined
+     */
+    src?: string;
+    /**
+     * If set to true, will use the "src" prop as a video source.
+     * @default false
+     */
+    video?: boolean;
+}

package/dist/components/avatar/props.js

@@ -0,0 +1 @@
+import "$lib/utils/types";

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -0,0 +1,18 @@
+<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>
+
+<div class={classes} bind:this={breadcrumbElement}>
+  <slot />
+</div>

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

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

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -0,0 +1,59 @@
+<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>
+
+<div class={separatorClasses}>
+  {#if separator.type.startsWith("icon:")}
+    <QIcon name={separator.type.replace("icon:", "")} size="1rem" />
+  {:else}
+    {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>
+{: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>
+{/if}

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QBreadcrumbsElProps } from "./props";
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export type QBreadcrumbsElProps = typeof __propDef.props;
+export type QBreadcrumbsElEvents = typeof __propDef.events;
+export type QBreadcrumbsElSlots = typeof __propDef.slots;
+export default class QBreadcrumbsEl extends SvelteComponentTyped<QBreadcrumbsElProps, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
+}
+export {};

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

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

package/dist/components/breadcrumbs/docs.js

@@ -0,0 +1,16 @@
+import { QBreadcrumbsDocsProps } from "./docs.props";
+export let 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.",
+            },
+        ],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -0,0 +1,16 @@
+export declare const QBreadcrumbsDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QBreadcrumbsElDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,84 @@
+export const QBreadcrumbsDocsProps = [
+    {
+        name: "separator",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.',
+        default: "/",
+    },
+    {
+        name: "gutter",
+        type: "QBreadcrumbsGutterOptions",
+        optional: true,
+        clickableType: true,
+        description: "Space around separators.",
+        default: "sm",
+    },
+    {
+        name: "activeColor",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.",
+        default: "primary",
+    },
+    {
+        name: "separatorColor",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Color to use for the separators. See <link to colors docs> to see what colors can be used.",
+        default: "outline",
+    },
+];
+export const QBreadcrumbsElDocsProps = [
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.",
+        default: '""',
+    },
+    {
+        name: "icon",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.",
+        default: "undefined",
+    },
+    {
+        name: "tag",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Tag to use for the breadcrumb element.",
+        default: '"div"',
+    },
+    {
+        name: "to",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
+        default: "undefined",
+    },
+    {
+        name: "href",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
+        default: "undefined",
+    },
+    {
+        name: "activeClass",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Class to apply to the breadcrumb element when the route is active.",
+        default: '"active"',
+    },
+];

package/dist/components/breadcrumbs/index.scss

@@ -0,0 +1,20 @@
+// QBreadcrumbs
+.q-breadcrumbs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__separator:first-child {
+    display: none;
+  }
+}
+
+// QBreadcrumbsEl
+.q-breadcrumbs.q-breadcrumbs__el {
+  display: flex;
+  align-items: center;
+
+  & > .q-icon {
+    @include margin("r");
+  }
+}

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

@@ -0,0 +1,56 @@
+import type { NativeProps } from "../../utils/types";
+export type QBreadcrumbsGutterOptions = "none" | "sm" | "md" | "lg";
+export interface QBreadcrumbsProps extends NativeProps {
+    /**
+     * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
+     * @default /
+     */
+    separator?: string;
+    /**
+     * Space around separators.
+     * @default sm
+     */
+    gutter?: QBreadcrumbsGutterOptions;
+    /**
+     * Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.
+     * @default primary
+     */
+    activeColor?: string;
+    /**
+     * Color to use for the separators. See <link to colors docs> to see what colors can be used.
+     * @default outline
+     */
+    separatorColor?: string;
+}
+export interface QBreadcrumbsElProps extends NativeProps {
+    /**
+     * Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.
+     * @default ""
+     */
+    label?: string;
+    /**
+     * Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.
+     * @default undefined
+     */
+    icon?: string;
+    /**
+     * Tag to use for the breadcrumb element.
+     * @default "div"
+     */
+    tag?: string;
+    /**
+     * Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")
+     * @default undefined
+     */
+    to?: string;
+    /**
+     * Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Class to apply to the breadcrumb element when the route is active.
+     * @default "active"
+     */
+    activeClass?: string;
+}

package/dist/components/breadcrumbs/props.js

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