Skip to content
This repository has been archived by the owner on Aug 3, 2024. It is now read-only.

Add manual page input to pagination #1089

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
2 changes: 1 addition & 1 deletion assets/images/utils/gap.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/styles/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -800,6 +800,7 @@
@extend .button-base;
background-color: transparent;
border-radius: var(--size-rounded-sm);
transition: filter 0s;

&:focus-visible:not(&:disabled),
&:hover:not(&:disabled),
Expand Down
72 changes: 68 additions & 4 deletions components/ui/Pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,32 @@
}"
class="page-number-container"
>
<div v-if="item === '-'" class="has-icon">
<GapIcon />
</div>
<template v-if="item === '-'">
<input
v-if="field === index"
id="page-field"
:ref="`pageInput-` + index"
v-model="fieldValue"
type="text"
class="page-input"
autocomplete="false"
@blur="
() => {
field = null
}
"
@input="switchPage(fieldValue)"
@change="switchPage(fieldValue)"
/>
<button
v-else
class="has-icon square-button button-transparent gap"
@click="openField(index)"
@focus="openField(index)"
>
<GapIcon />
</button>
</template>
<a
v-else
:class="{
Expand Down Expand Up @@ -78,6 +101,12 @@ export default {
},
},
emits: ['switch-page'],
data() {
return {
field: null,
fieldValue: this.page,
}
},
computed: {
pages() {
let pages = []
Expand All @@ -102,6 +131,10 @@ export default {
pages = Array.from({ length: this.count }, (_, i) => i + 1)
}

if (this.field !== null && pages[this.field] !== '-') {
pages.splice(this.field, 0, '-')
}

return pages
},
},
Expand All @@ -112,6 +145,15 @@ export default {
this.$emit('switch-page', Math.min(Math.max(newPage, 1), this.count))
}
},
openField(index) {
this.field = index
this.fieldValue = this.page
this.$nextTick(() => {
const input = this.$refs[`pageInput-${index}`][0]
input.focus()
input.select()
})
},
},
}
</script>
Expand Down Expand Up @@ -156,7 +198,7 @@ a {
display: flex;
align-items: center;
svg {
width: 1em;
width: 1rem;
}
}

Expand Down Expand Up @@ -197,4 +239,26 @@ a,
padding: 0.5rem 0;
}
}

.square-button.gap {
box-shadow: none;
width: 3rem;
box-sizing: border-box;
margin: 0;
cursor: text !important;

&:hover {
border: 2px solid var(--color-divider);
}
}

.page-input {
background: var(--color-raised-bg);
width: 3rem;
padding: var(--spacing-card-xs);
min-height: 0;
height: 2em;
box-sizing: border-box;
text-align: center;
}
</style>
1 change: 0 additions & 1 deletion layouts/default.vue
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,6 @@ export default defineNuxtComponent({
padding: 0.5rem;
color: var(--color-text);
border-radius: 2rem;
transition: filter 0.1s ease-in-out;
border: 2px solid transparent;
box-sizing: border-box;

Expand Down