@quaffui/quaff 0.1.0-prealpha

package/dist/components/tabs/QTabs.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QTabsProps } from "./props";
+declare const __propDef: {
+    props: {
+        value?: QTabsProps["value"];
+        variant?: import("./props").QTabsVariants | undefined;
+        round?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QTabsProps = typeof __propDef.props;
+export type QTabsEvents = typeof __propDef.events;
+export type QTabsSlots = typeof __propDef.slots;
+export default class QTabs extends SvelteComponentTyped<QTabsProps, QTabsEvents, QTabsSlots> {
+}
+export {};

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

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

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

@@ -0,0 +1,60 @@
+export const QTabsDocsProps = [
+    {
+        name: "value",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "vertical",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "round",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "smallIndicator",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];
+export const QTabDocsProps = [
+    {
+        name: "name",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "to",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "icon",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/tabs/index.scss

@@ -0,0 +1,75 @@
+.q-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  max-width: 100%;
+  overflow: auto;
+  scroll-behavior: smooth;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > .q-tab {
+    box-sizing: border-box;
+    height: 48px;
+    min-width: max-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    background-color: unset;
+    border-radius: 0;
+    gap: 0;
+
+    & > .q-icon {
+      margin-right: 8px;
+    }
+
+    &:is(:hover, :focus)::after {
+      background-image: radial-gradient(circle, var(--on-surface-variant-2) 1%, transparent 1%);
+    }
+  }
+
+  &.vertical-tabs {
+    flex-direction: column;
+    min-height: calc(var(--tab-count) * 48px);
+    width: fit-content;
+    align-items: stretch;
+
+    &::after {
+      top: var(--indicator-position);
+      right: 0;
+      bottom: auto;
+      left: auto;
+      width: 2px;
+      height: var(--indicator-size);
+    }
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: var(--indicator-position);
+    width: var(--indicator-size);
+    height: 2px;
+    border-radius: 0;
+    background: var(--primary);
+    transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
+    opacity: 0;
+  }
+
+  &:not(.hidden-indicator)::after {
+    opacity: 1;
+  }
+
+  &.small-indicator::after {
+    left: var(--indicator-position);
+    transform: translateX(-50%);
+    height: 3px;
+    border-radius: 3px 3px 0px 0px;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { type NativeProps } from "../../utils/types";
+export type QTabsVariants = "primary" | "secondary" | "vertical";
+export interface QTabsProps extends NativeProps {
+    value?: string;
+    variant: QTabsVariants;
+    round: boolean;
+}
+export declare const QTabsPropsDefaults: QTabsProps;
+export interface QTabProps extends NativeProps {
+    name?: string;
+    to?: string;
+    icon?: string;
+}
+export declare const QTabPropsDefaults: QTabProps;

package/dist/components/tabs/props.js

@@ -0,0 +1,13 @@
+import { NativePropsDefaults } from "../../utils/types";
+export const QTabsPropsDefaults = {
+    value: undefined,
+    variant: "primary",
+    round: false,
+    ...NativePropsDefaults,
+};
+export const QTabPropsDefaults = {
+    name: undefined,
+    to: undefined,
+    icon: undefined,
+    ...NativePropsDefaults,
+};

package/dist/components/toggle/QToggle.svelte

@@ -0,0 +1,35 @@
+<script>import { createClasses } from "../../utils/props";
+import { onMount } from "svelte";
+export let value, icon = void 0, label = void 0, leftLabel = void 0, disable = void 0, userClasses = void 0;
+export { userClasses as class };
+$:
+  classes = createClasses([leftLabel && "reversed", disable && "disabled", userClasses], {
+    component: "q-toggle",
+    userClasses
+  });
+$:
+  classesInner = createClasses([icon && "icon"], {
+    component: "q-toggle__inner"
+  });
+function toggle() {
+  if (disable !== true) {
+    value = !value;
+  }
+}
+</script>
+
+<div on:click={toggle} class={classes} aria-disabled={disable} {...$$restProps}>
+  <label class={classesInner}>
+    <input bind:checked={value} type="checkbox" disabled={disable} />
+    <span>
+      {#if icon}
+        <i>{icon}</i>
+      {/if}
+    </span>
+  </label>
+  {#if label}
+    <span class="q-toggle__label">
+      {label}
+    </span>
+  {/if}
+</div>

package/dist/components/toggle/QToggle.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QToggleProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: QToggleProps["value"];
+        icon?: QToggleProps["icon"];
+        label?: QToggleProps["label"];
+        leftLabel?: QToggleProps["leftLabel"];
+        disable?: QToggleProps["disable"];
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QToggleProps = typeof __propDef.props;
+export type QToggleEvents = typeof __propDef.events;
+export type QToggleSlots = typeof __propDef.slots;
+export default class QToggle extends SvelteComponentTyped<QToggleProps, QToggleEvents, QToggleSlots> {
+}
+export {};

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

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

package/dist/components/toggle/docs.js

@@ -0,0 +1,47 @@
+export let QToggleDocs = {
+    name: "QToggle",
+    description: "QToggle is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
+    docs: {
+        props: [
+            {
+                name: "value",
+                type: "boolean",
+                default: false,
+                description: "The current value of the toggle, true or false.",
+            },
+            {
+                name: "label",
+                type: "string",
+                optional: true,
+                description: "Label to be shown alongside the toggle.",
+            },
+            {
+                name: "leftLabel",
+                type: "boolean",
+                default: false,
+                description: "Whether the label should be displayed to the left of the toggle.",
+            },
+            {
+                name: "icon",
+                type: "string",
+                optional: true,
+                description: "Name of the icon to display on the toggle.",
+            },
+            {
+                name: "disable",
+                type: "boolean",
+                default: false,
+                description: "Whether the toggle should be disabled.",
+            },
+        ],
+        slots: [],
+        methods: [],
+        events: [
+            {
+                name: "input",
+                type: "(value: boolean) => void",
+                description: "Emitted when the user changes the value of the toggle.",
+            },
+        ],
+    },
+};

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

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

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

@@ -0,0 +1,42 @@
+export const QToggleDocsProps = [
+    {
+        name: "value",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "leftLabel",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "icon",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "disable",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/toggle/index.scss

@@ -0,0 +1,31 @@
+.q-toggle {
+  $root: &;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8em;
+  cursor: pointer;
+
+  &--disabled {
+    cursor: not-allowed;
+
+    #{$root}__label {
+      opacity: 0.5;
+    }
+  }
+
+  &--reversed {
+    flex-direction: row-reverse;
+  }
+
+  &__inner {
+    @include selection(switch);
+  }
+
+  &__label {
+    font-size: 1rem;
+  }
+
+  & * {
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,9 @@
+import { type NativeProps } from "$utils/types";
+export interface QToggleProps extends NativeProps {
+    value?: boolean;
+    label?: string;
+    leftLabel?: boolean;
+    icon?: string;
+    disable?: boolean;
+}
+export declare const QTogglePropsDefaults: QToggleProps;

package/dist/components/toggle/props.js

@@ -0,0 +1,9 @@
+import { NativePropsDefaults } from "$utils/types";
+export const QTogglePropsDefaults = {
+    value: false,
+    label: undefined,
+    leftLabel: false,
+    icon: undefined,
+    disable: false,
+    ...NativePropsDefaults,
+};

package/dist/components/toolbar/QToolbar.svelte

@@ -0,0 +1,39 @@
+<script>import { createClasses, createStyles } from "../../utils/props";
+import { getContext } from "svelte";
+import { isNumber } from "../../utils/types";
+export let inset = false, height = "64px", userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+let ctx = getContext("layout");
+$:
+  classes = createClasses([
+    $ctx?.header && "q-header",
+    "q-toolbar",
+    "surface",
+    $ctx?.header?.fixed && "fixed",
+    inset && "q-toolbar--inset",
+    userClasses
+  ]);
+$:
+  heightStyle = ctx === void 0 ? isNumber(height) ? `${height}px` : height : void 0;
+$:
+  if ($ctx?.header !== void 0) {
+    if (userStyles?.includes("display: none")) {
+      $ctx.header.display = false;
+    } else {
+      $ctx.header.display = true;
+    }
+  }
+$:
+  style = createStyles(
+    {
+      "--header-height": heightStyle
+    },
+    userStyles
+  );
+</script>
+
+<header class={classes} role="toolbar" {...$$restProps} {style}>
+  <nav>
+    <slot />
+  </nav>
+</header>

package/dist/components/toolbar/QToolbar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QToolbarProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inset?: boolean | undefined;
+        height?: string | number | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QToolbarProps = typeof __propDef.props;
+export type QToolbarEvents = typeof __propDef.events;
+export type QToolbarSlots = typeof __propDef.slots;
+export default class QToolbar extends SvelteComponentTyped<QToolbarProps, QToolbarEvents, QToolbarSlots> {
+}
+export {};

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

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

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

@@ -0,0 +1,18 @@
+export const QToolbarDocsProps = [
+    {
+        name: "inset",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "height",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/toolbar/index.scss

@@ -0,0 +1,7 @@
+.q-toolbar {
+  width: 100%;
+  transition: all var(--speed3);
+  &--inset {
+    padding-left: 58px;
+  }
+}

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

@@ -0,0 +1,6 @@
+import type { NativeProps } from "../../utils/types";
+export interface QToolbarProps extends NativeProps {
+    inset: boolean;
+    height: string | number;
+}
+export declare const QToolbarPropsDefaults: QToolbarProps;

package/dist/components/toolbar/props.js

@@ -0,0 +1,6 @@
+import { NativePropsDefaults } from "../../utils/types";
+export const QToolbarPropsDefaults = {
+    inset: false,
+    height: "64px",
+    ...NativePropsDefaults,
+};

package/dist/components/tooltip/QTooltip.svelte

@@ -0,0 +1,15 @@
+<script>import { createClasses } from "../../utils/props";
+export let value = void 0, position = "bottom", userClasses = "";
+export { userClasses as class };
+$:
+  classes = createClasses([
+    "q-tooltip tooltip",
+    value !== false && "active",
+    position,
+    userClasses
+  ]);
+</script>
+
+<div class={classes} {...$$restProps}>
+  <slot />
+</div>

package/dist/components/tooltip/QTooltip.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QTooltipProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: QTooltipProps["value"];
+        position?: "top" | "bottom" | "left" | "right" | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QTooltipProps = typeof __propDef.props;
+export type QTooltipEvents = typeof __propDef.events;
+export type QTooltipSlots = typeof __propDef.slots;
+export default class QTooltip extends SvelteComponentTyped<QTooltipProps, QTooltipEvents, QTooltipSlots> {
+}
+export {};

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

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

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

@@ -0,0 +1,18 @@
+export const QTooltipDocsProps = [
+    {
+        name: "value",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "position",
+        type: '"top" | "right" | "bottom" | "left"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/tooltip/index.scss

@@ -0,0 +1,7 @@
+.q-tooltip {
+  z-index: 9999;
+}
+
+:hover > .q-tooltip.tooltip:not(.active) {
+  opacity: 0;
+}

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

@@ -0,0 +1,6 @@
+import type { NativeProps } from "../../utils/types";
+export interface QTooltipProps extends NativeProps {
+    value?: boolean;
+    position: "top" | "right" | "bottom" | "left";
+}
+export declare const QTooltipPropsDefaults: QTooltipProps;

package/dist/components/tooltip/props.js

@@ -0,0 +1,6 @@
+import { NativePropsDefaults } from "../../utils/types";
+export const QTooltipPropsDefaults = {
+    value: undefined,
+    position: "bottom",
+    ...NativePropsDefaults,
+};

package/dist/composables/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/composables/use-align.d.ts

@@ -0,0 +1,8 @@
+export type JustifyOptions = "left" | "center" | "right" | "between" | "around" | "evenly" | "stretch";
+export type AlignOptions = "top" | "middle" | "bottom";
+export type UseAlignOptions = `${AlignOptions}` | `${JustifyOptions}` | `${AlignOptions} ${JustifyOptions}` | `${JustifyOptions} ${AlignOptions}`;
+export interface UseAlignProps {
+    align?: UseAlignOptions;
+}
+export declare const UseAlignPropsDefaults: UseAlignProps;
+export default function useAlign(align?: UseAlignOptions): string;

package/dist/composables/use-align.js

@@ -0,0 +1,12 @@
+export const UseAlignPropsDefaults = {
+    align: "top left",
+};
+export default function useAlign(align = "top left") {
+    const alignClass = align
+        .split(" ")
+        .map((a) => `${a}-align`)
+        .join(" ");
+    return ["between", "around", "evenly", "stretch"].some((alignment) => align.split(" ").includes(alignment))
+        ? `flex ${alignClass}`
+        : `${alignClass}`;
+}

package/dist/composables/use-index.d.ts

@@ -0,0 +1,2 @@
+export declare function setIndex(index: number): number;
+export declare function getIndex(): number | undefined;