@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
348 lines (347 loc) • 9.79 kB
TypeScript
import { PropType } from 'vue';
import { ContextualHelper } from '../../helpers';
/**
* Select component with a trigger and dropdown based on [Vue Select](https://vue-select.org/)
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* The ID of the element.
*/
id: {
type: StringConstructor;
required: false;
default: () => string;
};
/**
* Function to filter items when searching
*/
filter: {
type: FunctionConstructor;
required: false;
default: (items: unknown[], search: string, props: {
label: string;
}) => unknown[];
};
/**
* Disable the select component
*/
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Label of the select component, required because of accessibility reasons
* ATTENTION: this shadows the vue-select prop `label`. If you need access to that use `optionLabel`.
*/
label: {
type: StringConstructor;
required: true;
};
/**
* Hide the label visually, but keep it for accessibility
*/
labelHidden: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* oc-contextual-helper can be injected here
*/
contextualHelper: {
type: PropType<ContextualHelper>;
required: false;
default: any;
};
/**
* Key to use as label when option is an object
* NOTE: this maps to the vue-select prop `label`
*/
optionLabel: {
type: StringConstructor;
default: string;
};
getOptionLabel: {
type: FunctionConstructor;
default(this: any, option: string | Record<string, unknown>): unknown;
};
/**
* Determines if the select field is searchable
*/
searchable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Determines if the select field is clearable
*/
clearable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Determines if the select field loading
*/
loading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* A warning message which is shown below the select.
*/
warningMessage: {
type: StringConstructor;
default: any;
};
/**
* An error message which is shown below the select.
*/
errorMessage: {
type: StringConstructor;
default: any;
};
/**
* Whether or not vertical space below the select should be reserved for a one line message,
* so that content actually appearing there doesn't shift the layout.
*/
fixMessageLine: {
type: BooleanConstructor;
default: boolean;
};
/**
* A description text which is shown below the select field.
*/
descriptionMessage: {
type: StringConstructor;
default: any;
};
/**
* Determines if multiple options can be selected.
*/
multiple: {
type: BooleanConstructor;
default: boolean;
};
/**
* Determines if the select field is read only.
*
* Read only field will be visualized by a lock item and additionally behaves like a disabled field.
* Read only takes effect if the server won't allow to change the value at all,
* disabled should be used instead, if the value can't be changed in a specific context.
*
* For example: If the backend doesn't allow to set the login states for users in general, use read only.
* If it's not allowed to change for the current logged-in User, use disabled.
*
*/
readOnly: {
type: BooleanConstructor;
default: boolean;
};
/**
* Sets the dropdown menu to position: fixed.
* Use in modals, so the dropdown will be able to overflow.
* Positioning will be computed automatically
*/
positionFixed: {
type: BooleanConstructor;
default: boolean;
};
}>, {
select: import('vue').Ref<any, any>;
userInput: (event: Event) => void;
selectDropdownShouldOpen: ({ noDrop, open, mutableLoading }: {
noDrop?: boolean;
open?: boolean;
mutableLoading?: boolean;
}) => boolean;
selectMapKeydown: (map: Record<number, (e: KeyboardEvent) => void>) => {
13: (e: KeyboardEvent) => void;
40: (e: KeyboardEvent) => Promise<void>;
38: (e: KeyboardEvent) => Promise<void>;
};
onSelectKeyDown: (e: KeyboardEvent) => Promise<void>;
onSelectBlur: () => void;
onSelectClick: () => void;
}, {}, {
additionalAttributes(): {
[x: string]: unknown;
};
showMessageLine(): boolean;
messageText(): string;
messageId(): string;
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "search:input")[], "update:modelValue" | "search:input", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* The ID of the element.
*/
id: {
type: StringConstructor;
required: false;
default: () => string;
};
/**
* Function to filter items when searching
*/
filter: {
type: FunctionConstructor;
required: false;
default: (items: unknown[], search: string, props: {
label: string;
}) => unknown[];
};
/**
* Disable the select component
*/
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Label of the select component, required because of accessibility reasons
* ATTENTION: this shadows the vue-select prop `label`. If you need access to that use `optionLabel`.
*/
label: {
type: StringConstructor;
required: true;
};
/**
* Hide the label visually, but keep it for accessibility
*/
labelHidden: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* oc-contextual-helper can be injected here
*/
contextualHelper: {
type: PropType<ContextualHelper>;
required: false;
default: any;
};
/**
* Key to use as label when option is an object
* NOTE: this maps to the vue-select prop `label`
*/
optionLabel: {
type: StringConstructor;
default: string;
};
getOptionLabel: {
type: FunctionConstructor;
default(this: any, option: string | Record<string, unknown>): unknown;
};
/**
* Determines if the select field is searchable
*/
searchable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Determines if the select field is clearable
*/
clearable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Determines if the select field loading
*/
loading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* A warning message which is shown below the select.
*/
warningMessage: {
type: StringConstructor;
default: any;
};
/**
* An error message which is shown below the select.
*/
errorMessage: {
type: StringConstructor;
default: any;
};
/**
* Whether or not vertical space below the select should be reserved for a one line message,
* so that content actually appearing there doesn't shift the layout.
*/
fixMessageLine: {
type: BooleanConstructor;
default: boolean;
};
/**
* A description text which is shown below the select field.
*/
descriptionMessage: {
type: StringConstructor;
default: any;
};
/**
* Determines if multiple options can be selected.
*/
multiple: {
type: BooleanConstructor;
default: boolean;
};
/**
* Determines if the select field is read only.
*
* Read only field will be visualized by a lock item and additionally behaves like a disabled field.
* Read only takes effect if the server won't allow to change the value at all,
* disabled should be used instead, if the value can't be changed in a specific context.
*
* For example: If the backend doesn't allow to set the login states for users in general, use read only.
* If it's not allowed to change for the current logged-in User, use disabled.
*
*/
readOnly: {
type: BooleanConstructor;
default: boolean;
};
/**
* Sets the dropdown menu to position: fixed.
* Use in modals, so the dropdown will be able to overflow.
* Positioning will be computed automatically
*/
positionFixed: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:modelValue"?: (...args: any[]) => any;
"onSearch:input"?: (...args: any[]) => any;
}>, {
filter: Function;
id: string;
loading: boolean;
disabled: boolean;
labelHidden: boolean;
errorMessage: string;
fixMessageLine: boolean;
warningMessage: string;
descriptionMessage: string;
readOnly: boolean;
contextualHelper: ContextualHelper;
optionLabel: string;
getOptionLabel: Function;
searchable: boolean;
clearable: boolean;
multiple: boolean;
positionFixed: boolean;
}, {}, {
VueSelect: any;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;