@quaffui/quaff 0.1.0-prealpha

package/dist/components/input/QInput.svelte

@@ -0,0 +1,81 @@
+<script>import { createClasses } from "../../utils/props";
+import { textWidth } from "../../utils/fields";
+export let bordered = false, dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = void 0;
+export { userClasses as class };
+let active = false;
+$:
+  hasBorder = bordered || rounded || outlined;
+$:
+  classes = createClasses(
+    [
+      label && "label",
+      active && "active",
+      dense && "dense",
+      $$slots.prepend && "prepend",
+      $$slots.append && "append",
+      hasBorder && "has-border",
+      bordered && "bordered",
+      rounded && "rounded",
+      filled && "filled",
+      error && "error",
+      disable && "disabled"
+    ],
+    {
+      component: "q-input",
+      userClasses
+    }
+  );
+let wrapper = null;
+let inputElement = null;
+$:
+  value && updateInput(inputElement);
+function updateInput(target) {
+  const input = target;
+  if (!wrapper) {
+    throw new Error("unexpected to not have element");
+  }
+  const label2 = wrapper.querySelector("label");
+  const isBorder = hasBorder && !filled;
+  const toActive = document.activeElement === target || input.value || input.querySelector("[selected]");
+  if (toActive) {
+    if (isBorder && label2) {
+      const labelWidth = textWidth(label2, "0.75rem Arial");
+      let width = active ? labelWidth : Math.round(labelWidth / 1.33);
+      width = width / 16;
+      const start = rounded ? 1.25 : 0.75;
+      const end = width + start + 0.5;
+      input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 0.5rem, ${end}rem 0.5rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
+    } else
+      input.style.clipPath = "";
+    active = true;
+  } else {
+    active = false;
+    input.style.clipPath = "";
+  }
+}
+</script>
+
+<div bind:this={wrapper} class={classes} {...$$restProps}>
+  <slot name="prepend" />
+
+  <input
+    type="text"
+    on:focus={(e) => updateInput(e.currentTarget)}
+    on:blur={(e) => updateInput(e.currentTarget)}
+    bind:value
+    bind:this={inputElement}
+    tabindex={disable === true ? -1 : 0}
+  />
+
+  <slot name="append" />
+
+  {#if label}
+    <!-- svelte-ignore a11y-label-has-associated-control -->
+    <label class="q-input__label {active ? 'q-input__label--active' : ''}">{label}</label>
+  {/if}
+  {#if hint}
+    <span class="q-input__helper">{hint}</span>
+  {:else if error && errorMessage}
+    <span class="q-input__error">{errorMessage}</span>
+  {/if}
+</div>

package/dist/components/input/QInput.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QInputProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        bordered?: boolean | undefined;
+        dense?: QInputProps["dense"];
+        disable?: boolean | undefined;
+        error?: boolean | undefined;
+        errorMessage?: QInputProps["errorMessage"];
+        filled?: boolean | undefined;
+        hint?: QInputProps["hint"];
+        label?: QInputProps["label"];
+        outlined?: boolean | undefined;
+        rounded?: boolean | undefined;
+        value: QInputProps["value"];
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        prepend: {};
+        append: {};
+    };
+};
+export type QInputProps = typeof __propDef.props;
+export type QInputEvents = typeof __propDef.events;
+export type QInputSlots = typeof __propDef.slots;
+export default class QInput extends SvelteComponentTyped<QInputProps, QInputEvents, QInputSlots> {
+}
+export {};

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

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

package/dist/components/input/docs.js

@@ -0,0 +1,83 @@
+export let QInputDocs = {
+    name: "QInput",
+    description: "QInput is a form component that allows users to input text. It supports different visual styles such as bordered, filled, outlined, and rounded, and it can also display hint text and custom error messages.",
+    docs: {
+        props: [
+            {
+                name: "bordered",
+                type: "boolean",
+                default: false,
+                description: "Whether the input component has a border.",
+            },
+            {
+                name: "disable",
+                type: "boolean",
+                default: false,
+                description: "Whether the input component is disabled.",
+            },
+            {
+                name: "error",
+                type: "boolean",
+                default: false,
+                description: "Whether the input component is in an error state.",
+            },
+            {
+                name: "errorMessage",
+                type: "string",
+                optional: true,
+                description: "Custom error message to show when the input component is in an error state.",
+            },
+            {
+                name: "filled",
+                type: "boolean",
+                default: false,
+                description: "Whether the input component has a filled style.",
+            },
+            {
+                name: "hint",
+                type: "string",
+                optional: true,
+                description: "Hint text to show under the input component.",
+            },
+            {
+                name: "label",
+                type: "string",
+                optional: true,
+                description: "Label for the input component.",
+            },
+            {
+                name: "outlined",
+                type: "boolean",
+                default: false,
+                description: "Whether the input component has an outlined style.",
+            },
+            {
+                name: "rounded",
+                type: "boolean",
+                default: false,
+                description: "Whether the input component has rounded corners.",
+            },
+            {
+                name: "dense",
+                type: "boolean",
+                optional: true,
+                description: "Whether the input component has a smaller (dense) size.",
+            },
+            {
+                name: "value",
+                type: "string",
+                default: "",
+                description: "Current value of the input component.",
+            },
+        ],
+        slots: [],
+        methods: [],
+        events: [
+            {
+                name: "input",
+                type: "(value: string) => void",
+                description: "Emitted when the user types in the input component.",
+            },
+        ],
+    },
+};

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

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

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

@@ -0,0 +1,90 @@
+export const QInputDocsProps = [
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "dense",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "disable",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "error",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "errorMessage",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "filled",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "hint",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "outlined",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "rounded",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "value",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/input/index.scss

@@ -0,0 +1,3 @@
+.q-input {
+  @include field;
+}

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

@@ -0,0 +1,27 @@
+import type { NativeProps } from "$utils/types";
+export interface QInputProps extends NativeProps {
+    bordered: boolean;
+    dense?: boolean;
+    disable: boolean;
+    error: boolean;
+    errorMessage?: string;
+    filled: boolean;
+    hint?: string;
+    label?: string;
+    outlined: boolean;
+    rounded: boolean;
+    value: string;
+}
+export declare const QInputPropsDefaults: {
+    bordered: boolean;
+    dense: boolean;
+    disable: boolean;
+    error: boolean;
+    errorMessage: undefined;
+    filled: boolean;
+    hint: undefined;
+    label: undefined;
+    outlined: boolean;
+    rounded: boolean;
+    value: string;
+};

package/dist/components/input/props.js

@@ -0,0 +1,13 @@
+export const QInputPropsDefaults = {
+    bordered: false,
+    dense: false,
+    disable: false,
+    error: false,
+    errorMessage: undefined,
+    filled: false,
+    hint: undefined,
+    label: undefined,
+    outlined: false,
+    rounded: false,
+    value: "",
+};

package/dist/components/layout/QLayout.svelte

@@ -0,0 +1,88 @@
+<script context="module"></script>
+
+<script>import { setContext } from "svelte";
+import { createClasses, createStyles } from "../../utils/props";
+import ContextReseter from "../private/ContextReseter.svelte";
+import { writable } from "svelte/store";
+export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+$:
+  style = createStyles(
+    {
+      "--header-height": isNaN(Number(headerHeight)) ? headerHeight : `${headerHeight}px`,
+      "--footer-height": isNaN(Number(footerHeight)) ? footerHeight : `${footerHeight}px`,
+      "--left-railbar-width": isNaN(Number(leftRailbarWidth)) ? leftRailbarWidth : `${leftRailbarWidth}px`,
+      "--right-railbar-width": isNaN(Number(rightRailbarWidth)) ? rightRailbarWidth : `${rightRailbarWidth}px`,
+      "--left-drawer-width": isNaN(Number(leftDrawerWidth)) ? leftDrawerWidth : `${leftDrawerWidth}px`,
+      "--right-drawer-width": isNaN(Number(rightDrawerWidth)) ? rightDrawerWidth : `${rightDrawerWidth}px`
+    },
+    userStyles
+  );
+$:
+  classes = createClasses(["q-layout", userClasses]);
+function prepareCtx(viewProp) {
+  const [top, middle, bottom] = viewProp.split(" ");
+  const header = $$slots.header ? {
+    display: true,
+    fixed: top.includes("H")
+  } : void 0;
+  const footer = $$slots.footer ? {
+    display: true,
+    fixed: bottom.includes("F")
+  } : void 0;
+  const drawerLeft = {
+    offset: {
+      top: $$slots.header && top[0].toLowerCase() === "h",
+      bottom: $$slots.footer && bottom[0].toLowerCase() === "f"
+    },
+    fixed: [top[0], middle[0], bottom[0]].includes("L"),
+    railbar: $$slots.railbarLeft === true,
+    drawer: $$slots.drawerLeft === true,
+    overlay: false
+  };
+  const drawerRight = {
+    offset: {
+      top: $$slots.header && top[2].toLowerCase() === "h",
+      bottom: $$slots.footer && bottom[2].toLowerCase() === "f"
+    },
+    fixed: [top[2], middle[2], bottom[2]].includes("R"),
+    railbar: $$slots.railbarRight === true,
+    drawer: $$slots.drawerRight === true,
+    overlay: false
+  };
+  return {
+    header,
+    footer,
+    drawerLeft,
+    drawerRight
+  };
+}
+let ctx = writable(prepareCtx(view));
+$:
+  $ctx = prepareCtx(view);
+setContext("layout", ctx);
+</script>
+
+<div class={classes} {style} on:scroll on:resize>
+  {#if $$slots.railbarLeft}
+    <slot name="railbarLeft" />
+  {/if}
+  {#if $$slots.railbarRight}
+    <slot name="railbarRight" />
+  {/if}
+  {#if $$slots.drawerLeft}
+    <slot name="drawerLeft" />
+  {/if}
+  {#if $$slots.drawerRight}
+    <slot name="drawerRight" />
+  {/if}
+  {#if $$slots.header}
+    <slot name="header" />
+  {/if}
+  {#if $$slots.footer}
+    <slot name="footer" />
+  {/if}
+  <ContextReseter keys="layout">
+    <slot name="content" />
+  </ContextReseter>
+</div>

package/dist/components/layout/QLayout.svelte.d.ts

@@ -0,0 +1,57 @@
+import { SvelteComponentTyped } from "svelte";
+export interface DrawerContext {
+    offset: {
+        top: boolean;
+        bottom: boolean;
+    };
+    fixed: boolean;
+    railbar: boolean;
+    drawer: boolean;
+    overlay: boolean;
+}
+export interface AppbarContext {
+    display: boolean;
+    fixed: boolean;
+}
+export type LayoutContext = Readable<{
+    header?: AppbarContext;
+    footer?: AppbarContext;
+    drawerLeft: DrawerContext;
+    drawerRight: DrawerContext;
+}>;
+import type { QLayoutProps } from "./props";
+import type { Readable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        view?: "lhh lpr lfr" | "lhh lpr lff" | "lhh lpr lFr" | "lhh lpr lFf" | "lhh lpr ffr" | "lhh lpr fff" | "lhh lpr fFr" | "lhh lpr fFf" | "lhh lpR lfr" | "lhh lpR lff" | "lhh lpR lFr" | "lhh lpR lFf" | "lhh lpR ffr" | "lhh lpR fff" | "lhh lpR fFr" | "lhh lpR fFf" | "lhh Lpr lfr" | "lhh Lpr lff" | "lhh Lpr lFr" | "lhh Lpr lFf" | "lhh Lpr ffr" | "lhh Lpr fff" | "lhh Lpr fFr" | "lhh Lpr fFf" | "lhh LpR lfr" | "lhh LpR lff" | "lhh LpR lFr" | "lhh LpR lFf" | "lhh LpR ffr" | "lhh LpR fff" | "lhh LpR fFr" | "lhh LpR fFf" | "lhr lpr lfr" | "lhr lpr lff" | "lhr lpr lFr" | "lhr lpr lFf" | "lhr lpr ffr" | "lhr lpr fff" | "lhr lpr fFr" | "lhr lpr fFf" | "lhr lpR lfr" | "lhr lpR lff" | "lhr lpR lFr" | "lhr lpR lFf" | "lhr lpR ffr" | "lhr lpR fff" | "lhr lpR fFr" | "lhr lpR fFf" | "lhr Lpr lfr" | "lhr Lpr lff" | "lhr Lpr lFr" | "lhr Lpr lFf" | "lhr Lpr ffr" | "lhr Lpr fff" | "lhr Lpr fFr" | "lhr Lpr fFf" | "lhr LpR lfr" | "lhr LpR lff" | "lhr LpR lFr" | "lhr LpR lFf" | "lhr LpR ffr" | "lhr LpR fff" | "lhr LpR fFr" | "lhr LpR fFf" | "lHh lpr lfr" | "lHh lpr lff" | "lHh lpr lFr" | "lHh lpr lFf" | "lHh lpr ffr" | "lHh lpr fff" | "lHh lpr fFr" | "lHh lpr fFf" | "lHh lpR lfr" | "lHh lpR lff" | "lHh lpR lFr" | "lHh lpR lFf" | "lHh lpR ffr" | "lHh lpR fff" | "lHh lpR fFr" | "lHh lpR fFf" | "lHh Lpr lfr" | "lHh Lpr lff" | "lHh Lpr lFr" | "lHh Lpr lFf" | "lHh Lpr ffr" | "lHh Lpr fff" | "lHh Lpr fFr" | "lHh Lpr fFf" | "lHh LpR lfr" | "lHh LpR lff" | "lHh LpR lFr" | "lHh LpR lFf" | "lHh LpR ffr" | "lHh LpR fff" | "lHh LpR fFr" | "lHh LpR fFf" | "lHr lpr lfr" | "lHr lpr lff" | "lHr lpr lFr" | "lHr lpr lFf" | "lHr lpr ffr" | "lHr lpr fff" | "lHr lpr fFr" | "lHr lpr fFf" | "lHr lpR lfr" | "lHr lpR lff" | "lHr lpR lFr" | "lHr lpR lFf" | "lHr lpR ffr" | "lHr lpR fff" | "lHr lpR fFr" | "lHr lpR fFf" | "lHr Lpr lfr" | "lHr Lpr lff" | "lHr Lpr lFr" | "lHr Lpr lFf" | "lHr Lpr ffr" | "lHr Lpr fff" | "lHr Lpr fFr" | "lHr Lpr fFf" | "lHr LpR lfr" | "lHr LpR lff" | "lHr LpR lFr" | "lHr LpR lFf" | "lHr LpR ffr" | "lHr LpR fff" | "lHr LpR fFr" | "lHr LpR fFf" | "hhh lpr lfr" | "hhh lpr lff" | "hhh lpr lFr" | "hhh lpr lFf" | "hhh lpr ffr" | "hhh lpr fff" | "hhh lpr fFr" | "hhh lpr fFf" | "hhh lpR lfr" | "hhh lpR lff" | "hhh lpR lFr" | "hhh lpR lFf" | "hhh lpR ffr" | "hhh lpR fff" | "hhh lpR fFr" | "hhh lpR fFf" | "hhh Lpr lfr" | "hhh Lpr lff" | "hhh Lpr lFr" | "hhh Lpr lFf" | "hhh Lpr ffr" | "hhh Lpr fff" | "hhh Lpr fFr" | "hhh Lpr fFf" | "hhh LpR lfr" | "hhh LpR lff" | "hhh LpR lFr" | "hhh LpR lFf" | "hhh LpR ffr" | "hhh LpR fff" | "hhh LpR fFr" | "hhh LpR fFf" | "hhr lpr lfr" | "hhr lpr lff" | "hhr lpr lFr" | "hhr lpr lFf" | "hhr lpr ffr" | "hhr lpr fff" | "hhr lpr fFr" | "hhr lpr fFf" | "hhr lpR lfr" | "hhr lpR lff" | "hhr lpR lFr" | "hhr lpR lFf" | "hhr lpR ffr" | "hhr lpR fff" | "hhr lpR fFr" | "hhr lpR fFf" | "hhr Lpr lfr" | "hhr Lpr lff" | "hhr Lpr lFr" | "hhr Lpr lFf" | "hhr Lpr ffr" | "hhr Lpr fff" | "hhr Lpr fFr" | "hhr Lpr fFf" | "hhr LpR lfr" | "hhr LpR lff" | "hhr LpR lFr" | "hhr LpR lFf" | "hhr LpR ffr" | "hhr LpR fff" | "hhr LpR fFr" | "hhr LpR fFf" | "hHh lpr lfr" | "hHh lpr lff" | "hHh lpr lFr" | "hHh lpr lFf" | "hHh lpr ffr" | "hHh lpr fff" | "hHh lpr fFr" | "hHh lpr fFf" | "hHh lpR lfr" | "hHh lpR lff" | "hHh lpR lFr" | "hHh lpR lFf" | "hHh lpR ffr" | "hHh lpR fff" | "hHh lpR fFr" | "hHh lpR fFf" | "hHh Lpr lfr" | "hHh Lpr lff" | "hHh Lpr lFr" | "hHh Lpr lFf" | "hHh Lpr ffr" | "hHh Lpr fff" | "hHh Lpr fFr" | "hHh Lpr fFf" | "hHh LpR lfr" | "hHh LpR lff" | "hHh LpR lFr" | "hHh LpR lFf" | "hHh LpR ffr" | "hHh LpR fff" | "hHh LpR fFr" | "hHh LpR fFf" | "hHr lpr lfr" | "hHr lpr lff" | "hHr lpr lFr" | "hHr lpr lFf" | "hHr lpr ffr" | "hHr lpr fff" | "hHr lpr fFr" | "hHr lpr fFf" | "hHr lpR lfr" | "hHr lpR lff" | "hHr lpR lFr" | "hHr lpR lFf" | "hHr lpR ffr" | "hHr lpR fff" | "hHr lpR fFr" | "hHr lpR fFf" | "hHr Lpr lfr" | "hHr Lpr lff" | "hHr Lpr lFr" | "hHr Lpr lFf" | "hHr Lpr ffr" | "hHr Lpr fff" | "hHr Lpr fFr" | "hHr Lpr fFf" | "hHr LpR lfr" | "hHr LpR lff" | "hHr LpR lFr" | "hHr LpR lFf" | "hHr LpR ffr" | "hHr LpR fff" | "hHr LpR fFr" | "hHr LpR fFf" | undefined;
+        headerHeight?: string | number | undefined;
+        footerHeight?: string | number | undefined;
+        leftDrawerWidth?: string | number | undefined;
+        rightDrawerWidth?: string | number | undefined;
+        leftRailbarWidth?: string | number | undefined;
+        rightRailbarWidth?: string | number | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        scroll: Event;
+        resize: UIEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        railbarLeft: {};
+        railbarRight: {};
+        drawerLeft: {};
+        drawerRight: {};
+        header: {};
+        footer: {};
+        content: {};
+    };
+};
+export type QLayoutProps = typeof __propDef.props;
+export type QLayoutEvents = typeof __propDef.events;
+export type QLayoutSlots = typeof __propDef.slots;
+export default class QLayout extends SvelteComponentTyped<QLayoutProps, QLayoutEvents, QLayoutSlots> {
+}
+export {};

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

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

package/dist/components/layout/docs.js

@@ -0,0 +1,11 @@
+import { QLayoutDocsProps } from "./docs.props";
+export let QLayoutDocs = {
+    name: "QLayout",
+    description: "The QLayout component is designed to be the skeleton of the entire page, with navigational elements such as header, railbars, drawers and footer. This component is not mandatory but it really helps structure the page.",
+    docs: {
+        props: QLayoutDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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

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

@@ -0,0 +1,58 @@
+export const QLayoutDocsProps = [
+    {
+        name: "view",
+        type: "QLayoutViewOptions",
+        optional: false,
+        clickableType: true,
+        description: 'The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.\nSee <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar\'s explanation on the view prop</a>.',
+        default: '"hhh lpr fff"',
+    },
+    {
+        name: "headerHeight",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: 'The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "64px",
+    },
+    {
+        name: "footerHeight",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: 'The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "80px",
+    },
+    {
+        name: "leftDrawerWidth",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: 'The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "300px",
+    },
+    {
+        name: "rightDrawerWidth",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: 'The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "300px",
+    },
+    {
+        name: "leftRailbarWidth",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: 'The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "88px",
+    },
+    {
+        name: "rightRailbarWidth",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: 'The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
+        default: "88px",
+    },
+];