@quaffui/quaff 0.1.0-prealpha7 → 0.1.0-prealpha8

package/dist/components/avatar/QAvatar.svelte

@@ -1,9 +1,10 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
+<script>import { useSize } from "../../composables/use-size";
+import { createClasses, createStyles } from "../../utils/props";
 export let shape = "circle", size = "md", src = void 0, video = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class };
 export { userStyles as style };
 $:
-  isBasicSize = ["xs", "sm", "md", "lg", "xl"].includes(size);
+  sizeObj = useSize(size);
 $:
   shapeClass = createClasses([
     shape === "circle" && "circle",
@@ -14,18 +15,18 @@ $:
     shape.includes("right") && "right-round"
   ]);
 $:
-  classes = createClasses([shapeClass, isBasicSize && size], {
+  classes = createClasses([shapeClass, sizeObj.class], {
     component: "q-avatar",
     userClasses
   });
 $:
-  style = !isBasicSize ? createStyles(
+  style = createStyles(
     {
-      width: size,
-      height: size
+      width: sizeObj.style,
+      height: sizeObj.style
     },
     userStyles
-  ) : userStyles;
+  );
 </script>
 
 {#if video === true}

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

@@ -1,6 +1,6 @@
-import type { NativeProps } from "../../utils/types";
+import type { QuaffSizes, CssValue, NativeProps } from "../../utils/types";
 export type QAvatarShapeOptions = "circle" | "rounded" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
-export type QAvatarSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string;
+export type QAvatarSizeOptions = QuaffSizes | CssValue | number;
 export interface QAvatarProps extends NativeProps {
     /**
      * Shape of the avatar.

package/dist/components/button/QBtn.svelte

@@ -3,12 +3,15 @@ import { createEventDispatcher } from "svelte";
 import QIcon from "../icon/QIcon.svelte";
 import QCircularProgress from "../progress/QCircularProgress.svelte";
 import { activationHandler } from "../../helpers/activationHandler";
+import { useSize } from "../../composables/use-size";
 export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
 export { userClasses as class };
 const emit = createEventDispatcher();
 let tag;
 $:
   tag = to !== void 0 ? "a" : "div";
+$:
+  sizeObj = useSize(size);
 $:
   classes = createClasses(
     [
@@ -17,7 +20,7 @@ $:
       outline && "outlined",
       flat && "flat",
       (!$$slots.default && !label || round) && "round",
-      size && size !== "md" && size
+      size !== "md" && sizeObj.class
     ],
     {
       component: "q-btn",

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QBtnSizeOptions = "sm" | "md" | "lg" | "xl";
+import type { NativeProps, QuaffSizes } from "../../utils/types";
+export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
 export interface QBtnProps extends NativeProps {
     /**
      * Puts the button in a disabled state, making it unclickable.

package/dist/components/chip/QChip.svelte

@@ -2,6 +2,7 @@
 import { createClasses } from "../../utils/props";
 import { createEventDispatcher } from "svelte";
 import QIcon from "../icon/QIcon.svelte";
+import { useSize } from "../../composables/use-size";
 export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, size = "md", tabindex = void 0, href = void 0, userClasses = void 0;
 export { userClasses as class };
 const emit = createEventDispatcher();
@@ -10,10 +11,15 @@ $:
 $:
   imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
 $:
-  sizeClass = ["sm", "lg"].includes(size) ? size : void 0;
+  sizeObj = useSize(size);
 $:
   classes = createClasses(
-    [vertical && "vertical", round && "rounded", (outlined || disable) && "bordered", sizeClass],
+    [
+      vertical && "vertical",
+      round && "rounded",
+      (outlined || disable) && "bordered",
+      size !== "md" && sizeObj.class
+    ],
     {
       component: "q-chip",
       userClasses

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QChipSizeOptions = "sm" | "md" | "lg";
+import type { NativeProps, QuaffSizes } from "../../utils/types";
+export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
 export interface QChipProps extends NativeProps {
     /**
      * The content inside the chip. Will overwrite the default slot.

package/dist/components/drawer/QDrawer.svelte

@@ -2,6 +2,7 @@
 import { createClasses, createStyles } from "../../utils/props";
 import { getContext } from "svelte";
 import { clickOutside } from "../../helpers";
+import { useSize } from "../../composables/use-size";
 export let value = true, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
@@ -10,7 +11,7 @@ $:
   belowBreakpoint = behavior === "mobile" === true || behavior !== "desktop" && /** TODO: Get Layout width */
   1300 <= breakpoint;
 $:
-  widthStyle = ctx === void 0 ? isNaN(Number(width)) ? width : `${width}px` : void 0;
+  widthStyle = $ctx && useSize(width).style;
 $:
   hideOnRouteChange = persistent !== true || overlay === true;
 export const show = (e) => {

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils/types";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";
 export interface QDrawerProps extends NativeProps {
@@ -16,7 +16,7 @@ export interface QDrawerProps extends NativeProps {
      * The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.
      * @default 300
      */
-    width?: number | string;
+    width?: number | CssValue;
     /**
      * The breakpoint at which the drawer behavior changes. (not supported yet)
      * @default 1023

package/dist/components/footer/QFooter.svelte

@@ -1,13 +1,23 @@
 <script>import { getContext } from "svelte";
-import { createClasses } from "../../utils/props";
+import { createClasses, createStyles } from "../../utils/props";
+import { useSize } from "../../composables/use-size";
 export let value = true, bordered = false, elevated = false, height = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
 $:
-  classes = createClasses(["q-footer", $ctx && $ctx.footer.fixed && "fixed", userClasses]);
+  heightStyle = $ctx && useSize(height).style;
+$:
+  classes = createClasses(["q-footer", $ctx && $ctx.footer?.fixed && "fixed", userClasses]);
+$:
+  style = createStyles(
+    {
+      "--footer-height": heightStyle
+    },
+    userStyles
+  );
 </script>
 
-<footer class={classes} style={userStyles}>
+<footer class={classes} {style}>
   <nav>
     <slot />
   </nav>

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils/types";
 export interface QFooterProps extends NativeProps {
     /**
      * The value indicating whether the footer is visible or hidden. (not supported yet)
@@ -19,5 +19,5 @@ export interface QFooterProps extends NativeProps {
      * The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)
      * @default undefined
      */
-    height?: string | number;
+    height?: number | CssValue;
 }

package/dist/components/icon/QIcon.svelte

@@ -1,20 +1,13 @@
 <script>import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
 import { sizes } from "../../composables/use-size";
+import { useSize } from "../../composables/use-size";
 export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
-let sizeStyle;
-$: {
-  if (isNumber(size)) {
-    sizeStyle = `${size}px`;
-  } else if (typeof size === "string" && !sizes.includes(size)) {
-    sizeStyle = size;
-  } else {
-    sizeStyle = void 0;
-  }
-}
 $:
-  classes = createClasses([type, filled && "filled", sizes.includes(size) && size], {
+  sizeObj = useSize(size);
+$:
+  classes = createClasses([type, filled && "filled", sizeObj.class], {
     component: "q-icon",
     userClasses,
     quaffClasses: [color && `text-${color}`]
@@ -22,7 +15,7 @@ $:
 $:
   style = createStyles(
     {
-      "--size": sizeStyle
+      "--size": sizeObj.style
     },
     userStyles
   );

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps {
     /**

package/dist/components/progress/QCircularProgress.svelte

@@ -1,9 +1,10 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { useSize } from "../../composables/use-size";
+import { createClasses } from "../../utils/props";
 import { isNumber } from "../../utils/types";
 export let value = 0, indeterminate = false, size = "2em", color = void 0, thickness = 5, userClasses = void 0;
 export { userClasses as class };
 $:
-  spinnerSize = isNumber(size) ? `${size}px` : size;
+  spinnerSize = useSize(size);
 $:
   classes = createClasses([indeterminate && "indeterminate"], {
     component: "q-circular-progress",
@@ -12,7 +13,7 @@ $:
   });
 </script>
 
-<svg class={classes} height={spinnerSize} width={spinnerSize} viewBox="25 25 50 50">
+<svg class={classes} height={spinnerSize.style} width={spinnerSize.style} viewBox="25 25 50 50">
   <circle
     class="path"
     cx="50"

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         indeterminate?: boolean | undefined;
-        size?: string | number | undefined;
+        size?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         color?: QCircularProgressProps["color"];
         thickness?: number | undefined;
         class?: string | undefined;

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

@@ -1,20 +1,37 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QLinearProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
+    /**
+     * @default left
+     */
     from: "left" | "right";
+    /**
+     * @default false
+     */
     rounded: boolean;
 }
 export interface QCircularProgressProps extends NativeProps {
+    /**
+     * @default 0
+     */
     value: number;
+    /**
+     * @default false
+     */
     indeterminate: boolean;
-    size: string | number;
+    /**
+     * @default 2em
+     */
+    size: CssValue | number;
+    /**
+     * @default undefined
+     */
     color?: string;
+    /**
+     * @default 5
+     */
     thickness: number;
 }
-export declare const QLinearProgressPropsDefaults: {
-    userClasses?: string | undefined;
-    userStyles?: string | undefined;
-    value: number;
-    from: string;
-    rounded: boolean;
-};

package/dist/components/progress/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QLinearProgressPropsDefaults = {
-    value: 0,
-    from: "left",
-    rounded: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/railbar/QRailbar.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from "svelte";
 import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
+import { useSize } from "../../composables/use-size";
 export let width = 88, side = "left", bordered = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
@@ -21,7 +22,7 @@ $:
     userClasses
   ]);
 $:
-  widthStyle = ctx === void 0 ? isNumber(width) ? `${width}px` : width : void 0;
+  widthStyle = $ctx && useSize(width).style;
 $:
   style = createStyles(
     {

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
 declare const __propDef: {
     props: {
-        width?: string | number | undefined;
+        width?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         side?: "left" | "right" | undefined;
         bordered?: boolean | undefined;
         class?: string | undefined;

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

@@ -1,7 +1,15 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QRailbarProps extends NativeProps {
-    width: number | string;
+    /**
+     * @default 88px
+     */
+    width: CssValue | number;
+    /**
+     * @default left
+     */
     side: "left" | "right";
+    /**
+     * @default false
+     */
     bordered: boolean;
 }
-export declare const QRailbarPropsDefaults: QRailbarProps;

package/dist/components/railbar/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QRailbarPropsDefaults = {
-    width: 88,
-    side: "left",
-    bordered: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/toolbar/QToolbar.svelte

@@ -1,6 +1,7 @@
 <script>import { createClasses, createStyles } from "../../utils/props";
 import { getContext } from "svelte";
 import { isNumber } from "../../utils/types";
+import { useSize } from "../../composables/use-size";
 export let inset = false, height = "64px", userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
@@ -14,7 +15,7 @@ $:
     userClasses
   ]);
 $:
-  heightStyle = ctx === void 0 ? isNumber(height) ? `${height}px` : height : void 0;
+  heightStyle = $ctx && useSize(height).style;
 $:
   if ($ctx?.header !== void 0) {
     if (userStyles?.includes("display: none")) {

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         inset?: boolean | undefined;
-        height?: string | number | undefined;
+        height?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         class?: string | undefined;
         style?: string | undefined;
     };

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

@@ -1,10 +1,17 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QToolbarProps extends NativeProps {
+    /**
+     * @default false
+     */
     inset: boolean;
-    height: string | number;
+    /**
+     * @default 64px
+     */
+    height: CssValue | number;
 }
-export declare const QToolbarPropsDefaults: QToolbarProps;
 export interface QToolbarTitleProps extends NativeProps {
+    /**
+     * @default false
+     */
     shrink: boolean;
 }
-export declare const QToolbarTitlePropsDefaults: QToolbarTitleProps;

package/dist/components/toolbar/props.js

@@ -1,10 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QToolbarPropsDefaults = {
-    inset: false,
-    height: "64px",
-    ...NativePropsDefaults,
-};
-export const QToolbarTitlePropsDefaults = {
-    shrink: false,
-    ...NativePropsDefaults,
-};
+export {};

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

@@ -1,9 +1,9 @@
-export type Size = "xs" | "sm" | "md" | "lg" | "xl";
-export declare const sizes: Size[];
-export declare const useSizeClasses: {
-    [key in Size]: string;
-};
-export interface useSizeProps {
-    size?: string;
+import { CssUnit, QuaffSizes } from "../utils/types";
+export declare const sizes: QuaffSizes[];
+export declare const CssUnits: CssUnit[];
+interface UseSize {
+    class?: string;
+    style?: string;
 }
-export default function (sizeProp: any): string | null;
+export declare function useSize(sizeProp: any): UseSize;
+export {};

package/dist/composables/use-size.js

@@ -1,15 +1,25 @@
+import { isNumber } from "../utils/types";
 export const sizes = ["xs", "sm", "md", "lg", "xl"];
-// @todo change classes or deprecate
-export const useSizeClasses = {
-    xs: "tiny",
-    sm: "small",
-    md: "",
-    lg: "large",
-    xl: "extra",
-};
-export default function (sizeProp) {
-    // return sizeStyle
-    return sizeProp in useSizeClasses
-        ? useSizeClasses[sizeProp]
-        : null;
+export const CssUnits = ["px", "%", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax"];
+export function useSize(sizeProp) {
+    if (isNumber(sizeProp) && sizeProp > 0) {
+        return {
+            style: `${sizeProp}px`,
+        };
+    }
+    else if (typeof sizeProp === "string") {
+        for (let unit of CssUnits) {
+            if (sizeProp.slice(-unit.length) === unit) {
+                return {
+                    style: sizeProp,
+                };
+            }
+            else if (sizes.includes(sizeProp)) {
+                return {
+                    class: sizeProp,
+                };
+            }
+        }
+    }
+    return {};
 }