@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

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?: QRadioProps["label"];
-        selected?: QRadioProps["selected"];
-        disable?: QRadioProps["disable"];
-        class?: string | null | 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.props.js

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 023f166466a04ae52838fa2fcbf5b5f9
+// @quaffHash 65a74e3713e2fac1b7ba6c32735203a7
 export const QRadioDocsProps = [
     {
         name: "value",

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,9 +1,7 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { NativeProps } from "../../utils";
-export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
+export interface QRadioProps extends HTMLAttributes<HTMLLabelElement> {
     value: string;
     label?: string;
     selected?: unknown;
     disable?: boolean;
 }
-export declare const QRadioPropsDefaults: QRadioProps;

package/dist/components/radio/props.js

@@ -1,8 +1 @@
-import { NativePropsDefaults } from "../../utils";
-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,48 @@
-<script>import { useSize } from "../../composables";
-import { createClasses, createStyles } from "../../utils";
-import { getContext } from "svelte";
-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
-  );
-$:
-  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"
-      }
-    );
+<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,
+    });
   });
-$:
-  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";
-      }
-    }
+  $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>

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

@@ -1,23 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
-declare const __propDef: {
-    props: {
-        width?: QRailbarProps["width"];
-        side?: QRailbarProps["side"];
-        bordered?: QRailbarProps["bordered"];
-        class?: string | null | undefined;
-        style?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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> {
-}
+declare const QRailbar: import("svelte").Component<QRailbarProps, {}, "">;
+export default QRailbar;

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

@@ -1,13 +1,13 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 59d32044c3aee07fb108f91f740e8e1a
+// @quaffHash 3226afb5e510d1c50908cbef451b54ac
 export const QRailbarDocsProps = [
     {
         name: "width",
-        type: "CssValue | number",
+        type: "number",
         optional: true,
-        clickableType: true,
+        clickableType: false,
         description: "",
-        default: "88px",
+        default: "88",
     },
     {
         name: "side",

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

@@ -1,10 +1,10 @@
-import type { NativeProps, CssValue } from "../../utils";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QRailbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
-     * @default 88px
+     * @default 88
      */
-    width?: CssValue | number;
+    width?: number;
     /**
      * @default left
      */

package/dist/components/select/QSelect.svelte

@@ -1,78 +1,107 @@
-<script>import { browser } from "$app/environment";
-import { onMount, onDestroy } from "svelte";
-import { QIcon } from "../..";
-export let options, multiple = 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 focus = false;
-let active = false;
-$:
-  active = typeof value === "number" || value?.length > 0 || focus;
-let wrapper = null;
-let isMenuOpen = false;
-let wasClicked = false;
-let preventClose = false;
-function handleMousedown() {
-  isMenuOpen = !isMenuOpen;
-  wasClicked = true;
-}
-function handleFocus() {
-  focus = true;
-  if (!wasClicked) {
-    isMenuOpen = true;
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { browser } from "$app/environment";
+  import { QIcon } from "../..";
+  let {
+    options,
+    multiple = false,
+    dense = false,
+    disable = false,
+    error = false,
+    errorMessage = void 0,
+    filled = false,
+    hint = void 0,
+    label = void 0,
+    outlined = false,
+    rounded = false,
+    displayValue,
+    before = void 0,
+    prepend = void 0,
+    append = void 0,
+    after = void 0,
+    value = $bindable(),
+    ...props
+  } = $props();
+  let focus = $state(false);
+  const currentDisplayValue = $derived.by(() => {
+    if (displayValue !== void 0) {
+      return displayValue;
+    }
+    if (!multiple) {
+      return value;
+    }
+    return value.join(", ");
+  });
+  const active = $derived(currentDisplayValue || focus);
+  let wrapper = $state(null);
+  let isMenuOpen = $state(false);
+  let wasClicked = $state(false);
+  let preventClose = $state(false);
+  function handleMousedown(e) {
+    isMenuOpen = !isMenuOpen;
+    wasClicked = true;
+    props.onmousedown?.(e);
   }
-  wasClicked = false;
-}
-function handleBlur() {
-  focus = false;
-  if (!multiple && !preventClose) {
-    isMenuOpen = false;
+  function handleFocus(e) {
+    focus = true;
+    if (!wasClicked) {
+      isMenuOpen = true;
+    }
+    wasClicked = false;
+    props.onfocus?.(e);
   }
-  preventClose = false;
-}
-let selectedOptions = [];
-$:
-  selectedOptions = options.map((option) => isSelected(option), value);
-let slotPrependWidth = 0;
-function isSelected(option) {
-  const optionValue = typeof option === "string" ? option : option.value;
-  return multiple ? value.includes(optionValue) : value === optionValue;
-}
-function select(evt, option) {
-  evt.preventDefault();
-  const optionValue = typeof option === "string" ? option : option.value;
-  if (multiple) {
-    const hasItem = value.some((entry) => entry === optionValue);
-    if (hasItem) {
-      value = value.filter(
-        (val) => val !== optionValue
-      );
-    } else {
-      value = [...value, optionValue];
+  function handleBlur(e) {
+    focus = false;
+    if (!multiple && !preventClose) {
+      isMenuOpen = false;
     }
-    return;
+    preventClose = false;
+    props.onblur?.(e);
   }
-  value = optionValue;
-  isMenuOpen = false;
-}
-function handleClickOutside(event) {
-  if (wrapper && !wrapper.contains(event.target)) {
-    isMenuOpen = false;
+  const selectedOptions = $derived(
+    options.map((option) => isSelected(option), value),
+  );
+  let snippetPrependWidth = $state(0);
+  function isSelected(option) {
+    const optionValue = typeof option === "string" ? option : option.value;
+    return multiple ? value.includes(optionValue) : value === optionValue;
   }
-}
-onMount(() => {
-  if (browser) {
-    window.document.addEventListener("click", handleClickOutside);
+  function select(evt, option) {
+    evt.preventDefault();
+    const optionValue = typeof option === "string" ? option : option.value;
+    if (multiple) {
+      const hasItem = value.some((entry) => entry === optionValue);
+      if (hasItem) {
+        value = value.filter((val) => val !== optionValue);
+      } else {
+        value = [...value, optionValue];
+      }
+      return;
+    }
+    value = optionValue;
+    isMenuOpen = false;
   }
-});
-onDestroy(() => {
-  if (browser) {
-    document.removeEventListener("click", handleClickOutside);
+  function handleClickOutside(event) {
+    if (wrapper && !wrapper.contains(event.target)) {
+      isMenuOpen = false;
+    }
   }
-});
+  onMount(() => {
+    if (browser) {
+      window.document.addEventListener("click", handleClickOutside);
+    }
+  });
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener("click", handleClickOutside);
+    }
+  });
 </script>
 
 <div
-  class="q-select q-field {userClasses}"
+  bind:this={wrapper}
+  {...props}
+  class="q-field{props.class ? ` ${props.class}` : ''} q-select"
   class:q-field--default={!outlined && !rounded && !filled}
   class:q-field--outlined={outlined}
   class:q-field--rounded={rounded}
@@ -82,35 +111,37 @@ onDestroy(() => {
   class:q-field--active={active}
   class:q-field--focus={focus}
   class:q-field--label={label}
-  class:q-field--slot-append={$$slots.append}
-  class:q-field--slot-prepend={$$slots.prepend}
+  class:q-field--snippet-append={!!append}
+  class:q-field--snippet-prepend={!!prepend}
   class:q-field--disable={disable}
   class:q-field--error={error}
   class:q-field--bottom-space={hint || (error && errorMessage)}
-  style:--slot-prepend-width="{slotPrependWidth}px"
-  {...$$restProps}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
 >
-  {#if $$slots.before}
-    <div class="q-field__slot-before">
-      <slot name="before" />
+  {#if before}
+    <div class="q-field__snippet-before">
+      {@render before()}
     </div>
   {/if}
 
   <div class="q-field__inner">
     <label class="q-field__wrapper">
-      {#if $$slots.prepend}
-        <div class="q-field__slot-prepend" bind:clientWidth={slotPrependWidth}>
-          <slot name="prepend" />
+      {#if prepend}
+        <div
+          class="q-field__snippet-prepend"
+          bind:clientWidth={snippetPrependWidth}
+        >
+          {@render prepend()}
         </div>
       {/if}
 
       <input
         class="q-field__input"
-        bind:value
+        value={currentDisplayValue}
         placeholder=""
-        on:focus={handleFocus}
-        on:blur={handleBlur}
-        on:mousedown={handleMousedown}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+        onmousedown={handleMousedown}
         disabled={disable}
         tabindex={disable === true ? -1 : 0}
         readonly
@@ -118,11 +149,11 @@ onDestroy(() => {
 
       <span class="q-field__label">{label}</span>
 
-      <div class="q-field__slot-append">
-        <slot name="append" />
+      <div class="q-field__snippet-append">
+        {@render append?.()}
 
         <QIcon
-          class="q-select__arrow-toggle {$$slots.append
+          class="q-select__arrow-toggle {append
             ? 'q-select__arrow-toggle--has-append'
             : ''}"
           name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
@@ -134,9 +165,11 @@ onDestroy(() => {
       {#each options as option, idx}
         <a
           href={multiple ? "javascript:void(0)" : undefined}
-          class="q-select__option {selectedOptions[idx] ? 'q-select__option--selected' : ''}"
-          on:mousedown={() => (preventClose = true)}
-          on:click={(e) => select(e, option)}
+          class="q-select__option {selectedOptions[idx]
+            ? 'q-select__option--selected'
+            : ''}"
+          onmousedown={() => (preventClose = true)}
+          onclick={(e) => select(e, option)}
           >{typeof option === "string" ? option : option.value}</a
         >
       {/each}
@@ -149,9 +182,9 @@ onDestroy(() => {
     {/if}
   </div>
 
-  {#if $$slots.after}
-    <div class="q-field__slot-after">
-      <slot name="after" />
+  {#if after}
+    <div class="q-field__snippet-after">
+      {@render after()}
     </div>
   {/if}
 </div>

package/dist/components/select/QSelect.svelte.d.ts

@@ -1,35 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QSelectProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        options: QSelectProps["options"];
-        multiple?: QSelectProps["multiple"];
-        dense?: QSelectProps["dense"];
-        disable?: QSelectProps["disable"];
-        error?: QSelectProps["error"];
-        errorMessage?: QSelectProps["errorMessage"];
-        filled?: QSelectProps["filled"];
-        hint?: QSelectProps["hint"];
-        label?: QSelectProps["label"];
-        outlined?: QSelectProps["outlined"];
-        rounded?: QSelectProps["rounded"];
-        value: QSelectProps["value"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        before: {};
-        prepend: {};
-        append: {};
-        after: {};
-    };
-};
-type QSelectProps_ = typeof __propDef.props;
-export { QSelectProps_ as QSelectProps };
-export type QSelectEvents = typeof __propDef.events;
-export type QSelectSlots = typeof __propDef.slots;
-export default class QSelect extends SvelteComponent<QSelectProps, QSelectEvents, QSelectSlots> {
-}
+declare const QSelect: import("svelte").Component<QSelectProps, {}, "value">;
+export default QSelect;

package/dist/components/select/docs.js

@@ -27,6 +27,13 @@ export const QSelectDocs = {
                 default: false,
                 description: "Whether the select component is disabled.",
             },
+            {
+                name: "displayValue",
+                type: "string",
+                default: undefined,
+                optional: true,
+                description: "Custom display value to show instead of the plain option(s).",
+            },
             {
                 name: "error",
                 type: "boolean",

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 672deee79cbdb08b347a495e2f956037
+// @quaffHash 052485ca1338f87a8ffcdfe3b6718e97
 export const QSelectDocsProps = [
     {
         name: "value",
@@ -97,4 +97,44 @@ export const QSelectDocsProps = [
         description: "",
         default: "",
     },
+    {
+        name: "displayValue",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "before",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "prepend",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "append",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "after",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];