feat(Pagination): add disabled prop

Resolves #1189
This commit is contained in:
Benjamin Canac
2024-01-03 18:18:01 +01:00
parent bc00f9c4b2
commit 0976833753
2 changed files with 25 additions and 4 deletions

View File

@@ -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 ### Active / Inactive
Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination. Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.

View File

@@ -4,7 +4,7 @@
<UButton <UButton
v-if="firstButton && showFirst" v-if="firstButton && showFirst"
:size="size" :size="size"
:disabled="!canGoFirstOrPrev" :disabled="!canGoFirstOrPrev || disabled"
:class="[ui.base, ui.rounded]" :class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }" v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
:ui="{ rounded: '' }" :ui="{ rounded: '' }"
@@ -17,7 +17,7 @@
<UButton <UButton
v-if="prevButton" v-if="prevButton"
:size="size" :size="size"
:disabled="!canGoFirstOrPrev" :disabled="!canGoFirstOrPrev || disabled"
:class="[ui.base, ui.rounded]" :class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }" v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
:ui="{ rounded: '' }" :ui="{ rounded: '' }"
@@ -30,6 +30,7 @@
v-for="(page, index) of displayedPages" v-for="(page, index) of displayedPages"
:key="`${page}-${index}`" :key="`${page}-${index}`"
:size="size" :size="size"
:disabled="disabled"
:label="`${page}`" :label="`${page}`"
v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }" 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]" :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
@@ -41,7 +42,7 @@
<UButton <UButton
v-if="nextButton" v-if="nextButton"
:size="size" :size="size"
:disabled="!canGoLastOrNext" :disabled="!canGoLastOrNext || disabled"
:class="[ui.base, ui.rounded]" :class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }" v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
:ui="{ rounded: '' }" :ui="{ rounded: '' }"
@@ -54,7 +55,7 @@
<UButton <UButton
v-if="lastButton && showLast" v-if="lastButton && showLast"
:size="size" :size="size"
:disabled="!canGoLastOrNext" :disabled="!canGoLastOrNext || disabled"
:class="[ui.base, ui.rounded]" :class="[ui.base, ui.rounded]"
v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }" v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
:ui="{ rounded: '' }" :ui="{ rounded: '' }"
@@ -105,6 +106,10 @@ export default defineComponent({
return value >= 5 && value < Number.MAX_VALUE return value >= 5 && value < Number.MAX_VALUE
} }
}, },
disabled: {
type: Boolean,
default: false
},
size: { size: {
type: String as PropType<ButtonSize>, type: String as PropType<ButtonSize>,
default: () => config.default.size, default: () => config.default.size,