From 1af837d97f0b122bfc40b3c01f50dab36c8d4c4c Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 21 Dec 2022 16:50:45 +0100
Subject: [PATCH] Add documentation for the pagination web component

---
 docs/javascript/components_pagination.md | 42 ++++++++++++++++++++++++
 mkdocs.yml                               |  1 +
 2 files changed, 43 insertions(+)
 create mode 100644 docs/javascript/components_pagination.md

diff --git a/docs/javascript/components_pagination.md b/docs/javascript/components_pagination.md
new file mode 100644
index 00000000..c43657e5
--- /dev/null
+++ b/docs/javascript/components_pagination.md
@@ -0,0 +1,42 @@
+# Pagination - JavaScript API
+
+The pagination component is used to expose multiple pages to the end user.
+This component supports both static URLs and dynamic navigation using DOM events.
+
+## Example
+
+```html
+<woltlab-core-pagination page="1" count="10" url="https://www.woltlab.com"></woltlab-core-pagination>
+```
+
+## Parameters
+
+### `page`
+
+Defaults to `1`.
+
+Number of the currently active page.
+
+### `count`
+
+Defaults to `0`.
+
+Number of available pages. Must be greater than `1` for the pagination to be displayed.
+
+### `url`
+
+Default to an empty string.
+
+If defined, static pagination links are created based on the URL.
+Otherwise only the `switchPage` event will be fired if a user clicks on a pagination link.
+
+## Events
+
+### `switchPage`
+
+The `switchPage` event will be fired if a user clicks on a pagination link. The event detail will contain the number of the selected page.
+The event can be canceled to prevent navigation.
+
+### `jumpToPage`
+
+The `switchPage` event will be fired if a user clicks on a ellipsis button within the pagination.
diff --git a/mkdocs.yml b/mkdocs.yml
index 77e7a8ee..da3ed91e 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -57,6 +57,7 @@ nav:
     - 'Components':
       - 'Confirmation': 'javascript/components_confirmation.md'
       - 'Dialog': 'javascript/components_dialog.md'
+      - 'Pagination': 'javascript/components_pagination.md'
     - 'New API':
       - 'Writing a module': 'javascript/new-api_writing-a-module.md'
       - 'Core Functions': 'javascript/new-api_core.md'
-- 
2.20.1