@quaffui/quaff 0.1.0-prealpha7 → 0.1.0-prealpha9

package/dist/components/avatar/QAvatar.svelte

@@ -1,9 +1,10 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
+<script>import { useSize } from "../../composables/use-size";
+import { createClasses, createStyles } from "../../utils/props";
 export let shape = "circle", size = "md", src = void 0, video = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class };
 export { userStyles as style };
 $:
-  isBasicSize = ["xs", "sm", "md", "lg", "xl"].includes(size);
+  sizeObj = useSize(size);
 $:
   shapeClass = createClasses([
     shape === "circle" && "circle",
@@ -14,18 +15,18 @@ $:
     shape.includes("right") && "right-round"
   ]);
 $:
-  classes = createClasses([shapeClass, isBasicSize && size], {
+  classes = createClasses([shapeClass, sizeObj.class], {
     component: "q-avatar",
     userClasses
   });
 $:
-  style = !isBasicSize ? createStyles(
+  style = createStyles(
     {
-      width: size,
-      height: size
+      width: sizeObj.style,
+      height: sizeObj.style
     },
     userStyles
-  ) : userStyles;
+  );
 </script>
 
 {#if video === true}

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

@@ -1,6 +1,6 @@
-import type { NativeProps } from "../../utils/types";
+import type { QuaffSizes, CssValue, NativeProps } from "../../utils/types";
 export type QAvatarShapeOptions = "circle" | "rounded" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
-export type QAvatarSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string;
+export type QAvatarSizeOptions = QuaffSizes | CssValue | number;
 export interface QAvatarProps extends NativeProps {
     /**
      * Shape of the avatar.

package/dist/components/button/QBtn.svelte

@@ -1,14 +1,18 @@
 <script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
+import { createEventDispatcher, onMount } from "svelte";
 import QIcon from "../icon/QIcon.svelte";
 import QCircularProgress from "../progress/QCircularProgress.svelte";
-import { activationHandler } from "../../helpers/activationHandler";
+import { useSize } from "../../composables/use-size";
+import { isActivationKey } from "../../utils/events";
+import { ripple } from "../../helpers/ripple";
 export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
 export { userClasses as class };
-const emit = createEventDispatcher();
+let qBtn;
 let tag;
 $:
-  tag = to !== void 0 ? "a" : "div";
+  tag = to !== void 0 ? "a" : "button";
+$:
+  sizeObj = useSize(size);
 $:
   classes = createClasses(
     [
@@ -17,24 +21,33 @@ $:
       outline && "outlined",
       flat && "flat",
       (!$$slots.default && !label || round) && "round",
-      size && size !== "md" && size
+      size !== "md" && sizeObj.class
     ],
     {
       component: "q-btn",
       userClasses
     }
   );
+function onKeyDown(e) {
+  if (!isActivationKey(e))
+    return;
+  e.preventDefault();
+  let click = new MouseEvent("click");
+  qBtn.dispatchEvent(click);
+}
 </script>
 
 <svelte:element
   this={tag}
-  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
-  role="button"
+  bind:this={qBtn}
+  use:ripple
+  role={tag === "a" ? "button" : undefined}
   href={to}
   class={classes}
   aria-disabled={disable || undefined}
   tabindex={disable ? -1 : 0}
   on:click
+  on:keydown={onKeyDown}
   {...$$restProps}
 >
   {#if icon && !loading}

package/dist/components/button/QBtn.svelte.d.ts

@@ -18,7 +18,6 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        activated: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/button/index.scss

@@ -26,7 +26,6 @@
   gap: 1rem;
   line-height: normal;
   @extend .elevate-sm-bottom;
-  @extend .ripple;
 
   $sizeMap: (
     "sm": -1,
@@ -77,5 +76,23 @@
     margin: 0 -0.5rem;
   }
 
+  &:is(:hover, :focus):not([aria-disabled])::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--on-primary);
+  }
+
+  &:hover:not([aria-disabled])::after {
+    opacity: 0.08;
+  }
+
+  &:focus:not([aria-disabled])::after {
+    opacity: 0.16;
+  }
+
   @include btn-image;
 }

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QBtnSizeOptions = "sm" | "md" | "lg" | "xl";
+import type { NativeProps, QuaffSizes } from "../../utils/types";
+export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
 export interface QBtnProps extends NativeProps {
     /**
      * Puts the button in a disabled state, making it unclickable.

package/dist/components/chip/QChip.svelte

@@ -2,6 +2,7 @@
 import { createClasses } from "../../utils/props";
 import { createEventDispatcher } from "svelte";
 import QIcon from "../icon/QIcon.svelte";
+import { useSize } from "../../composables/use-size";
 export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, size = "md", tabindex = void 0, href = void 0, userClasses = void 0;
 export { userClasses as class };
 const emit = createEventDispatcher();
@@ -10,10 +11,15 @@ $:
 $:
   imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
 $:
-  sizeClass = ["sm", "lg"].includes(size) ? size : void 0;
+  sizeObj = useSize(size);
 $:
   classes = createClasses(
-    [vertical && "vertical", round && "rounded", (outlined || disable) && "bordered", sizeClass],
+    [
+      vertical && "vertical",
+      round && "rounded",
+      (outlined || disable) && "bordered",
+      size !== "md" && sizeObj.class
+    ],
     {
       component: "q-chip",
       userClasses

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QChipSizeOptions = "sm" | "md" | "lg";
+import type { NativeProps, QuaffSizes } from "../../utils/types";
+export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
 export interface QChipProps extends NativeProps {
     /**
      * The content inside the chip. Will overwrite the default slot.

package/dist/components/dialog/QDialog.svelte

@@ -1,41 +1,57 @@
 <script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
+import { createEventDispatcher, onMount } from "svelte";
 import QBtn from "../button/QBtn.svelte";
 import { clickOutsideDialog } from "../../helpers";
-export let value = true, noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
+export let noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
 export { userClasses as class };
 const emit = createEventDispatcher();
 let dialogElement;
+let opened = false;
+onMount(() => {
+  opened = dialogElement.open;
+  dialogElement.style.display = opened ? "block" : "none";
+});
 $:
-  canHideOnClickOutside = value === true && persistent !== true;
+  canHideOnClickOutside = opened && persistent !== true;
 $:
   positionClass = ["top", "right", "bottom", "left"].includes(position) ? position : void 0;
 $:
   classes = createClasses(
-    [value && "active", positionClass, modal && "modal", fullscreen && "max"],
+    [opened && "active", positionClass, modal && "modal", fullscreen && "max"],
     {
       component: "q-dialog",
       userClasses
     }
   );
-$:
-  value === true ? modal ? dialogElement?.showModal() : dialogElement?.show() : dialogElement?.close();
 export function hide() {
-  if (value === true) {
-    value = false;
+  if (dialogElement && dialogElement.open) {
+    dialogElement.close();
+    opened = false;
+    setTimeout(() => {
+      dialogElement.style.display = "none";
+    }, 250);
   }
 }
 export function show() {
-  if (value === false) {
-    value = true;
+  if (dialogElement && !dialogElement.open) {
+    modal ? dialogElement.showModal() : dialogElement.show();
+    opened = true;
+    dialogElement.style.display = "block";
   }
 }
 export function toggle(e) {
-  value = !value;
+  if (dialogElement) {
+    opened = !opened;
+    if (dialogElement.open) {
+      hide();
+    } else {
+      show();
+    }
+  }
   e.stopPropagation();
 }
 function addAnimation() {
-  if (persistent && value === true) {
+  if (persistent && opened) {
     dialogElement?.classList.add("animating");
     setTimeout(() => {
       dialogElement?.classList.remove("animating");
@@ -70,7 +86,6 @@ function handleClickHide() {
 <dialog
   use:clickOutsideDialog={handleClickHide}
   class={classes}
-  open={value}
   {...$$restProps}
   bind:this={dialogElement}
   on:cancel={handleKeyboardHide}

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -3,7 +3,6 @@ import type { QDialogProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: boolean | undefined;
         noBtn?: QDialogProps["noBtn"];
         btnContent?: QDialogProps["btnContent"];
         btnAttrs?: QDialogProps["btnAttrs"];

package/dist/components/drawer/QDrawer.svelte

@@ -2,6 +2,8 @@
 import { createClasses, createStyles } from "../../utils/props";
 import { getContext } from "svelte";
 import { clickOutside } from "../../helpers";
+import { useSize } from "../../composables/use-size";
+import { derived } from "svelte/store";
 export let value = true, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
@@ -10,7 +12,7 @@ $:
   belowBreakpoint = behavior === "mobile" === true || behavior !== "desktop" && /** TODO: Get Layout width */
   1300 <= breakpoint;
 $:
-  widthStyle = ctx === void 0 ? isNaN(Number(width)) ? width : `${width}px` : void 0;
+  widthStyle = !$ctx && useSize(width).style;
 $:
   hideOnRouteChange = persistent !== true || overlay === true;
 export const show = (e) => {
@@ -33,34 +35,27 @@ $:
     hide();
   }
 let ctx = getContext("layout");
-function prepareZIndexClass(context, overlayProp, sideProp) {
-  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
-  let pos;
-  for (pos of ["top", "bottom"]) {
-    if (!drawer.offset[pos] && overlayProp) {
-      drawer.overlay = true;
-      return "above";
-    }
-  }
-}
 let drawerType;
 $:
   drawerType = side === "left" ? "drawerLeft" : "drawerRight";
 $:
-  classes = createClasses([
-    "q-drawer",
-    "surface",
-    side,
-    value && "active",
-    overlay && "overlay",
-    bordered && "bordered",
-    $ctx && $ctx[drawerType].offset.top && "offset-top",
-    $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-    $ctx && $ctx[drawerType].fixed && "fixed",
-    getBorderRadiusClasses(side, overlay, $ctx),
-    $ctx && prepareZIndexClass($ctx, overlay, side),
-    userClasses
-  ]);
+  classes = createClasses(
+    [
+      side,
+      value && "active",
+      overlay && "overlay",
+      bordered && "bordered",
+      $ctx && $ctx[drawerType].offset.top && "offset-top",
+      $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
+      $ctx && $ctx[drawerType].fixed && "fixed",
+      $borderRadiusClasses,
+      $zIndexClass
+    ],
+    {
+      component: "q-drawer",
+      userClasses
+    }
+  );
 $:
   style = createStyles(
     {
@@ -68,18 +63,35 @@ $:
     },
     userStyles
   );
-function getBorderRadiusClasses(sideProp, overlayProp, context) {
-  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
-  const shouldHaveRadius = (pos) => {
-    if (!context)
-      return void 0;
-    let appbarEl = pos === "top" ? context["header"] : context["footer"];
-    if (appbarEl && appbarEl.display && !context[drawerType].offset[pos] && !overlayProp)
-      return void 0;
-    return `${prefix}--${pos}`;
-  };
-  return createClasses([shouldHaveRadius("top"), shouldHaveRadius("bottom")]);
-}
+$:
+  borderRadiusClasses = ctx && // No border radius if this isn't a layout drawer
+  derived(ctx, (context) => {
+    const borderSide = side === "left" ? "right" : "left";
+    const shouldHaveRadius = (pos) => {
+      let appBarEl = pos === "top" ? context["header"] : context["footer"];
+      return overlay || !appBarEl?.display || context[drawerType].offset[pos];
+    };
+    return createClasses(
+      [
+        shouldHaveRadius("top") && `top-${borderSide}-radius`,
+        shouldHaveRadius("bottom") && `bottom-${borderSide}-radius`
+      ],
+      {
+        component: "q-drawer"
+      }
+    );
+  });
+$:
+  zIndexClass = ctx && derived(ctx, (context) => {
+    const drawer = side === "left" ? context.drawerLeft : context.drawerRight;
+    let pos;
+    for (pos of ["top", "bottom"]) {
+      if (!drawer.offset[pos] && overlay) {
+        drawer.overlay = true;
+        return "above";
+      }
+    }
+  });
 </script>
 
 <div use:clickOutside={hide} class={classes} {style} {...$$restProps}>

package/dist/components/drawer/index.scss

@@ -6,48 +6,51 @@
   bottom: 0;
   left: auto;
   height: 100%;
+  background-color: var(--surface);
+  color: var(--on-surface);
   transition:
     all var(--speed3),
     background-color 0s;
   overflow: auto;
   padding: 8px;
 
-  &.fixed {
+  &.q-drawer--fixed {
     position: fixed;
   }
 
-  &.left {
+  &.q-drawer--left {
     left: 0px;
     transform: translate(-100%);
     width: var(--left-drawer-width);
-    &.bordered {
+    &.q-drawer--bordered {
       border-right: 0.0625rem solid var(--outline);
     }
   }
 
-  &.right {
+  &.q-drawer--right {
     right: 0px;
     transform: translate(100%);
     width: var(--right-drawer-width);
 
-    &.bordered {
+    &.q-drawer--bordered {
       border-left: 0.0625rem solid var(--outline);
     }
   }
 
-  &.active {
+  &.q-drawer--active {
     transform: translate(0);
   }
 
-  &.offset {
+  &.q-drawer--offset {
     &-top {
       top: var(--header-height);
       height: calc(100% - var(--header-height));
 
-      &.offset-bottom {
+      &.q-drawer--offset-bottom {
         height: calc(100% - var(--header-height) - var(--footer-height));
       }
     }
+
     &-bottom {
       bottom: var(--footer-height);
       height: calc(100% - var(--footer-height));

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils/types";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";
 export interface QDrawerProps extends NativeProps {
@@ -16,7 +16,7 @@ export interface QDrawerProps extends NativeProps {
      * The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.
      * @default 300
      */
-    width?: number | string;
+    width?: number | CssValue;
     /**
      * The breakpoint at which the drawer behavior changes. (not supported yet)
      * @default 1023

package/dist/components/footer/QFooter.svelte

@@ -1,13 +1,27 @@
 <script>import { getContext } from "svelte";
-import { createClasses } from "../../utils/props";
-export let value = true, bordered = false, elevated = false, height = void 0, userClasses = void 0, userStyles = void 0;
+import { createClasses, createStyles } from "../../utils/props";
+import { useSize } from "../../composables/use-size";
+export let value = true, border = false, elevate = false, height = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
 $:
-  classes = createClasses(["q-footer", $ctx && $ctx.footer.fixed && "fixed", userClasses]);
+  classes = createClasses(
+    [border && "bordered", elevate && "elevated", $ctx?.footer?.fixed && "fixed"],
+    {
+      component: "q-footer",
+      userClasses
+    }
+  );
+$:
+  style = createStyles(
+    {
+      height: !ctx && useSize(height).style
+    },
+    userStyles
+  );
 </script>
 
-<footer class={classes} style={userStyles}>
+<footer class={classes} {style}>
   <nav>
     <slot />
   </nav>

package/dist/components/footer/QFooter.svelte.d.ts

@@ -3,8 +3,8 @@ import type { QFooterProps } from "./props";
 declare const __propDef: {
     props: {
         value?: QFooterProps["value"];
-        bordered?: QFooterProps["bordered"];
-        elevated?: QFooterProps["elevated"];
+        border?: QFooterProps["border"];
+        elevate?: QFooterProps["elevate"];
         height?: QFooterProps["height"];
         class?: string | undefined;
         style?: string | undefined;

package/dist/components/footer/index.scss

@@ -2,4 +2,27 @@
   width: 100%;
   height: var(--footer-height);
   transition: all var(--speed3);
+  background-color: var(--surface);
+  color: var(--on-surface);
+  padding: 0 1rem;
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    white-space: nowrap;
+    gap: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &--bordered {
+    border-top: solid 0.0625rem var(--outline);
+  }
+
+  &--elevated {
+    @include elevate(1, "top");
+  }
 }

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils/types";
 export interface QFooterProps extends NativeProps {
     /**
      * The value indicating whether the footer is visible or hidden. (not supported yet)
@@ -9,15 +9,15 @@ export interface QFooterProps extends NativeProps {
      * Determines whether the footer has a border around it. (not supported yet)
      * @default false
      */
-    bordered?: boolean;
+    border?: boolean;
     /**
      * Determines whether the footer has an elevated effect. (not supported yet)
      * @default false
      */
-    elevated?: boolean;
+    elevate?: boolean;
     /**
      * The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)
      * @default undefined
      */
-    height?: string | number;
+    height?: number | CssValue;
 }

package/dist/components/header/QHeader.svelte

@@ -0,0 +1,28 @@
+<script>import { createClasses } from "../../utils/props";
+import { getContext } from "svelte";
+import QToolbar from "../toolbar/QToolbar.svelte";
+export let inset = false, elevate = false, border = false, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+let ctx = getContext("layout");
+$:
+  if ($ctx === void 0) {
+    console.warn("QHeader should be used inside QLayout");
+  }
+$:
+  classes = createClasses([$ctx?.header?.fixed && "fixed"], {
+    component: "q-header",
+    userClasses
+  });
+$:
+  if ($ctx?.header !== void 0) {
+    if (userStyles?.includes("display: none")) {
+      $ctx.header.display = false;
+    } else {
+      $ctx.header.display = true;
+    }
+  }
+</script>
+
+<QToolbar {inset} {elevate} {border} class={classes} role="header" {...$$restProps}>
+  <slot />
+</QToolbar>

package/dist/components/header/QHeader.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { QHeaderProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inset?: QHeaderProps["inset"];
+        elevate?: QHeaderProps["elevate"];
+        border?: QHeaderProps["border"];
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type QHeaderProps_ = typeof __propDef.props;
+export { QHeaderProps_ as QHeaderProps };
+export type QHeaderEvents = typeof __propDef.events;
+export type QHeaderSlots = typeof __propDef.slots;
+export default class QHeader extends SvelteComponent<QHeaderProps, QHeaderEvents, QHeaderSlots> {
+}

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

@@ -0,0 +1,15 @@
+import type { NativeProps } from "../../utils/types";
+export interface QHeaderProps extends NativeProps {
+    /**
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * @default false
+     */
+    elevate?: boolean;
+    /**
+     * @default false
+     */
+    border?: boolean;
+}

package/dist/components/header/props.js

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