@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,27 +1,87 @@
-import type { NativeProps } from "../../utils/types";
-export interface QInputProps extends NativeProps {
-    bordered: boolean;
+import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Makes the input component more compact.
+     *
+     * @default false
+     */
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    /**
+     * Disables the input, preventing user interaction.
+     *
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * Indicates an error state for the input.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Message to display when the input is in an error state. Overrides the hint prop when the input is in an error state.
+     *
+     * @default undefined
+     */
     errorMessage?: string;
-    filled: boolean;
+    /**
+     * Applies a filled background style to the input.
+     *
+     * @default false
+     */
+    filled?: boolean;
+    /**
+     * Helper text displayed below the input. When the input is in an error state, the helper text will be overwritten by the error message.
+     *
+     * @default undefined
+     */
     hint?: string;
+    /**
+     * Label text for the input field.
+     *
+     * @default undefined
+     */
     label?: string;
-    outlined: boolean;
-    rounded: boolean;
+    /**
+     * Applies an outlined style to the input.
+     *
+     * @default false
+     */
+    outlined?: boolean;
+    /**
+     * Makes the sides of the input round.
+     *
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Current value of the input field. This property is bindable.
+     */
     value: string;
+    /**
+     * Content to be placed before the input wrapper element, usually an icon.
+     *
+     * @default undefined
+     */
+    before?: Snippet;
+    /**
+     * Content to be placed at the start of the input field, usually an icon.
+     *
+     * @default undefined
+     */
+    prepend?: Snippet;
+    /**
+     * Content to be placed at the end of the input field, usually an icon.
+     *
+     * @default undefined
+     */
+    append?: Snippet;
+    /**
+     * Content to be placed after the input wrapper element, usually an icon.
+     *
+     * @default undefined
+     */
+    after?: Snippet;
 }
-export declare const QInputPropsDefaults: {
-    bordered: boolean;
-    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,13 +1 @@
-export const QInputPropsDefaults = {
-    bordered: false,
-    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,184 @@
+@use "sass:string";
+@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;
+  opacity: 0;
+
+  &.q-layout--ready {
+    opacity: 1;
+  }
+}
+
+.q-layout > .q-railbar {
+  position: absolute;
+
+  &.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;
+
+  &.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 string.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;
+}
+
+.q-layout > .q-header ~ .q-layout__content {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.q-layout > .q-footer ~ .q-layout__content {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

package/dist/components/layout/QLayout.svelte

@@ -1,88 +1,187 @@
-<script context="module"></script>
-
-<script>import { setContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import ContextReseter from "../private/ContextReseter.svelte";
-import { writable } from "svelte/store";
-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(
+<script module lang="ts">
+  import { onMount, setContext } from "svelte";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { ContextReseter } from "../private";
+  import { QLayoutCtxName } from "../../utils";
+  import type { QLayoutProps } from "./props";
+
+  export interface AppbarContext {
+    height: number;
+    collapsed: boolean;
+    ready: boolean;
+  }
+
+  export interface DrawerContext {
+    width: number;
+    takesSpace: boolean;
+    ready: boolean;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    view = "hhh lpr fff",
+    content,
+    railbarLeft,
+    railbarRight,
+    drawerLeft,
+    drawerRight,
+    header,
+    footer,
+    onscroll,
+    onresize,
+    children,
+    ...props
+  }: QLayoutProps = $props();
+
+  let layoutEl = $state<HTMLDivElement>();
+  let contentEl = $state<HTMLDivElement>();
+
+  onMount(() => {
+    setTimeout(() => {
+      if (contentEl) {
+        contentEl.style.transition = "margin 0.3s";
+      }
+    }, 100);
+  });
+
+  setContext(QLayoutCtxName.view, {
+    get value() {
+      return view;
+    },
+  });
+
+  const headerCtx = new QContext<AppbarContext>(QLayoutCtxName.header, {
+    height: 0,
+    collapsed: false,
+    ready: false,
+  });
+
+  const footerCtx = new QContext<AppbarContext>(QLayoutCtxName.footer, {
+    height: 0,
+    collapsed: false,
+    ready: false,
+  });
+
+  const leftRailbarCtx = new QContext<DrawerContext>(
+    QLayoutCtxName.railbar.left,
     {
-      "--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`
+      width: 0,
+      takesSpace: false,
+      ready: false,
     },
-    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"
+  const rightRailbarCtx = new QContext<DrawerContext>(
+    QLayoutCtxName.railbar.right,
+    {
+      width: 0,
+      takesSpace: false,
+      ready: false,
+    },
+  );
+
+  const leftDrawerCtx = new QContext<DrawerContext>(
+    QLayoutCtxName.drawer.left,
+    {
+      width: 0,
+      takesSpace: false,
+      ready: false,
     },
-    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"
+  );
+  const rightDrawerCtx = new QContext<DrawerContext>(
+    QLayoutCtxName.drawer.right,
+    {
+      width: 360,
+      takesSpace: false,
+      ready: false,
     },
-    fixed: [top[2], middle[2], bottom[2]].includes("R"),
-    railbar: $$slots.railbarRight === true,
-    drawer: $$slots.drawerRight === true,
-    overlay: false
-  };
-  return {
-    header,
-    footer,
-    drawerLeft,
-    drawerRight
-  };
-}
-let ctx = writable(prepareCtx(view));
-$:
-  $ctx = prepareCtx(view);
-setContext("layout", ctx);
+  );
+
+  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`,
+  );
+
+  const isReady = $derived(
+    (!header ||
+      headerCtx.value.ready ||
+      (layoutEl && !layoutEl.querySelector(".q-header"))) &&
+      (!footer ||
+        footerCtx.value.ready ||
+        (layoutEl && !layoutEl.querySelector(".q-footer"))) &&
+      (!railbarLeft ||
+        leftRailbarCtx.value.ready ||
+        (layoutEl && !layoutEl.querySelector(":scope > .q-railbar--left"))) &&
+      (!railbarRight ||
+        rightRailbarCtx.value.ready ||
+        (layoutEl && !layoutEl.querySelector(":scope > .q-railbar--right"))) &&
+      (!drawerLeft ||
+        leftDrawerCtx.value.ready ||
+        (layoutEl && !layoutEl.querySelector(":scope > .q-drawer--left"))) &&
+      (!drawerRight ||
+        rightDrawerCtx.value.ready ||
+        (layoutEl && !layoutEl.querySelector(":scope > .q-drawer--right"))),
+  );
+
+  function handleDrawerCtx(ctx: QContext<DrawerContext>) {
+    return ctx.value.takesSpace ? ctx.value.width : 0;
+  }
 </script>
 
-<div class={classes} {style} 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
+  bind:this={layoutEl}
+  {...props}
+  class={["q-layout", props.class, isReady && "q-layout--ready"]}
+  style:--left-drawer-width={`${drawerLeft ? leftDrawerCtx.value.width : 0}px`}
+  style:--right-drawer-width={`${drawerRight ? rightDrawerCtx.value.width : 0}px`}
+  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={[
+      QLayoutCtxName.header,
+      QLayoutCtxName.footer,
+      QLayoutCtxName.railbar.left,
+      QLayoutCtxName.railbar.right,
+      QLayoutCtxName.drawer.left,
+      QLayoutCtxName.drawer.right,
+    ]}
+  >
+    <div
+      bind:this={contentEl}
+      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,57 +1,24 @@
-import { SvelteComponent } from "svelte";
-export interface DrawerContext {
-    offset: {
-        top: boolean;
-        bottom: boolean;
-    };
-    fixed: boolean;
-    railbar: boolean;
-    drawer: boolean;
-    overlay: boolean;
-}
+import { SvelteComponentTyped } from "svelte";
 export interface AppbarContext {
-    display: boolean;
-    fixed: boolean;
+    height: number;
+    collapsed: boolean;
+    ready: boolean;
+}
+export interface DrawerContext {
+    width: number;
+    takesSpace: boolean;
+    ready: boolean;
 }
-export type LayoutContext = Readable<{
-    header?: AppbarContext;
-    footer?: AppbarContext;
-    drawerLeft: DrawerContext;
-    drawerRight: DrawerContext;
-}>;
-import type { QLayoutProps } from "./props";
-import type { Readable } from "svelte/store";
 declare const __propDef: {
-    props: {
-        view?: "lhh lpr lfr" | "lhh lpr lff" | "lhh lpr lFr" | "lhh lpr lFf" | "lhh lpr ffr" | "lhh lpr fff" | "lhh lpr fFr" | "lhh lpr fFf" | "lhh lpR lfr" | "lhh lpR lff" | "lhh lpR lFr" | "lhh lpR lFf" | "lhh lpR ffr" | "lhh lpR fff" | "lhh lpR fFr" | "lhh lpR fFf" | "lhh Lpr lfr" | "lhh Lpr lff" | "lhh Lpr lFr" | "lhh Lpr lFf" | "lhh Lpr ffr" | "lhh Lpr fff" | "lhh Lpr fFr" | "lhh Lpr fFf" | "lhh LpR lfr" | "lhh LpR lff" | "lhh LpR lFr" | "lhh LpR lFf" | "lhh LpR ffr" | "lhh LpR fff" | "lhh LpR fFr" | "lhh LpR fFf" | "lhr lpr lfr" | "lhr lpr lff" | "lhr lpr lFr" | "lhr lpr lFf" | "lhr lpr ffr" | "lhr lpr fff" | "lhr lpr fFr" | "lhr lpr fFf" | "lhr lpR lfr" | "lhr lpR lff" | "lhr lpR lFr" | "lhr lpR lFf" | "lhr lpR ffr" | "lhr lpR fff" | "lhr lpR fFr" | "lhr lpR fFf" | "lhr Lpr lfr" | "lhr Lpr lff" | "lhr Lpr lFr" | "lhr Lpr lFf" | "lhr Lpr ffr" | "lhr Lpr fff" | "lhr Lpr fFr" | "lhr Lpr fFf" | "lhr LpR lfr" | "lhr LpR lff" | "lhr LpR lFr" | "lhr LpR lFf" | "lhr LpR ffr" | "lhr LpR fff" | "lhr LpR fFr" | "lhr LpR fFf" | "lHh lpr lfr" | "lHh lpr lff" | "lHh lpr lFr" | "lHh lpr lFf" | "lHh lpr ffr" | "lHh lpr fff" | "lHh lpr fFr" | "lHh lpr fFf" | "lHh lpR lfr" | "lHh lpR lff" | "lHh lpR lFr" | "lHh lpR lFf" | "lHh lpR ffr" | "lHh lpR fff" | "lHh lpR fFr" | "lHh lpR fFf" | "lHh Lpr lfr" | "lHh Lpr lff" | "lHh Lpr lFr" | "lHh Lpr lFf" | "lHh Lpr ffr" | "lHh Lpr fff" | "lHh Lpr fFr" | "lHh Lpr fFf" | "lHh LpR lfr" | "lHh LpR lff" | "lHh LpR lFr" | "lHh LpR lFf" | "lHh LpR ffr" | "lHh LpR fff" | "lHh LpR fFr" | "lHh LpR fFf" | "lHr lpr lfr" | "lHr lpr lff" | "lHr lpr lFr" | "lHr lpr lFf" | "lHr lpr ffr" | "lHr lpr fff" | "lHr lpr fFr" | "lHr lpr fFf" | "lHr lpR lfr" | "lHr lpR lff" | "lHr lpR lFr" | "lHr lpR lFf" | "lHr lpR ffr" | "lHr lpR fff" | "lHr lpR fFr" | "lHr lpR fFf" | "lHr Lpr lfr" | "lHr Lpr lff" | "lHr Lpr lFr" | "lHr Lpr lFf" | "lHr Lpr ffr" | "lHr Lpr fff" | "lHr Lpr fFr" | "lHr Lpr fFf" | "lHr LpR lfr" | "lHr LpR lff" | "lHr LpR lFr" | "lHr LpR lFf" | "lHr LpR ffr" | "lHr LpR fff" | "lHr LpR fFr" | "lHr LpR fFf" | "hhh lpr lfr" | "hhh lpr lff" | "hhh lpr lFr" | "hhh lpr lFf" | "hhh lpr ffr" | "hhh lpr fff" | "hhh lpr fFr" | "hhh lpr fFf" | "hhh lpR lfr" | "hhh lpR lff" | "hhh lpR lFr" | "hhh lpR lFf" | "hhh lpR ffr" | "hhh lpR fff" | "hhh lpR fFr" | "hhh lpR fFf" | "hhh Lpr lfr" | "hhh Lpr lff" | "hhh Lpr lFr" | "hhh Lpr lFf" | "hhh Lpr ffr" | "hhh Lpr fff" | "hhh Lpr fFr" | "hhh Lpr fFf" | "hhh LpR lfr" | "hhh LpR lff" | "hhh LpR lFr" | "hhh LpR lFf" | "hhh LpR ffr" | "hhh LpR fff" | "hhh LpR fFr" | "hhh LpR fFf" | "hhr lpr lfr" | "hhr lpr lff" | "hhr lpr lFr" | "hhr lpr lFf" | "hhr lpr ffr" | "hhr lpr fff" | "hhr lpr fFr" | "hhr lpr fFf" | "hhr lpR lfr" | "hhr lpR lff" | "hhr lpR lFr" | "hhr lpR lFf" | "hhr lpR ffr" | "hhr lpR fff" | "hhr lpR fFr" | "hhr lpR fFf" | "hhr Lpr lfr" | "hhr Lpr lff" | "hhr Lpr lFr" | "hhr Lpr lFf" | "hhr Lpr ffr" | "hhr Lpr fff" | "hhr Lpr fFr" | "hhr Lpr fFf" | "hhr LpR lfr" | "hhr LpR lff" | "hhr LpR lFr" | "hhr LpR lFf" | "hhr LpR ffr" | "hhr LpR fff" | "hhr LpR fFr" | "hhr LpR fFf" | "hHh lpr lfr" | "hHh lpr lff" | "hHh lpr lFr" | "hHh lpr lFf" | "hHh lpr ffr" | "hHh lpr fff" | "hHh lpr fFr" | "hHh lpr fFf" | "hHh lpR lfr" | "hHh lpR lff" | "hHh lpR lFr" | "hHh lpR lFf" | "hHh lpR ffr" | "hHh lpR fff" | "hHh lpR fFr" | "hHh lpR fFf" | "hHh Lpr lfr" | "hHh Lpr lff" | "hHh Lpr lFr" | "hHh Lpr lFf" | "hHh Lpr ffr" | "hHh Lpr fff" | "hHh Lpr fFr" | "hHh Lpr fFf" | "hHh LpR lfr" | "hHh LpR lff" | "hHh LpR lFr" | "hHh LpR lFf" | "hHh LpR ffr" | "hHh LpR fff" | "hHh LpR fFr" | "hHh LpR fFf" | "hHr lpr lfr" | "hHr lpr lff" | "hHr lpr lFr" | "hHr lpr lFf" | "hHr lpr ffr" | "hHr lpr fff" | "hHr lpr fFr" | "hHr lpr fFf" | "hHr lpR lfr" | "hHr lpR lff" | "hHr lpR lFr" | "hHr lpR lFf" | "hHr lpR ffr" | "hHr lpR fff" | "hHr lpR fFr" | "hHr lpR fFf" | "hHr Lpr lfr" | "hHr Lpr lff" | "hHr Lpr lFr" | "hHr Lpr lFf" | "hHr Lpr ffr" | "hHr Lpr fff" | "hHr Lpr fFr" | "hHr Lpr fFf" | "hHr LpR lfr" | "hHr LpR lff" | "hHr LpR lFr" | "hHr LpR lFf" | "hHr LpR ffr" | "hHr LpR fff" | "hHr LpR fFr" | "hHr LpR fFf" | undefined;
-        headerHeight?: string | number | undefined;
-        footerHeight?: string | number | undefined;
-        leftDrawerWidth?: string | number | undefined;
-        rightDrawerWidth?: string | number | undefined;
-        leftRailbarWidth?: string | number | undefined;
-        rightRailbarWidth?: string | number | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        scroll: Event;
-        resize: UIEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        railbarLeft: {};
-        railbarRight: {};
-        drawerLeft: {};
-        drawerRight: {};
-        header: {};
-        footer: {};
-        content: {};
-    };
+    slots: {};
 };
 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> {
+export default class QLayout extends SvelteComponentTyped<QLayoutProps_, QLayoutEvents, QLayoutSlots> {
 }

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

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QLayoutDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+export declare const QLayoutDocs: QComponentDocs;

package/dist/components/layout/docs.js

@@ -1,10 +1,10 @@
-import { QLayoutDocsProps } from "./docs.props";
-export let QLayoutDocs = {
+import { QLayoutDocsProps, QLayoutDocsSnippets } from "./docs.props";
+export const QLayoutDocs = {
     name: "QLayout",
     description: "The QLayout component is designed to be the skeleton of the entire page, with navigational elements such as header, railbars, drawers and footer. This component is not mandatory but it really helps structure the page.",
     docs: {
         props: QLayoutDocsProps,
-        slots: [],
+        snippets: QLayoutDocsSnippets,
         methods: [],
         events: [],
     },

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

@@ -1,8 +1,3 @@
-export declare const QLayoutDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QLayoutDocsProps: ParsedProp[];
+export declare const QLayoutDocsSnippets: ParsedSnippet[];