@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 901937b41d79099a96a3713827911b68
+// @quaffHash ebdc5d6efd286c109289cb91b6a1be02
 export const QInputDocsProps = [
     {
         name: "dense",
@@ -81,4 +81,36 @@ export const QInputDocsProps = [
         description: "",
         default: "",
     },
+    {
+        name: "before",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "prepend",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "append",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "after",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     dense?: boolean;
@@ -11,16 +12,8 @@ export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement>
     outlined?: boolean;
     rounded?: boolean;
     value: string;
+    before?: Snippet;
+    prepend?: Snippet;
+    append?: Snippet;
+    after?: Snippet;
 }
-export declare const QInputPropsDefaults: {
-    dense: boolean;
-    disable: boolean;
-    error: boolean;
-    errorMessage: undefined;
-    filled: boolean;
-    hint: undefined;
-    label: undefined;
-    outlined: boolean;
-    rounded: boolean;
-    value: string;
-};

package/dist/components/input/props.js

@@ -1,12 +1 @@
-export const QInputPropsDefaults = {
-    dense: false,
-    disable: false,
-    error: false,
-    errorMessage: undefined,
-    filled: false,
-    hint: undefined,
-    label: undefined,
-    outlined: false,
-    rounded: false,
-    value: "",
-};
+export {};

package/dist/components/layout/QLayout.scss

@@ -0,0 +1,178 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-layout {
+  z-index: 0;
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  min-width: 100%;
+
+  overflow: hidden;
+
+  border-radius: inherit;
+}
+
+.q-layout > .q-railbar {
+  position: absolute;
+
+  transition:
+    top variables.$speed3,
+    bottom variables.$speed3;
+
+  &.q-railbar--offset-top {
+    // Put the railbar under the header to avoid hiding its box-shadow
+    z-index: 3;
+  }
+
+  @each $pos in ("top", "bottom") {
+    &.q-railbar--offset-#{$pos} {
+      #{$pos}: var(--offset-#{$pos}, 0);
+    }
+  }
+
+  & > .q-list {
+    @include mixins.gap("sm");
+
+    & > .q-item {
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      @include mixins.padding("x-sm");
+      @include mixins.gap("xs");
+
+      border-radius: 2rem;
+
+      &.q-link::after {
+        all: unset;
+      }
+
+      & > .q-item__section {
+        justify-content: start;
+      }
+
+      & > i {
+        @include mixins.padding("a-xs");
+        transition: padding variables.$speed1 linear;
+      }
+
+      &:is(:hover, :focus, .q-item--active) > i {
+        @include mixins.padding("x-lg");
+
+        background-color: var(--secondary-container);
+        color: var(--on-secondary-container);
+
+        font-variation-settings:
+          "FILL" 1,
+          "wght" 400,
+          "opsz" 24;
+      }
+    }
+  }
+}
+
+.q-layout > .q-drawer {
+  border-radius: 0;
+
+  transition:
+    top variables.$speed3,
+    bottom variables.$speed3,
+    transform variables.$speed3;
+
+  &.q-drawer--offset-top {
+    // Put the railbar under the header to avoid hiding its box-shadow
+    z-index: 2;
+  }
+
+  @function shouldHaveRadius($pos) {
+    @if not list-index(("top", "bottom"), $pos) {
+      @error 'The position "#{$pos}" is incorrect, should be "top" or "bottom"';
+    }
+
+    @return unquote(
+      ":is(.q-drawer--overlay,.q-drawer--offset-#{$pos},:not(:has(~ .q-header)),:has(~ .q-header--collapsed))"
+    );
+  }
+
+  $x-pos: "left", "right";
+  $y-pos: "top", "bottom";
+
+  @each $side in $x-pos {
+    &.q-drawer--#{$side} {
+      #{$side}: var(--#{$side}-railbar-width, 0);
+    }
+  }
+
+  @each $pos in $y-pos {
+    @each $side in $x-pos {
+      &:not(.q-drawer--#{$side})#{shouldHaveRadius($pos)} {
+        border-#{$pos}-#{$side}-radius: 1rem;
+      }
+    }
+
+    &.q-drawer--offset-#{$pos} {
+      #{$pos}: var(--offset-#{$pos}, 0);
+    }
+  }
+
+  & .q-list > .q-item.q-link {
+    border-radius: 2rem;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+
+      z-index: -1;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      background-color: var(--secondary-container);
+      opacity: 0;
+
+      border-radius: inherit;
+
+      transform: scaleX(0.32);
+
+      transition:
+        transform variables.$speed2,
+        opacity variables.$speed2,
+        top variables.$speed3,
+        bottom variables.$speed3,
+        left variables.$speed3;
+    }
+
+    &.q-item--active {
+      color: var(--on-secondary-container);
+
+      &::before {
+        opacity: 1;
+        transform: scaleX(1);
+      }
+    }
+  }
+}
+
+// Offset for drawer with railbar
+@each $side in ("left", "right") {
+  .q-railbar.q-railbar--#{$side}:not([style="display: none"]) ~ .q-drawer.q-drawer--#{$side} {
+    #{$side}: var(--#{$side}-railbar-width);
+  }
+
+  // Reset railbar width
+  .q-railbar.q-railbar--#{$side}[style="display: none"] ~ .q-drawer.q-drawer--#{$side} {
+    --#{$side}-railbar-width: 0px;
+  }
+}
+
+.q-layout > .q-layout__content {
+  height: calc(100% - var(--offset-top) - var(--offset-bottom));
+  overflow: auto;
+  transition: margin variables.$speed3;
+}

package/dist/components/layout/QLayout.svelte

@@ -1,88 +1,108 @@
-<script context="module">import { createStyles, createClasses } from "../../utils";
-import { setContext } from "svelte";
-import { writable } from "svelte/store";
-import ContextReseter from "../private/ContextReseter.svelte";
+<script context="module" lang="ts">
+  import { setContext } from "svelte";
+  import QContext from "../../classes/QContext.svelte";
+  import ContextReseter from "../private/ContextReseter.svelte";
 </script>
 
-<script>export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  style = createStyles(
-    {
-      "--header-height": isNaN(Number(headerHeight)) ? headerHeight : `${headerHeight}px`,
-      "--footer-height": isNaN(Number(footerHeight)) ? footerHeight : `${footerHeight}px`,
-      "--left-railbar-width": isNaN(Number(leftRailbarWidth)) ? leftRailbarWidth : `${leftRailbarWidth}px`,
-      "--right-railbar-width": isNaN(Number(rightRailbarWidth)) ? rightRailbarWidth : `${rightRailbarWidth}px`,
-      "--left-drawer-width": isNaN(Number(leftDrawerWidth)) ? leftDrawerWidth : `${leftDrawerWidth}px`,
-      "--right-drawer-width": isNaN(Number(rightDrawerWidth)) ? rightDrawerWidth : `${rightDrawerWidth}px`
-    },
-    userStyles
-  );
-$:
-  classes = createClasses(["q-layout", userClasses]);
-function prepareCtx(viewProp) {
-  const [top, middle, bottom] = viewProp.split(" ");
-  const header = $$slots.header ? {
-    display: true,
-    fixed: top.includes("H")
-  } : void 0;
-  const footer = $$slots.footer ? {
-    display: true,
-    fixed: bottom.includes("F")
-  } : void 0;
-  const drawerLeft = {
-    offset: {
-      top: $$slots.header && top[0].toLowerCase() === "h",
-      bottom: $$slots.footer && bottom[0].toLowerCase() === "f"
-    },
-    fixed: [top[0], middle[0], bottom[0]].includes("L"),
-    railbar: $$slots.railbarLeft === true,
-    drawer: $$slots.drawerLeft === true,
-    overlay: false
-  };
-  const drawerRight = {
-    offset: {
-      top: $$slots.header && top[2].toLowerCase() === "h",
-      bottom: $$slots.footer && bottom[2].toLowerCase() === "f"
-    },
-    fixed: [top[2], middle[2], bottom[2]].includes("R"),
-    railbar: $$slots.railbarRight === true,
-    drawer: $$slots.drawerRight === true,
-    overlay: false
-  };
-  return {
+<script lang="ts">
+  let {
+    view = "hhh lpr fff",
+    content,
+    railbarLeft,
+    railbarRight,
+    drawerLeft,
+    drawerRight,
     header,
     footer,
-    drawerLeft,
-    drawerRight
-  };
-}
-let ctx = writable(prepareCtx(view));
-$:
-  $ctx = prepareCtx(view);
-setContext("layout", ctx);
+    onscroll,
+    onresize,
+    children,
+    ...props
+  } = $props();
+  setContext("view", {
+    get value() {
+      return view;
+    },
+  });
+  const headerCtx = new QContext("QHeader", {
+    height: 0,
+    collapsed: false,
+  });
+  const footerCtx = new QContext("QFooter", {
+    height: 0,
+    collapsed: false,
+  });
+  const leftRailbarCtx = new QContext("QRailbar-left", {
+    width: 0,
+    takesSpace: false,
+  });
+  const rightRailbarCtx = new QContext("QRailbar-right", {
+    width: 0,
+    takesSpace: false,
+  });
+  const leftDrawerCtx = new QContext("QDrawer-left", {
+    width: 0,
+    takesSpace: false,
+  });
+  const rightDrawerCtx = new QContext("QDrawer-right", {
+    width: 360,
+    takesSpace: false,
+  });
+  const topOffset = $derived(
+    !header || headerCtx.value.collapsed ? 0 : headerCtx.value.height,
+  );
+  const bottomOffset = $derived(
+    !footer || footerCtx.value.collapsed ? 0 : footerCtx.value.height,
+  );
+  const leftOffset = $derived(
+    handleDrawerCtx(leftRailbarCtx) + handleDrawerCtx(leftDrawerCtx),
+  );
+  const rightOffset = $derived(
+    handleDrawerCtx(rightRailbarCtx) + handleDrawerCtx(rightDrawerCtx),
+  );
+  const contentMargin = $derived(
+    `${header ? topOffset : 0}px ${rightOffset}px ${footer ? bottomOffset : 0}px ${leftOffset}px`,
+  );
+  function handleDrawerCtx(ctx) {
+    return ctx.value.takesSpace ? ctx.value.width : 0;
+  }
 </script>
 
-<div class={classes} {style} {...$$restProps} on:scroll on:resize>
-  {#if $$slots.railbarLeft}
-    <slot name="railbarLeft" />
-  {/if}
-  {#if $$slots.railbarRight}
-    <slot name="railbarRight" />
-  {/if}
-  {#if $$slots.drawerLeft}
-    <slot name="drawerLeft" />
-  {/if}
-  {#if $$slots.drawerRight}
-    <slot name="drawerRight" />
-  {/if}
-  {#if $$slots.header}
-    <slot name="header" />
-  {/if}
-  {#if $$slots.footer}
-    <slot name="footer" />
-  {/if}
-  <ContextReseter keys="layout">
-    <slot name="content" />
+<div
+  {...props}
+  class="q-layout{props.class ? ` ${props.class}` : ''}"
+  style:--left-railbar-width={`${railbarLeft ? leftRailbarCtx.value.width : 0}px`}
+  style:--right-railbar-width={`${railbarRight ? rightRailbarCtx.value.width : 0}px`}
+  style:--offset-top={`${topOffset}px`}
+  style:--offset-right={`${rightOffset}px`}
+  style:--offset-bottom={`${bottomOffset}px`}
+  style:--offset-left={`${leftOffset}px`}
+  {onscroll}
+  {onresize}
+>
+  {@render railbarLeft?.()}
+  {@render railbarRight?.()}
+  {@render drawerLeft?.()}
+  {@render drawerRight?.()}
+  {@render header?.()}
+  {@render footer?.()}
+
+  <ContextReseter
+    keys={[
+      "QHeader",
+      "QFooter",
+      "QRailbar-left",
+      "QRailbar-right",
+      "QDrawer-left",
+      "QDrawer-right",
+    ]}
+  >
+    <div class="q-layout__content" style:margin={contentMargin}>
+      {#if content}
+        {@render content()}
+      {:else}
+        {@render children?.()}
+      {/if}
+    </div>
   </ContextReseter>
 </div>

package/dist/components/layout/QLayout.svelte.d.ts

@@ -1,7 +1,5 @@
-import { SvelteComponent } from "svelte";
 import type { QLayoutProps } from "./props";
-import type { Readable } from "svelte/store";
-export interface DrawerContext {
+export interface DrawerContextLegacy {
     offset: {
         top: boolean;
         bottom: boolean;
@@ -12,47 +10,22 @@ export interface DrawerContext {
     overlay: boolean;
 }
 export interface AppbarContext {
+    height: number;
+    collapsed: boolean;
+}
+export interface DrawerContext {
+    width: number;
+    takesSpace: boolean;
+}
+export interface AppbarContextLegacy {
     display: boolean;
     fixed: boolean;
 }
-export type LayoutContext = Readable<{
-    header?: AppbarContext;
-    footer?: AppbarContext;
-    drawerLeft: DrawerContext;
-    drawerRight: DrawerContext;
-}>;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        view?: QLayoutProps["view"];
-        headerHeight?: QLayoutProps["headerHeight"];
-        footerHeight?: QLayoutProps["footerHeight"];
-        leftDrawerWidth?: QLayoutProps["leftDrawerWidth"];
-        rightDrawerWidth?: QLayoutProps["rightDrawerWidth"];
-        leftRailbarWidth?: QLayoutProps["leftRailbarWidth"];
-        rightRailbarWidth?: QLayoutProps["rightDrawerWidth"];
-        class?: string | null | undefined;
-        style?: string | null | undefined;
-    };
-    events: {
-        scroll: Event;
-        resize: UIEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        railbarLeft: {};
-        railbarRight: {};
-        drawerLeft: {};
-        drawerRight: {};
-        header: {};
-        footer: {};
-        content: {};
-    };
+export type LayoutContext = {
+    header?: AppbarContextLegacy;
+    footer?: AppbarContextLegacy;
+    drawerLeft: DrawerContextLegacy;
+    drawerRight: DrawerContextLegacy;
 };
-type QLayoutProps_ = typeof __propDef.props;
-export { QLayoutProps_ as QLayoutProps };
-export type QLayoutEvents = typeof __propDef.events;
-export type QLayoutSlots = typeof __propDef.slots;
-export default class QLayout extends SvelteComponent<QLayoutProps, QLayoutEvents, QLayoutSlots> {
-}
+declare const QLayout: import("svelte").Component<QLayoutProps, {}, "">;
+export default QLayout;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash cce7c92a645afcabe17eef05e3f16990
+// @quaffHash 0dcefb45962cef3881e6d5b3d3ec1666
 export const QLayoutDocsProps = [
     {
         name: "view",
@@ -57,4 +57,60 @@ export const QLayoutDocsProps = [
         description: 'The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",
     },
+    {
+        name: "content",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "railbarLeft",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "railbarRight",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "drawerLeft",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "drawerRight",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "header",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "footer",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 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, HTMLAttributes<HTMLDivElement> {
@@ -38,5 +39,12 @@ export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement
      * @default 88px
      */
     rightRailbarWidth?: string | number;
+    content?: Snippet;
+    railbarLeft?: Snippet;
+    railbarRight?: Snippet;
+    drawerLeft?: Snippet;
+    drawerRight?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
 }
 export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";

package/dist/components/list/QItem.scss

@@ -0,0 +1,61 @@
+@use "$css/mixins";
+
+.q-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 3.5rem;
+  margin-top: 0 !important;
+  margin: 0;
+  padding: 0.5rem 1.5rem 0.5rem 1rem;
+  gap: 1rem;
+
+  &.q-link {
+    padding: 0.5rem 1.5rem 0.5rem 1rem;
+
+    &:is(:hover, :focus):not([aria-disabled])::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--on-surface);
+      border-radius: inherit;
+    }
+
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
+    }
+
+    &.multiline {
+      padding-block: 0.75rem;
+    }
+
+    &::after {
+      background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
+    }
+  }
+
+  &--multiline {
+    padding-block: 0.75rem;
+
+    & > .q-item__section:is(.avatar, .icon, .thumbnail, .trailingIcon, .trailingText) {
+      align-self: start;
+    }
+
+    > .q-item__section.video {
+      margin-left: -1rem !important;
+      padding-block: 0;
+    }
+  }
+}