@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha10

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/QAvatar.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QAvatarProps } from "./props";
 declare const __propDef: {
     props: {
@@ -19,9 +19,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QAvatarProps = typeof __propDef.props;
+type QAvatarProps_ = typeof __propDef.props;
+export { QAvatarProps_ as QAvatarProps };
 export type QAvatarEvents = typeof __propDef.events;
 export type QAvatarSlots = typeof __propDef.slots;
-export default class QAvatar extends SvelteComponentTyped<QAvatarProps, QAvatarEvents, QAvatarSlots> {
+export default class QAvatar extends SvelteComponent<QAvatarProps, QAvatarEvents, QAvatarSlots> {
 }
-export {};

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

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

package/dist/components/avatar/index.scss

@@ -3,7 +3,10 @@
   object-fit: cover;
   object-position: center;
   aspect-ratio: 1;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  transition:
+    var(--speed3) transform,
+    var(--speed3) border-radius,
+    var(--speed3) padding;
   border-radius: 0;
 
   display: flex;

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/avatar/props.js

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

package/dist/components/breadcrumbs/QBreadcrumbs.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QBreadcrumbsProps } from "./props";
 declare const __propDef: {
     props: {
@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QBreadcrumbsProps = typeof __propDef.props;
+type QBreadcrumbsProps_ = typeof __propDef.props;
+export { QBreadcrumbsProps_ as QBreadcrumbsProps };
 export type QBreadcrumbsEvents = typeof __propDef.events;
 export type QBreadcrumbsSlots = typeof __propDef.slots;
-export default class QBreadcrumbs extends SvelteComponentTyped<QBreadcrumbsProps, QBreadcrumbsEvents, QBreadcrumbsSlots> {
+export default class QBreadcrumbs extends SvelteComponent<QBreadcrumbsProps, QBreadcrumbsEvents, QBreadcrumbsSlots> {
 }
-export {};

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QBreadcrumbsElProps } from "./props";
 declare const __propDef: {
     props: {
@@ -18,9 +18,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QBreadcrumbsElProps = typeof __propDef.props;
+type QBreadcrumbsElProps_ = typeof __propDef.props;
+export { QBreadcrumbsElProps_ as QBreadcrumbsElProps };
 export type QBreadcrumbsElEvents = typeof __propDef.events;
 export type QBreadcrumbsElSlots = typeof __propDef.slots;
-export default class QBreadcrumbsEl extends SvelteComponentTyped<QBreadcrumbsElProps, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
+export default class QBreadcrumbsEl extends SvelteComponent<QBreadcrumbsElProps, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
 }
-export {};

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

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

package/dist/components/button/QBtn.svelte

@@ -1,14 +1,18 @@
 <script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
+import { createEventDispatcher, onMount } from "svelte";
 import QIcon from "../icon/QIcon.svelte";
 import QCircularProgress from "../progress/QCircularProgress.svelte";
-import { activationHandler } from "../../helpers/activationHandler";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
+import { useSize } from "../../composables/use-size";
+import { isActivationKey } from "../../utils/events";
+import { ripple } from "../../helpers/ripple";
+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 qBtn;
 let tag;
 $:
-  tag = to !== void 0 ? "a" : "div";
+  tag = to !== void 0 ? "a" : "button";
+$:
+  sizeObj = useSize(size);
 $:
   classes = createClasses(
     [
@@ -16,24 +20,34 @@ $:
       rectangle && "rectangle",
       outline && "outlined",
       flat && "flat",
-      !$$slots.default && !label && "circle",
-      size && size !== "md" && size
+      (!$$slots.default && !label || round) && "round",
+      size !== "md" && sizeObj.class
     ],
     {
       component: "q-btn",
       userClasses
     }
   );
+function onKeyDown(e) {
+  if (!isActivationKey(e))
+    return;
+  e.preventDefault();
+  let click = new MouseEvent("click");
+  qBtn.dispatchEvent(click);
+}
 </script>
 
 <svelte:element
   this={tag}
-  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
-  role="button"
+  bind:this={qBtn}
+  use:ripple
+  role={tag === "a" ? "button" : undefined}
   href={to}
   class={classes}
   aria-disabled={disable || undefined}
   tabindex={disable ? -1 : 0}
+  on:click
+  on:keydown={onKeyDown}
   {...$$restProps}
 >
   {#if icon && !loading}

package/dist/components/button/QBtn.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QBtnProps } from "./props";
 declare const __propDef: {
     props: {
@@ -9,6 +9,7 @@ declare const __propDef: {
         loading?: QBtnProps["loading"];
         unelevated?: QBtnProps["unelevated"];
         outline?: QBtnProps["outline"];
+        round?: QBtnProps["round"];
         rectangle?: QBtnProps["rectangle"];
         flat?: QBtnProps["flat"];
         to?: QBtnProps["to"];
@@ -16,7 +17,7 @@ declare const __propDef: {
         class?: string | undefined;
     };
     events: {
-        activated: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,9 +25,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QBtnProps = typeof __propDef.props;
+type QBtnProps_ = typeof __propDef.props;
+export { QBtnProps_ as QBtnProps };
 export type QBtnEvents = typeof __propDef.events;
 export type QBtnSlots = typeof __propDef.slots;
-export default class QBtn extends SvelteComponentTyped<QBtnProps, QBtnEvents, QBtnSlots> {
+export default class QBtn extends SvelteComponent<QBtnProps, QBtnEvents, QBtnSlots> {
 }
-export {};

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

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

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

@@ -55,6 +55,14 @@ export const QBtnDocsProps = [
         description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
+    {
+        name: "round",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use round design for the button, giving it a circular shape.",
+        default: "false",
+    },
     {
         name: "to",
         type: "string",

package/dist/components/button/index.scss

@@ -18,12 +18,14 @@
   background-color: var(--primary);
   margin: 0 0.5rem;
   border-radius: 1.25rem;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  transition:
+    var(--speed3) transform,
+    var(--speed3) border-radius,
+    var(--speed3) padding;
   user-select: none;
   gap: 1rem;
   line-height: normal;
   @extend .elevate-sm-bottom;
-  @extend .ripple;
 
   $sizeMap: (
     "sm": -1,
@@ -63,7 +65,7 @@
     border-radius: 0.5rem;
   }
 
-  &.q-btn--circle {
+  &.q-btn--round {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
@@ -74,5 +76,23 @@
     margin: 0 -0.5rem;
   }
 
+  &:is(:hover, :focus):not([aria-disabled])::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--on-primary);
+  }
+
+  &:hover:not([aria-disabled])::after {
+    opacity: 0.08;
+  }
+
+  &:focus:not([aria-disabled])::after {
+    opacity: 0.16;
+  }
+
   @include btn-image;
 }

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.
@@ -36,6 +36,11 @@ export interface QBtnProps extends NativeProps {
      * @default false
      */
     rectangle?: boolean;
+    /**
+     * Use round design for the button, giving it a circular shape.
+     * @default false
+     */
+    round?: boolean;
     /**
      * Makes the button navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").
      *  @default undefined

package/dist/components/card/QCard.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "$utils/props";
+<script>import { createClasses } from "../../utils/props";
 export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = void 0;
 export { userClasses as class };
 const colorOptions = ["primary", "secondary", "tertiary"];

package/dist/components/card/QCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QCardProps } from "./props";
 declare const __propDef: {
     props: {
@@ -18,9 +18,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QCardProps = typeof __propDef.props;
+type QCardProps_ = typeof __propDef.props;
+export { QCardProps_ as QCardProps };
 export type QCardEvents = typeof __propDef.events;
 export type QCardSlots = typeof __propDef.slots;
-export default class QCard extends SvelteComponentTyped<QCardProps, QCardEvents, QCardSlots> {
+export default class QCard extends SvelteComponent<QCardProps, QCardEvents, QCardSlots> {
 }
-export {};

package/dist/components/card/QCardActions.svelte

@@ -1,5 +1,5 @@
 <script>import useAlign from "../../composables/use-align";
-import { createClasses } from "$utils/props";
+import { createClasses } from "../../utils/props";
 export let align = void 0, vertical = false, userClasses = void 0;
 export { userClasses as class };
 $:

package/dist/components/card/QCardActions.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QCardActionsProps } from "./props";
 declare const __propDef: {
     props: {
@@ -14,9 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QCardActionsProps = typeof __propDef.props;
+type QCardActionsProps_ = typeof __propDef.props;
+export { QCardActionsProps_ as QCardActionsProps };
 export type QCardActionsEvents = typeof __propDef.events;
 export type QCardActionsSlots = typeof __propDef.slots;
-export default class QCardActions extends SvelteComponentTyped<QCardActionsProps, QCardActionsEvents, QCardActionsSlots> {
+export default class QCardActions extends SvelteComponent<QCardActionsProps, QCardActionsEvents, QCardActionsSlots> {
 }
-export {};

package/dist/components/card/QCardSection.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "$utils/props";
+<script>import { createClasses } from "../../utils/props";
 export let horizontal = false, userClasses = void 0;
 export { userClasses as class };
 $:

package/dist/components/card/QCardSection.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QCardSectionProps } from "./props";
 declare const __propDef: {
     props: {
@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QCardSectionProps = typeof __propDef.props;
+type QCardSectionProps_ = typeof __propDef.props;
+export { QCardSectionProps_ as QCardSectionProps };
 export type QCardSectionEvents = typeof __propDef.events;
 export type QCardSectionSlots = typeof __propDef.slots;
-export default class QCardSection extends SvelteComponentTyped<QCardSectionProps, QCardSectionEvents, QCardSectionSlots> {
+export default class QCardSection extends SvelteComponent<QCardSectionProps, QCardSectionEvents, QCardSectionSlots> {
 }
-export {};

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

@@ -9,7 +9,7 @@ export const QCardDocsProps = [
     },
     {
         name: "fill",
-        type: "string | boolean",
+        type: "boolean | QCardFillColors",
         optional: true,
         clickableType: false,
         description: "Defines the fill color of the card.",

package/dist/components/card/index.scss

@@ -2,7 +2,10 @@
 .q-card {
   display: block;
   border-radius: 0.75rem;
-  transition: var(--speed-3) transform, var(--speed-3) padding, var(--speed-3) border-radius;
+  transition:
+    var(--speed-3) transform,
+    var(--speed-3) padding,
+    var(--speed-3) border-radius;
   @include padding("a", "md");
   @extend .elevate-sm-bottom;
 

package/dist/components/checkbox/QCheckbox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QCheckboxProps } from "./props";
 declare const __propDef: {
     props: {
@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QCheckboxProps = typeof __propDef.props;
+type QCheckboxProps_ = typeof __propDef.props;
+export { QCheckboxProps_ as QCheckboxProps };
 export type QCheckboxEvents = typeof __propDef.events;
 export type QCheckboxSlots = typeof __propDef.slots;
-export default class QCheckbox extends SvelteComponentTyped<QCheckboxProps, QCheckboxEvents, QCheckboxSlots> {
+export default class QCheckbox extends SvelteComponent<QCheckboxProps, QCheckboxEvents, QCheckboxSlots> {
 }
-export {};

package/dist/components/checkbox/index.scss

@@ -1,3 +1,7 @@
 .q-checkbox {
   @include selection(checkbox);
+
+  > span::before {
+    content: "check_box_outline_blank";
+  }
 }

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/QChip.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QChipProps } from "./props";
 declare const __propDef: {
     props: {
@@ -27,9 +27,9 @@ declare const __propDef: {
         trailing: {};
     };
 };
-export type QChipProps = typeof __propDef.props;
+type QChipProps_ = typeof __propDef.props;
+export { QChipProps_ as QChipProps };
 export type QChipEvents = typeof __propDef.events;
 export type QChipSlots = typeof __propDef.slots;
-export default class QChip extends SvelteComponentTyped<QChipProps, QChipEvents, QChipSlots> {
+export default class QChip extends SvelteComponent<QChipProps, QChipEvents, QChipSlots> {
 }
-export {};

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

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

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

@@ -65,15 +65,15 @@ export const QChipDocsProps = [
     },
     {
         name: "size",
-        type: '"small" | "medium" | "large"',
+        type: "QChipSizeOptions",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "Size of the chip.",
         default: "small",
     },
     {
         name: "tabindex",
-        type: "string | number",
+        type: "number",
         optional: true,
         clickableType: false,
         description: "Tabindex of the chip.",

package/dist/components/chip/index.scss

@@ -12,7 +12,10 @@
   color: var(--on-secondary);
   text-transform: none;
   border-radius: 0.5em;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  transition:
+    var(--speed3) transform,
+    var(--speed3) border-radius,
+    var(--speed3) padding;
   line-height: normal;
   text-decoration: none;
   cursor: pointer;

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/codeBlock/QCodeBlock.svelte

@@ -1,13 +1,10 @@
-<script>import Prism from "prismjs";
-import "prismjs/themes/prism-twilight.css";
-import "prismjs/components/prism-typescript";
-import "prism-svelte";
+<script>import Highlight from "svelte-highlight";
+import typescript from "svelte-highlight/languages/typescript";
+import "svelte-highlight/styles/material.css";
 import { QBtn } from "../..";
 export let language, code = "/* No code found */", title = void 0, copiable = void 0;
 let btnContent = "Copy";
 let btnColor = "primary";
-$:
-  highlighted = Prism.highlight(code, Prism.languages[language], language);
 async function copyCode() {
   try {
     if (navigator.clipboard.write) {
@@ -36,8 +33,10 @@ async function copyCode() {
 
 <div class="q-code-block">
   {#if copiable}
-    <div class="flex between-align middle-align q-pb-sm">
-      <h4 class="q-ma-none q-pr-lg">{title}</h4>
+    <div class="flex justify-between {title ? 'items-center' : 'justify-end'} q-pb-sm">
+      {#if title}
+        <h4 class="q-ma-none q-pr-lg">{title}</h4>
+      {/if}
       <QBtn
         class="{btnColor}-border {btnColor}-text"
         size="sm"
@@ -51,7 +50,7 @@ async function copyCode() {
   {:else if title}
     <h4>{title}</h4>
   {/if}
-  <pre class="language-svelte"><code>{@html highlighted}</code></pre>
+  <Highlight language={typescript} {code} />
 </div>
 
 <style>

package/dist/components/codeBlock/QCodeBlock.svelte.d.ts

@@ -1,7 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-import "prismjs/themes/prism-twilight.css";
-import "prismjs/components/prism-typescript";
-import "prism-svelte";
+import { SvelteComponent } from "svelte";
+import "svelte-highlight/styles/material.css";
 import type { QCodeBlockProps } from "./props";
 declare const __propDef: {
     props: {
@@ -15,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QCodeBlockProps = typeof __propDef.props;
+type QCodeBlockProps_ = typeof __propDef.props;
+export { QCodeBlockProps_ as QCodeBlockProps };
 export type QCodeBlockEvents = typeof __propDef.events;
 export type QCodeBlockSlots = typeof __propDef.slots;
-export default class QCodeBlock extends SvelteComponentTyped<QCodeBlockProps, QCodeBlockEvents, QCodeBlockSlots> {
+export default class QCodeBlock extends SvelteComponent<QCodeBlockProps, QCodeBlockEvents, QCodeBlockSlots> {
 }
-export {};