@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

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;
+    }
+  }
+}

package/dist/components/switch/QSwitch.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { ripple } from "../../helpers";
+  import { QIconSnippet } from "../private";
+  import { isActivationKey, type QEvent } from "../../utils";
+  import type { QSwitchProps } from "./props";
+
+  type QSwitchEvent<T> = QEvent<T, HTMLDivElement>;
+
+  let {
+    value = $bindable(),
+    label = undefined,
+    labelPosition = "right",
+    disabled = false,
+    icons = false,
+    showOnlyCheckedIcon = false,
+    checkedIcon,
+    uncheckedIcon,
+    ...props
+  }: QSwitchProps = $props();
+
+  let qSwitch: HTMLDivElement;
+  let qSwitchInput: HTMLInputElement;
+
+  function toggle() {
+    value = !value;
+
+    qSwitch.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  function onclick(event: QSwitchEvent<MouseEvent>) {
+    event.preventDefault();
+    if (!qSwitchInput || disabled) {
+      return;
+    }
+
+    props.onclick?.(event);
+
+    qSwitchInput.focus();
+    toggle();
+  }
+
+  function onkeydown(event: QSwitchEvent<KeyboardEvent>) {
+    if (!qSwitch || disabled || !isActivationKey(event)) {
+      return;
+    }
+
+    props.onkeydown?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    event.preventDefault();
+    qSwitch.click();
+  }
+</script>
+
+<div
+  bind:this={qSwitch}
+  {...props}
+  class={[
+    "q-switch",
+    props.class,
+    disabled && "q-switch--disabled",
+    labelPosition === "left" && "q-switch--reversed",
+  ]}
+  {onclick}
+  {onkeydown}
+  aria-disabled={disabled || undefined}
+  role="switch"
+  aria-checked={value || undefined}
+  data-quaff
+>
+  <label class="q-switch__inner">
+    <input
+      bind:checked={value}
+      bind:this={qSwitchInput}
+      type="checkbox"
+      disabled={disabled || undefined}
+    />
+    <span class="q-switch__track">
+      <span class="q-switch__touch"></span>
+      <span class="q-switch__handle-container" use:ripple={{ disabled }}>
+        <span
+          class={[
+            "q-switch__handle",
+            (showOnlyCheckedIcon ? !!value : icons || uncheckedIcon) &&
+              "q-switch__handle--with-icon",
+          ]}
+        >
+          {#if (uncheckedIcon || icons) && !showOnlyCheckedIcon}
+            {@render icon("unchecked")}
+          {/if}
+          {#if checkedIcon || icons || showOnlyCheckedIcon}
+            {@render icon("checked")}
+          {/if}
+        </span>
+      </span>
+    </span>
+  </label>
+  {#if label}
+    <span class="q-switch__label">
+      {label}
+    </span>
+  {/if}
+</div>
+
+{#snippet icon(type: "unchecked" | "checked")}
+  <QIconSnippet
+    icon={type === "unchecked" ? uncheckedIcon : checkedIcon}
+    defaultIcon={type === "unchecked" ? "close" : "check"}
+    size="1rem"
+    class="q-switch__icon q-switch__icon--{type}"
+  />
+{/snippet}

package/dist/components/switch/QSwitch.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QSwitchProps_ = typeof __propDef.props;
+export { QSwitchProps_ as QSwitchProps };
+export type QSwitchEvents = typeof __propDef.events;
+export type QSwitchSlots = typeof __propDef.slots;
+export default class QSwitch extends SvelteComponentTyped<QSwitchProps_, QSwitchEvents, QSwitchSlots> {
+}

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

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

package/dist/components/switch/docs.js

@@ -0,0 +1,17 @@
+import { QSwitchDocsProps, QSwitchDocsSnippets } from "./docs.props";
+export const QSwitchDocs = {
+    name: "QSwitch",
+    description: "QSwitch is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
+    docs: {
+        props: QSwitchDocsProps,
+        snippets: QSwitchDocsSnippets,
+        methods: [],
+        events: [
+            {
+                name: "input",
+                type: "(value: boolean) => void",
+                description: "Emitted when the user changes the value of the toggle.",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,3 @@
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QSwitchDocsProps: ParsedProp[];
+export declare const QSwitchDocsSnippets: ParsedSnippet[];

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

@@ -0,0 +1,119 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 759a896310c5a7db6adc0840a9c47349
+export const QSwitchDocsProps = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Current on/off state of the switch. This property is bindable.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Text label to display next to the switch.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "labelPosition",
+        type: [
+            {
+                name: '"left"',
+                isClickable: false,
+            },
+            {
+                name: '"right"',
+                isClickable: false,
+            },
+        ],
+        description: "Position of the label relative to the switch.",
+        default: '"right"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "icons",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Shows default check/close icons in the switch handle.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "showOnlyCheckedIcon",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "When true, only shows the check icon (when the switch is on).",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "checkedIcon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "Snippet",
+                isClickable: false,
+            },
+        ],
+        description: "Custom icon to show when the switch is on. Can be a Material Symbol name or a custom snippet.",
+        default: '"check"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "uncheckedIcon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "Snippet",
+                isClickable: false,
+            },
+        ],
+        description: "Custom icon to show when the switch is off. Can be a Material Symbol name or a custom snippet.",
+        default: '"close"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "disabled",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disables the switch, preventing user interaction.",
+        default: "false",
+    },
+];
+export const QSwitchDocsSnippets = [];

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

@@ -0,0 +1,53 @@
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QSwitchProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Current on/off state of the switch. This property is bindable.
+     *
+     * @default undefined
+     */
+    value?: boolean;
+    /**
+     * Text label to display next to the switch.
+     *
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Position of the label relative to the switch.
+     *
+     * @default "right"
+     */
+    labelPosition?: "left" | "right";
+    /**
+     * Shows default check/close icons in the switch handle.
+     *
+     * @default false
+     */
+    icons?: boolean;
+    /**
+     * When true, only shows the check icon (when the switch is on).
+     *
+     * @default false
+     */
+    showOnlyCheckedIcon?: boolean;
+    /**
+     * Custom icon to show when the switch is on. Can be a Material Symbol name or a custom snippet.
+     *
+     * @default "check"
+     */
+    checkedIcon?: MaterialSymbol | Snippet;
+    /**
+     * Custom icon to show when the switch is off. Can be a Material Symbol name or a custom snippet.
+     *
+     * @default "close"
+     */
+    uncheckedIcon?: MaterialSymbol | Snippet;
+    /**
+     * Disables the switch, preventing user interaction.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/components/switch/props.js

@@ -0,0 +1 @@
+export {};