@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

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"></script>
+<script context="module" lang="ts">
+  import { setContext } from "svelte";
+  import QContext from "../../classes/QContext.svelte";
+  import ContextReseter from "../private/ContextReseter.svelte";
+</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(
-    {
-      "--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} 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,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-export interface DrawerContext {
+import type { QLayoutProps } from "./props";
+export interface DrawerContextLegacy {
     offset: {
         top: boolean;
         bottom: boolean;
@@ -10,48 +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;
-}>;
-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;
-    };
-    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.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,5 +1,5 @@
 import { QLayoutDocsProps } from "./docs.props";
-export let QLayoutDocs = {
+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: {

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

@@ -1,8 +1,10 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 0dcefb45962cef3881e6d5b3d3ec1666
 export const QLayoutDocsProps = [
     {
         name: "view",
         type: "QLayoutViewOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.\nSee <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"',
@@ -10,7 +12,7 @@ export const QLayoutDocsProps = [
     {
         name: "headerHeight",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "64px",
@@ -18,7 +20,7 @@ export const QLayoutDocsProps = [
     {
         name: "footerHeight",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "80px",
@@ -26,7 +28,7 @@ export const QLayoutDocsProps = [
     {
         name: "leftDrawerWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "300px",
@@ -34,7 +36,7 @@ export const QLayoutDocsProps = [
     {
         name: "rightDrawerWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "300px",
@@ -42,7 +44,7 @@ export const QLayoutDocsProps = [
     {
         name: "leftRailbarWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",
@@ -50,9 +52,65 @@ export const QLayoutDocsProps = [
     {
         name: "rightRailbarWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         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,41 +1,50 @@
-import type { NativeProps } from "../../utils/types";
+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 {
+export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * 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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    rightRailbarWidth?: string | number;
+    content?: Snippet;
+    railbarLeft?: Snippet;
+    railbarRight?: Snippet;
+    drawerLeft?: Snippet;
+    drawerRight?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
 }
 export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";