@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

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

@@ -1,33 +1,131 @@
-import { type NativeProps } from "../../utils/types";
-import type { QSeparatorProps } from "../separator/props";
-import { type UseRouterLinkProps } from "../../composables/use-router-link";
-export interface QListProps extends NativeProps {
-    bordered: boolean;
-    roundedBorders: boolean;
-    dense: boolean;
-    separator: boolean;
-    separatorOptions: {
-        spacing?: QSeparatorProps["spacing"];
-        inset?: QSeparatorProps["inset"];
-        color?: QSeparatorProps["color"];
-        size?: QSeparatorProps["size"];
-        text?: QSeparatorProps["text"];
-        textAlign?: QSeparatorProps["textAlign"];
-    };
-    padding: boolean;
+import type { RouterProps } from "../../utils";
+import type { Snippet } from "svelte";
+import type { QSeparatorHorizontalProps } from "../separator/props";
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+export interface QListProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Adds a border around the list.
+     *
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Makes the borders of the list rounded when bordered is true.
+     *
+     * @default false
+     */
+    roundedBorders?: boolean;
+    /**
+     * Makes all the items in the list more compact.
+     *
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Adds separators between list items.
+     *
+     * @default false
+     */
+    separator?: boolean;
+    /**
+     * Options for the separators. These will be applied to all separators in the list.
+     *
+     * @default undefined
+     */
+    separatorOptions?: Omit<QSeparatorHorizontalProps, "vertical">;
+    /**
+     * Adds padding to the list container.
+     *
+     * @default true
+     */
+    padding?: boolean;
+    /**
+     * HTML tag to be used for the list container.
+     *
+     * @default "div"
+     */
     tag?: string;
+    /**
+     * The class to apply to items that are active. For more granular control, you can also use the `activeClass` prop on each QItem.
+     *
+     * @default undefined
+     */
+    activeClass?: string;
 }
-export declare const QListPropsDefaults: QListProps;
-export interface QItemProps extends UseRouterLinkProps, NativeProps {
-    tag: string;
-    active: boolean;
-    clickable: boolean;
-    dense: boolean;
-    tabindex: string | number;
+export interface QItemProps extends RouterProps, HTMLAttributes<HTMLElement> {
+    /**
+     * HTML tag to be used for the list item.
+     *
+     * @default "div"
+     */
+    tag?: string;
+    /**
+     * Indicates if the item is currently active.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Makes the item clickable and adds hover effects.
+     *
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Makes the item more compact.
+     *
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Disables the ripple effect when clicking the item.
+     *
+     * @default false
+     */
+    noRipple?: boolean;
+    /**
+     * Tab index for keyboard navigation.
+     *
+     * @default 0
+     */
+    tabindex?: HTMLAttributes<HTMLElement>["tabindex"];
+    /**
+     * Target attribute for anchor tags when using router links.
+     *
+     * @default undefined
+     */
+    target?: HTMLAnchorAttributes["target"];
 }
-export declare const QItemPropsDefaults: QItemProps;
 export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
-export interface QItemSectionProps extends NativeProps {
-    type: QItemSectionTypes;
+export interface QItemSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Type of the section, determines its layout and styling.
+     *
+     * @default "content"
+     */
+    type?: QItemSectionTypes;
+    /**
+     * Main content or title of the section. By default, inherits the content of the children snippet.
+     *
+     * @default children
+     */
+    headline?: Snippet;
+    /**
+     * First line of supporting text.
+     *
+     * @default undefined
+     */
+    line1?: Snippet;
+    /**
+     * Second line of supporting text.
+     *
+     * @default undefined
+     */
+    line2?: Snippet;
+    /**
+     * Third line of supporting text.
+     *
+     * @default undefined
+     */
+    line3?: Snippet;
 }
-export declare const QItemSectionPropsDefaults: QItemSectionProps;

package/dist/components/list/props.js

@@ -1,25 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-import { UseRouterLinkPropsDefaults, } from "../../composables/use-router-link";
-export const QListPropsDefaults = {
-    bordered: false,
-    roundedBorders: false,
-    dense: false,
-    separator: false,
-    separatorOptions: {},
-    padding: false,
-    tag: "div",
-    ...NativePropsDefaults,
-};
-export const QItemPropsDefaults = {
-    tag: "div",
-    active: false,
-    clickable: false,
-    dense: false,
-    tabindex: 0,
-    ...UseRouterLinkPropsDefaults,
-    ...NativePropsDefaults,
-};
-export const QItemSectionPropsDefaults = {
-    type: "content",
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/private/ContextReseter.svelte

@@ -1,13 +1,17 @@
-<script>import { setContext } from "svelte";
-export let keys;
-$:
-  if (Array.isArray(keys)) {
-    for (let key of keys) {
-      setContext(key, void 0);
-    }
-  } else {
-    setContext(keys, void 0);
-  }
+<script lang="ts">
+  import { QContext } from "../../classes/QContext.svelte";
+  import type { Snippet } from "svelte";
+
+  let {
+    keys,
+    children,
+  }: {
+    keys: symbol | symbol[];
+    children?: Snippet;
+  } = $props();
+
+  const keysArr = Array.isArray(keys) ? keys : [keys];
+  keysArr.forEach((key) => QContext.reset(key));
 </script>
 
-<slot />
+{@render children?.()}

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

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

package/dist/components/private/QApi.svelte

@@ -1,67 +1,218 @@
-<script>import { capitalize } from "../../utils/string";
-import {
-  QCard,
-  QIcon,
-  QTabs,
-  QTab,
-  QCardSection,
-  QList,
-  QItem,
-  QItemSection,
-  QDrawer,
-  QCodeBlock
-} from "../..";
-import Types from "../../utils/types.json";
-export let QComponentDocs;
-let api = QComponentDocs.map((_doc) => "props");
-let drawer = Object.fromEntries(
-  QComponentDocs.map((doc) => [
-    doc.name,
-    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;
+<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;
   }
-  if (!drawer[QDocument.name][doc.name]) {
-    setTimeout(() => {
-      drawerContent = content;
-      drawer[QDocument.name][doc.name] = true;
-    }, 100);
-  } else {
-    drawer[QDocument.name][doc.name] = false;
+
+  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 QComponentDocs as QDocument, index}
+{#each componentDocs as QDocument, index (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>
       </h5>
-      <QTabs bind:value={api[index]} class="no-margin">
-        {#each Object.entries(QDocument.docs) as [tabName, _tabDoc]}
+      <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>
@@ -70,49 +221,41 @@ function handleDrawer(QDocument, doc, e) {
         {/each}
       </QTabs>
     </div>
-    <QCardSection style="max-height: 416px; overflow-y: scroll">
-      <QList separator bordered style="overflow:hidden">
-        {#each QDocument.docs[api[index]] as doc}
-          <QItem style="overflow: visible">
-            {#if isProp(doc, index) && doc.clickableType}
-              <QDrawer
-                side="right"
-                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%"
-              >
-                <QCodeBlock language="ts" 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>
+    <QCardSection style="max-height: 416px; overflow-y: auto">
+      <QList separator bordered style="overflow-x:auto">
+        {#each QDocument.docs[api[index]] as doc (doc)}
+          <QItem>
+            <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)}
-                    {doc.optional ? "?" : ""}
-                    {#if doc.clickableType === true}
-                      <!-- svelte-ignore a11y-click-events-have-key-events -->
-                      <span
-                        class="prop-type clickable"
-                        on:click={(e) => isProp(doc, index) && handleDrawer(QDocument, doc, e)}
-                      >
-                        : {doc.type}
-                      </span>
-                    {:else}
-                      <span class="prop-type">
-                        : {doc.type}
-                      </span>
-                    {/if}
-                    {doc.default === "" ? "" : ` = ${doc.default}`}
+                    {@html prepareHeaderForProp(doc)}
+                  {:else if isSnippet(doc, index)}
+                    {@html prepareHeaderForSnippet(doc)}
                   {:else if isEvent(doc, index)}
                     <span class="prop-type">
                       : {doc.type}
                     </span>
                   {/if}
-                </span>
-              </div>
-              <div slot="line1" class="q-mt-sm prop-description">{@html doc.description}</div>
+                </div>
+              {/snippet}
+              {#snippet line1()}
+                <div
+                  class="q-mt-sm prop-description"
+                  style="white-space: normal;"
+                >
+                  {@html doc.description}
+                </div>
+              {/snippet}
             </QItemSection>
           </QItem>
         {/each}
@@ -121,23 +264,33 @@ function handleDrawer(QDocument, doc, e) {
   </QCard>
 {/each}
 
-<style>.clickable {
-  cursor: pointer;
-}
-.clickable:hover {
-  color: var(--primary);
-}
-
-.q-item {
-  overflow: visible;
-}
-
-:global(.q-drawer.api-drawer pre) {
-  margin: 0;
-  border-radius: inherit;
-  white-space: pre-wrap;
-}
-
-:global(.prop-description > a:hover) {
-  color: var(--primary);
-}</style>
+<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,9 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { QComponentDocs } from "../../utils/types";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        QComponentDocs: QComponentDocs[];
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -12,6 +9,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 SvelteComponent<QApiProps, QApiEvents, QApiSlots> {
+export default class QApi extends SvelteComponentTyped<QApiProps, QApiEvents, QApiSlots> {
 }
 export {};