diff --git a/src/components/select/IVSelect.type.ts b/src/components/select/IVSelect.type.ts new file mode 100644 index 0000000..3be1034 --- /dev/null +++ b/src/components/select/IVSelect.type.ts @@ -0,0 +1,351 @@ +import type { HintedString } from '@primevue/core'; +import type { VirtualScrollerProps } from 'primevue/virtualscroller'; + +/** + * Represents the props for a custom VSelect component. + */ +export type option = string | number | null | undefined; + +export interface ISelect { + /** + * Whether the select field is required. + */ + required?: boolean; + + /** + * Whether the select field is disabled. + */ + disabled?: boolean; + + /** + * The unique ID for the select element. + */ + selectId?: string; + + /** + * The name attribute for the select element. + */ + name?: string; + + /** + * Optional hint text displayed below the select field. + */ + hint?: string; + + /** + * The currently selected value. + */ + modelValue?: option; + + /** + * The label displayed above the select field. + */ + label?: string; + + /** + * The list of options to display in the dropdown. + * Can be an array of strings, numbers, or objects. + */ + options?: Array< + string | number | Record | { + value: unknown; + text: string; + disabled: boolean; + } + >; + + /** + * Defines how to extract the label from an option. + * Can be a string key or a function. + */ + optionLabel?: string | ((option: unknown) => string); + + /** + * Defines how to extract the value from an option. + * Can be a string key or a function. + */ + optionValue?: string | ((option: unknown) => unknown); + + /** + * Message displayed when the selection is valid. + */ + successMessage?: string; + + /** + * Message displayed when the selection is invalid. + */ + errorMessage?: string; + + /** + * Text displayed when no option is selected. + */ + defaultUnselectedText?: string; +} + +export interface SelectProps { + /** + * Value of the component. + */ + modelValue?: unknown; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: unknown; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; + /** + * An array of select items to display as the available options. + */ + options?: unknown[]; + /** + * Property name or getter function to use as the label of an option. + */ + optionLabel?: string | ((data: unknown) => string) | undefined; + /** + * Property name or getter function to use as the value of an option, defaults to the option itself when not defined. + */ + optionValue?: string | ((data: unknown) => unknown) | undefined; + /** + * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. + */ + optionDisabled?: string | ((data: unknown) => boolean) | undefined; + /** + * Property name or getter function to use as the label of an option group. + */ + optionGroupLabel?: string | ((data: unknown) => string) | undefined; + /** + * Property name or getter function that refers to the children options of option group. + */ + optionGroupChildren?: string | ((data: unknown) => unknown[]) | undefined; + /** + * Height of the viewport, a scrollbar is defined if height of list exceeds this value. + * @defaultValue 14rem + */ + scrollHeight?: string | undefined; + /** + * When specified, displays a filter input at header. + * @defaultValue false + */ + filter?: boolean | undefined; + /** + * Placeholder text to show when filter input is empty. + */ + filterPlaceholder?: string | undefined; + /** + * Locale to use in filtering. The default locale is the host environment's current locale. + */ + filterLocale?: string | undefined; + /** + * Defines the filtering algorithm to use when searching the options. + * @defaultValue contains + */ + filterMatchMode?: HintedString<'contains' | 'startsWith' | 'endsWith'> | undefined; + /** + * Fields used when filtering the options, defaults to optionLabel. + */ + filterFields?: string[] | undefined; + /** + * When present, custom value instead of predefined options can be entered using the editable input field. + * @defaultValue false + */ + editable?: boolean | undefined; + /** + * Default text to display when no option is selected. + */ + placeholder?: string | undefined; + /** + * Defines the size of the component. + */ + size?: HintedString<'small' | 'large'> | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * When present, it specifies that the component should be disabled. + * @defaultValue false + */ + disabled?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue null + */ + variant?: HintedString<'outlined' | 'filled'> | undefined | null; + /** + * A property to uniquely identify an option. + */ + dataKey?: string | undefined; + /** + * When enabled, a clear icon is displayed to clear the value. + * @defaultValue false + */ + showClear?: boolean | undefined; + /** + * Spans 100% width of the container when enabled. + * @defaultValue null + */ + fluid?: boolean | undefined; + /** + * @deprecated since v4.0. Use 'labelId' instead. + * Identifier of the underlying input element. + */ + inputId?: string | undefined; + /** + * @deprecated since v4.0. Use 'labelStyle' instead. + * Inline style of the input field. + */ + inputStyle?: object | undefined; + /** + * @deprecated since v4.0. Use 'labelClass' instead. + * Style class of the input field. + */ + inputClass?: string | object | undefined; + /** + * Identifier of the underlying label element. + */ + labelId?: string | undefined; + /** + * Inline style of the label field. + */ + labelStyle?: object | undefined; + /** + * Style class of the label field. + */ + labelClass?: string | object | undefined; + /** + * @deprecated since v4.0. Use 'overlayStyle' instead. + * Inline style of the overlay panel. + */ + panelStyle?: object | undefined; + /** + * @deprecated since v4.0. Use 'overlayClass' instead. + * Style class of the overlay panel. + */ + panelClass?: string | object | undefined; + /** + * Inline style of the overlay. + */ + overlayStyle?: object | undefined; + /** + * Style class of the overlay. + */ + overlayClass?: string | object | undefined; + /** + * A valid query selector or an HTMLElement to specify where the overlay gets attached. + * @defaultValue body + */ + appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement; + /** + * Whether the select is in loading state. + * @defaultValue false + */ + loading?: boolean | undefined; + /** + * Icon to display in clear button. + */ + clearIcon?: string | undefined; + /** + * Icon to display in the select. + */ + dropdownIcon?: string | undefined; + /** + * Icon to display in filter input. + */ + filterIcon?: string | undefined; + /** + * Icon to display in loading state. + */ + loadingIcon?: string | undefined; + /** + * Clears the filter value when hiding the select. + * @defaultValue false + */ + resetFilterOnHide?: boolean; + /** + * Clears the filter value when clicking on the clear icon. + * @defaultValue false + */ + resetFilterOnClear?: boolean; + /** + * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. + */ + virtualScrollerOptions?: VirtualScrollerProps; + /** + * Whether to focus on the first visible or selected element when the overlay panel is shown. + * @defaultValue false + */ + autoOptionFocus?: boolean | undefined; + /** + * Whether to focus on the filter element when the overlay panel is shown. + * @defaultValue false + */ + autoFilterFocus?: boolean | undefined; + /** + * When enabled, the focused option is selected. + * @defaultValue false + */ + selectOnFocus?: boolean | undefined; + /** + * When enabled, the focus is placed on the hovered option. + * @defaultValue true + */ + focusOnHover?: boolean | undefined; + /** + * Whether the selected option will be add highlight class. + * @defaultValue true + */ + highlightOnSelect?: boolean | undefined; + /** + * Whether the selected option will be shown with a check mark. + * @defaultValue false + */ + checkmark?: boolean | undefined; + /** + * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration. + * @defaultValue '{0} results are available' + */ + filterMessage?: string | undefined; + /** + * Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration. + * @defaultValue '{0} items selected' + */ + selectionMessage?: string | undefined; + /** + * Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration. + * @defaultValue No selected item + */ + emptySelectionMessage?: string | undefined; + /** + * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration. + * @defaultValue No results found + */ + emptyFilterMessage?: string | undefined; + /** + * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration. + * @defaultValue No available options + */ + emptyMessage?: string | undefined; + /** + * Index of the element in tabbing order. + */ + tabindex?: number | string | undefined; + /** + * Defines a string value that labels an interactive element. + */ + ariaLabel?: string | undefined; + /** + * Identifier of the underlying input element. + */ + ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; +} + +export default interface IVSelect extends Partial>, Partial { + optionTemplate?: boolean +}