@quaffui/quaff 0.1.0-prealpha6 → 0.1.0-prealpha7

package/dist/components/button/QBtn.svelte

@@ -3,7 +3,7 @@ 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;
+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;
@@ -16,7 +16,7 @@ $:
       rectangle && "rectangle",
       outline && "outlined",
       flat && "flat",
-      !$$slots.default && !label && "circle",
+      (!$$slots.default && !label || round) && "round",
       size && size !== "md" && size
     ],
     {

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

@@ -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/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/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

@@ -82,6 +82,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/icon/QIcon.svelte

@@ -1,23 +1,28 @@
-<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";
+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 };
+let sizeStyle;
+$: {
+  if (isNumber(size)) {
+    sizeStyle = `${size}px`;
+  } else if (typeof size === "string" && !sizes.includes(size)) {
+    sizeStyle = size;
+  } else {
+    sizeStyle = void 0;
+  }
+}
 $:
-  sizeStyle = useSize(size) === null ? isNumber(size) ? `${size}px` : size : void 0;
-$:
-  classes = createClasses([
-    "q-icon",
-    `q-icon__${type}`,
-    fill && "fill",
-    useSize(size),
-    color && `${color}-text`,
-    userClasses
-  ]);
+  classes = createClasses([type, filled && "filled", sizes.includes(size) && size], {
+    component: "q-icon",
+    userClasses,
+    quaffClasses: [color && `text-${color}`]
+  });
 $:
   style = createStyles(
     {
-      "---size": sizeStyle
+      "--size": sizeStyle
     },
     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;
   }
 }

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

@@ -21,7 +21,7 @@ export interface QIconProps extends NativeProps {
      * Determines whether the icon should be filled.
      * @default false
      */
-    fill: boolean;
+    filled: boolean;
     /**
      * The SVG content for the icon.
      * @default undefined

package/dist/components/index.d.ts

@@ -25,5 +25,6 @@ import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
 import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
+import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -25,5 +25,6 @@ import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
 import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
+import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/list/QItem.svelte

@@ -26,7 +26,7 @@ $:
   isActive = isRouteActive($Quaff.router, to);
 $:
   classes = createClasses([
-    "q-item flex middle-align",
+    "q-item flex items-center",
     $hasMultiplLines && "multiline",
     dense && "dense",
     hasLink && active && "q-item--active",

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

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

package/dist/components/list/docs.js

@@ -0,0 +1,11 @@
+import { QListDocsProps } from "./docs.props";
+export let QListDocs = {
+    name: "QList",
+    description: "The QList component is used to display a list of items with options for adding text, icons and actions.",
+    docs: {
+        props: QListDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -149,7 +149,7 @@ export const QListDocsProps = [
     },
     {
         name: "separatorOptions",
-        type: 'QSeparatorProps["textAlign"]\r\n  };',
+        type: 'QSeparatorProps["textAlign"]\n  };',
         optional: false,
         clickableType: true,
         description: "",

package/dist/components/list/index.scss

@@ -24,6 +24,12 @@
 }
 
 .q-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
   min-width: 100%;
   min-height: 56px;
   margin-top: 0 !important;

package/dist/components/private/QApi.svelte

@@ -34,28 +34,28 @@ function getType(type) {
   let found = type in Types ? Types[type] : void 0;
   return found;
 }
-function handleDrawer(QDocument, doc) {
+function handleDrawer(QDocument, doc, e) {
+  e.stopPropagation();
   let content = getType(doc.type);
+  for (let docName in drawer[QDocument.name]) {
+    if (drawer[QDocument.name][docName] === true && docName !== doc.name) {
+      drawer[QDocument.name][docName] = false;
+    }
+  }
   if (!drawer[QDocument.name][doc.name]) {
-    drawerContent = content;
-    drawer[QDocument.name][doc.name] = true;
+    setTimeout(() => {
+      drawerContent = content;
+      drawer[QDocument.name][doc.name] = true;
+    }, 100);
   } else {
-    if (content !== drawerContent) {
-      drawer[QDocument.name][doc.name] = false;
-      setTimeout(() => {
-        drawerContent = content;
-        drawer[QDocument.name][doc.name] = true;
-      }, 250);
-    } else {
-      drawer[QDocument.name][doc.name] = false;
-    }
+    drawer[QDocument.name][doc.name] = false;
   }
 }
 </script>
 
 {#each QComponentDocs as QDocument, index}
-  <QCard class="q-px-none q-pb-none">
-    <div slot="title" class="flex between-align middle-align q-px-md">
+  <QCard class="q-px-none q-pb-none q-mt-lg">
+    <div slot="title" class="flex justify-between items-center q-px-md">
       <h5 class="no-margin">
         <QIcon name="info" />
         <span class="q-ml-md">{QDocument.name} API</span>
@@ -64,7 +64,7 @@ function handleDrawer(QDocument, doc) {
         {#each Object.entries(QDocument.docs) as [tabName, _tabDoc]}
           {#if _tabDoc.length !== 0}
             <QTab name={tabName} style="min-width: 100px">
-              <h6>{capitalize(tabName)}</h6>
+              <h6 style="margin: 0">{capitalize(tabName)}</h6>
             </QTab>
           {/if}
         {/each}
@@ -77,7 +77,7 @@ function handleDrawer(QDocument, doc) {
             {#if isProp(doc, index) && doc.clickableType}
               <QDrawer
                 side="right"
-                class="no-padding"
+                class="no-padding api-drawer"
                 style="height: fit-content; max-height: 400%; overflow: auto; border-radius: 0;"
                 bind:value={drawer[QDocument.name][doc.name]}
                 width="50%"
@@ -87,7 +87,7 @@ function handleDrawer(QDocument, doc) {
             {/if}
             <QItemSection type="content" style="overflow: visible">
               <div slot="headline" class="q-my-sm" style="flex: 1 1 0; white-space: nowrap">
-                <span class=" small-padding surface-variant small-round">
+                <span class="q-pa-sm surface-variant">
                   <b>{doc.name}</b>
                   {#if isProp(doc, index)}
                     {doc.optional ? "?" : ""}
@@ -95,7 +95,7 @@ function handleDrawer(QDocument, doc) {
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <span
                         class="prop-type clickable"
-                        on:click={() => isProp(doc, index) && handleDrawer(QDocument, doc)}
+                        on:click={(e) => isProp(doc, index) && handleDrawer(QDocument, doc, e)}
                       >
                         : {doc.type}
                       </span>
@@ -131,10 +131,11 @@ function handleDrawer(QDocument, doc) {
 .q-item {
   overflow: visible;
 }
-pre[class*=language-] {
+
+:global(.q-drawer.api-drawer pre) {
   margin: 0;
-  padding: 1em;
   border-radius: inherit;
+  white-space: pre-wrap;
 }
 
 :global(.prop-description > a:hover) {