@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/toolbar/index.scss

@@ -1,7 +1,40 @@
+@use "$css/mixins";
+@use "$css/variables";
+
 .q-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
   width: 100%;
-  transition: all var(--speed3);
+  height: var(--toolbar-height);
+  padding: 0 1rem;
+  transition: all variables.$speed3;
+  background-color: var(--surface);
+
   &--inset {
     padding-left: 58px;
   }
+
+  &--elevated {
+    @include mixins.elevate(1, "bottom");
+  }
+
+  &--bordered {
+    border-bottom: solid 0.0625rem var(--outline);
+  }
+}
+
+.q-toolbar-title {
+  display: flex;
+  flex: auto;
+  font-size: 1.75rem;
+  font-weight: 400;
+  justify-content: center;
+
+  &--shrink {
+    flex: unset;
+  }
 }

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

@@ -1,6 +1,25 @@
-import type { NativeProps } from "../../utils/types";
-export interface QToolbarProps extends NativeProps {
-    inset: boolean;
-    height: string | number;
+import type { HTMLAttributes } from "svelte/elements";
+export interface QToolbarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * @default false
+     */
+    border?: boolean;
+    /**
+     * @default false
+     */
+    elevate?: boolean;
+    /**
+     * @default 64
+     */
+    height?: number;
+}
+export interface QToolbarTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * @default false
+     */
+    shrink?: boolean;
 }
-export declare const QToolbarPropsDefaults: QToolbarProps;

package/dist/components/toolbar/props.js

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

package/dist/components/tooltip/QTooltip.svelte

@@ -1,15 +1,11 @@
-<script>import { createClasses } from "../../utils/props";
-export let value = void 0, position = "bottom", userClasses = "";
-export { userClasses as class };
-$:
-  classes = createClasses([
-    "q-tooltip tooltip",
-    value !== false && "active",
-    position,
-    userClasses
-  ]);
+<script lang="ts">
+  let { value, position = "bottom", children, ...props } = $props();
 </script>
 
-<div class={classes} {...$$restProps}>
-  <slot />
+<div
+  {...props}
+  class="q-tooltip{props.class ? ` ${props.class}` : ''} q-tooltip--{position}"
+  class:q-tooltip--active={value}
+>
+  {@render children?.()}
 </div>

package/dist/components/tooltip/QTooltip.svelte.d.ts

@@ -1,22 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QTooltipProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: QTooltipProps["value"];
-        position?: "top" | "bottom" | "left" | "right" | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QTooltipProps_ = typeof __propDef.props;
-export { QTooltipProps_ as QTooltipProps };
-export type QTooltipEvents = typeof __propDef.events;
-export type QTooltipSlots = typeof __propDef.slots;
-export default class QTooltip extends SvelteComponent<QTooltipProps, QTooltipEvents, QTooltipSlots> {
-}
+declare const QTooltip: import("svelte").Component<QTooltipProps, {}, "">;
+export default QTooltip;

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

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

package/dist/components/tooltip/docs.js

@@ -0,0 +1,11 @@
+import { QTooltipDocsProps } from "./docs.props";
+export const QTooltipDocs = {
+    name: "QTooltip",
+    description: "The Tooltip component displays informative text on hover or focus, providing additional context.",
+    docs: {
+        props: QTooltipDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 79575d1e83ec0e01be08573c5d70998f
 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

@@ -1,7 +1,85 @@
+@use "$css/variables";
+
 .q-tooltip {
+  --space: -0.5rem;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: auto;
+  gap: 0.5rem;
+  background-color: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+  font-size: 0.75rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  bottom: auto;
+  right: auto;
+  transform: translate(-50%, -100%) scale(0.9);
+  width: auto;
+  white-space: nowrap;
+  font-weight: 500;
+  opacity: 0;
+  transition: variables.$speed2 all;
   z-index: 9999;
+
+  &--top {
+    margin-top: var(--space) !important;
+  }
+
+  &--right {
+    right: 0;
+    top: 50%;
+    bottom: auto;
+    left: auto;
+    transform: translate(100%, -50%) scale(0.9);
+    margin-right: var(--space) !important;
+  }
+
+  &--bottom {
+    bottom: 0;
+    left: 50%;
+    top: auto;
+    right: auto;
+    transform: translate(-50%, 100%) scale(0.9);
+    margin-bottom: var(--space) !important;
+  }
+
+  &--left {
+    margin-left: var(--space) !important;
+
+    left: 0;
+    top: 50%;
+    bottom: auto;
+    right: auto;
+    transform: translate(-100%, -50%) scale(0.9);
+  }
 }
 
-:hover > .q-tooltip.tooltip:not(.active) {
-  opacity: 0;
+// Not easily integratable into the block above due to the :hover
+:hover > .q-tooltip,
+.q-tooltip--active {
+  visibility: visible;
+  opacity: 1;
+
+  &.q-tooltip {
+    &--top {
+      transform: translate(-50%, -100%) scale(1);
+    }
+    &--left {
+      transform: translate(-100%, -50%) scale(1);
+    }
+
+    &--right {
+      transform: translate(100%, -50%) scale(1);
+    }
+
+    &--bottom {
+      transform: translate(-50%, 100%) scale(1);
+    }
+  }
 }

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

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

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 "./useAlign";
+export * from "./useRouterLink";
+export * from "./useSizeLegacy";

package/dist/composables/index.js

@@ -1 +1,3 @@
-"use strict";
+export * from "./useAlign";
+export * from "./useRouterLink";
+export * from "./useSizeLegacy";

package/dist/composables/{use-align.d.ts → useAlign.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/useAlign.js

@@ -0,0 +1,23 @@
+export const UseAlignPropsDefaults = {
+    align: "top left",
+};
+const alignMap = {
+    left: "start",
+    center: "center",
+    right: "end",
+    between: "between",
+    around: "around",
+    evenly: "evenly",
+    // @todo - justify-stretch isn't possible
+    stretch: "stretch",
+};
+export function useAlign(align = "top left") {
+    const alignments = align
+        .split(" ")
+        .map((entry) => {
+        const val = alignMap[entry];
+        return val ? `justify-${val}` : false;
+    })
+        .filter((entry) => typeof entry === "string");
+    return ["flex", ...alignments].join(" ");
+}

package/dist/composables/{use-router-link.d.ts → useRouterLink.d.ts}

@@ -2,13 +2,13 @@ import type { Page } from "@sveltejs/kit";
 export interface UseRouterLinkProps {
     href?: string;
     to?: string;
-    disable: boolean;
+    disable?: boolean;
     activeClass?: string;
-    replace: boolean;
+    replace?: boolean;
 }
 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 → useRouterLink.js}

@@ -1,5 +1,4 @@
-import { createClasses } from "../utils/props";
-import "$lib/stores/Quaff";
+import { createClasses } from "../utils";
 export const UseRouterLinkPropsDefaults = {
     href: undefined,
     to: undefined,
@@ -12,12 +11,12 @@ export function isRouteActive(router, to) {
         ? router.url.pathname === to
         : router.url.pathname.slice(0, (to || "").length) === to;
 }
-export default function (props) {
-    const hasLink = props.to !== undefined || props.href !== undefined;
+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 = {
         href: props.to || props.href,
-        "data-sveltkit-reload": props.replace === true ? "" : undefined,
+        "data-sveltkit-reload": props.replace ? "" : undefined,
     };
     return {
         hasLink,

package/dist/composables/useSize.d.ts

@@ -0,0 +1,10 @@
+export declare const sizes: Q.Size[];
+export declare const CssUnits: Q.CssUnit[];
+/**
+ * Checks wether the input is a size like "sm" or "lg"
+ */
+export declare function isQuaffSize(size: number | string): size is Q.Size;
+export declare function useSize(size: number | string, component?: `q-${string}`): {
+    class: string;
+    style: string | undefined;
+};

package/dist/composables/useSize.js

@@ -0,0 +1,37 @@
+import { isNumeric } from "../utils/number.js";
+export const sizes = ["none", "xs", "sm", "md", "lg", "xl"];
+export const CssUnits = [
+    "px",
+    "%",
+    "em",
+    "ex",
+    "ch",
+    "rem",
+    "vw",
+    "vh",
+    "vmin",
+    "vmax",
+];
+/**
+ * Checks wether the input is a size like "sm" or "lg"
+ */
+export function isQuaffSize(size) {
+    return sizes.includes(size);
+}
+export function useSize(size, component) {
+    const sizeClass = isQuaffSize(size) ? ` ${component}--${size}` : "";
+    const sizeStyle = () => {
+        if (isNumeric(size)) {
+            return +size > 0 ? `${size}px` : undefined;
+        }
+        for (const unit of CssUnits) {
+            if (size.slice(-unit.length) === unit) {
+                return size;
+            }
+        }
+    };
+    return {
+        class: sizeClass,
+        style: sizeStyle(),
+    };
+}

package/dist/composables/useSizeLegacy.d.ts

@@ -0,0 +1,9 @@
+import type { CssUnit, QuaffSizes } from "../utils";
+export declare const sizes: QuaffSizes[];
+export declare const CssUnits: CssUnit[];
+interface UseSize {
+    class?: string;
+    style?: string;
+}
+export declare function useSize(sizeProp?: string | number): UseSize;
+export {};

package/dist/composables/useSizeLegacy.js

@@ -0,0 +1,25 @@
+import { isNumeric } from "../utils/number";
+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 (sizeProp !== undefined && isNumeric(sizeProp) && Number(sizeProp) > 0) {
+        return {
+            style: `${sizeProp}px`,
+        };
+    }
+    if (typeof sizeProp === "string") {
+        for (const unit of CssUnits) {
+            if (sizeProp.slice(-unit.length) === unit) {
+                return {
+                    style: sizeProp,
+                };
+            }
+            if (sizes.includes(sizeProp)) {
+                return {
+                    class: sizeProp,
+                };
+            }
+        }
+    }
+    return {};
+}

package/dist/css/_components.scss

@@ -0,0 +1,31 @@
+@forward "$components/avatar/QAvatar.scss";
+@forward "$components/breadcrumbs/QBreadcrumbs.scss";
+@forward "$components/breadcrumbs/QBreadcrumbsEl.scss";
+@forward "$components/button/QBtn.scss";
+@forward "$components/card/QCard.scss";
+@forward "$components/card/QCardActions.scss";
+@forward "$components/card/QCardSection.scss";
+@forward "$components/checkbox";
+@forward "$components/chip/QChip.scss";
+@forward "$components/dialog/QDialog.scss";
+@forward "$components/drawer/QDrawer.scss";
+@forward "$components/footer/QFooter.scss";
+@forward "$components/header/QHeader.scss";
+@forward "$components/icon/QIcon.scss";
+@forward "$components/input";
+@forward "$components/layout/QLayout.scss";
+@forward "$components/list/QItem.scss";
+@forward "$components/list/QItemSection.scss";
+@forward "$components/list/QList.scss";
+@forward "$components/progress/QCircularProgress.scss";
+@forward "$components/progress/QLinearProgress.scss";
+@forward "$components/radio";
+@forward "$components/railbar/QRailbar.scss";
+@forward "$components/select";
+@forward "$components/separator/QSeparator.scss";
+@forward "$components/switch/QSwitch.scss";
+@forward "$components/table";
+@forward "$components/tabs/QTab.scss";
+@forward "$components/tabs/QTabs.scss";
+@forward "$components/toolbar";
+@forward "$components/tooltip";

package/dist/css/_disabled.scss

@@ -0,0 +1,18 @@
+@use "$css/mixins";
+
+@mixin base() {
+  cursor: not-allowed;
+  box-shadow: none;
+  user-select: none;
+  color: font-color();
+  background-color: transparent;
+  transition: none;
+}
+
+@function font-color($color: on-surface) {
+  @return mixins.with-alpha(var(--#{$color}), 38%);
+}
+
+@function rest-color($color: on-surface) {
+  @return mixins.with-alpha(var(--#{$color}), 12%);
+}

package/dist/css/_ripple.scss

@@ -0,0 +1,49 @@
+.q-ripple {
+  background-color: var(--ripple-color, var(--outline));
+  opacity: 0.1;
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  -webkit-transition: 0.6s;
+  transition: 0.6s;
+  -webkit-animation: ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+  animation: ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+
+  &--center .q-ripple {
+    top: 50% !important;
+    left: 50% !important;
+    translate: -50% -50% !important;
+  }
+
+  &--effect {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    background: none;
+    pointer-events: none;
+    z-index: 999;
+  }
+}
+
+@-webkit-keyframes ripple {
+  from {
+    scale: 0;
+  }
+
+  to {
+    scale: 1;
+  }
+}
+
+@keyframes ripple {
+  from {
+    scale: 0;
+  }
+
+  to {
+    scale: 1;
+  }
+}

package/dist/css/_variables.scss

@@ -0,0 +1,73 @@
+// Responsive breakpoints
+$breakpoints: (
+  xs: 0px,
+  sm: 600px,
+  md: 960px,
+  lg: 1280px,
+  xl: 1920px,
+);
+
+// Grid variables
+$grid-columns: 12;
+
+// Spaces
+$space-base: 1rem !default;
+$space-x-base: $space-base !default;
+$space-y-base: $space-base !default;
+
+$space-none: 0 !default;
+$space-xs: 0.25rem !default;
+$space-sm: 0.5rem !default;
+$space-md: 1rem !default;
+$space-lg: 1.5rem !default;
+$space-xl: 3rem !default;
+
+$spaces: (
+  "auto": auto,
+  "none": $space-none,
+  "xs": $space-xs,
+  "sm": $space-sm,
+  "md": $space-md,
+  "lg": $space-lg,
+  "xl": $space-xl,
+) !default;
+
+// Positions
+$positions: (
+  "t": -top,
+  "r": -right,
+  "b": -bottom,
+  "l": -left,
+  "x": -inline,
+  "y": -block,
+  "a": "",
+);
+$border-positions: top, right, bottom, left;
+
+// Speeds
+$speed1: 0.1s;
+$speed2: 0.2s;
+$speed3: 0.3s;
+$speed4: 0.4s;
+
+// Layout offsets
+$left-railbar: var(--left-railbar-width);
+$right-railbar: var(--right-railbar-width);
+$left-right-railbar: calc(#{$left-railbar} + #{$right-railbar});
+
+$left-drawer: var(--left-drawer-width);
+$right-drawer: var(--right-drawer-width);
+$left-right-drawer: calc(#{$left-drawer} + #{$right-drawer});
+
+$left-full: calc(#{$left-railbar} + #{$left-drawer});
+$right-full: calc(#{$right-railbar} + #{$right-drawer});
+
+$left-railbar-right-drawer: calc(#{$left-railbar} + #{$right-drawer});
+$right-railbar-left-drawer: calc(#{$right-railbar} + #{$left-drawer});
+
+$left-full-right-railbar: calc(#{$left-full} + #{$right-railbar});
+$left-full-right-drawer: calc(#{$left-full} + #{$right-drawer});
+$right-full-left-railbar: calc(#{$right-full} + #{$left-railbar});
+$right-full-left-drawer: calc(#{$right-full} + #{$left-drawer});
+
+$full: calc(#{$left-full} + #{$right-full});

package/dist/css/classes/_design.scss

@@ -0,0 +1,57 @@
+@use "$css/disabled";
+@use "../mixins" as *;
+
+// Disabled
+.disabled {
+  @include disabled.base();
+}
+
+// Borders
+.border {
+  @include border;
+}
+
+.border-top {
+  @include border(var(--outline), top);
+}
+
+.border-right {
+  @include border(var(--outline), right);
+}
+
+.border-bottom {
+  @include border(var(--outline), bottom);
+}
+
+.border-left {
+  @include border(var(--outline), left);
+}
+
+// Elevation
+.elevate {
+  &-none {
+    box-shadow: none;
+  }
+
+  $elevations: (
+    "sm": 1,
+    "md": 2,
+    "lg": 3,
+  );
+
+  @each $elevation, $value in $elevations {
+    &-#{$elevation} {
+      &-top {
+        @include elevate($value, "top");
+      }
+      &-bottom {
+        @include elevate($value, "bottom");
+      }
+    }
+  }
+}
+
+// Transparent
+.transparent {
+  @include transparent;
+}