@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

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

@@ -1,22 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QLinearProgressProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: number | undefined;
-        from?: "left" | "right" | undefined;
-        rounded?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | 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.d.ts

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

package/dist/components/progress/docs.js

@@ -0,0 +1,11 @@
+import { QLinearProgressDocsProps } from "./docs.props";
+export const QProgressDocs = {
+    name: "QProgress",
+    description: "The QProgress component is used to display a progress bar, indicating the completion status of a task or process.",
+    docs: {
+        props: QLinearProgressDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -6,3 +6,11 @@ export declare const QLinearProgressDocsProps: {
     description: string;
     default: string;
 }[];
+export declare const QCircularProgressDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -1,26 +1,198 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 2274dbcac2f2a3c92c1fbfd4f31fc69a
 export const QLinearProgressDocsProps = [
     {
         name: "value",
         type: "number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "0",
     },
     {
-        name: "from",
-        type: '"left" | "right"',
-        optional: false,
+        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: "false",
+    },
+    {
+        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,
+        description: "",
+        default: "false",
+    },
+];
+export const QCircularProgressDocsProps = [
+    {
+        name: "value",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "0",
+    },
+    {
+        name: "indeterminate",
+        type: "boolean",
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
     {
-        name: "rounded",
+        name: "noRound",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
+    },
+    {
+        name: "size",
+        type: "Q.CssValue | number",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: '"2em"',
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: '"primary"',
+    },
+    {
+        name: "trackColor",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: '"secondary-container"',
+    },
+    {
+        name: "thickness",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        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,20 +1,101 @@
-import { type NativeProps } from "$utils/types";
-export interface QLinearProgressProps extends NativeProps {
-    value: number;
-    from: "left" | "right";
-    rounded: boolean;
+import type { HTMLAttributes } from "svelte/elements";
+export interface QLinearProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * @default 0
+     */
+    value?: number;
+    /**
+     * @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"
+     */
+    trackColor?: string;
+    /**
+     * @default 600
+     */
+    animationSpeed?: number;
+    /**
+     * @default false
+     */
+    indeterminate?: boolean;
 }
-export interface QCircularProgressProps extends NativeProps {
-    value: number;
-    indeterminate: boolean;
-    size: string | number;
+export interface QCircularProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * @default 0
+     */
+    value?: number;
+    /**
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * @default false
+     */
+    noRound?: boolean;
+    /**
+     * @default "2em"
+     */
+    size?: Q.CssValue | number;
+    /**
+     * @default "primary"
+     */
     color?: string;
-    thickness: number;
+    /**
+     * @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;
 }
-export declare const QLinearProgressPropsDefaults: {
-    userClasses?: string | undefined;
-    userStyles?: string | undefined;
-    value: number;
-    from: string;
-    rounded: boolean;
-};

package/dist/components/progress/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "$utils/types";
-export const QLinearProgressPropsDefaults = {
-    value: 0,
-    from: "left",
-    rounded: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/radio/QRadio.svelte

@@ -1,14 +1,19 @@
-<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">
+  let {
+    value = "",
+    label = "",
+    selected = $bindable(),
+    disable = false,
+    ...props
+  } = $props();
 </script>
 
-<label class={classes} {...$$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>

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

@@ -1,22 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QRadioProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | undefined;
-        label?: string | undefined;
-        selected?: QRadioProps["selected"];
-        disable?: boolean | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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> {
-}
+declare const QRadio: import("svelte").Component<QRadioProps, {}, "selected">;
+export default QRadio;

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,4 +1,4 @@
-export let QRadioDocs = {
+export const QRadioDocs = {
     name: "QRadio",
     description: "Radio buttons allow the user to select one option from a set.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 65a74e3713e2fac1b7ba6c32735203a7
 export const QRadioDocsProps = [
     {
         name: "value",
@@ -10,15 +12,15 @@ export const QRadioDocsProps = [
     {
         name: "label",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
     {
         name: "selected",
-        type: "any",
-        optional: false,
+        type: "unknown",
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -26,7 +28,7 @@ export const QRadioDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

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,7 @@
-import type { NativeProps } from "../../utils/types";
-export interface QRadioProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRadioProps extends HTMLAttributes<HTMLLabelElement> {
     value: string;
-    label: string;
-    selected: any;
-    disable: boolean;
+    label?: string;
+    selected?: unknown;
+    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,52 +1,48 @@
-<script>import { getContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-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([
-    "q-railbar",
-    "surface",
-    side,
-    bordered && "bordered",
-    $ctx && $ctx[drawerType].offset.top && "offset-top",
-    $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-    $ctx && $ctx[drawerType].fixed && "fixed",
-    getBorderRadiusClasses(side, $ctx),
-    $ctx && prepareZIndexClass($ctx, side),
-    userClasses
-  ]);
-$:
-  widthStyle = ctx === void 0 ? isNumber(width) ? `${width}px` : width : void 0;
-$:
-  style = createStyles(
-    {
-      [`--${side}-railbar-width`]: widthStyle
-    },
-    userStyles
-  );
-function getBorderRadiusClasses(sideProp, context) {
-  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
-  return createClasses([
-    context && context[drawerType].offset.top !== false && context && context[drawerType].drawer === false ? prefix + "--top" : void 0,
-    context && context[drawerType].offset.bottom !== false && context && context[drawerType].drawer === false ? prefix + "--bottom" : void 0
-  ]);
-}
-function prepareZIndexClass(context, sideProp) {
-  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
-  let pos;
-  for (pos of ["top", "bottom"]) {
-    if (!drawer.offset[pos] && drawer.overlay) {
-      return "above";
-    }
-  }
-}
+<script lang="ts">
+  import { getContext, onDestroy, untrack } from "svelte";
+  import QContext from "../../classes/QContext.svelte";
+  let {
+    width = 88,
+    side = "left",
+    bordered = false,
+    children,
+    ...props
+  } = $props();
+  const railbarCtx = QContext.get(`QRailbar-${side}`);
+  const layoutView = getContext("view");
+  let railbarEl = $state();
+  onDestroy(() => {
+    untrack(() => railbarCtx)?.updateEntries({
+      width: 0,
+      takesSpace: false,
+    });
+  });
+  $effect.pre(() => {
+    untrack(() => railbarCtx)?.updateEntries({
+      width,
+      takesSpace: railbarEl?.style.display !== "none" || false,
+    });
+  });
+  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 ? ` ${props.class}` : ''} q-railbar--{side}"
+  class:q-railbar--bordered={bordered}
+  class:q-railbar--offset-top={offsetTop}
+  class:q-railbar--offset-bottom={offsetBottom}
+  {style}
+>
+  {@render children?.()}
 </nav>