bitboss-ui 2.1.113 → 2.1.115

package/dist/components/BaseSelect/types.d.ts

@@ -0,0 +1,457 @@
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import { IconType } from '../../types/Icon';
+export type BaseSelectProps<Item = any> = {
+    /**
+     * Controls whether manual typing is allowed in the input field.
+     * Use `'not-mobile'` to disable typing on mobile while keeping it on desktop.
+     * @defaultValue `true`
+     */
+    allowWriting?: boolean | 'not-mobile';
+    /**
+     * Name of the icon to render at the right hand side of the input.
+     */
+    'append:icon'?: IconType;
+    /**
+     * Id(s) of elements describing this select for assistive technologies.
+     */
+    ariaDescribedby?: InputHTMLAttributes['aria-describedby'];
+    /**
+     * Browser autocomplete hint for the input field.
+     * @defaultValue `'off'`
+     */
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+    /**
+     * Focus the input automatically on mount.
+     */
+    autofocus?: InputHTMLAttributes['autofocus'];
+    /**
+     * Show a clear button whenever a value is present and the control is interactive.
+     */
+    clearable?: boolean;
+    /**
+     * Display selected values as a comma-separated string instead of individual chips.
+     * When enabled, options cannot be deselected by clicking individual chips.
+     */
+    comma?: boolean;
+    /**
+     * Apply the compact density variant.
+     */
+    compact?: boolean;
+    /**
+     * Additional dependencies that trigger item reloading when changed.
+     * @defaultValue `[]`
+     */
+    dependencies?: any[];
+    /**
+     * Debounce delay (ms) for dependency-triggered reloads.
+     * @defaultValue `0`
+     */
+    depsDebounceTime?: number;
+    /**
+     * Disables the component.
+     */
+    disabled?: boolean;
+    /**
+     * Reset modelValue to `null` or empty array if it no longer matches available items (enforces coherence).
+     * For example, prevents setting v-model to a user not present in the items array.
+     */
+    enforceCoherence?: boolean;
+    /**
+     * Controls how options are filtered during search.
+     * Options are always filtered by display text, but can also match additional properties
+     * when set to a string path, array of paths, or custom function.
+     * Set to `false` to disable filtering, or `'not_stashed'` to exclude stashed items.
+     * @defaultValue `() => []`
+     */
+    filterBy?: string | string[] | false | 'not_stashed' | ((value: any, item: any, query: string | null) => boolean) | null;
+    /**
+     * Path or function used to group options. When set, options are organized into
+     * collapsible group headers in the dropdown.
+     */
+    groupBy?: string | ((item: Item) => string | number | symbol);
+    /**
+     * Height of group headers in the listbox (px). Defaults to 24px (compact) or 32px.
+     * Only applies when `groupBy` is set.
+     */
+    headerHeight?: number;
+    /**
+     * Apply error styling to the select.
+     */
+    hasErrors?: boolean;
+    /**
+     * Explicit id for the input element. Used to generate ids for listbox and options.
+     */
+    id?: HTMLAttributes['id'];
+    /**
+     * Array of items or function to load them asynchronously.
+     * Functions receive `(query, prefill, modelValue)` and can return a promise.
+     * Please check out {@link https://ui-components-docs.vercel.app/it/guides/fetch-data | the docs} for more information.
+     * @defaultValue `[]`
+     */
+    items: Item[] | ((query: string, prefill: boolean, modelValue: any[]) => Promise<Item[]>) | ((query: string, prefill: boolean, modelValue: any[]) => Item[]);
+    /**
+     * Height of the options in the listbox (px). Necessary for option virtualization.
+     * @defaultValue `40`
+     */
+    itemHeight?: number;
+    /**
+     * Path to item property for display text or function to extract it.
+     */
+    itemText?: string | ((item: Item) => string) | undefined;
+    /**
+     * Defines a path that returns a property of the object to use as value or a function that returns any value.
+     */
+    itemValue?: string | ((item: Item) => string) | undefined;
+    /**
+     * Display the loading state styles.
+     */
+    loading?: boolean;
+    /**
+     * Message shown while items are being loaded.
+     */
+    loadingText?: string;
+    /**
+     * Maximum number of selectable items (limits selection when `multiple` is true).
+     * @defaultValue `Infinity`
+     */
+    max?: number;
+    /**
+     * Maximum number of selected items to show as individual labels before collapsing.
+     * @defaultValue `Infinity`
+     */
+    maxSelectedLabels?: number;
+    /**
+     * v-model value. Single value for single select, array for multiple select.
+     */
+    modelValue: any;
+    /**
+     * Debounce delay (ms) for modelValue change handling.
+     * @defaultValue `0`
+     */
+    modelValueDebounceTime?: number;
+    /**
+     * Enable multiple item selection. When true, modelValue must be an array.
+     */
+    multiple?: boolean;
+    /**
+     * Name attribute forwarded to the input element.
+     */
+    name?: InputHTMLAttributes['name'];
+    /**
+     * Message displayed when no items are available.
+     */
+    noDataText?: string;
+    /**
+     * Placeholder text when no value is selected.
+     */
+    placeholder?: InputHTMLAttributes['placeholder'];
+    /**
+     * Controls when items are pre-loaded.
+     * `'focus'` loads on first focus, `true` loads immediately, `false` loads only on search.
+     * @defaultValue `'focus'`
+     */
+    prefill?: boolean | 'focus';
+    /**
+     * Name of the icon to render at the left hand side of the input.
+     */
+    'prepend:icon'?: IconType;
+    /**
+     * Debounce delay (ms) before triggering search queries after user input stops.
+     * @defaultValue `500`
+     */
+    queryDebounceTime?: number;
+    /**
+     * Make the input read-only while keeping the dropdown accessible.
+     */
+    readonly?: boolean;
+    /**
+     * Mark the input as required for form validation.
+     */
+    required?: boolean;
+    /**
+     * Show the dropdown chevron icon.
+     * @defaultValue `true`
+     */
+    showChevron?: boolean;
+    /**
+     * Accumulate selected items across searches instead of replacing them.
+     * Useful when searching large databases where selections should persist.
+     */
+    stash?: boolean;
+    /**
+     * Function to generate a summary label when selected items exceed `maxSelectedLabels`.
+     * Receives the total count and returns display text.
+     */
+    selectedLabelsFn?: (count: number) => string;
+    /**
+     * Transition duration (ms) for dropdown show/hide animations.
+     * @defaultValue `300`
+     */
+    transitionDuration?: number;
+    /**
+     * Force dropdown repositioning on every animation frame (expensive, use sparingly).
+     * @defaultValue `false`
+     */
+    updateOnAnimationFrame?: boolean;
+};
+export type BaseSelectEvents = {
+    /**
+     * Emitted when the search input loses focus.
+     * Forwards the original DOM `FocusEvent`.
+     */
+    (e: 'blur', event: FocusEvent): void;
+    /**
+     * Emitted when the input fires a change event.
+     * Forwards the original DOM `Event`.
+     */
+    (e: 'change', event: Event): void;
+    /**
+     * Emitted when the input receives a click interaction.
+     * Forwards the original DOM `MouseEvent`.
+     */
+    (e: 'click', event: MouseEvent): void;
+    /**
+     * Emitted when the search input gains focus.
+     * Forwards the original DOM `FocusEvent`.
+     */
+    (e: 'focus', event: FocusEvent): void;
+    /**
+     * Emitted when focus/click moves outside the component after it was active.
+     */
+    (e: 'inactive'): void;
+    /**
+     * Emitted on native input events from the search field.
+     * Forwards the original DOM `Event`.
+     */
+    (e: 'input', event: Event): void;
+    /**
+     * Emitted with the new selected value(s) whenever the selection changes.
+     * Single value for single-select, array for multiple-select.
+     */
+    (e: 'update:modelValue', value: any): void;
+    /**
+     * Emitted when the user confirms a manually typed string that does not match any option.
+     * Useful for "add new" patterns.
+     */
+    (e: 'option:add', text: string): void;
+};
+/**
+ * Props exposed by slots that receive the current search query and a focus callback
+ * (`append`, `prepend`, `no-data`).
+ */
+export type BaseSelectQueryFocusSlotProps = {
+    /**
+     * The current text typed in the search input.
+     */
+    query: string;
+    /**
+     * Focuses the search input.
+     */
+    focus: () => void;
+};
+/**
+ * Props exposed by slots that receive only the current search query
+ * (`append-outer`, `prepend-outer`, `loading`).
+ */
+export type BaseSelectQueryOnlySlotProps = {
+    /**
+     * The current text typed in the search input.
+     */
+    query: string;
+};
+/**
+ * Props exposed by the `chevron` slot.
+ */
+export type BaseSelectChevronSlotProps = {
+    /**
+     * Whether the component is currently loading options.
+     */
+    loading: boolean;
+    /**
+     * Whether the dropdown panel is currently open.
+     */
+    shown: boolean;
+};
+/**
+ * Props exposed by the `chip` slot for each selected item when `multiple` is true.
+ */
+export type BaseSelectChipSlotProps = {
+    /**
+     * Whether this chip's remove action is disabled.
+     */
+    disabled: boolean | undefined;
+    /**
+     * Whether the select is in an error state.
+     */
+    hasErrors?: boolean;
+    /**
+     * The zero-based index of this chip among the selected items.
+     */
+    index: number;
+    /**
+     * The raw selected item from the `items` prop.
+     */
+    item: any;
+    /**
+     * Whether the component is currently loading.
+     */
+    loading: boolean;
+    /**
+     * Whether the item was added manually (typed by the user).
+     */
+    manual: boolean;
+    /**
+     * Whether this chip is in a selected state.
+     */
+    selected: boolean | undefined;
+    /**
+     * The resolved display text for this selected item.
+     */
+    text: string;
+    /**
+     * The resolved value for this selected item.
+     */
+    value: any;
+};
+/**
+ * Props exposed by the `option` slot for each item in the dropdown list.
+ */
+export type BaseSelectOptionSlotProps<Item = any> = {
+    /**
+     * Whether this option is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether this option is currently keyboard-focused.
+     */
+    focused: boolean;
+    /**
+     * The zero-based index of this option in the list.
+     */
+    index: number;
+    /**
+     * Whether the select is in an error state.
+     */
+    hasErrors?: boolean;
+    /**
+     * The raw item from the `items` prop.
+     */
+    item: Item;
+    /**
+     * Whether the component is currently loading.
+     */
+    loading: boolean;
+    /**
+     * Whether this option is currently selected.
+     */
+    selected: boolean;
+    /**
+     * The resolved display text for this option.
+     */
+    text: string;
+    /**
+     * The resolved value for this option.
+     */
+    value: any;
+};
+/**
+ * Props exposed by the `group` slot for each group header in the dropdown list.
+ */
+export type BaseSelectGroupSlotProps<Item = any> = {
+    /**
+     * The display text for this group.
+     */
+    text: string;
+    /**
+     * The raw group item from the `items` prop.
+     */
+    item: Item;
+    /**
+     * The zero-based index of this group in the list.
+     */
+    index: number;
+    /**
+     * The number of options in this group.
+     */
+    length: number;
+    /**
+     * Whether this group is disabled.
+     */
+    disabled: boolean;
+};
+/**
+ * Props exposed by dropdown panel boundary slots
+ * (`options:append`, `options:append:outer`, `options:prepend`, `options:prepend:outer`).
+ */
+export type BaseSelectFocusSlotProps = {
+    /**
+     * Focuses the search input.
+     */
+    focus: () => void;
+};
+export type BaseSelectSlots<Item = any> = {
+    /**
+     * Content rendered after the input area, at the end of the inner container.
+     */
+    append?: (props: BaseSelectQueryFocusSlotProps) => any;
+    /**
+     * Content rendered after the entire select control, outside the input chrome.
+     */
+    'append-outer'?: (props: BaseSelectQueryOnlySlotProps) => any;
+    /**
+     * Replaces the default dropdown chevron/arrow icon.
+     */
+    chevron?: (props: BaseSelectChevronSlotProps) => any;
+    /**
+     * Replaces the chip rendered for each selected item when `multiple` is true.
+     */
+    chip?: (props: BaseSelectChipSlotProps) => any;
+    /**
+     * Replaces the default loading indicator rendered inside the dropdown while options are fetching.
+     */
+    loading?: (props: BaseSelectQueryOnlySlotProps) => any;
+    /**
+     * Replaces the default "no data" message rendered inside the dropdown when no options match.
+     */
+    'no-data'?: (props: BaseSelectQueryFocusSlotProps) => any;
+    /**
+     * Replaces the default option row rendered for each item in the dropdown list.
+     */
+    option?: (props: BaseSelectOptionSlotProps<Item>) => any;
+    /**
+     * Replaces the default group header row rendered above options that belong to a group.
+     */
+    group?: (props: BaseSelectGroupSlotProps<Item>) => any;
+    /**
+     * Content rendered after the option list, inside the dropdown panel.
+     */
+    'options:append'?: (props: BaseSelectFocusSlotProps) => any;
+    /**
+     * Content rendered after the dropdown panel, outside the scrollable options area.
+     */
+    'options:append:outer'?: (props: BaseSelectFocusSlotProps) => any;
+    /**
+     * Content rendered before the option list, inside the dropdown panel.
+     */
+    'options:prepend'?: (props: BaseSelectFocusSlotProps) => any;
+    /**
+     * Content rendered before the dropdown panel, outside the scrollable options area.
+     */
+    'options:prepend:outer'?: (props: BaseSelectFocusSlotProps) => any;
+    /**
+     * Inline content rendered at the start of the input field area, before the selected value text.
+     */
+    prefix?: (props: object) => any;
+    /**
+     * Content rendered before the input area, at the start of the inner container.
+     */
+    prepend?: (props: BaseSelectQueryFocusSlotProps) => any;
+    /**
+     * Content rendered before the entire select control, outside the input chrome.
+     */
+    'prepend-outer'?: (props: BaseSelectQueryOnlySlotProps) => any;
+    /**
+     * Inline content rendered at the end of the input field area, after the selected value text.
+     */
+    suffix?: (props: object) => any;
+};

package/dist/components/BaseSlider/BaseSlider.vue.d.ts

@@ -1,176 +1,4 @@
-import { InputHTMLAttributes, HTMLAttributes } from 'vue';
-/**
- * Props for the slider component with range support, ticks, and keyboard navigation.
- */
-export type BaseSliderProps = {
-    /**
-     * Id(s) of elements describing this slider for assistive technologies.
-     */
-    ariaDescribedby?: InputHTMLAttributes['aria-describedby'];
-    /**
-     * Focus the slider on mount.
-     */
-    autofocus?: InputHTMLAttributes['autofocus'];
-    /**
-     * Define a color for the component.
-     *
-     * Either a custom color or a coded color in common HEX, RGB, etc... format.
-     */
-    color?: string;
-    /**
-     * Disable all interactions with the slider.
-     */
-    disabled?: boolean;
-    /**
-     * Apply error styling to the slider.
-     */
-    hasErrors?: boolean;
-    /**
-     * Explicit id for the slider container. Used to generate ids for thumbs.
-     */
-    id?: HTMLAttributes['id'];
-    /**
-     * Upper bound for slider values.
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Maximum decimal places to retain in emitted values.
-     * @default 2
-     */
-    maxPrecision?: number;
-    /**
-     * Lower bound for slider values.
-     * @default 0
-     */
-    min?: number;
-    /**
-     * v-model value. Single number for single slider, two-element array for range.
-     * @default 0
-     */
-    modelValue: number[] | number | string | null;
-    /**
-     * Defines the name of the input.
-     */
-    name?: InputHTMLAttributes['name'];
-    /**
-     * Enable range selection with two thumbs. When true, modelValue must be an array.
-     */
-    range?: boolean;
-    /**
-     * Make the slider read-only while keeping it visible.
-     */
-    readonly?: boolean;
-    /**
-     * Mark the slider as required.
-     */
-    required?: boolean;
-    /**
-     * Granularity step for value changes via keyboard or pointer interaction.
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Show tick marks at each step interval.
-     */
-    ticks?: boolean;
-    /**
-     * Translate thumbs proportionally to stay centered on the track.
-     * Set to false when displaying ticks for better alignment.
-     * @default true
-     */
-    thumbTranslate?: boolean;
-};
-/**
- * Events emitted by `BaseSlider`.
- * - `active` / `inactive`: fired when slider gains/loses focus.
- * - `click` / `focus` / `keydown`: forwarded interaction events.
- * - `pointerdown` / `pointermove` / `pointerup`: pointer interaction events.
- * - `update:modelValue`: emitted with new value(s) when slider changes.
- */
-export type BaseSliderEvents = {
-    (e: 'click', event: MouseEvent): void;
-    (e: 'focus', event: FocusEvent): void;
-    (e: 'active'): void;
-    (e: 'inactive'): void;
-    (e: 'keydown', event: KeyboardEvent): void;
-    (e: 'pointerdown', event: PointerEvent): void;
-    (e: 'pointermove', event: PointerEvent): void;
-    (e: 'pointerup', event: PointerEvent): void;
-    (e: 'update:modelValue', event: number | number[]): void;
-};
-/**
- * Slots for customizing the slider appearance.
- * - `prepend` / `append`: wrap the entire slider with increase/decrease helpers.
- * - `thumb` / `thumb:higher` / `thumb:lower`: customize thumb visuals (lower/higher for range mode).
- * - `tick`: customize individual tick marks when ticks are enabled.
- */
-export type BaseSliderSlots = {
-    /**
-     * Replaces the default higher-value thumb in range mode (`range: true`).
-     * @param value - The current value controlled by this thumb, or `undefined` if unset.
-     * @param percent - The thumb's horizontal position as a percentage (0–100) along the track.
-     * @param focused - Whether this thumb currently has keyboard focus.
-     */
-    'thumb:higher': (props: {
-        value: number | undefined;
-        percent: number;
-        focused: boolean;
-    }) => any;
-    /**
-     * Replaces the default lower-value thumb in range mode (`range: true`).
-     * @param value - The current value controlled by this thumb, or `undefined` if unset.
-     * @param percent - The thumb's horizontal position as a percentage (0–100) along the track.
-     * @param focused - Whether this thumb currently has keyboard focus.
-     */
-    'thumb:lower': (props: {
-        value: number | undefined;
-        percent: number;
-        focused: boolean;
-    }) => any;
-    /**
-     * Content rendered after the slider track, typically used to add a max-value label or button.
-     * @param increase - Increments the value by one `step`.
-     * @param decrease - Decrements the value by one `step`.
-     */
-    append: (props: {
-        increase: typeof increase;
-        decrease: typeof decrease;
-    }) => any;
-    /**
-     * Content rendered before the slider track, typically used to add a min-value label or button.
-     * @param increase - Increments the value by one `step`.
-     * @param decrease - Decrements the value by one `step`.
-     */
-    prepend: (props: {
-        increase: typeof increase;
-        decrease: typeof decrease;
-    }) => any;
-    /**
-     * Fallback thumb used for non-range sliders (or inside `thumb:higher`/`thumb:lower` when not overridden separately).
-     * @param value - The current slider value, or `undefined` if unset.
-     * @param percent - The thumb's horizontal position as a percentage (0–100) along the track.
-     * @param focused - Whether this thumb currently has keyboard focus.
-     */
-    thumb: (props: {
-        value: number | undefined;
-        percent: number;
-        focused: boolean;
-    }) => any;
-    /**
-     * Replaces the default tick mark rendered at each step when ticks are enabled.
-     * @param value - The numeric value this tick represents.
-     * @param percent - The tick's horizontal position as a percentage (0–100) along the track.
-     * @param active - Whether the tick falls within the currently selected range/value.
-     */
-    tick: (props: {
-        value: number;
-        percent: number;
-        active: boolean;
-    }) => any;
-};
-declare const increase: () => void;
-declare const decrease: () => void;
+import { BaseSliderProps, BaseSliderSlots } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<BaseSliderSlots> & BaseSliderSlots;
@@ -184,28 +12,28 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<BaseSliderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (event: number | number[]) => any;
-    keydown: (event: KeyboardEvent) => any;
     click: (event: MouseEvent) => any;
     focus: (event: FocusEvent) => any;
+    keydown: (event: KeyboardEvent) => any;
+    "update:modelValue": (event: number | number[]) => any;
     pointerdown: (event: PointerEvent) => any;
     pointermove: (event: PointerEvent) => any;
     pointerup: (event: PointerEvent) => any;
     inactive: () => any;
     active: () => any;
 }, string, import('vue').PublicProps, Readonly<BaseSliderProps> & Readonly<{
-    "onUpdate:modelValue"?: ((event: number | number[]) => any) | undefined;
-    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
     onClick?: ((event: MouseEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((event: number | number[]) => any) | undefined;
     onPointerdown?: ((event: PointerEvent) => any) | undefined;
     onPointermove?: ((event: PointerEvent) => any) | undefined;
     onPointerup?: ((event: PointerEvent) => any) | undefined;
     onInactive?: (() => any) | undefined;
     onActive?: (() => any) | undefined;
 }>, {
-    modelValue: number[] | number | string | null;
     step: number;
+    modelValue: number[] | number | string | null;
     max: number;
     min: number;
     maxPrecision: number;