From 7abcb3360b821fb8d6026ed654ecdc31a3a0d337 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 18 Mar 2020 12:43:46 -0400
Subject: [PATCH] Add show-first-last prop to pagination (#209)

---
 src/components/v-pagination/readme.md         | 13 ++--
 .../v-pagination/v-pagination.story.ts        |  4 ++
 src/components/v-pagination/v-pagination.vue  | 63 ++++++++++++++++++-
 3 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/src/components/v-pagination/readme.md b/src/components/v-pagination/readme.md
index 7f23d91862..abd812aa2f 100644
--- a/src/components/v-pagination/readme.md
+++ b/src/components/v-pagination/readme.md
@@ -7,12 +7,13 @@
 ```
 
 ## Props
-| Prop            | Description                                      | Default |
-|-----------------|--------------------------------------------------|---------|
-| `disabled`      | Disables the pagination                          | `false` |
-| `length`*       | Length of the pagination component               |         |
-| `total-visible` | Specify the max total visible pagination numbers |         |
-| `value`         | Currently selected page                          |         |
+| Prop              | Description                                      | Default |
+|-------------------|--------------------------------------------------|---------|
+| `disabled`        | Disables the pagination                          | `false` |
+| `length`*         | Length of the pagination component               |         |
+| `total-visible`   | Specify the max total visible pagination numbers |         |
+| `value`           | Currently selected page                          |         |
+| `show-first-last` | Show first/last buttons                          | `false` |
 
 ## Events
 | Event   | Description           | Value    |
diff --git a/src/components/v-pagination/v-pagination.story.ts b/src/components/v-pagination/v-pagination.story.ts
index cecff8a940..e5419e0b4b 100644
--- a/src/components/v-pagination/v-pagination.story.ts
+++ b/src/components/v-pagination/v-pagination.story.ts
@@ -25,6 +25,9 @@ export const basic = () =>
 			},
 			totalVisible: {
 				default: number('Total Visible', 5)
+			},
+			showFirstLast: {
+				default: boolean('Show first/last', false)
 			}
 		},
 		setup() {
@@ -37,6 +40,7 @@ export const basic = () =>
 				:length="length"
 				:total-visible="totalVisible"
 				:disabled="disabled"
+				:show-first-last="showFirstLast"
 			/>
 		`
 	});
diff --git a/src/components/v-pagination/v-pagination.vue b/src/components/v-pagination/v-pagination.vue
index 8e4e4829f8..94b64129a7 100644
--- a/src/components/v-pagination/v-pagination.vue
+++ b/src/components/v-pagination/v-pagination.vue
@@ -1,5 +1,19 @@
 <template>
 	<div class="v-pagination">
+		<v-button
+			class="double"
+			v-if="showFirstLast"
+			:disabled="disabled || value === 1"
+			secondary
+			outlined
+			icon
+			small
+			@click="toPage(1)"
+		>
+			<v-icon name="chevron_left" />
+			<v-icon name="chevron_left" />
+		</v-button>
+
 		<v-button :disabled="disabled || value === 1" secondary outlined icon small @click="toPrev">
 			<v-icon name="chevron_left" />
 		</v-button>
@@ -27,6 +41,20 @@
 		>
 			<v-icon name="chevron_right" />
 		</v-button>
+
+		<v-button
+			v-if="showFirstLast"
+			:disabled="disabled || value === length"
+			class="double"
+			secondary
+			outlined
+			icon
+			small
+			@click="toPage(length)"
+		>
+			<v-icon name="chevron_right" />
+			<v-icon name="chevron_right" />
+		</v-button>
 	</div>
 </template>
 
@@ -54,6 +82,10 @@ export default defineComponent({
 		value: {
 			type: Number,
 			default: null
+		},
+		showFirstLast: {
+			type: Boolean,
+			default: false
 		}
 	},
 	setup(props, { emit }) {
@@ -110,10 +142,35 @@ export default defineComponent({
 		&:not(:first-child):not(:last-child) {
 			margin: 0 2px;
 		}
-	}
 
-	.v-button.active {
-		--v-button-background-color: var(--v-pagination-active-color);
+		&.double {
+			position: relative;
+
+			& ::v-deep {
+				.content {
+					display: grid;
+					grid-template-rows: 1fr;
+					grid-template-columns: 1fr;
+				}
+
+				.v-icon {
+					grid-row: 1;
+					grid-column: 1;
+
+					&:first-child {
+						left: -4px;
+					}
+
+					&:last-child {
+						right: -4px;
+					}
+				}
+			}
+		}
+
+		&.active {
+			--v-button-background-color: var(--v-pagination-active-color);
+		}
 	}
 }
 </style>