@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
610 lines (609 loc) • 17.8 kB
TypeScript
/**
* The search bar is an input element used for searching server side resources or to filter local results.
*
* ## Accessibility
*
* ### Landmark role=search
* Given there is only one instance of `<oc-search-bar>` per page/route, this component should communicate its purpose, being the main site search, to screen readers ([explainer of landmark roles](https://www.washington.edu/accessibility/web/landmarks/)). If the component serves as a filter form, it is advised to disable the landmark role via `isFilter="true"`.
*
* ### Making sure a submit button exits
*
* Both a search and filter form does need a submit button, regardless if the button is visually perceivable or not. If a "buttonless" look is desired, use `button-hidden="true"`, which renders the button visually hidden.
*
* The `aria-label` of the loading spinner can be set via `customLoadingAccessibleLabel`. If not set, it will default to "Loading results".
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* Set the search query
*/
value: {
type: StringConstructor;
required: false;
default: any;
};
/**
* The icon to be displayed
*/
icon: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Informative placeholder about the data to be entered
*/
placeholder: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Informative label about the data to be entered
*/
label: {
type: StringConstructor;
required: true;
default: string;
};
/**
* Indicator if the search bar should be of smaller size
*/
small: {
type: BooleanConstructor;
default: boolean;
};
/**
* Determine the button text
*/
buttonLabel: {
type: StringConstructor[];
required: false;
default: string;
};
/**
* Determine the button visibility
*/
buttonHidden: {
type: BooleanConstructor[];
required: false;
default: boolean;
};
/**
* If set to true the search event is triggered on each entered character
*/
typeAhead: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* automatically trim whitespaces around search term
*/
trimQuery: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If set to true data is loaded and the user cannot enter further data
*/
loading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If set to true the search landmark role is removed since it's not the page's main search function anymore
*/
isFilter: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* The aria-label for the loading spinner
*/
loadingAccessibleLabel: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Show a "cancel" button next to the search bar.
*/
showCancelButton: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Variation of the cancel button
*/
cancelButtonVariation: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
/**
* Appearance of the cancel button
*/
cancelButtonAppearance: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
/**
* Handler function for when the cancel button is clicked.
*/
cancelHandler: {
type: FunctionConstructor;
required: false;
default: () => void;
};
}>, {
query: import('vue').Ref<string, string>;
inputIconRightPadding: import('vue').ComputedRef<"125px" | "48px">;
}, {}, {
searchQuery(): string;
spinnerSize(): "xsmall" | "medium";
inputClass(): string[];
loadingAccessibleLabelValue(): string;
}, {
focusSearchInput(): void;
onSearch(): void;
onType(query: string): void;
onCancel(): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "search" | "clear" | "keyup" | "advancedSearch")[], "input" | "search" | "clear" | "keyup" | "advancedSearch", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* Set the search query
*/
value: {
type: StringConstructor;
required: false;
default: any;
};
/**
* The icon to be displayed
*/
icon: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Informative placeholder about the data to be entered
*/
placeholder: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Informative label about the data to be entered
*/
label: {
type: StringConstructor;
required: true;
default: string;
};
/**
* Indicator if the search bar should be of smaller size
*/
small: {
type: BooleanConstructor;
default: boolean;
};
/**
* Determine the button text
*/
buttonLabel: {
type: StringConstructor[];
required: false;
default: string;
};
/**
* Determine the button visibility
*/
buttonHidden: {
type: BooleanConstructor[];
required: false;
default: boolean;
};
/**
* If set to true the search event is triggered on each entered character
*/
typeAhead: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* automatically trim whitespaces around search term
*/
trimQuery: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If set to true data is loaded and the user cannot enter further data
*/
loading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If set to true the search landmark role is removed since it's not the page's main search function anymore
*/
isFilter: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* The aria-label for the loading spinner
*/
loadingAccessibleLabel: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Show a "cancel" button next to the search bar.
*/
showCancelButton: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Variation of the cancel button
*/
cancelButtonVariation: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
/**
* Appearance of the cancel button
*/
cancelButtonAppearance: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
/**
* Handler function for when the cancel button is clicked.
*/
cancelHandler: {
type: FunctionConstructor;
required: false;
default: () => void;
};
}>> & Readonly<{
onInput?: (...args: any[]) => any;
onKeyup?: (...args: any[]) => any;
onClear?: (...args: any[]) => any;
onSearch?: (...args: any[]) => any;
onAdvancedSearch?: (...args: any[]) => any;
}>, {
label: string;
small: boolean;
value: string;
icon: string;
loading: boolean;
placeholder: string;
buttonLabel: string;
buttonHidden: boolean;
typeAhead: boolean;
trimQuery: boolean;
isFilter: boolean;
loadingAccessibleLabel: string;
showCancelButton: boolean;
cancelButtonVariation: string;
cancelButtonAppearance: string;
cancelHandler: Function;
}, {}, {
OcButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
type: {
type: StringConstructor;
default: string;
validator: (value: any) => boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
href: {
type: StringConstructor;
default: any;
};
target: {
type: StringConstructor;
default: any;
validator: (value: string) => boolean;
};
to: {
type: import('vue').PropType<import('vue-router').RouteLocationRaw>;
default: any;
};
ariaLabel: {
type: StringConstructor;
default: any;
};
submit: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
variation: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
appearance: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
justifyContent: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
gapSize: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
showSpinner: {
type: BooleanConstructor;
default: boolean;
};
}>, {}, {}, {
$_ocButton_buttonClass(): string[];
additionalAttributes(): {
disabled: boolean;
type: string;
to: import('vue-router').RouteLocationRaw;
target: string;
href: string;
};
handlers(): {
click: (event: MouseEvent) => void;
};
}, {
$_ocButton_onClick(event: MouseEvent): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
type: {
type: StringConstructor;
default: string;
validator: (value: any) => boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
href: {
type: StringConstructor;
default: any;
};
target: {
type: StringConstructor;
default: any;
validator: (value: string) => boolean;
};
to: {
type: import('vue').PropType<import('vue-router').RouteLocationRaw>;
default: any;
};
ariaLabel: {
type: StringConstructor;
default: any;
};
submit: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
variation: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
appearance: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
justifyContent: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
gapSize: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
showSpinner: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onClick?: (...args: any[]) => any;
}>, {
type: string;
size: string;
variation: string;
target: string;
disabled: boolean;
href: string;
to: import('vue-router').RouteLocationRaw;
ariaLabel: string;
submit: string;
appearance: string;
justifyContent: string;
gapSize: string;
showSpinner: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
OcGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
gutter: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
flex: {
type: BooleanConstructor[];
default: boolean;
};
}>, {}, {}, {
classes(): any[];
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
gutter: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
flex: {
type: BooleanConstructor[];
default: boolean;
};
}>> & Readonly<{}>, {
flex: boolean;
gutter: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
OcIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
name: {
type: StringConstructor;
default: string;
};
fillType: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
accessibleLabel: {
type: StringConstructor;
default: string;
};
type: {
type: StringConstructor;
default: string;
};
size: {
type: StringConstructor;
default: string;
validator: (value: unknown) => boolean;
};
variation: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
color: {
type: StringConstructor;
required: false;
default: string;
};
}>, {}, {}, {
svgTitleId(): string;
nameWithFillType(): string;
}, {
sizeClass(c: string): string;
variationClass(c: string): string;
prefix(string: string): string;
transformSvgElement(svg: SVGElement): SVGElement;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "loaded"[], "loaded", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
name: {
type: StringConstructor;
default: string;
};
fillType: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
accessibleLabel: {
type: StringConstructor;
default: string;
};
type: {
type: StringConstructor;
default: string;
};
size: {
type: StringConstructor;
default: string;
validator: (value: unknown) => boolean;
};
variation: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
color: {
type: StringConstructor;
required: false;
default: string;
};
}>> & Readonly<{
onLoaded?: (...args: any[]) => any;
}>, {
name: string;
type: string;
fillType: string;
accessibleLabel: string;
size: string;
variation: string;
color: string;
}, {}, {
InlineSvg: import('vue').DefineComponent<import('vue-inline-svg').InlineSvgProps, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, import('vue-inline-svg').InlineSvgProps>;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
OcSpinner: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
ariaLabel: {
type: StringConstructor;
required: false;
default: string;
};
size: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
}>, {}, {}, {
$_ocSpinner_class(): string[];
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
ariaLabel: {
type: StringConstructor;
required: false;
default: string;
};
size: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
}>> & Readonly<{}>, {
size: string;
ariaLabel: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;