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

Vue3 wrappers for the Synergy Design System

import { SynChangeEvent, SynClearEvent, SynInputEvent, SynFocusEvent, SynBlurEvent, SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynInvalidEvent } from '@synergy-design-system/components';
import { default as SynSelect } from '@synergy-design-system/components/components/select/select.component.js';
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';
declare const _default: typeof __VLS_export;
export default _default;
declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
    /**
  * The delimiter to use when setting the value when `multiple` is enabled.
  The default is a space, but you can set it to a comma or other character.
   */
    delimiter?: SynSelect["delimiter"];
    /**
     * The name of the select, submitted as a name/value pair with form data.
     */
    name?: SynSelect["name"];
    /**
     * The select's size.
     */
    size?: SynSelect["size"];
    /**
     * Placeholder text to show as a hint when the select is empty.
     */
    placeholder?: SynSelect["placeholder"];
    /**
     * Allows more than one option to be selected.
     */
    multiple?: SynSelect["multiple"];
    /**
  * The maximum number of selected options to show when `multiple` is true.
  * After the maximum, "+n" will be shown to
  indicate the number of additional items that are selected.
  * Set to 0 to remove the limit.
   */
    maxOptionsVisible?: SynSelect["maxOptionsVisible"];
    /**
     * Disables the select control.
     */
    disabled?: SynSelect["disabled"];
    /**
     * Sets the select to a readonly state.
     */
    readonly?: SynSelect["readonly"];
    /**
     * Adds a clear button when the select is not empty.
     */
    clearable?: SynSelect["clearable"];
    /**
  * Indicates whether or not the select is open.
  * You can toggle this attribute to show and hide the menu, or you can
  use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
   */
    open?: SynSelect["open"];
    /**
     * The select's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    label?: SynSelect["label"];
    /**
  * The preferred placement of the select's menu.
  * Note that the actual placement may vary as needed to keep the listbox
  inside of the viewport.
   */
    placement?: SynSelect["placement"];
    /**
     * The select's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    helpText?: SynSelect["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?: SynSelect["form"];
    /**
     * The select's required attribute.
     */
    required?: SynSelect["required"];
    /**
  * A function that customizes the tags to be rendered when multiple=true.
  * The first argument is the option, the second
  is the current tag's index.
  * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
  the specified value.
   */
    getTag?: SynSelect["getTag"];
    /**
  * The current value of the select, submitted as a name/value pair with form data.
  * When `multiple` is enabled, the
  value attribute will be a space-delimited list of values based on the options selected, and the value property will
  be an array.
  * **For this reason, values must not contain spaces.**
   */
    value?: SynSelect["value"];
    /**
     * Support for two way data binding
     */
    modelValue?: SynSelect["value"];
}, {
    nativeElement: import('vue').Ref<SynSelect | undefined, SynSelect | 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 | number | (string | number)[]) => any;
    "syn-clear": (e: SynClearEvent) => any;
}, string, import('vue').PublicProps, Readonly<{
    /**
  * The delimiter to use when setting the value when `multiple` is enabled.
  The default is a space, but you can set it to a comma or other character.
   */
    delimiter?: SynSelect["delimiter"];
    /**
     * The name of the select, submitted as a name/value pair with form data.
     */
    name?: SynSelect["name"];
    /**
     * The select's size.
     */
    size?: SynSelect["size"];
    /**
     * Placeholder text to show as a hint when the select is empty.
     */
    placeholder?: SynSelect["placeholder"];
    /**
     * Allows more than one option to be selected.
     */
    multiple?: SynSelect["multiple"];
    /**
  * The maximum number of selected options to show when `multiple` is true.
  * After the maximum, "+n" will be shown to
  indicate the number of additional items that are selected.
  * Set to 0 to remove the limit.
   */
    maxOptionsVisible?: SynSelect["maxOptionsVisible"];
    /**
     * Disables the select control.
     */
    disabled?: SynSelect["disabled"];
    /**
     * Sets the select to a readonly state.
     */
    readonly?: SynSelect["readonly"];
    /**
     * Adds a clear button when the select is not empty.
     */
    clearable?: SynSelect["clearable"];
    /**
  * Indicates whether or not the select is open.
  * You can toggle this attribute to show and hide the menu, or you can
  use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
   */
    open?: SynSelect["open"];
    /**
     * The select's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    label?: SynSelect["label"];
    /**
  * The preferred placement of the select's menu.
  * Note that the actual placement may vary as needed to keep the listbox
  inside of the viewport.
   */
    placement?: SynSelect["placement"];
    /**
     * The select's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    helpText?: SynSelect["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?: SynSelect["form"];
    /**
     * The select's required attribute.
     */
    required?: SynSelect["required"];
    /**
  * A function that customizes the tags to be rendered when multiple=true.
  * The first argument is the option, the second
  is the current tag's index.
  * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
  the specified value.
   */
    getTag?: SynSelect["getTag"];
    /**
  * The current value of the select, submitted as a name/value pair with form data.
  * When `multiple` is enabled, the
  value attribute will be a space-delimited list of values based on the options selected, and the value property will
  be an array.
  * **For this reason, values must not contain spaces.**
   */
    value?: SynSelect["value"];
    /**
     * Support for two way data binding
     */
    modelValue?: SynSelect["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 | number | (string | number)[]) => any) | undefined;
    "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
    default?: (props: {}) => any;
}>;
type __VLS_WithSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};