Enhance pagination component with new styles and documentation (#2384)

.changeset/eighty-peas-retire.md

@@ -0,0 +1,7 @@
+---
+"@tabler/core": patch
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Enhance pagination component with new styles

core/scss/_variables.scss

@@ -839,13 +839,17 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
-$pagination-border-width: 0 !default;
-$pagination-padding-y: 0.25rem !default;
+$pagination-border-width: 1px !default;
+$pagination-border-color: transparent !default;
+$pagination-padding-y: calc(0.25rem + 1px) !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}gray-500) !default;
+$pagination-color: var(--#{$prefix}body-color) !default;
 $pagination-bg: transparent !default;
+$pagination-hover-bg: var(--#{$prefix}active-bg) !default;
+$pagination-hover-border-color: var(--#{$prefix}pagination-border-color) !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
+$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
 
 $pagination-active-bg: var(--#{$prefix}primary) !default;
 $pagination-active-border-color: var(--#{$prefix}primary) !default;

core/scss/ui/_pagination.scss

@@ -1,4 +1,5 @@
 .pagination {
+  margin: 0;
   --#{$prefix}pagination-gap: .25rem;
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
@@ -6,21 +7,22 @@
 }
 
 .page-link {
-  min-width: 1.75rem;
-  border-radius: var(--#{$prefix}border-radius);
+  min-width: 2rem;
+  border-radius: var(--#{$prefix}pagination-border-radius);
+
+  &:hover {
+    background: var(--#{$prefix}pagination-hover-bg);
+  }
+}
+
+.page-text {
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 
 .page-item {
   text-align: center;
 
-  &:not(.active) {
-    .page-link {
-      &:hover {
-        background: transparent;
-      }
-    }
-  }
-
   &.page-prev,
   &.page-next {
     flex: 0 0 50%;
@@ -56,4 +58,14 @@
   .page-item.disabled & {
     color: $pagination-disabled-color;
   }
+}
+
+.pagination-outline {
+  --#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}pagination-border-width: 1px;
+}
+
+.pagination-circle {
+  --#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
 }

docs/content/ui/components/dropzone.md

@@ -2,6 +2,7 @@
 title: Dropzone
 summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
 description: Drag-and-drop file upload tool.
+docs-libs: dropzone
 ---
 
 ## Basic usage

docs/content/ui/components/pagination.md

@@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## With First and Last links
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" first-last %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Offset
+
+If the count of pages is too large, you can use offset to show only a few pages at a time. 
+
+{% capture html -%}
+{% include "ui/pagination.html" offset=3 count=20 %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Button With Text
+
+When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" text %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Outline version
+
+If you want to use outline version of pagination, you can use `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-outline" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Circle version
+
+If you want to use circle version of pagination, you can use `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
+
+{% include "ui/pagination.html" class="pagination-circle" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical separated %}

preview/pages/pagination.html

@@ -11,7 +11,7 @@ permalink: pagination.html
 		<div class="card">
 			<div class="card-body">
 				{% include "ui/pagination.html" %}
-				{% include "ui/pagination.html" icons=true %}
+				{% include "ui/pagination.html" text=true %}
 			</div>
 		</div>
 	</div>

shared/includes/docs/example.html

@@ -1,7 +1,7 @@
 <!--EXAMPLE-->
 <div
 	class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
-	{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
+	{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2 justify-content-center{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
 		{{ include.html | remove-href }}
 	{%- unless include.raw -%}</div>{%- endunless -%}
 </div>

shared/includes/docs/navbar.html

@@ -33,10 +33,15 @@
 						</a>
 					</li>
 					<li class="nav-item">
-						<a href="{{ site.githubUrl }}" class="btn btn-icon btn-github" target="_blank">
+						<a href="{{ site.githubUrl }}" class="btn btn-icon" target="_blank">
 							{% include "ui/icon.html" icon="brand-github" %}
 						</a>
 					</li>
+					<li class="nav-item">
+						<a href="{{ site.previewUrl }}" class="btn btn-primary" target="_blank">
+							{% include "ui/icon.html" icon="eye" %} Preview
+						</a>
+					</li>
 				</ul>
 			</div>
 		</div>

shared/includes/ui/pagination.html

@@ -1,30 +1,55 @@
-{% assign count = include.count | default: 5 %}
-{% assign active-item = include.active-item | default: 3 %}
-<ul class="pagination {{ include.class }}">
-   <li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
-      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
-         {% if include.prev-description %}
-            <div class="page-item-subtitle">previous</div>
-            <div class="page-item-title">{{ include.prev-description }}</div>
-         {% else %}
-            {% if include.icons %}{% include "ui/icon.html" icon="chevron-left" %}{% else %}{% include "ui/icon.html" icon="chevron-left" %} prev{% endif %}
-         {% endif %}
-      </a>
-   </li>
-
-   {% for i in (1..count) %}
-   <li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
-   {% endfor %}
-
+{% assign count = include.count | default: 5 -%}
+{% assign offset = include.offset | default: count -%}
+{% assign count-offset = count | minus: offset | plus: 1 -%}
+{% assign active-item = include.active-item | default: 3 -%}
+<ul class="pagination{% if include.class %} {{ include.class }}{% endif %}">
+	{% if include.first-last -%}
+	<li class="page-item disabled">
+		<a class="page-link{% if include.text %} page-text{% endif %}" href="#" tabindex="-1" aria-disabled="true">
+			{% unless include.text %}{% include "ui/icon.html" icon="chevrons-left" %}{% else %}Previous{% endunless -%}
+		</a>
+	</li>
+	{% endif -%}
+	<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
+		<a class="page-link{% if include.text %} page-text{% endif %}" href="#" tabindex="-1" aria-disabled="true">
+			{% if include.prev-description -%}
+			<div class="page-item-subtitle">previous</div>
+			<div class="page-item-title">{{ include.prev-description }}</div>
+			{% else -%}
+			{% unless include.text %}{% include "ui/icon.html" icon="chevron-left" %}{% else %}Previous{% endunless -%}
+			{% endif %}
+		</a>
+	</li>
+	{% for i in (1..offset) -%}
+	<li class="page-item{% if i == active-item %} active{% endif %}">
+		<a class="page-link" href="#">{{ i }}</a>
+	</li>
+	{% endfor -%}
+	{% if offset < count -%}
+	<li class="page-item">
+		<span class="page-link disabled">&hellip;</span>
+	</li>
+	{% for i in (count-offset..count) -%}
+	<li class="page-item{% if i == active-item %} active{% endif %}">
+		<a class="page-link" href="#">{{ i }}</a>
+	</li>
+	{% endfor -%}
+	{% endif %}
    <li class="page-item{% if include.prev-description %} page-next{% endif %}">
-      <a class="page-link" href="#">
-
-         {% if include.next-description %}
+      <a class="page-link{% if include.text %} page-text{% endif %}" href="#">
+         {% if include.next-description -%}
             <div class="page-item-subtitle">next</div>
             <div class="page-item-title">{{ include.next-description }}</div>
-         {% else %}
-            {% if include.icons %}{% include "ui/icon.html" icon="chevron-right" %}{% else %}next {% include "ui/icon.html" icon="chevron-right" %}{% endif %}
-         {% endif %}
+         {% else -%}
+            {% unless include.text %}{% include "ui/icon.html" icon="chevron-right" %}{% else %}Next{% endunless %}
+         {% endif -%}
       </a>
    </li>
+	{% if include.first-last -%}
+	<li class="page-item">
+		<a class="page-link{% if include.text %} page-text{% endif %}" href="#">
+			{% unless include.text %}{% include "ui/icon.html" icon="chevrons-right" %}{% else %}Next{% endunless %}
+		</a>
+	</li>
+	{% endif -%}
 </ul>