@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/common/neo-label.model.js

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

package/dist/inputs/common/neo-validation.model.d.ts

@@ -0,0 +1,70 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTransitionProps } from '../../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '../../utils/html-element.utils.js';
+export type NeoValidationValue = string | string[] | number | boolean | boolean[] | FileList | any;
+export type NeoValidationState<T extends NeoValidationValue = NeoValidationValue> = {
+    /**
+     * `true` if the input has been focused.
+     */
+    touched?: boolean;
+    /**
+     * `true` if the input content has been modified and defers from the initial state.
+     * If `dirtyOnChange` is `true`, the input will always be considered dirty once it has been modified.
+     *
+     * @see dirtyOnChange
+     */
+    dirty?: boolean;
+    /**
+     * `true` if the input passes validation.
+     */
+    valid?: boolean;
+    /**
+     * The input/textarea value.
+     */
+    value?: T;
+    /**
+     * The initial input/textarea value.
+     */
+    initial?: T;
+};
+export type NeoValidationContext<T extends HTMLElement = HTMLElement, V extends NeoValidationValue = NeoValidationValue, C extends NeoValidationFieldContext<T, V> = NeoValidationFieldContext<T, V>> = {
+    /**
+     * The message's element id.
+     */
+    messageId?: string;
+    /**
+     * A snippet or a string to display as the input info message.
+     */
+    message?: Snippet<[C]> | string;
+    /**
+     * A snippet or a string to display as the input error message.
+     */
+    error?: Snippet<[C]> | string;
+};
+export type NeoValidationFieldContext<T extends HTMLElement = HTMLElement, V extends NeoValidationValue = NeoValidationValue> = HTMLRefProps<T> & NeoValidationState<V>;
+export type NeoValidationProps<T extends HTMLElement = HTMLElement, V extends NeoValidationValue = NeoValidationValue, C extends NeoValidationFieldContext<T, V> = NeoValidationFieldContext<T, V>> = {
+    /**
+     * The component to wrap with the validation context.
+     */
+    children?: Snippet<[NeoValidationContext<T, V, C>]>;
+    /**
+     * The HTML tag to use for the wrapper component (when message or error are shown).
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * The context to pass to the snippets.
+     */
+    context: C;
+    /**
+     * If true, the wrapper will adjust spacing to match rounded styles.
+     */
+    rounded?: boolean;
+    /**
+     * The HTML tag to use for the message and error components.
+     */
+    messageTag?: keyof HTMLElementTagNameMap;
+    /**
+     * The props to pass to the message and error components.
+     */
+    messageProps?: HTMLNeoBaseElement;
+} & HTMLTransitionProps & NeoValidationContext<T, V, C> & HTMLNeoBaseElement;

package/dist/inputs/common/neo-validation.model.js

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

package/dist/inputs/index.d.ts

@@ -1,4 +1,4 @@
-export { default as NeoInput } from './NeoInput.svelte';
+export { default as NeoInput } from './common/NeoInput.svelte';
 export { default as NeoTextarea } from './NeoTextarea.svelte';
 export { default as NeoPassword } from './NeoPassword.svelte';
-export type { NeoInputProps, NeoTextareaProps, NeoInputContext, NeoInputElevation, NeoInputLabelPositions, NeoTextAreaResize, } from './neo-input.model.js';
+export type { NeoInputProps, NeoTextareaProps, NeoInputContext, NeoInputElevation, NeoInputLabelPositions, NeoTextAreaResize, } from './common/neo-input.model.js';

package/dist/inputs/index.js

@@ -1,3 +1,3 @@
-export { default as NeoInput } from './NeoInput.svelte';
+export { default as NeoInput } from './common/NeoInput.svelte';
 export { default as NeoTextarea } from './NeoTextarea.svelte';
 export { default as NeoPassword } from './NeoPassword.svelte';

package/dist/inputs/neo-checkbox.model.d.ts

@@ -0,0 +1,9 @@
+import type { NeoBaseInputProps, NeoInputProps } from './common/neo-input.model.js';
+import type { NeoLabelProps } from './common/neo-label.model.js';
+import type { NeoValidationProps } from './common/neo-validation.model.js';
+/**
+ * Note: Checkbox group are exclusive due to the api design.
+ *
+ * @see [github issue #2308](https://github.com/sveltejs/svelte/issues/2308)
+ */
+export type NeoCheckboxProps = NeoBaseInputProps & Pick<NeoInputProps, 'start' | 'glass' | 'elevation' | 'rounded' | 'readonly' | 'loading' | 'disabled' | 'skeleton' | 'validation' | 'in' | 'out' | 'transition' | 'labelRef' | 'labelProps' | 'containerTag' | 'containerProps' | 'wrapperTag' | 'wrapperProps'> & Pick<NeoLabelProps, 'label'> & Pick<NeoValidationProps, 'error' | 'message' | 'messageTag' | 'messageProps'>;

package/dist/inputs/neo-checkbox.model.js

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

package/dist/inputs/neo-color-picker.model.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoInputProps } from './common/neo-input.model.js';
+export type NeoColorPickerProps = {
+    /**
+     * Reference to the color picker input element.
+     */
+    pickerRef?: HTMLInputElement;
+    /**
+     * Input properties to pass to the color picker input.
+     */
+    pickerProps?: HTMLInputAttributes;
+    /**
+     * Button properties to pass to the picker button.
+     */
+    buttonProps?: NeoButtonProps;
+} & NeoInputProps;

package/dist/inputs/neo-color-picker.model.js

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

package/dist/inputs/neo-date-time.model.d.ts

@@ -0,0 +1,8 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoInputProps } from './common/neo-input.model.js';
+export type NeoDateTimeProps = {
+    /**
+     * Button properties to pass to the increment and decrement buttons.
+     */
+    buttonProps?: NeoButtonProps;
+} & NeoInputProps;

package/dist/inputs/neo-date-time.model.js

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

package/dist/inputs/neo-file-picker.model.d.ts

@@ -0,0 +1,138 @@
+import type { Snippet } from 'svelte';
+import type { MouseEventHandler } from 'svelte/elements';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoCardProps } from '../cards/neo-card.model.js';
+import type { NeoInputProps } from './common/neo-input.model.js';
+import type { SvelteEvent } from '../utils/html-element.utils.js';
+export type NeoFilePickerContext<Multiple extends boolean = boolean> = {
+    /**
+     * If the file picker is in a dragging state.
+     * @see drop
+     */
+    dragging?: boolean;
+    /**
+     * Whether the file picker should accept multiple files.
+     */
+    multiple?: Multiple;
+    /**
+     * Whether the file picker should append to the current files.
+     * If false, the current files will be replaced.
+     *
+     * Only applies when multiple is true.
+     *
+     * @see multiple
+     */
+    append?: boolean;
+    /**
+     * The current files in the file picker.
+     */
+    files?: FileList;
+};
+export type NeoFilePickerValue<Multiple extends boolean = boolean> = (Multiple extends true ? FileList : Multiple extends false ? File : FileList | File) | null;
+export type NeoFilePickerProps<Multiple extends boolean = boolean> = {
+    /**
+     * The snippet to render when the file picker is in an expanded state (overrides default).
+     */
+    children?: Snippet<[NeoFilePickerContext]>;
+    /**
+     * A snippet or a string to display as the input label.
+     */
+    label?: Snippet | string;
+    /**
+     * If the file picker is in an expanded state.
+     * @see expand
+     * @see drop
+     */
+    expanded?: boolean;
+    /**
+     * Whether the file picker should accept dropped files.
+     */
+    drop?: boolean;
+    /**
+     * The text to display on the drop area placeholder.
+     */
+    dropText?: NeoInputProps['placeholder'];
+    /**
+     * The text to display on the expanded header.
+     *
+     * @default Number of files.
+     */
+    expandText?: string;
+    /**
+     * The maximum height of the file list in expanded state.
+     *
+     * @see expanded
+     * @default 20rem
+     */
+    expandHeight?: string;
+    /**
+     * On input event handler.
+     * Mirrors the native oninput handler with the files as the second argument.
+     * @param e - The original input event.
+     * @param value - FileList if multiple is true, File if multiple is false.
+     */
+    oninput?: <Value extends Multiple = Multiple>(e: SvelteEvent<InputEvent, HTMLInputElement>, value: NeoFilePickerValue<Value>) => unknown;
+    /**
+     * On change event handler.
+     * Mirrors the native onchange handler with the files as the second argument.
+     * @param e - The original input event.
+     * @param value - FileList if multiple is true, File if multiple is false.
+     */
+    onchange?: <Value extends Multiple = Multiple>(e: SvelteEvent<InputEvent, HTMLInputElement>, value: NeoFilePickerValue<Value>) => unknown;
+    /**
+     * Button properties to pass to the picker button.
+     */
+    buttonProps?: NeoButtonProps;
+    /**
+     * Card properties to pass to the card in expanded state.
+     * @see expanded
+     */
+    cardProps?: Omit<NeoCardProps, 'children'> & Pick<NeoFilePickerCardProps, 'editButtonProps' | 'removeButtonProps'>;
+    /**
+     * Input Group properties to pass to the input group container.
+     */
+    groupProps?: NeoInputProps['containerProps'];
+} & NeoFilePickerContext<Multiple> & Omit<NeoInputProps, 'multiple' | 'oninput' | 'onchange' | 'label'>;
+export type NeoFilePickerCardProps = Omit<NeoCardProps, 'children'> & {
+    /**
+     * If the is currently in a dragging state.
+     */
+    dragging?: boolean;
+    /**
+     * Header text to display in the card.
+     */
+    detailText?: string;
+    /**
+     * The maximum height of the file card list in expanded state.
+     *
+     * @see expanded
+     * @default 20rem
+     */
+    maxHeight?: string;
+    /**
+     * Callback when the affix close button is clicked.
+     */
+    onClear?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Callback when the footer edit button is clicked.
+     */
+    onEdit?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Callback when the list remove item button is clicked.
+     * @param index
+     * @param e
+     */
+    onRemove?: (index: number, e: SvelteEvent<MouseEvent>) => void;
+    /**
+     * Button properties to pass to the add files button.
+     */
+    addButtonProps?: NeoButtonProps;
+    /**
+     * Button properties to pass to the edit files button.
+     */
+    editButtonProps?: NeoButtonProps;
+    /**
+     * Button properties to pass to the remove files button.
+     */
+    removeButtonProps?: NeoButtonProps;
+} & Pick<NeoFilePickerProps, 'files' | 'valid' | 'clearable' | 'placeholder' | 'dropText' | 'loading' | 'multiple' | 'append' | 'children' | 'label' | 'labelProps' | 'labelRef' | 'required'>;

package/dist/inputs/neo-file-picker.model.js

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

package/dist/inputs/neo-number-step.model.d.ts

@@ -0,0 +1,24 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoInputProps } from './common/neo-input.model.js';
+export type NeoNumberStepProps = NeoInputProps & {
+    /**
+     * Center the input value.
+     */
+    center?: boolean;
+    /**
+     * Event handler for the step-up button.
+     */
+    onStepUp?: (e: MouseEvent, value: number, step?: string | number) => void;
+    /**
+     * Event handler for the step-down button.
+     */
+    onStepDown?: (e: MouseEvent, value: number, step?: string | number) => void;
+    /**
+     * Button properties to pass to the increment and decrement buttons.
+     */
+    buttonProps?: NeoButtonProps;
+    /**
+     * Input Group properties to pass to the input group container.
+     */
+    groupProps?: NeoInputProps['containerProps'];
+};

package/dist/inputs/neo-number-step.model.js

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

package/dist/inputs/neo-password.model.d.ts

@@ -0,0 +1,13 @@
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoInputProps } from './common/neo-input.model.js';
+import type { NeoPinState } from './neo-pin.model.js';
+export type NeoPasswordProps<T extends boolean = false> = {
+    /**
+     * Show a pin input instead of a text input.
+     */
+    pin?: T;
+    /**
+     * Button properties to pass to the show/hide password button.
+     */
+    buttonProps?: NeoButtonProps;
+} & NeoInputProps & (T extends true ? NeoPinState : Record<string, never>);

package/dist/inputs/neo-password.model.js

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

package/dist/inputs/neo-pin.model.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { NeoInputHTMLElement, NeoInputProps } from './common/neo-input.model.js';
+import type { NeoValidationFieldContext } from './common/neo-validation.model.js';
+export type NeoPinState = {
+    /**
+     * A snippet to display as the group separator.
+     */
+    icon?: Snippet;
+    /**
+     * The number of groups to display.
+     */
+    groups?: number;
+    /**
+     * The number of characters in each group.
+     */
+    count?: number;
+    /**
+     * The separator character to use between groups and inserted into value.
+     * If `true`, the default separator will be used.
+     * If `false`, no separator will be used.
+     */
+    separator?: boolean | string;
+    /**
+     * If true, groups will be stacked vertically.
+     * @default true if `groups` is greater than 1, false otherwise
+     */
+    vertical?: boolean;
+};
+export type NeoPinProps = NeoPinState & Omit<NeoInputProps, 'floating' | 'position'> & {
+    /**
+     * Input Group properties to pass to the input group container.
+     */
+    groupProps?: NeoInputProps['containerProps'];
+};
+export type NeoPinMethods = {
+    clear: () => Promise<void>;
+};
+export type NeoPinContext = NeoValidationFieldContext<NeoInputHTMLElement, string> & NeoPinMethods & {
+    /**
+     * If true, the input will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will be readonly.
+     */
+    readonly?: boolean;
+};

package/dist/inputs/neo-pin.model.js

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

package/dist/inputs/neo-radio.model.d.ts

@@ -0,0 +1,3 @@
+import type { NeoBaseInputProps, NeoInputProps } from './common/neo-input.model.js';
+import type { NeoLabelProps } from './common/neo-label.model.js';
+export type NeoRadioProps = NeoBaseInputProps & Pick<NeoInputProps, 'start' | 'glass' | 'elevation' | 'rounded' | 'readonly' | 'loading' | 'disabled' | 'skeleton' | 'in' | 'out' | 'transition' | 'labelRef' | 'labelProps' | 'containerTag' | 'containerProps'> & Pick<NeoLabelProps, 'label'>;

package/dist/inputs/neo-radio.model.js

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

package/dist/inputs/neo-switch.model.d.ts

@@ -0,0 +1,9 @@
+import type { NeoBaseInputProps, NeoInputProps } from './common/neo-input.model.js';
+import type { NeoLabelProps } from './common/neo-label.model.js';
+import type { NeoValidationProps } from './common/neo-validation.model.js';
+/**
+ * Note: Checkbox group are exclusive due to the api design.
+ *
+ * @see [github issue #2308](https://github.com/sveltejs/svelte/issues/2308)
+ */
+export type NeoSwitchProps = NeoBaseInputProps & Pick<NeoInputProps, 'start' | 'glass' | 'elevation' | 'rounded' | 'readonly' | 'loading' | 'disabled' | 'skeleton' | 'validation' | 'in' | 'out' | 'transition' | 'labelRef' | 'labelProps' | 'containerTag' | 'containerProps' | 'wrapperTag' | 'wrapperProps'> & Pick<NeoLabelProps, 'label'> & Pick<NeoValidationProps, 'error' | 'message' | 'messageTag' | 'messageProps'>;

package/dist/inputs/neo-switch.model.js

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

package/dist/nav/NeoTab.svelte

@@ -8,7 +8,7 @@
   import NeoButton from '../buttons/NeoButton.svelte';
   import IconClose from '../icons/IconClose.svelte';
   import { getTabContext } from './neo-tabs-context.svelte.js';
-  import { toAction, toActionProps } from '../utils/action.utils.js';
+  import { emptyTransition, toAction, toActionProps } from '../utils/action.utils.js';
   import { defaultTransitionDuration, enterFreezeTransition } from '../utils/transition.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
@@ -38,12 +38,15 @@
   const context = getTabContext();
   const pane = $derived(context?.getPane(tabId)?.toString());
   const active = $derived(context?.active === tabId);
-  const disabled = $derived(rest.disabled || (rest.disabled !== false && context?.disabled));
-  const closeable = $derived(close || (close !== false && context?.close));
-  const transition = $derived(context?.vertical ? height : width);
-  const slide = $derived(context?.slide);
+  const disabled = $derived(rest.disabled || (rest.disabled !== false && context?.state?.disabled));
+  const closeable = $derived(close || (close !== false && context?.state?.close));
+  const transition = $derived.by(() => {
+    if (!closeable && !context?.state?.add) return emptyTransition;
+    return context?.state?.vertical ? height : width;
+  });
+  const slide = $derived(context?.state?.slide);
 
-  const onClick: NeoTabProps['onclick'] = (e: MouseEvent) => {
+  const onClick: NeoTabProps['onclick'] = e => {
     context?.onChange(tabId);
     onclick?.(e);
   };
@@ -81,14 +84,14 @@
   data-tab-id={tabId}
   data-active={active}
   class:neo-tab={true}
-  class:active
-  class:slide
+  class:neo-active={active}
+  class:neo-slide={slide}
   transition:transition={enterFreezeTransition}
   {...tabProps}
   use:useFn={useProps}
 >
   <NeoButton
-    id={`neo-tab-${String(tabId)}`}
+    id="neo-tab-{String(tabId)}"
     role="tab"
     aria-controls={pane}
     aria-selected={active}
@@ -105,12 +108,12 @@
       <button
         class="neo-tab-close"
         aria-label="Close tab"
-        class:reverse={rest.reverse}
-        class:disabled
+        class:neo-reverse={rest.reverse}
+        class:neo-disabled={disabled}
         transition:width={{ duration: skip ? 0 : defaultTransitionDuration }}
         onclick={onClose}
       >
-        <IconClose class="icon-close" />
+        <IconClose class="neo-icon-close" />
       </button>
     {/if}
   </NeoButton>
@@ -119,19 +122,20 @@
 <style>.neo-tab {
   display: flex;
 }
-.neo-tab :global(.neo-button:active) :global(.icon-close),
-.neo-tab :global(.neo-button.pressed) :global(.icon-close),
-.neo-tab :global(.neo-button:focus-visible) :global(.icon-close),
-.neo-tab :global(.neo-button:hover) :global(.icon-close) {
+.neo-tab :global(.neo-button:active) :global(.neo-icon-close),
+.neo-tab :global(.neo-button.pressed) :global(.neo-icon-close),
+.neo-tab :global(.neo-button:focus-visible) :global(.neo-icon-close),
+.neo-tab :global(.neo-button:hover) :global(.neo-icon-close) {
   opacity: 1;
   pointer-events: auto;
 }
-.neo-tab :global(.neo-button .icon-close:focus-visible) {
+.neo-tab :global(.neo-button .neo-icon-close:focus-visible) {
   transition: none;
 }
 
 .neo-tab-close {
-  width: calc(1rem + var(--neo-tab-icon-gap, 0.3rem) + var(--neo-tab-icon-gap-offset, -0.2rem));
+  display: inline-flex;
+  width: calc(1rem + var(--neo-tab-icon-gap, 0.3rem) + var(--neo-tab-icon-gap-offset, -0.1875rem));
   padding: 0;
   color: inherit;
   font: inherit;
@@ -140,12 +144,12 @@
   outline: inherit;
   cursor: pointer;
 }
-.neo-tab-close.disabled {
+.neo-tab-close.neo-disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
-.neo-tab-close :global(.icon-close) {
-  margin-right: var(--neo-tab-icon-gap-offset, -0.2rem);
+.neo-tab-close :global(.neo-icon-close) {
+  margin-right: var(--neo-tab-icon-gap-offset, -0.1875rem);
   margin-left: var(--neo-tab-icon-gap, 0.3rem);
   padding: 0.1rem;
   border-radius: 50%;
@@ -153,18 +157,18 @@
   transition: opacity 0.2s ease-in, color 0.3s ease, background-color 0.3s ease;
   pointer-events: none;
 }
-.neo-tab-close:focus-visible :global(.icon-close) {
+.neo-tab-close:focus-visible :global(.neo-icon-close) {
   color: var(--neo-close-color-focused, rgba(255, 0, 0, 0.75));
   background-color: var(--neo-close-bg-color-focused, rgba(255, 0, 0, 0.05));
   opacity: 1;
   transition: none;
 }
-.neo-tab-close:hover :global(.icon-close) {
+.neo-tab-close:hover :global(.neo-icon-close) {
   color: var(--neo-close-color, rgb(255, 0, 0));
   background-color: var(--neo-close-bg-color-hover, rgba(255, 0, 0, 0.1));
   opacity: 1;
 }
-.neo-tab-close.reverse :global(.icon-close) {
+.neo-tab-close.neo-reverse :global(.neo-icon-close) {
   margin-right: var(--neo-tab-icon-gap, 0.3rem);
-  margin-left: var(--neo-tab-icon-gap-offset, -0.2rem);
+  margin-left: var(--neo-tab-icon-gap-offset, -0.1875rem);
 }</style>

package/dist/nav/NeoTabPanel.svelte

@@ -29,7 +29,7 @@
 
   const context = getTabContext();
   const active = $derived(context?.active === tabId);
-  const orientation = $derived(context?.vertical ? 'y' : 'x');
+  const orientation = $derived(context?.state?.vertical ? 'y' : 'x');
 
   const show = $derived(empty ? !context?.active : active);