@quaffui/quaff 0.1.0-prealpha6 → 0.1.0-prealpha8

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

@@ -3,12 +3,15 @@ import { createEventDispatcher } from "svelte";
 import QIcon from "../icon/QIcon.svelte";
 import QCircularProgress from "../progress/QCircularProgress.svelte";
 import { activationHandler } from "../../helpers/activationHandler";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
+import { useSize } from "../../composables/use-size";
+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 tag;
 $:
   tag = to !== void 0 ? "a" : "div";
+$:
+  sizeObj = useSize(size);
 $:
   classes = createClasses(
     [
@@ -16,8 +19,8 @@ $:
       rectangle && "rectangle",
       outline && "outlined",
       flat && "flat",
-      !$$slots.default && !label && "circle",
-      size && size !== "md" && size
+      (!$$slots.default && !label || round) && "round",
+      size !== "md" && sizeObj.class
     ],
     {
       component: "q-btn",

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         loading?: QBtnProps["loading"];
         unelevated?: QBtnProps["unelevated"];
         outline?: QBtnProps["outline"];
+        round?: QBtnProps["round"];
         rectangle?: QBtnProps["rectangle"];
         flat?: QBtnProps["flat"];
         to?: QBtnProps["to"];

package/dist/components/button/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",

package/dist/components/button/index.scss

@@ -66,7 +66,7 @@
     border-radius: 0.5rem;
   }
 
-  &.q-btn--circle {
+  &.q-btn--round {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;

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.
@@ -36,6 +36,11 @@ export interface QBtnProps extends NativeProps {
      * @default false
      */
     rectangle?: boolean;
+    /**
+     * Use round design for the button, giving it a circular shape.
+     * @default false
+     */
+    round?: boolean;
     /**
      * Makes the button navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").
      *  @default undefined

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

@@ -9,7 +9,7 @@ export const QCardDocsProps = [
     },
     {
         name: "fill",
-        type: "string | boolean",
+        type: "boolean | QCardFillColors",
         optional: true,
         clickableType: false,
         description: "Defines the fill color of the card.",

package/dist/components/checkbox/index.scss

@@ -1,3 +1,7 @@
 .q-checkbox {
   @include selection(checkbox);
+
+  > span::before {
+    content: "check_box_outline_blank";
+  }
 }

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/docs.props.js

@@ -65,15 +65,15 @@ export const QChipDocsProps = [
     },
     {
         name: "size",
-        type: '"small" | "medium" | "large"',
+        type: "QChipSizeOptions",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "Size of the chip.",
         default: "small",
     },
     {
         name: "tabindex",
-        type: "string | number",
+        type: "number",
         optional: true,
         clickableType: false,
         description: "Tabindex of the chip.",

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/codeBlock/QCodeBlock.svelte

@@ -33,7 +33,7 @@ async function copyCode() {
 
 <div class="q-code-block">
   {#if copiable}
-    <div class="flex between-align {title ? 'middle' : 'right'}-align q-pb-sm">
+    <div class="flex justify-between {title ? 'items-center' : 'justify-end'} q-pb-sm">
       {#if title}
         <h4 class="q-ma-none q-pr-lg">{title}</h4>
       {/if}

package/dist/components/dialog/QDialog.svelte

@@ -11,14 +11,13 @@ $:
 $:
   positionClass = ["top", "right", "bottom", "left"].includes(position) ? position : void 0;
 $:
-  classes = createClasses([
-    "q-dialog",
-    value && "active",
-    positionClass,
-    modal && "modal",
-    fullscreen && "max",
-    userClasses
-  ]);
+  classes = createClasses(
+    [value && "active", positionClass, modal && "modal", fullscreen && "max"],
+    {
+      component: "q-dialog",
+      userClasses
+    }
+  );
 $:
   value === true ? modal ? dialogElement?.showModal() : dialogElement?.show() : dialogElement?.close();
 export function hide() {

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,7 @@
 import { createClasses, createStyles } from "../../utils/props";
 import { getContext } from "svelte";
 import { clickOutside } from "../../helpers";
+import { useSize } from "../../composables/use-size";
 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 +11,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) => {
@@ -82,6 +83,6 @@ function getBorderRadiusClasses(sideProp, overlayProp, context) {
 }
 </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

@@ -2,6 +2,7 @@ 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"];

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,23 @@
 <script>import { getContext } from "svelte";
-import { createClasses } from "../../utils/props";
+import { createClasses, createStyles } from "../../utils/props";
+import { useSize } from "../../composables/use-size";
 export let value = true, bordered = false, elevated = 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]);
+  heightStyle = $ctx && useSize(height).style;
+$:
+  classes = createClasses(["q-footer", $ctx && $ctx.footer?.fixed && "fixed", userClasses]);
+$:
+  style = createStyles(
+    {
+      "--footer-height": heightStyle
+    },
+    userStyles
+  );
 </script>
 
-<footer class={classes} style={userStyles}>
+<footer class={classes} {style}>
   <nav>
     <slot />
   </nav>

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)
@@ -19,5 +19,5 @@ export interface QFooterProps extends NativeProps {
      * 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/icon/QIcon.svelte

@@ -1,23 +1,21 @@
-<script>import useSize from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
+<script>import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
-export let size = "md", name = void 0, type = "outlined", fill = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
+import { sizes } from "../../composables/use-size";
+import { useSize } from "../../composables/use-size";
+export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
-  sizeStyle = useSize(size) === null ? isNumber(size) ? `${size}px` : size : void 0;
+  sizeObj = useSize(size);
 $:
-  classes = createClasses([
-    "q-icon",
-    `q-icon__${type}`,
-    fill && "fill",
-    useSize(size),
-    color && `${color}-text`,
-    userClasses
-  ]);
+  classes = createClasses([type, filled && "filled", sizeObj.class], {
+    component: "q-icon",
+    userClasses,
+    quaffClasses: [color && `text-${color}`]
+  });
 $:
   style = createStyles(
     {
-      "---size": sizeStyle
+      "--size": sizeObj.style
     },
     userStyles
   );

package/dist/components/icon/QIcon.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         size?: import("./props").QIconSizeOptions | undefined;
         name?: QIconProps["name"];
         type?: import("./props").QIconTypeOptions | undefined;
-        fill?: boolean | undefined;
+        filled?: boolean | undefined;
         svg?: QIconProps["svg"];
         img?: QIconProps["img"];
         imgAttributes?: Record<string, any> | undefined;

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

@@ -24,7 +24,7 @@ export const QIconDocsProps = [
         default: "undefined",
     },
     {
-        name: "fill",
+        name: "filled",
         type: "boolean",
         optional: false,
         clickableType: false,

package/dist/components/icon/index.scss

@@ -1,18 +1,75 @@
-$icon-font: "Material Symbols Outlined";
-
 .q-icon {
+  --font: "Material Symbols Outlined";
+  --size: 1.5rem;
   overflow: visible;
-  font-family: $icon-font;
+  font-family: var(--font);
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--size);
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+  text-align: center;
+  overflow: hidden;
+  width: var(--size);
+  min-width: var(--size);
+  height: var(--size);
+  min-height: var(--size);
+  box-sizing: content-box;
+  line-height: normal;
 
   &--outlined {
-    $icon-font: "Material Symbols Outlined";
+    --font: "Material Symbols Outlined";
   }
 
   &--rounded {
-    $icon-font: "Material Symbols Rounded";
+    --font: "Material Symbols Rounded";
   }
 
   &--sharp {
-    $icon-font: "Material Symbols Sharp";
+    --font: "Material Symbols Sharp";
+  }
+
+  &--xs {
+    --size: 1rem;
+  }
+
+  &--sm {
+    --size: 1.25rem;
+  }
+
+  &--lg {
+    --size: 1.75rem;
+  }
+
+  &--xl {
+    --size: 2rem;
+  }
+
+  > :is(img, svg) {
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: inherit;
+  }
+
+  &.filled
+  // we might need these selectors later:
+  // a.row:is(:hover, :focus) > i,
+  // .transparent:is(:hover, :focus) > i
+  {
+    font-variation-settings: "FILL" 1;
   }
 }