@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha16

package/dist/components/tabs/QTab.svelte

@@ -3,7 +3,6 @@ import { isRouteActive } from "../../composables";
 import { ripple } from "../../helpers";
 import { Quaff } from "../../stores";
 import {
-  createClasses,
   isActivationKey,
   isArrowKey,
   getDirection,
@@ -11,7 +10,7 @@ import {
   isTabKey,
   getClosestFocusableBlock
 } from "../../utils";
-import { hasContext, getContext, onMount } from "svelte";
+import { hasContext, getContext } from "svelte";
 import { get } from "svelte/store";
 export let name, to = void 0, icon = void 0, userClasses = "";
 export { userClasses as class };
@@ -85,21 +84,17 @@ function onKeydown(e) {
 </script>
 
 <svelte:element
+  this={tag}
   use:ripple
   bind:this={qTab}
-  this={tag}
-
   href={to}
   role={tag === "a" ? "button" : undefined}
   aria-current={isActive || undefined}
-
   class="q-tab {userClasses}"
   class:q-tab--active={isActive}
-
   on:click
   on:click={onClick}
   on:keydown={onKeydown}
-  
   {...$$restProps}
 >
   <div>

package/dist/components/tabs/QTabs.svelte

@@ -1,4 +1,4 @@
-  <script context="module"></script>
+<script context="module"></script>
 
 <script>import { movementDirection } from "../../utils";
 import { setContext } from "svelte";
@@ -61,10 +61,6 @@ function prepareTransitionSize(storeVariant, fromEl, toEl) {
 }
 </script>
 
-<nav
-  bind:this={qTabs}
-  class="q-tabs q-tabs--{variant} {userClasses}"
-  class:q-tabs--rounded={round}
-  >
+<nav bind:this={qTabs} class="q-tabs q-tabs--{variant} {userClasses}" class:q-tabs--rounded={round}>
   <slot />
 </nav>

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

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

package/dist/components/tabs/docs.js

@@ -1,5 +1,5 @@
 import { QTabsDocsProps } from "./docs.props";
-export let QTabsDocs = {
+export const QTabsDocs = {
     name: "QTabs",
     description: "Tabs allow creating navigational tabs, enabling users to switch between different views or functional aspects.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash f8981f83763a817f1b1dc144d170a1a4
 export const QTabsDocsProps = [
     {
         name: "value",
@@ -28,7 +30,7 @@ export const QTabDocsProps = [
     {
         name: "name",
         type: "string",
-        optional: true,
+        optional: false,
         clickableType: false,
         description: "",
         default: "",

package/dist/components/tabs/props.js

@@ -1 +1 @@
-import "$lib/utils";
+export {};

package/dist/components/toggle/QToggle.svelte

@@ -1,15 +1,5 @@
-<script>import { createClasses } from "../../utils";
-export let value, icon = void 0, label = void 0, leftLabel = void 0, disable = void 0, userClasses = void 0;
+<script>export let value, icon = void 0, label = void 0, leftLabel = void 0, disable = void 0, userClasses = "";
 export { userClasses as class };
-$:
-  classes = createClasses([leftLabel && "reversed", disable && "disabled", userClasses], {
-    component: "q-toggle",
-    userClasses
-  });
-$:
-  classesInner = createClasses([icon && "icon"], {
-    component: "q-toggle__inner"
-  });
 function toggle() {
   if (disable !== true) {
     value = !value;
@@ -19,15 +9,17 @@ function toggle() {
 
 <div
   on:click={toggle}
-  class={classes}
-  aria-disabled={disable}
+  class="q-toggle {userClasses}"
+  class:q-toggle--reversed={leftLabel}
+  class:q-toggle--disabled={disable}
+  aria-disabled={disable || undefined}
   role="switch"
   aria-checked={value}
   tabindex="0"
   {...$$restProps}
 >
-  <label class={classesInner}>
-    <input bind:checked={value} type="checkbox" disabled={disable} />
+  <label class="q-toggle__inner" class:q-toggle__inner--icon={icon}>
+    <input bind:checked={value} type="checkbox" disabled={disable || undefined} />
     <span>
       {#if icon}
         <i>{icon}</i>

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

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

package/dist/components/toggle/docs.js

@@ -1,4 +1,4 @@
-export let QToggleDocs = {
+export const QToggleDocs = {
     name: "QToggle",
     description: "QToggle is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash ace8c9aeca6b2affbd44ebe6a8219105
 export const QToggleDocsProps = [
     {
         name: "value",

package/dist/components/toolbar/QToolbar.svelte

@@ -1,22 +1,18 @@
-<script>import { useSize } from "../../composables";
-import { createClasses, createStyles } from "../../utils";
-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/docs.d.ts

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

package/dist/components/toolbar/docs.js

@@ -1,5 +1,5 @@
 import { QToolbarDocsProps } from "./docs.props";
-export let QToolbarDocs = {
+export const 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: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash ff59611542258810d9f769e875972d2a
 export const QToolbarDocsProps = [
     {
         name: "inset",

package/dist/components/tooltip/QTooltip.svelte

@@ -1,13 +1,15 @@
-<script>import { createClasses } from "../../utils";
-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";
-export declare let QTooltipDocs: QComponentDocs;
+export declare const QTooltipDocs: QComponentDocs;

package/dist/components/tooltip/docs.js

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

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",

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/composables/index.d.ts

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

package/dist/composables/index.js

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

package/dist/composables/{use-size.d.ts → useSize.d.ts}

@@ -5,5 +5,5 @@ interface UseSize {
     class?: string;
     style?: string;
 }
-export declare function useSize(sizeProp: any): UseSize;
+export declare function useSize(sizeProp: unknown): UseSize;
 export {};

package/dist/composables/{use-size.js → useSize.js}

@@ -8,7 +8,7 @@ export function useSize(sizeProp) {
         };
     }
     else if (typeof sizeProp === "string") {
-        for (let unit of CssUnits) {
+        for (const unit of CssUnits) {
             if (sizeProp.slice(-unit.length) === unit) {
                 return {
                     style: sizeProp,

package/dist/css/fonts.scss

@@ -1,4 +1,17 @@
 @import "@fontsource/roboto";
-@import "@fontsource/material-symbols-outlined";
-@import "@fontsource/material-symbols-rounded";
-@import "@fontsource/material-symbols-sharp";
+
+@mixin font-face-declaration($font-name) {
+  $file-name: to-lower-case($font-name);
+
+  @font-face {
+    font-family: "Material Symbols #{$font-name}";
+    src: url("material-symbols/material-symbols-#{$file-name}.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+  }
+}
+
+@include font-face-declaration("Outlined");
+@include font-face-declaration("Rounded");
+@include font-face-declaration("Sharp");