@quaffui/quaff 0.1.0-prealpha

package/dist/components/private/QDocsSection.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { QDialog } from "../..";
+  import QCodeBlock from "../codeBlock/QCodeBlock.svelte";
+
+  export let title, snippets;
+
+  let dialog = false;
+</script>
+
+<div style="margin-bottom:48px">
+  <div class="flex between-align q-mb-md">
+    <h5>{title}</h5>
+    {#if snippets}
+      <QDialog
+        class="snippet-dialog"
+        bind:value={dialog}
+        btnAttrs={{ outline: true, icon: "code", class: "circle" }}
+        on:btnClick={() => (dialog = true)}
+        modal
+      >
+        <QCodeBlock code={snippets[title]} language="svelte" {title} copiable />
+      </QDialog>
+    {/if}
+  </div>
+  <slot />
+</div>
+
+<style>
+  pre {
+    max-height: 400px;
+  }
+</style>

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

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

package/dist/components/progress/QCircularProgress.svelte

@@ -0,0 +1,26 @@
+<script>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 = isNumber(size) ? `${size}px` : size;
+$:
+  classes = createClasses([indeterminate && "indeterminate"], {
+    component: "q-circular-progress",
+    quaffClasses: [color && `${color}-text`],
+    userClasses
+  });
+</script>
+
+<svg class={classes} height={spinnerSize} width={spinnerSize} viewBox="25 25 50 50">
+  <circle
+    class="path"
+    cx="50"
+    cy="50"
+    r="20"
+    fill="none"
+    stroke="currentColor"
+    stroke-width={thickness}
+    stroke-miterlimit="10"
+  />
+</svg>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QCircularProgressProps } from "./props";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+        indeterminate?: boolean | undefined;
+        size?: string | number | undefined;
+        color?: QCircularProgressProps["color"];
+        thickness?: number | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QCircularProgressProps = typeof __propDef.props;
+export type QCircularProgressEvents = typeof __propDef.events;
+export type QCircularProgressSlots = typeof __propDef.slots;
+export default class QCircularProgress extends SvelteComponentTyped<QCircularProgressProps, QCircularProgressEvents, QCircularProgressSlots> {
+}
+export {};

package/dist/components/progress/QLinearProgress.svelte

@@ -0,0 +1,20 @@
+<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", userClasses]);
+$:
+  progressClasses = createClasses(["progress", from]);
+$:
+  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>
+
+<div class={containerClasses} style={containerStyle} {...$$restProps}>
+  <div class={progressClasses} style={progressStyle} />
+</div>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } 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: {};
+};
+export type QLinearProgressProps = typeof __propDef.props;
+export type QLinearProgressEvents = typeof __propDef.events;
+export type QLinearProgressSlots = typeof __propDef.slots;
+export default class QLinearProgress extends SvelteComponentTyped<QLinearProgressProps, QLinearProgressEvents, QLinearProgressSlots> {
+}
+export {};

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

@@ -0,0 +1,8 @@
+export declare const QLinearProgressDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,26 @@
+export const QLinearProgressDocsProps = [
+    {
+        name: "value",
+        type: "number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "from",
+        type: '"left" | "right"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "rounded",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/progress/index.scss

@@ -0,0 +1,50 @@
+// Linear progress
+
+// Circular progress
+.q-circular-progress {
+  vertical-align: middle;
+
+  &--indeterminate {
+    animation: q-spin 2s linear infinite;
+    transform-origin: center center;
+
+    & .path {
+      stroke-dasharray: 1, 200;
+      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, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { type NativeProps } from "$utils/types";
+export interface QLinearProgressProps extends NativeProps {
+    value: number;
+    from: "left" | "right";
+    rounded: boolean;
+}
+export interface QCircularProgressProps extends NativeProps {
+    value: number;
+    indeterminate: boolean;
+    size: string | number;
+    color?: string;
+    thickness: number;
+}
+export declare const QLinearProgressPropsDefaults: {
+    userClasses?: string | undefined;
+    userStyles?: string | undefined;
+    value: number;
+    from: string;
+    rounded: boolean;
+};

package/dist/components/progress/props.js

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

package/dist/components/radio/QRadio.svelte

@@ -0,0 +1,14 @@
+<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>
+
+<label class={classes} {...$$restProps}>
+  <input type="radio" bind:group={selected} {value} disabled={disable} />
+  <span>{label}</span>
+</label>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } 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: {};
+};
+export type QRadioProps = typeof __propDef.props;
+export type QRadioEvents = typeof __propDef.events;
+export type QRadioSlots = typeof __propDef.slots;
+export default class QRadio extends SvelteComponentTyped<QRadioProps, QRadioEvents, QRadioSlots> {
+}
+export {};

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

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

package/dist/components/radio/docs.js

@@ -0,0 +1,39 @@
+export let 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: [],
+        methods: [],
+        events: [
+            {
+                name: "change",
+                type: "(e: Event) => void",
+                description: "Emitted when the radio button is selected.",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+export declare const QRadioDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,34 @@
+export const QRadioDocsProps = [
+    {
+        name: "value",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "selected",
+        type: "any",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "disable",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/radio/index.scss

@@ -0,0 +1,3 @@
+.q-radio {
+  @include selection(radio);
+}

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

@@ -0,0 +1,8 @@
+import type { NativeProps } from "../../utils/types";
+export interface QRadioProps extends NativeProps {
+    value: string;
+    label: string;
+    selected: any;
+    disable: boolean;
+}
+export declare const QRadioPropsDefaults: QRadioProps;

package/dist/components/radio/props.js

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

package/dist/components/railbar/QRailbar.svelte

@@ -0,0 +1,52 @@
+<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>
+
+<nav class={classes} {style}>
+  <slot />
+</nav>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QRailbarProps } from "./props";
+declare const __propDef: {
+    props: {
+        width?: string | number | undefined;
+        side?: "left" | "right" | undefined;
+        bordered?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type QRailbarProps = typeof __propDef.props;
+export type QRailbarEvents = typeof __propDef.events;
+export type QRailbarSlots = typeof __propDef.slots;
+export default class QRailbar extends SvelteComponentTyped<QRailbarProps, QRailbarEvents, QRailbarSlots> {
+}
+export {};

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

@@ -0,0 +1,8 @@
+export declare const QRailbarDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,26 @@
+export const QRailbarDocsProps = [
+    {
+        name: "width",
+        type: "number | string",
+        optional: false,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "side",
+        type: '"left" | "right"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

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

@@ -0,0 +1,7 @@
+import { type NativeProps } from "../../utils/types";
+export interface QRailbarProps extends NativeProps {
+    width: number | string;
+    side: "left" | "right";
+    bordered: boolean;
+}
+export declare const QRailbarPropsDefaults: QRailbarProps;

package/dist/components/railbar/props.js

@@ -0,0 +1,7 @@
+import { NativePropsDefaults } from "../../utils/types";
+export const QRailbarPropsDefaults = {
+    width: 88,
+    side: "left",
+    bordered: false,
+    ...NativePropsDefaults,
+};