@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

package/dist/components/private/QDocs.svelte

@@ -1,94 +1,155 @@
-<script>import { QCard, QCardSection } from "../..";
-import { Quaff } from "../../stores/Quaff";
-import QApi from "./QApi.svelte";
-export let QComponentDocs;
-$:
-  isDark = $Quaff.dark.isActive;
-let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QComponentDocs;
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import { QCard, QCardSection, QTheme, Quaff } from "../..";
+  import { QColors, QDocsCtxName, type QComponentDocs } from "../../utils";
+  import QApi from "./QApi.svelte";
+
+  let {
+    children,
+    display,
+    pre,
+    usage,
+    snippets,
+    componentDocs,
+    docName,
+    docDescription,
+  }: {
+    children?: Snippet;
+    display?: Snippet;
+    pre?: Snippet;
+    usage?: Snippet;
+    snippets?: Record<string, string>;
+    componentDocs?: QComponentDocs | QComponentDocs[];
+    docName?: string;
+    docDescription?: string;
+  } = $props();
+
+  const isDark = $derived(Quaff.darkMode.isActive);
+
+  const hueRotate = $derived(
+    QColors.calculateHueRotate(
+      "#ec6b08",
+      QTheme.themeColors[`primary-${isDark ? "dark" : "light"}`],
+    ),
+  );
+
+  if (snippets) {
+    setContext(QDocsCtxName.snippets, () => snippets);
+  }
+
+  let principalDocument = Array.isArray(componentDocs)
+    ? componentDocs[0]
+    : componentDocs;
+
+  const brightness = $derived(Quaff.darkMode.isActive ? 0.7 : 1.2);
 </script>
 
-<div class="q-docs" style="margin: 1rem">
-  <div class="row q-gutter-lg q-mb-lg" style="min-height: 400px">
-    <QCard class="col-sm-12 col-lg-6 flex flex-center" fill="primary" style="min-height: 400px">
-      <h1 class="large no-margin" slot="title">{principalDocument.name}</h1>
+<div
+  class="q-docs"
+  style="padding: 1rem; --q-hue-rotate: {hueRotate}deg; --q-brightness: {brightness}; max-width: {Quaff
+    .breakpoints.lg}px; margin: auto;"
+>
+  <div class="row q-gutter-lg" style="min-height: 400px">
+    <QCard
+      class="col-sm-12 col-xs-12 col-lg-6"
+      fill="primary"
+      style="min-height: 400px; align-content: center;"
+    >
+      <h1
+        class={[
+          "no-margin justify-center",
+          Quaff.breakpoints.isMoreThan("sm", true) ? "large" : "small",
+        ]}
+      >
+        {docName || principalDocument?.name}
+      </h1>
+      <QCardSection class="q-docs__description flex flex-center">
+        <h3 class="q-docs__description-text">
+          {docDescription || principalDocument?.description}
+        </h3>
+      </QCardSection>
     </QCard>
     <QCard
-      class="q-docs__preview col-sm-12 col-lg-6 q-mt-none q-pa-none"
+      class="q-docs__preview col-sm-12 col-xs-12 col-lg-6 q-mt-none q-pa-none"
       fill="secondary"
       style="min-height: 400px"
     >
       <QCardSection class="q-pa-none">
         <div
-          class="flex flex-center"
-          style="position: absolute; height: 100%; width: 100%; z-index: 1;"
+          class="flex flex-center column"
+          style="position: absolute; height: 100%; width: 100%; z-index: 1; overflow: hidden;"
         >
-          <slot name="display" />
+          {@render display?.()}
         </div>
         <img
           class="q-docs__image"
-          src="/beer-splash-{isDark ? 'dark' : 'light'}.jpg"
-          alt="Close-up of the content of a glass of beer"
-          style={isDark ? "filter:brightness(0.3)" : ""}
+          src="/cocktail-close-up.jpg"
+          alt="Close-up of the content of a cocktail"
         />
       </QCardSection>
-      <QCardSection class="q-docs__description flex flex-center">
-        <h3 class="q-docs__description-text">
-          {principalDocument.description}
-        </h3>
-      </QCardSection>
     </QCard>
   </div>
 
-  <QApi QComponentDocs={Array.isArray(QComponentDocs) ? QComponentDocs : [QComponentDocs]} />
+  <div class="q-page">
+    {#if componentDocs}
+      <QApi
+        componentDocs={Array.isArray(componentDocs)
+          ? componentDocs
+          : [componentDocs]}
+      />
+    {/if}
 
-  {#if $$slots.usage}
-    <div class="s12 q-pa-md">
-      <div class="heading-usage">
-        <h4 class="q-my-xl">Usage</h4>
-      </div>
+    {@render pre?.()}
 
-      <slot name="usage" />
-    </div>
-  {/if}
+    {#if usage}
+      <div class="q-pa-md">
+        <div class="heading-usage">
+          <h4 class="q-my-xl">Usage</h4>
+        </div>
 
-  <slot />
-</div>
+        {@render usage()}
+      </div>
+    {/if}
 
-<style>.q-docs :global(.q-pa-none) {
-  padding: 0 !important;
-}
-.q-docs__image {
-  width: 100%;
-  height: 12rem;
-  object-fit: cover;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.q-docs :global(.q-docs__preview) {
-  display: flex !important;
-  flex-direction: column;
-}
-.q-docs :global(.q-docs__description) {
-  display: flex;
-  flex-grow: 1;
-  justify-content: center;
-  align-items: center;
-}
-.q-docs :global(.q-docs__description-text) {
-  font-size: 1.75rem;
-}
+    {@render children?.()}
+  </div>
+</div>
 
-.prop-type {
-  opacity: 0.75;
-}
-.prop-type.clickable {
-  cursor: pointer;
-}
-.prop-type.clickable:hover {
-  opacity: 1;
-}
+<style>
+  .q-docs :global(.q-pa-none) {
+    padding: 0 !important;
+  }
+  .q-docs :global(code:not(pre > code)) {
+    background-color: var(--surface-container);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+  }
+  .q-docs__image {
+    width: 100%;
+    height: 25rem;
+    object-fit: cover;
+    filter: hue-rotate(var(--q-hue-rotate)) brightness(var(--q-brightness));
+  }
+  .q-docs :global(.q-docs__preview) {
+    display: flex !important;
+    flex-direction: column;
+  }
+  .q-docs :global(.q-docs__description) {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+  }
+  .q-docs :global(.q-docs__description-text) {
+    font-size: 1.75rem;
+    text-align: center;
+  }
+  .q-docs .q-page {
+    padding-top: 0.5rem;
+  }
 
-.heading-usage {
-  display: flex;
-  align-items: center;
-}</style>
+  .heading-usage {
+    display: flex;
+    align-items: center;
+  }
+</style>

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

@@ -1,21 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QComponentDocs } from "../../utils/types";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        QComponentDocs: QComponentDocs | QComponentDocs[];
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        display: {};
-        usage: {};
-        default: {};
-    };
+    slots: {};
 };
 export type QDocsProps = typeof __propDef.props;
 export type QDocsEvents = typeof __propDef.events;
 export type QDocsSlots = typeof __propDef.slots;
-export default class QDocs extends SvelteComponent<QDocsProps, QDocsEvents, QDocsSlots> {
+export default class QDocs extends SvelteComponentTyped<QDocsProps, QDocsEvents, QDocsSlots> {
 }
 export {};

package/dist/components/private/QDocsSection.svelte

@@ -1,32 +1,62 @@
-<script>
-  import { QDialog } from "../..";
-  import QCodeBlock from "../codeBlock/QCodeBlock.svelte";
+<script lang="ts">
+  import { getContext, type Snippet } from "svelte";
+  import { QBtn, QCodeBlock, QDialog } from "../..";
+  import { QDocsCtxName } from "../../utils";
 
-  export let title, snippets;
+  type QDocsSectionProps = {
+    title: string;
+    sectionDescription?: Snippet;
+    children?: Snippet;
+    noCode?: boolean;
+  };
 
-  let dialog = false;
+  let {
+    title,
+    noCode = false,
+    sectionDescription,
+    children,
+  }: QDocsSectionProps = $props();
+
+  const snippets = getContext<undefined | (() => Record<string, string>)>(
+    QDocsCtxName.snippets,
+  );
+
+  const code = $derived(snippets && snippets()[title]);
+
+  let dialog = $state(false);
+
+  // Create a kebab-case id from the title to be able to link to this section
+  const id = $derived(title.toLowerCase().replaceAll(" ", "-"));
 </script>
 
-<div style="margin-bottom:48px">
-  <div class="flex justify-between q-mb-md">
+<div {id} style="margin-bottom:48px">
+  <div class="flex justify-between q-mb-sm">
     <h5>{title}</h5>
-    {#if snippets}
+    {#if code && !noCode}
+      <QBtn
+        icon="code"
+        variant="outlined"
+        round
+        onclick={() => (dialog = true)}
+      />
       <QDialog
         class="snippet-dialog"
         bind:value={dialog}
-        btnAttrs={{ outline: true, round: true, icon: "code" }}
-        on:btnClick={() => (dialog = true)}
         modal
+        style="max-width: 75vw"
       >
-        <QCodeBlock code={snippets[title]} language="svelte" {title} copiable />
+        <QCodeBlock {code} language="svelte" {title} copiable />
       </QDialog>
     {/if}
   </div>
-  <slot />
-</div>
 
-<style>
-  pre {
-    max-height: 400px;
-  }
-</style>
+  {#if sectionDescription}
+    <div class="q-mb-md" style="text-wrap: balance">
+      {@render sectionDescription()}
+    </div>
+  {/if}
+
+  <div class="q-ma-sm">
+    {@render children?.()}
+  </div>
+</div>

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

@@ -1,29 +1,14 @@
-/** @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";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        title: any;
-        snippets: any;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export {};
+type QDocsSectionProps_ = typeof __propDef.props;
+export { QDocsSectionProps_ as QDocsSectionProps };
+export type QDocsSectionEvents = typeof __propDef.events;
+export type QDocsSectionSlots = typeof __propDef.slots;
+export default class QDocsSection extends SvelteComponentTyped<QDocsSectionProps_, QDocsSectionEvents, QDocsSectionSlots> {
+}

package/dist/components/private/QIconSnippet.svelte

@@ -0,0 +1,22 @@
+<!-- This component should be used when an icon can be set from props. The icon can either be undefined, a string or a Snippet so this componnet handles it all. -->
+<script lang="ts">
+  import QIcon from "../icon/QIcon.svelte";
+  import type { QIconProps } from "../icon/props";
+  import type { MaterialSymbol } from "material-symbols";
+  import type { Snippet } from "svelte";
+
+  interface IconSnippetProps extends Omit<QIconProps, "name"> {
+    icon?: MaterialSymbol | Snippet;
+    defaultIcon?: MaterialSymbol | Snippet;
+  }
+
+  let { icon, defaultIcon, ...props }: IconSnippetProps = $props();
+
+  const iconToUse = $derived(icon ?? defaultIcon);
+</script>
+
+{#if typeof iconToUse === "string"}
+  <QIcon name={iconToUse} {...props} />
+{:else}
+  {@render iconToUse?.()}
+{/if}

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QIconSnippetProps = typeof __propDef.props;
+export type QIconSnippetEvents = typeof __propDef.events;
+export type QIconSnippetSlots = typeof __propDef.slots;
+export default class QIconSnippet extends SvelteComponentTyped<QIconSnippetProps, QIconSnippetEvents, QIconSnippetSlots> {
+}
+export {};

package/dist/components/private/index.d.ts

@@ -0,0 +1,6 @@
+import ContextReseter from "./ContextReseter.svelte";
+import QApi from "./QApi.svelte";
+import QDocs from "./QDocs.svelte";
+import QDocsSection from "./QDocsSection.svelte";
+import QIconSnippet from "./QIconSnippet.svelte";
+export { ContextReseter, QApi, QDocs, QDocsSection, QIconSnippet };

package/dist/components/private/index.js

@@ -0,0 +1,6 @@
+import ContextReseter from "./ContextReseter.svelte";
+import QApi from "./QApi.svelte";
+import QDocs from "./QDocs.svelte";
+import QDocsSection from "./QDocsSection.svelte";
+import QIconSnippet from "./QIconSnippet.svelte";
+export { ContextReseter, QApi, QDocs, QDocsSection, QIconSnippet };

package/dist/components/progress/QCircularProgress.scss

@@ -0,0 +1,63 @@
+@use "$css/mixins";
+
+.q-circular-progress {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+
+  height: 1em;
+  width: 1em;
+  font-size: var(--size);
+  line-height: 0;
+
+  &__svg {
+    height: 100%;
+    width: 100%;
+  }
+
+  &--indeterminate {
+    & .q-circular-progress__svg {
+      transform-origin: 50% 50%;
+      animation: q-spin 2s linear infinite;
+
+      & .q-circular-progress__indicator {
+        stroke-dasharray: 1400;
+        stroke-dashoffset: 0;
+        animation: q-load 1.5s ease-in-out infinite;
+      }
+    }
+  }
+}
+
+@keyframes q-spin {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  25% {
+    transform: rotate3d(0, 0, 1, 90deg);
+  }
+  50% {
+    transform: rotate3d(0, 0, 1, 180deg);
+  }
+  75% {
+    transform: rotate3d(0, 0, 1, 270deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 359deg);
+  }
+}
+
+@keyframes q-load {
+  0% {
+    stroke-dasharray: 1, 400;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 400, 400;
+    stroke-dashoffset: -300;
+  }
+}

package/dist/components/progress/QCircularProgress.svelte

@@ -1,27 +1,140 @@
-<script>import { useSize } from "../../composables/use-size";
-import { createClasses } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-export let value = 0, indeterminate = false, size = "2em", color = void 0, thickness = 5, userClasses = void 0;
-export { userClasses as class };
-$:
-  spinnerSize = useSize(size);
-$:
-  classes = createClasses([indeterminate && "indeterminate"], {
-    component: "q-circular-progress",
-    quaffClasses: [color && `${color}-text`],
-    userClasses
+<script lang="ts">
+  import { useSize } from "../../composables";
+  import { between } from "../../utils";
+  import type { QCircularProgressProps } from "./props";
+
+  type CircleParams = {
+    cls: "track" | "indicator";
+    offset: number;
+    color: string;
+    rounded?: boolean;
+  };
+
+  const radius = 50,
+    diameter = 2 * radius,
+    circumference = diameter * Math.PI,
+    strokeDashArray = Math.round(circumference * 1000) / 1000;
+
+  let {
+    value = $bindable(0),
+    indeterminate = false,
+    size = "2em",
+    fontSize = "0.25em",
+    color = "primary",
+    trackColor = "secondary-container",
+    thickness = 0.2,
+    min = 0,
+    max = 100,
+    angle = 0,
+    noRound = false,
+    instantFeedback = false,
+    animationSpeed = 600,
+    showValue = false,
+    children = fallback,
+    ...props
+  }: QCircularProgressProps = $props();
+
+  const qSize = $derived(useSize(size, "q-circular-progress"));
+
+  const parsedColor = $derived(
+    color.includes("#") ? color : `var(--${color}, ${color})`,
+  );
+  const parsedTrackColor = $derived(
+    trackColor.includes("#")
+      ? trackColor
+      : `var(--${trackColor}, ${trackColor})`,
+  );
+
+  const svgStyle = $derived(`rotate3d(0, 0, 1, ${angle - 90}deg)`);
+  const circleStyle = $derived(
+    instantFeedback || indeterminate
+      ? undefined
+      : `stroke-dashoffset ${animationSpeed}ms ease 0s, stroke ${animationSpeed}ms ease`,
+  );
+
+  const viewBox = $derived(diameter / (1 - thickness / 2));
+  const viewBoxAttr = $derived(
+    `${viewBox / 2} ${viewBox / 2} ${viewBox} ${viewBox}`,
+  );
+
+  const normalized = $derived(between(value, min, max));
+  const range = $derived(max - min);
+
+  const strokeWidth = $derived((thickness / 2) * viewBox);
+  const strokeDashOffset = $derived.by(() => {
+    const dashRatio = (max - normalized) / range;
+    const dashGap =
+      !noRound && normalized < max && dashRatio < 0.25
+        ? (strokeWidth / 2) * (1 - dashRatio / 0.25)
+        : 0;
+
+    return circumference * dashRatio + dashGap;
   });
 </script>
 
-<svg class={classes} height={spinnerSize.style} width={spinnerSize.style} viewBox="25 25 50 50">
+<div
+  {...props}
+  class={[
+    "q-circular-progress",
+    props.class,
+    indeterminate && "q-circular-progress--indeterminate",
+  ]}
+  style:--size={qSize.style}
+  role="progressbar"
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuenow={indeterminate ? undefined : normalized}
+  data-quaff
+>
+  <svg
+    class="q-circular-progress__svg"
+    style:transform={svgStyle}
+    viewBox={viewBoxAttr}
+    aria-hidden="true"
+  >
+    {#if trackColor && trackColor !== "transparent"}
+      {@render circle({
+        cls: "track",
+        offset: 0,
+        color: parsedTrackColor,
+      })}
+    {/if}
+
+    {@render circle({
+      cls: "indicator",
+      offset: strokeDashOffset,
+      color: parsedColor,
+      rounded: !noRound,
+    })}
+  </svg>
+
+  {#if showValue}
+    <div
+      class="q-circular-progress__text absolute-full flex flex-center"
+      style:font-size={fontSize}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+{#snippet fallback()}
+  <div>{Math.round(normalized)}</div>
+{/snippet}
+
+{#snippet circle({ offset, color, cls, rounded }: CircleParams)}
   <circle
-    class="path"
-    cx="50"
-    cy="50"
-    r="20"
-    fill="none"
+    class="q-circular-progress__{cls}"
+    style:transition={circleStyle}
+    style:color
+    fill="transparent"
     stroke="currentColor"
-    stroke-width={thickness}
-    stroke-miterlimit="10"
+    stroke-width={strokeWidth}
+    stroke-dasharray={strokeDashArray}
+    stroke-dashoffset={offset}
+    stroke-linecap={rounded ? "round" : undefined}
+    cx={viewBox}
+    cy={viewBox}
+    r={radius}
   />
-</svg>
+{/snippet}

package/dist/components/progress/QCircularProgress.svelte.d.ts

@@ -1,14 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { QCircularProgressProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        value?: number | undefined;
-        indeterminate?: boolean | undefined;
-        size?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
-        color?: QCircularProgressProps["color"];
-        thickness?: number | undefined;
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -18,5 +10,5 @@ type QCircularProgressProps_ = typeof __propDef.props;
 export { QCircularProgressProps_ as QCircularProgressProps };
 export type QCircularProgressEvents = typeof __propDef.events;
 export type QCircularProgressSlots = typeof __propDef.slots;
-export default class QCircularProgress extends SvelteComponent<QCircularProgressProps, QCircularProgressEvents, QCircularProgressSlots> {
+export default class QCircularProgress extends SvelteComponentTyped<QCircularProgressProps_, QCircularProgressEvents, QCircularProgressSlots> {
 }