@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/list/docs.props.js

@@ -1,16 +1,18 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c756ee7a64d9843e3adb179c354d8a5f
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "Q.Size",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -18,7 +20,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "vertical",
         type: "true",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -34,7 +36,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +52,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "textAlign",
         type: '"top" | "middle" | "bottom"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -59,16 +61,16 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "Q.Size",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -76,7 +78,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "vertical",
         type: "false",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -92,7 +94,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -108,7 +110,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "textAlign",
         type: '"left" | "center" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -118,7 +120,7 @@ export const QListDocsProps = [
     {
         name: "bordered",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -126,7 +128,7 @@ export const QListDocsProps = [
     {
         name: "roundedBorders",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -134,7 +136,7 @@ export const QListDocsProps = [
     {
         name: "dense",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -142,15 +144,15 @@ export const QListDocsProps = [
     {
         name: "separator",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
     {
         name: "separatorOptions",
-        type: 'QSeparatorProps["textAlign"]\r\n  };',
-        optional: false,
+        type: 'QSeparatorProps["textAlign"]\n  };',
+        optional: true,
         clickableType: true,
         description: "",
         default: "",
@@ -158,7 +160,7 @@ export const QListDocsProps = [
     {
         name: "padding",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -176,7 +178,7 @@ export const QItemDocsProps = [
     {
         name: "tag",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -184,7 +186,7 @@ export const QItemDocsProps = [
     {
         name: "active",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -192,7 +194,7 @@ export const QItemDocsProps = [
     {
         name: "clickable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -200,25 +202,73 @@ export const QItemDocsProps = [
     {
         name: "dense",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
     {
-        name: "tabindex",
-        type: "string | number",
-        optional: false,
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
+    {
+        name: "tabindex",
+        type: 'HTMLAttributes<HTMLElement>["tabindex"]',
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "target",
+        type: 'HTMLAnchorAttributes["target"]',
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];
 export const QItemSectionDocsProps = [
     {
         name: "type",
         type: "QItemSectionTypes",
-        optional: false,
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "headline",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "line1",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "line2",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "line3",
+        type: "Snippet",
+        optional: true,
         clickableType: true,
         description: "",
         default: "",

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

@@ -1,12 +1,13 @@
-import { type NativeProps } from "../../utils/types";
+import type { RouterProps } from "../../utils/router";
+import type { Snippet } from "svelte";
 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: {
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+export interface QListProps extends HTMLAttributes<HTMLElement> {
+    bordered?: boolean;
+    roundedBorders?: boolean;
+    dense?: boolean;
+    separator?: boolean;
+    separatorOptions?: {
         spacing?: QSeparatorProps["spacing"];
         inset?: QSeparatorProps["inset"];
         color?: QSeparatorProps["color"];
@@ -14,20 +15,23 @@ export interface QListProps extends NativeProps {
         text?: QSeparatorProps["text"];
         textAlign?: QSeparatorProps["textAlign"];
     };
-    padding: boolean;
+    padding?: boolean;
     tag?: 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> {
+    tag?: string;
+    active?: boolean;
+    clickable?: boolean;
+    dense?: boolean;
+    noRipple?: boolean;
+    tabindex?: HTMLAttributes<HTMLElement>["tabindex"];
+    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?: QItemSectionTypes;
+    headline?: Snippet;
+    line1?: Snippet;
+    line2?: Snippet;
+    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,8 @@
-<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";
+  let { keys, children } = $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,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        keys: string | string[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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 {};
+import type { Snippet } from "svelte";
+declare const ContextReseter: import("svelte").Component<{
+    keys: string | string[];
+    children?: Snippet;
+}, {}, "">;
+export default ContextReseter;

package/dist/components/private/QApi.svelte

@@ -1,61 +1,67 @@
-<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,
+<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) {
-  let content = getType(doc.type);
-  if (!drawer[QDocument.name][doc.name]) {
-    drawerContent = content;
-    drawer[QDocument.name][doc.name] = true;
-  } else {
-    if (content !== drawerContent) {
-      drawer[QDocument.name][doc.name] = 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";
+  }
+  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;
-      }, 250);
+      }, 100);
     } else {
       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">
+{#each componentDocs as QDocument, 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>
@@ -64,7 +70,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,42 +83,51 @@ function handleDrawer(QDocument, doc) {
             {#if isProp(doc, index) && doc.clickableType}
               <QDrawer
                 side="right"
-                class="no-padding"
-                style="height: fit-content; max-height: 400%; overflow: auto; border-radius: 0;"
+                class="no-padding api-drawer"
+                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=" small-padding surface-variant small-round">
-                  <b>{doc.name}</b>
-                  {#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={() => isProp(doc, index) && handleDrawer(QDocument, doc)}
-                      >
-                        : {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">{@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}
@@ -121,22 +136,31 @@ function handleDrawer(QDocument, doc) {
   </QCard>
 {/each}
 
-<style>.clickable {
-  cursor: pointer;
-}
-.clickable:hover {
-  color: var(--primary);
-}
+<style>
+  .clickable {
+    cursor: pointer;
+  }
+  .clickable:hover {
+    color: var(--primary);
+  }
 
-.q-item {
-  overflow: visible;
-}
-pre[class*=language-] {
-  margin: 0;
-  padding: 1em;
-  border-radius: inherit;
-}
+  .prop-type {
+    opacity: 0.75;
+  }
+  .prop-type.clickable {
+    cursor: pointer;
+  }
+  .prop-type.clickable:hover {
+    opacity: 1;
+  }
 
-:global(.prop-description > a:hover) {
-  color: var(--primary);
-}</style>
+  :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,17 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { QComponentDocs } from "../../utils/types";
-declare const __propDef: {
-    props: {
-        QComponentDocs: 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 {};
+import type { QComponentDocs } from "../../utils";
+declare const QApi: import("svelte").Component<{
+    componentDocs: QComponentDocs[];
+}, {}, "">;
+export default QApi;