@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/progress/neo-progress-service.svelte.js

@@ -0,0 +1,157 @@
+import { getUUID } from '@dvcol/common-utils/common/string';
+import { getContext, setContext } from 'svelte';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { NeoProgressStatus } from './neo-progress.model.js';
+import { NeoErrorProgressContextNotFound } from '../utils/error.utils.js';
+/**
+ * Queuing service to keep track of concurrent call to progress bar
+ */
+export class NeoProgressService {
+    /** State of the progress bar */
+    #context;
+    /** Set of active progress IDs */
+    #active = new SvelteSet();
+    /** Queue of progress IDs with their timeout */
+    #queue = new SvelteMap();
+    /** Options for the progress service */
+    #options;
+    get context() {
+        return this.#context;
+    }
+    get value() {
+        return this.context.value;
+    }
+    get buffer() {
+        return this.context.buffer;
+    }
+    get status() {
+        return this.context.status;
+    }
+    get active() {
+        return this.#active;
+    }
+    constructor(context, options = {}) {
+        this.#context = context;
+        this.#options = options;
+    }
+    /**
+     * Synchronizes the progress state working with the current active IDs set.
+     */
+    sync() {
+        if (this.status === NeoProgressStatus.Active)
+            return;
+        if (this.status === NeoProgressStatus.Indeterminate)
+            return;
+        this.#active.clear();
+        return this.active;
+    }
+    /**
+     * Starts the progress bar with the given ID and options.
+     * If the progress bar is already active, it resets it with the provided options instead.
+     */
+    #start(id, opts) {
+        if (this.status === NeoProgressStatus.Active)
+            return this.context.reset(true, opts);
+        return this.context.start(opts);
+    }
+    /**
+     * Dequeues the progress bar with the given ID if it exists in the queue.
+     * @param id
+     * @private
+     */
+    #deque(id) {
+        const timeout = this.#queue.get(id);
+        if (timeout === undefined)
+            return;
+        clearTimeout(timeout);
+        this.#queue.delete(id);
+    }
+    /**
+     * Deletes the progress bar with the given ID from the active set and dequeues it if it exists.
+     */
+    #delete(id) {
+        this.#active.delete(id);
+        this.#deque(id);
+    }
+    /**
+     * Generates a unique ID for the progress bar.
+     */
+    #generateId() {
+        return this.#options.uuid?.() ?? getUUID();
+    }
+    /**
+     * Starts a new progress bar with the given options.
+     * If an ID is provided, it will be used to track the progress bar.
+     * If no ID is provided, a new UUID will be generated.
+     * If a delay is provided, the progress bar will start after the specified delay.
+     */
+    start(opts, { id = this.#generateId(), delay = this.#options.delay } = {}) {
+        this.sync();
+        this.#delete(id); // debounce queue if delay, skip queue if not
+        if (!delay) {
+            this.#active.add(id);
+            this.#start(id, opts);
+        }
+        else {
+            this.#queue.set(id, setTimeout(() => {
+                this.#active.add(id);
+                this.#start(id, opts);
+                this.#queue.delete(id);
+            }, delay));
+        }
+        return id;
+    }
+    cancel(id, force = !id) {
+        this.sync();
+        if (id)
+            this.#delete(id);
+        if (force || this.#active.size === 0)
+            void this.context.cancel();
+        return id;
+    }
+    complete(id, force = !id) {
+        this.sync();
+        if (id)
+            this.#delete(id);
+        if (force || this.#active.size === 0)
+            void this.context.complete();
+        return id;
+    }
+    error(id, force = !id) {
+        this.sync();
+        if (id)
+            this.#delete(id);
+        if (force || this.#active.size === 0)
+            void this.context.complete({ state: NeoProgressStatus.Error });
+        return id;
+    }
+    success(id, force = !id) {
+        this.sync();
+        if (id)
+            this.#delete(id);
+        if (force || this.#active.size === 0)
+            void this.context.complete({ state: NeoProgressStatus.Success });
+        return id;
+    }
+    warning(id, force = !id) {
+        this.sync();
+        if (id)
+            this.#delete(id);
+        if (force || this.#active.size === 0)
+            void this.context.complete({ state: NeoProgressStatus.Warning });
+        return id;
+    }
+}
+const NeoProgressContextSymbol = Symbol('NeoProgressContext');
+export function getProgressContext() {
+    return getContext(NeoProgressContextSymbol);
+}
+export function setProgressContext(context) {
+    return setContext(NeoProgressContextSymbol, context);
+}
+export function useNeoProgressService() {
+    const context = getProgressContext();
+    if (!context)
+        throw new NeoErrorProgressContextNotFound();
+    return new NeoProgressService(context);
+}

package/dist/progress/neo-progress.model.d.ts

@@ -3,11 +3,16 @@ import type { Color } from '../utils/colors.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
 import type { SizeInput } from '../utils/style.utils.js';
 export declare const NeoProgressStatus: {
+    readonly Indeterminate: "indeterminate";
     readonly Active: "active";
     readonly Idle: "idle";
     readonly Paused: "paused";
+    readonly Cancelled: "cancelled";
+    readonly Timeout: "timeout";
     readonly Completed: "completed";
-    readonly Indeterminate: "indeterminate";
+    readonly Error: "error";
+    readonly Success: "success";
+    readonly Warning: "warning";
 };
 export type NeoProgressStatuses = (typeof NeoProgressStatus)[keyof typeof NeoProgressStatus];
 export declare const NeoProgressDirection: {
@@ -17,7 +22,7 @@ export declare const NeoProgressDirection: {
     readonly Bottom: "bottom";
 };
 export type NeoProgressDirections = (typeof NeoProgressDirection)[keyof typeof NeoProgressDirection];
-export interface NeoProgressContext {
+export interface NeoProgressState {
     /**
      * The current state of the progress if controlled.
      */
@@ -63,6 +68,14 @@ export interface NeoProgressContext {
      * Optional timeout in milliseconds to complete the progress, regardless of value, buffer, tick rate or step size.
      */
     timeout?: number;
+    /**
+     * If true, the progress will start automatically when the component is mounted.
+     */
+    autoStart?: boolean | NeoProgressStart;
+    /**
+     * If true, the progress will complete automatically when the component is unmounted.
+     */
+    autoComplete?: boolean | NeoProgressComplete;
     /**
      * The color or background to use for the progress.
      * If color is an array, the first color will be used for the low threshold, the second for the middle and the third for the high threshold.
@@ -78,7 +91,58 @@ export interface NeoProgressContext {
      */
     direction?: NeoProgressDirections;
 }
-export type NeoProgressProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = NeoProgressContext & {
+export interface NeoProgressMethods {
+    /**
+     * Starts a controlled progress and sets the state to {@link NeoProgressStatus.Active}.
+     *
+     * Once the progress reaches the max value, it will either switch to a {@link NeoProgressStatus.Completed} state or a {@link NeoProgressStatus.Indeterminate} state.
+     *
+     * @param options Stat options
+     * @param options.pending Whether to switch to a pending indeterminate state when max is reached. (end as {@link NeoProgressStatus.Indeterminate})
+     * @param options.expire Whether to switch to a completed state when timeout is reached. (ends as {@link NeoProgressStatus.Timeout})
+     * @param options.indeterminate Whether to start the progress in an indeterminate state. (starts as {@link NeoProgressStatus.Indeterminate})
+     * @param options.value A beginning value for the progress.
+     * @param options.buffer A beginning buffer value for the progress.
+     */
+    start: (options?: NeoProgressStart) => undefined | NeoProgressStatuses;
+    /**
+     * Stops the progress and sets the state to {@link NeoProgressStatus.Paused}.
+     */
+    stop: () => undefined | NeoProgressStatuses;
+    /**
+     * Resets the progress to the minimum value.
+     * If restart is true, the progress will start again and the state will be set to {@link NeoProgressStatus.Active}.
+     * If restart is false, the state will be set to {@link NeoProgressStatus.Idle}.
+     * @param restart Whether to restart the progress. (defaults to true if state is {@link NeoProgressStatus.Active}, false otherwise)
+     * @param start Optional starting config for the progress if restart is true.
+     */
+    reset: (restart?: boolean, start?: NeoProgressStart) => undefined | NeoProgressStatuses;
+    /**
+     * Cancels timeout and interval and sets value and buffer;
+     * Also sets the state to {@link NeoProgressStatus.Idle} if value is as or under the minimum, {@link NeoProgressStatus.Paused} otherwise.
+     * @param options Change options
+     * @param options.value The new value of the progress.
+     * @param options.buffer The new buffer value of the progress.
+     */
+    change: (options?: NeoProgressChange) => undefined | NeoProgressStatuses;
+    /**
+     * Sets the progress to the maximum value.
+     * If pending is true, the state will be set to {@link NeoProgressStatus.Indeterminate}.
+     * If pending is false, the state will be set to {@link NeoProgressStatus.Completed}.
+     * @param options Complete options
+     * @param options.pending whether to set the state to pending. (ends as {@link NeoProgressProps.indeterminate})
+     * @param options.state whether to set the status on completion ({@link NeoProgressStatus})
+     * @param options.defer Whether to await indeterminate animation before completing. (defaults to true)
+     */
+    complete: (options?: NeoProgressComplete) => undefined | NeoProgressStatuses | Promise<undefined | NeoProgressStatuses>;
+    /**
+     * Reset the progress and sets the state to {@link NeoProgressStatus.Cancelled}.
+     * @param defer Whether to await indeterminate animation before cancelling. (defaults to true)
+     */
+    cancel: (defer?: boolean) => undefined | NeoProgressStatuses | Promise<undefined | NeoProgressStatuses>;
+}
+export type NeoProgressContext = NeoProgressState & NeoProgressMethods;
+export type NeoProgressProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = NeoProgressState & {
     /**
      * Optional content to display inside the progress.
      */
@@ -122,45 +186,38 @@ export type NeoProgressProps<Tag extends keyof HTMLElementTagNameMap = 'div'> =
      * @default true
      */
     track?: boolean;
-} & HTMLRefProps<HTMLElementTagNameMap[Tag]> & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
-export interface NeoProgressMethods {
-    /**
-     * Starts a controlled progress and sets the state to {@link NeoProgressStatus.Active}.
-     *
-     * Once the progress reaches the max value, it will either switch to a {@link NeoProgressStatus.Completed} state or a {@link NeoProgressStatus.Indeterminate} state.
-     *
-     * @param pending Whether to switch to a pending indeterminate state when max is reached. (defaults to {@link NeoProgressProps.indeterminate})
-     * @param expire Whether to switch to a completed state when timeout is reached. (defaults to {@link NeoProgressProps.timeout})
-     */
-    start: (pending?: boolean, expire?: number) => void;
-    /**
-     * Stops the progress and sets the state to {@link NeoProgressStatus.Idle}.
-     */
-    stop: () => void;
-    /**
-     * Resets the progress to the minimum value.
-     * If restart is true, the progress will start again and the state will be set to {@link NeoProgressStatus.Active}.
-     * If restart is false, the state will be set to {@link NeoProgressStatus.Idle}.
-     * @param restart Whether to restart the progress. (defaults to true if state is {@link NeoProgressStatus.Active}, false otherwise)
-     */
-    reset: (restart?: boolean) => void;
     /**
-     * Sets the progress to the maximum value.
-     * If pending is true, the state will be set to {@link NeoProgressStatus.Indeterminate}.
-     * If pending is false, the state will be set to {@link NeoProgressStatus.Completed}.
-     * @param pending whether to set the state to pending. (defaults to {@link NeoProgressProps.indeterminate})
-     */
-    complete: (pending?: boolean) => void;
-    /**
-     * Reset the progress and sets the state to {@link NeoProgressStatus.Paused}.
-     */
-    cancel: () => void;
-    /**
-     * Cancels timeout and interval and sets value and buffer;
-     * Also sets the state to {@link NeoProgressStatus.Idle}.
-     * @param value The new value of the progress.
-     * @param buffer The new buffer value of the progress.
+     * If true, the progress will change immediately without animation.
+     * @default false
      */
-    change: (value?: number, buffer?: number) => void;
+    immediate?: boolean;
+} & HTMLRefProps<HTMLElementTagNameMap[Tag]> & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
+export interface NeoProgressChange {
+    /** The new value of the progress. */
+    value?: number;
+    /** The new buffer value of the progress. */
+    buffer?: number;
+    /** State override. If omitted {@link NeoProgressStatus.Idle} will be set if value <= min, {@link NeoProgressStatus.Paused} otherwise. */
+    state?: NeoProgressStatuses;
+}
+export interface NeoProgressStart {
+    /** Whether to switch to a pending indeterminate state when max is reached. (end as {@link NeoProgressStatus.Indeterminate}) */
+    pending?: boolean;
+    /** Whether to switch to a completed state when timeout is reached. (ends as {@link NeoProgressStatus.Timeout}) */
+    expire?: number;
+    /** Whether to start the progress in an indeterminate state. (starts as {@link NeoProgressStatus.Indeterminate}) */
+    indeterminate?: boolean;
+    /** A beginning value for the progress. */
+    value?: number;
+    /** A beginning buffer value for the progress. */
+    buffer?: number;
+}
+export interface NeoProgressComplete {
+    /** Whether to set the state to pending. (ends as {@link NeoProgressStatus.Indeterminate}) */
+    pending?: boolean;
+    /** Whether to set the status on completion ({@link NeoProgressStatus}) */
+    state?: NeoProgressStatuses;
+    /** Whether to await indeterminate animation before completing. (defaults to true) */
+    defer?: boolean;
 }
 export type NeoProgressHTMLElement<Tag extends keyof HTMLElementTagNameMap = 'div'> = HTMLElementTagNameMap[Tag] & NeoProgressMethods;

package/dist/progress/neo-progress.model.js

@@ -1,9 +1,14 @@
 export const NeoProgressStatus = {
+    Indeterminate: 'indeterminate',
     Active: 'active',
     Idle: 'idle',
     Paused: 'paused',
+    Cancelled: 'cancelled',
+    Timeout: 'timeout',
     Completed: 'completed',
-    Indeterminate: 'indeterminate',
+    Error: 'error',
+    Success: 'success',
+    Warning: 'warning',
 };
 export const NeoProgressDirection = {
     Right: 'right',

package/dist/providers/NeoRememberSelector.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { NeoRememberSelectorProps } from './neo-remember-selector.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoIconSave from '../icons/NeoIconSave.svelte';
+  import NeoIconSaveOff from '../icons/NeoIconSaveOff.svelte';
+  import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+
+  const {
+    // state
+    label = 'Remember',
+
+    // Button props
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    // Other props
+    ...rest
+  }: NeoRememberSelectorProps = $props();
+
+  const context = useNeoThemeContext();
+  const remember = $derived(context.remember);
+  const onRemember = () => context.update({ remember: !remember });
+</script>
+
+<NeoButton
+  aria-label="Remember theme settings"
+  title="Remember theme settings"
+  toggle
+  checked={remember}
+  onclick={onRemember}
+  {label}
+  {...rest}
+>
+  {#snippet icon()}
+    {#if remember}
+      <NeoIconSave />
+    {:else}
+      <NeoIconSaveOff />
+    {/if}
+  {/snippet}
+</NeoButton>

package/dist/providers/NeoRememberSelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoRememberSelectorProps } from './neo-remember-selector.model.js';
+declare const NeoRememberSelector: import("svelte").Component<NeoRememberSelectorProps, {}, "ref" | "hovered" | "focused">;
+type NeoRememberSelector = ReturnType<typeof NeoRememberSelector>;
+export default NeoRememberSelector;

package/dist/providers/NeoResetSelector.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { NeoResetSelectorProps } from './neo-reset-selector.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoIconImage from '../icons/NeoIconImage.svelte';
+  import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+
+  const {
+    // state
+    label = 'Reset',
+
+    // Button props
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    // Other props
+    ...rest
+  }: NeoResetSelectorProps = $props();
+
+  const context = useNeoThemeContext();
+
+  const reset = $derived(context.reset);
+
+  const onReset = () => context.update({ reset: !reset });
+</script>
+
+<NeoButton
+  aria-label="Toggle {reset ? 'off' : 'on'} style reset"
+  title="Toggle {reset ? 'off' : 'on'} style reset"
+  toggle
+  checked={reset}
+  onclick={onReset}
+  {label}
+  {...rest}
+>
+  {#snippet icon()}
+    <NeoIconImage />
+  {/snippet}
+</NeoButton>

package/dist/providers/NeoResetSelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoResetSelectorProps } from './neo-reset-selector.model.js';
+declare const NeoResetSelector: import("svelte").Component<NeoResetSelectorProps, {}, "ref" | "hovered" | "focused">;
+type NeoResetSelector = ReturnType<typeof NeoResetSelector>;
+export default NeoResetSelector;

package/dist/providers/NeoSourceSelector.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { NeoSourceSelectorProps } from './neo-source-selector.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoIconSun from '../icons/NeoIconSun.svelte';
+  import { useNeoThemeContext } from './neo-theme-provider-context.svelte.js';
+  import { NeoSource } from './neo-theme-provider.model.js';
+
+  const {
+    // state
+    label = 'Source',
+
+    // Button props
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    // Other props
+    ...rest
+  }: NeoSourceSelectorProps = $props();
+
+  const context = useNeoThemeContext();
+
+  const source = $derived(context.source);
+
+  const sources = Object.values(NeoSource);
+  const sourceMap = { ...sources };
+  const sourceIndexMap = Object.fromEntries(Object.entries(sourceMap).map(([k, v]) => [v, Number(k)]));
+
+  let angle = $state(sourceIndexMap[context.source] * 90);
+  const onCycleSource = () => {
+    angle += 90;
+    context.update({ source: sourceMap[(sourceIndexMap[source] + 1) % sources.length] });
+  };
+
+</script>
+
+<NeoButton
+  aria-label="Cycle light source origin"
+  title="Cycle light source origin"
+  checked
+  onclick={onCycleSource}
+  {label}
+  {...rest}
+>
+  {#snippet icon()}
+    <span class="neo-source-icon" style:--neo-source-rotate="{angle}deg">
+      <NeoIconSun />
+    </span>
+  {/snippet}
+</NeoButton>
+
+<style>.neo-source-icon {
+  overflow: hidden;
+  border-radius: var(--neo-theme-selector-border-radius, var(--neo-border-radius-xxl));
+  rotate: var(--neo-source-rotate, 0);
+  transition: rotate 0.5s ease;
+}
+.neo-source-icon :global(> svg) {
+  width: 1.25rem;
+  height: 1.25rem;
+  translate: -30% -30%;
+}</style>

package/dist/providers/NeoSourceSelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NeoSourceSelectorProps } from './neo-source-selector.model.js';
+declare const NeoSourceSelector: import("svelte").Component<NeoSourceSelectorProps, {}, "ref" | "hovered" | "focused">;
+type NeoSourceSelector = ReturnType<typeof NeoSourceSelector>;
+export default NeoSourceSelector;

package/dist/providers/NeoThemeProvider.svelte

@@ -1,29 +1,44 @@
 <script lang="ts">
   import type { NeoThemeProviderProps } from './neo-theme-provider.model.js';
 
-  import { onDestroy } from 'svelte';
-
   import { setNeoThemeContext } from './neo-theme-provider-context.svelte.js';
 
-  import './neo-theme-provider.scss';
-
-  /* eslint-disable prefer-const -- necessary for binding checked */
   let {
     // Snippets
     children,
 
     // States
+    ref = $bindable(),
+    tag = 'div',
     reset,
     theme,
     source,
     remember,
     target,
+
+    // Other props
+    ...rest
   }: NeoThemeProviderProps = $props();
-  /* eslint-enable prefer-const */
 
-  const context = setNeoThemeContext({ reset, theme, source, remember, root: target });
-  $effect(() => context.update({ reset, theme, source, remember, root: target }));
-  onDestroy(() => context.destroy());
+  const context = setNeoThemeContext({ reset, theme, source, remember, root: target === 'self' ? ref : target });
+  $effect.pre(() => {
+    context.update({ reset, theme, source, remember, root: target === 'self' ? ref : target });
+    return () => context.destroy();
+  });
 </script>
 
-{@render children?.(context.state)}
+{#if target === 'self'}
+  <svelte:element class:neo-theme-provider={true} this={tag} bind:this={ref} {...rest}>
+    {#if context.ready}
+      {@render children?.(context.state)}
+    {/if}
+  </svelte:element>
+{:else if context.ready}
+  {@render children?.(context.state)}
+{/if}
+
+<style>.neo-theme-provider {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}</style>

package/dist/providers/NeoThemeProvider.svelte.d.ts

@@ -1,5 +1,4 @@
 import type { NeoThemeProviderProps } from './neo-theme-provider.model.js';
-import './neo-theme-provider.scss';
-declare const NeoThemeProvider: import("svelte").Component<NeoThemeProviderProps, {}, "">;
+declare const NeoThemeProvider: import("svelte").Component<NeoThemeProviderProps<"div">, {}, "ref">;
 type NeoThemeProvider = ReturnType<typeof NeoThemeProvider>;
 export default NeoThemeProvider;