@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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,26 +1,83 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-export let value = 0, from = "left", rounded = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  roundedStyle = {
-    borderRadius: rounded ? "12px" : "0"
-  };
-$:
-  containerClasses = createClasses(["small-space", "border"], {
-    component: "q-linear-progress",
-    userClasses
-  });
-$:
-  progressClasses = createClasses([from], {
-    component: "q-linear-progress",
-    element: "progress"
-  });
-$:
-  containerStyle = createStyles(roundedStyle, userStyles);
-$:
-  progressStyle = from === "right" ? `clip-path: polygon(100% 0%, 100% 100%, ${100 - value}% 100%, ${100 - value}% 0%);` : `clip-path: polygon(0% 0%, 0% 100%, ${value}% 100%, ${value}% 0%);`;
+<script lang="ts">
+  import { useSize } from "../../composables";
+  import type { QLinearProgressProps } from "./props";
+
+  function width(val: number, reverse: boolean) {
+    return reverse
+      ? `translateX(100%) scale3d(-${val}, 1, 1)`
+      : `scale3d(${val}, 1, 1)`;
+  }
+
+  let {
+    value = $bindable(0),
+    buffer,
+    reverse = false,
+    noRound = false,
+    size = "0.375em",
+    color = "primary",
+    animationSpeed = 600,
+    instantFeedback = false,
+    trackColor = "secondary-container",
+    indeterminate = false,
+    ...props
+  }: QLinearProgressProps = $props();
+
+  const normalized = $derived(value > 1 ? value / 100 : value);
+  const normalizedBuffer = $derived(
+    buffer && buffer > 1 ? buffer / 100 : buffer,
+  );
+
+  const parsedColor = $derived(
+    color.includes("#") ? color : `var(--${color}, ${color})`,
+  );
+  const parsedTrackColor = $derived(
+    trackColor.includes("#")
+      ? trackColor
+      : `var(--${trackColor}, ${trackColor})`,
+  );
+
+  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
+      ? undefined
+      : `transform ${animationSpeed}ms`,
+  );
+  const trackTransform = $derived(width(normalizedBuffer ?? 1, reverse));
+  const indicatorTransform = $derived(
+    width(+indeterminate || normalized, reverse),
+  );
 </script>
 
-<div class={containerClasses} style={containerStyle} {...$$restProps}>
-  <div class={progressClasses} style={progressStyle} />
+<div
+  {...props}
+  class={["q-linear-progress", props.class]}
+  style:font-size={qSize.style}
+  style:border-radius={radius}
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow={indeterminate ? undefined : normalized}
+  data-quaff
+>
+  <div
+    class="q-linear-progress__track absolute-full"
+    style:transition
+    style:transform-origin={origin}
+    style:background-color={parsedTrackColor}
+    style:transform={trackTransform}
+  ></div>
+
+  <div
+    class={[
+      "q-linear-progress__indicator",
+      indeterminate && "q-linear-progress__indicator--indeterminate",
+    ]}
+    style:--q-indicator-color={parsedColor}
+    style:transition
+    style:transform={indicatorTransform}
+    style:transform-origin={origin}
+  ></div>
 </div>

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

@@ -1,14 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { QLinearProgressProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: number | undefined;
-        from?: "left" | "right" | undefined;
-        rounded?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -18,5 +10,5 @@ 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> {
+export default class QLinearProgress extends SvelteComponentTyped<QLinearProgressProps_, QLinearProgressEvents, QLinearProgressSlots> {
 }

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

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

package/dist/components/progress/docs.js

@@ -1,10 +1,20 @@
-import { QLinearProgressDocsProps } from "./docs.props";
-export let QProgressDocs = {
-    name: "QProgress",
-    description: "The QProgress component is used to display a progress bar, indicating the completion status of a task or process.",
+import { QLinearProgressDocsProps, QLinearProgressDocsSnippets, QCircularProgressDocsProps, QCircularProgressDocsSnippets, } from "./docs.props";
+export const QLinearProgressDocs = {
+    name: "QLinearProgress",
+    description: "The QLinearProgress component is used to display a progress bar, indicating the completion status of a task or process.",
     docs: {
         props: QLinearProgressDocsProps,
-        slots: [],
+        snippets: QLinearProgressDocsSnippets,
+        methods: [],
+        events: [],
+    },
+};
+export const QCircularProgressDocs = {
+    name: "QCircularProgress",
+    description: "The QCircularProgress component is used to display a circular progress bar, indicating the completion status of a task or process.",
+    docs: {
+        props: QCircularProgressDocsProps,
+        snippets: QCircularProgressDocsSnippets,
         methods: [],
         events: [],
     },

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

@@ -1,16 +1,5 @@
-export declare const QLinearProgressDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QCircularProgressDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QLinearProgressDocsProps: ParsedProp[];
+export declare const QLinearProgressDocsSnippets: ParsedSnippet[];
+export declare const QCircularProgressDocsProps: ParsedProp[];
+export declare const QCircularProgressDocsSnippets: ParsedSnippet[];

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

@@ -1,68 +1,314 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 97816510b625a22a52291f2cc073a4d9
 export const QLinearProgressDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "value",
-        type: "number",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Current progress value as a percentage. This prop is bindable.",
+        default: "0",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "buffer",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Secondary progress value, shown as a lighter track behind the main progress.",
+        default: "undefined",
     },
     {
-        name: "from",
-        type: '"left" | "right"',
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "size",
+        type: [
+            {
+                name: "Q.CssValue",
+                isClickable: false,
+            },
+            {
+                name: "number",
+                isClickable: false,
+            },
+        ],
+        description: "Height of the progress bar.",
+        default: '"0.375em"',
     },
     {
-        name: "rounded",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "reverse",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Reverses the progress bar direction from right-to-left.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "noRound",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Removes the rounded sides of the progress bar.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "instantFeedback",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disables the transition animation when the value changes.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "color",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Color of the progress indicator.",
+        default: '"primary"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "trackColor",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Color of the background track.",
+        default: '"secondary-container"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "animationSpeed",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Duration of the transition animation in milliseconds.",
+        default: "600",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "indeterminate",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Enables an infinite loading animation instead of showing progress.",
+        default: "false",
     },
 ];
+export const QLinearProgressDocsSnippets = [];
 export const QCircularProgressDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "value",
-        type: "number",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Current progress value as a percentage. This prop is bindable.",
+        default: "0",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "indeterminate",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Enables an infinite spinning animation instead of showing progress.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "noRound",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Removes the rounded ends of the progress arc.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "size",
-        type: "string | number",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: [
+            {
+                name: "Q.CssValue",
+                isClickable: false,
+            },
+            {
+                name: "number",
+                isClickable: false,
+            },
+        ],
+        description: "Overall size of the circular progress component.",
+        default: '"2em"',
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "color",
-        type: "string",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Color of the progress arc.",
+        default: '"primary"',
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "trackColor",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Color of the background circle.",
+        default: '"secondary-container"',
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "thickness",
-        type: "number",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Thickness of the progress arc.",
+        default: "0.2",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "min",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Minimum value for the progress range.",
+        default: "0",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "max",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Maximum value for the progress range.",
+        default: "100",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "angle",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Rotation angle of the progress arc in degrees (top is 0 and bottom 180).",
+        default: "0",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "showValue",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Shows the current progress value in the center of the circle.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "instantFeedback",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disables the transition animation when the value changes.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "animationSpeed",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Duration of the transition animation in milliseconds.",
+        default: "600",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "fontSize",
+        type: [
+            {
+                name: "Q.CssValue",
+                isClickable: false,
+            },
+            {
+                name: "number",
+                isClickable: false,
+            },
+        ],
+        description: "Font size of the center text when showValue is true.",
+        default: '"0.25em"',
     },
 ];
+export const QCircularProgressDocsSnippets = [];