@quaffui/quaff 0.1.0-prealpha

package/dist/components/layout/index.scss

@@ -0,0 +1,370 @@
+:root {
+  --header-height: 64px;
+  --footer-height: 80px;
+
+  --left-railbar-width: 88px;
+  --right-railbar-width: 88px;
+
+  --left-drawer-width: 300px;
+  --right-drawer-width: 300px;
+}
+
+.q-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+
+  & > :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+    height: 100%;
+    overflow: auto;
+    transition: padding var(--speed3);
+  }
+}
+
+.q-layout > .q-header {
+  z-index: 103;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: auto;
+  left: 0px;
+  height: var(--header-height);
+  min-height: unset;
+  border-radius: 0;
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
+
+  &.fixed {
+    position: fixed;
+
+    &::before {
+      margin: 0;
+    }
+  }
+}
+
+.q-layout > .q-footer {
+  z-index: 103;
+  position: absolute;
+  top: auto;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  height: var(--footer-height);
+  min-height: unset;
+  border-radius: 0;
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
+
+  &.fixed {
+    position: fixed;
+
+    &::before {
+      margin: 0;
+    }
+  }
+
+  & ~ :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+    padding-bottom: var(--footer-height);
+  }
+}
+
+.q-layout > .q-railbar {
+  z-index: 102;
+  position: absolute;
+  top: 0px;
+  right: auto;
+  bottom: 0px;
+  left: auto;
+  height: 100%;
+  overflow: auto;
+  transition: all var(--speed3);
+
+  &.above {
+    z-index: 105;
+  }
+
+  &.fixed {
+    position: fixed;
+  }
+
+  &.left {
+    left: 0px;
+    width: var(--left-railbar-width);
+
+    &.bordered {
+      border-right: 0.0625rem solid var(--outline);
+    }
+  }
+
+  &.right {
+    right: 0px;
+    width: var(--right-railbar-width);
+
+    &.bordered {
+      border-left: 0.0625rem solid var(--outline);
+    }
+  }
+
+  & > .q-list > .q-item {
+    flex-direction: column;
+    border-radius: 2rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    gap: 0.25em;
+
+    &.wave::after {
+      all: unset;
+    }
+
+    & > .q-item__section {
+      justify-content: start;
+    }
+
+    & > i {
+      transition: var(--speed1) padding linear;
+      padding-inline: 0.25em;
+    }
+
+    &:is(:hover, :focus, .active) > i {
+      background-color: var(--secondary-container);
+      color: var(--on-secondary-container);
+      padding: 0 1rem;
+      font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24;
+    }
+  }
+}
+
+.q-layout > .q-drawer {
+  //TODO Problems with z-index between multiple layouts
+  z-index: 101;
+  border-radius: 0;
+
+  &.above {
+    z-index: 104;
+  }
+
+  &.border-radius {
+    &__left {
+      &--top {
+        border-top-left-radius: 16px;
+      }
+      &--bottom {
+        border-bottom-left-radius: 16px;
+      }
+    }
+    &__right {
+      &--top {
+        border-top-right-radius: 16px;
+      }
+      &--bottom {
+        border-bottom-right-radius: 16px;
+      }
+    }
+  }
+
+  & .q-list > .q-item.q-link {
+    border-radius: 2rem;
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      border-radius: inherit;
+      background: var(--secondary-container);
+      z-index: -1;
+      transform: scaleX(0.32);
+      transition-duration: 0.2s;
+      transition-property: transform, opacity;
+      transition-timing-function: linear;
+    }
+
+    &.active {
+      color: var(--on-secondary-container);
+
+      &::before {
+        opacity: 1;
+        transform: scaleX(1);
+      }
+    }
+
+    &:hover {
+      background-color: var(--on-surface-variant-2);
+      font-variation-settings: "GRAD" 50;
+    }
+  }
+}
+
+// Offsets
+$L_Railbar: var(--left-railbar-width);
+$R_Railbar: var(--right-railbar-width);
+$LR_Railbar: calc(#{$L_Railbar} + #{$R_Railbar});
+
+$L_Drawer: var(--left-drawer-width);
+$R_Drawer: var(--right-drawer-width);
+$LR_Drawer: calc(#{$L_Drawer} + #{$R_Drawer});
+
+$L_Full: calc(#{$L_Railbar} + #{$L_Drawer});
+$R_Full: calc(#{$R_Railbar} + #{$R_Drawer});
+
+$L_Railbar-R_Drawer: calc(#{$L_Railbar} + #{$R_Drawer});
+$R_Railbar-L_Drawer: calc(#{$R_Railbar} + #{$L_Drawer});
+
+$L_Full-R_Railbar: calc(#{$L_Full} + #{$R_Railbar});
+$L_Full-R_Drawer: calc(#{$L_Full} + #{$R_Drawer});
+$R_Full-L_Railbar: calc(#{$R_Full} + #{$L_Railbar});
+$R_Full-L_Drawer: calc(#{$R_Full} + #{$L_Drawer});
+
+$Full: calc(#{$L_Full} + #{$R_Full});
+
+$elements: (
+  top: "header",
+  bottom: "footer",
+);
+
+@function without($toSub) {
+  @return calc(100% - #{$toSub});
+}
+
+// Offset for content
+.q-layout {
+  & > .q-header ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    padding-top: var(--header-height);
+  }
+  & > .q-footer ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    padding-bottom: var(--footer-height);
+  }
+  & > .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    padding-left: $L_Drawer;
+  }
+  & > .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    padding-right: $R_Drawer;
+  }
+  & > .q-railbar.left:not([style="display: none"]) {
+    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+      padding-left: $L_Railbar;
+    }
+
+    & ~ .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+      padding-left: $L_Full;
+    }
+  }
+  & > .q-railbar.right:not([style="display: none"]) {
+    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+      padding-right: $R_Railbar;
+    }
+
+    & ~ .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+      padding-right: $R_Full;
+    }
+  }
+}
+
+// Inline offset for header, footer and drawers
+.q-layout {
+  @each $pos, $el in $elements {
+    & > .q-railbar.left:not([style="display: none"]) {
+      &:not(.offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.left {
+        left: $L_Railbar;
+      }
+
+      & ~ .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+        left: $L_Full;
+      }
+    }
+    & > .q-railbar.right:not([style="display: none"]) {
+      &:not(.offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.right {
+        right: $R_Railbar;
+      }
+
+      & ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+        right: $R_Full;
+      }
+    }
+
+    & > .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      left: $L_Drawer;
+    }
+    & > .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      right: $R_Drawer;
+    }
+  }
+}
+
+// Width for header and footer
+.q-layout {
+  @each $pos, $el in $elements {
+    & > .q-railbar.left:not(.offset-#{$pos}, [style="display: none"]) {
+      // Left railbar
+      & ~ .q-#{$el} {
+        width: without($L_Railbar);
+      }
+
+      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+        @include include-drawers(without($L_Railbar), $pos, $el);
+      }
+
+      & ~ .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+        // Left railbar + Right railbar
+        & ~ .q-#{$el} {
+          width: without($LR_Railbar);
+        }
+
+        & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+          @include include-drawers(without($LR_Railbar), $pos, $el);
+        }
+      }
+    }
+
+    & > .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+      // Right railbar
+      & ~ .q-#{$el} {
+        width: without($R_Railbar);
+      }
+
+      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+        @include include-drawers(without($R_Railbar), $pos, $el);
+      }
+    }
+
+    & > .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      @include include-drawers(100%, $pos, $el);
+    }
+  }
+}
+
+// Height for railbars and drawers
+.q-layout {
+  & > .q-railbar,
+  & > .q-drawer {
+    &.offset-top.offset-bottom {
+      height: calc(100% - var(--header-height) - var(--footer-height));
+    }
+  }
+
+  @each $pos, $el in $elements {
+    & > .q-railbar,
+    & > .q-drawer {
+      &.offset-#{$pos} {
+        #{$pos}: var(--#{$el}-height);
+        height: calc(100% - var(--#{$el}-height));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import type { NativeProps } from "../../utils/types";
+export type QLayoutViewOptions = `${"l" | "h"}${"h" | "H"}${"r" | "h"} ${"l" | "L"}${"p"}${"r" | "R"} ${"l" | "f"}${"f" | "F"}${"r" | "f"}`;
+export interface QLayoutProps extends NativeProps {
+    /**
+     * The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.
+     * See <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar's explanation on the view prop</a>.
+     * @default "hhh lpr fff"
+     */
+    view: QLayoutViewOptions;
+    /**
+     * The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default 64px
+     */
+    headerHeight: string | number;
+    /**
+     * The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default 80px
+     */
+    footerHeight: string | number;
+    /**
+     * The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default 300px
+     */
+    leftDrawerWidth: string | number;
+    /**
+     * The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default 300px
+     */
+    rightDrawerWidth: string | number;
+    /**
+     * The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default 88px
+     */
+    leftRailbarWidth: string | number;
+    /**
+     * The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
+     * @default 88px
+     */
+    rightRailbarWidth: string | number;
+}
+export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";

package/dist/components/layout/props.js

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

package/dist/components/list/QItem.svelte

@@ -0,0 +1,60 @@
+<script>import QSeparator from "../separator/QSeparator.svelte";
+import useRouterLink, { isRouteActive } from "../../composables/use-router-link";
+import { createClasses } from "../../utils/props";
+import { getContext, setContext } from "svelte";
+import { Quaff } from "../../stores/Quaff";
+import { writable } from "svelte/store";
+export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = void 0, replace = false, userClasses = void 0;
+export { userClasses as class };
+let hasMultiplLines = writable(false);
+setContext("hasMultipleLines", hasMultiplLines);
+$:
+  ({ hasLink, linkAttributes, linkClasses } = useRouterLink({
+    href,
+    to,
+    disable,
+    activeClass,
+    replace
+  }));
+$:
+  separatorOptions = getContext("separator");
+$:
+  isActionable = clickable === true || hasLink === true || tag === "label";
+$:
+  isClickable = disable !== true && isActionable === true;
+$:
+  isActive = isRouteActive($Quaff.router, to);
+$:
+  classes = createClasses([
+    "q-item flex middle-align",
+    $hasMultiplLines && "multiline",
+    dense && "dense",
+    hasLink && active && "q-item--active",
+    hasLink && active && activeClass,
+    isActive && "active",
+    isClickable && "wave",
+    linkClasses,
+    userClasses
+  ]);
+$:
+  attributes = {
+    class: classes,
+    tabindex: isClickable == true ? Number(tabindex) || 0 : void 0,
+    "aria-disabled": isActionable === true && disable === true ? true : void 0,
+    ...$$restProps
+  };
+</script>
+
+{#if separatorOptions !== undefined}
+  <QSeparator {...separatorOptions} />
+{/if}
+{#if linkAttributes.href !== undefined}
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <a {...attributes} {...linkAttributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
+    <slot />
+  </a>
+{:else}
+  <div {...attributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
+    <slot />
+  </div>
+{/if}

package/dist/components/list/QItem.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QItemProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: string | undefined;
+        active?: boolean | undefined;
+        clickable?: boolean | undefined;
+        dense?: boolean | undefined;
+        tabindex?: string | number | undefined;
+        href?: QItemProps["href"];
+        to?: QItemProps["to"];
+        disable?: boolean | undefined;
+        activeClass?: QItemProps["activeClass"];
+        replace?: boolean | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QItemProps = typeof __propDef.props;
+export type QItemEvents = typeof __propDef.events;
+export type QItemSlots = typeof __propDef.slots;
+export default class QItem extends SvelteComponentTyped<QItemProps, QItemEvents, QItemSlots> {
+}
+export {};

package/dist/components/list/QItemSection.svelte

@@ -0,0 +1,47 @@
+<script>import { createClasses } from "../../utils/props";
+import { getContext } from "svelte";
+export let type = "content", userClasses = void 0;
+export { userClasses as class };
+$:
+  ctx = getContext("hasMultipleLines");
+$:
+  if (type === "content") {
+    $ctx = $$slots.headline && [$$slots.line1, $$slots.line2, $$slots.line3].filter(Boolean).length >= 2;
+  }
+$:
+  classes = createClasses([`q-item__section `, `q-item__section--${type}`, userClasses]);
+</script>
+
+<div class={classes} {...$$restProps}>
+  {#if type === "content"}
+    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean) === false}
+      <slot />
+    {/if}
+    {#if $$slots.headline}
+      <div class="body-large on-surface-text">
+        <slot name="headline" />
+      </div>
+    {/if}
+    <div class="body-medium on-surface-variant-text">
+      {#if $$slots.line1}
+        <slot name="line1" />
+      {/if}
+    </div>
+    {#if $$slots.line2}
+      <div class="body-medium on-surface-variant-text">
+        <slot name="line2" />
+      </div>
+    {/if}
+    {#if $$slots.line3}
+      <div class="body-medium on-surface-variant-text">
+        <slot name="line3" />
+      </div>
+    {/if}
+  {:else if type === "trailingText"}
+    <div class="label-small on-surface-variant-text">
+      <slot />
+    </div>
+  {:else}
+    <slot />
+  {/if}
+</div>

package/dist/components/list/QItemSection.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QItemSectionProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: import("./props").QItemSectionTypes | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        headline: {};
+        line1: {};
+        line2: {};
+        line3: {};
+    };
+};
+export type QItemSectionProps = typeof __propDef.props;
+export type QItemSectionEvents = typeof __propDef.events;
+export type QItemSectionSlots = typeof __propDef.slots;
+export default class QItemSection extends SvelteComponentTyped<QItemSectionProps, QItemSectionEvents, QItemSectionSlots> {
+}
+export {};

package/dist/components/list/QList.svelte

@@ -0,0 +1,23 @@
+<script>import { setIndex } from "../../composables/use-index";
+import { createClasses } from "../../utils/props";
+import { onMount, setContext } from "svelte";
+export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = void 0;
+export { userClasses as class };
+let listElement;
+onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.remove());
+$:
+  setContext("separator", separator === true ? separatorOptions : void 0);
+$:
+  classes = createClasses([
+    "q-list",
+    bordered && "border",
+    dense && "dense",
+    padding && "q-py-sm",
+    roundedBorders && "rounded-borders",
+    userClasses
+  ]);
+</script>
+
+<svelte:element this={tag} class={classes} {...$$restProps} bind:this={listElement} on:scroll>
+  <slot />
+</svelte:element>

package/dist/components/list/QList.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QListProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        bordered?: boolean | undefined;
+        roundedBorders?: boolean | undefined;
+        dense?: boolean | undefined;
+        separator?: boolean | undefined;
+        separatorOptions?: {
+            spacing?: "sm" | "md" | "lg" | "none" | undefined;
+            inset?: boolean | undefined;
+            color?: string | undefined;
+            size?: string | undefined;
+            text?: string | undefined;
+            textAlign?: "top" | "bottom" | "left" | "right" | "center" | "middle" | undefined;
+        } | undefined;
+        padding?: boolean | undefined;
+        tag?: QListProps["tag"];
+        class?: string | undefined;
+    };
+    events: {
+        scroll: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QListProps = typeof __propDef.props;
+export type QListEvents = typeof __propDef.events;
+export type QListSlots = typeof __propDef.slots;
+export default class QList extends SvelteComponentTyped<QListProps, QListEvents, QListSlots> {
+}
+export {};

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

@@ -0,0 +1,40 @@
+export declare const QSeparatorPropsVertical: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QSeparatorPropsHorizontal: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QListDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QItemDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QItemSectionDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];