@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/NeoSwitch.svelte

@@ -0,0 +1,373 @@
+<script lang="ts">
+  import { toStyle } from '@dvcol/common-utils/common/class';
+  import { fade } from 'svelte/transition';
+
+  import type { NeoInputContext, NeoInputHTMLElement } from './common/neo-input.model.js';
+
+  import type { NeoSwitchProps } from './neo-switch.model.js';
+
+  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import NeoBaseInput from './common/NeoBaseInput.svelte';
+  import NeoInputValidation from './common/NeoInputValidation.svelte';
+  import NeoLabel from './common/NeoLabel.svelte';
+  import { computeShadowElevation } from '../utils/shadow.utils.js';
+  import { enterDefaultTransition } from '../utils/transition.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    label,
+    message,
+    error,
+
+    // State
+    type = 'checkbox',
+    id = label ? `neo-switch-${crypto.randomUUID()}` : undefined,
+    ref = $bindable(),
+    group = $bindable(),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    focused = $bindable(false),
+    disabled,
+    required,
+    loading,
+    validation,
+
+    // Styles
+    start,
+    glass,
+    rounded = true,
+    skeleton,
+
+    elevation = 2,
+
+    // Actions
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Other props
+    labelRef = $bindable(),
+    labelProps,
+    messageTag = 'div',
+    messageProps,
+    containerTag = 'div',
+    containerProps,
+    wrapperTag = 'div',
+    wrapperProps,
+    ...rest
+  }: NeoSwitchProps = $props();
+  /* eslint-enable prefer-const */
+
+  let initial = $state(checked);
+  let validationMessage = $state<string>(ref?.validationMessage ?? '');
+
+  let visible = $state(false);
+  let messageId = $state(`neo-switch-message-${crypto.randomUUID()}`);
+  const context = $derived<NeoInputContext<NeoInputHTMLElement>>({
+    // Ref
+    ref,
+
+    // Methods
+    mark: ref?.mark,
+    clear: ref?.clear,
+    change: ref?.change,
+    validate: ref?.validate,
+
+    // State
+    value: checked,
+    touched,
+    dirty,
+    valid,
+    readonly: rest.readonly,
+    disabled,
+
+    // Styles
+    rounded,
+    glass,
+    start,
+    skeleton,
+  });
+
+  const boxShadow = $derived(computeShadowElevation(-Math.abs(elevation), { glass, pressed: elevation > 0 }, { max: 2, min: -2 }));
+</script>
+
+<NeoInputValidation
+  tag={wrapperTag}
+  bind:visible
+  bind:messageId
+  {valid}
+  {validation}
+  {validationMessage}
+  {error}
+  {rounded}
+  {context}
+  {message}
+  {messageTag}
+  {messageProps}
+  in={inAction}
+  out={outAction}
+  transition={transitionAction}
+  {...wrapperProps}
+  style={toStyle('--neo-validation-padding: 0', wrapperProps?.style)}
+>
+  <svelte:element this={containerTag} class:neo-switch-container={true} class:neo-flat={!elevation} {...containerProps}>
+    <button
+      class="neo-switch-button"
+      role="switch"
+      aria-checked={indeterminate ? 'mixed' : checked}
+      class:neo-checked={checked || indeterminate}
+      class:neo-rounded={rounded}
+      class:neo-start={start}
+      class:neo-glass={glass}
+      class:neo-disabled={disabled}
+      class:neo-skeleton={skeleton}
+      class:neo-flat={!elevation}
+      class:neo-valid={validation && valid}
+      class:neo-invalid={validation && !valid}
+      style:--neo-switch-box-shadow={boxShadow}
+      onclick={() => ref?.click()}
+    >
+      <span class="neo-switch-input">
+        <NeoBaseInput
+          aria-invalid={valid === undefined ? undefined : !valid}
+          aria-describedby={visible ? messageId : undefined}
+          {id}
+          bind:ref
+          bind:initial
+          bind:group
+          bind:checked
+          bind:indeterminate
+          bind:valid
+          bind:dirty
+          bind:touched
+          bind:focused
+          bind:validationMessage
+          {type}
+          {disabled}
+          {required}
+          {...rest}
+          hidden
+          aria-hidden
+          tabindex={-1}
+        />
+      </span>
+      <span class="neo-switch-rail">
+        <span class="neo-switch-toggle">
+          <!--   Toggle handle   -->
+        </span>
+      </span>
+    </button>
+    <NeoLabel bind:ref={labelRef} for={id} {label} {disabled} {required} {...labelProps} />
+    {#if loading !== undefined}
+      <span class="neo-switch-suffix">
+        {#if loading}
+          <span class="neo-switch-loading" out:fade={enterDefaultTransition}>
+            <IconCircleLoading width="1rem" height="1rem" />
+          </span>
+        {/if}
+      </span>
+    {/if}
+  </svelte:element>
+</NeoInputValidation>
+
+<style>.neo-switch-container {
+  --neo-switch-height: var(--neo-line-height, 1.5rem);
+  --neo-switch-toggle-width: 0.875rem;
+  --neo-switch-spacing: 0.125rem;
+  --neo-label-margin: 0 0 0 0.75rem;
+  --neo-label-padding: 0;
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  margin: 0;
+  padding: calc(0.375rem + var(--neo-switch-border-width, var(--neo-border-width, 1px))) 0.5rem 0.375rem;
+}
+.neo-switch-container.neo-flat {
+  --neo-label-margin: 0 0 0 0.625rem;
+}
+.neo-switch-input {
+  display: none;
+}
+.neo-switch-rail {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  height: calc(100% - var(--neo-switch-spacing) * 2);
+  margin: var(--neo-switch-spacing);
+  overflow: hidden;
+  background-color: var(--neo-switch-rail-background, color-mix(in srgb, transparent, currentcolor 1%));
+  border-radius: var(--neo-switch-border-radius, var(--neo-border-radius-sm));
+  transition: background-color 0.3s ease;
+}
+.neo-switch-toggle {
+  position: absolute;
+  left: 0;
+  display: inline-flex;
+  box-sizing: border-box;
+  height: calc(100% - var(--neo-switch-spacing) * 2);
+  margin: var(--neo-switch-spacing);
+  background: var(--neo-switch-toggle-background, var(--neo-background-color));
+  border-radius: 50%;
+  box-shadow: var(--neo-switch-toggle-box-shadow, var(--neo-box-shadow-convex-2));
+  transition: left 0.3s ease, scale 0.3s ease;
+  aspect-ratio: 1/1;
+}
+.neo-switch-button {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: calc(var(--neo-switch-height) * 1.8);
+  height: var(--neo-switch-height);
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  text-decoration: none;
+  background: transparent;
+  border: var(--neo-switch-border-width, var(--neo-border-width, 1px)) var(--neo-switch-border-color, transparent) solid;
+  border-radius: var(--neo-switch-border-radius, var(--neo-border-radius));
+  outline: none;
+  box-shadow: var(--neo-switch-box-shadow, var(--neo-box-shadow-pressed-2));
+  cursor: pointer;
+  transition: color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
+}
+.neo-switch-button.neo-rounded {
+  border-radius: var(--neo-border-radius-lg);
+}
+.neo-switch-button.neo-rounded .neo-switch-rail {
+  border-radius: var(--neo-border-radius-lg);
+}
+.neo-switch-button.neo-valid {
+  --neo-switch-checked-background: color-mix(in srgb, transparent, var(--neo-switch-valid-color, var(--neo-color-success)) 30%);
+}
+.neo-switch-button.neo-invalid {
+  --neo-switch-checked-background: color-mix(in srgb, transparent, var(--neo-switch-invalid-color, var(--neo-color-error)) 30%);
+}
+.neo-switch-button.neo-checked .neo-switch-rail {
+  background-color: var(--neo-switch-checked-background, color-mix(in srgb, transparent, currentcolor 30%));
+}
+.neo-switch-button.neo-checked .neo-switch-toggle {
+  left: calc(100% - var(--neo-switch-toggle-width) - var(--neo-switch-spacing) * 2);
+}
+.neo-switch-button.neo-disabled {
+  color: var(--neo-text-color-disabled);
+  box-shadow: var(--neo-box-shadow-flat);
+  cursor: not-allowed;
+  opacity: var(--neo-card-opacity-disabled, var(--neo-opacity-disabled));
+}
+.neo-switch-button.neo-disabled, .neo-switch-button.neo-flat {
+  --neo-switch-toggle-spacing: 0.25rem;
+  border-color: var(--neo-input-border-color, var(--neo-border-color));
+}
+.neo-switch-button.neo-disabled .neo-switch-toggle, .neo-switch-button.neo-flat .neo-switch-toggle {
+  background-color: var(--neo-input-border-color, currentcolor);
+  box-shadow: var(--neo-box-shadow-flat);
+}
+.neo-switch-button.neo-disabled .neo-switch-rail, .neo-switch-button.neo-flat .neo-switch-rail {
+  background-color: transparent;
+}
+.neo-switch-button.neo-disabled.neo-checked, .neo-switch-button.neo-flat.neo-checked {
+  background-color: color-mix(in srgb, transparent, currentcolor 10%);
+}
+.neo-switch-button.neo-disabled.neo-checked.neo-valid, .neo-switch-button.neo-flat.neo-checked.neo-valid {
+  background-color: color-mix(in srgb, transparent, var(--neo-switch-valid-color, var(--neo-green-light)) 20%);
+}
+.neo-switch-button.neo-disabled.neo-checked.neo-invalid, .neo-switch-button.neo-flat.neo-checked.neo-invalid {
+  background-color: color-mix(in srgb, transparent, var(--neo-switch-invalid-color, var(--neo-color-error)) 20%);
+}
+.neo-switch-button:focus-visible {
+  border-color: var(--neo-radio-border-color-focused, var(--neo-border-color-focused));
+}
+.neo-switch-button:active .neo-switch-toggle {
+  transform-origin: left center;
+  scale: 1.2 1;
+}
+.neo-switch-button:active.neo-checked .neo-switch-toggle {
+  transform-origin: right center;
+}
+.neo-switch-button.neo-glass {
+  /** Box Shadows raised */
+  --neo-box-shadow-raised-5: var(--neo-glass-box-shadow-raised-5);
+  --neo-box-shadow-raised-4: var(--neo-glass-box-shadow-raised-4);
+  --neo-box-shadow-raised-3: var(--neo-glass-box-shadow-raised-3);
+  --neo-box-shadow-raised-2: var(--neo-glass-box-shadow-raised-2);
+  --neo-box-shadow-raised-1: var(--neo-glass-box-shadow-raised-1);
+  /** Box Shadows inset */
+  --neo-box-shadow-inset-1: var(--neo-glass-box-shadow-inset-1);
+  --neo-box-shadow-inset-2: var(--neo-glass-box-shadow-inset-2);
+  --neo-box-shadow-inset-3: var(--neo-glass-box-shadow-inset-3);
+  --neo-box-shadow-inset-4: var(--neo-glass-box-shadow-inset-4);
+  --neo-box-shadow-inset-5: var(--neo-glass-box-shadow-inset-5);
+  /** Box Shadows pressed */
+  --neo-box-shadow-pressed-1: var(--neo-glass-box-shadow-pressed-1);
+  --neo-box-shadow-pressed-2: var(--neo-glass-box-shadow-pressed-2);
+  --neo-box-shadow-pressed-3: var(--neo-glass-box-shadow-pressed-3);
+  --neo-box-shadow-pressed-4: var(--neo-glass-box-shadow-pressed-4);
+  --neo-box-shadow-pressed-5: var(--neo-glass-box-shadow-pressed-5);
+  /** Box Shadows convex */
+  --neo-box-shadow-convex-1: var(--neo-glass-box-shadow-convex-1);
+  --neo-box-shadow-convex-2: var(--neo-glass-box-shadow-convex-2);
+  --neo-box-shadow-convex-3: var(--neo-glass-box-shadow-convex-3);
+  --neo-box-shadow-convex-4: var(--neo-glass-box-shadow-convex-4);
+  --neo-box-shadow-convex-5: var(--neo-glass-box-shadow-convex-5);
+  /** Skeleton color */
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  background-color: var(--neo-switch-bg-color, var(--neo-glass-background-color));
+  border-color: var(--neo-radio-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+  backdrop-filter: var(--neo-radio-glass-blur, var(--neo-blur-2) var(--neo-saturate-2));
+}
+@starting-style {
+  .neo-switch-button.neo-start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+}
+.neo-switch-button.neo-skeleton {
+  box-shadow: var(--neo-box-shadow-flat);
+  pointer-events: none;
+  --neo-skeleton-color-start: var(--neo-skeleton-color);
+  --neo-skeleton-color-end: oklch(from var(--neo-skeleton-color) calc(l - var(--neo-skeleton-color-step, 0.05)) c h);
+  color: var(--neo-skeleton-color-start);
+  background-color: var(--neo-skeleton-color-start);
+  border-color: var(--neo-skeleton-color-start);
+  transition: background-color 1s ease, color 1s ease, border-color 1s ease;
+  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
+  animation-delay: 1s;
+}
+.neo-switch-button.neo-skeleton::before, .neo-switch-button.neo-skeleton::after,
+.neo-switch-button.neo-skeleton :global(> *::before),
+.neo-switch-button.neo-skeleton :global(> *::after),
+.neo-switch-button.neo-skeleton :global(> *) {
+  visibility: hidden;
+  pointer-events: none;
+}
+@keyframes skeleton {
+  0% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  40% {
+    color: var(--neo-skeleton-color-end);
+    background-color: var(--neo-skeleton-color-end);
+    border-color: var(--neo-skeleton-color-end);
+  }
+  80% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  100% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+}
+.neo-switch-suffix {
+  width: 1rem;
+  height: 1rem;
+  margin-bottom: 0.125rem;
+  margin-left: 0.5rem;
+}</style>

package/dist/inputs/NeoSwitch.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoSwitchProps } from './neo-switch.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoSwitch: $$__sveltets_2_IsomorphicComponent<NeoSwitchProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "group" | "ref" | "checked" | "focused" | "indeterminate" | "touched" | "dirty" | "valid" | "labelRef">;
+type NeoSwitch = InstanceType<typeof NeoSwitch>;
+export default NeoSwitch;