@quaffui/quaff 0.1.0-prealpha

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

@@ -0,0 +1,34 @@
+export const QCodeBlockDocsProps = [
+    {
+        name: "language",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "Language to use for highlighting.",
+        default: "",
+    },
+    {
+        name: "code",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Code to highlight.",
+        default: "",
+    },
+    {
+        name: "title",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Title to display above the code.",
+        default: "undefined",
+    },
+    {
+        name: "copiable",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Wether the code should be copiable or not.",
+        default: "false",
+    },
+];

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

@@ -0,0 +1,20 @@
+export interface QCodeBlockProps {
+    /**
+     * Language to use for highlighting.
+     */
+    language: string;
+    /**
+     * Code to highlight.
+     */
+    code?: string;
+    /**
+     * Title to display above the code.
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * Wether the code should be copiable or not.
+     * @default false
+     */
+    copiable?: boolean;
+}

package/dist/components/codeBlock/props.js

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

package/dist/components/dialog/QDialog.svelte

@@ -0,0 +1,80 @@
+<script>import { createClasses } from "../../utils/props";
+import { createEventDispatcher } from "svelte";
+import QBtn from "../button/QBtn.svelte";
+import { clickOutsideDialog } from "../../helpers";
+export let value = true, noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
+export { userClasses as class };
+const emit = createEventDispatcher();
+let dialogElement;
+$:
+  canHideOnClickOutside = value === true && persistent !== true;
+$:
+  positionClass = ["top", "right", "bottom", "left"].includes(position) ? position : void 0;
+$:
+  classes = createClasses([
+    "q-dialog",
+    value && "active",
+    positionClass,
+    modal && "modal",
+    fullscreen && "max",
+    userClasses
+  ]);
+$:
+  value === true ? modal ? dialogElement?.showModal() : dialogElement?.show() : dialogElement?.close();
+export function hide() {
+  if (value === true) {
+    value = false;
+  }
+}
+export function show() {
+  if (value === false) {
+    value = true;
+  }
+}
+export function toggle(e) {
+  value = !value;
+  e.stopPropagation();
+}
+function addAnimation() {
+  if (persistent && value === true) {
+    dialogElement?.classList.add("animating");
+    setTimeout(() => {
+      dialogElement?.classList.remove("animating");
+    }, 150);
+  }
+}
+function handleKeyboardHide(e) {
+  if (canHideOnClickOutside) {
+    hide();
+  } else {
+    addAnimation();
+    e.preventDefault();
+  }
+}
+function handleClickHide() {
+  if (canHideOnClickOutside) {
+    hide();
+  } else {
+    addAnimation();
+  }
+}
+</script>
+
+{#if noBtn === false}
+  <QBtn {...btnAttrs} on:click={toggle} on:click={(event) => emit("btnClick", event)}>
+    <slot name="button">
+      {btnContent || ""}
+    </slot>
+  </QBtn>
+{/if}
+
+<dialog
+  use:clickOutsideDialog={handleClickHide}
+  class={classes}
+  open={value}
+  {...$$restProps}
+  bind:this={dialogElement}
+  on:cancel={handleKeyboardHide}
+>
+  <slot />
+</dialog>

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QDialogProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: boolean | undefined;
+        noBtn?: QDialogProps["noBtn"];
+        btnContent?: QDialogProps["btnContent"];
+        btnAttrs?: QDialogProps["btnAttrs"];
+        position?: QDialogProps["position"];
+        modal?: QDialogProps["modal"];
+        fullscreen?: QDialogProps["fullscreen"];
+        persistent?: QDialogProps["persistent"];
+        class?: string | undefined;
+        hide?: (() => void) | undefined;
+        show?: (() => void) | undefined;
+        toggle?: ((e: MouseEvent) => void) | undefined;
+    };
+    events: {
+        btnClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        button: {};
+        default: {};
+    };
+};
+export type QDialogProps = typeof __propDef.props;
+export type QDialogEvents = typeof __propDef.events;
+export type QDialogSlots = typeof __propDef.slots;
+export default class QDialog extends SvelteComponentTyped<QDialogProps, QDialogEvents, QDialogSlots> {
+    get hide(): any;
+    get show(): any;
+    get toggle(): any;
+}
+export {};

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

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

package/dist/components/dialog/docs.js

@@ -0,0 +1,11 @@
+import { QDialogDocsProps } from "./docs.props";
+export let QDialogDocs = {
+    name: "QDialog",
+    description: "Dialogs provide important prompts in a user flow.",
+    docs: {
+        props: QDialogDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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

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

@@ -0,0 +1,148 @@
+export const QBtnDocsProps = [
+    {
+        name: "disable",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Puts the button in a disabled state, making it unclickable.",
+        default: "false",
+    },
+    {
+        name: "flat",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use flat design for the button, removing its elevation and background-color.",
+        default: "false",
+    },
+    {
+        name: "icon",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Name of the leading icon to use for the button.",
+        default: "undefined",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Text to use for the button.",
+        default: "undefined",
+    },
+    {
+        name: "loading",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Puts the button in a loading state, adding a loader as the leading icon.",
+        default: "false",
+    },
+    {
+        name: "outline",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use outline design for the button, adding a border around it.",
+        default: "false",
+    },
+    {
+        name: "rectangle",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use rectangle design for the button, removing the large border-radius.",
+        default: "false",
+    },
+    {
+        name: "to",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Makes the button 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: "unelevated",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Removes the button's elevation.",
+        default: "false",
+    },
+    {
+        name: "size",
+        type: "QBtnSizeOptions",
+        optional: true,
+        clickableType: true,
+        description: "Size of the button.",
+        default: "md",
+    },
+];
+export const QDialogDocsProps = [
+    {
+        name: "value",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "The value indicating whether the dialog is visible or hidden.",
+        default: "false",
+    },
+    {
+        name: "noBtn",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Wether the dialog should have a trigger button or not.",
+        default: "false",
+    },
+    {
+        name: "btnContent",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "The content to be displayed on the dialog button.",
+        default: "undefined",
+    },
+    {
+        name: "btnAttrs",
+        type: "QBtnProps",
+        optional: true,
+        clickableType: false,
+        description: "Additional attributes for the dialog button.",
+        default: "{}",
+    },
+    {
+        name: "position",
+        type: "QDialogPositionOptions",
+        optional: true,
+        clickableType: true,
+        description: "The position of the dialog relative to the viewport.",
+        default: '"default"',
+    },
+    {
+        name: "modal",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the dialog is displayed as a modal or not.",
+        default: "false",
+    },
+    {
+        name: "fullscreen",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the dialog is displayed in fullscreen mode.",
+        default: "false",
+    },
+    {
+        name: "persistent",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the dialog remains persistent, not closing on click outside.",
+        default: "false",
+    },
+];

package/dist/components/dialog/index.scss

@@ -0,0 +1,27 @@
+dialog.q-dialog {
+  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &:is(.left, .right, .top, .bottom) {
+    border-radius: 0;
+  }
+  &.modal::backdrop {
+    display: block;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &.animating {
+    animation: shake 0.15s;
+  }
+}
+
+@keyframes shake {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 1.04;
+  }
+  100% {
+    scale: 1;
+  }
+}

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

@@ -0,0 +1,45 @@
+import type { NativeProps } from "../../utils/types";
+import type { QBtnProps } from "../button/props";
+export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";
+export interface QDialogProps extends NativeProps {
+    /**
+     * The value indicating whether the dialog is visible or hidden.
+     * @default true
+     */
+    value: boolean;
+    /**
+     * Wether the dialog should have a trigger button or not.
+     * @default false
+     */
+    noBtn?: boolean;
+    /**
+     * The content to be displayed on the dialog button.
+     * @default undefined
+     */
+    btnContent?: string;
+    /**
+     * Additional attributes for the dialog button.
+     * @default {}
+     */
+    btnAttrs?: QBtnProps;
+    /**
+     * The position of the dialog relative to the viewport.
+     * @default "default"
+     */
+    position?: QDialogPositionOptions;
+    /**
+     * Determines whether the dialog is displayed as a modal or not.
+     * @default false
+     */
+    modal?: boolean;
+    /**
+     * Determines whether the dialog is displayed in fullscreen mode.
+     * @default false
+     */
+    fullscreen?: boolean;
+    /**
+     * Determines whether the dialog remains persistent, not closing on click outside.
+     * @default false
+     */
+    persistent?: boolean;
+}

package/dist/components/dialog/props.js

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

package/dist/components/drawer/QDrawer.svelte

@@ -0,0 +1,87 @@
+<script>import { navigating } from "$app/stores";
+import { createClasses, createStyles } from "../../utils/props";
+import { getContext } from "svelte";
+import { clickOutside } from "../../helpers";
+export let value = true, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+$:
+  canHideOnClickOutside = value === true && persistent === false || overlay === true;
+$:
+  belowBreakpoint = behavior === "mobile" === true || behavior !== "desktop" && /** TODO: Get Layout width */
+  1300 <= breakpoint;
+$:
+  widthStyle = ctx === void 0 ? isNaN(Number(width)) ? width : `${width}px` : void 0;
+$:
+  hideOnRouteChange = persistent !== true || overlay === true;
+export const show = (e) => {
+  if (value !== true) {
+    value = true;
+    e && e.stopPropagation();
+  }
+};
+export const hide = () => {
+  if (value === true && canHideOnClickOutside === true) {
+    value = false;
+  }
+};
+export const toggle = (e) => {
+  value = !value;
+  e && e.stopPropagation();
+};
+$:
+  if ($navigating && hideOnRouteChange) {
+    hide();
+  }
+let ctx = getContext("layout");
+function prepareZIndexClass(context, overlayProp, sideProp) {
+  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
+  let pos;
+  for (pos of ["top", "bottom"]) {
+    if (!drawer.offset[pos] && overlayProp) {
+      drawer.overlay = true;
+      return "above";
+    }
+  }
+}
+let drawerType;
+$:
+  drawerType = side === "left" ? "drawerLeft" : "drawerRight";
+$:
+  classes = createClasses([
+    "q-drawer",
+    "surface",
+    side,
+    value && "active",
+    overlay && "overlay",
+    bordered && "bordered",
+    $ctx && $ctx[drawerType].offset.top && "offset-top",
+    $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
+    $ctx && $ctx[drawerType].fixed && "fixed",
+    getBorderRadiusClasses(side, overlay, $ctx),
+    $ctx && prepareZIndexClass($ctx, overlay, side),
+    userClasses
+  ]);
+$:
+  style = createStyles(
+    {
+      [side === "left" ? "--leftDrawerWidth" : "--rightDrawerWidth"]: widthStyle
+    },
+    userStyles
+  );
+function getBorderRadiusClasses(sideProp, overlayProp, context) {
+  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
+  const shouldHaveRadius = (pos) => {
+    if (!context)
+      return void 0;
+    let appbarEl = pos === "top" ? context["header"] : context["footer"];
+    if (appbarEl && appbarEl.display && !context[drawerType].offset[pos] && !overlayProp)
+      return void 0;
+    return `${prefix}--${pos}`;
+  };
+  return createClasses([shouldHaveRadius("top"), shouldHaveRadius("bottom")]);
+}
+</script>
+
+<div use:clickOutside={hide} class={classes} {style}>
+  <slot />
+</div>

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QDrawerProps } from "./props";
+declare const __propDef: {
+    props: {
+        value?: QDrawerProps["value"];
+        side?: QDrawerProps["side"];
+        width?: QDrawerProps["width"];
+        breakpoint?: QDrawerProps["breakpoint"];
+        showIfAbove?: QDrawerProps["showIfAbove"];
+        behavior?: QDrawerProps["behavior"];
+        bordered?: QDrawerProps["bordered"];
+        elevated?: QDrawerProps["elevated"];
+        overlay?: QDrawerProps["overlay"];
+        persistent?: QDrawerProps["persistent"];
+        noSwipeOpen?: QDrawerProps["noSwipeOpen"];
+        noSwipeClose?: QDrawerProps["noSwipeClose"];
+        noSwipeBackdrop?: QDrawerProps["noSwipeBackdrop"];
+        class?: string | undefined;
+        style?: string | undefined;
+        show?: ((e?: MouseEvent) => void) | undefined;
+        hide?: (() => void) | undefined;
+        toggle?: ((e?: MouseEvent) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QDrawerProps = typeof __propDef.props;
+export type QDrawerEvents = typeof __propDef.events;
+export type QDrawerSlots = typeof __propDef.slots;
+export default class QDrawer extends SvelteComponentTyped<QDrawerProps, QDrawerEvents, QDrawerSlots> {
+    get show(): any;
+    get hide(): any;
+    get toggle(): any;
+}
+export {};

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

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

package/dist/components/drawer/docs.js

@@ -0,0 +1,11 @@
+import { QDrawerDocsProps } from "./docs.props";
+export let QDrawerDocs = {
+    name: "QDrawer",
+    description: "Navigation drawers provide ergonomic access to destinations in an app",
+    docs: {
+        props: QDrawerDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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