@dvcol/neo-svelte
Version:
Neomorphic ui library for svelte 5
203 lines (202 loc) • 6.18 kB
TypeScript
import type { UseFloatingOptions } from '@skeletonlabs/floating-ui-svelte';
import type { Snippet } from 'svelte';
import type { NeoFormType } from '../form/neo-form-context.svelte.js';
import type { NeoInputValidationProps } from './common/neo-input-validation.model.js';
import type { NeoLabelProps } from './common/neo-label.model.js';
import type { NeoValidationFieldContext, NeoValidationState } from './common/neo-validation.model.js';
import type { HTMLActionProps } from '../utils/action.utils.js';
import type { BorderRadiusInput } from '../utils/border.utils.js';
import type { Color } from '../utils/colors.utils.js';
import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
import type { ShadowShallowElevation, ShadowShallowElevationString } from '../utils/shadow.utils.js';
import type { SizeInput } from '../utils/style.utils.js';
export type NeoRangeValue = number | [number, number];
export type NeoRangeElevation = ShadowShallowElevation | ShadowShallowElevationString;
export interface NeoRangeStates {
/**
* If the input is currently focused.
*/
focused?: boolean;
/**
* If the input is currently hovered.
*/
hovered?: boolean;
/**
* If true, the input will be disabled.
*/
disabled?: boolean;
/**
* If true, the input will be readonly.
*/
readonly?: boolean;
/**
* Display a loading spinner inside the input.
*/
loading?: boolean;
/**
* Minimum value of the range.
*
* @default 0
*/
min?: number;
/**
* Maximum value of the range.
*
* @default 100
*/
max?: number;
/**
* Step value of the range.
*
* @default 1
*/
step?: number;
}
export interface NeoRangeStyles {
/**
* If true, the input will show step markers.
* If an array is provided, the input will show the markers at the given values.
*
* @see step
*/
ticks?: boolean | number[];
/**
* If true, the input value will be displayed as tooltip on hover/focus.
*
* @default true
*/
tooltips?: boolean;
/**
* If true, the input will have a rounded border.
*/
rounded?: BorderRadiusInput;
/**
* If true, the input will be displayed with a glass effect.
*/
glass?: boolean;
/**
* Tints the input with the current color.
*/
tinted?: boolean;
/**
* Text color to use for the input.
*/
color?: Color | CSSStyleDeclaration['color'];
/**
* If true, the input input start as flat on first render.
* @see [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for browser support
*/
start?: boolean;
/**
* If true, the input will be disabled and a loading skeleton will be displayed instead of the text.
*/
skeleton?: boolean;
/**
* Input elevation.
* @default 2
*/
elevation?: NeoRangeElevation;
}
export interface NeoRangeTooltipContext {
lower?: boolean;
upper?: boolean;
value?: number;
}
export interface NeoRangeTickContext {
index: number;
filled?: boolean;
}
export type NeoRangeProps = Pick<NeoInputValidationProps, 'valid' | 'validation' | 'error' | 'context' | 'message' | 'messageProps'> & NeoValidationState<NeoRangeValue> & {
/**
* A snippet or a string to display as the input label.
*/
label?: NeoLabelProps['label'];
/**
* A snippet to display as value labels.
*/
tooltip?: Snippet<[NeoRangeTooltipContext, NeoValidationFieldContext]>;
/**
* A snippet to display as a tick mark.
*/
mark?: Snippet<[NeoRangeTickContext, NeoValidationFieldContext]>;
/**
* A snippet to display as the input prefix.
*/
before?: Snippet<[NeoValidationFieldContext]>;
/**
* A snippet to display as the input suffix.
*/
after?: Snippet<[NeoValidationFieldContext]>;
/**
* Unique identifier of the input.
* @default neo-range-{uuid}
*/
id?: HTMLElement['id'];
/**
* Optional name of the input (for validation purposes).
*/
name?: HTMLInputElement['name'];
/**
* Optional form id for validation.
*/
form?: NeoFormType;
/**
* If false, the input will not be registered with the form context.
*/
register?: NeoInputValidationProps['register'];
/**
* Optional flex strategy for the container
*/
flex?: CSSStyleDeclaration['flex'];
/**
* Optional width constraints.
*/
width?: SizeInput<'width'>;
/**
* Optional height constraints.
*/
height?: SizeInput<'height'>;
/**
* The HTML tag to use for the validation container.
*/
validationRef?: HTMLRefProps['ref'];
/**
* The props to pass to the validation component.
*/
validationProps?: NeoInputValidationProps;
/**
* The props to pass to the input container.
*/
containerProps?: HTMLNeoBaseElement & HTMLTagProps;
/**
* The props to pass to the label.
*/
labelProps?: NeoLabelProps;
/**
* The ref to bind to the label.
*/
labelRef?: HTMLLabelElement;
/**
* The props to pass to the floating label.
*/
floatingProps?: HTMLNeoBaseElement<HTMLSpanElement>;
/**
* Options to pass to the floating label.
*/
floatingOptions?: UseFloatingOptions;
} & NeoRangeStates & NeoRangeStyles & HTMLActionProps & HTMLRefProps & HTMLNeoBaseElement<HTMLSpanElement>;
export type NeoRangeValidationState = NeoValidationState<NeoRangeValue>;
export interface NeoRangeMethods<T extends NeoRangeValue = NeoRangeValue> {
/**
* Increment the input value.
* @param index
*/
stepUp: (index?: 0 | 1) => T;
/**
* Decrement the input value.
* @param index
*/
stepDown: (index?: 0 | 1) => T;
}
export type NeoRangeContext<T extends NeoRangeValue = NeoRangeValue> = NeoValidationFieldContext & NeoRangeStates & NeoRangeStyles & NeoRangeMethods<T>;
export type NeoRangeHTMLElement<T extends NeoRangeValue = NeoRangeValue> = HTMLElement & NeoRangeMethods<T>;