@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,37 +1,149 @@
-import type { NativeProps, CssValue } from "../../utils/types";
-export interface QLinearProgressProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QLinearProgressProps extends HTMLAttributes<HTMLDivElement> {
     /**
+     * Current progress value as a percentage. This prop is bindable.
+     *
      * @default 0
      */
-    value: number;
+    value?: number;
     /**
-     * @default left
+     * Secondary progress value, shown as a lighter track behind the main progress.
+     *
+     * @default undefined
+     */
+    buffer?: number;
+    /**
+     * Height of the progress bar.
+     *
+     * @default "0.375em"
+     */
+    size?: Q.CssValue | number;
+    /**
+     * Reverses the progress bar direction from right-to-left.
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Removes the rounded sides of the progress bar.
+     *
+     * @default false
+     */
+    noRound?: boolean;
+    /**
+     * Disables the transition animation when the value changes.
+     *
+     * @default false
+     */
+    instantFeedback?: boolean;
+    /**
+     * Color of the progress indicator.
+     *
+     * @default "primary"
+     */
+    color?: string;
+    /**
+     * Color of the background track.
+     *
+     * @default "secondary-container"
      */
-    from: "left" | "right";
+    trackColor?: string;
     /**
+     * Duration of the transition animation in milliseconds.
+     *
+     * @default 600
+     */
+    animationSpeed?: number;
+    /**
+     * Enables an infinite loading animation instead of showing progress.
+     *
      * @default false
      */
-    rounded: boolean;
+    indeterminate?: boolean;
 }
-export interface QCircularProgressProps extends NativeProps {
+export interface QCircularProgressProps extends HTMLAttributes<HTMLDivElement> {
     /**
+     * Current progress value as a percentage. This prop is bindable.
+     *
      * @default 0
      */
-    value: number;
+    value?: number;
     /**
+     * Enables an infinite spinning animation instead of showing progress.
+     *
      * @default false
      */
-    indeterminate: boolean;
+    indeterminate?: boolean;
     /**
-     * @default 2em
+     * Removes the rounded ends of the progress arc.
+     *
+     * @default false
      */
-    size: CssValue | number;
+    noRound?: boolean;
     /**
-     * @default undefined
+     * Overall size of the circular progress component.
+     *
+     * @default "2em"
+     */
+    size?: Q.CssValue | number;
+    /**
+     * Color of the progress arc.
+     *
+     * @default "primary"
      */
     color?: string;
     /**
-     * @default 5
+     * Color of the background circle.
+     *
+     * @default "secondary-container"
+     */
+    trackColor?: string;
+    /**
+     * Thickness of the progress arc.
+     *
+     * @default 0.2
+     */
+    thickness?: number;
+    /**
+     * Minimum value for the progress range.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value for the progress range.
+     *
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Rotation angle of the progress arc in degrees (top is 0 and bottom 180).
+     *
+     * @default 0
+     */
+    angle?: number;
+    /**
+     * Shows the current progress value in the center of the circle.
+     *
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Disables the transition animation when the value changes.
+     *
+     * @default false
+     */
+    instantFeedback?: boolean;
+    /**
+     * Duration of the transition animation in milliseconds.
+     *
+     * @default 600
+     */
+    animationSpeed?: number;
+    /**
+     * Font size of the center text when showValue is true.
+     *
+     * @default "0.25em"
      */
-    thickness: number;
+    fontSize?: Q.CssValue | number;
 }

package/dist/components/radio/QRadio.svelte

@@ -1,14 +1,21 @@
-<script>import { createClasses } from "../../utils/props";
-export let value = "", label = "", selected = void 0, disable = false, userClasses = "";
-export { userClasses as class };
-$:
-  classes = createClasses([disable && "disabled"], {
-    component: "q-radio",
-    userClasses
-  });
+<script lang="ts">
+  import type { QRadioProps } from "./props";
+
+  let {
+    value = "",
+    label = "",
+    selected = $bindable(),
+    disable = false,
+    ...props
+  }: QRadioProps = $props();
 </script>
 
-<label class={classes} {...$$restProps}>
+<label
+  {...props}
+  class={["q-radio", props.class, disable && "q-radio--disabled"]}
+  aria-disabled={disable || undefined}
+  data-quaff
+>
   <input type="radio" bind:group={selected} {value} disabled={disable} />
   <span>{label}</span>
 </label>

package/dist/components/radio/QRadio.svelte.d.ts

@@ -1,14 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { QRadioProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | undefined;
-        label?: string | undefined;
-        selected?: QRadioProps["selected"];
-        disable?: boolean | undefined;
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -18,5 +10,5 @@ type QRadioProps_ = typeof __propDef.props;
 export { QRadioProps_ as QRadioProps };
 export type QRadioEvents = typeof __propDef.events;
 export type QRadioSlots = typeof __propDef.slots;
-export default class QRadio extends SvelteComponent<QRadioProps, QRadioEvents, QRadioSlots> {
+export default class QRadio extends SvelteComponentTyped<QRadioProps_, QRadioEvents, QRadioSlots> {
 }

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

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

package/dist/components/radio/docs.js

@@ -1,32 +1,10 @@
-export let QRadioDocs = {
+import { QRadioDocsProps, QRadioDocsSnippets } from "./docs.props";
+export const QRadioDocs = {
     name: "QRadio",
     description: "Radio buttons allow the user to select one option from a set.",
     docs: {
-        props: [
-            {
-                name: "value",
-                type: "string",
-                default: "",
-                description: "The value of the radio button.",
-            },
-            {
-                name: "label",
-                type: "string",
-                description: "The label of the radio button.",
-            },
-            {
-                name: "selected",
-                type: "any",
-                description: "The currently selected value in the radio group.",
-            },
-            {
-                name: "disable",
-                type: "boolean",
-                default: false,
-                description: "Disable the radio button.",
-            },
-        ],
-        slots: [],
+        props: QRadioDocsProps,
+        snippets: QRadioDocsSnippets,
         methods: [],
         events: [
             {

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

@@ -1,8 +1,3 @@
-export declare const QRadioDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QRadioDocsProps: ParsedProp[];
+export declare const QRadioDocsSnippets: ParsedSnippet[];

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

@@ -1,34 +1,53 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 8c6924cff3ff1c756f7579c2e24be1a5
 export const QRadioDocsProps = [
     {
-        name: "value",
-        type: "string",
+        isArray: false,
         optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Value associated with this radio button. Used when comparing against the selected value.",
+        default: '""',
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "label",
-        type: "string",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Text label displayed next to the radio button.",
+        default: '""',
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "selected",
-        type: "any",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "unknown",
+            isClickable: false,
+        },
+        description: "Bound value that determines if this radio button is selected. This prop is bindable.\nWhen using a group of radio buttons, this should be the same variable for all of them.",
+        default: "undefined",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "disable",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "When true, prevents user interaction with the radio button.",
+        default: "false",
     },
 ];
+export const QRadioDocsSnippets = [];

package/dist/components/radio/index.scss

@@ -1,3 +1,5 @@
+@use "$css/mixins";
+
 .q-radio {
-  @include selection(radio);
+  @include mixins.selection(radio);
 }

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

@@ -1,8 +1,28 @@
-import type { NativeProps } from "../../utils/types";
-export interface QRadioProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRadioProps extends HTMLAttributes<HTMLLabelElement> {
+    /**
+     * Value associated with this radio button. Used when comparing against the selected value.
+     *
+     * @default ""
+     */
     value: string;
-    label: string;
-    selected: any;
-    disable: boolean;
+    /**
+     * Text label displayed next to the radio button.
+     *
+     * @default ""
+     */
+    label?: string;
+    /**
+     * Bound value that determines if this radio button is selected. This prop is bindable.
+     * When using a group of radio buttons, this should be the same variable for all of them.
+     *
+     * @default undefined
+     */
+    selected?: unknown;
+    /**
+     * When true, prevents user interaction with the radio button.
+     *
+     * @default false
+     */
+    disable?: boolean;
 }
-export declare const QRadioPropsDefaults: QRadioProps;

package/dist/components/radio/props.js

@@ -1,8 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QRadioPropsDefaults = {
-    value: "",
-    label: "",
-    selected: undefined,
-    disable: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/railbar/QRailbar.scss

@@ -0,0 +1,54 @@
+@use "$css/mixins";
+
+.q-railbar {
+  z-index: 5;
+  position: fixed;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  vertical-align: middle;
+
+  height: auto;
+  margin: 0;
+  @include mixins.padding("a-sm");
+  @include mixins.gap("md");
+
+  background-color: var(--surface);
+  color: var(--on-surface);
+
+  border: 0;
+  border-radius: 0;
+
+  transform: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+  overflow: auto;
+
+  // Hide the scrollbar
+  // Internet Explorer 10+
+  -ms-overflow-style: none;
+  // Firefox
+  scrollbar-width: none;
+  // Other
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @each $side in ("left", "right") {
+    &.q-railbar--#{$side} {
+      #{$side}: 0;
+      width: var(--#{$side}-railbar-width);
+    }
+
+    &:not(.q-railbar--#{$side}).q-railbar--bordered {
+      @include mixins.border(var(--outline), $side);
+    }
+  }
+}

package/dist/components/railbar/QRailbar.svelte

@@ -1,71 +1,77 @@
-<script>import { getContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
-import { derived } from "svelte/store";
-export let width = 88, side = "left", bordered = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-let ctx = getContext("layout");
-let drawerType;
-$:
-  drawerType = side === "left" ? "drawerLeft" : "drawerRight";
-$:
-  classes = createClasses(
-    [
-      side,
-      bordered && "bordered",
-      $ctx && $ctx[drawerType].offset.top && "offset-top",
-      $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-      $ctx && $ctx[drawerType].fixed && "fixed",
-      $borderRadiusClasses,
-      $zIndexClass
-    ],
-    {
-      component: "q-railbar",
-      userClasses
-    }
-  );
-$:
-  widthStyle = !$ctx && useSize(width).style;
-$:
-  style = createStyles(
-    {
-      [`--${side}-railbar-width`]: widthStyle
-    },
-    userStyles
+<script lang="ts">
+  import { getContext, onDestroy, onMount, untrack } from "svelte";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { QLayoutCtxName } from "../../utils";
+  import type { QLayoutProps } from "../layout/props";
+  import type { DrawerContext } from "../layout/QLayout.svelte";
+  import type { QRailbarProps } from "./props";
+
+  let {
+    width = 88,
+    side = "left",
+    bordered = false,
+    children,
+    ...props
+  }: QRailbarProps = $props();
+
+  const railbarCtx = QContext.get<DrawerContext>(QLayoutCtxName.railbar[side]);
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    QLayoutCtxName.view,
   );
-$:
-  borderRadiusClasses = ctx && // No border radius if this isn't a layout railbar
-  derived(ctx, (context) => {
-    const borderSide = side === "left" ? "right" : "left";
-    const shouldHaveRadius = (pos) => {
-      let appBarEl = pos === "top" ? context["header"] : context["footer"];
-      if (context[drawerType].drawer) {
-        return false;
-      }
-      return !appBarEl?.display || context[drawerType].offset[pos];
-    };
-    return createClasses(
-      [
-        shouldHaveRadius("top") && `top-${borderSide}-radius`,
-        shouldHaveRadius("bottom") && `bottom-${borderSide}-radius`
-      ],
-      {
-        component: "q-railbar"
-      }
-    );
-  });
-$:
-  zIndexClass = ctx && derived(ctx, (context) => {
-    let drawer = side === "left" ? context.drawerLeft : context.drawerRight;
-    let pos;
-    for (pos of ["top", "bottom"]) {
-      if (!drawer.offset[pos] && drawer.overlay) {
-        return "above";
-      }
+
+  let railbarEl: HTMLElement;
+
+  onMount(() => {
+    if (railbarCtx) {
+      setTimeout(() => {
+        railbarEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
+      }, 100);
     }
   });
+
+  onDestroy(() => {
+    untrack(() => railbarCtx)?.updateEntries({
+      width: 0,
+      takesSpace: false,
+      ready: false,
+    });
+  });
+
+  $effect.pre(() => {
+    untrack(() => railbarCtx)?.updateEntries({
+      width,
+      takesSpace: railbarEl?.style.display !== "none" || false,
+      ready: true,
+    });
+  });
+
+  const offsetTop = $derived.by(() => {
+    const charPos = side === "left" ? 0 : 2;
+    return layoutView?.value.charAt(charPos) === "h";
+  });
+  const offsetBottom = $derived.by(() => {
+    const charPos = side === "left" ? 8 : 10;
+    return layoutView?.value.charAt(charPos) === "f";
+  });
+
+  const railbarWidthStyle = $derived(`--${side}-railbar-width: ${width}px`);
+
+  const style = $derived(`${railbarWidthStyle};${props.style ?? ""}`);
 </script>
 
-<nav class={classes} {style}>
-  <slot />
+<nav
+  bind:this={railbarEl}
+  {...props}
+  class={[
+    "q-railbar",
+    props.class,
+    `q-railbar--${side}`,
+    bordered && "q-railbar--bordered",
+    offsetTop && "q-railbar--offset-top",
+    offsetBottom && "q-railbar--offset-bottom",
+  ]}
+  {style}
+  data-quaff
+>
+  {@render children?.()}
 </nav>

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -1,23 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QRailbarProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        width?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
-        side?: "left" | "right" | undefined;
-        bordered?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QRailbarProps_ = typeof __propDef.props;
 export { QRailbarProps_ as QRailbarProps };
 export type QRailbarEvents = typeof __propDef.events;
 export type QRailbarSlots = typeof __propDef.slots;
-export default class QRailbar extends SvelteComponent<QRailbarProps, QRailbarEvents, QRailbarSlots> {
+export default class QRailbar extends SvelteComponentTyped<QRailbarProps_, QRailbarEvents, QRailbarSlots> {
 }

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

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

package/dist/components/railbar/docs.js

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

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

@@ -1,8 +1,3 @@
-export declare const QRailbarDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QRailbarDocsProps: ParsedProp[];
+export declare const QRailbarDocsSnippets: ParsedSnippet[];