@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
663 lines (662 loc) • 21.1 kB
TypeScript
import { PropType } from 'vue';
import { BreadcrumbItem } from '../../helpers';
/**
* Displays a breadcrumb. Each item in the items property has the following elements:
*
* - text: mandatory element, holds the text which is to be displayed in the breadcrumb
* - to: optional element, the vue router link
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* Id for the breadcrumbs. If it's empty, a generated one will be used.
*/
id: {
type: StringConstructor;
required: false;
default: () => string;
};
/**
* Array of breadcrumb items
*/
items: {
type: PropType<BreadcrumbItem[]>;
required: true;
};
/**
* Variation of breadcrumbs
* Can be `default` or `lead`
*/
variation: {
type: StringConstructor;
required: false;
default: string;
validator: (value: unknown) => value is "default" | "lead";
};
/**
* Defines the padding size around the drop content. Defaults to `medium`.
*
* @values xsmall, small, medium, large, xlarge, xxlarge, xxxlarge, remove
*/
contextMenuPadding: {
type: StringConstructor;
required: false;
default: string;
validator: (value: unknown) => boolean;
};
/**
* Defines the maximum width of the breadcrumb. If the breadcrumb is wider than the given value, the breadcrumb
* will be reduced from the left side.
* If the value is -1, the breadcrumb will not be reduced.
*/
maxWidth: {
type: NumberConstructor;
required: false;
default: number;
};
/**
* Defines the number of items that should be always displayed at the beginning of the breadcrumb.
* The default value is 2. e.g. Personal > ... > XYZ
*/
truncationOffset: {
type: NumberConstructor;
required: false;
default: number;
};
/**
* Determines if the last breadcrumb item should have context menu actions.
*/
showContextActions: {
type: BooleanConstructor;
default: boolean;
};
}>, {
currentFolder: import('vue').ComputedRef<BreadcrumbItem>;
parentFolderTo: import('vue').ComputedRef<import('vue-router').RouteLocationRaw>;
contextMenuLabel: import('vue').ComputedRef<string>;
getAriaCurrent: (index: number) => "page" | null;
visibleItems: import('vue').Ref<{
id?: string;
text: string;
to?: string | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
path: string;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
} | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
name?: import('vue-router').RouteRecordName;
params?: import('vue-router').RouteParamsRaw;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
};
allowContextActions?: boolean;
onClick?: () => void;
isTruncationPlaceholder?: boolean;
isStaticNav?: boolean;
}[], BreadcrumbItem[] | {
id?: string;
text: string;
to?: string | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
path: string;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
} | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
name?: import('vue-router').RouteRecordName;
params?: import('vue-router').RouteParamsRaw;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
};
allowContextActions?: boolean;
onClick?: () => void;
isTruncationPlaceholder?: boolean;
isStaticNav?: boolean;
}[]>;
hiddenItems: import('vue').Ref<{
id?: string;
text: string;
to?: string | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
path: string;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
} | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
name?: import('vue-router').RouteRecordName;
params?: import('vue-router').RouteParamsRaw;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
};
allowContextActions?: boolean;
onClick?: () => void;
isTruncationPlaceholder?: boolean;
isStaticNav?: boolean;
}[], BreadcrumbItem[] | {
id?: string;
text: string;
to?: string | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
path: string;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
} | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
name?: import('vue-router').RouteRecordName;
params?: import('vue-router').RouteParamsRaw;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
};
allowContextActions?: boolean;
onClick?: () => void;
isTruncationPlaceholder?: boolean;
isStaticNav?: boolean;
}[]>;
renderBreadcrumb: () => void;
displayItems: import('vue').Ref<{
id?: string;
text: string;
to?: string | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
path: string;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
} | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
name?: import('vue-router').RouteRecordName;
params?: import('vue-router').RouteParamsRaw;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
};
allowContextActions?: boolean;
onClick?: () => void;
isTruncationPlaceholder?: boolean;
isStaticNav?: boolean;
}[], BreadcrumbItem[] | {
id?: string;
text: string;
to?: string | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
path: string;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
} | {
query?: import('vue-router').LocationQueryRaw;
hash?: string;
name?: import('vue-router').RouteRecordName;
params?: import('vue-router').RouteParamsRaw;
replace?: boolean;
force?: boolean;
state?: import('vue-router').HistoryState;
};
allowContextActions?: boolean;
onClick?: () => void;
isTruncationPlaceholder?: boolean;
isStaticNav?: boolean;
}[]>;
lastHiddenItem: import('vue').ComputedRef<BreadcrumbItem | {
to: {};
}>;
dropItemEvent: (item: BreadcrumbItem, index: number) => void;
dropItemStyling: (item: BreadcrumbItem, index: number, leaving: boolean, event: DragEvent) => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "itemDroppedBreadcrumb"[], "itemDroppedBreadcrumb", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* Id for the breadcrumbs. If it's empty, a generated one will be used.
*/
id: {
type: StringConstructor;
required: false;
default: () => string;
};
/**
* Array of breadcrumb items
*/
items: {
type: PropType<BreadcrumbItem[]>;
required: true;
};
/**
* Variation of breadcrumbs
* Can be `default` or `lead`
*/
variation: {
type: StringConstructor;
required: false;
default: string;
validator: (value: unknown) => value is "default" | "lead";
};
/**
* Defines the padding size around the drop content. Defaults to `medium`.
*
* @values xsmall, small, medium, large, xlarge, xxlarge, xxxlarge, remove
*/
contextMenuPadding: {
type: StringConstructor;
required: false;
default: string;
validator: (value: unknown) => boolean;
};
/**
* Defines the maximum width of the breadcrumb. If the breadcrumb is wider than the given value, the breadcrumb
* will be reduced from the left side.
* If the value is -1, the breadcrumb will not be reduced.
*/
maxWidth: {
type: NumberConstructor;
required: false;
default: number;
};
/**
* Defines the number of items that should be always displayed at the beginning of the breadcrumb.
* The default value is 2. e.g. Personal > ... > XYZ
*/
truncationOffset: {
type: NumberConstructor;
required: false;
default: number;
};
/**
* Determines if the last breadcrumb item should have context menu actions.
*/
showContextActions: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onItemDroppedBreadcrumb?: (...args: any[]) => any;
}>, {
variation: string;
id: string;
maxWidth: number;
contextMenuPadding: string;
truncationOffset: number;
showContextActions: boolean;
}, {}, {
OcDrop: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
dropId: {
type: StringConstructor;
required: false;
default: () => string;
};
popperOptions: {
type: ObjectConstructor;
required: false;
default: () => {};
};
toggle: {
type: StringConstructor;
default: string;
};
position: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
mode: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
closeOnClick: {
type: BooleanConstructor;
required: false;
};
isNested: {
type: BooleanConstructor;
required: false;
};
target: {
type: StringConstructor;
required: false;
default: any;
};
paddingSize: {
type: StringConstructor;
required: false;
default: string;
validator: (value: unknown) => boolean;
};
offset: {
type: StringConstructor;
required: false;
default: any;
};
}>, {
drop: Readonly<import('vue').ShallowRef<HTMLElement>>;
tippy: import('vue').Ref<any, any>;
show: (duration?: number) => void;
hide: (duration?: number) => void;
onClick: () => void;
}, {}, {
triggerMapping(): string;
paddingClass(): string;
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("hideDrop" | "showDrop")[], "hideDrop" | "showDrop", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
dropId: {
type: StringConstructor;
required: false;
default: () => string;
};
popperOptions: {
type: ObjectConstructor;
required: false;
default: () => {};
};
toggle: {
type: StringConstructor;
default: string;
};
position: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
mode: {
type: StringConstructor;
default: string;
validator: (value: string) => boolean;
};
closeOnClick: {
type: BooleanConstructor;
required: false;
};
isNested: {
type: BooleanConstructor;
required: false;
};
target: {
type: StringConstructor;
required: false;
default: any;
};
paddingSize: {
type: StringConstructor;
required: false;
default: string;
validator: (value: unknown) => boolean;
};
offset: {
type: StringConstructor;
required: false;
default: any;
};
}>> & Readonly<{
onHideDrop?: (...args: any[]) => any;
onShowDrop?: (...args: any[]) => any;
}>, {
target: string;
offset: string;
popperOptions: Record<string, any>;
toggle: string;
dropId: string;
position: string;
mode: string;
closeOnClick: boolean;
isNested: boolean;
paddingSize: 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>;
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;