@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha16

package/dist/components/private/QApi.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils";
 declare const __propDef: {
     props: {
-        QComponentDocs: QComponentDocs[];
+        componentDocs: QComponentDocs[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/private/QDocs.svelte

@@ -1,10 +1,10 @@
 <script>import { Quaff } from "../../stores";
 import { QCard, QCardSection } from "../..";
 import QApi from "./QApi.svelte";
-export let QComponentDocs;
+export let componentDocs;
 $:
   isDark = $Quaff.dark.isActive;
-let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QComponentDocs;
+let principalDocument = Array.isArray(componentDocs) ? componentDocs[0] : componentDocs;
 </script>
 
 <div class="q-docs" style="margin: 1rem">
@@ -39,7 +39,7 @@ let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QCom
     </QCard>
   </div>
 
-  <QApi QComponentDocs={Array.isArray(QComponentDocs) ? QComponentDocs : [QComponentDocs]} />
+  <QApi componentDocs={Array.isArray(componentDocs) ? componentDocs : [componentDocs]} />
 
   {#if $$slots.usage}
     <div class="s12 q-pa-md">
@@ -78,16 +78,6 @@ let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QCom
   font-size: 1.75rem;
 }
 
-.prop-type {
-  opacity: 0.75;
-}
-.prop-type.clickable {
-  cursor: pointer;
-}
-.prop-type.clickable:hover {
-  opacity: 1;
-}
-
 .heading-usage {
   display: flex;
   align-items: center;

package/dist/components/private/QDocs.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils";
 declare const __propDef: {
     props: {
-        QComponentDocs: QComponentDocs | QComponentDocs[];
+        componentDocs: QComponentDocs | QComponentDocs[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/private/QDocsSection.svelte

@@ -1,9 +1,6 @@
-<script>
-  import { QCodeBlock, QDialog } from "../..";
-
-  export let title, snippets;
-
-  let dialog = false;
+<script>import { QCodeBlock, QDialog } from "../..";
+export let title, snippets = void 0;
+let dialog = false;
 </script>
 
 <div style="margin-bottom:48px">
@@ -13,7 +10,8 @@
       <QDialog
         class="snippet-dialog"
         bind:value={dialog}
-        btnAttrs={{ outline: true, round: true, icon: "code" }}
+        button
+        buttonProps={{ outline: true, round: true, icon: "code" }}
         on:buttonClick={() => (dialog = true)}
         modal
       >
@@ -23,9 +21,3 @@
   </div>
   <slot />
 </div>
-
-<style>
-  pre {
-    max-height: 400px;
-  }
-</style>

package/dist/components/private/QDocsSection.svelte.d.ts

@@ -1,23 +1,8 @@
-/** @typedef {typeof __propDef.props}  QDocsSectionProps */
-/** @typedef {typeof __propDef.events}  QDocsSectionEvents */
-/** @typedef {typeof __propDef.slots}  QDocsSectionSlots */
-export default class QDocsSection extends SvelteComponent<{
-    title: any;
-    snippets: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type QDocsSectionProps = typeof __propDef.props;
-export type QDocsSectionEvents = typeof __propDef.events;
-export type QDocsSectionSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        title: any;
-        snippets: any;
+        title: string;
+        snippets?: Record<string, string> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type QDocsSectionProps = typeof __propDef.props;
+export type QDocsSectionEvents = typeof __propDef.events;
+export type QDocsSectionSlots = typeof __propDef.slots;
+export default class QDocsSection extends SvelteComponent<QDocsSectionProps, QDocsSectionEvents, QDocsSectionSlots> {
+}
 export {};

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

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

package/dist/components/progress/docs.js

@@ -1,5 +1,5 @@
 import { QLinearProgressDocsProps } from "./docs.props";
-export let QProgressDocs = {
+export const QProgressDocs = {
     name: "QProgress",
     description: "The QProgress component is used to display a progress bar, indicating the completion status of a task or process.",
     docs: {

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

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

package/dist/components/radio/docs.js

@@ -1,4 +1,4 @@
-export let QRadioDocs = {
+export const QRadioDocs = {
     name: "QRadio",
     description: "Radio buttons allow the user to select one option from a set.",
     docs: {

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 69b1c5ef18592fae8026d06e26d19bfc
+// @quaffHash 023f166466a04ae52838fa2fcbf5b5f9
 export const QRadioDocsProps = [
     {
         name: "value",
@@ -19,7 +19,7 @@ export const QRadioDocsProps = [
     },
     {
         name: "selected",
-        type: "any",
+        type: "unknown",
         optional: true,
         clickableType: false,
         description: "",

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

@@ -3,7 +3,7 @@ import type { NativeProps } from "../../utils";
 export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     value: string;
     label?: string;
-    selected?: any;
+    selected?: unknown;
     disable?: boolean;
 }
 export declare const QRadioPropsDefaults: QRadioProps;

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

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

package/dist/components/railbar/docs.js

@@ -1,5 +1,5 @@
 import { QRailbarDocsProps } from "./docs.props";
-export let QRailbarDocs = {
+export const QRailbarDocs = {
     name: "QRailbar",
     description: "Railbars are used to provide navigation between different sections or views within an application.",
     docs: {

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

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

package/dist/components/select/docs.js

@@ -1,4 +1,4 @@
-export let QSelectDocs = {
+export const QSelectDocs = {
     name: "QSelect",
     description: "QSelect is a form component that allows users to choose from multiple options in a dropdown list. It supports single and multiple selection, as well as different visual styles such as filled, outlined, and rounded.",
     docs: {

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

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

package/dist/components/separator/docs.js

@@ -1,5 +1,5 @@
 import { QSeparatorPropsVertical } from "./docs.props";
-export let QSeparatorDocs = {
+export const QSeparatorDocs = {
     name: "QSeparator",
     description: "Separators can be used to create a dividing line or space between elements within a layout, offering visual separation and organization.",
     docs: {

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

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

package/dist/components/table/docs.js

@@ -1,5 +1,5 @@
 import { QTableDocsProps } from "./docs.props";
-export let QTableDocs = {
+export const QTableDocs = {
     name: "QTable",
     description: "Tables allow for a clear presentation of data sets.",
     docs: {

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,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 448513ccbdd5582cec72c379c9659fc0
+// @quaffHash f8981f83763a817f1b1dc144d170a1a4
 export const QTabsDocsProps = [
     {
         name: "value",

package/dist/components/tabs/props.js

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

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/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/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/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");