@quaffui/quaff 0.1.0-prealpha20 → 0.1.0-prealpha22

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,16 +1,40 @@
 <script lang="ts">
-  import { codeToHtml } from "shiki";
+  import { onMount } from "svelte";
   import { copy } from "../../utils";
   import { QBtn } from "../..";
+  import type { CodeToHastOptions, BundledLanguage, BundledTheme } from "shiki";
+  import type { QCodeBlockProps } from "./props";
+
   let {
     language,
     theme = "github-dark-default",
     code = "/* No code found */",
-    title = void 0,
-    copiable = void 0,
-  } = $props();
+    title = undefined,
+    copiable = undefined,
+  }: QCodeBlockProps = $props();
+
   let btnContent = $state("Copy");
   let btnColor = $state("primary");
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let codeToHtml = async (
+    str: string,
+    opts: CodeToHastOptions<BundledLanguage, BundledTheme>,
+  ) => "";
+
+  async function loadShiki() {
+    try {
+      // prevent vite "optimization", which would lead to errors here
+      const shikiPackage = "shiki";
+      const { codeToHtml: codeToHtmlShiki } = await import(
+        /* @vite-ignore */ shikiPackage
+      );
+      codeToHtml = codeToHtmlShiki;
+    } catch (e) {
+      console.error("error loading shiki, please make sure it is installed", e);
+    }
+  }
+
   const html = $derived.by(
     async () =>
       await codeToHtml(code, {
@@ -18,7 +42,8 @@
         theme,
       }),
   );
-  function setBtn(type) {
+
+  function setBtn(type: "base" | "error" | "success") {
     switch (type) {
       case "error":
         btnContent = "Error while copying...";
@@ -34,16 +59,20 @@
         break;
     }
   }
+
   async function copyCode() {
     await copy(code).catch(() => {
       setBtn("error");
-      setTimeout(() => setBtn("base"), 3e3);
+      setTimeout(() => setBtn("base"), 3000);
     });
+
     setBtn("success");
     setTimeout(() => {
       setBtn("base");
-    }, 3e3);
+    }, 3000);
   }
+
+  onMount(() => loadShiki());
 </script>
 
 <div class="q-code-block">
@@ -60,7 +89,7 @@
         class="border-{btnColor} text-{btnColor}"
         size="sm"
         icon="content_copy"
-        design="outlined"
+        variant="outlined"
         onclick={copyCode}
       >
         {btnContent}

package/dist/components/codeBlock/QCodeBlock.svelte.d.ts

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

package/dist/components/dialog/QDialog.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { QDialogProps } from "./props";
+
   let {
     value = $bindable(false),
     position = "default",
@@ -7,30 +9,38 @@
     persistent = false,
     children,
     ...props
-  } = $props();
-  let dialogEl;
+  }: QDialogProps = $props();
+
+  let dialogEl: HTMLDialogElement;
+
   const canHide = $derived(value && !persistent);
+
   $effect(() => {
     if (value) {
       dialogEl?.[modal ? "showModal" : "show"]();
+
       setTimeout(() => {
         window.addEventListener("click", tryCancel);
       }, 150);
     } else {
       dialogEl?.close();
+
       window.removeEventListener("click", tryCancel);
     }
   });
+
   export function hide() {
     if (dialogEl.open) {
       value = false;
     }
   }
+
   export function show() {
     if (!dialogEl.open) {
       value = true;
     }
   }
+
   export function toggle() {
     if (dialogEl.open) {
       hide();
@@ -38,23 +48,28 @@
       show();
     }
   }
+
   function addAnimation() {
     if (persistent && value) {
       dialogEl.classList.add("q-dialog--animating");
+
       setTimeout(() => {
         dialogEl.classList.remove("q-dialog--animating");
       }, 150);
     }
   }
-  function handleClickInside(e) {
+
+  function handleClickInside(e: MouseEvent) {
     e.stopPropagation();
   }
-  function onkeydown(e) {
+
+  function onkeydown(e: KeyboardEvent) {
     if (e.key === "Escape") {
       tryCancel(e);
     }
   }
-  function tryCancel(e) {
+
+  function tryCancel(e: Event) {
     if (canHide) {
       hide();
     } else {

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -1,7 +1,21 @@
-import type { QDialogProps } from "./props";
-declare const QDialog: import("svelte").Component<QDialogProps, {
-    hide: () => void;
-    show: () => void;
-    toggle: () => void;
-}, "value">;
-export default QDialog;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hide?: () => void;
+        show?: () => void;
+        toggle?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QDialogProps_ = typeof __propDef.props;
+export { QDialogProps_ as QDialogProps };
+export type QDialogEvents = typeof __propDef.events;
+export type QDialogSlots = typeof __propDef.slots;
+export default class QDialog extends SvelteComponentTyped<QDialogProps_, QDialogEvents, QDialogSlots> {
+    get hide(): () => void;
+    get show(): () => void;
+    get toggle(): () => void;
+}

package/dist/components/drawer/QDrawer.svelte

@@ -4,6 +4,10 @@
   import { useSize } from "../../composables";
   import { clickOutside } from "../../helpers";
   import QContext from "../../classes/QContext.svelte";
+  import type { QLayoutProps } from "../layout/props";
+  import type { DrawerContext, LayoutContext } from "../layout/QLayout.svelte";
+  import type { QDrawerProps } from "./props";
+
   let {
     value = $bindable(false),
     side = "left",
@@ -13,14 +17,23 @@
     persistent = false,
     children,
     ...props
-  } = $props();
-  const drawerContext = QContext.get(`QDrawer-${side}`);
-  const layoutView = getContext("view");
-  const ctx = QContext.get("layout");
+  }: QDrawerProps = $props();
+
+  const drawerContext = QContext.get<DrawerContext>(`QDrawer-${side}`);
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    "view",
+  );
+
+  const ctx = QContext.get<LayoutContext>("layout");
+
   const drawerType = $derived(side === "left" ? "drawerLeft" : "drawerRight");
+
   const drawerCtx = $derived(ctx?.value?.[drawerType]);
+
   const canHideOnClickOutside = $derived((value && !persistent) || overlay);
+
   const hideOnRouteChange = $derived(!persistent || overlay);
+
   const offsetTop = $derived.by(() => {
     const charPos = side === "left" ? 0 : 2;
     return layoutView?.value.charAt(charPos) === "h";
@@ -29,34 +42,44 @@
     const charPos = side === "left" ? 8 : 10;
     return layoutView?.value.charAt(charPos) === "f";
   });
-  export const show = (e) => {
+
+  export const show = (e?: MouseEvent) => {
     if (!value) {
       value = true;
       e?.stopPropagation();
     }
   };
+
   export const hide = () => {
     if (value) {
       value = false;
     }
   };
-  export const toggle = (e) => {
+
+  export const toggle = (e?: MouseEvent) => {
     value = !value;
     e?.stopPropagation();
   };
+
   $effect(() => {
     if ($navigating && hideOnRouteChange) {
       hide();
     }
   });
+
   onDestroy(() => {
     drawerContext?.updateEntries({
       width: 0,
       takesSpace: false,
     });
   });
+
   $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     [value, overlay, width];
+
+    // TODO: Try to make it work without console.debug
+    // writing untrack(() => drawerContext)?.updateEntries(...) doesn't work (infinite $effect loop)
     untrack(() =>
       drawerContext?.updateEntries({
         takesSpace: !!value && !overlay,
@@ -64,14 +87,20 @@
       }),
     );
   });
-  const shouldHaveRadius = (pos) => {
+
+  const shouldHaveRadius = (pos: "top" | "bottom") => {
     const appBarEl = pos === "top" ? ctx?.value?.header : ctx?.value?.footer;
+
+    // This is an overlay, or there is no header/footer, or there is an offset top/bottom
     return overlay || !appBarEl?.display || drawerCtx?.offset[pos];
   };
+
   const widthStyle = $derived(!ctx ? useSize(width).style : null);
+
   const drawerWidthStyle = $derived(
     widthStyle === null ? "" : `--${side}-drawer-width: ${widthStyle};`,
   );
+
   const style = $derived(`${drawerWidthStyle}${props.style ?? ""}`);
 </script>
 

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -1,7 +1,21 @@
-import type { QDrawerProps } from "./props";
-declare const QDrawer: import("svelte").Component<QDrawerProps, {
-    show: (e?: MouseEvent) => void;
-    hide: () => void;
-    toggle: (e?: MouseEvent) => void;
-}, "value">;
-export default QDrawer;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: (e?: MouseEvent) => void;
+        hide?: () => void;
+        toggle?: (e?: MouseEvent) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QDrawerProps_ = typeof __propDef.props;
+export { QDrawerProps_ as QDrawerProps };
+export type QDrawerEvents = typeof __propDef.events;
+export type QDrawerSlots = typeof __propDef.slots;
+export default class QDrawer extends SvelteComponentTyped<QDrawerProps_, QDrawerEvents, QDrawerSlots> {
+    get show(): (e?: MouseEvent) => void;
+    get hide(): () => void;
+    get toggle(): (e?: MouseEvent) => void;
+}

package/dist/components/footer/QFooter.svelte

@@ -2,8 +2,13 @@
   import { getContext, onDestroy, onMount, untrack } from "svelte";
   import QContext from "../../classes/QContext.svelte";
   import QScrollObserver from "../../classes/QScrollObserver.svelte";
+  import type { QLayoutProps } from "../layout/props";
   import QToolbar from "../toolbar/QToolbar.svelte";
+  import type { AppbarContext } from "../layout/QLayout.svelte";
+  import type { QFooterProps } from "./props";
+
   const footerIdentifier = Date.now();
+
   let {
     value = $bindable(true),
     bordered = false,
@@ -12,39 +17,52 @@
     height = 80,
     children,
     ...props
-  } = $props();
-  const footerContext = QContext.get("QFooter");
-  const layoutView = getContext("view");
+  }: QFooterProps = $props();
+
+  const footerContext = QContext.get<AppbarContext>("QFooter");
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    "view",
+  );
+
   if (!footerContext || !layoutView) {
     throw new Error("QFooter should be used inside QLayout");
   }
+
   const scroll = $derived(
     reveal
       ? new QScrollObserver(
           `.q-footer--${footerIdentifier} ~ .q-layout__content`,
         )
-      : void 0,
+      : undefined,
   );
   let contentScrollHeight = $state(0);
-  const offset = $derived(scroll ? scroll.position + height : void 0);
+
+  const offset = $derived(scroll ? scroll.position + height : undefined);
+  // Collapse the footer `${reavealOffset}px` above the bottom of layout content when scrolling up
   const collapsed = $derived(
     reveal &&
       scroll?.direction === "up" &&
-      offset + revealOffset < contentScrollHeight,
+      offset! + revealOffset < contentScrollHeight,
   );
+
   const leftOffset = () => layoutView.value.charAt(8) === "l";
   const rightOffset = () => layoutView.value.charAt(10) === "r";
+
   $effect.pre(() => {
     untrack(() => footerContext).updateEntries({ height, collapsed });
   });
+
   onMount(() => {
+    // Calculating the layout content's height
     const content = document.querySelector(
       `.q-footer--${footerIdentifier} ~ .q-layout__content`,
     );
+
     contentScrollHeight = content
       ? content.scrollHeight - content.clientHeight
       : 0;
   });
+
   onDestroy(() => {
     untrack(() => footerContext).updateEntries({ height: 0, collapsed: false });
   });

package/dist/components/footer/QFooter.svelte.d.ts

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

package/dist/components/header/QHeader.svelte

@@ -3,7 +3,12 @@
   import QToolbar from "../toolbar/QToolbar.svelte";
   import QContext from "../../classes/QContext.svelte";
   import QScrollObserver from "../../classes/QScrollObserver.svelte";
+  import type { AppbarContext } from "../layout/QLayout.svelte";
+  import type { QLayoutProps } from "../layout/props";
+  import type { QHeaderProps } from "./props";
+
   const headerIdentifier = Date.now();
+
   let {
     elevated = false,
     inset = false,
@@ -12,28 +17,36 @@
     height = 64,
     children,
     ...props
-  } = $props();
-  const headerContext = QContext.get("QHeader");
-  const layoutView = getContext("view");
+  }: QHeaderProps = $props();
+
+  const headerContext = QContext.get<AppbarContext>("QHeader");
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    "view",
+  );
   if (!headerContext || !layoutView) {
     throw new Error("QHeader should be used inside QLayout");
   }
+
   const scroll = $derived(
     reveal
       ? new QScrollObserver(
           `.q-header--${headerIdentifier} ~ .q-layout__content`,
         )
-      : void 0,
+      : undefined,
   );
-  const offset = $derived(scroll ? scroll.position - height : void 0);
+  const offset = $derived(scroll ? scroll.position - height : undefined);
+  // Collapse the header `${reavealOffset}px` below the top of layout content when scrolling down
   const collapsed = $derived(
-    reveal && scroll?.direction === "down" && offset - revealOffset > 0,
+    reveal && scroll?.direction === "down" && offset! - revealOffset > 0,
   );
+
   const leftOffset = () => layoutView.value.charAt(0) === "l";
   const rightOffset = () => layoutView.value.charAt(2) === "r";
+
   $effect.pre(() => {
     untrack(() => headerContext).updateEntries({ height, collapsed });
   });
+
   onDestroy(() => {
     untrack(() => headerContext).updateEntries({ height: 0, collapsed: false });
   });

package/dist/components/header/QHeader.svelte.d.ts

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

package/dist/components/icon/QIcon.svelte

@@ -2,6 +2,8 @@
 
 <script lang="ts">
   import { useSize } from "../../composables/useSize";
+  import type { QIconProps } from "./props";
+
   let {
     size = "md",
     name,
@@ -13,12 +15,15 @@
     color,
     children,
     ...props
-  } = $props();
+  }: QIconProps = $props();
+
   const qSize = $derived(useSize(size, "q-icon"));
+
   const imgAttrs = $derived({
     alt: "Quaff Image Icon",
     ...imgAttributes,
   });
+
   const typeClass = $derived(`q-icon--${type}`);
 </script>
 

package/dist/components/icon/QIcon.svelte.d.ts

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QIconProps } from "./props";
-declare const QIcon: import("svelte").Component<QIconProps, {}, "">;
-export default QIcon;
+declare const __propDef: {
+    props: QIconProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QIconProps_ = typeof __propDef.props;
+export { QIconProps_ as QIconProps };
+export type QIconEvents = typeof __propDef.events;
+export type QIconSlots = typeof __propDef.slots;
+export default class QIcon extends SvelteComponentTyped<QIconProps_, QIconEvents, QIconSlots> {
+}

package/dist/components/input/QInput.svelte

@@ -1,32 +1,45 @@
 <script lang="ts">
+  import type { QEvent } from "../../utils";
+
+  type QInputFocusEvent = QEvent<FocusEvent, HTMLDivElement>;
+
   let focus = $state(false);
+
   let snippetPrependWidth = $state(0);
+
+  import type { QInputProps } from "../input/props";
+
   let {
     dense = false,
     disable = false,
     error = false,
-    errorMessage = void 0,
+    errorMessage = undefined,
     filled = false,
-    hint = void 0,
-    label = void 0,
+    hint = undefined,
+    label = undefined,
     outlined = false,
     rounded = false,
-    before = void 0,
-    prepend = void 0,
-    append = void 0,
-    after = void 0,
+    before = undefined,
+    prepend = undefined,
+    append = undefined,
+    after = undefined,
     value = $bindable(),
     ...props
-  } = $props();
+  }: QInputProps = $props();
+
   const active = $derived(value || focus);
-  function onFocus(e) {
+
+  function onFocus(e: QInputFocusEvent) {
     focus = true;
     props.onfocus?.(e);
   }
-  function onBlur(e) {
+
+  function onBlur(e: QInputFocusEvent) {
     focus = false;
     props.onblur?.(e);
   }
+
+  // q-field here, q-input in classes
 </script>
 
 <div

package/dist/components/input/QInput.svelte.d.ts

@@ -1,3 +1,14 @@
-import type { QInputProps } from "../input/props";
-declare const QInput: import("svelte").Component<QInputProps, {}, "value">;
-export default QInput;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QInputProps_ = typeof __propDef.props;
+export { QInputProps_ as QInputProps };
+export type QInputEvents = typeof __propDef.events;
+export type QInputSlots = typeof __propDef.slots;
+export default class QInput extends SvelteComponentTyped<QInputProps_, QInputEvents, QInputSlots> {
+}

package/dist/components/input/index.scss

@@ -1 +1 @@
-@import "$css/shared/q-field.scss";
+@use "$css/shared/q-field.scss";

package/dist/components/layout/QLayout.scss

@@ -1,3 +1,4 @@
+@use "sass:string";
 @use "$css/mixins";
 @use "$css/variables";
 
@@ -92,7 +93,7 @@
       @error 'The position "#{$pos}" is incorrect, should be "top" or "bottom"';
     }
 
-    @return unquote(
+    @return string.unquote(
       ":is(.q-drawer--overlay,.q-drawer--offset-#{$pos},:not(:has(~ .q-header)),:has(~ .q-header--collapsed))"
     );
   }