@quaffui/quaff 0.1.0-prealpha6 → 0.1.0-prealpha8

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps {
     /**
@@ -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) {

package/dist/components/private/QDocs.svelte

@@ -7,28 +7,32 @@ $:
 let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QComponentDocs;
 </script>
 
-<div style="margin: 1rem">
-  <div class="grid" style="min-height: 400px">
-    <QCard class="s12 l6 flex center-align" fill="primary">
+<div class="q-docs" style="margin: 1rem">
+  <div class="row q-gutter-lg q-mb-lg" style="min-height: 400px">
+    <QCard class="col-sm-12 col-lg-6 flex flex-center" fill="primary" style="min-height: 400px">
       <h1 class="large no-margin" slot="title">{principalDocument.name}</h1>
     </QCard>
-    <QCard class="s12 l6 q-mt-none q-pa-none" fill="secondary">
-      <QCardSection class="no-padding">
+    <QCard
+      class="q-docs__preview col-sm-12 col-lg-6 q-mt-none q-pa-none"
+      fill="secondary"
+      style="min-height: 400px"
+    >
+      <QCardSection class="q-pa-none">
         <div
-          class="flex center-align middle-align"
+          class="flex flex-center"
           style="position: absolute; height: 100%; width: 100%; z-index: 1;"
         >
           <slot name="display" />
         </div>
         <img
-          class="responsive medium"
+          class="q-docs__image"
           src="/beer-splash-{isDark ? 'dark' : 'light'}.jpg"
           alt="Close-up of the content of a glass of beer"
           style={isDark ? "filter:brightness(0.3)" : ""}
         />
       </QCardSection>
-      <QCardSection class="flex center-align middle-align">
-        <h3 class="small">
+      <QCardSection class="q-docs__description flex flex-center">
+        <h3 class="q-docs__description-text">
           {principalDocument.description}
         </h3>
       </QCardSection>
@@ -50,7 +54,31 @@ let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QCom
   <slot />
 </div>
 
-<style>.prop-type {
+<style>.q-docs :global(.q-pa-none) {
+  padding: 0 !important;
+}
+.q-docs__image {
+  width: 100%;
+  height: 12rem;
+  object-fit: cover;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.q-docs :global(.q-docs__preview) {
+  display: flex !important;
+  flex-direction: column;
+}
+.q-docs :global(.q-docs__description) {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+.q-docs :global(.q-docs__description-text) {
+  font-size: 1.75rem;
+}
+
+.prop-type {
   opacity: 0.75;
 }
 .prop-type.clickable {

package/dist/components/private/QDocsSection.svelte

@@ -8,13 +8,13 @@
 </script>
 
 <div style="margin-bottom:48px">
-  <div class="flex between-align q-mb-md">
+  <div class="flex justify-between q-mb-md">
     <h5>{title}</h5>
     {#if snippets}
       <QDialog
         class="snippet-dialog"
         bind:value={dialog}
-        btnAttrs={{ outline: true, icon: "code", class: "circle" }}
+        btnAttrs={{ outline: true, round: true, icon: "code" }}
         on:btnClick={() => (dialog = true)}
         modal
       >

package/dist/components/progress/QCircularProgress.svelte

@@ -1,9 +1,10 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { useSize } from "../../composables/use-size";
+import { createClasses } from "../../utils/props";
 import { isNumber } from "../../utils/types";
 export let value = 0, indeterminate = false, size = "2em", color = void 0, thickness = 5, userClasses = void 0;
 export { userClasses as class };
 $:
-  spinnerSize = isNumber(size) ? `${size}px` : size;
+  spinnerSize = useSize(size);
 $:
   classes = createClasses([indeterminate && "indeterminate"], {
     component: "q-circular-progress",
@@ -12,7 +13,7 @@ $:
   });
 </script>
 
-<svg class={classes} height={spinnerSize} width={spinnerSize} viewBox="25 25 50 50">
+<svg class={classes} height={spinnerSize.style} width={spinnerSize.style} viewBox="25 25 50 50">
   <circle
     class="path"
     cx="50"

package/dist/components/progress/QCircularProgress.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         indeterminate?: boolean | undefined;
-        size?: string | number | undefined;
+        size?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         color?: QCircularProgressProps["color"];
         thickness?: number | undefined;
         class?: string | undefined;

package/dist/components/progress/QLinearProgress.svelte

@@ -6,9 +6,15 @@ $:
     borderRadius: rounded ? "12px" : "0"
   };
 $:
-  containerClasses = createClasses(["small-space", "border", userClasses]);
+  containerClasses = createClasses(["small-space", "border"], {
+    component: "q-linear-progress",
+    userClasses
+  });
 $:
-  progressClasses = createClasses(["progress", from]);
+  progressClasses = createClasses([from], {
+    component: "q-linear-progress",
+    element: "progress"
+  });
 $:
   containerStyle = createStyles(roundedStyle, userStyles);
 $:

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

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

package/dist/components/progress/docs.js

@@ -0,0 +1,11 @@
+import { QLinearProgressDocsProps } from "./docs.props";
+export let QProgressDocs = {
+    name: "QProgress",
+    description: "The QProgress component is used to display a progress bar, indicating the completion status of a task or process.",
+    docs: {
+        props: QLinearProgressDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/progress/docs.props.d.ts

@@ -6,3 +6,11 @@ export declare const QLinearProgressDocsProps: {
     description: string;
     default: string;
 }[];
+export declare const QCircularProgressDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -24,3 +24,45 @@ export const QLinearProgressDocsProps = [
         default: "",
     },
 ];
+export const QCircularProgressDocsProps = [
+    {
+        name: "value",
+        type: "number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "indeterminate",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "size",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "thickness",
+        type: "number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/progress/index.scss

@@ -1,4 +1,19 @@
 // Linear progress
+.q-linear-progress {
+  height: 1rem;
+  @include border;
+
+  &__progress {
+    position: absolute;
+    background-color: var(--active);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: var(--speed4) clip-path;
+    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
+  }
+}
 
 // Circular progress
 .q-circular-progress {

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

@@ -1,20 +1,37 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QLinearProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
+    /**
+     * @default left
+     */
     from: "left" | "right";
+    /**
+     * @default false
+     */
     rounded: boolean;
 }
 export interface QCircularProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
+    /**
+     * @default false
+     */
     indeterminate: boolean;
-    size: string | number;
+    /**
+     * @default 2em
+     */
+    size: CssValue | number;
+    /**
+     * @default undefined
+     */
     color?: string;
+    /**
+     * @default 5
+     */
     thickness: number;
 }
-export declare const QLinearProgressPropsDefaults: {
-    userClasses?: string | undefined;
-    userStyles?: string | undefined;
-    value: number;
-    from: string;
-    rounded: boolean;
-};

package/dist/components/progress/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QLinearProgressPropsDefaults = {
-    value: 0,
-    from: "left",
-    rounded: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/railbar/QRailbar.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from "svelte";
 import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
+import { useSize } from "../../composables/use-size";
 export let width = 88, side = "left", bordered = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
@@ -21,7 +22,7 @@ $:
     userClasses
   ]);
 $:
-  widthStyle = ctx === void 0 ? isNumber(width) ? `${width}px` : width : void 0;
+  widthStyle = $ctx && useSize(width).style;
 $:
   style = createStyles(
     {

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
 declare const __propDef: {
     props: {
-        width?: string | number | undefined;
+        width?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         side?: "left" | "right" | undefined;
         bordered?: boolean | undefined;
         class?: string | undefined;

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

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

package/dist/components/railbar/docs.js

@@ -0,0 +1,11 @@
+import { QRailbarDocsProps } from "./docs.props";
+export let QRailbarDocs = {
+    name: "QRailbar",
+    description: "Railbars are used to provide navigation between different sections or views within an application.",
+    docs: {
+        props: QRailbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -1,7 +1,15 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QRailbarProps extends NativeProps {
-    width: number | string;
+    /**
+     * @default 88px
+     */
+    width: CssValue | number;
+    /**
+     * @default left
+     */
     side: "left" | "right";
+    /**
+     * @default false
+     */
     bordered: boolean;
 }
-export declare const QRailbarPropsDefaults: QRailbarProps;

package/dist/components/railbar/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QRailbarPropsDefaults = {
-    width: 88,
-    side: "left",
-    bordered: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/select/QSelect.svelte

@@ -1,4 +1,5 @@
-<script>import { onDestroy, onMount } from "svelte";
+<script>import QIcon from "../icon/QIcon.svelte";
+import { onDestroy, onMount } from "svelte";
 import { createClasses } from "../../utils/props";
 import { textWidth } from "../../utils/fields";
 import { browser } from "$app/environment";
@@ -129,9 +130,10 @@ onDestroy(() => {
     disabled={disable}
   />
 
-  <i class="q-select__arrow-toggle" class:q-select__arrow-toggle--has-append={$$slots.append}
-    >{`arrow_drop_${isMenuOpen ? "up" : "down"}`}</i
-  >
+  <QIcon
+    class="q-select__arrow-toggle {$$slots.append ? 'q-select__arrow-toggle--has-append' : ''}"
+    name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
+  />
 
   <slot name="append" />
 

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

@@ -1,9 +1,9 @@
 export const QSelectDocsProps = [
     {
         name: "value",
-        type: "string | string[]",
+        type: "string | string[] | number | number[]",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },

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

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

package/dist/components/separator/docs.js

@@ -0,0 +1,11 @@
+import { QSeparatorPropsVertical } from "./docs.props";
+export let QSeparatorDocs = {
+    name: "QSeparator",
+    description: "Separators can be used to create a dividing line or space between elements within a layout, offering visual separation and organization.",
+    docs: {
+        props: QSeparatorPropsVertical,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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

package/dist/components/tabs/docs.js

@@ -0,0 +1,11 @@
+import { QTabsDocsProps } from "./docs.props";
+export let QTabsDocs = {
+    name: "QTabs",
+    description: "Tabs allow creating navigational tabs, enabling users to switch between different views or functional aspects.",
+    docs: {
+        props: QTabsDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -8,10 +8,10 @@ export const QTabsDocsProps = [
         default: "",
     },
     {
-        name: "vertical",
-        type: "boolean",
+        name: "variant",
+        type: "QTabsVariants",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },
@@ -23,14 +23,6 @@ export const QTabsDocsProps = [
         description: "",
         default: "",
     },
-    {
-        name: "smallIndicator",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
 ];
 export const QTabDocsProps = [
     {