@quaffui/quaff 0.1.0-prealpha

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

@@ -0,0 +1,106 @@
+export const QDrawerDocsProps = [
+    {
+        name: "value",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "The value indicating whether the drawer is visible or hidden.",
+        default: "true",
+    },
+    {
+        name: "side",
+        type: "QDrawerSideOptions",
+        optional: true,
+        clickableType: true,
+        description: "The side of the layout where the drawer is positioned.",
+        default: '"left"',
+    },
+    {
+        name: "width",
+        type: "number | string",
+        optional: true,
+        clickableType: true,
+        description: 'The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.',
+        default: "300",
+    },
+    {
+        name: "breakpoint",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "The breakpoint at which the drawer behavior changes. (not supported yet)",
+        default: "1023",
+    },
+    {
+        name: "showIfAbove",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the drawer should be shown if the viewport width is above the specified breakpoint. (not supported yet)",
+        default: "false",
+    },
+    {
+        name: "behavior",
+        type: "QDrawerBehaviorOptions",
+        optional: true,
+        clickableType: true,
+        description: "The behavior of the drawer based on the viewport width. (not supported yet)",
+        default: '"default"',
+    },
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the drawer has a border around it.",
+        default: "false",
+    },
+    {
+        name: "elevated",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the drawer has an elevated effect. (not supported yet)",
+        default: "false",
+    },
+    {
+        name: "overlay",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the wrawer should behave like an overlay (opening above the content) or not (pushing the content while opening).",
+        default: "false",
+    },
+    {
+        name: "persistent",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the drawer remains persistent, not closing on click outside.",
+        default: "false",
+    },
+    {
+        name: "noSwipeOpen",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether swipe gestures can open the drawer. (not supported yet)",
+        default: "false",
+    },
+    {
+        name: "noSwipeClose",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether swipe gestures can close the drawer. (not supported yet)",
+        default: "false",
+    },
+    {
+        name: "noSwipeBackdrop",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether swipe gestures on the backdrop can close the drawer. (not supported yet)",
+        default: "false",
+    },
+];

package/dist/components/drawer/index.scss

@@ -0,0 +1,54 @@
+.q-drawer {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+  height: 100%;
+  transition: all var(--speed3), background-color 0s;
+  overflow: auto;
+  padding: 8px;
+
+  &.fixed {
+    position: fixed;
+  }
+
+  &.left {
+    left: 0px;
+    transform: translate(-100%);
+    width: var(--left-drawer-width);
+    &.bordered {
+      border-right: 0.0625rem solid var(--outline);
+    }
+  }
+
+  &.right {
+    right: 0px;
+    transform: translate(100%);
+    width: var(--right-drawer-width);
+
+    &.bordered {
+      border-left: 0.0625rem solid var(--outline);
+    }
+  }
+
+  &.active {
+    transform: translate(0);
+  }
+
+  &.offset {
+    &-top {
+      top: var(--header-height);
+      height: calc(100% - var(--header-height));
+
+      &.offset-bottom {
+        height: calc(100% - var(--header-height) - var(--footer-height));
+      }
+    }
+    &-bottom {
+      bottom: var(--footer-height);
+      height: calc(100% - var(--footer-height));
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import type { NativeProps } from "../../utils/types";
+export type QDrawerSideOptions = "left" | "right";
+export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";
+export interface QDrawerProps extends NativeProps {
+    /**
+     * The value indicating whether the drawer is visible or hidden.
+     * @default true
+     */
+    value?: boolean;
+    /**
+     * The side of the layout where the drawer is positioned.
+     * @default "left"
+     */
+    side?: QDrawerSideOptions;
+    /**
+     * The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.
+     * @default 300
+     */
+    width?: number | string;
+    /**
+     * The breakpoint at which the drawer behavior changes. (not supported yet)
+     * @default 1023
+     */
+    breakpoint?: number;
+    /**
+     * Determines whether the drawer should be shown if the viewport width is above the specified breakpoint. (not supported yet)
+     * @default false
+     */
+    showIfAbove?: boolean;
+    /**
+     * The behavior of the drawer based on the viewport width. (not supported yet)
+     * @default "default"
+     */
+    behavior?: QDrawerBehaviorOptions;
+    /**
+     * Determines whether the drawer has a border around it.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Determines whether the drawer has an elevated effect. (not supported yet)
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * Determines whether the wrawer should behave like an overlay (opening above the content) or not (pushing the content while opening).
+     * @default false
+     */
+    overlay?: boolean;
+    /**
+     * Determines whether the drawer remains persistent, not closing on click outside.
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Determines whether swipe gestures can open the drawer. (not supported yet)
+     * @default false
+     */
+    noSwipeOpen?: boolean;
+    /**
+     * Determines whether swipe gestures can close the drawer. (not supported yet)
+     * @default false
+     */
+    noSwipeClose?: boolean;
+    /**
+     * Determines whether swipe gestures on the backdrop can close the drawer. (not supported yet)
+     * @default false
+     */
+    noSwipeBackdrop?: boolean;
+}

package/dist/components/drawer/props.js

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

package/dist/components/footer/QFooter.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from "svelte";
+import { createClasses } from "../../utils/props";
+export let value = true, bordered = false, elevated = false, height = void 0, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+let ctx = getContext("layout");
+$:
+  classes = createClasses(["q-footer", $ctx && $ctx.footer.fixed && "fixed", userClasses]);
+</script>
+
+<footer class={classes} style={userStyles}>
+  <nav>
+    <slot />
+  </nav>
+</footer>

package/dist/components/footer/QFooter.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QFooterProps } from "./props";
+declare const __propDef: {
+    props: {
+        value?: QFooterProps["value"];
+        bordered?: QFooterProps["bordered"];
+        elevated?: QFooterProps["elevated"];
+        height?: QFooterProps["height"];
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QFooterProps = typeof __propDef.props;
+export type QFooterEvents = typeof __propDef.events;
+export type QFooterSlots = typeof __propDef.slots;
+export default class QFooter extends SvelteComponentTyped<QFooterProps, QFooterEvents, QFooterSlots> {
+}
+export {};

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

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

package/dist/components/footer/docs.js

@@ -0,0 +1,11 @@
+import { QFooterDocsProps } from "./docs.props";
+export let QFooterDocs = {
+    name: "QFooter",
+    description: "Footers can be used to display navigation and key actions at the bottom of the screen.",
+    docs: {
+        props: QFooterDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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

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

@@ -0,0 +1,34 @@
+export const QFooterDocsProps = [
+    {
+        name: "value",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "The value indicating whether the footer is visible or hidden. (not supported yet)",
+        default: "true",
+    },
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the footer has a border around it. (not supported yet)",
+        default: "false",
+    },
+    {
+        name: "elevated",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Determines whether the footer has an elevated effect. (not supported yet)",
+        default: "false",
+    },
+    {
+        name: "height",
+        type: "string | number",
+        optional: true,
+        clickableType: false,
+        description: 'The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)',
+        default: "undefined",
+    },
+];

package/dist/components/footer/index.scss

@@ -0,0 +1,5 @@
+.q-footer {
+  width: 100%;
+  height: var(--footer-height);
+  transition: all var(--speed3);
+}

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

@@ -0,0 +1,23 @@
+import type { NativeProps } from "../../utils/types";
+export interface QFooterProps extends NativeProps {
+    /**
+     * The value indicating whether the footer is visible or hidden. (not supported yet)
+     * @default true
+     */
+    value?: boolean;
+    /**
+     * Determines whether the footer has a border around it. (not supported yet)
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Determines whether the footer has an elevated effect. (not supported yet)
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)
+     * @default undefined
+     */
+    height?: string | number;
+}

package/dist/components/footer/props.js

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

package/dist/components/icon/QIcon.svelte

@@ -0,0 +1,40 @@
+<script>import useSize from "../../composables/use-size";
+import { createClasses, createStyles } from "../../utils/props";
+import { isNumber } from "../../utils/types";
+export let size = "md", name = void 0, type = "outlined", fill = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+$:
+  sizeStyle = useSize(size) === null ? isNumber(size) ? `${size}px` : size : void 0;
+$:
+  classes = createClasses([
+    "q-icon",
+    `q-icon__${type}`,
+    fill && "fill",
+    useSize(size),
+    color && `${color}-text`,
+    userClasses
+  ]);
+$:
+  style = createStyles(
+    {
+      "---size": sizeStyle
+    },
+    userStyles
+  );
+$:
+  imgAttrs = {
+    alt: "Quaff Image Icon",
+    ...imgAttributes
+  };
+</script>
+
+<i class={classes} {style}>
+  {#if name !== undefined}
+    {name}
+  {:else if img !== undefined}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img src={img} {...imgAttrs} />
+  {:else if svg !== undefined}
+    <slot />
+  {/if}
+</i>

package/dist/components/icon/QIcon.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QIconProps } from "./props";
+declare const __propDef: {
+    props: {
+        size?: import("./props").QIconSizeOptions | undefined;
+        name?: QIconProps["name"];
+        type?: import("./props").QIconTypeOptions | undefined;
+        fill?: boolean | undefined;
+        svg?: QIconProps["svg"];
+        img?: QIconProps["img"];
+        imgAttributes?: Record<string, any> | undefined;
+        color?: QIconProps["color"];
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QIconProps = typeof __propDef.props;
+export type QIconEvents = typeof __propDef.events;
+export type QIconSlots = typeof __propDef.slots;
+export default class QIcon extends SvelteComponentTyped<QIconProps, QIconEvents, QIconSlots> {
+}
+export {};

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

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

package/dist/components/icon/docs.js

@@ -0,0 +1,11 @@
+import { QIconDocsProps } from "./docs.props";
+export let QIconDocs = {
+    name: "QIcon",
+    description: "This component allows you to insert icons within elements of the page. Supported cions are Material Symbols icons.",
+    docs: {
+        props: QIconDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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

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

@@ -0,0 +1,66 @@
+export const QIconDocsProps = [
+    {
+        name: "size",
+        type: "QIconSizeOptions",
+        optional: false,
+        clickableType: true,
+        description: 'The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "md",
+    },
+    {
+        name: "type",
+        type: "QIconTypeOptions",
+        optional: false,
+        clickableType: true,
+        description: "The type of the icon.",
+        default: "outlined",
+    },
+    {
+        name: "name",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "The name of the Material Symbols icon.",
+        default: "undefined",
+    },
+    {
+        name: "fill",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "Determines whether the icon should be filled.",
+        default: "false",
+    },
+    {
+        name: "svg",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "The SVG content for the icon.",
+        default: "undefined",
+    },
+    {
+        name: "img",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "The image source for the icon.",
+        default: "undefined",
+    },
+    {
+        name: "imgAttributes",
+        type: "Record<string, any>",
+        optional: false,
+        clickableType: true,
+        description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
+        default: "{}",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "The color of the icon.",
+        default: "undefined",
+    },
+];

package/dist/components/icon/index.scss

@@ -0,0 +1,18 @@
+$icon-font: "Material Symbols Outlined";
+
+.q-icon {
+  overflow: visible;
+  font-family: $icon-font;
+
+  &--outlined {
+    $icon-font: "Material Symbols Outlined";
+  }
+
+  &--rounded {
+    $icon-font: "Material Symbols Rounded";
+  }
+
+  &--sharp {
+    $icon-font: "Material Symbols Sharp";
+  }
+}

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

@@ -0,0 +1,45 @@
+import type { NativeProps } from "../../utils/types";
+export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
+export interface QIconProps extends NativeProps {
+    /**
+     * The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default md
+     */
+    size: QIconSizeOptions;
+    /**
+     * The type of the icon.
+     * @default outlined
+     */
+    type: QIconTypeOptions;
+    /**
+     * The name of the Material Symbols icon.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Determines whether the icon should be filled.
+     * @default false
+     */
+    fill: boolean;
+    /**
+     * The SVG content for the icon.
+     * @default undefined
+     */
+    svg?: string;
+    /**
+     * The image source for the icon.
+     * @default undefined
+     */
+    img?: string;
+    /**
+     * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
+     * @default {}
+     */
+    imgAttributes: Record<string, any>;
+    /**
+     * The color of the icon.
+     * @default undefined
+     */
+    color?: string;
+}

package/dist/components/icon/props.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,29 @@
+import QAvatar from "./avatar/QAvatar.svelte";
+import QBtn from "./button/QBtn.svelte";
+import QCard from "./card/QCard.svelte";
+import QCardSection from "./card/QCardSection.svelte";
+import QCardActions from "./card/QCardActions.svelte";
+import QCheckbox from "./checkbox/QCheckbox.svelte";
+import QChip from "./chip/QChip.svelte";
+import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
+import QDialog from "./dialog/QDialog.svelte";
+import QDrawer from "./drawer/QDrawer.svelte";
+import QFooter from "./footer/QFooter.svelte";
+import QIcon from "./icon/QIcon.svelte";
+import QInput from "./input/QInput.svelte";
+import QSelect from "./select/QSelect.svelte";
+import QLayout from "./layout/QLayout.svelte";
+import QList from "./list/QList.svelte";
+import QItem from "./list/QItem.svelte";
+import QItemSection from "./list/QItemSection.svelte";
+import QLinearProgress from "./progress/QLinearProgress.svelte";
+import QRadio from "./radio/QRadio.svelte";
+import QRailbar from "./railbar/QRailbar.svelte";
+import QSeparator from "./separator/QSeparator.svelte";
+import QTabs from "./tabs/QTabs.svelte";
+import QTab from "./tabs/QTab.svelte";
+import QTable from "./table/QTable.svelte";
+import QToggle from "./toggle/QToggle.svelte";
+import QToolbar from "./toolbar/QToolbar.svelte";
+import QTooltip from "./tooltip/QTooltip.svelte";
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };

package/dist/components/index.js

@@ -0,0 +1,29 @@
+import QAvatar from "./avatar/QAvatar.svelte";
+import QBtn from "./button/QBtn.svelte";
+import QCard from "./card/QCard.svelte";
+import QCardSection from "./card/QCardSection.svelte";
+import QCardActions from "./card/QCardActions.svelte";
+import QCheckbox from "./checkbox/QCheckbox.svelte";
+import QChip from "./chip/QChip.svelte";
+import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
+import QDialog from "./dialog/QDialog.svelte";
+import QDrawer from "./drawer/QDrawer.svelte";
+import QFooter from "./footer/QFooter.svelte";
+import QIcon from "./icon/QIcon.svelte";
+import QInput from "./input/QInput.svelte";
+import QSelect from "./select/QSelect.svelte";
+import QLayout from "./layout/QLayout.svelte";
+import QList from "./list/QList.svelte";
+import QItem from "./list/QItem.svelte";
+import QItemSection from "./list/QItemSection.svelte";
+import QLinearProgress from "./progress/QLinearProgress.svelte";
+import QRadio from "./radio/QRadio.svelte";
+import QRailbar from "./railbar/QRailbar.svelte";
+import QSeparator from "./separator/QSeparator.svelte";
+import QTabs from "./tabs/QTabs.svelte";
+import QTab from "./tabs/QTab.svelte";
+import QTable from "./table/QTable.svelte";
+import QToggle from "./toggle/QToggle.svelte";
+import QToolbar from "./toolbar/QToolbar.svelte";
+import QTooltip from "./tooltip/QTooltip.svelte";
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };