@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha10

package/dist/components/dialog/QDialog.svelte

@@ -1,42 +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([
-    "q-dialog",
-    value && "active",
-    positionClass,
-    modal && "modal",
-    fullscreen && "max",
-    userClasses
-  ]);
-$:
-  value === true ? modal ? dialogElement?.showModal() : dialogElement?.show() : dialogElement?.close();
+  classes = createClasses(
+    [opened && "active", positionClass, modal && "modal", fullscreen && "max"],
+    {
+      component: "q-dialog",
+      userClasses
+    }
+  );
 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");
@@ -71,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

@@ -1,9 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QDialogProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: boolean | undefined;
         noBtn?: QDialogProps["noBtn"];
         btnContent?: QDialogProps["btnContent"];
         btnAttrs?: QDialogProps["btnAttrs"];
@@ -26,12 +25,12 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QDialogProps = typeof __propDef.props;
+type QDialogProps_ = typeof __propDef.props;
+export { QDialogProps_ as QDialogProps };
 export type QDialogEvents = typeof __propDef.events;
 export type QDialogSlots = typeof __propDef.slots;
-export default class QDialog extends SvelteComponentTyped<QDialogProps, QDialogEvents, QDialogSlots> {
+export default class QDialog extends SvelteComponent<QDialogProps, QDialogEvents, QDialogSlots> {
     get hide(): any;
     get show(): any;
     get toggle(): any;
 }
-export {};

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

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

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

@@ -55,6 +55,14 @@ export const QBtnDocsProps = [
         description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
+    {
+        name: "round",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use round design for the button, giving it a circular shape.",
+        default: "false",
+    },
     {
         name: "to",
         type: "string",
@@ -84,10 +92,10 @@ export const QDialogDocsProps = [
     {
         name: "value",
         type: "boolean",
-        optional: true,
+        optional: false,
         clickableType: false,
         description: "The value indicating whether the dialog is visible or hidden.",
-        default: "false",
+        default: "true",
     },
     {
         name: "noBtn",

package/dist/components/dialog/index.scss

@@ -1,10 +1,157 @@
-dialog.q-dialog {
+.q-dialog {
+  display: block;
+  border: none;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  box-shadow: var(--elevate2);
+  color: var(--on-surface);
+  background-color: var(--surface);
+  padding: 1rem;
+  z-index: 1000;
+  left: 50%;
+  top: 10%;
+  min-width: 20rem;
+  max-width: 100%;
+  max-height: 80%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition:
+    var(--speed3) all,
+    0s background-color;
+  transform: translate(-50%, -4rem);
   animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
 
-  &:is(.left, .right, .top, .bottom) {
+  &:is(&--active, [open]) {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0);
+  }
+
+  &::backdrop {
+    display: none;
+  }
+
+  &:not(&--left, &--right, &--top, &--bottom) {
+    border-radius: 0.75rem;
+  }
+
+  &--small {
+    width: 25%;
+    height: 25%;
+  }
+
+  &--medium {
+    width: 50%;
+    height: 50%;
+  }
+
+  &--large {
+    width: 75%;
+    height: 75%;
+  }
+
+  &:is(&--active, [open]) {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0);
+  }
+
+  &:is(&--active, [open]):is(&--left, &--right, &--top, &--bottom, &--max) {
+    transform: translate(0, 0);
+  }
+
+  &--top {
+    opacity: 1;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    height: auto;
+    width: 100%;
+    min-width: auto;
+    max-height: 100%;
+    transform: translateY(-100%);
+  }
+
+  &--left {
+    opacity: 1;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    width: auto;
+    height: 100%;
+    max-height: 100%;
+    transform: translateX(-100%);
+  }
+
+  &--right {
+    opacity: 1;
+    top: 0;
+    left: auto;
+    right: 0;
+    bottom: auto;
+    width: auto;
+    height: 100%;
+    max-height: 100%;
+    transform: translateX(100%);
+  }
+
+  &--bottom {
+    opacity: 1;
+    top: auto;
+    left: 0;
+    right: auto;
+    bottom: 0;
+    height: auto;
+    width: 100%;
+    min-width: auto;
+    max-height: 100%;
+    transform: translateY(100%);
+  }
+
+  &--max {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    transform: translateY(4rem);
+  }
+
+  &--small:is(&--left, &--right) {
+    width: 20rem;
+  }
+
+  &--medium:is(&--left, &--right) {
+    width: 32rem;
+  }
+
+  &--large:is(&--left, &--right) {
+    width: 44rem;
+  }
+
+  &--small:is(&--top, &--bottom) {
+    height: 16rem;
+  }
+
+  &--medium:is(&--top, &--bottom) {
+    height: 24rem;
+  }
+
+  &--large:is(&--top, &--bottom) {
+    height: 32rem;
+  }
+
+  &:is(&--left, &--right, &--top, &--bottom) {
     border-radius: 0;
   }
-  &.modal::backdrop {
+
+  &--modal::backdrop {
     display: block;
     background-color: rgba(0, 0, 0, 0.5);
   }

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,20 +63,37 @@ $:
     },
     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}>
+<div use:clickOutside={hide} class={classes} {style} {...$$restProps}>
   <slot />
 </div>

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -1,7 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QDrawerProps } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: QDrawerProps["value"];
         side?: QDrawerProps["side"];
         width?: QDrawerProps["width"];
@@ -28,12 +29,12 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QDrawerProps = typeof __propDef.props;
+type QDrawerProps_ = typeof __propDef.props;
+export { QDrawerProps_ as QDrawerProps };
 export type QDrawerEvents = typeof __propDef.events;
 export type QDrawerSlots = typeof __propDef.slots;
-export default class QDrawer extends SvelteComponentTyped<QDrawerProps, QDrawerEvents, QDrawerSlots> {
+export default class QDrawer extends SvelteComponent<QDrawerProps, QDrawerEvents, QDrawerSlots> {
     get show(): any;
     get hide(): any;
     get toggle(): any;
 }
-export {};

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

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

package/dist/components/drawer/index.scss

@@ -6,46 +6,51 @@
   bottom: 0;
   left: auto;
   height: 100%;
-  transition: all var(--speed3), background-color 0s;
+  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

@@ -1,10 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 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;
@@ -16,9 +16,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QFooterProps = typeof __propDef.props;
+type QFooterProps_ = typeof __propDef.props;
+export { QFooterProps_ as QFooterProps };
 export type QFooterEvents = typeof __propDef.events;
 export type QFooterSlots = typeof __propDef.slots;
-export default class QFooter extends SvelteComponentTyped<QFooterProps, QFooterEvents, QFooterSlots> {
+export default class QFooter extends SvelteComponent<QFooterProps, QFooterEvents, QFooterSlots> {
 }
-export {};

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

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

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>