@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha11

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,12 +1,12 @@
-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;
+        indeterminate?: QCircularProgressProps["indeterminate"];
+        size?: QCircularProgressProps["size"];
         color?: QCircularProgressProps["color"];
-        thickness?: number | undefined;
+        thickness?: QCircularProgressProps["thickness"];
         class?: string | undefined;
     };
     events: {
@@ -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,11 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QLinearProgressProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
         value?: number | undefined;
-        from?: "left" | "right" | undefined;
-        rounded?: boolean | undefined;
+        from?: QLinearProgressProps["from"];
+        rounded?: QLinearProgressProps["rounded"];
         class?: string | undefined;
         style?: string | undefined;
     };
@@ -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;
-    from: "left" | "right";
-    rounded: boolean;
+    /**
+     * @default left
+     */
+    from?: "left" | "right";
+    /**
+     * @default false
+     */
+    rounded?: boolean;
 }
 export interface QCircularProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
-    indeterminate: boolean;
-    size: string | number;
+    /**
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * @default 2em
+     */
+    size?: CssValue | number;
+    /**
+     * @default undefined
+     */
     color?: string;
-    thickness: number;
+    /**
+     * @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,12 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QRadioProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string | undefined;
-        label?: string | undefined;
+        label?: QRadioProps["label"];
         selected?: QRadioProps["selected"];
-        disable?: boolean | undefined;
+        disable?: QRadioProps["disable"];
         class?: string | undefined;
     };
     events: {
@@ -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;

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

@@ -1,8 +1,8 @@
 import type { NativeProps } from "../../utils/types";
 export interface QRadioProps extends NativeProps {
     value: string;
-    label: string;
-    selected: any;
-    disable: boolean;
+    label?: string;
+    selected?: any;
+    disable?: boolean;
 }
 export declare const QRadioPropsDefaults: QRadioProps;

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";
+import { derived } from "svelte/store";
 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");
@@ -8,20 +9,23 @@ let drawerType;
 $:
   drawerType = side === "left" ? "drawerLeft" : "drawerRight";
 $:
-  classes = createClasses([
-    "q-railbar",
-    "surface",
-    side,
-    bordered && "bordered",
-    $ctx && $ctx[drawerType].offset.top && "offset-top",
-    $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-    $ctx && $ctx[drawerType].fixed && "fixed",
-    getBorderRadiusClasses(side, $ctx),
-    $ctx && prepareZIndexClass($ctx, side),
-    userClasses
-  ]);
+  classes = createClasses(
+    [
+      side,
+      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-railbar",
+      userClasses
+    }
+  );
 $:
-  widthStyle = ctx === void 0 ? isNumber(width) ? `${width}px` : width : void 0;
+  widthStyle = !$ctx && useSize(width).style;
 $:
   style = createStyles(
     {
@@ -29,22 +33,37 @@ $:
     },
     userStyles
   );
-function getBorderRadiusClasses(sideProp, context) {
-  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
-  return createClasses([
-    context && context[drawerType].offset.top !== false && context && context[drawerType].drawer === false ? prefix + "--top" : void 0,
-    context && context[drawerType].offset.bottom !== false && context && context[drawerType].drawer === false ? prefix + "--bottom" : void 0
-  ]);
-}
-function prepareZIndexClass(context, sideProp) {
-  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
-  let pos;
-  for (pos of ["top", "bottom"]) {
-    if (!drawer.offset[pos] && drawer.overlay) {
-      return "above";
+$:
+  borderRadiusClasses = ctx && // No border radius if this isn't a layout railbar
+  derived(ctx, (context) => {
+    const borderSide = side === "left" ? "right" : "left";
+    const shouldHaveRadius = (pos) => {
+      let appBarEl = pos === "top" ? context["header"] : context["footer"];
+      if (context[drawerType].drawer) {
+        return false;
+      }
+      return !appBarEl?.display || context[drawerType].offset[pos];
+    };
+    return createClasses(
+      [
+        shouldHaveRadius("top") && `top-${borderSide}-radius`,
+        shouldHaveRadius("bottom") && `bottom-${borderSide}-radius`
+      ],
+      {
+        component: "q-railbar"
+      }
+    );
+  });
+$:
+  zIndexClass = ctx && derived(ctx, (context) => {
+    let drawer = side === "left" ? context.drawerLeft : context.drawerRight;
+    let pos;
+    for (pos of ["top", "bottom"]) {
+      if (!drawer.offset[pos] && drawer.overlay) {
+        return "above";
+      }
     }
-  }
-}
+  });
 </script>
 
 <nav class={classes} {style}>