Skip to content

Commit

Permalink
feat(Pagination): add disabled prop
Browse files Browse the repository at this point in the history
Resolves #1189
  • Loading branch information
benjamincanac committed Jan 3, 2024
1 parent bc00f9c commit 0976833
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 4 deletions.
16 changes: 16 additions & 0 deletions docs/content/5.navigation/3.pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,22 @@ props:
---
::

### Disabled :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}

Use the `disabled` prop to disable all the buttons.

::component-card
---
baseProps:
modelValue: 1
total: 100
showLast: true
showFirst: true
props:
disabled: true
---
::

### Active / Inactive

Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
Expand Down
13 changes: 9 additions & 4 deletions src/runtime/components/navigation/Pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<UButton
v-if="firstButton && showFirst"
:size="size"
:disabled="!canGoFirstOrPrev"
:disabled="!canGoFirstOrPrev || disabled"
:class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
:ui="{ rounded: '' }"
Expand All @@ -17,7 +17,7 @@
<UButton
v-if="prevButton"
:size="size"
:disabled="!canGoFirstOrPrev"
:disabled="!canGoFirstOrPrev || disabled"
:class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
:ui="{ rounded: '' }"
Expand All @@ -30,6 +30,7 @@
v-for="(page, index) of displayedPages"
:key="`${page}-${index}`"
:size="size"
:disabled="disabled"
:label="`${page}`"
v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
:class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
Expand All @@ -41,7 +42,7 @@
<UButton
v-if="nextButton"
:size="size"
:disabled="!canGoLastOrNext"
:disabled="!canGoLastOrNext || disabled"
:class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
:ui="{ rounded: '' }"
Expand All @@ -54,7 +55,7 @@
<UButton
v-if="lastButton && showLast"
:size="size"
:disabled="!canGoLastOrNext"
:disabled="!canGoLastOrNext || disabled"
:class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
:ui="{ rounded: '' }"
Expand Down Expand Up @@ -105,6 +106,10 @@ export default defineComponent({
return value >= 5 && value < Number.MAX_VALUE
}
},
disabled: {
type: Boolean,
default: false
},
size: {
type: String as PropType<ButtonSize>,
default: () => config.default.size,
Expand Down

1 comment on commit 0976833

@vercel
Copy link

@vercel vercel bot commented on 0976833 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui-nuxt-js.vercel.app
ui-git-dev-nuxt-js.vercel.app
ui.nuxt.com

Please sign in to comment.