@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha10

package/dist/components/tabs/index.scss

@@ -6,11 +6,14 @@
   max-width: 100%;
   overflow: auto;
   scroll-behavior: smooth;
+  border-radius: 0;
+  border-bottom: solid 0.0625rem var(--outline);
   &::-webkit-scrollbar {
     display: none;
   }
 
   & > .q-tab {
+    position: relative;
     box-sizing: border-box;
     height: 48px;
     min-width: max-content;
@@ -18,24 +21,52 @@
     align-items: center;
     justify-content: center;
     flex: 1;
-    background-color: unset;
+    background-color: var(--surface);
+    color: var(--on-surface);
     border-radius: 0;
     gap: 0;
+    overflow: hidden;
 
-    & > .q-icon {
-      margin-right: 8px;
+    & .q-tab__icon {
+      margin-right: 0.25rem;
     }
 
-    &:is(:hover, :focus)::after {
-      background-image: radial-gradient(circle, var(--on-surface-variant-2) 1%, transparent 1%);
+    &--active {
+      color: var(--primary);
+    }
+
+    &:is(:hover, :focus):not([aria-disabled])::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--on-surface);
+      border-radius: none;
+      overflow: hidden;
+    }
+
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
     }
   }
 
-  &.vertical-tabs {
+  &.q-tabs--vertical {
     flex-direction: column;
-    min-height: calc(var(--tab-count) * 48px);
+    min-height: calc(var(--tab-count) * 3rem);
     width: fit-content;
     align-items: stretch;
+    border-bottom: unset;
+    border-right: solid 0.0625rem var(--outline);
+
+    & > .q-tab {
+      @include padding("x", "md");
+    }
 
     &::after {
       top: var(--indicator-position);
@@ -62,11 +93,11 @@
     opacity: 0;
   }
 
-  &:not(.hidden-indicator)::after {
+  &:not(.q-tabs--hidden-indicator)::after {
     opacity: 1;
   }
 
-  &.small-indicator::after {
+  &.q-tabs--primary::after {
     left: var(--indicator-position);
     transform: translateX(-50%);
     height: 3px;

package/dist/components/toggle/QToggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QToggleProps } from "./props";
 declare const __propDef: {
     props: {
@@ -15,9 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QToggleProps = typeof __propDef.props;
+type QToggleProps_ = typeof __propDef.props;
+export { QToggleProps_ as QToggleProps };
 export type QToggleEvents = typeof __propDef.events;
 export type QToggleSlots = typeof __propDef.slots;
-export default class QToggle extends SvelteComponentTyped<QToggleProps, QToggleEvents, QToggleSlots> {
+export default class QToggle extends SvelteComponent<QToggleProps, QToggleEvents, QToggleSlots> {
 }
-export {};

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

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

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

@@ -1,4 +1,4 @@
-import { type NativeProps } from "$utils/types";
+import { type NativeProps } from "../../utils/types";
 export interface QToggleProps extends NativeProps {
     value?: boolean;
     label?: string;

package/dist/components/toggle/props.js

@@ -1,4 +1,4 @@
-import { NativePropsDefaults } from "$utils/types";
+import { NativePropsDefaults } from "../../utils/types";
 export const QTogglePropsDefaults = {
     value: false,
     label: undefined,

package/dist/components/toolbar/QToolbar.svelte

@@ -1,32 +1,16 @@
 <script>import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
-import { isNumber } from "../../utils/types";
-export let inset = false, height = "64px", userClasses = void 0, userStyles = void 0;
+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 };
-let ctx = getContext("layout");
 $:
-  classes = createClasses([
-    $ctx?.header && "q-header",
-    "q-toolbar",
-    "surface",
-    $ctx?.header?.fixed && "fixed",
-    inset && "q-toolbar--inset",
+  classes = createClasses([inset && "inset", elevate && "elevated", border && "bordered"], {
+    component: "q-toolbar",
     userClasses
-  ]);
-$:
-  heightStyle = ctx === void 0 ? isNumber(height) ? `${height}px` : height : void 0;
-$:
-  if ($ctx?.header !== void 0) {
-    if (userStyles?.includes("display: none")) {
-      $ctx.header.display = false;
-    } else {
-      $ctx.header.display = true;
-    }
-  }
+  });
 $:
   style = createStyles(
     {
-      "--header-height": heightStyle
+      height: !userClasses?.includes("q-header") && useSize(height).style
     },
     userStyles
   );

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

@@ -1,10 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QToolbarProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
         inset?: boolean | undefined;
-        height?: string | number | undefined;
+        border?: boolean | undefined;
+        elevate?: boolean | 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;
     };
@@ -15,9 +17,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QToolbarProps = typeof __propDef.props;
+type QToolbarProps_ = typeof __propDef.props;
+export { QToolbarProps_ as QToolbarProps };
 export type QToolbarEvents = typeof __propDef.events;
 export type QToolbarSlots = typeof __propDef.slots;
-export default class QToolbar extends SvelteComponentTyped<QToolbarProps, QToolbarEvents, QToolbarSlots> {
+export default class QToolbar extends SvelteComponent<QToolbarProps, QToolbarEvents, QToolbarSlots> {
 }
-export {};

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -0,0 +1,10 @@
+<script>import { createClasses } from "../../utils/props";
+export let shrink = false, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+$:
+  classes = createClasses([shrink && "shrink", userClasses], { component: "q-toolbar-title" });
+</script>
+
+<div class={classes} {...$$restProps} style={userStyles}>
+  <slot />
+</div>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { QToolbarTitleProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        shrink?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type QToolbarTitleProps_ = typeof __propDef.props;
+export { QToolbarTitleProps_ as QToolbarTitleProps };
+export type QToolbarTitleEvents = typeof __propDef.events;
+export type QToolbarTitleSlots = typeof __propDef.slots;
+export default class QToolbarTitle extends SvelteComponent<QToolbarTitleProps, QToolbarTitleEvents, QToolbarTitleSlots> {
+}

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

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

package/dist/components/toolbar/docs.js

@@ -0,0 +1,11 @@
+import { QToolbarDocsProps } from "./docs.props";
+export let QToolbarDocs = {
+    name: "QToolbar",
+    description: "The Toolbar component is used to hold common actions and controls, often located at the top of an application or view.",
+    docs: {
+        props: QToolbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -6,3 +6,11 @@ export declare const QToolbarDocsProps: {
     description: string;
     default: string;
 }[];
+export declare const QToolbarTitleDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -16,3 +16,13 @@ export const QToolbarDocsProps = [
         default: "",
     },
 ];
+export const QToolbarTitleDocsProps = [
+    {
+        name: "shrink",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/toolbar/index.scss

@@ -1,7 +1,42 @@
 .q-toolbar {
   width: 100%;
+  padding: 0 1rem;
   transition: all var(--speed3);
+  background-color: var(--surface);
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    white-space: nowrap;
+    gap: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+
   &--inset {
     padding-left: 58px;
   }
+
+  &--elevated {
+    @include 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";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QToolbarProps extends NativeProps {
+    /**
+     * @default false
+     */
     inset: boolean;
-    height: string | number;
+    /**
+     * @default false
+     */
+    border: boolean;
+    /**
+     * @default false
+     */
+    elevate: boolean;
+    /**
+     * @default 64px
+     */
+    height: CssValue | number;
+}
+export interface QToolbarTitleProps extends NativeProps {
+    /**
+     * @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

@@ -2,12 +2,10 @@
 export let value = void 0, position = "bottom", userClasses = "";
 export { userClasses as class };
 $:
-  classes = createClasses([
-    "q-tooltip tooltip",
-    value !== false && "active",
-    position,
+  classes = createClasses([value && "active", position || "top"], {
+    component: "q-tooltip",
     userClasses
-  ]);
+  });
 </script>
 
 <div class={classes} {...$$restProps}>

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QTooltipProps } from "./props";
 declare const __propDef: {
     props: {
@@ -14,9 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QTooltipProps = typeof __propDef.props;
+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 SvelteComponentTyped<QTooltipProps, QTooltipEvents, QTooltipSlots> {
+export default class QTooltip extends SvelteComponent<QTooltipProps, QTooltipEvents, QTooltipSlots> {
 }
-export {};

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

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

package/dist/components/tooltip/docs.js

@@ -0,0 +1,11 @@
+import { QTooltipDocsProps } from "./docs.props";
+export let 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/index.scss

@@ -1,7 +1,82 @@
 .q-tooltip {
+  --space: -0.5rem;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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: var(--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/composables/use-align.js

@@ -1,12 +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 default function useAlign(align = "top left") {
-    const alignClass = align
+    const alignments = align
         .split(" ")
-        .map((a) => `${a}-align`)
-        .join(" ");
-    return ["between", "around", "evenly", "stretch"].some((alignment) => align.split(" ").includes(alignment))
-        ? `flex ${alignClass}`
-        : `${alignClass}`;
+        .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.js

@@ -1,5 +1,4 @@
 import { createClasses } from "../utils/props";
-import "$lib/stores/Quaff";
 export const UseRouterLinkPropsDefaults = {
     href: undefined,
     to: undefined,

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

@@ -1,11 +1,9 @@
-export declare const useSizeClasses: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: 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,13 +1,25 @@
-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;
+import { isNumber } from "../utils/types";
+export const sizes = ["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) {
+        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 {};
 }

package/dist/css/flex.scss

@@ -0,0 +1,41 @@
+.flex {
+  display: flex !important;
+  flex-wrap: wrap;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.flex-center {
+  @extend .items-center;
+  @extend .justify-center;
+}

package/dist/css/fonts.scss

@@ -0,0 +1,4 @@
+@import "@fontsource/roboto";
+@import "@fontsource/material-symbols-outlined";
+@import "@fontsource/material-symbols-rounded";
+@import "@fontsource/material-symbols-sharp";

package/dist/css/grid.scss

@@ -1,19 +1,4 @@
-// Grid variables
-$grid-columns: 12;
-$gutter-xs: 4px;
-$gutter-sm: 8px;
-$gutter-md: 16px;
-$gutter-lg: 24px;
-$gutter-xl: 48px;
-
-// Responsive breakpoints
-$breakpoints: (
-  xs: 0px,
-  sm: 600px,
-  md: 960px,
-  lg: 1280px,
-  xl: 1920px,
-);
+@import "./variables-sass.scss";
 
 .row {
   display: grid;