@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta12

package/dist/composables/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./useAlign";
+export * from "./useColor";
+export * from "./useRevealScrollObserver.svelte";
 export * from "./useRouterLink";
 export * from "./useSize";

package/dist/composables/index.js

@@ -1,3 +1,5 @@
 export * from "./useAlign";
+export * from "./useColor";
+export * from "./useRevealScrollObserver.svelte";
 export * from "./useRouterLink";
 export * from "./useSize";

package/dist/composables/useColor.d.ts

@@ -0,0 +1 @@
+export declare function useColor(color: string): string;

package/dist/composables/useColor.js

@@ -0,0 +1,19 @@
+export function useColor(color) {
+    const cssColorPrefixes = [
+        "#",
+        "rgb",
+        "hsl",
+        "hwb",
+        "inherit",
+        "initial",
+        "revert",
+        "revert-layer",
+        "unset",
+    ];
+    for (const prefix of cssColorPrefixes) {
+        if (color.startsWith(prefix)) {
+            return color;
+        }
+    }
+    return `var(--${color}, ${color})`;
+}

package/dist/composables/useRevealScrollObserver.svelte.d.ts

@@ -0,0 +1,9 @@
+import QScrollObserver from "../classes/QScrollObserver.svelte";
+export type RevealScrollBar = "header" | "footer";
+/**
+ * Manages a {@link QScrollObserver} for QHeader / QFooter `reveal` mode.
+ * Observes the sibling `.q-layout__content` scroll area and tears down on disable or unmount.
+ */
+export declare function useRevealScrollObserver(bar: RevealScrollBar, uid: string, reveal: () => boolean): {
+    readonly scroll: QScrollObserver | undefined;
+};

package/dist/composables/useRevealScrollObserver.svelte.js

@@ -0,0 +1,25 @@
+import QScrollObserver from "../classes/QScrollObserver.svelte";
+/**
+ * Manages a {@link QScrollObserver} for QHeader / QFooter `reveal` mode.
+ * Observes the sibling `.q-layout__content` scroll area and tears down on disable or unmount.
+ */
+export function useRevealScrollObserver(bar, uid, reveal) {
+    let scroll = $state();
+    $effect(() => {
+        if (!reveal()) {
+            scroll = undefined;
+            return;
+        }
+        const observer = new QScrollObserver(`.q-${bar}--${uid} ~ .q-layout__content`);
+        scroll = observer;
+        return () => {
+            observer.destroy();
+            scroll = undefined;
+        };
+    });
+    return {
+        get scroll() {
+            return scroll;
+        },
+    };
+}

package/dist/composables/useRouterLink.d.ts

@@ -1,13 +1,14 @@
+import { LayoutParams, RouteId } from "$app/types";
 import type { Page } from "@sveltejs/kit";
 export interface UseRouterLinkProps {
     href?: string;
     to?: string;
-    disable?: boolean;
+    disabled?: boolean;
     activeClass?: string;
     replace?: boolean;
 }
 export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
-export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;
+export declare function isRouteActive(router: Page<LayoutParams<"/">, RouteId | null>, to: string | undefined): boolean;
 export declare function useRouterLink<T extends UseRouterLinkProps>(props: T): {
     hasLink: boolean;
     linkAttributes: {

package/dist/composables/useRouterLink.js

@@ -2,7 +2,7 @@ import { createClasses } from "../utils";
 export const UseRouterLinkPropsDefaults = {
     href: undefined,
     to: undefined,
-    disable: false,
+    disabled: false,
     activeClass: undefined,
     replace: false,
 };
@@ -13,7 +13,7 @@ export function isRouteActive(router, to) {
 }
 export function useRouterLink(props) {
     const hasLink = [props.to, props.href].some((entry) => typeof entry !== "undefined");
-    const linkClasses = createClasses([hasLink && "q-link", props.disable && "disable"]);
+    const linkClasses = createClasses([hasLink && "q-link", props.disabled && "disabled"]);
     const linkAttributes = {
         href: props.to || props.href,
         "data-sveltkit-reload": props.replace ? "" : undefined,

package/dist/css/_components.scss

@@ -9,6 +9,7 @@
 @forward "$components/chip/QChip.scss";
 @forward "$components/dialog/QDialog.scss";
 @forward "$components/drawer/QDrawer.scss";
+@forward "$components/expansion-item/QExpansionItem.scss";
 @forward "$components/footer/QFooter.scss";
 @forward "$components/header/QHeader.scss";
 @forward "$components/icon/QIcon.scss";
@@ -17,6 +18,7 @@
 @forward "$components/list/QItem.scss";
 @forward "$components/list/QItemSection.scss";
 @forward "$components/list/QList.scss";
+@forward "$components/menu/QMenu.scss";
 @forward "$components/progress/QCircularProgress.scss";
 @forward "$components/progress/QLinearProgress.scss";
 @forward "$components/radio";

package/dist/css/classes/_grid.scss

@@ -9,9 +9,20 @@
   // Gutter classes
   @each $spaceName, $spaceVal in variables.$spaces {
     @if $spaceName != "auto" {
-      &.q-gutter-#{$spaceName} {
+      &.q-gutter-#{$spaceName},
+      &.q-col-gutter-#{$spaceName} {
         gap: $spaceVal;
       }
+
+      &.q-gutter-x-#{$spaceName},
+      &.q-col-gutter-x-#{$spaceName} {
+        column-gap: $spaceVal;
+      }
+
+      &.q-gutter-y-#{$spaceName},
+      &.q-col-gutter-y-#{$spaceName} {
+        row-gap: $spaceVal;
+      }
     }
   }