@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha10

package/dist/components/list/QItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QItemProps } from "./props";
 declare const __propDef: {
     props: {
@@ -26,9 +26,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QItemProps = typeof __propDef.props;
+type QItemProps_ = typeof __propDef.props;
+export { QItemProps_ as QItemProps };
 export type QItemEvents = typeof __propDef.events;
 export type QItemSlots = typeof __propDef.slots;
-export default class QItem extends SvelteComponentTyped<QItemProps, QItemEvents, QItemSlots> {
+export default class QItem extends SvelteComponent<QItemProps, QItemEvents, QItemSlots> {
 }
-export {};

package/dist/components/list/QItemSection.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QItemSectionProps } from "./props";
 declare const __propDef: {
     props: {
@@ -17,9 +17,9 @@ declare const __propDef: {
         line3: {};
     };
 };
-export type QItemSectionProps = typeof __propDef.props;
+type QItemSectionProps_ = typeof __propDef.props;
+export { QItemSectionProps_ as QItemSectionProps };
 export type QItemSectionEvents = typeof __propDef.events;
 export type QItemSectionSlots = typeof __propDef.slots;
-export default class QItemSection extends SvelteComponentTyped<QItemSectionProps, QItemSectionEvents, QItemSectionSlots> {
+export default class QItemSection extends SvelteComponent<QItemSectionProps, QItemSectionEvents, QItemSectionSlots> {
 }
-export {};

package/dist/components/list/QList.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QListProps } from "./props";
 declare const __propDef: {
     props: {
@@ -28,9 +28,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QListProps = typeof __propDef.props;
+type QListProps_ = typeof __propDef.props;
+export { QListProps_ as QListProps };
 export type QListEvents = typeof __propDef.events;
 export type QListSlots = typeof __propDef.slots;
-export default class QList extends SvelteComponentTyped<QListProps, QListEvents, QListSlots> {
+export default class QList extends SvelteComponent<QListProps, QListEvents, QListSlots> {
 }
-export {};

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,7 +24,14 @@
 }
 
 .q-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
   min-width: 100%;
+  max-width: 100%;
   min-height: 56px;
   margin-top: 0 !important;
   margin: 0;

package/dist/components/private/ContextReseter.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         keys: string | string[];
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type ContextReseterProps = typeof __propDef.props;
 export type ContextReseterEvents = typeof __propDef.events;
 export type ContextReseterSlots = typeof __propDef.slots;
-export default class ContextReseter extends SvelteComponentTyped<ContextReseterProps, ContextReseterEvents, ContextReseterSlots> {
+export default class ContextReseter extends SvelteComponent<ContextReseterProps, ContextReseterEvents, ContextReseterSlots> {
 }
 export {};

package/dist/components/private/QApi.svelte

@@ -11,7 +11,7 @@ import {
   QDrawer,
   QCodeBlock
 } from "../..";
-import Types from "$utils/types.json";
+import Types from "../../utils/types.json";
 export let QComponentDocs;
 let api = QComponentDocs.map((_doc) => "props");
 let drawer = Object.fromEntries(
@@ -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>
@@ -112,7 +112,9 @@ function handleDrawer(QDocument, doc) {
                   {/if}
                 </span>
               </div>
-              <div slot="line1" class="q-mt-sm prop-description">{@html doc.description}</div>
+              <div slot="line1" class="q-mt-sm prop-description" style="white-space: normal;">
+                {@html doc.description}
+              </div>
             </QItemSection>
           </QItem>
         {/each}
@@ -131,10 +133,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/QApi.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils/types";
 declare const __propDef: {
     props: {
@@ -12,6 +12,6 @@ declare const __propDef: {
 export type QApiProps = typeof __propDef.props;
 export type QApiEvents = typeof __propDef.events;
 export type QApiSlots = typeof __propDef.slots;
-export default class QApi extends SvelteComponentTyped<QApiProps, QApiEvents, QApiSlots> {
+export default class QApi extends SvelteComponent<QApiProps, QApiEvents, QApiSlots> {
 }
 export {};

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/QDocs.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-import type { QComponentDocs } from "$utils/types";
+import { SvelteComponent } from "svelte";
+import type { QComponentDocs } from "../../utils/types";
 declare const __propDef: {
     props: {
         QComponentDocs: QComponentDocs | QComponentDocs[];
@@ -16,6 +16,6 @@ declare const __propDef: {
 export type QDocsProps = typeof __propDef.props;
 export type QDocsEvents = typeof __propDef.events;
 export type QDocsSlots = typeof __propDef.slots;
-export default class QDocs extends SvelteComponentTyped<QDocsProps, QDocsEvents, QDocsSlots> {
+export default class QDocs extends SvelteComponent<QDocsProps, QDocsEvents, QDocsSlots> {
 }
 export {};

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/private/QDocsSection.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  QDocsSectionProps */
 /** @typedef {typeof __propDef.events}  QDocsSectionEvents */
 /** @typedef {typeof __propDef.slots}  QDocsSectionSlots */
-export default class QDocsSection extends SvelteComponentTyped<{
+export default class QDocsSection extends SvelteComponent<{
     title: any;
     snippets: any;
 }, {
@@ -13,7 +13,7 @@ export default class QDocsSection extends SvelteComponentTyped<{
 export type QDocsSectionProps = typeof __propDef.props;
 export type QDocsSectionEvents = typeof __propDef.events;
 export type QDocsSectionSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         title: any;

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

@@ -1,10 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QCircularProgressProps } from "./props";
 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;
@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QCircularProgressProps = typeof __propDef.props;
+type QCircularProgressProps_ = typeof __propDef.props;
+export { QCircularProgressProps_ as QCircularProgressProps };
 export type QCircularProgressEvents = typeof __propDef.events;
 export type QCircularProgressSlots = typeof __propDef.slots;
-export default class QCircularProgress extends SvelteComponentTyped<QCircularProgressProps, QCircularProgressEvents, QCircularProgressSlots> {
+export default class QCircularProgress extends SvelteComponent<QCircularProgressProps, QCircularProgressEvents, QCircularProgressSlots> {
 }
-export {};

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/QLinearProgress.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QLinearProgressProps } from "./props";
 declare const __propDef: {
     props: {
@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QLinearProgressProps = typeof __propDef.props;
+type QLinearProgressProps_ = typeof __propDef.props;
+export { QLinearProgressProps_ as QLinearProgressProps };
 export type QLinearProgressEvents = typeof __propDef.events;
 export type QLinearProgressSlots = typeof __propDef.slots;
-export default class QLinearProgress extends SvelteComponentTyped<QLinearProgressProps, QLinearProgressEvents, QLinearProgressSlots> {
+export default class QLinearProgress extends SvelteComponent<QLinearProgressProps, QLinearProgressEvents, QLinearProgressSlots> {
 }
-export {};

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/radio/QRadio.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QRadioProps } from "./props";
 declare const __propDef: {
     props: {
@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QRadioProps = typeof __propDef.props;
+type QRadioProps_ = typeof __propDef.props;
+export { QRadioProps_ as QRadioProps };
 export type QRadioEvents = typeof __propDef.events;
 export type QRadioSlots = typeof __propDef.slots;
-export default class QRadio extends SvelteComponentTyped<QRadioProps, QRadioEvents, QRadioSlots> {
+export default class QRadio extends SvelteComponent<QRadioProps, QRadioEvents, QRadioSlots> {
 }
-export {};

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

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