@synergy-design-system/vue/dist/components/SynVueCombobox.vue.d.ts

Vue3 wrappers for the Synergy Design System

import { SynChangeEvent, SynClearEvent, SynInputEvent, SynFocusEvent, SynBlurEvent, SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynInvalidEvent, SynErrorEvent, SynCombobox } from '@synergy-design-system/components';
export type { SynChangeEvent } from '@synergy-design-system/components';
export type { SynClearEvent } from '@synergy-design-system/components';
export type { SynInputEvent } from '@synergy-design-system/components';
export type { SynFocusEvent } from '@synergy-design-system/components';
export type { SynBlurEvent } from '@synergy-design-system/components';
export type { SynShowEvent } from '@synergy-design-system/components';
export type { SynAfterShowEvent } from '@synergy-design-system/components';
export type { SynHideEvent } from '@synergy-design-system/components';
export type { SynAfterHideEvent } from '@synergy-design-system/components';
export type { SynInvalidEvent } from '@synergy-design-system/components';
export type { SynErrorEvent } from '@synergy-design-system/components';
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    /**
     * The name of the combobox, submitted as a name/value pair with form data.
     */
    name?: SynCombobox["name"];
    /**
     * The current value of the combobox, submitted as a name/value pair with form data.
     */
    value?: SynCombobox["value"];
    /**
     * The combobox's size.
     */
    size?: SynCombobox["size"];
    /**
     * Placeholder text to show as a hint when the combobox is empty.
     */
    placeholder?: SynCombobox["placeholder"];
    /**
     * Disables the combobox control.
     */
    disabled?: SynCombobox["disabled"];
    /**
     * Adds a clear button when the combobox is not empty.
     */
    clearable?: SynCombobox["clearable"];
    /**
  * Indicates whether or not the combobox is open.
  You can toggle this attribute to show and hide the listbox, or you can use the `show()`
  and `hide()` methods and this attribute will reflect the combobox's open state.
   */
    open?: SynCombobox["open"];
    /**
  * Enable this option to prevent the listbox from being clipped,
  when the component is placed inside a container with `overflow: auto|scroll`.
  Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
   */
    hoist?: SynCombobox["hoist"];
    /**
     * The combobox's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    label?: SynCombobox["label"];
    /**
  * The preferred placement of the combobox's menu.
  Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
   */
    placement?: SynCombobox["placement"];
    /**
     * The combobox's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    helpText?: SynCombobox["helpText"];
    /**
  * By default, form controls are associated with the nearest containing `<form>` element.
  This attribute allows you to place the form control outside of a form and associate it
  with the form that has this `id`.
  The form must be in the same document or shadow root for this to work.
   */
    form?: SynCombobox["form"];
    /**
     * The combobox's required attribute.
     */
    required?: SynCombobox["required"];
    /**
  * A function that customizes the rendered option.
  * The first argument is the option, the second
  is the query string, which is typed into the combobox.
  The function should return either a Lit TemplateResult or a string containing trusted HTML
  to render in the shown list of filtered options.
  If the query string should be highlighted use the `highlightOptionRenderer` function.
   */
    getOption?: SynCombobox["getOption"];
    /**
  * A function used to filter options in the combobox component.
  The default filter method is a case- and diacritic-insensitive string comparison.
   */
    filter?: SynCombobox["filter"];
    /**
     * Support for two way data binding
     */
    modelValue?: SynCombobox["value"];
}, {
    nativeElement: import('vue').Ref<SynCombobox | undefined, SynCombobox | undefined>;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "syn-show": (e: SynShowEvent) => any;
    "syn-after-show": (e: SynAfterShowEvent) => any;
    "syn-hide": (e: SynHideEvent) => any;
    "syn-after-hide": (e: SynAfterHideEvent) => any;
    "syn-blur": (e: SynBlurEvent) => any;
    "syn-focus": (e: SynFocusEvent) => any;
    "syn-invalid": (e: SynInvalidEvent) => any;
    "syn-change": (e: SynChangeEvent) => any;
    "syn-input": (e: SynInputEvent) => any;
    "update:modelValue": (newValue: string) => any;
    "syn-clear": (e: SynClearEvent) => any;
    "syn-error": (e: SynErrorEvent) => any;
}, string, import('vue').PublicProps, Readonly<{
    /**
     * The name of the combobox, submitted as a name/value pair with form data.
     */
    name?: SynCombobox["name"];
    /**
     * The current value of the combobox, submitted as a name/value pair with form data.
     */
    value?: SynCombobox["value"];
    /**
     * The combobox's size.
     */
    size?: SynCombobox["size"];
    /**
     * Placeholder text to show as a hint when the combobox is empty.
     */
    placeholder?: SynCombobox["placeholder"];
    /**
     * Disables the combobox control.
     */
    disabled?: SynCombobox["disabled"];
    /**
     * Adds a clear button when the combobox is not empty.
     */
    clearable?: SynCombobox["clearable"];
    /**
  * Indicates whether or not the combobox is open.
  You can toggle this attribute to show and hide the listbox, or you can use the `show()`
  and `hide()` methods and this attribute will reflect the combobox's open state.
   */
    open?: SynCombobox["open"];
    /**
  * Enable this option to prevent the listbox from being clipped,
  when the component is placed inside a container with `overflow: auto|scroll`.
  Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
   */
    hoist?: SynCombobox["hoist"];
    /**
     * The combobox's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    label?: SynCombobox["label"];
    /**
  * The preferred placement of the combobox's menu.
  Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
   */
    placement?: SynCombobox["placement"];
    /**
     * The combobox's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    helpText?: SynCombobox["helpText"];
    /**
  * By default, form controls are associated with the nearest containing `<form>` element.
  This attribute allows you to place the form control outside of a form and associate it
  with the form that has this `id`.
  The form must be in the same document or shadow root for this to work.
   */
    form?: SynCombobox["form"];
    /**
     * The combobox's required attribute.
     */
    required?: SynCombobox["required"];
    /**
  * A function that customizes the rendered option.
  * The first argument is the option, the second
  is the query string, which is typed into the combobox.
  The function should return either a Lit TemplateResult or a string containing trusted HTML
  to render in the shown list of filtered options.
  If the query string should be highlighted use the `highlightOptionRenderer` function.
   */
    getOption?: SynCombobox["getOption"];
    /**
  * A function used to filter options in the combobox component.
  The default filter method is a case- and diacritic-insensitive string comparison.
   */
    filter?: SynCombobox["filter"];
    /**
     * Support for two way data binding
     */
    modelValue?: SynCombobox["value"];
}> & Readonly<{
    "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
    "onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;
    "onSyn-hide"?: ((e: SynHideEvent) => any) | undefined;
    "onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
    "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
    "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
    "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
    "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
    "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
    "onSyn-error"?: ((e: SynErrorEvent) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    nativeElement: unknown;
}, any>, {
    default?(_: {}): any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};