@ownclouders/design-system

import { Item, FieldType } from '../../helpers'; import { PropType } from 'vue'; /** * A table component with dynamic layout and data. */ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ /** * The data for the table. Each array item will be rendered as one table row. Each array item needs to have a * unique identifier. By default we expect this to be an `id` field. If your field has a different name, please * specify it in the `id-key` property of oc-table. */ data: { type: PropType<Item[]>; required: true; }; /** * Name of the id property of your data items. See `data` for details on how to use it. The [idKey] is a required field * within your data items if you want to have working highlighting. For data representation it is not needed. */ idKey: { type: StringConstructor; default: string; }; /** * Closure function to mutate the item id into a valid DOM selector */ itemDomSelector: { type: FunctionConstructor; required: false; default(item: Item): string; }; /** * The column layout of the table. * * Each field can have the following data: * - **name**: values need to be keys of your data items. Required. * - **title**: title as displayed in the table header. Optional, falls back to the value of name. * - **headerType**: the header field type, can be `slot`, entirely absent or unknown. If absent or unknown, the data will be rendered into a plain table cell. * - **type**: the field type, can be `slot`, `callback`, entirely absent or unknown. If absent or unknown, the data will be rendered into a plain table cell. * - **callback**: if `type="callback"` the return value of field.callback will be rendered into a plain table cell. * - **alignH**: horizontal cell content alignment, can be `left`, `center` or `right`. Defaults to `left`. * - **alignV**: vertical cell content alignment, can be `top`, `middle` or `bottom`. Defaults to `middle`. * - **width**: horizontal size of a cell, can be `auto`, `shrink` or `expand`. Defaults to `auto`. * - **wrap**: text behaviour of a data cell, can be `truncate`, `overflow`, `nowrap`, `break`. Omitted if not set. Header cells are always fixed to `nowrap`. * - **thClass**:additional classes on header cells, provided as a string, classes separated by spaces. Optional, falls back to an empty string. * - **tdClass**: additional classes on data cells, provided as a string, classes separated by spaces. Optional, falls back to an empty string. * - **sortable**: defines if the column is sortable, can be `true` or `false`. */ fields: { type: PropType<FieldType[]>; required: true; }; /** * Asserts whether the table has a header. The header markup is defined in the `fields` array. */ hasHeader: { type: BooleanConstructor; default: boolean; }; /** * Asserts whether the header of the table is sticky. */ sticky: { type: BooleanConstructor; required: false; default: boolean; }; /** * Asserts whether table rows should be highlighted when hovered. */ hover: { type: BooleanConstructor; default: boolean; }; /** * The ids of highlighted data items. Null or an empty string/array for no highlighting. */ highlighted: { type: (StringConstructor | ArrayConstructor)[]; default: any; }; /** * The ids of disabled data items. Empty array for no disabled items. */ disabled: { type: PropType<Array<string | number>>; default: () => Array<string | number>; }; /** * Top position of header used when the header is sticky in pixels */ headerPosition: { type: NumberConstructor; required: false; default: number; }; /** * Sets the padding size for x axis * @values xsmall, small, medium, large, xlarge */ paddingX: { type: StringConstructor; required: false; default: string; validator: (size: string) => boolean; }; /** * Enable Drag & Drop events */ dragDrop: { type: BooleanConstructor; required: false; default: boolean; }; /** * Array of items that should be selected by default. */ selection: { type: PropType<Item[]>; required: false; default: () => Item[]; }; /** * Determines if the table content should be loaded lazily. */ lazy: { type: BooleanConstructor; default: boolean; }; /** * Show that the table is sorted ascendingly/descendingly (no actual sorting takes place) */ sortDir: { type: StringConstructor; required: false; default: any; validator: (value: string) => boolean; }; /** * Show that the table is sorted by this column (no actual sorting takes place) */ sortBy: { type: StringConstructor; required: false; default: any; }; /** * This is only relevant for CERN and can be ignored in any other cases. */ groupingSettings: { type: ObjectConstructor; required: false; default: any; }; }>, { constants: { EVENT_THEAD_CLICKED: "thead-clicked"; EVENT_TROW_CLICKED: "highlight"; EVENT_TROW_MOUNTED: "rowMounted"; EVENT_TROW_CONTEXTMENU: "contextmenuClicked"; }; }, {}, { isSortable(): boolean; tableClasses(): string[]; fullColspan(): number; }, { dragOver(event: DragEvent): void; dragStart(item: Item, event: DragEvent): void; dropRowEvent(selector: Item, event: DragEvent): void; dropRowStyling(selector: Item, leaving: boolean, event: DragEvent): void; isFieldTypeSlot(field: FieldType): boolean; isFieldTypeCallback(field: FieldType): boolean; extractFieldTitle(field: FieldType): string; extractTableProps(): { class: string[]; }; extractThProps(field: FieldType, index: number): Record<string, string>; extractTbodyTrProps(item: Item, index: number): { class: string[]; lazy: { colspan: number; }; }; extractTdProps(field: FieldType, index: number, item: Item): Record<string, string>; extractCellProps(field: FieldType): Record<string, string>; isHighlighted(item: Item): boolean; isDisabled(item: Item): boolean; cellKey(field: FieldType, index: number, item: Item): string; getSortLabel(name: string): string; extractSortThProps(props: Record<string, string>, field: FieldType): void; fieldIsSortable({ sortable }: FieldType): boolean; handleSort(field: FieldType): void; }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("thead-clicked" | "highlight" | "rowMounted" | "contextmenuClicked" | "itemDropped" | "itemDragged" | "sort" | "itemVisible" | "dropRowStyling")[], "thead-clicked" | "highlight" | "rowMounted" | "contextmenuClicked" | "itemDropped" | "itemDragged" | "sort" | "itemVisible" | "dropRowStyling", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ /** * The data for the table. Each array item will be rendered as one table row. Each array item needs to have a * unique identifier. By default we expect this to be an `id` field. If your field has a different name, please * specify it in the `id-key` property of oc-table. */ data: { type: PropType<Item[]>; required: true; }; /** * Name of the id property of your data items. See `data` for details on how to use it. The [idKey] is a required field * within your data items if you want to have working highlighting. For data representation it is not needed. */ idKey: { type: StringConstructor; default: string; }; /** * Closure function to mutate the item id into a valid DOM selector */ itemDomSelector: { type: FunctionConstructor; required: false; default(item: Item): string; }; /** * The column layout of the table. * * Each field can have the following data: * - **name**: values need to be keys of your data items. Required. * - **title**: title as displayed in the table header. Optional, falls back to the value of name. * - **headerType**: the header field type, can be `slot`, entirely absent or unknown. If absent or unknown, the data will be rendered into a plain table cell. * - **type**: the field type, can be `slot`, `callback`, entirely absent or unknown. If absent or unknown, the data will be rendered into a plain table cell. * - **callback**: if `type="callback"` the return value of field.callback will be rendered into a plain table cell. * - **alignH**: horizontal cell content alignment, can be `left`, `center` or `right`. Defaults to `left`. * - **alignV**: vertical cell content alignment, can be `top`, `middle` or `bottom`. Defaults to `middle`. * - **width**: horizontal size of a cell, can be `auto`, `shrink` or `expand`. Defaults to `auto`. * - **wrap**: text behaviour of a data cell, can be `truncate`, `overflow`, `nowrap`, `break`. Omitted if not set. Header cells are always fixed to `nowrap`. * - **thClass**:additional classes on header cells, provided as a string, classes separated by spaces. Optional, falls back to an empty string. * - **tdClass**: additional classes on data cells, provided as a string, classes separated by spaces. Optional, falls back to an empty string. * - **sortable**: defines if the column is sortable, can be `true` or `false`. */ fields: { type: PropType<FieldType[]>; required: true; }; /** * Asserts whether the table has a header. The header markup is defined in the `fields` array. */ hasHeader: { type: BooleanConstructor; default: boolean; }; /** * Asserts whether the header of the table is sticky. */ sticky: { type: BooleanConstructor; required: false; default: boolean; }; /** * Asserts whether table rows should be highlighted when hovered. */ hover: { type: BooleanConstructor; default: boolean; }; /** * The ids of highlighted data items. Null or an empty string/array for no highlighting. */ highlighted: { type: (StringConstructor | ArrayConstructor)[]; default: any; }; /** * The ids of disabled data items. Empty array for no disabled items. */ disabled: { type: PropType<Array<string | number>>; default: () => Array<string | number>; }; /** * Top position of header used when the header is sticky in pixels */ headerPosition: { type: NumberConstructor; required: false; default: number; }; /** * Sets the padding size for x axis * @values xsmall, small, medium, large, xlarge */ paddingX: { type: StringConstructor; required: false; default: string; validator: (size: string) => boolean; }; /** * Enable Drag & Drop events */ dragDrop: { type: BooleanConstructor; required: false; default: boolean; }; /** * Array of items that should be selected by default. */ selection: { type: PropType<Item[]>; required: false; default: () => Item[]; }; /** * Determines if the table content should be loaded lazily. */ lazy: { type: BooleanConstructor; default: boolean; }; /** * Show that the table is sorted ascendingly/descendingly (no actual sorting takes place) */ sortDir: { type: StringConstructor; required: false; default: any; validator: (value: string) => boolean; }; /** * Show that the table is sorted by this column (no actual sorting takes place) */ sortBy: { type: StringConstructor; required: false; default: any; }; /** * This is only relevant for CERN and can be ignored in any other cases. */ groupingSettings: { type: ObjectConstructor; required: false; default: any; }; }>> & Readonly<{ onItemVisible?: (...args: any[]) => any; onHighlight?: (...args: any[]) => any; "onThead-clicked"?: (...args: any[]) => any; onRowMounted?: (...args: any[]) => any; onContextmenuClicked?: (...args: any[]) => any; onItemDropped?: (...args: any[]) => any; onItemDragged?: (...args: any[]) => any; onSort?: (...args: any[]) => any; onDropRowStyling?: (...args: any[]) => any; }>, { lazy: boolean; disabled: (string | number)[]; sticky: boolean; hover: boolean; idKey: string; itemDomSelector: Function; hasHeader: boolean; highlighted: string | unknown[]; headerPosition: number; paddingX: string; dragDrop: boolean; selection: Item[]; sortDir: string; sortBy: string; groupingSettings: Record<string, any>; }, {}, { OcThead: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; OcTbody: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; OcTr: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ lazy: { type: ObjectConstructor; required: false; default: any; }; }>, { observerTarget: import('vue').Ref<HTMLElement, HTMLElement>; isHidden: import('vue').ComputedRef<boolean>; lazyColspan: import('vue').ComputedRef<any>; }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "contextmenu" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "mouseleave" | "itemVisible")[], "click" | "contextmenu" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "mouseleave" | "itemVisible", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ lazy: { type: ObjectConstructor; required: false; default: any; }; }>> & Readonly<{ onDragenter?: (...args: any[]) => any; onDragleave?: (...args: any[]) => any; onDragover?: (...args: any[]) => any; onDragstart?: (...args: any[]) => any; onDrop?: (...args: any[]) => any; onClick?: (...args: any[]) => any; onContextmenu?: (...args: any[]) => any; onMouseleave?: (...args: any[]) => any; onItemVisible?: (...args: any[]) => any; }>, { lazy: Record<string, any>; }, {}, { OcTd: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>> & Readonly<{}>, { width: string; alignH: string; alignV: string; wrap: string; }, {}, { OcTableCell: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ type: { type: StringConstructor; default: string; required: false; validator: (type: string) => boolean; }; alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>, {}, {}, { cellClasses(): string[]; }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ type: { type: StringConstructor; default: string; required: false; validator: (type: string) => boolean; }; alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>> & Readonly<{ onClick?: (...args: any[]) => any; }>, { type: string; width: string; alignH: string; alignV: string; wrap: string; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; OcTh: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: string; validator: (wrap: string) => boolean; }; }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: string; validator: (wrap: string) => boolean; }; }>> & Readonly<{ onClick?: (...args: any[]) => any; }>, { width: string; alignH: string; alignV: string; wrap: string; }, {}, { OcTableCell: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ type: { type: StringConstructor; default: string; required: false; validator: (type: string) => boolean; }; alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>, {}, {}, { cellClasses(): string[]; }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ type: { type: StringConstructor; default: string; required: false; validator: (type: string) => boolean; }; alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>> & Readonly<{ onClick?: (...args: any[]) => any; }>, { type: string; width: string; alignH: string; alignV: string; wrap: string; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; OcTd: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>> & Readonly<{}>, { width: string; alignH: string; alignV: string; wrap: string; }, {}, { OcTableCell: import('vue').DefineComponent<import('vue').ExtractPropTypes<{ type: { type: StringConstructor; default: string; required: false; validator: (type: string) => boolean; }; alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>, {}, {}, { cellClasses(): string[]; }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{ type: { type: StringConstructor; default: string; required: false; validator: (type: string) => boolean; }; alignH: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; alignV: { type: StringConstructor; default: string; validator: (alignment: string) => boolean; }; width: { type: StringConstructor; default: string; validator: (width: string) => boolean; }; wrap: { type: StringConstructor; default: any; validator: (wrap: string) => boolean; }; }>> & Readonly<{ onClick?: (...args: any[]) => any; }>, { type: string; width: string; alignH: string; alignV: string; wrap: string; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; }, {}, 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;