@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/components/private/QApi.svelte

@@ -1,61 +1,67 @@
-<script>import {
-  QCard,
-  QIcon,
-  QTabs,
-  QTab,
-  QCardSection,
-  QList,
-  QItem,
-  QItemSection,
-  QDrawer,
-  QCodeBlock
-} from "../..";
-import { capitalize } from "../../utils";
-import Types from "../../utils/types.json";
-export let componentDocs;
-let api = componentDocs.map(() => "props");
-let drawer = Object.fromEntries(
-  componentDocs.map((doc) => [
-    doc.name,
+<script lang="ts">
+  import {
+    QCard,
+    QIcon,
+    QTabs,
+    QTab,
+    QCardSection,
+    QList,
+    QItem,
+    QItemSection,
+    QDrawer,
+    QCodeBlock,
+  } from "../..";
+  import { capitalize } from "../../utils";
+  import Types from "../../utils/types.json";
+  let { componentDocs } = $props();
+  let api = componentDocs.map(() => "props");
+  let drawer = $state(
     Object.fromEntries(
-      doc.docs.props.map((prop) => [prop.name, prop.clickableType ? false : void 0])
-    )
-  ])
-);
-let drawerContent = "";
-function isProp(doc, index) {
-  return api[index] === "props";
-}
-function isEvent(doc, index) {
-  return api[index] === "events";
-}
-function getType(type) {
-  type = type.replace("[]", "");
-  let found = type in Types ? Types[type] : void 0;
-  return found;
-}
-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;
-    }
+      componentDocs.map((doc) => [
+        doc.name,
+        Object.fromEntries(
+          doc.docs.props.map((prop) => [
+            prop.name,
+            prop.clickableType ? false : void 0,
+          ]),
+        ),
+      ]),
+    ),
+  );
+  let drawerContent = $state("");
+  function isProp(doc, index) {
+    return api[index] === "props";
+  }
+  function isEvent(doc, index) {
+    return api[index] === "events";
   }
-  if (!drawer[QDocument.name][doc.name]) {
-    setTimeout(() => {
-      drawerContent = content;
-      drawer[QDocument.name][doc.name] = true;
-    }, 100);
-  } else {
-    drawer[QDocument.name][doc.name] = false;
+  function getType(type) {
+    type = type.replace("[]", "");
+    let found = type in Types ? Types[type] : void 0;
+    return found;
+  }
+  function handleDrawer(QDocument, doc, e) {
+    e.stopPropagation();
+    let content = getType(doc.type);
+    for (let docName in drawer[QDocument.name]) {
+      if (drawer[QDocument.name][docName] && docName !== doc.name) {
+        drawer[QDocument.name][docName] = false;
+      }
+    }
+    if (!drawer[QDocument.name][doc.name]) {
+      setTimeout(() => {
+        drawerContent = content;
+        drawer[QDocument.name][doc.name] = true;
+      }, 100);
+    } else {
+      drawer[QDocument.name][doc.name] = false;
+    }
   }
-}
 </script>
 
 {#each componentDocs as QDocument, index}
   <QCard class="q-px-none q-pb-none q-mt-lg">
-    <div slot="title" class="flex justify-between items-center q-px-md">
+    <div 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>
@@ -78,44 +84,50 @@ function handleDrawer(QDocument, doc, e) {
               <QDrawer
                 side="right"
                 class="no-padding api-drawer"
-                style="height: fit-content; max-height: 400%; overflow: auto; border-radius: 0;"
+                style="height: fit-content; width: 50%; max-height: 400%; overflow: auto; border-radius: 0;"
                 bind:value={drawer[QDocument.name][doc.name]}
-                width="50%"
               >
-                <QCodeBlock language="ts" code={drawerContent} />
+                <QCodeBlock language="typescript" code={drawerContent} />
               </QDrawer>
             {/if}
             <QItemSection type="content" style="overflow: visible">
-              <div slot="headline" class="q-my-sm" style="flex: 1 1 0; white-space: nowrap">
-                <span class="q-pa-sm surface-variant">
-                  <b>{doc.name}</b>
-                  {#if isProp(doc, index)}
-                    {doc.optional ? "?" : ""}
-                    {#if doc.clickableType === true}
-                      <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-                      <span
-                        class="prop-type clickable"
-                        on:click={(e) => isProp(doc, index) && handleDrawer(QDocument, doc, e)}
-                      >
-                        : {doc.type}
-                      </span>
-                    {:else}
+              {#snippet headline()}
+                <div class="q-my-sm" style="flex: 1 1 0; white-space: nowrap">
+                  <span class="q-pa-sm surface-variant">
+                    <b>{doc.name}</b>
+                    {#if isProp(doc, index)}
+                      {doc.optional ? "?" : ""}
+                      {#if doc.clickableType}
+                        <span
+                          class="prop-type clickable"
+                          onclick={(e) =>
+                            isProp(doc, index) &&
+                            handleDrawer(QDocument, doc, e)}
+                        >
+                          : {doc.type}
+                        </span>
+                      {:else}
+                        <span class="prop-type">
+                          : {doc.type}
+                        </span>
+                      {/if}
+                      {doc.default === "" ? "" : ` = ${doc.default}`}
+                    {:else if isEvent(doc, index)}
                       <span class="prop-type">
                         : {doc.type}
                       </span>
                     {/if}
-                    {doc.default === "" ? "" : ` = ${doc.default}`}
-                  {:else if isEvent(doc, index)}
-                    <span class="prop-type">
-                      : {doc.type}
-                    </span>
-                  {/if}
-                </span>
-              </div>
-              <div slot="line1" class="q-mt-sm prop-description" style="white-space: normal;">
-                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                {@html doc.description}
-              </div>
+                  </span>
+                </div>
+              {/snippet}
+              {#snippet line1()}
+                <div
+                  class="q-mt-sm prop-description"
+                  style="white-space: normal;"
+                >
+                  {@html doc.description}
+                </div>
+              {/snippet}
             </QItemSection>
           </QItem>
         {/each}
@@ -124,29 +136,31 @@ function handleDrawer(QDocument, doc, e) {
   </QCard>
 {/each}
 
-<style>.clickable {
-  cursor: pointer;
-}
-.clickable:hover {
-  color: var(--primary);
-}
+<style>
+  .clickable {
+    cursor: pointer;
+  }
+  .clickable:hover {
+    color: var(--primary);
+  }
 
-.prop-type {
-  opacity: 0.75;
-}
-.prop-type.clickable {
-  cursor: pointer;
-}
-.prop-type.clickable:hover {
-  opacity: 1;
-}
+  .prop-type {
+    opacity: 0.75;
+  }
+  .prop-type.clickable {
+    cursor: pointer;
+  }
+  .prop-type.clickable:hover {
+    opacity: 1;
+  }
 
-:global(.q-drawer.api-drawer pre) {
-  margin: 0;
-  border-radius: inherit;
-  white-space: pre-wrap;
-}
+  :global(.q-drawer.api-drawer pre) {
+    margin: 0;
+    border-radius: inherit;
+    white-space: pre-wrap;
+  }
 
-:global(.prop-description > a:hover) {
-  color: var(--primary);
-}</style>
+  :global(.prop-description > a:hover) {
+    color: var(--primary);
+  }
+</style>

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

@@ -1,17 +1,5 @@
-import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils";
-declare const __propDef: {
-    props: {
-        componentDocs: QComponentDocs[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type QApiProps = typeof __propDef.props;
-export type QApiEvents = typeof __propDef.events;
-export type QApiSlots = typeof __propDef.slots;
-export default class QApi extends SvelteComponent<QApiProps, QApiEvents, QApiSlots> {
-}
-export {};
+declare const QApi: import("svelte").Component<{
+    componentDocs: QComponentDocs[];
+}, {}, "">;
+export default QApi;

package/dist/components/private/QDocs.svelte

@@ -1,16 +1,22 @@
-<script>import { Quaff } from "../../stores";
-import { QCard, QCardSection } from "../..";
-import QApi from "./QApi.svelte";
-export let componentDocs;
-$:
-  isDark = $Quaff.dark.isActive;
-let principalDocument = Array.isArray(componentDocs) ? componentDocs[0] : componentDocs;
+<script lang="ts">
+  import { QCard, QCardSection } from "../..";
+  import Quaff from "../../classes/Quaff.svelte";
+  import QApi from "./QApi.svelte";
+  let { children, display, pre, usage, componentDocs } = $props();
+  const isDark = $derived(Quaff.darkMode.isActive);
+  let principalDocument = Array.isArray(componentDocs)
+    ? componentDocs[0]
+    : componentDocs;
 </script>
 
 <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>
+  <div class="row q-gutter-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">{principalDocument.name}</h1>
     </QCard>
     <QCard
       class="q-docs__preview col-sm-12 col-lg-6 q-mt-none q-pa-none"
@@ -22,7 +28,7 @@ let principalDocument = Array.isArray(componentDocs) ? componentDocs[0] : compon
           class="flex flex-center"
           style="position: absolute; height: 100%; width: 100%; z-index: 1;"
         >
-          <slot name="display" />
+          {@render display?.()}
         </div>
         <img
           class="q-docs__image"
@@ -39,46 +45,59 @@ let principalDocument = Array.isArray(componentDocs) ? componentDocs[0] : compon
     </QCard>
   </div>
 
-  <QApi componentDocs={Array.isArray(componentDocs) ? componentDocs : [componentDocs]} />
+  <div class="q-page">
+    <QApi
+      componentDocs={Array.isArray(componentDocs)
+        ? componentDocs
+        : [componentDocs]}
+    />
 
-  {#if $$slots.usage}
-    <div class="s12 q-pa-md">
-      <div class="heading-usage">
-        <h4 class="q-my-xl">Usage</h4>
-      </div>
+    {@render pre?.()}
 
-      <slot name="usage" />
-    </div>
-  {/if}
+    {#if usage}
+      <div class="q-pa-md">
+        <div class="heading-usage">
+          <h4 class="q-my-xl">Usage</h4>
+        </div>
+
+        {@render usage()}
+      </div>
+    {/if}
 
-  <slot />
+    {@render children?.()}
+  </div>
 </div>
 
-<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;
-}
+<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;
+  }
+  .q-docs .q-page {
+    padding-top: 0.5rem;
+  }
 
-.heading-usage {
-  display: flex;
-  align-items: center;
-}</style>
+  .heading-usage {
+    display: flex;
+    align-items: center;
+  }
+</style>

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

@@ -1,21 +1,10 @@
-import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils";
-declare const __propDef: {
-    props: {
-        componentDocs: QComponentDocs | QComponentDocs[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        display: {};
-        usage: {};
-        default: {};
-    };
-};
-export type QDocsProps = typeof __propDef.props;
-export type QDocsEvents = typeof __propDef.events;
-export type QDocsSlots = typeof __propDef.slots;
-export default class QDocs extends SvelteComponent<QDocsProps, QDocsEvents, QDocsSlots> {
-}
-export {};
+import type { Snippet } from "svelte";
+declare const QDocs: import("svelte").Component<{
+    children?: Snippet;
+    display?: Snippet;
+    pre?: Snippet;
+    usage?: Snippet;
+    componentDocs: QComponentDocs | QComponentDocs[];
+}, {}, "">;
+export default QDocs;

package/dist/components/private/QDocsSection.svelte

@@ -1,23 +1,24 @@
-<script>import { QCodeBlock, QDialog } from "../..";
-export let title, snippets = void 0;
-let dialog = false;
+<script lang="ts">
+  import { QCodeBlock, QDialog, QBtn } from "../..";
+  let { title, snippet, children } = $props();
+  let dialog = $state(false);
+  const code = $derived(snippet?.replaceAll(/^ {2}/gm, ""));
 </script>
 
 <div style="margin-bottom:48px">
   <div class="flex justify-between q-mb-md">
     <h5>{title}</h5>
-    {#if snippets}
-      <QDialog
-        class="snippet-dialog"
-        bind:value={dialog}
-        button
-        buttonProps={{ outline: true, round: true, icon: "code" }}
-        on:buttonClick={() => (dialog = true)}
-        modal
-      >
-        <QCodeBlock code={snippets[title]} language="svelte" {title} copiable />
+    {#if code}
+      <QBtn
+        icon="code"
+        design="outlined"
+        round
+        onclick={() => (dialog = true)}
+      />
+      <QDialog class="snippet-dialog" bind:value={dialog} modal>
+        <QCodeBlock {code} language="svelte" {title} copiable />
       </QDialog>
     {/if}
   </div>
-  <slot />
+  {@render children?.()}
 </div>

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title: string;
-        snippets?: Record<string, string> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type QDocsSectionProps = typeof __propDef.props;
-export type QDocsSectionEvents = typeof __propDef.events;
-export type QDocsSectionSlots = typeof __propDef.slots;
-export default class QDocsSection extends SvelteComponent<QDocsSectionProps, QDocsSectionEvents, QDocsSectionSlots> {
-}
-export {};
+import type { Snippet } from "svelte";
+declare const QDocsSection: import("svelte").Component<{
+    title: string;
+    snippet?: string;
+    children?: Snippet;
+}, {}, "">;
+export default QDocsSection;

package/dist/components/private/QIconSnippet.svelte

@@ -0,0 +1,12 @@
+<!-- This component should be used when an icon can be set from props. The icon can either be undefined, a string or a Snippet so this componnet handles it all. -->
+<script lang="ts">
+  import QIcon from "../icon/QIcon.svelte";
+  let { icon, defaultIcon, ...props } = $props();
+  const iconToUse = $derived(icon ?? defaultIcon);
+</script>
+
+{#if typeof iconToUse === "string"}
+  <QIcon name={iconToUse} {...props} />
+{:else}
+  {@render iconToUse?.()}
+{/if}

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

@@ -0,0 +1,8 @@
+import type { QIconProps } from "../icon/props";
+import type { Snippet } from "svelte";
+import type { MaterialSymbol } from "material-symbols";
+declare const QIconSnippet: import("svelte").Component<Omit<QIconProps, "name"> & {
+    icon?: MaterialSymbol | Snippet;
+    defaultIcon?: MaterialSymbol | Snippet;
+}, {}, "">;
+export default QIconSnippet;

package/dist/components/progress/QCircularProgress.scss

@@ -0,0 +1,63 @@
+@use "$css/mixins";
+
+.q-circular-progress {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+
+  height: 1em;
+  width: 1em;
+  font-size: var(--size);
+  line-height: 0;
+
+  &__svg {
+    height: 100%;
+    width: 100%;
+  }
+
+  &--indeterminate {
+    & .q-circular-progress__svg {
+      transform-origin: 50% 50%;
+      animation: q-spin 2s linear infinite;
+
+      & .q-circular-progress__indicator {
+        stroke-dasharray: 1400;
+        stroke-dashoffset: 0;
+        animation: q-load 1.5s ease-in-out infinite;
+      }
+    }
+  }
+}
+
+@keyframes q-spin {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  25% {
+    transform: rotate3d(0, 0, 1, 90deg);
+  }
+  50% {
+    transform: rotate3d(0, 0, 1, 180deg);
+  }
+  75% {
+    transform: rotate3d(0, 0, 1, 270deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 359deg);
+  }
+}
+
+@keyframes q-load {
+  0% {
+    stroke-dasharray: 1, 400;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -300;
+  }
+}