@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

package/dist/components/toolbar/QToolbar.svelte

@@ -1,22 +1,18 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
-export let inset = false, border = false, elevate = false, height = "64px", userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
+<script>export let inset = false, border = false, elevate = false, height = "64px", userClasses = "";
+export { userClasses as class };
 $:
-  classes = createClasses([inset && "inset", elevate && "elevated", border && "bordered"], {
-    component: "q-toolbar",
-    userClasses
-  });
-$:
-  style = createStyles(
-    {
-      height: !userClasses?.includes("q-header") && useSize(height).style
-    },
-    userStyles
-  );
+  dynamicHeight = !userClasses?.includes("q-header") ? height : void 0;
 </script>
 
-<header class={classes} role="toolbar" {...$$restProps} {style}>
+<header
+  class="q-toolbar {userClasses}"
+  class:q-toolbar--inset={inset}
+  class:q-toolbar--elevated={elevate}
+  class:q-toolbar--bordered={border}
+  role="toolbar"
+  style:height={dynamicHeight}
+  {...$$restProps}
+>
   <nav>
     <slot />
   </nav>

package/dist/components/toolbar/QToolbar.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         elevate?: QToolbarProps["elevate"];
         height?: QToolbarProps["height"];
         class?: string | null | undefined;
-        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 export let shrink = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:

package/dist/components/toolbar/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "../../utils/types";
+import type { QComponentDocs } from "../../utils";
 export declare let QToolbarDocs: QComponentDocs;

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

@@ -1,28 +1,46 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash ff59611542258810d9f769e875972d2a
 export const QToolbarDocsProps = [
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
     {
-        name: "height",
-        type: "string | number",
-        optional: false,
+        name: "border",
+        type: "boolean",
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
+    },
+    {
+        name: "elevate",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "height",
+        type: "CssValue | number",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "64px",
     },
 ];
 export const QToolbarTitleDocsProps = [
     {
         name: "shrink",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
 ];

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

@@ -1,4 +1,4 @@
-import type { NativeProps, CssValue } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QToolbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**

package/dist/components/tooltip/QTooltip.svelte

@@ -1,13 +1,15 @@
-<script>import { createClasses } from "../../utils/props";
-export let value = void 0, position = "bottom", userClasses = "";
+<script>export let value = void 0, position = "bottom", userClasses = "";
 export { userClasses as class };
-$:
-  classes = createClasses([value && "active", position || "top"], {
-    component: "q-tooltip",
-    userClasses
-  });
 </script>
 
-<div class={classes} {...$$restProps}>
+<div
+  class="q-tooltip {userClasses}"
+  class:q-tooltip--top={position === "top"}
+  class:q-tooltip--right={position === "right"}
+  class:q-tooltip--bottom={position === "bottom"}
+  class:q-tooltip--left={position === "left"}
+  class:q-tooltip--active={value}
+  {...$$restProps}
+>
   <slot />
 </div>

package/dist/components/tooltip/docs.d.ts

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "../../utils/types";
+import type { QComponentDocs } from "../../utils";
 export declare let QTooltipDocs: QComponentDocs;

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 7dbd449feacad30b81776c0962accee1
 export const QTooltipDocsProps = [
     {
         name: "value",
@@ -10,7 +12,7 @@ export const QTooltipDocsProps = [
     {
         name: "position",
         type: '"top" | "right" | "bottom" | "left"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

package/dist/components/tooltip/index.scss

@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: auto;
   gap: 0.5rem;
   background-color: var(--inverse-surface);
   color: var(--inverse-on-surface);

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
 import type { HTMLAttributes } from "svelte/elements";
+import type { NativeProps } from "../../utils";
 export interface QTooltipProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     value?: boolean;
     position?: "top" | "right" | "bottom" | "left";

package/dist/components/tooltip/props.js

@@ -1,4 +1,4 @@
-import { NativePropsDefaults } from "../../utils/types";
+import { NativePropsDefaults } from "../../utils";
 export const QTooltipPropsDefaults = {
     value: undefined,
     position: "bottom",

package/dist/composables/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./use-align";
+export * from "./use-router-link";
+export * from "./use-size";

package/dist/composables/index.js

@@ -1 +1,3 @@
-"use strict";
+export * from "./use-align";
+export * from "./use-router-link";
+export * from "./use-size";

package/dist/composables/use-align.d.ts

@@ -5,4 +5,4 @@ export interface UseAlignProps {
     align?: UseAlignOptions;
 }
 export declare const UseAlignPropsDefaults: UseAlignProps;
-export default function useAlign(align?: UseAlignOptions): string;
+export declare function useAlign(align?: UseAlignOptions): string;

package/dist/composables/use-align.js

@@ -11,7 +11,7 @@ const alignMap = {
     // @todo - justify-stretch isn't possible
     stretch: "stretch",
 };
-export default function useAlign(align = "top left") {
+export function useAlign(align = "top left") {
     const alignments = align
         .split(" ")
         .map((entry) => {

package/dist/composables/use-router-link.d.ts

@@ -8,7 +8,7 @@ export interface UseRouterLinkProps {
 }
 export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
 export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;
-export default function <T extends UseRouterLinkProps>(props: T): {
+export declare function useRouterLink<T extends UseRouterLinkProps>(props: T): {
     hasLink: boolean;
     linkAttributes: {
         href: string | undefined;

package/dist/composables/use-router-link.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../utils/props";
+import { createClasses } from "../utils";
 export const UseRouterLinkPropsDefaults = {
     href: undefined,
     to: undefined,
@@ -11,7 +11,7 @@ export function isRouteActive(router, to) {
         ? router.url.pathname === to
         : router.url.pathname.slice(0, (to || "").length) === to;
 }
-export default function (props) {
+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 linkAttributes = {

package/dist/composables/use-size.d.ts

@@ -1,4 +1,4 @@
-import { CssUnit, QuaffSizes } from "../utils/types";
+import { CssUnit, QuaffSizes } from "../utils";
 export declare const sizes: QuaffSizes[];
 export declare const CssUnits: CssUnit[];
 interface UseSize {

package/dist/composables/use-size.js

@@ -1,5 +1,5 @@
-import { isNumber } from "../utils/types";
-export const sizes = ["xs", "sm", "md", "lg", "xl"];
+import { isNumber } from "../utils";
+export const sizes = ["none", "xs", "sm", "md", "lg", "xl"];
 export const CssUnits = ["px", "%", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax"];
 export function useSize(sizeProp) {
     if (isNumber(sizeProp) && sizeProp > 0) {