@ownclouders/design-system/dist/types/components/OcSelect/OcSelect.vue.d.ts

ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components

import { ContextualHelper } from '../../helpers';
/**
 * OcSelect Component
 *
 * A select component with a trigger and dropdown based on [Vue Select](https://vue-select.org/).
 *
 * @component
 * @name OcSelect
 * @status ready
 * @release 4.3.0
 *
 * @props
 * @property {string} [id] - The ID of the element. Defaults to a unique ID.
 * @property {Function} [filter] - Function to filter items when searching. Defaults to a Fuse.js-based search.
 * @property {boolean} [disabled=false] - Disable the select component.
 * @property {string} label - Label of the select component, required for accessibility.
 * @property {boolean} [labelHidden=false] - Hide the label visually but keep it for accessibility.
 * @property {ContextualHelper|null} [contextualHelper=null] - Contextual helper data.
 * @property {string} [optionLabel='label'] - Key to use as label when option is an object.
 * @property {boolean} [searchable=true] - Determines if the select field is searchable.
 * @property {boolean} [clearable=false] - Determines if the select field is clearable.
 * @property {boolean} [loading=false] - Determines if the select field is in a loading state.
 * @property {string|null} [warningMessage=null] - A warning message shown below the select.
 * @property {string|null} [errorMessage=null] - An error message shown below the select.
 * @property {boolean} [fixMessageLine=false] - Reserve vertical space for a one-line message.
 * @property {string|null} [descriptionMessage=null] - A description text shown below the select field.
 * @property {boolean} [multiple=false] - Determines if multiple options can be selected.
 * @property {boolean} [readOnly=false] - Determines if the select field is read-only.
 * @property {boolean} [positionFixed=false] - Sets the dropdown menu to `position: fixed`.
 *
 * @emits
 * @event search:input - Triggered when the search input value changes.
 * @property {string} query - The search query.
 * @event update:modelValue - Triggered when the model value is updated.
 * @property {unknown} value - The updated value.
 *
 * @example
 *   <OcSelect
 *     :id="'example-select'"
 *     :label="'Example Select'"
 *     :options="options"
 *     :multiple="true"
 *     :searchable="true"
 *     :clearable="true"
 *     update:modelValue="onValueUpdate"
 *   />
 */
interface Props {
    id?: string;
    filter?: (items: unknown[], search: string, label: string) => unknown[];
    disabled?: boolean;
    label: string;
    labelHidden?: boolean;
    contextualHelper?: ContextualHelper | null;
    optionLabel?: string;
    getOptionLabel?: (option: unknown) => string;
    searchable?: boolean;
    clearable?: boolean;
    loading?: boolean;
    warningMessage?: string | null;
    errorMessage?: string | null;
    fixMessageLine?: boolean;
    descriptionMessage?: string | null;
    multiple?: boolean;
    readOnly?: boolean;
    positionFixed?: boolean;
}
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: any;
    refs: {
        select: any;
    };
    rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
    "update:modelValue": (value: unknown) => any;
    "search:input": (query: string) => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
    "onUpdate:modelValue"?: (value: unknown) => any;
    "onSearch:input"?: (query: string) => any;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    select: any;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};