@quaffui/quaff 0.1.0-prealpha21 → 0.1.0-prealpha22

package/dist/components/layout/QLayout.svelte

@@ -2,6 +2,40 @@
   import { setContext } from "svelte";
   import QContext from "../../classes/QContext.svelte";
   import ContextReseter from "../private/ContextReseter.svelte";
+  import type { QLayoutProps } from "./props";
+
+  export interface DrawerContextLegacy {
+    offset: {
+      top: boolean;
+      bottom: boolean;
+    };
+    fixed: boolean;
+    railbar: boolean;
+    drawer: boolean;
+    overlay: boolean;
+  }
+
+  export interface AppbarContext {
+    height: number;
+    collapsed: boolean;
+  }
+
+  export interface DrawerContext {
+    width: number;
+    takesSpace: boolean;
+  }
+
+  export interface AppbarContextLegacy {
+    display: boolean;
+    fixed: boolean;
+  }
+
+  export type LayoutContext = {
+    header?: AppbarContextLegacy;
+    footer?: AppbarContextLegacy;
+    drawerLeft: DrawerContextLegacy;
+    drawerRight: DrawerContextLegacy;
+  };
 </script>
 
 <script lang="ts">
@@ -18,36 +52,42 @@
     onresize,
     children,
     ...props
-  } = $props();
+  }: QLayoutProps = $props();
+
   setContext("view", {
     get value() {
       return view;
     },
   });
-  const headerCtx = new QContext("QHeader", {
+
+  const headerCtx = new QContext<AppbarContext>("QHeader", {
     height: 0,
     collapsed: false,
   });
-  const footerCtx = new QContext("QFooter", {
+
+  const footerCtx = new QContext<AppbarContext>("QFooter", {
     height: 0,
     collapsed: false,
   });
-  const leftRailbarCtx = new QContext("QRailbar-left", {
+
+  const leftRailbarCtx = new QContext<DrawerContext>("QRailbar-left", {
     width: 0,
     takesSpace: false,
   });
-  const rightRailbarCtx = new QContext("QRailbar-right", {
+  const rightRailbarCtx = new QContext<DrawerContext>("QRailbar-right", {
     width: 0,
     takesSpace: false,
   });
-  const leftDrawerCtx = new QContext("QDrawer-left", {
+
+  const leftDrawerCtx = new QContext<DrawerContext>("QDrawer-left", {
     width: 0,
     takesSpace: false,
   });
-  const rightDrawerCtx = new QContext("QDrawer-right", {
+  const rightDrawerCtx = new QContext<DrawerContext>("QDrawer-right", {
     width: 360,
     takesSpace: false,
   });
+
   const topOffset = $derived(
     !header || headerCtx.value.collapsed ? 0 : headerCtx.value.height,
   );
@@ -60,10 +100,12 @@
   const rightOffset = $derived(
     handleDrawerCtx(rightRailbarCtx) + handleDrawerCtx(rightDrawerCtx),
   );
+
   const contentMargin = $derived(
     `${header ? topOffset : 0}px ${rightOffset}px ${footer ? bottomOffset : 0}px ${leftOffset}px`,
   );
-  function handleDrawerCtx(ctx) {
+
+  function handleDrawerCtx(ctx: QContext<DrawerContext>) {
     return ctx.value.takesSpace ? ctx.value.width : 0;
   }
 </script>

package/dist/components/layout/QLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { QLayoutProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 export interface DrawerContextLegacy {
     offset: {
         top: boolean;
@@ -27,5 +27,16 @@ export type LayoutContext = {
     drawerLeft: DrawerContextLegacy;
     drawerRight: DrawerContextLegacy;
 };
-declare const QLayout: import("svelte").Component<QLayoutProps, {}, "">;
-export default QLayout;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QLayoutProps_ = typeof __propDef.props;
+export { QLayoutProps_ as QLayoutProps };
+export type QLayoutEvents = typeof __propDef.events;
+export type QLayoutSlots = typeof __propDef.slots;
+export default class QLayout extends SvelteComponentTyped<QLayoutProps_, QLayoutEvents, QLayoutSlots> {
+}

package/dist/components/list/QItem.svelte

@@ -4,6 +4,8 @@
   import { ripple } from "../../helpers/ripple";
   import QContext from "../../classes/QContext.svelte";
   import QSeparator from "../separator/QSeparator.svelte";
+  import type { QItemProps, QListProps } from "./props";
+
   let {
     tag = "div",
     active = false,
@@ -18,7 +20,8 @@
     noRipple = false,
     children,
     ...props
-  } = $props();
+  }: QItemProps = $props();
+
   const routerInfo = $derived(
     getRouterInfo({
       href,
@@ -28,12 +31,18 @@
       replace,
     }),
   );
+
   const multiline = new QContext("multiline", false);
-  const separatorOptions = getContext("separator");
+
+  const separatorOptions = getContext<
+    QListProps["separatorOptions"] | undefined
+  >("separator");
+
   const isActionable = $derived(
     clickable || routerInfo.hasLink || tag === "label",
   );
   const isClickable = $derived(isActionable && !disabled);
+
   const isActive = $derived(
     $isRouteActive(to || href) || (routerInfo.hasLink && active),
   );

package/dist/components/list/QItem.svelte.d.ts

@@ -1,3 +1,14 @@
-import type { QItemProps } from "./props";
-declare const QItem: import("svelte").Component<QItemProps, {}, "">;
-export default QItem;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QItemProps_ = typeof __propDef.props;
+export { QItemProps_ as QItemProps };
+export type QItemEvents = typeof __propDef.events;
+export type QItemSlots = typeof __propDef.slots;
+export default class QItem extends SvelteComponentTyped<QItemProps_, QItemEvents, QItemSlots> {
+}

package/dist/components/list/QItemSection.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import QContext from "../../classes/QContext.svelte";
+  import type { Snippet } from "svelte";
+  import type { QItemSectionProps } from "./props";
+
   let {
     type = "content",
     children,
@@ -8,8 +11,10 @@
     line2,
     line3,
     ...props
-  } = $props();
-  const multiline = QContext.get("multiline");
+  }: QItemSectionProps = $props();
+
+  const multiline = QContext.get<boolean>("multiline");
+
   $effect(() => {
     if (type === "content") {
       multiline?.update(
@@ -17,7 +22,8 @@
       );
     }
   });
-  function getClass(snip) {
+
+  function getClass(snip: Snippet) {
     return snip === headline
       ? "body-large text-on-surface"
       : "body-medium text-on-surface-variant";

package/dist/components/list/QItemSection.svelte.d.ts

@@ -1,3 +1,14 @@
-import type { QItemSectionProps } from "./props";
-declare const QItemSection: import("svelte").Component<QItemSectionProps, {}, "">;
-export default QItemSection;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QItemSectionProps_ = typeof __propDef.props;
+export { QItemSectionProps_ as QItemSectionProps };
+export type QItemSectionEvents = typeof __propDef.events;
+export type QItemSectionSlots = typeof __propDef.slots;
+export default class QItemSection extends SvelteComponentTyped<QItemSectionProps_, QItemSectionEvents, QItemSectionSlots> {
+}

package/dist/components/list/QList.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import type { QListProps } from "./props";
+
   let {
     bordered = false,
     roundedBorders = false,
@@ -10,12 +12,15 @@
     tag = "div",
     children,
     ...props
-  } = $props();
-  let listEl;
+  }: QListProps = $props();
+
+  let listEl: HTMLElement;
+
   $effect(() => {
     listEl.querySelector(".q-separator__wrapper:first-child")?.remove();
   });
-  setContext("separator", separator ? separatorOptions : void 0);
+
+  setContext("separator", separator ? separatorOptions : undefined);
 </script>
 
 <svelte:element

package/dist/components/list/QList.svelte.d.ts

@@ -1,3 +1,14 @@
-import type { QListProps } from "./props";
-declare const QList: import("svelte").Component<QListProps, {}, "">;
-export default QList;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QListProps_ = typeof __propDef.props;
+export { QListProps_ as QListProps };
+export type QListEvents = typeof __propDef.events;
+export type QListSlots = typeof __propDef.slots;
+export default class QList extends SvelteComponentTyped<QListProps_, QListEvents, QListSlots> {
+}

package/dist/components/private/ContextReseter.svelte

@@ -1,6 +1,15 @@
 <script lang="ts">
   import QContext from "../../classes/QContext.svelte";
-  let { keys, children } = $props();
+  import type { Snippet } from "svelte";
+
+  let {
+    keys,
+    children,
+  }: {
+    keys: string | string[];
+    children?: Snippet;
+  } = $props();
+
   const keysArr = Array.isArray(keys) ? keys : [keys];
   keysArr.forEach((key) => QContext.reset(key));
 </script>

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

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

package/dist/components/private/QApi.svelte

@@ -13,8 +13,17 @@
   } from "../..";
   import { capitalize } from "../../utils";
   import Types from "../../utils/types.json";
-  let { componentDocs } = $props();
-  let api = componentDocs.map(() => "props");
+  import type {
+    QComponentDocs,
+    QComponentProp,
+    QComponentSlot,
+    QComponentType,
+    QComponentEvent,
+  } from "../../utils";
+
+  let { componentDocs }: { componentDocs: QComponentDocs[] } = $props();
+
+  let api: (keyof QComponentDocs["docs"])[] = componentDocs.map(() => "props");
   let drawer = $state(
     Object.fromEntries(
       componentDocs.map((doc) => [
@@ -22,25 +31,38 @@
         Object.fromEntries(
           doc.docs.props.map((prop) => [
             prop.name,
-            prop.clickableType ? false : void 0,
+            prop.clickableType ? false : undefined,
           ]),
         ),
       ]),
     ),
   );
-  let drawerContent = $state("");
-  function isProp(doc, index) {
+  let drawerContent: string | undefined = $state("");
+
+  function isProp(
+    doc: QComponentProp | QComponentSlot | QComponentType | QComponentEvent,
+    index: number,
+  ): doc is QComponentProp {
     return api[index] === "props";
   }
-  function isEvent(doc, index) {
+  function isEvent(
+    doc: QComponentProp | QComponentSlot | QComponentType | QComponentEvent,
+    index: number,
+  ): doc is QComponentEvent {
     return api[index] === "events";
   }
-  function getType(type) {
+
+  function getType(type: string) {
     type = type.replace("[]", "");
-    let found = type in Types ? Types[type] : void 0;
+    let found = type in Types ? Types[type as keyof typeof Types] : undefined;
     return found;
   }
-  function handleDrawer(QDocument, doc, e) {
+
+  function handleDrawer(
+    QDocument: QComponentDocs,
+    doc: QComponentProp,
+    e: Event,
+  ) {
     e.stopPropagation();
     let content = getType(doc.type);
     for (let docName in drawer[QDocument.name]) {
@@ -48,6 +70,7 @@
         drawer[QDocument.name][docName] = false;
       }
     }
+
     if (!drawer[QDocument.name][doc.name]) {
       setTimeout(() => {
         drawerContent = content;

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

@@ -1,5 +1,14 @@
-import type { QComponentDocs } from "../../utils";
-declare const QApi: import("svelte").Component<{
-    componentDocs: QComponentDocs[];
-}, {}, "">;
-export default QApi;
+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,9 +1,26 @@
 <script lang="ts">
   import { QCard, QCardSection } from "../..";
+  import type { QComponentDocs } from "../../utils";
   import Quaff from "../../classes/Quaff.svelte";
   import QApi from "./QApi.svelte";
-  let { children, display, pre, usage, componentDocs } = $props();
+  import type { Snippet } from "svelte";
+
+  let {
+    children,
+    display,
+    pre,
+    usage,
+    componentDocs,
+  }: {
+    children?: Snippet;
+    display?: Snippet;
+    pre?: Snippet;
+    usage?: Snippet;
+    componentDocs: QComponentDocs | QComponentDocs[];
+  } = $props();
+
   const isDark = $derived(Quaff.darkMode.isActive);
+
   let principalDocument = Array.isArray(componentDocs)
     ? componentDocs[0]
     : componentDocs;

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

@@ -1,10 +1,14 @@
-import type { QComponentDocs } from "../../utils";
-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;
+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,7 +1,19 @@
 <script lang="ts">
   import { QCodeBlock, QDialog, QBtn } from "../..";
-  let { title, snippet, children } = $props();
+  import type { Snippet } from "svelte";
+
+  let {
+    title,
+    snippet,
+    children,
+  }: {
+    title: string;
+    snippet?: string;
+    children?: Snippet;
+  } = $props();
+
   let dialog = $state(false);
+
   const code = $derived(snippet?.replaceAll(/^ {2}/gm, ""));
 </script>
 
@@ -11,7 +23,7 @@
     {#if code}
       <QBtn
         icon="code"
-        design="outlined"
+        variant="outlined"
         round
         onclick={() => (dialog = true)}
       />

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

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

package/dist/components/private/QIconSnippet.svelte

@@ -1,7 +1,17 @@
 <!-- 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();
+  import type { QIconProps } from "../icon/props";
+  import type { Snippet } from "svelte";
+  import type { MaterialSymbol } from "material-symbols";
+
+  interface IconSnippetProps extends Omit<QIconProps, "name"> {
+    icon?: MaterialSymbol | Snippet;
+    defaultIcon?: MaterialSymbol | Snippet;
+  }
+
+  let { icon, defaultIcon, ...props }: IconSnippetProps = $props();
+
   const iconToUse = $derived(icon ?? defaultIcon);
 </script>
 

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

@@ -1,8 +1,14 @@
-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;
+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/progress/QCircularProgress.svelte

@@ -3,10 +3,20 @@
 <script lang="ts">
   import { useSize } from "../../composables/useSize";
   import { between } from "../../utils/number";
+  import type { QCircularProgressProps } from "./props";
+
+  type CircleParams = {
+    cls: "track" | "indicator";
+    offset: number;
+    color: string;
+    rounded?: boolean;
+  };
+
   const radius = 50,
     diameter = 2 * radius,
     circumference = diameter * Math.PI,
-    strokeDashArray = Math.round(circumference * 1e3) / 1e3;
+    strokeDashArray = Math.round(circumference * 1000) / 1000;
+
   let {
     value = 0,
     indeterminate = false,
@@ -24,20 +34,25 @@
     showValue = false,
     children = fallback,
     ...props
-  } = $props();
+  }: QCircularProgressProps = $props();
+
   const qSize = $derived(useSize(size, "q-circular-progress"));
+
   const svgStyle = $derived(`rotate3d(0, 0, 1, ${angle - 90}deg)`);
   const circleStyle = $derived(
     instantFeedback || indeterminate
-      ? void 0
+      ? undefined
       : `stroke-dashoffset ${animationSpeed}ms ease 0s, stroke ${animationSpeed}ms ease`,
   );
+
   const viewBox = $derived(diameter / (1 - thickness / 2));
   const viewBoxAttr = $derived(
     `${viewBox / 2} ${viewBox / 2} ${viewBox} ${viewBox}`,
   );
+
   const normalized = $derived(between(value, min, max));
   const range = $derived(max - min);
+
   const strokeWidth = $derived((thickness / 2) * viewBox);
   const strokeDashOffset = $derived.by(() => {
     const dashRatio = (max - normalized) / range;
@@ -45,6 +60,7 @@
       !noRound && normalized < max && dashRatio < 0.25
         ? (strokeWidth / 2) * (1 - dashRatio / 0.25)
         : 0;
+
     return circumference * dashRatio + dashGap;
   });
 </script>

package/dist/components/progress/QCircularProgress.svelte.d.ts

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QCircularProgressProps } from "./props";
-declare const QCircularProgress: import("svelte").Component<QCircularProgressProps, {}, "">;
-export default QCircularProgress;
+declare const __propDef: {
+    props: QCircularProgressProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}