@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
328 lines (327 loc) • 10.5 kB
TypeScript
import { PropType } from 'vue';
type Indicator = {
id: string;
icon: string;
label: string;
handler?: any;
accessibleDescription?: string;
visible?: boolean;
type?: string;
fillType?: string;
};
/**
* Status indicators which can be attatched to a resource
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* A resource to which the indicators are attatched to
*/
resource: {
type: ObjectConstructor;
required: true;
};
/**
* An array of indicators to be displayed. Indicator object has following properties:
*
* Required:
* id: Id of the indicator
* icon: Icon of the indicator
* label: String to be used as a accessible label and tooltip for the indicator
*
* Optional:
* handler: An action to be triggered when the indicator is clicked. Receives the resource.
* accessibleDescription: A string to be used as a accessible description for the indicator. It renders an element only visible for screenreaders to provide additional context
*/
indicators: {
type: PropType<Indicator[]>;
required: true;
};
/**
* Disables the handler for all indicators. This is useful e.g. for disabled resources.
*/
disableHandler: {
type: BooleanConstructor;
default: boolean;
};
}>, {
accessibleDescriptionIds: import('vue').Ref<Record<string, string>, Record<string, string>>;
hasHandler: (indicator: Indicator) => boolean;
getIndicatorDescriptionId: (indicator: Indicator) => string | null;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* A resource to which the indicators are attatched to
*/
resource: {
type: ObjectConstructor;
required: true;
};
/**
* An array of indicators to be displayed. Indicator object has following properties:
*
* Required:
* id: Id of the indicator
* icon: Icon of the indicator
* label: String to be used as a accessible label and tooltip for the indicator
*
* Optional:
* handler: An action to be triggered when the indicator is clicked. Receives the resource.
* accessibleDescription: A string to be used as a accessible description for the indicator. It renders an element only visible for screenreaders to provide additional context
*/
indicators: {
type: PropType<Indicator[]>;
required: true;
};
/**
* Disables the handler for all indicators. This is useful e.g. for disabled resources.
*/
disableHandler: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
disableHandler: boolean;
}, {}, {
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>;
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: 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: 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>;
}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;