@quaffui/quaff 0.1.0-prealpha20 → 0.1.0-prealpha22

package/dist/components/progress/QLinearProgress.svelte

@@ -2,11 +2,14 @@
 
 <script lang="ts">
   import { useSize } from "../../composables/useSize";
-  function width(val, reverse2) {
-    return reverse2
+  import type { QLinearProgressProps } from "./props";
+
+  function width(val: number, reverse: boolean) {
+    return reverse
       ? `translateX(100%) scale3d(-${val}, 1, 1)`
       : `scale3d(${val}, 1, 1)`;
   }
+
   let {
     value = 0,
     buffer,
@@ -19,13 +22,18 @@
     trackColor = "secondary-container",
     indeterminate = false,
     ...props
-  } = $props();
+  }: QLinearProgressProps = $props();
+
   const normalized = $derived(value > 1 ? value / 100 : value);
+
   const qSize = $derived(useSize(size, "q-linear-progress"));
+
   const radius = $derived(noRound ? "0" : "0.75rem");
   const origin = $derived(reverse ? "0 100%" : "0 0");
   const transition = $derived(
-    instantFeedback || indeterminate ? void 0 : `transform ${animationSpeed}ms`,
+    instantFeedback || indeterminate
+      ? undefined
+      : `transform ${animationSpeed}ms`,
   );
   const trackTransform = $derived(width(buffer ?? 1, reverse));
   const indicatorTransform = $derived(

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

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

package/dist/components/radio/QRadio.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+  import type { QRadioProps } from "./props";
+
   let {
     value = "",
     label = "",
     selected = $bindable(),
     disable = false,
     ...props
-  } = $props();
+  }: QRadioProps = $props();
 </script>
 
 <label

package/dist/components/radio/QRadio.svelte.d.ts

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

package/dist/components/railbar/QRailbar.svelte

@@ -1,28 +1,39 @@
 <script lang="ts">
   import { getContext, onDestroy, untrack } from "svelte";
   import QContext from "../../classes/QContext.svelte";
+  import type { QLayoutProps } from "../layout/props";
+  import type { DrawerContext } from "../layout/QLayout.svelte";
+  import type { QRailbarProps } from "./props";
+
   let {
     width = 88,
     side = "left",
     bordered = false,
     children,
     ...props
-  } = $props();
-  const railbarCtx = QContext.get(`QRailbar-${side}`);
-  const layoutView = getContext("view");
-  let railbarEl = $state();
+  }: QRailbarProps = $props();
+
+  const railbarCtx = QContext.get<DrawerContext>(`QRailbar-${side}`);
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    "view",
+  );
+
+  let railbarEl = $state<HTMLElement>();
+
   onDestroy(() => {
     untrack(() => railbarCtx)?.updateEntries({
       width: 0,
       takesSpace: false,
     });
   });
+
   $effect.pre(() => {
     untrack(() => railbarCtx)?.updateEntries({
       width,
       takesSpace: railbarEl?.style.display !== "none" || false,
     });
   });
+
   const offsetTop = $derived.by(() => {
     const charPos = side === "left" ? 0 : 2;
     return layoutView?.value.charAt(charPos) === "h";
@@ -31,7 +42,9 @@
     const charPos = side === "left" ? 8 : 10;
     return layoutView?.value.charAt(charPos) === "f";
   });
+
   const railbarWidthStyle = $derived(`--${side}-railbar-width: ${width}px`);
+
   const style = $derived(`${railbarWidthStyle};${props.style ?? ""}`);
 </script>
 

package/dist/components/railbar/QRailbar.svelte.d.ts

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

package/dist/components/select/QSelect.svelte

@@ -2,100 +2,142 @@
   import { onMount, onDestroy } from "svelte";
   import { browser } from "$app/environment";
   import { QIcon } from "../..";
+  import type { QEvent } from "../../utils";
+  import type {
+    QSelectProps,
+    QSelectOption,
+    QSelectMultipleValue,
+  } from "./props";
+
+  type QSelectEvent<T> = QEvent<T, HTMLDivElement>;
+
   let {
     options,
     multiple = false,
     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,
     displayValue,
-    before = void 0,
-    prepend = void 0,
-    append = void 0,
-    after = void 0,
+    before = undefined,
+    prepend = undefined,
+    append = undefined,
+    after = undefined,
     value = $bindable(),
     ...props
-  } = $props();
+  }: QSelectProps = $props();
+
   let focus = $state(false);
+
   const currentDisplayValue = $derived.by(() => {
-    if (displayValue !== void 0) {
+    if (displayValue !== undefined) {
       return displayValue;
     }
+
     if (!multiple) {
       return value;
     }
-    return value.join(", ");
+
+    return (value as QSelectMultipleValue).join(", ");
   });
+
   const active = $derived(currentDisplayValue || focus);
-  let wrapper = $state(null);
+
+  let wrapper: HTMLDivElement | null = $state(null);
   let isMenuOpen = $state(false);
   let wasClicked = $state(false);
   let preventClose = $state(false);
-  function handleMousedown(e) {
+
+  function handleMousedown(e: QSelectEvent<MouseEvent>) {
     isMenuOpen = !isMenuOpen;
     wasClicked = true;
     props.onmousedown?.(e);
   }
-  function handleFocus(e) {
+
+  function handleFocus(e: QSelectEvent<FocusEvent>) {
     focus = true;
     if (!wasClicked) {
       isMenuOpen = true;
     }
+
     wasClicked = false;
     props.onfocus?.(e);
   }
-  function handleBlur(e) {
+
+  function handleBlur(e: QSelectEvent<FocusEvent>) {
     focus = false;
+
     if (!multiple && !preventClose) {
       isMenuOpen = false;
     }
     preventClose = false;
     props.onblur?.(e);
   }
-  const selectedOptions = $derived(
+
+  const selectedOptions: boolean[] = $derived(
     options.map((option) => isSelected(option), value),
   );
+
   let snippetPrependWidth = $state(0);
-  function isSelected(option) {
+
+  function isSelected(option: QSelectOption) {
     const optionValue = typeof option === "string" ? option : option.value;
-    return multiple ? value.includes(optionValue) : value === optionValue;
+    return multiple
+      ? (value as QSelectMultipleValue).includes(optionValue)
+      : value === optionValue;
   }
-  function select(evt, option) {
+
+  function select(evt: MouseEvent, option: QSelectOption) {
     evt.preventDefault();
     const optionValue = typeof option === "string" ? option : option.value;
+
     if (multiple) {
-      const hasItem = value.some((entry) => entry === optionValue);
+      const hasItem = (value as QSelectMultipleValue).some(
+        (entry) => entry === optionValue,
+      );
+
       if (hasItem) {
-        value = value.filter((val) => val !== optionValue);
+        (value as QSelectMultipleValue) = (
+          value as QSelectMultipleValue
+        ).filter((val) => val !== optionValue);
       } else {
-        value = [...value, optionValue];
+        (value as QSelectMultipleValue) = [
+          ...(value as QSelectMultipleValue),
+          optionValue,
+        ];
       }
+
       return;
     }
+
     value = optionValue;
     isMenuOpen = false;
   }
-  function handleClickOutside(event) {
-    if (wrapper && !wrapper.contains(event.target)) {
+
+  function handleClickOutside(event: MouseEvent) {
+    if (wrapper && !wrapper.contains(event.target as Node)) {
       isMenuOpen = false;
     }
   }
+
   onMount(() => {
     if (browser) {
       window.document.addEventListener("click", handleClickOutside);
     }
   });
+
   onDestroy(() => {
     if (browser) {
       document.removeEventListener("click", handleClickOutside);
     }
   });
+
+  // q-field here, q-select in classes
 </script>
 
 <div

package/dist/components/select/QSelect.svelte.d.ts

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

package/dist/components/select/index.scss

@@ -1,6 +1,6 @@
 @use "$css/mixins";
 @use "$css/variables";
-@import "$css/shared/q-field.scss";
+@use "$css/shared/q-field.scss";
 
 .q-select {
   &__option--selected {

package/dist/components/separator/QSeparator.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { useSize } from "../../composables/useSize";
+  import type { QSeparatorProps } from "./props";
+
   let {
     spacing = "none",
     inset = false,
@@ -9,7 +11,8 @@
     text,
     textAlign = vertical ? "middle" : "center",
     ...props
-  } = $props();
+  }: QSeparatorProps = $props();
+
   const orientation = $derived(vertical ? "vertical" : "horizontal");
   const qSize = $derived(useSize(spacing, "q-separator__spacing"));
 </script>

package/dist/components/separator/QSeparator.svelte.d.ts

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

package/dist/components/switch/QSwitch.svelte

@@ -2,9 +2,14 @@
   import QIconSnippet from "../private/QIconSnippet.svelte";
   import { ripple } from "../../helpers";
   import { isActivationKey } from "../../utils";
+  import type { QEvent } from "../../utils";
+  import type { QSwitchProps } from "./props";
+
+  type QSwitchEvent<T> = QEvent<T, HTMLDivElement>;
+
   let {
     value = $bindable(),
-    label = void 0,
+    label = undefined,
     labelPosition = "right",
     disabled = false,
     icons = false,
@@ -12,29 +17,38 @@
     checkedIcon,
     uncheckedIcon,
     ...props
-  } = $props();
-  let qSwitch;
-  let qSwitchInput;
+  }: QSwitchProps = $props();
+
+  let qSwitch: HTMLDivElement;
+  let qSwitchInput: HTMLInputElement;
+
   function toggle() {
     value = !value;
   }
-  function onclick(event) {
+
+  function onclick(event: QSwitchEvent<MouseEvent>) {
     event.preventDefault();
     if (!qSwitchInput || disabled) {
       return;
     }
+
     props.onclick?.(event);
+
     qSwitchInput.focus();
     toggle();
   }
-  function onkeydown(event) {
+
+  function onkeydown(event: QSwitchEvent<KeyboardEvent>) {
     if (!qSwitch || disabled || !isActivationKey(event)) {
       return;
     }
+
     props.onkeydown?.(event);
+
     if (event.defaultPrevented) {
       return;
     }
+
     event.preventDefault();
     qSwitch.click();
   }

package/dist/components/switch/QSwitch.svelte.d.ts

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

package/dist/components/table/QTable.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
   import { QIcon, QSelect, QBtn } from "../..";
+  import type {
+    QTableProps,
+    QTableColumn,
+    QTableRow,
+    QTableSort,
+  } from "./props";
+
   let {
     columns = [],
     rows = [],
@@ -8,10 +15,15 @@
     dense = false,
     bodyCell,
     ...props
-  } = $props();
-  function getField(fieldRaw, row) {
+  }: QTableProps = $props();
+
+  function getField(
+    fieldRaw: QTableColumn["field"],
+    row: QTableRow,
+  ): string | number {
     return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
   }
+
   let page = $state(1);
   let rowsPerPage = $state(5);
   let rowsPerPageOptions = $state(
@@ -20,27 +32,32 @@
       value: e.toString(),
     })),
   );
-  let sort = $state(null);
-  const numberFrom = $derived(rowsPerPage * page - rowsPerPage + 1);
-  const numberTo = $derived(
+  let sort: QTableSort = $state(null);
+
+  const numberFrom: number = $derived(rowsPerPage * page - rowsPerPage + 1);
+  const numberTo: number = $derived(
     rowsPerPage * page > rows.length ? rows.length : rowsPerPage * page,
   );
-  const numberOf = $derived(rows.length);
+  const numberOf: number = $derived(rows.length);
+
   $effect(() => {
     if (rowsPerPage * (page - 1) >= rows.length) {
       page = 1;
     }
   });
-  const rowsSorted = $derived.by(() => {
+
+  const rowsSorted: QTableRow[] = $derived.by(() => {
     if (sort) {
-      return structuredClone(rows).sort((a, b) => {
-        const valA = getField(sort.columnField, a);
-        const valB = getField(sort.columnField, b);
+      return structuredClone(rows).sort((a: QTableRow, b: QTableRow) => {
+        const valA = getField(sort!.columnField, a);
+        const valB = getField(sort!.columnField, b);
+
         if (typeof valA === "string" && typeof valB === "string") {
           return sort?.type === "desc"
             ? valB.localeCompare(valA)
             : valA.localeCompare(valB);
         }
+
         return sort?.type === "desc"
           ? parseFloat(valA.toString()) > parseFloat(valB.toString())
             ? -1
@@ -50,33 +67,44 @@
             : 1;
       });
     }
+
     return rows;
   });
-  const rowsPaginated = $derived(rowsSorted.slice(numberFrom - 1, numberTo));
-  function getThStyle(column) {
+
+  const rowsPaginated: QTableRow[] = $derived(
+    rowsSorted.slice(numberFrom - 1, numberTo),
+  );
+
+  function getThStyle(column: QTableColumn) {
     let style = allowsSort(column) ? "cursor: pointer; " : "";
     return style + getCellStyle(column);
   }
-  function getCellStyle(column) {
+
+  function getCellStyle(column: QTableColumn) {
     if (column.align === "center") {
       return "text-align: center";
     } else if (column.align === "right") {
       return "text-align: right";
     }
+
     return "";
   }
-  function allowsSort(column) {
+
+  function allowsSort(column: QTableColumn) {
     return columns.find((col) => col.name === column.name)?.sortable;
   }
-  function hasSort(column, sort2) {
-    return sort2?.columnField === column.field;
+
+  function hasSort(column: QTableColumn, sort: QTableSort) {
+    return sort?.columnField === column.field;
   }
-  function setSort(column) {
+
+  function setSort(column: QTableColumn) {
     const shouldRemove = hasSort(column, sort) && sort?.type === "desc";
     if (shouldRemove) {
       sort = null;
       return;
     }
+
     sort = {
       columnField: column.field,
       type: !sort?.type || sort?.type === "desc" ? "asc" : "desc",
@@ -144,14 +172,14 @@
     <QBtn
       icon="chevron_left"
       size="sm"
-      design="flat"
+      variant="flat"
       disabled={page === 1}
       onclick={() => page--}
     />
     <QBtn
       icon="chevron_right"
       size="sm"
-      design="flat"
+      variant="flat"
       disabled={page * rowsPerPage >= rows.length}
       onclick={() => page++}
     />

package/dist/components/table/QTable.svelte.d.ts

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