@synergy-design-system/vue/dist/components/SynVuePagination.vue.d.ts

Vue3 wrappers for the Synergy Design System

import { SynPaginationPageChangedEvent, SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
import { default as SynPagination } from '@synergy-design-system/components/components/pagination/pagination.component.js';
export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
declare const _default: typeof __VLS_export;
export default _default;
declare const __VLS_export: import('vue').DefineComponent<{
    /**
     * When true, a divider is displayed at the top of the pagination component.
     */
    divider?: SynPagination["divider"];
    /**
     * When true, the pagination controls are disabled and non-interactive.
     */
    disabled?: SynPagination["disabled"];
    /**
     * The size of the pagination controls.
     */
    size?: SynPagination["size"];
    /**
  * The current page number.
  * The default value is 1.
  The component will emit a `syn-pagination-page-changed` event whenever the page changes, allowing you to respond to page changes in your application.
   */
    currentPage?: SynPagination["currentPage"];
    /**
  * The number of items to display per page.
  * The default value is 25.
  The component will emit a `syn-pagination-page-size-changed` event whenever the page size changes, allowing you to respond to page size changes in your application.
   */
    pageSize?: SynPagination["pageSize"];
    /**
  * An array of numbers representing the available options for the number of items to display per page.
  * The default value is [10, 25, 50, 100].
  The component will use this array to populate the rows-per-page selector, allowing users to choose from the specified options.
   */
    pageSizeOptions?: SynPagination["pageSizeOptions"];
    /**
     * Total amount of items.
     * The component will use this value to calculate the total number of pages based on the selected rows per page.
     */
    totalItems?: SynPagination["totalItems"];
    /**
  * The pagination variant to use.
  * The "full" variant includes comprehensive controls for navigating between pages and adjusting the number of displayed rows,
  while the "compact" variant offers a streamlined interface with essential navigation controls.
  The default value is "full".
   */
    variant?: SynPagination["variant"];
    /**
     * An accessible label for the navigation landmark.
     * Customize for multiple paginations on a page.
     */
    ariaLabel?: SynPagination["ariaLabel"];
}, {
    nativeElement: import('vue').Ref<SynPagination | undefined, SynPagination | undefined>;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "syn-pagination-page-changed": (e: SynPaginationPageChangedEvent) => any;
    "syn-pagination-page-size-changed": (e: SynPaginationPageSizeChangedEvent) => any;
}, string, import('vue').PublicProps, Readonly<{
    /**
     * When true, a divider is displayed at the top of the pagination component.
     */
    divider?: SynPagination["divider"];
    /**
     * When true, the pagination controls are disabled and non-interactive.
     */
    disabled?: SynPagination["disabled"];
    /**
     * The size of the pagination controls.
     */
    size?: SynPagination["size"];
    /**
  * The current page number.
  * The default value is 1.
  The component will emit a `syn-pagination-page-changed` event whenever the page changes, allowing you to respond to page changes in your application.
   */
    currentPage?: SynPagination["currentPage"];
    /**
  * The number of items to display per page.
  * The default value is 25.
  The component will emit a `syn-pagination-page-size-changed` event whenever the page size changes, allowing you to respond to page size changes in your application.
   */
    pageSize?: SynPagination["pageSize"];
    /**
  * An array of numbers representing the available options for the number of items to display per page.
  * The default value is [10, 25, 50, 100].
  The component will use this array to populate the rows-per-page selector, allowing users to choose from the specified options.
   */
    pageSizeOptions?: SynPagination["pageSizeOptions"];
    /**
     * Total amount of items.
     * The component will use this value to calculate the total number of pages based on the selected rows per page.
     */
    totalItems?: SynPagination["totalItems"];
    /**
  * The pagination variant to use.
  * The "full" variant includes comprehensive controls for navigating between pages and adjusting the number of displayed rows,
  while the "compact" variant offers a streamlined interface with essential navigation controls.
  The default value is "full".
   */
    variant?: SynPagination["variant"];
    /**
     * An accessible label for the navigation landmark.
     * Customize for multiple paginations on a page.
     */
    ariaLabel?: SynPagination["ariaLabel"];
}> & Readonly<{
    "onSyn-pagination-page-changed"?: ((e: SynPaginationPageChangedEvent) => any) | undefined;
    "onSyn-pagination-page-size-changed"?: ((e: SynPaginationPageSizeChangedEvent) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;