@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/components/select/index.scss

@@ -1,3 +1,5 @@
+@use "$css/mixins";
+@use "$css/variables";
 @import "$css/shared/q-field.scss";
 
 .q-select {
@@ -11,22 +13,22 @@
   }
 
   &__menu {
-    @include menu;
+    @include mixins.menu;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.8) translateY(120%);
     transition:
-      opacity var(--speed2),
-      transform var(--speed2),
-      visibility 0s var(--speed2);
+      opacity variables.$speed2,
+      transform variables.$speed2,
+      visibility 0s variables.$speed2;
 
     &--active {
       opacity: 1;
       visibility: visible;
       transform: scale(1) translateY(100%);
       transition:
-        opacity var(--speed2),
-        transform var(--speed2),
+        opacity variables.$speed2,
+        transform variables.$speed2,
         visibility 0s 0s;
     }
   }

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type QSelectOption = string | {
     label: string;
@@ -20,16 +21,9 @@ export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement
     label?: string;
     outlined?: boolean;
     rounded?: boolean;
+    displayValue?: string;
+    before?: Snippet;
+    prepend?: Snippet;
+    append?: Snippet;
+    after?: Snippet;
 }
-export declare const QSelectPropsDefaults: {
-    dense: boolean;
-    disable: boolean;
-    error: boolean;
-    errorMessage: undefined;
-    filled: boolean;
-    hint: undefined;
-    label: undefined;
-    outlined: boolean;
-    rounded: boolean;
-    value: string;
-};

package/dist/components/select/props.js

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

package/dist/components/separator/QSeparator.scss

@@ -0,0 +1,54 @@
+@use "$css/variables";
+
+.q-separator__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
+
+  &--inset {
+    padding: 0 1rem;
+  }
+
+  &--vertical {
+    height: 100%;
+    flex-direction: column;
+
+    &.q-separator__wrapper--inset {
+      padding: 1rem 0;
+    }
+  }
+
+  &:not(.vertical) {
+    width: 100%;
+  }
+}
+
+.q-separator {
+  border: none;
+  flex: 1 1 auto;
+
+  &--vertical {
+    width: var(--q-separator--size, 0.0625rem);
+
+    @each $space, $val in variables.$spaces {
+      @if $space != "none" and $space != "auto" {
+        &.q-separator__spacing--#{$space} {
+          margin-inline: $val;
+        }
+      }
+    }
+  }
+
+  &:not(&--vertical) {
+    height: var(--q-separator--size, 0.0625rem);
+
+    @each $space, $val in variables.$spaces {
+      @if $space != "auto" {
+        &.q-separator__spacing--#{$space} {
+          margin-block: $val;
+        }
+      }
+    }
+  }
+}

package/dist/components/separator/QSeparator.svelte

@@ -1,52 +1,45 @@
-<script>import { useSize } from "../../composables";
-export let spacing = "none", inset = false, vertical = false, color = void 0, size = void 0, text = void 0, textAlign = vertical ? "middle" : "center", userClasses = void 0;
-export { userClasses as class };
-let orientation;
-$:
-  orientation = vertical ? "vertical" : "horizontal";
-$:
-  spacingClass = useSize(spacing).class || "";
-$:
-  colorClass = color ? `bg-${color}` : "";
+<script lang="ts">
+  import { useSize } from "../../composables/useSize";
+  let {
+    spacing = "none",
+    inset = false,
+    vertical = false,
+    color = "outline",
+    size,
+    text,
+    textAlign = vertical ? "middle" : "center",
+    ...props
+  } = $props();
+  const orientation = $derived(vertical ? "vertical" : "horizontal");
+  const qSize = $derived(useSize(spacing, "q-separator__spacing"));
 </script>
 
-{#if text}
-  <div
-    class="q-separator__wrapper {userClasses || ''}"
-    class:q-separator--vertical__wrapper={vertical}
-    class:q-separator--inset__wrapper={inset}
-    {...$$restProps}
-  >
+<div
+  {...props}
+  class="q-separator__wrapper{props.class ? ` ${props.class}` : ''}"
+  class:q-separator__wrapper--vertical={vertical}
+  class:q-separator__wrapper--inset={inset}
+>
+  {#if text}
     {#if (vertical && textAlign !== "top") || (!vertical && textAlign !== "left")}
-      <hr
-        class="q-separator {spacingClass} {colorClass}"
-        class:q-separator--vertical={vertical}
-        style:--q-separator--size={size}
-        aria-orientation={orientation}
-      />
+      {@render hr()}
     {/if}
+
     <div class={vertical ? "q-py-sm" : "q-px-sm"}>{text}</div>
+
     {#if (vertical && textAlign !== "bottom") || (!vertical && textAlign !== "right")}
-      <hr
-        class="q-separator {spacingClass} {colorClass}"
-        class:q-separator--vertical={vertical}
-        style:--q-separator--size={size}
-        aria-orientation={orientation}
-      />
+      {@render hr()}
     {/if}
-  </div>
-{:else}
-  <div
-    class="q-separator__wrapper {userClasses || ''}"
-    class:q-separator--vertical__wrapper={vertical}
-    class:q-separator--inset__wrapper={inset}
-    {...$$restProps}
-  >
-    <hr
-      class="q-separator {spacingClass} {colorClass}"
-      class:q-separator--vertical={vertical}
-      style:--q-separator--size={size}
-      aria-orientation={orientation}
-    />
-  </div>
-{/if}
+  {:else}
+    {@render hr()}
+  {/if}
+</div>
+
+{#snippet hr()}
+  <hr
+    class="q-separator bg-{color}{qSize.class ? ` ${qSize.class}` : ''}"
+    class:q-separator--vertical={vertical}
+    style:--q-separator-size={size}
+    aria-orientation={orientation}
+  />
+{/snippet}

package/dist/components/separator/QSeparator.svelte.d.ts

@@ -1,25 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QSeparatorProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        spacing?: QSeparatorProps["spacing"];
-        inset?: QSeparatorProps["inset"];
-        vertical?: QSeparatorProps["vertical"];
-        color?: QSeparatorProps["color"];
-        size?: QSeparatorProps["size"];
-        text?: QSeparatorProps["text"];
-        textAlign?: QSeparatorProps["textAlign"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QSeparatorProps_ = typeof __propDef.props;
-export { QSeparatorProps_ as QSeparatorProps };
-export type QSeparatorEvents = typeof __propDef.events;
-export type QSeparatorSlots = typeof __propDef.slots;
-export default class QSeparator extends SvelteComponent<QSeparatorProps, QSeparatorEvents, QSeparatorSlots> {
-}
+declare const QSeparator: import("svelte").Component<QSeparatorProps, {}, "">;
+export default QSeparator;

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

@@ -1,9 +1,9 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 3dc04e42e3fe60388a317edd5035cc9c
+// @quaffHash c1abfb6f47a067eca5b1a3da885e61e2
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: "QuaffSizes",
+        type: "Q.Size",
         optional: true,
         clickableType: true,
         description: "",
@@ -36,7 +36,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -61,7 +61,7 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: "QuaffSizes",
+        type: "Q.Size",
         optional: true,
         clickableType: true,
         description: "",

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

@@ -1,16 +1,15 @@
-import type { NativeProps, QuaffSizes } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
-interface QSeparatorPropsVertical extends NativeProps {
-    spacing?: QuaffSizes;
+interface QSeparatorPropsVertical extends HTMLAttributes<HTMLDivElement> {
+    spacing?: Q.Size;
     inset?: boolean;
     vertical?: true;
     color?: string;
-    size: string;
+    size?: string;
     text?: string;
     textAlign?: "top" | "middle" | "bottom";
 }
-interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivElement> {
-    spacing?: QuaffSizes;
+interface QSeparatorPropsHorizontal extends HTMLAttributes<HTMLDivElement> {
+    spacing?: Q.Size;
     inset?: boolean;
     vertical?: false;
     color?: string;
@@ -19,5 +18,4 @@ interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivE
     textAlign?: "left" | "center" | "right";
 }
 export type QSeparatorProps = QSeparatorPropsHorizontal | QSeparatorPropsVertical;
-export declare const QSeparatorPropsDefaults: QSeparatorProps;
 export {};

package/dist/components/separator/props.js

@@ -1,9 +1 @@
-export const QSeparatorPropsDefaults = {
-    spacing: "sm",
-    inset: false,
-    vertical: false,
-    color: undefined,
-    size: "1px",
-    text: undefined,
-    textAlign: "center",
-};
+export {};

package/dist/components/switch/QSwitch.scss

@@ -0,0 +1,305 @@
+@use "sass:list";
+@use "$css/mixins";
+@use "$css/disabled";
+
+$root: ".q-switch";
+$track: "#{$root}__track";
+$handle: "#{$root}__handle";
+$icon: "#{$root}__icon";
+
+$checked: "[aria-checked]";
+$unchecked: ":not([aria-checked])";
+
+$check-map: (
+  "checked": "[aria-checked]",
+  "unchecked": ":not([aria-checked])",
+);
+
+@function getColor($el, $checked: false, $hovered: null) {
+  @if $el == "track" {
+    @return if($checked, var(--primary), var(--surface-container-highest));
+  } @else if $el == "icon" {
+    @return if($checked, var(--on-primary-container), var(--surface-container-highest));
+  } @else if $el == "handle" {
+    @if ($checked) {
+      @return if($hovered, var(--primary-container), var(--on-primary));
+    } @else {
+      @return if($hovered, var(--on-surface-variant), var(--outline));
+    }
+  }
+
+  @error "The given element #{$el} is not supported.";
+}
+
+@layer q-switch {
+  .q-switch {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0; // Stop from collapsing in flex containers
+    gap: 0.8rem;
+
+    cursor: pointer;
+
+    outline: none;
+
+    &--reversed {
+      flex-direction: row-reverse;
+    }
+
+    &__inner {
+      width: 3.25rem;
+      height: 2rem;
+      border-radius: 10rem;
+    }
+
+    & input {
+      appearance: none;
+      outline: none;
+      margin: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+      cursor: inherit;
+    }
+  }
+
+  // Track
+  .q-switch {
+    & #{$track} {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      border-radius: 10rem;
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 100%;
+
+        display: flex;
+
+        border-radius: inherit;
+        box-sizing: border-box;
+        transition-property: opacity, background-color;
+        transition-timing-function: linear;
+        transition-duration: 67ms;
+      }
+    }
+
+    @each $state, $selector in $check-map {
+      &#{$selector} #{$track}::before {
+        background-color: getColor("track", $state == "checked");
+      }
+    }
+
+    &#{$checked} #{$track} {
+      background-color: transparent;
+      border-color: transparent;
+
+      &::before {
+        background-clip: content-box;
+      }
+    }
+
+    &#{$unchecked} #{$track}::before {
+      border-color: var(--outline);
+      border-style: solid;
+      border-width: 0.125rem;
+    }
+
+    &[aria-disabled] #{$track}:is(::before, ::after) {
+      transition: none;
+      opacity: 38%;
+    }
+  }
+
+  // Handle container
+  .q-switch {
+    & #{$handle}-container {
+      position: relative;
+
+      display: flex;
+      place-content: center;
+      place-items: center;
+
+      // cubic-bezier(0.13, 0.78, 0.33, 1.15) for little bounce
+      transition: margin 200ms ease;
+    }
+
+    &#{$checked} #{$handle}-container {
+      margin-inline-start: 1.25rem;
+    }
+
+    &#{$unchecked} #{$handle}-container {
+      margin-inline-end: 1.25rem;
+    }
+
+    &[aria-disabled] #{$handle}-container {
+      transition: none;
+    }
+  }
+
+  // Handle
+  .q-switch {
+    & #{$handle} {
+      height: 1rem;
+      width: 1rem;
+
+      border-radius: 100%;
+
+      transform-origin: center;
+      transition-property: height, width;
+      transition-duration: 250ms, 250ms;
+      transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1);
+      z-index: 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+
+        display: flex;
+        border-radius: inherit;
+        box-sizing: border-box;
+        transition: background-color 67ms linear;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: -0.5rem;
+        border-radius: inherit;
+
+        background-color: transparent;
+        opacity: 0.08;
+      }
+    }
+
+    &:not([aria-disabled])#{$checked}:is(:hover, :focus-within) #{$handle}::after {
+      background-color: var(--primary);
+    }
+
+    &:not([aria-disabled])#{$unchecked}:is(:hover, :focus-within) #{$handle}::after {
+      background-color: var(--on-surface);
+    }
+
+    & #{$handle}--with-icon,
+    &#{$checked} #{$handle} {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    &:not([aria-disabled]):active #{$handle} {
+      height: 1.75rem;
+      width: 1.75rem;
+      transition-timing-function: linear;
+      transition-duration: 100ms;
+    }
+
+    @each $state, $selector in $check-map {
+      &#{$selector}:not([aria-disabled]) {
+        & #{$handle}::before {
+          background-color: getColor("handle", $state == "checked", false);
+        }
+
+        &:is(:hover, :focus-within, :active) #{$handle}::before {
+          background-color: getColor("handle", $state == "checked", true);
+        }
+      }
+    }
+  }
+
+  // Icon
+  .q-switch {
+    & #{$icon} {
+      position: absolute;
+      // Equivalent to top, right, bottom and left set to 0
+      inset: 0;
+      margin: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: currentColor;
+
+      transition:
+        opacity 33ms linear,
+        transform 167ms cubic-bezier(0.2, 0, 0, 1);
+      opacity: 0;
+    }
+
+    &[aria-checked] #{$icon}--checked,
+    &:not([aria-checked]) #{$icon}--unchecked {
+      opacity: 1;
+    }
+
+    // rotate checked icon into view when there is no unchecked icon
+    &:not([aria-checked]) #{$handle}:not(#{$handle}--with-icon) #{icon}--checked {
+      transform: rotate(-45deg);
+    }
+
+    &#{$checked} {
+      & #{$icon} {
+        transition: none;
+      }
+    }
+
+    @each $state, $selector in $check-map {
+      &#{$selector} {
+        & #{$icon}--#{$state} {
+          color: getColor("icon", $state == "checked");
+        }
+      }
+    }
+  }
+}
+
+// Disabled
+@layer q-switch--disabled {
+  .q-switch[aria-disabled] {
+    &,
+    & * {
+      @include disabled.base();
+    }
+
+    & #{$track}::before {
+      background-color: disabled.rest-color("surface-container-high");
+      border-color: disabled.rest-color("on-surface");
+    }
+
+    & #{$handle} {
+      background-color: disabled.font-color();
+    }
+
+    & #{$icon} {
+      color: disabled.font-color("surface-container-high");
+    }
+
+    &#{$checked} {
+      & #{$track}::before {
+        background-color: disabled.rest-color();
+      }
+
+      & #{$handle} {
+        background-color: var(--surface);
+      }
+
+      & #{$icon} {
+        color: disabled.font-color();
+      }
+    }
+
+    & :is(#{$handle}, #{$handle}::before) {
+      transition: none;
+    }
+  }
+}