@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/components/input/QInput.svelte

@@ -1,13 +1,37 @@
-<script>let focus = false;
-$:
-  active = value || focus;
-let slotPrependWidth = 0;
-export let dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = "";
-export { userClasses as class };
+<script lang="ts">
+  let focus = $state(false);
+  let snippetPrependWidth = $state(0);
+  let {
+    dense = false,
+    disable = false,
+    error = false,
+    errorMessage = void 0,
+    filled = false,
+    hint = void 0,
+    label = void 0,
+    outlined = false,
+    rounded = false,
+    before = void 0,
+    prepend = void 0,
+    append = void 0,
+    after = void 0,
+    value = $bindable(),
+    ...props
+  } = $props();
+  const active = $derived(value || focus);
+  function onFocus(e) {
+    focus = true;
+    props.onfocus?.(e);
+  }
+  function onBlur(e) {
+    focus = false;
+    props.onblur?.(e);
+  }
 </script>
 
 <div
-  class="q-input q-field {userClasses}"
+  {...props}
+  class="q-field{props.class ? ` ${props.class}` : ''} q-input"
   class:q-field--default={!outlined && !rounded && !filled}
   class:q-field--outlined={outlined}
   class:q-field--rounded={rounded}
@@ -17,40 +41,43 @@ export { userClasses as class };
   class:q-field--active={active}
   class:q-field--focus={focus}
   class:q-field--label={label}
-  class:q-field--slot-append={$$slots.append}
-  class:q-field--slot-prepend={$$slots.prepend}
+  class:q-field--snippet-append={!!append}
+  class:q-field--snippet-prepend={!!prepend}
   class:q-field--disable={disable}
   class:q-field--error={error}
-  style:--slot-prepend-width="{slotPrependWidth}px"
-  {...$$restProps}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
+  aria-disabled={disable || undefined}
 >
-  {#if $$slots.before}
-    <div class="q-field__slot-before">
-      <slot name="before" />
+  {#if before}
+    <div class="q-field__snippet-before">
+      {@render before()}
     </div>
   {/if}
 
   <div class="q-field__inner">
     <label class="q-field__wrapper">
-      {#if $$slots.prepend}
-        <div class="q-field__slot-prepend" bind:clientWidth={slotPrependWidth}>
-          <slot name="prepend" />
+      {#if prepend}
+        <div
+          class="q-field__snippet-prepend"
+          bind:clientWidth={snippetPrependWidth}
+        >
+          {@render prepend()}
         </div>
       {/if}
       <input
         class="q-field__input"
         bind:value
         placeholder=""
-        on:focus={() => (focus = true)}
-        on:blur={() => (focus = false)}
+        onfocus={onFocus}
+        onblur={onBlur}
         disabled={disable}
         tabindex={disable === true ? -1 : 0}
       />
       <span class="q-field__label">{label}</span>
 
-      {#if $$slots.append}
-        <div class="q-field__slot-append">
-          <slot name="append" />
+      {#if append}
+        <div class="q-field__snippet-append">
+          {@render append()}
         </div>
       {/if}
     </label>
@@ -62,9 +89,9 @@ export { userClasses as class };
     {/if}
   </div>
 
-  {#if $$slots.after}
-    <div class="q-field__slot-after">
-      <slot name="after" />
+  {#if after}
+    <div class="q-field__snippet-after">
+      {@render after()}
     </div>
   {/if}
 </div>

package/dist/components/input/QInput.svelte.d.ts

@@ -1,33 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QInputProps } from "../input/props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        dense?: QInputProps["dense"];
-        disable?: QInputProps["disable"];
-        error?: QInputProps["error"];
-        errorMessage?: QInputProps["errorMessage"];
-        filled?: QInputProps["filled"];
-        hint?: QInputProps["hint"];
-        label?: QInputProps["label"];
-        outlined?: QInputProps["outlined"];
-        rounded?: QInputProps["rounded"];
-        value: QInputProps["value"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        before: {};
-        prepend: {};
-        append: {};
-        after: {};
-    };
-};
-type QInputProps_ = typeof __propDef.props;
-export { QInputProps_ as QInputProps };
-export type QInputEvents = typeof __propDef.events;
-export type QInputSlots = typeof __propDef.slots;
-export default class QInput extends SvelteComponent<QInputProps, QInputEvents, QInputSlots> {
-}
+declare const QInput: import("svelte").Component<QInputProps, {}, "value">;
+export default QInput;

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

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

package/dist/components/input/docs.js

@@ -1,4 +1,4 @@
-export let QInputDocs = {
+export const QInputDocs = {
     name: "QInput",
     description: "QInput is a form component that allows users to input text. It supports different visual styles such as filled, outlined, and rounded, and it can also display hint text and custom error messages.",
     docs: {

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.d.ts

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