@dvcol/neo-svelte 0.1.2 → 0.1.4

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

@@ -1,4 +1,4 @@
-import { type NeoInputMethods, type NeoTextareaProps } from './neo-input.model.js';
+import { type NeoInputMethods, type NeoTextareaProps } from './common/neo-input.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;
@@ -22,6 +22,9 @@ declare const NeoTextarea: $$__sveltets_2_IsomorphicComponent<NeoTextareaProps,
     /**
        * Clear the input state
        */ clear: NeoInputMethods<HTMLTextAreaElement>["clear"];
-}, "value" | "ref" | "valid" | "dirty" | "touched" | "labelRef">;
+    /**
+       * Change the value of the input
+       */ change: NeoInputMethods<HTMLTextAreaElement>["change"];
+}, "value" | "ref" | "hovered" | "focused" | "touched" | "dirty" | "valid" | "labelRef" | "afterRef">;
 type NeoTextarea = InstanceType<typeof NeoTextarea>;
 export default NeoTextarea;

package/dist/inputs/common/NeoAffix.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import type { NeoAffixProps } from './neo-affix.model.js';
+
+  import IconAlert from '../../icons/IconAlert.svelte';
+  import IconCircleLoading from '../../icons/IconCircleLoading.svelte';
+  import IconClear from '../../icons/IconClear.svelte';
+  import IconConfirm from '../../icons/IconConfirm.svelte';
+  import { leaveDefaultTransition } from '../../utils/transition.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // States
+    ref = $bindable(),
+    loading,
+    close,
+    valid,
+    skeleton,
+    disabled,
+
+    // Styles
+    size = '1.25rem',
+
+    // Other props
+    closeProps,
+    ...rest
+  }: NeoAffixProps = $props();
+  /* eslint-enable prefer-const */
+
+  const leave = $derived(!loading && !close && valid === undefined ? undefined : leaveDefaultTransition);
+</script>
+
+<span bind:this={ref} class:neo-affix-container={true} class:neo-skeleton={skeleton} style:--neo-affix-size={size} role="none" {...rest}>
+  {#if loading}
+    <span class="neo-affix-loading" out:fade={leave}>
+      <IconCircleLoading width={size} height={size} />
+    </span>
+  {:else if close && !disabled}
+    <button {disabled} class:neo-affix-clear={true} aria-label="clear" in:fade out:fade={leave} {...closeProps}>
+      <IconClear width={size} height={size} />
+    </button>
+  {:else}
+    <span class="neo-affix-validation" data-valid={valid} in:fade={leave}>
+      {#if valid !== undefined}
+        {#if valid}
+          <IconConfirm width={size} height={size} />
+        {:else}
+          <IconAlert width={size} height={size} />
+        {/if}
+      {/if}
+    </span>
+  {/if}
+</span>
+
+<style>.neo-affix-validation,
+.neo-affix-loading,
+.neo-affix-clear {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: var(--neo-affix-size, 1.25rem);
+  height: var(--neo-affix-size, 1.25rem);
+  font: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.neo-affix-container {
+  display: inline-grid;
+  grid-template-areas: "affix";
+  align-items: center;
+  box-sizing: border-box;
+  min-width: max-content;
+  min-height: max-content;
+  padding: var(--neo-affix-padding, 0.75rem);
+  border: none;
+}
+.neo-affix-container > * {
+  grid-area: affix;
+}
+.neo-affix-container .neo-affix-validation {
+  display: inline-flex;
+  align-items: center;
+}
+.neo-affix-container .neo-affix-validation[data-valid=true] {
+  color: var(--neo-affix-validation-color-success, var(--neo-color-success));
+}
+.neo-affix-container .neo-affix-validation[data-valid=false] {
+  color: var(--neo-affix-validation-color-error, var(--neo-color-error));
+}
+.neo-affix-container .neo-affix-clear {
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  color: var(--neo-affix-clear-color, inherit);
+  background-color: var(--neo-background-color-darker);
+  border: none;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  cursor: pointer;
+  transition: opacity 0.2s ease-in, color 0.3s ease, background-color 0.3s ease;
+}
+.neo-affix-container .neo-affix-clear :global(svg) {
+  width: 100%;
+  height: 100%;
+  margin: -0.05rem;
+  padding: 0.05rem;
+}
+.neo-affix-container .neo-affix-clear:focus-visible {
+  color: var(--neo-close-color-focused, rgba(255, 0, 0, 0.5));
+  background-color: var(--neo-close-bg-color-focused, rgba(255, 0, 0, 0.05));
+}
+.neo-affix-container .neo-affix-clear:hover {
+  color: var(--neo-close-color-hover, rgba(255, 0, 0, 0.75));
+  background-color: var(--neo-close-bg-color-hover, rgba(255, 0, 0, 0.07));
+}
+.neo-affix-container .neo-affix-clear:active {
+  color: var(--neo-affix-active-color, var(--neo-text-color-hover-active));
+  scale: 0.9;
+}
+.neo-affix-container .neo-affix-clear:disabled {
+  color: var(--neo-text-color-disabled);
+  cursor: not-allowed;
+  scale: 1;
+}
+.neo-affix-container.neo-skeleton > * {
+  border-radius: 50%;
+  --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-affix-container.neo-skeleton > *::before, .neo-affix-container.neo-skeleton > *::after,
+.neo-affix-container.neo-skeleton > * :global(> *::before),
+.neo-affix-container.neo-skeleton > * :global(> *::after),
+.neo-affix-container.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);
+  }
+}</style>

package/dist/inputs/common/NeoAffix.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoAffixProps } from './neo-affix.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 NeoAffix: $$__sveltets_2_IsomorphicComponent<NeoAffixProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NeoAffix = InstanceType<typeof NeoAffix>;
+export default NeoAffix;

package/dist/inputs/common/NeoBaseInput.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  import type { EventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+
+  import type { SvelteEvent } from '../../utils/html-element.utils.js';
+
+  import { type NeoBaseInputProps, type NeoInputMethods, type NeoInputState, type NeoInputValue } from './neo-input.model.js';
+  import { toAction, toActionProps } from '../../utils/action.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // States
+    id,
+    ref = $bindable(),
+
+    files = $bindable(), // type="file"
+    value = $bindable(),
+    group = $bindable(), // type="radio"
+    checked = $bindable(), // type="checkbox"
+    indeterminate = $bindable(), // type="checkbox"
+
+    initial = $bindable(),
+    touched = $bindable(false),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    focused = $bindable(false),
+    disabled,
+    readonly,
+    nullable = true,
+
+    dirtyOnInput,
+    dirtyOnBlur,
+    validateOnInput,
+    validateOnBlur,
+    validationMessage = $bindable(),
+
+    // Styles
+    before,
+    after,
+
+    // Actions
+    use,
+
+    // Events
+    onblur,
+    onfocus,
+    oninput,
+    onchange,
+    oninvalid,
+
+    onclear,
+    onmark,
+
+    // Other props
+    ...rest
+  }: NeoBaseInputProps = $props();
+  /* eslint-enable prefer-const */
+
+  const getValue = () => {
+    if (rest.type === 'file') return files;
+    if (rest.type === 'checkbox' || rest.type === 'radio') return checked;
+    return value;
+  };
+
+  const typedValue = $derived(getValue());
+  const hasValue = () => {
+    if (rest?.type === 'file') return !!files?.length;
+    if (rest?.type === 'checkbox' || rest.type === 'radio') return checked !== undefined;
+    if (typeof value === 'string') return !!value.length;
+    return value !== undefined && value !== null;
+  };
+  const fallback = () => {
+    if (nullable) return value;
+    if (rest?.defaultValue === undefined) return value;
+    if (rest.type && ['file', 'checkbox', 'radio'].includes(rest.type)) return value;
+    if (hasValue()) return value;
+    value = rest?.defaultValue;
+    return value;
+  };
+
+  const reset = () => {
+    if (rest.type === 'checkbox' || rest.type === 'radio') {
+      checked = rest?.defaultChecked ?? rest?.defaultValue ?? false;
+      if (rest.type === 'checkbox') indeterminate = false;
+      return;
+    }
+    value = nullable ? '' : (rest?.defaultValue ?? '');
+    if (rest.type === 'file') files = new DataTransfer().files;
+  };
+
+  const currentState = $derived<NeoInputState<HTMLInputElement>>({ touched, dirty, valid, value: typedValue, initial });
+
+  const validate: NeoInputMethods<HTMLInputElement>['validate'] = (update: { dirty?: boolean; valid?: boolean } = { dirty: true, valid: true }) => {
+    if (update.dirty) dirty = typedValue !== initial;
+    if (!update.valid) return { ...currentState };
+    valid = ref?.checkValidity();
+    validationMessage = ref?.validationMessage;
+    return { ...currentState };
+  };
+
+  /**
+   * Change the state of the input
+   * @param state
+   */
+  export const mark: NeoInputMethods<HTMLInputElement>['mark'] = (state: NeoInputState<HTMLInputElement>) => {
+    if (state.touched !== undefined) touched = state.touched;
+    if (state.valid !== undefined) valid = state.valid;
+    if (state.dirty === undefined) return onmark?.({ ...currentState });
+    dirty = state.dirty;
+    if (!dirty) initial = typedValue;
+    return onmark?.({ ...currentState });
+  };
+
+  const focus = () => {
+    if (focused || disabled || readonly) return;
+    ref?.focus();
+  };
+
+  /**
+   * Clear the input state
+   */
+  export const clear: NeoInputMethods<HTMLInputElement>['clear'] = async (
+    state?: NeoInputState<HTMLInputElement>,
+    event?: InputEvent | SvelteEvent<InputEvent>,
+  ) => {
+    reset();
+    await tick();
+    focus();
+    if (state) mark({ touched: false, dirty: false, ...state });
+    else validate();
+    onclear?.({ ...currentState }, event);
+    if (event) return ref?.dispatchEvent(event);
+    const _event: InputEventInit = { bubbles: true, cancelable: false, data: value, inputType: 'clear' };
+    oninput?.(new InputEvent('input', _event) as SvelteEvent<InputEvent, any>);
+  };
+
+  /**
+   * Change the state of the input
+   */
+  export const change: NeoInputMethods<HTMLInputElement>['change'] = (_value: NeoInputValue<HTMLInputElement>, event?: InputEvent) => {
+    if (rest.type === 'checkbox' || rest.type === 'radio') {
+      checked = !!_value;
+    } else {
+      value = _value?.toString();
+    }
+    focus();
+    if (event) ref?.dispatchEvent(event);
+    return validate();
+  };
+
+  const onFocus: FocusEventHandler<HTMLInputElement> = e => {
+    focused = true;
+    touched = true;
+    onfocus?.(e);
+  };
+
+  const onBlur: FocusEventHandler<HTMLInputElement> = e => {
+    focused = false;
+    validate({ dirty: dirtyOnBlur, valid: validateOnBlur });
+    onblur?.(e);
+  };
+
+  const onInput: FormEventHandler<HTMLInputElement> = e => {
+    touched = true;
+    validate({ dirty: dirtyOnInput, valid: validateOnInput });
+    oninput?.(e);
+  };
+
+  const onChange: FormEventHandler<HTMLInputElement> = e => {
+    touched = true;
+    validate();
+    fallback();
+    onchange?.(e);
+  };
+
+  const onInvalid: EventHandler<Event, HTMLInputElement> = e => {
+    valid = false;
+    validationMessage = ref?.validationMessage;
+    e.preventDefault();
+    oninvalid?.(e);
+  };
+
+  $effect(() => {
+    if (!ref) return;
+    Object.assign(ref, { mark, clear, change, validate });
+  });
+
+  $effect(() => {
+    if (group === undefined) return;
+    checked = !!ref?.checked;
+  });
+
+  const useFn = $derived(toAction(use));
+  const useProps = $derived(toActionProps(use));
+</script>
+
+{#if rest.type === 'file'}
+  <input
+    aria-invalid={valid === undefined ? undefined : !valid}
+    type="file"
+    {id}
+    {disabled}
+    {readonly}
+    bind:this={ref}
+    bind:files
+    bind:value
+    bind:group
+    bind:indeterminate
+    class:neo-input={true}
+    class:neo-after={after}
+    class:neo-before={before}
+    onblur={onBlur}
+    onfocus={onFocus}
+    oninput={onInput}
+    onchange={onChange}
+    oninvalid={onInvalid}
+    use:useFn={useProps}
+    {...rest}
+  />
+{:else if rest.type === 'checkbox'}
+  <input
+    aria-invalid={valid === undefined ? undefined : !valid}
+    type="checkbox"
+    {id}
+    {disabled}
+    {readonly}
+    {value}
+    bind:this={ref}
+    bind:group
+    bind:checked
+    bind:indeterminate
+    class:neo-input={true}
+    class:neo-after={after}
+    class:neo-before={before}
+    onblur={onBlur}
+    onfocus={onFocus}
+    oninput={onInput}
+    onchange={onChange}
+    oninvalid={onInvalid}
+    use:useFn={useProps}
+    {...rest}
+  />
+{:else if rest.type === 'radio'}
+  <input
+    type="radio"
+    {id}
+    {disabled}
+    {readonly}
+    {value}
+    bind:this={ref}
+    bind:group
+    bind:indeterminate
+    class:neo-input={true}
+    class:neo-after={after}
+    class:neo-before={before}
+    onblur={onBlur}
+    onfocus={onFocus}
+    oninput={onInput}
+    onchange={onChange}
+    oninvalid={onInvalid}
+    use:useFn={useProps}
+    {...rest}
+  />
+{:else}
+  <input
+    aria-invalid={valid === undefined ? undefined : !valid}
+    {id}
+    {disabled}
+    {readonly}
+    bind:this={ref}
+    bind:value
+    bind:group
+    bind:indeterminate
+    class:neo-input={true}
+    class:neo-after={after}
+    class:neo-before={before}
+    onblur={onBlur}
+    onfocus={onFocus}
+    oninput={onInput}
+    onchange={onChange}
+    oninvalid={onInvalid}
+    use:useFn={useProps}
+    {...rest}
+  />
+{/if}
+
+<style>.neo-input {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-self: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: var(--neo-input-min-width, 1ch);
+  max-width: 100%;
+  min-height: var(--neo-input-min-height, fit-content);
+  padding: var(--neo-input-padding, 0.75rem);
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--neo-input-border-radius, var(--neo-border-radius));
+  outline: none;
+  transition: color 0.3s ease, margin 0.3s ease, padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease-out;
+}
+.neo-input.neo-before {
+  padding-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.neo-input.neo-after {
+  padding-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.neo-input::placeholder {
+  color: var(--neo-input-placeholder-color, var(--neo-text-color-disabled));
+  transition: opacity 0.3s ease;
+}
+.neo-input:read-only {
+  cursor: inherit;
+}
+.neo-input:disabled {
+  color: var(--neo-text-color-disabled);
+  cursor: not-allowed;
+}
+.neo-input[type=password]:not(:placeholder-shown) {
+  letter-spacing: 0.2em;
+  -webkit-text-stroke-width: 0.15em;
+}
+@supports (-webkit-touch-callout: none) {
+  .neo-input[type=password]:not(:placeholder-shown) {
+    font: small-caption;
+    font-size: var(--neo-font-size-xs, 0.75rem);
+  }
+}</style>

package/dist/inputs/common/NeoBaseInput.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type NeoBaseInputProps, type NeoInputMethods } from './neo-input.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 NeoBaseInput: $$__sveltets_2_IsomorphicComponent<NeoBaseInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    /**
+       * Change the state of the input
+       * @param state
+       */ mark: NeoInputMethods<HTMLInputElement>["mark"];
+    /**
+       * Clear the input state
+       */ clear: NeoInputMethods<HTMLInputElement>["clear"];
+    /**
+       * Change the state of the input
+       */ change: NeoInputMethods<HTMLInputElement>["change"];
+}, "value" | "group" | "ref" | "checked" | "focused" | "validationMessage" | "files" | "indeterminate" | "touched" | "dirty" | "valid" | "initial">;
+type NeoBaseInput = InstanceType<typeof NeoBaseInput>;
+export default NeoBaseInput;