vueless 0.0.746 → 0.0.748

package/ui.form-input/UInput.vue

@@ -237,6 +237,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   inputAttrs,
   wrapperAttrs,
@@ -298,7 +299,7 @@ const {
         :maxlength="maxLength"
         :inputmode="inputmode"
         v-bind="inputAttrs"
-        :data-test="dataTest"
+        :data-test="getDataTest()"
         @focus="onFocus"
         @blur="onBlur"
         @input="onInput"
@@ -317,7 +318,7 @@ const {
           interactive
           internal
           v-bind="passwordIconAttrs"
-          :data-test="`${dataTest}-password-icon`"
+          :data-test="getDataTest('password-icon')"
           @click="onClickShowPassword"
         />
       </label>

package/ui.form-input/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -43,15 +42,13 @@ const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
   components: { UInput, UIcon },
   setup() {
     const slots = getSlotNames(UInput.__name);
-    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UInput
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
@@ -129,7 +126,7 @@ export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Provide additional details if necessary." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "This field is required. Please enter a value." };
+Error.args = { error: "This field is required. Please enter a value.", modelValue: "" };
 
 export const Readonly = DefaultTemplate.bind({});
 Readonly.args = {

package/ui.form-input-file/UInputFile.vue

@@ -247,6 +247,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   inputLabelAttrs,
   chooseFileButtonAttrs,
@@ -320,7 +321,7 @@ const {
               :label="currentLocale.uploadFile"
               :disabled="disabled"
               v-bind="chooseFileButtonAttrs"
-              :data-test="`${dataTest}-upload`"
+              :data-test="getDataTest('upload')"
             />
 
             <input
@@ -345,7 +346,7 @@ const {
             :color="error ? 'red' : 'brand'"
             :left-icon="config.defaults.clearIcon"
             v-bind="clearButtonAttrs"
-            :data-test="`${dataTest}-clear`"
+            :data-test="getDataTest('clear')"
             @click="onClickResetFiles"
           />
         </div>

package/ui.form-input-money/UInputMoney.vue

@@ -105,7 +105,7 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { moneyInputAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, moneyInputAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -125,7 +125,7 @@ const { moneyInputAttrs } = useUI<Config>(defaultConfig);
     :left-icon="leftIcon"
     :right-icon="rightIcon"
     v-bind="moneyInputAttrs"
-    :data-test="`${dataTest}-base-currency`"
+    :data-test="getDataTest('base-currency')"
     @keyup="onKeyup"
     @blur="onBlur"
     @input="onInput"

package/ui.form-input-money/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -43,15 +42,13 @@ const DefaultTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs) => ({
   components: { UInputMoney, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInputMoney.__name);
-    const errorMessage = computed(() => (Number(args.modelValue) > 0 ? "" : args.error));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UInputMoney
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}

package/ui.form-input-number/UInputNumber.vue

@@ -53,6 +53,7 @@ function onClickAdd() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   valueAttrs,
   labelAttrs,
@@ -74,7 +75,7 @@ const {
     :align="labelAlign"
     centred
     v-bind="labelAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
   >
     <template #label>
       <!--
@@ -92,7 +93,7 @@ const {
       round
       :disabled="isRemoveButtonDisabled || disabled"
       v-bind="removeButtonAttrs"
-      :data-test="`${dataTest}-remove`"
+      :data-test="getDataTest('remove')"
       @click="onClickRemove"
     >
       <UIcon
@@ -116,7 +117,7 @@ const {
       round
       :disabled="isAddButtonDisabled || disabled"
       v-bind="addButtonAttrs"
-      :data-test="`${dataTest}-add`"
+      :data-test="getDataTest('add')"
       @click="onClickAdd"
     >
       <UIcon

package/ui.form-input-rating/UInputRating.vue

@@ -59,7 +59,7 @@ function onMouseHover(overStar: number | null = null) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
+const { getDataTest, config, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs } =
   useUI<Config>(defaultConfig);
 </script>
 
@@ -81,11 +81,11 @@ const { config, containerAttrs, counterAttrs, totalAttrs, starsAttrs, starAttrs
         v-for="star in stars"
         :key="star"
         internal
-        :color="error ? 'red' : 'brand'"
+        color="inherit"
         :interactive="selectable"
         :name="starIcon(star)"
         v-bind="starAttrs"
-        :data-test="`${dataTest}-rating-star-${star}`"
+        :data-test="getDataTest(`star-${star}`)"
         @click="onClickStar(star)"
         @mouseleave="onMouseHover()"
         @mouseover="onMouseHover(star)"

package/ui.form-input-search/UInputSearch.vue

@@ -109,6 +109,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   searchInputAttrs,
   searchInputWithButtonAttrs,
@@ -134,7 +135,7 @@ const {
     inputmode="search"
     :left-icon="leftIcon"
     v-bind="searchButtonLabel ? searchInputWithButtonAttrs : searchInputAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     @update:model-value="onUpdateValue"
     @keyup.enter="onKeyupEnter"
   >
@@ -151,7 +152,7 @@ const {
         color="gray"
         :name="config.defaults.clearIcon"
         v-bind="clearIconAttrs"
-        :data-test="`${dataTest}-clear`"
+        :data-test="getDataTest('clear')"
         @click="onClickClear"
       />
 
@@ -171,7 +172,7 @@ const {
           color="gray"
           :name="rightIcon || config.defaults.searchIcon"
           v-bind="searchIconAttrs"
-          :data-test="`${dataTest}-search-icon`"
+          :data-test="getDataTest('search-icon')"
           @click="onClickSearch"
         />
 
@@ -179,7 +180,7 @@ const {
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
           v-bind="searchButtonAttrs"
-          :data-test="`${dataTest}-search-button`"
+          :data-test="getDataTest('search-button')"
           @click="onClickSearch"
         />
       </slot>

package/ui.form-input-search/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -43,15 +42,13 @@ const DefaultTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => (
   components: { UInputSearch, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UInputSearch.__name);
-    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UInputSearch
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
@@ -104,7 +101,7 @@ export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Search for additional details." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "This field is required. Please enter a value." };
+Error.args = { error: "This field is required. Please enter a value.", modelValue: "" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

package/ui.form-label/ULabel.vue

@@ -69,7 +69,7 @@ const mutatedProps = computed(() => ({
   error: Boolean(props.error),
 }));
 
-const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Config>(
+const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Config>(
   defaultConfig,
   mutatedProps,
 );
@@ -80,10 +80,10 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
     v-if="isHorizontalPlacement || isTopWithDescPlacement"
     ref="wrapperRef"
     v-bind="wrapperAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     @click="onClick"
   >
-    <div v-bind="contentAttrs" :data-test="`${dataTest}-content`">
+    <div v-bind="contentAttrs" :data-test="getDataTest('content')">
       <!-- @slot Use it to add label content. -->
       <slot />
     </div>
@@ -95,7 +95,7 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
         ref="labelRef"
         :for="props.for"
         v-bind="labelAttrs"
-        :data-test="`${dataTest}-label`"
+        :data-test="getDataTest('label')"
       >
         <!--
           @slot Use this to add custom content instead of the label.
@@ -106,12 +106,17 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
         </slot>
       </label>
 
-      <div v-if="error" v-bind="descriptionAttrs" :data-test="`${dataTest}-error`" v-text="error" />
+      <div
+        v-if="error"
+        v-bind="descriptionAttrs"
+        :data-test="getDataTest('error')"
+        v-text="error"
+      />
 
       <div
         v-if="description && !error"
         v-bind="descriptionAttrs"
-        :data-test="`${dataTest}-description`"
+        :data-test="getDataTest('description')"
         v-text="description"
       />
 
@@ -126,7 +131,7 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
       v-bind="labelAttrs"
       ref="labelRef"
       :for="props.for"
-      :data-test="`${dataTest}-label`"
+      :data-test="getDataTest('label')"
     >
       <!--
         @slot Use this to add custom content instead of the label.
@@ -137,17 +142,17 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
       </slot>
     </label>
 
-    <div v-bind="contentAttrs" :data-test="`${dataTest}-content`">
+    <div v-bind="contentAttrs" :data-test="getDataTest('content')">
       <!-- @slot Use it to add label content. -->
       <slot />
     </div>
 
-    <div v-if="error" v-bind="descriptionAttrs" :data-test="`${dataTest}-error`" v-text="error" />
+    <div v-if="error" v-bind="descriptionAttrs" :data-test="getDataTest('error')" v-text="error" />
 
     <div
       v-if="description && !error"
       v-bind="descriptionAttrs"
-      :data-test="`${dataTest}-description`"
+      :data-test="getDataTest('description')"
       v-text="description"
     />
 

package/ui.form-radio/URadio.vue

@@ -94,7 +94,7 @@ const mutatedProps = computed(() => ({
   error: Boolean(props.error),
 }));
 
-const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProps);
+const { getDataTest, radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -108,7 +108,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
     :description="description"
     interactive
     v-bind="radioLabelAttrs"
-    :data-test="`${dataTest}-label`"
+    :data-test="getDataTest('label')"
   >
     <template #label>
       <!--
@@ -126,7 +126,7 @@ const { radioAttrs, radioLabelAttrs } = useUI<Config>(defaultConfig, mutatedProp
       :checked="checked || isChecked"
       :disabled="radioDisabled"
       v-bind="radioAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @change="onChange"
     />
 

package/ui.form-radio-group/URadioGroup.vue

@@ -47,7 +47,7 @@ provide("getRadioGroupDisabled", () => props.disabled);
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -59,7 +59,7 @@ const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultCon
     :disabled="disabled"
     align="topWithDesc"
     v-bind="groupLabelAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
   >
     <template #label>
       <!--
@@ -81,7 +81,7 @@ const { groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultCon
           :description="option.description"
           :disabled="disabled"
           v-bind="groupRadioAttrs"
-          :data-test="`${dataTest}-item-${index}`"
+          :data-test="getDataTest(`item-${index}`)"
         />
       </slot>
     </div>

package/ui.form-select/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -64,16 +64,14 @@ const DefaultTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
     }
 
     const slots = getSlotNames(USelect.__name);
-    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
     const showAlert = (message: string) => alert(message);
 
-    return { args, slots, getSelectedBadge, errorMessage, showAlert };
+    return { args, slots, getSelectedBadge, showAlert };
   },
   template: `
     <USelect
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
       @add="showAlert('You triggered the add action!')"
     >

package/ui.form-switch/USwitch.vue

@@ -77,6 +77,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   toggleIconAttrs,
   switchLabelAttrs,
@@ -97,7 +98,7 @@ const {
     :disabled="disabled"
     interactive
     v-bind="switchLabelAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     @click="onClickToggle"
   >
     <template #label>

package/ui.form-textarea/UTextarea.vue

@@ -190,8 +190,14 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const {
+  getDataTest,
+  textareaAttrs,
+  textareaLabelAttrs,
+  wrapperAttrs,
+  leftSlotAttrs,
+  rightSlotAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -206,7 +212,7 @@ const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlo
     :align="labelAlign"
     interactive
     v-bind="textareaLabelAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest('label')"
   >
     <template #label>
       <!--
@@ -237,7 +243,7 @@ const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlo
         :rows="currentRows"
         :inputmode="inputmode"
         v-bind="textareaAttrs"
-        :data-test="dataTest"
+        :data-test="getDataTest()"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"

package/ui.form-textarea/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -44,15 +44,13 @@ const DefaultTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs) => ({
   components: { UTextarea, UIcon },
   setup() {
     const slots = getSlotNames(UTextarea.__name);
-    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UTextarea
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}

package/ui.image-avatar/UAvatar.vue

@@ -55,7 +55,7 @@ function onClick(event: MouseEvent) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -63,7 +63,7 @@ const { config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfi
     :title="label"
     :style="backgroundImage"
     v-bind="avatarAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     @click="onClick"
   >
     <template v-if="!backgroundImage">

package/ui.loader/ULoader.vue

@@ -17,12 +17,12 @@ withDefaults(defineProps<Props>(), {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, loaderAttrs, ellipseAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, loaderAttrs, ellipseAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <Transition v-bind="config.transition">
-    <div v-if="loading" v-bind="loaderAttrs" :data-test="dataTest">
+    <div v-if="loading" v-bind="loaderAttrs" :data-test="getDataTest()">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
         <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -47,12 +47,12 @@ const showLoader = computed(() => {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, overlayAttrs, nestedLoaderAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, overlayAttrs, nestedLoaderAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <Transition v-bind="config.transition">
-    <div v-if="showLoader" v-bind="overlayAttrs" :data-test="dataTest">
+    <div v-if="showLoader" v-bind="overlayAttrs" :data-test="getDataTest()">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
         <ULoader :loading="showLoader" size="lg" :color="loaderColor" v-bind="nestedLoaderAttrs" />

package/ui.loader-progress/ULoaderProgress.vue

@@ -191,11 +191,11 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { stripeAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, stripeAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
-    <div v-if="show" v-bind="stripeAttrs" :data-test="dataTest" :style="barStyle" />
+    <div v-if="show" v-bind="stripeAttrs" :data-test="getDataTest()" :style="barStyle" />
   </Transition>
 </template>

package/ui.navigation-breadcrumbs/UBreadcrumbs.vue

@@ -40,8 +40,14 @@ function onClickLink(link: UBreadcrumb) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { config, breadcrumbsAttrs, breadcrumbLinkAttrs, breadcrumbIconAttrs, dividerIconAttrs } =
-  useUI<Config>(defaultConfig);
+const {
+  getDataTest,
+  config,
+  breadcrumbsAttrs,
+  breadcrumbLinkAttrs,
+  breadcrumbIconAttrs,
+  dividerIconAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -77,7 +83,7 @@ const { config, breadcrumbsAttrs, breadcrumbLinkAttrs, breadcrumbIconAttrs, divi
         :dashed="dashed"
         :disabled="link.disabled || (!link.to && !link.href)"
         v-bind="breadcrumbLinkAttrs"
-        :data-test="dataTest"
+        :data-test="getDataTest()"
         @click="onClickLink(link)"
       >
         <template #default="slotProps">

package/ui.navigation-pagination/UPagination.vue

@@ -105,6 +105,7 @@ function goToLastPage() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   paginationAttrs,
   firstButtonAttrs,
@@ -129,7 +130,7 @@ const {
       :square="!firstLabel"
       :disabled="prevIsDisabled"
       v-bind="firstButtonAttrs"
-      :data-test="`${dataTest}-first`"
+      :data-test="getDataTest('first')"
       @click="goToFirstPage"
     >
       <!-- @slot Use it to add something instead of the "first" label. -->
@@ -150,7 +151,7 @@ const {
       :square="!prevLabel"
       :disabled="prevIsDisabled"
       v-bind="prevButtonAttrs"
-      :data-test="`${dataTest}-prev`"
+      :data-test="getDataTest('prev')"
       @click="goToPrevPage"
     >
       <!-- @slot Use it to add something instead of the "prev" label. -->
@@ -184,7 +185,7 @@ const {
         :label="String(page.number)"
         :disabled="disabled"
         v-bind="activeButtonAttrs"
-        :data-test="`${dataTest}-active`"
+        :data-test="getDataTest('active')"
       />
 
       <UButton
@@ -193,7 +194,7 @@ const {
         :label="String(page.number)"
         :disabled="disabled"
         v-bind="inactiveButtonAttrs"
-        :data-test="`${dataTest}-inactive`"
+        :data-test="getDataTest('inactive')"
         @click="selectPage(page.number)"
       />
     </template>
@@ -204,7 +205,7 @@ const {
       :square="!nextLabel"
       :disabled="nextIsDisabled"
       v-bind="nextButtonAttrs"
-      :data-test="`${dataTest}-next`"
+      :data-test="getDataTest('next')"
       @click="goToNextPage"
     >
       <!-- @slot Use it to add something instead of the "next" label. -->
@@ -226,7 +227,7 @@ const {
       :square="!lastLabel"
       :disabled="nextIsDisabled"
       v-bind="lastButtonAttrs"
-      :data-test="`${dataTest}-last`"
+      :data-test="getDataTest('last')"
       @click="goToLastPage"
     >
       <!-- @slot Use it to add something instead of the "last" label. -->