@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta13

package/dist/components/private/QApi.svelte

@@ -1,296 +0,0 @@
-<script lang="ts">
-  import { createRawSnippet, mount, tick } from "svelte";
-  import Types from "../../utils/types.json";
-  import {
-    QCard,
-    QCardSection,
-    QIcon,
-    QItem,
-    QItemSection,
-    QList,
-    QTab,
-    QTabs,
-    QTooltip,
-    Quaff,
-  } from "../..";
-  import { capitalize, escape } from "../../utils";
-  import type {
-    QComponentDocs,
-    QComponentEvent,
-    QComponentMethod,
-  } from "../../utils";
-  import type { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
-
-  let { componentDocs }: { componentDocs: QComponentDocs[] } = $props();
-
-  let api: (keyof QComponentDocs["docs"])[] = $state(
-    componentDocs.map(() => "props"),
-  );
-
-  function getType(type: string) {
-    type = type.replace("[]", "");
-    let found = type in Types ? Types[type as keyof typeof Types] : undefined;
-    return found;
-  }
-
-  function isProp(
-    doc: ParsedProp | ParsedSnippet | QComponentEvent | QComponentMethod,
-    index: number,
-  ): doc is ParsedProp {
-    return api[index] === "props";
-  }
-
-  function isEvent(
-    doc: ParsedProp | ParsedSnippet | QComponentEvent | QComponentMethod,
-    index: number,
-  ): doc is QComponentEvent {
-    return api[index] === "events";
-  }
-
-  function isSnippet(
-    doc: ParsedProp | ParsedSnippet | QComponentEvent | QComponentMethod,
-    index: number,
-  ): doc is ParsedSnippet {
-    return api[index] === "snippets";
-  }
-
-  function inSpan(
-    spanContent: string,
-    { typeStyle = false, isClickable = false, typeName = "" } = {},
-  ) {
-    const classes = [
-      typeStyle && "prop-type",
-      isClickable && "clickable",
-    ].filter(Boolean);
-    const classString = classes.length ? ` class="${classes.join(" ")}"` : "";
-
-    const dataAttrs = isClickable
-      ? ` data-quaff data-type-name="${escape(typeName)}"`
-      : "";
-
-    return `<span${classString}${dataAttrs}>${spanContent}</span>`;
-  }
-
-  function prepareHeaderForSnippet(snippet: ParsedSnippet) {
-    let content = "<pre>";
-
-    if (snippet.optional) {
-      content += inSpan("?.", { typeStyle: true });
-    }
-
-    content += inSpan("(", { typeStyle: true });
-
-    if (snippet.type.length) {
-      content += inSpan("{ ", { typeStyle: true });
-
-      content += snippet.type
-        .map((arg) => {
-          return inSpan(escape(arg.propName)).concat(
-            inSpan(": "),
-            inSpan(escape(arg.name), {
-              typeStyle: true,
-              isClickable: arg.isClickable,
-              typeName: arg.name,
-            }),
-          );
-        })
-        .join(", ");
-
-      content += inSpan(" }", { typeStyle: true });
-    }
-
-    content += inSpan(")", { typeStyle: true });
-
-    content += "</pre>";
-
-    return content;
-  }
-
-  function prepareHeaderForProp(prop: ParsedProp) {
-    let content = "<pre>";
-
-    if (prop.optional) {
-      content += inSpan("?", { typeStyle: true });
-    }
-
-    content += inSpan(": ", { typeStyle: true });
-
-    if (prop.isArray && Array.isArray(prop.type)) {
-      content += inSpan("(", { typeStyle: true });
-    }
-
-    if (Array.isArray(prop.type)) {
-      content += prop.type
-        .map((type) =>
-          inSpan(escape(type.name), {
-            typeStyle: true,
-            isClickable: type.isClickable,
-            typeName: type.name,
-          }),
-        )
-        .join(" | ");
-    } else {
-      content += inSpan(escape(prop.type.name), {
-        typeStyle: true,
-        isClickable: prop.type.isClickable,
-        typeName: prop.type.name,
-      });
-    }
-
-    if (prop.isArray) {
-      if (Array.isArray(prop.type)) {
-        content += inSpan(")", { typeStyle: true });
-      }
-
-      content += inSpan("[]", { typeStyle: true });
-    }
-
-    if (prop.default) {
-      content += inSpan(` = ${prop.default}`);
-    }
-
-    content += "</pre>";
-
-    return content;
-  }
-
-  async function attachTooltips() {
-    await tick();
-
-    document.querySelectorAll("span.clickable").forEach(async (el) => {
-      const typeName = el.getAttribute("data-type-name");
-
-      if (!typeName) {
-        return;
-      }
-
-      const type = getType(typeName) || "/* No definition found */";
-
-      const { codeToHtml } = await import("shiki");
-
-      const html = await codeToHtml(type, {
-        lang: "typescript",
-        theme: Quaff.darkMode.isActive
-          ? "github-dark-default"
-          : "github-light-default",
-        transformers: [
-          {
-            pre(node) {
-              node.properties.style += ";padding: 1rem; text-align: left;";
-            },
-          },
-        ],
-      });
-
-      const snip = createRawSnippet(() => ({
-        render: () => html,
-      }));
-
-      mount(QTooltip, {
-        target: el,
-        props: {
-          class: "q-pa-none transparent",
-          children: snip,
-        },
-      });
-    });
-  }
-
-  $effect(() => {
-    // Doesn't rerun if we don't use JSON.stringify
-    JSON.stringify(api);
-
-    attachTooltips();
-  });
-</script>
-
-{#each componentDocs as QDocument, index (index)}
-  <QCard class="q-px-none q-pb-none q-mt-lg">
-    <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>
-      </h5>
-      <QTabs bind:value={api[index]} noSeparator class="no-margin">
-        {#each Object.entries(QDocument.docs) as [tabName, _tabDoc] (tabName)}
-          {#if _tabDoc.length !== 0}
-            <QTab name={tabName} style="min-width: 100px">
-              <h6 style="margin: 0">{capitalize(tabName)}</h6>
-            </QTab>
-          {/if}
-        {/each}
-      </QTabs>
-    </div>
-    <QCardSection style="max-height: 416px; overflow-y: auto">
-      <QList separator bordered>
-        {#each QDocument.docs[api[index]] as doc (doc)}
-          <QItem style="overflow-x: auto">
-            <QItemSection type="content">
-              {#snippet headline()}
-                <div
-                  class="q-my-sm flex-center"
-                  style="display: flex; flex: 1 1 0"
-                >
-                  <span
-                    class="q-px-sm q-py-xs q-mr-xs"
-                    style="background-color: var(--surface-container); border-radius: 0.5rem"
-                  >
-                    <b>{doc.name}</b>
-                  </span>
-                  {#if isProp(doc, index)}
-                    {@html prepareHeaderForProp(doc)}
-                  {:else if isSnippet(doc, index)}
-                    {@html prepareHeaderForSnippet(doc)}
-                  {:else if isEvent(doc, index)}
-                    <span class="prop-type">
-                      : {doc.type}
-                    </span>
-                  {/if}
-                </div>
-              {/snippet}
-              {#snippet line1()}
-                <div
-                  class="q-mt-sm prop-description"
-                  style="white-space: normal;"
-                >
-                  {@html doc.description}
-                </div>
-              {/snippet}
-            </QItemSection>
-          </QItem>
-        {/each}
-      </QList>
-    </QCardSection>
-  </QCard>
-{/each}
-
-<style>
-  :global(.clickable) {
-    cursor: pointer;
-  }
-  :global(.clickable):hover {
-    color: var(--primary);
-  }
-
-  :global(.prop-type) {
-    opacity: 0.75;
-    width: 100%;
-    letter-spacing: 0.5px;
-  }
-  :global(.prop-type):global(.clickable) {
-    cursor: pointer;
-  }
-  :global(.prop-type):global(.clickable):hover {
-    opacity: 1;
-  }
-
-  :global(.q-drawer.api-drawer pre) {
-    margin: 0;
-    border-radius: inherit;
-    white-space: pre-wrap;
-  }
-
-  :global(.prop-description > a:hover) {
-    color: var(--primary);
-  }
-</style>

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    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 SvelteComponentTyped<QApiProps, QApiEvents, QApiSlots> {
-}
-export {};

package/dist/components/private/QDocs.svelte

@@ -1,155 +0,0 @@
-<script lang="ts">
-  import { setContext, type Snippet } from "svelte";
-  import { QCard, QCardSection, QTheme, Quaff } from "../..";
-  import { QColors, QDocsCtxName, type QComponentDocs } from "../../utils";
-  import QApi from "./QApi.svelte";
-
-  let {
-    children,
-    display,
-    pre,
-    usage,
-    snippets,
-    componentDocs,
-    docName,
-    docDescription,
-  }: {
-    children?: Snippet;
-    display?: Snippet;
-    pre?: Snippet;
-    usage?: Snippet;
-    snippets?: Record<string, string>;
-    componentDocs?: QComponentDocs | QComponentDocs[];
-    docName?: string;
-    docDescription?: string;
-  } = $props();
-
-  const isDark = $derived(Quaff.darkMode.isActive);
-
-  const hueRotate = $derived(
-    QColors.calculateHueRotate(
-      "#ec6b08",
-      QTheme.themeColors[`primary-${isDark ? "dark" : "light"}`],
-    ),
-  );
-
-  if (snippets) {
-    setContext(QDocsCtxName.snippets, () => snippets);
-  }
-
-  let principalDocument = Array.isArray(componentDocs)
-    ? componentDocs[0]
-    : componentDocs;
-
-  const brightness = $derived(Quaff.darkMode.isActive ? 0.7 : 1.2);
-</script>
-
-<div
-  class="q-docs"
-  style="padding: 1rem; --q-hue-rotate: {hueRotate}deg; --q-brightness: {brightness}; max-width: {Quaff
-    .breakpoints.lg}px; margin: auto;"
->
-  <div class="row q-gutter-lg" style="min-height: 400px">
-    <QCard
-      class="col-sm-12 col-xs-12 col-lg-6"
-      fill="primary"
-      style="min-height: 400px; align-content: center;"
-    >
-      <h1
-        class={[
-          "no-margin justify-center",
-          Quaff.breakpoints.isMoreThan("sm", true) ? "large" : "small",
-        ]}
-      >
-        {docName || principalDocument?.name}
-      </h1>
-      <QCardSection class="q-docs__description flex flex-center">
-        <h3 class="q-docs__description-text">
-          {docDescription || principalDocument?.description}
-        </h3>
-      </QCardSection>
-    </QCard>
-    <QCard
-      class="q-docs__preview col-sm-12 col-xs-12 col-lg-6 q-mt-none q-pa-none"
-      fill="secondary"
-      style="min-height: 400px"
-    >
-      <QCardSection class="q-pa-none">
-        <div
-          class="flex flex-center column"
-          style="position: absolute; height: 100%; width: 100%; z-index: 1; overflow: hidden;"
-        >
-          {@render display?.()}
-        </div>
-        <img
-          class="q-docs__image"
-          src="/cocktail-close-up.jpg"
-          alt="Close-up of the content of a cocktail"
-        />
-      </QCardSection>
-    </QCard>
-  </div>
-
-  <div class="q-page">
-    {#if componentDocs}
-      <QApi
-        componentDocs={Array.isArray(componentDocs)
-          ? componentDocs
-          : [componentDocs]}
-      />
-    {/if}
-
-    {@render pre?.()}
-
-    {#if usage}
-      <div class="q-pa-md">
-        <div class="heading-usage">
-          <h4 class="q-my-xl">Usage</h4>
-        </div>
-
-        {@render usage()}
-      </div>
-    {/if}
-
-    {@render children?.()}
-  </div>
-</div>
-
-<style>
-  .q-docs :global(.q-pa-none) {
-    padding: 0 !important;
-  }
-  .q-docs :global(code:not(pre > code)) {
-    background-color: var(--surface-container);
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-  }
-  .q-docs__image {
-    width: 100%;
-    height: 25rem;
-    object-fit: cover;
-    filter: hue-rotate(var(--q-hue-rotate)) brightness(var(--q-brightness));
-  }
-  .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;
-    text-align: center;
-  }
-  .q-docs .q-page {
-    padding-top: 0.5rem;
-  }
-
-  .heading-usage {
-    display: flex;
-    align-items: center;
-  }
-</style>

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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 {};

package/dist/components/private/QDocsSection.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import { getContext, type Snippet } from "svelte";
-  import { QBtn, QCodeBlock, QDialog } from "../..";
-  import { QDocsCtxName } from "../../utils";
-
-  type QDocsSectionProps = {
-    title: string;
-    sectionDescription?: Snippet;
-    children?: Snippet;
-    noCode?: boolean;
-  };
-
-  let {
-    title,
-    noCode = false,
-    sectionDescription,
-    children,
-  }: QDocsSectionProps = $props();
-
-  const snippets = getContext<undefined | (() => Record<string, string>)>(
-    QDocsCtxName.snippets,
-  );
-
-  const code = $derived(snippets && snippets()[title]);
-
-  let dialog = $state(false);
-
-  // Create a kebab-case id from the title to be able to link to this section
-  const id = $derived(title.toLowerCase().replaceAll(" ", "-"));
-</script>
-
-<div {id} style="margin-bottom:48px">
-  <div class="flex justify-between q-mb-sm">
-    <h5>{title}</h5>
-    {#if code && !noCode}
-      <QBtn
-        icon="code"
-        variant="outlined"
-        round
-        onclick={() => (dialog = true)}
-      />
-      <QDialog
-        class="snippet-dialog"
-        bind:value={dialog}
-        modal
-        style="max-width: 75vw"
-      >
-        <QCodeBlock {code} language="svelte" {title} copiable />
-      </QDialog>
-    {/if}
-  </div>
-
-  {#if sectionDescription}
-    <div class="q-mb-md" style="text-wrap: balance">
-      {@render sectionDescription()}
-    </div>
-  {/if}
-
-  <div class="q-ma-sm">
-    {@render children?.()}
-  </div>
-</div>

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QDocsSectionProps_ = typeof __propDef.props;
-export { QDocsSectionProps_ as QDocsSectionProps };
-export type QDocsSectionEvents = typeof __propDef.events;
-export type QDocsSectionSlots = typeof __propDef.slots;
-export default class QDocsSection extends SvelteComponentTyped<QDocsSectionProps_, QDocsSectionEvents, QDocsSectionSlots> {
-}

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type QIconSnippetProps = typeof __propDef.props;
-export type QIconSnippetEvents = typeof __propDef.events;
-export type QIconSnippetSlots = typeof __propDef.slots;
-export default class QIconSnippet extends SvelteComponentTyped<QIconSnippetProps, QIconSnippetEvents, QIconSnippetSlots> {
-}
-export {};

package/dist/components/private/index.d.ts

@@ -1,6 +0,0 @@
-import ContextReseter from "./ContextReseter.svelte";
-import QApi from "./QApi.svelte";
-import QDocs from "./QDocs.svelte";
-import QDocsSection from "./QDocsSection.svelte";
-import QIconSnippet from "./QIconSnippet.svelte";
-export { ContextReseter, QApi, QDocs, QDocsSection, QIconSnippet };

package/dist/components/private/index.js

@@ -1,6 +0,0 @@
-import ContextReseter from "./ContextReseter.svelte";
-import QApi from "./QApi.svelte";
-import QDocs from "./QDocs.svelte";
-import QDocsSection from "./QDocsSection.svelte";
-import QIconSnippet from "./QIconSnippet.svelte";
-export { ContextReseter, QApi, QDocs, QDocsSection, QIconSnippet };

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

@@ -1,5 +0,0 @@
-import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
-export declare const QLinearProgressDocsProps: ParsedProp[];
-export declare const QLinearProgressDocsSnippets: ParsedSnippet[];
-export declare const QCircularProgressDocsProps: ParsedProp[];
-export declare const QCircularProgressDocsSnippets: ParsedSnippet[];