@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/components/progress/QCircularProgress.svelte

@@ -1,36 +1,112 @@
-<script>import { useSize } from "../../composables";
-export let value = 0, indeterminate = false, size = "2rem", color = void 0, thickness = 5, userClasses = void 0;
-export { userClasses as class };
-$:
-  spinnerSize = useSize(size);
-const circumference = 2 * Math.PI * 20;
-$:
-  progressOffset = (100 - value) / 100 * circumference;
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { useSize } from "../../composables/useSize";
+  import { between } from "../../utils/number";
+  const radius = 50,
+    diameter = 2 * radius,
+    circumference = diameter * Math.PI,
+    strokeDashArray = Math.round(circumference * 1e3) / 1e3;
+  let {
+    value = 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
+  } = $props();
+  const qSize = $derived(useSize(size, "q-circular-progress"));
+  const svgStyle = $derived(`rotate3d(0, 0, 1, ${angle - 90}deg)`);
+  const circleStyle = $derived(
+    instantFeedback || indeterminate
+      ? void 0
+      : `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="q-circular-progress {color ? `text-${color}` : ''} {userClasses}"
+<div
+  {...props}
+  class="q-circular-progress{props.class ? ` ${props.class}` : ''}"
   class:q-circular-progress--indeterminate={indeterminate}
-  height={spinnerSize.style}
-  width={spinnerSize.style}
-  viewBox="25 25 50 50"
-  style="transform: rotate3d(0, 0, 1, -90deg);"
+  style:--size={qSize.style}
   role="progressbar"
-  aria-valuenow={value}
-  aria-valuemin={0}
-  aria-valuemax={100}
-  {...$$restProps}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuenow={indeterminate ? undefined : normalized}
 >
+  <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: trackColor,
+      })}
+    {/if}
+
+    {@render circle({
+      cls: "indicator",
+      offset: strokeDashOffset,
+      color,
+      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="q-circular-progress__path"
-    cx="50"
-    cy="50"
-    r="20"
-    fill="none"
+    class="q-circular-progress__{cls}{color ? ` text-${color}` : ''}"
+    style:transition={circleStyle}
+    fill="transparent"
     stroke="currentColor"
-    stroke-width={thickness}
-    stroke-miterlimit="10"
-    stroke-dasharray={circumference}
-    stroke-dashoffset={progressOffset}
+    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,23 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QCircularProgressProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: number | undefined;
-        indeterminate?: QCircularProgressProps["indeterminate"];
-        size?: QCircularProgressProps["size"];
-        color?: QCircularProgressProps["color"];
-        thickness?: QCircularProgressProps["thickness"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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> {
-}
+declare const QCircularProgress: import("svelte").Component<QCircularProgressProps, {}, "">;
+export default QCircularProgress;

package/dist/components/progress/QLinearProgress.scss

@@ -0,0 +1,75 @@
+@use "$css/mixins";
+
+.q-linear-progress {
+  position: relative;
+
+  flex-grow: 1;
+  height: 0.75em;
+
+  overflow: hidden;
+
+  transform: scale3d(1, 1, 1);
+
+  &__indicator {
+    background-color: var(--q-indicator-color);
+    height: 100%;
+
+    &--indeterminate {
+      transition: none;
+      background-color: transparent;
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background-color: var(--q-indicator-color);
+        transform-origin: 0 0;
+        border-radius: inherit;
+      }
+
+      &::before {
+        animation: q-progress 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      }
+
+      &::after {
+        transform: translate3d(-101%, 0, 0) scale3d(1, 1, 1);
+        animation: q-progress-fast 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation-delay: 1.15s;
+      }
+    }
+  }
+
+  &__track {
+    opacity: 0.4;
+    height: 100%;
+  }
+}
+
+@keyframes q-progress {
+  0% {
+    transform: translate3d(-35%, 0, 0) scale3d(0.35, 1, 1);
+  }
+  60% {
+    transform: translate3d(100%, 0, 0) scale3d(0.9, 1, 1);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0) scale3d(0.9, 1, 1);
+  }
+}
+
+@keyframes q-progress-fast {
+  0% {
+    transform: translate3d(-101%, 0, 0) scale3d(1, 1, 1);
+  }
+  60% {
+    transform: translate3d(107%, 0, 0) scale3d(0.01, 1, 1);
+  }
+  100% {
+    transform: translate3d(107%, 0, 0) scale3d(0.01, 1, 1);
+  }
+}

package/dist/components/progress/QLinearProgress.svelte

@@ -1,20 +1,62 @@
-<script>export let value = 0, from = "left", rounded = false, userClasses = "";
-export { userClasses as class };
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { useSize } from "../../composables/useSize";
+  function width(val, reverse2) {
+    return reverse2
+      ? `translateX(100%) scale3d(-${val}, 1, 1)`
+      : `scale3d(${val}, 1, 1)`;
+  }
+  let {
+    value = 0,
+    buffer,
+    reverse = false,
+    noRound = false,
+    size = "0.375em",
+    color = "primary",
+    animationSpeed = 600,
+    instantFeedback = false,
+    trackColor = "secondary-container",
+    indeterminate = false,
+    ...props
+  } = $props();
+  const normalized = $derived(value > 1 ? value / 100 : value);
+  const qSize = $derived(useSize(size, "q-linear-progress"));
+  const radius = $derived(noRound ? "0" : "0.75rem");
+  const origin = $derived(reverse ? "0 100%" : "0 0");
+  const transition = $derived(
+    instantFeedback || indeterminate ? void 0 : `transform ${animationSpeed}ms`,
+  );
+  const trackTransform = $derived(width(buffer ?? 1, reverse));
+  const indicatorTransform = $derived(
+    width(+indeterminate || normalized, reverse),
+  );
 </script>
 
 <div
-  class="q-linear-progress {userClasses}"
-  class:q-linear-progress--rounded={rounded}
-  class:q-linear-progress--right={from === "right"}
+  {...props}
+  class="q-linear-progress{props.class ? ` ${props.class}` : ''}"
+  style:font-size={qSize.style}
+  style:border-radius={radius}
   role="progressbar"
-  aria-valuenow={value}
-  aria-valuemin={0}
-  aria-valuemax={100}
-  {...$$restProps}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow={indeterminate ? undefined : normalized}
 >
   <div
-    class="q-linear-progress__progress"
-    class:q-linear-progress__progress--right={from === "right"}
-    style="--progress:{value}%"
-  />
+    class="q-linear-progress__track absolute-full"
+    style:transition
+    style:transform-origin={origin}
+    style:background-color="var(--{trackColor}, {trackColor})"
+    style:transform={trackTransform}
+  ></div>
+
+  <div
+    class="q-linear-progress__indicator"
+    class:q-linear-progress__indicator--indeterminate={indeterminate}
+    style:--q-indicator-color="var(--{color}, {color})"
+    style:transition
+    style:transform={indicatorTransform}
+    style:transform-origin={origin}
+  ></div>
 </div>

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

@@ -1,21 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QLinearProgressProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: number | undefined;
-        from?: QLinearProgressProps["from"];
-        rounded?: QLinearProgressProps["rounded"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QLinearProgressProps_ = typeof __propDef.props;
-export { QLinearProgressProps_ as QLinearProgressProps };
-export type QLinearProgressEvents = typeof __propDef.events;
-export type QLinearProgressSlots = typeof __propDef.slots;
-export default class QLinearProgress extends SvelteComponent<QLinearProgressProps, QLinearProgressEvents, QLinearProgressSlots> {
-}
+declare const QLinearProgress: import("svelte").Component<QLinearProgressProps, {}, "">;
+export default QLinearProgress;

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

@@ -1,24 +1,80 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 2d797d26b761264825c885770bbaeaf7
+// @quaffHash 2274dbcac2f2a3c92c1fbfd4f31fc69a
 export const QLinearProgressDocsProps = [
     {
         name: "value",
         type: "number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "0",
     },
     {
-        name: "from",
-        type: '"left" | "right"',
+        name: "buffer",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "undefined",
+    },
+    {
+        name: "size",
+        type: "Q.CssValue | number",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: '"0.375em"',
+    },
+    {
+        name: "reverse",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "noRound",
+        type: "boolean",
         optional: true,
         clickableType: false,
         description: "",
-        default: "left",
+        default: "false",
     },
     {
-        name: "rounded",
+        name: "instantFeedback",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: '"primary"',
+    },
+    {
+        name: "trackColor",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: '"secondary-container"',
+    },
+    {
+        name: "animationSpeed",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "600",
+    },
+    {
+        name: "indeterminate",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -30,7 +86,7 @@ export const QCircularProgressDocsProps = [
     {
         name: "value",
         type: "number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "0",
@@ -43,13 +99,21 @@ export const QCircularProgressDocsProps = [
         description: "",
         default: "false",
     },
+    {
+        name: "noRound",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
     {
         name: "size",
-        type: "CssValue | number",
+        type: "Q.CssValue | number",
         optional: true,
         clickableType: true,
         description: "",
-        default: "2em",
+        default: '"2em"',
     },
     {
         name: "color",
@@ -57,7 +121,15 @@ export const QCircularProgressDocsProps = [
         optional: true,
         clickableType: false,
         description: "",
-        default: "undefined",
+        default: '"primary"',
+    },
+    {
+        name: "trackColor",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: '"secondary-container"',
     },
     {
         name: "thickness",
@@ -67,4 +139,60 @@ export const QCircularProgressDocsProps = [
         description: "",
         default: "5",
     },
+    {
+        name: "min",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "0",
+    },
+    {
+        name: "max",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "100",
+    },
+    {
+        name: "angle",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "0",
+    },
+    {
+        name: "showValue",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "instantFeedback",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "animationSpeed",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "600",
+    },
+    {
+        name: "fontSize",
+        type: "Q.CssValue | number",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: '"0.25em"',
+    },
 ];

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

@@ -1,38 +1,101 @@
-import type { NativeProps, CssValue } from "../../utils";
-import type { HTMLAttributes, SVGAttributes } from "svelte/elements";
-export interface QLinearProgressProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QLinearProgressProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * @default 0
      */
-    value: number;
+    value?: number;
     /**
-     * @default left
+     * @default undefined
+     */
+    buffer?: number;
+    /**
+     * @default "0.375em"
+     */
+    size?: Q.CssValue | number;
+    /**
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * @default false
+     */
+    noRound?: boolean;
+    /**
+     * @default false
+     */
+    instantFeedback?: boolean;
+    /**
+     * @default "primary"
+     */
+    color?: string;
+    /**
+     * @default "secondary-container"
      */
-    from?: "left" | "right";
+    trackColor?: string;
+    /**
+     * @default 600
+     */
+    animationSpeed?: number;
     /**
      * @default false
      */
-    rounded?: boolean;
+    indeterminate?: boolean;
 }
-export interface QCircularProgressProps extends NativeProps, SVGAttributes<SVGSVGElement> {
+export interface QCircularProgressProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * @default 0
      */
-    value: number;
+    value?: number;
     /**
      * @default false
      */
     indeterminate?: boolean;
     /**
-     * @default 2em
+     * @default false
      */
-    size?: CssValue | number;
+    noRound?: boolean;
     /**
-     * @default undefined
+     * @default "2em"
+     */
+    size?: Q.CssValue | number;
+    /**
+     * @default "primary"
      */
     color?: string;
+    /**
+     * @default "secondary-container"
+     */
+    trackColor?: string;
     /**
      * @default 5
      */
     thickness?: number;
+    /**
+     * @default 0
+     */
+    min?: number;
+    /**
+     * @default 100
+     */
+    max?: number;
+    /**
+     * @default 0
+     */
+    angle?: number;
+    /**
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * @default false
+     */
+    instantFeedback?: boolean;
+    /**
+     * @default 600
+     */
+    animationSpeed?: number;
+    /**
+     * @default "0.25em"
+     */
+    fontSize?: Q.CssValue | number;
 }

package/dist/components/radio/QRadio.svelte

@@ -1,8 +1,19 @@
-<script>export let value = "", label = "", selected = void 0, disable = false, userClasses = "";
-export { userClasses as class };
+<script lang="ts">
+  let {
+    value = "",
+    label = "",
+    selected = $bindable(),
+    disable = false,
+    ...props
+  } = $props();
 </script>
 
-<label class="q-radio {userClasses}" class:q-radio--disabled={disable} {...$$restProps}>
+<label
+  {...props}
+  class="q-radio{props.class ? ` ${props.class}` : ''}"
+  class:q-radio--disabled={disable}
+  aria-disabled={disable || undefined}
+>
   <input type="radio" bind:group={selected} {value} disabled={disable} />
   <span>{label}</span>
 </label>