vueless 0.0.747 → 0.0.749

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.747",
+  "version": "0.0.749",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button-toggle/UToggle.vue

@@ -17,7 +17,6 @@ const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: () => [],
-  label: "",
 });
 
 const emit = defineEmits([
@@ -64,10 +63,8 @@ const mutatedProps = computed(() => ({
   selected: isSelected,
 }));
 
-const { optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } = useUI<Config>(
-  defaultConfig,
-  mutatedProps,
-);
+const { getDataTest, optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -84,7 +81,7 @@ const { optionsAttrs, toggleButtonInactiveAttrs, toggleButtonActiveAttrs } = use
       :square="square"
       :disabled="disabled"
       v-bind="isSelected(option) ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
-      :data-test="`${dataTest}-option-${index}`"
+      :data-test="getDataTest(`option-${index}`)"
       @click="onClickOption(option)"
     >
       <template #left="{ iconName }">

package/ui.button-toggle/storybook/stories.ts

@@ -130,22 +130,22 @@ Square.args = {
     { value: "13", label: "timer" },
   ],
   slotTemplate: `
-    <template #default="{ label, index }">
+    <template #option="{ label, index }">
       <UIcon :name="label" color="inherit" />
     </template>
   `,
 };
 
-export const DefaultSlot = DefaultTemplate.bind({});
-DefaultSlot.args = {
-  name: "defaultSlot",
+export const OptionSlot = DefaultTemplate.bind({});
+OptionSlot.args = {
+  name: "optionSlot",
   options: [
     { value: "1", label: "Download", rightIcon: "download", color: "green" },
     { value: "2", label: "Edit", rightIcon: "edit_note", color: "orange" },
     { value: "3", label: "Delete", rightIcon: "delete", color: "red" },
   ],
   slotTemplate: `
-    <template #default="{ label, index }">
+    <template #option="{ label, index }">
       <UBadge
         :label="label"
         :color="args.options[index].color"

package/ui.container-accordion/UAccordion.vue

@@ -47,6 +47,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   descriptionAttrs,
@@ -58,7 +59,7 @@ const {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest" @click="onClickItem">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs">
         {{ title }}

package/ui.container-card/UCard.vue

@@ -37,6 +37,7 @@ const isShownFooter = computed(() => {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   wrapperAttrs,
   titleAttrs,
   cardDividerAttrs,
@@ -50,7 +51,7 @@ const {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <div v-if="isShownHeader" v-bind="headerAttrs">
       <div v-bind="headerLeftAttrs">
         <!-- @slot Use it to add something before left side of the header. -->

package/ui.container-col/UCol.vue

@@ -18,11 +18,11 @@ withDefaults(defineProps<Props>(), {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 
-const { wrapperAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>

package/ui.container-divider/UDivider.vue

@@ -20,11 +20,14 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-const { wrapperAttrs, dividerAttrs, labelAttrs } = useUI<Config>(defaultConfig, mutatedProps);
+const { getDataTest, wrapperAttrs, dividerAttrs, labelAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <div v-bind="dividerAttrs" />
     <span v-if="label" v-bind="labelAttrs" v-text="label" />
   </div>

package/ui.container-group/UGroup.vue

@@ -20,6 +20,7 @@ withDefaults(defineProps<Props>(), {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   headerAttrs,
   wrapperAttrs,
   headerLeftFallbackAttrs,
@@ -31,7 +32,7 @@ const {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <template v-if="title">
       <UDivider v-if="upperlined" size="xl" padding="after" v-bind="upperlineAttrs" />
 

package/ui.container-groups/UGroups.vue

@@ -17,11 +17,11 @@ withDefaults(defineProps<Props>(), {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { wrapperAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>

package/ui.container-modal/UModal.vue

@@ -110,6 +110,7 @@ function closeModal() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   modalAttrs,
   titleAttrs,
@@ -145,7 +146,7 @@ const {
       ref="wrapperRef"
       tabindex="0"
       v-bind="wrapperAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @keydown.self.esc="onKeydownEsc"
     >
       <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
@@ -203,7 +204,7 @@ const {
                   size="sm"
                   :name="config.defaults.closeIcon"
                   v-bind="closeIconAttrs"
-                  :data-test="`${dataTest}-close`"
+                  :data-test="getDataTest('close')"
                   @click="onClickCloseModal"
                 />
               </slot>

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -71,8 +71,13 @@ function emitConfirmAction() {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelButtonAttrs } =
-  useUI<Config>(defaultConfig);
+const {
+  getDataTest,
+  footerLeftFallbackAttrs,
+  confirmModalAttrs,
+  confirmButtonAttrs,
+  cancelButtonAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -90,7 +95,7 @@ const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelBu
     no-divider
     mobile-bottom-align
     v-bind="confirmModalAttrs"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
   >
     <template #header-left>
       <!-- @slot Use it to add something to the left side of the header. -->
@@ -133,7 +138,7 @@ const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelBu
           :color="confirmColor"
           :disabled="confirmDisabled"
           v-bind="confirmButtonAttrs"
-          :data-test="`${dataTest}-confirm`"
+          :data-test="getDataTest('confirm')"
           @click="emitConfirmAction"
         />
 
@@ -143,7 +148,7 @@ const { footerLeftFallbackAttrs, confirmModalAttrs, confirmButtonAttrs, cancelBu
           variant="secondary"
           color="gray"
           v-bind="cancelButtonAttrs"
-          :data-test="`${dataTest}-close`"
+          :data-test="getDataTest('close')"
           @click="onCloseModal"
         />
       </div>

package/ui.container-page/UPage.vue

@@ -72,6 +72,7 @@ function onClickBackLink() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   pageAttrs,
@@ -94,7 +95,7 @@ const {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <div v-bind="pageAttrs">
       <!-- @slot Use it to add something before the header. -->
       <slot name="header-before" />

package/ui.container-row/URow.vue

@@ -17,11 +17,11 @@ withDefaults(defineProps<Props>(), {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { wrapperAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>

package/ui.data-list/UDataList.vue

@@ -105,6 +105,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   emptyAttrs,
@@ -151,13 +152,13 @@ const {
       :ghost-class="config.draggableGhost"
       :drag-class="config.draggableDrag"
       v-bind="draggableAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       :move="onDragMove"
       @end="onDragEnd"
     >
       <template #item="{ element }">
-        <div :id="element[valueKey]" v-bind="itemWrapperAttrs" :data-test="`${dataTest}-item`">
-          <div v-bind="itemAttrs" :data-test="`${dataTest}-item-${element[valueKey]}`">
+        <div :id="element[valueKey]" v-bind="itemWrapperAttrs" :data-test="getDataTest('item')">
+          <div v-bind="itemAttrs" :data-test="getDataTest(`item-${element[valueKey]}`)">
             <!--
               @slot Use it to add something instead of the drag icon.
               @binding {object} item
@@ -210,7 +211,7 @@ const {
                   :name="config.defaults.deleteIcon"
                   :tooltip="currentLocale.delete"
                   v-bind="deleteIconAttrs"
-                  :data-test="`${dataTest}-delete`"
+                  :data-test="getDataTest('delete')"
                   @click="onClickDelete(element[valueKey], element[labelKey])"
                 />
               </slot>
@@ -229,7 +230,7 @@ const {
                   :name="config.defaults.editIcon"
                   :tooltip="currentLocale.edit"
                   v-bind="editIconAttrs"
-                  :data-test="`${dataTest}-edit`"
+                  :data-test="getDataTest('edit')"
                   @click="onClickEdit(element[valueKey], element[labelKey])"
                 />
               </slot>
@@ -243,7 +244,7 @@ const {
             :list="element.children"
             :group="group"
             v-bind="nestedAttrs"
-            :data-test="`${dataTest}-table`"
+            :data-test="getDataTest('table')"
             @click-delete="onClickDelete"
             @click-edit="onClickEdit"
             @drag-sort="onDragEnd"

package/ui.data-table/UTable.vue

@@ -448,6 +448,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   stickyHeaderCellAttrs,
@@ -494,7 +495,7 @@ const {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" :data-test="dataTest">
+  <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <div
       v-show="isHeaderSticky && !isShownActionsHeader"
       ref="sticky-header-row"
@@ -508,7 +509,7 @@ const {
           size="md"
           :partial="!isSelectedAllRows"
           v-bind="stickyHeaderCheckboxAttrs"
-          :data-test="`${dataTest}-select-all`"
+          :data-test="getDataTest('select-all')"
         />
 
         <div
@@ -562,7 +563,7 @@ const {
           size="md"
           :partial="!isSelectedAllRows"
           v-bind="headerActionsCheckboxAttrs"
-          :data-test="`${dataTest}-select-all`"
+          :data-test="getDataTest('select-all')"
         />
       </div>
 
@@ -595,7 +596,7 @@ const {
           size="md"
           :partial="!isSelectedAllRows"
           v-bind="headerActionsCheckboxAttrs"
-          :data-test="`${dataTest}-select-all`"
+          :data-test="getDataTest('select-all')"
         />
       </div>
 
@@ -634,7 +635,7 @@ const {
                 size="md"
                 :partial="!isSelectedAllRows"
                 v-bind="headerCheckboxAttrs"
-                :data-test="`${dataTest}-select-all`"
+                :data-test="getDataTest('select-all')"
               />
 
               <div
@@ -725,7 +726,7 @@ const {
               :attrs="tableRowAttrs as unknown as UTableRowAttrs"
               :nested-level="0"
               :empty-cell-label="emptyCellLabel"
-              :data-test="`${dataTest}-row`"
+              :data-test="getDataTest('row')"
               @click="onClickRow"
               @dblclick="onDoubleClickRow"
               @click-cell="onClickCell"
@@ -788,7 +789,7 @@ const {
                   size="md"
                   :description="currentLocale.noData"
                   v-bind="bodyEmptyStateAttrs"
-                  :data-test="`${dataTest}-empty`"
+                  :data-test="getDataTest('empty')"
                 />
               </slot>
             </td>

package/ui.data-table/UTableRow.vue

@@ -7,10 +7,13 @@ import { PX_IN_REM } from "../constants.js";
 import { mapRowColumns } from "./utilTable.ts";
 
 import { useMutationObserver } from "../composables/useMutationObserver.ts";
+import useUI from "../composables/useUI.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
+import defaultConfig from "./config.ts";
+
 import type {
   Cell,
   CellObject,
@@ -18,6 +21,7 @@ import type {
   RowScopedExpandProps,
   RowScopedProps,
   UTableRowProps,
+  Config,
 } from "./types.ts";
 
 const NESTED_ROW_SHIFT_REM = 1;
@@ -244,6 +248,8 @@ function getRowAttrs(rowId: string | number) {
 function onToggleExpand(row: Row, expanded?: boolean) {
   emit("toggleExpand", row, expanded || isExpanded(row));
 }
+
+const { getDataTest } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -265,7 +271,7 @@ function onToggleExpand(row: Row, expanded?: boolean) {
         :value="row.id"
         v-bind="attrs.bodyCheckboxAttrs.value"
         :data-id="row.id"
-        :data-test="`${dataTest}-body-checkbox`"
+        :data-test="getDataTest('body-checkbox')"
       />
     </td>
 
@@ -311,7 +317,7 @@ function onToggleExpand(row: Row, expanded?: boolean) {
             :class="
               cx([attrs.bodyCellContentAttrs.value.class, getCellContentClasses(row, String(key))])
             "
-            :data-test="`${dataTest}-${key}-cell`"
+            :data-test="getDataTest(`${key}-cell`)"
           >
             {{ formatCellValue(value) }}
           </div>
@@ -326,7 +332,7 @@ function onToggleExpand(row: Row, expanded?: boolean) {
             :class="
               cx([attrs.bodyCellContentAttrs.value.class, getCellContentClasses(row, String(key))])
             "
-            :data-test="`${dataTest}-${key}-cell`"
+            :data-test="getDataTest(`${key}-cell`)"
           >
             {{ formatCellValue(value) }}
           </div>
@@ -358,7 +364,7 @@ function onToggleExpand(row: Row, expanded?: boolean) {
     :attrs="attrs"
     :columns="columns"
     :row="row.row as Row"
-    :data-test="dataTest"
+    :data-test="getDataTest()"
     :nested-level="nestedLevel + 1"
     :config="config"
     :selectable="selectable"
@@ -394,7 +400,7 @@ function onToggleExpand(row: Row, expanded?: boolean) {
         :attrs="attrs"
         :columns="columns"
         :row="nestedRow"
-        :data-test="dataTest"
+        :data-test="getDataTest()"
         :nested-level="nestedLevel + 1"
         :config="config"
         :selectable="selectable"

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -66,8 +66,14 @@ const mutatedProps = computed(() => ({
   opened: isShownOptions.value,
 }));
 
-const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const {
+  getDataTest,
+  config,
+  wrapperAttrs,
+  dropdownBadgeAttrs,
+  dropdownListAttrs,
+  dropdownIconAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -81,7 +87,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
       :round="round"
       v-bind="dropdownBadgeAttrs"
       tabindex="0"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @click="onClickBadge"
       @keydown.enter="onClickBadge"
       @keydown.space.prevent="onClickBadge"
@@ -114,7 +120,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
             color="inherit"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-dropdown`"
+            :data-test="getDataTest('dropdown')"
           />
         </slot>
       </template>
@@ -128,7 +134,7 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
-      :data-test="`${dataTest}-list`"
+      :data-test="getDataTest('list')"
       @click-option="onClickOption"
     />
   </div>

package/ui.dropdown-button/UDropdownButton.vue

@@ -68,8 +68,14 @@ const mutatedProps = computed(() => ({
   opened: isShownOptions.value,
 }));
 
-const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapperAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const {
+  getDataTest,
+  config,
+  dropdownButtonAttrs,
+  dropdownListAttrs,
+  dropdownIconAttrs,
+  wrapperAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -85,7 +91,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
       :disabled="disabled"
       :filled="filled || isShownOptions"
       v-bind="dropdownButtonAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @click="onClickButton"
     >
       <template #left>
@@ -116,7 +122,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
             color="inherit"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-dropdown`"
+            :data-test="getDataTest('dropdown')"
           />
         </slot>
       </template>
@@ -129,7 +135,7 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
       :options="options"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
-      :data-test="`${dataTest}-list`"
+      :data-test="getDataTest('list')"
       @click-option="onClickOption"
     />
   </div>

package/ui.dropdown-list/UDropdownList.vue

@@ -248,6 +248,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   listAttrs,
@@ -272,7 +273,7 @@ const {
     tabindex="1"
     :style="{ maxHeight: wrapperMaxHeight }"
     v-bind="wrapperAttrs"
-    :data-test="`${dataTest}-list`"
+    :data-test="getDataTest('list')"
     @keydown.self.down.prevent="pointerForward"
     @keydown.self.up.prevent="pointerBackward"
     @keydown.enter.stop.self="addPointerElement('Enter')"
@@ -296,7 +297,7 @@ const {
             !option.divider
           "
           v-bind="isSelectedOption(option) ? optionActiveAttrs : optionAttrs"
-          :data-test="`${dataTest}-option`"
+          :data-test="getDataTest('option')"
           :class="optionHighlight(index, option)"
           @click="select(option), onClickOption(option)"
           @mouseenter.self="pointerSet(index)"
@@ -362,7 +363,7 @@ const {
           ref="add-option"
           role="option"
           v-bind="addOptionLabelWrapperAttrs"
-          :data-test="`${dataTest}-add`"
+          :data-test="getDataTest('add')"
           @click="onClickAddOption"
           @mouseenter.self="pointerSet(options.length + 1)"
         >
@@ -376,7 +377,7 @@ const {
           round
           square
           v-bind="addOptionButtonAttrs"
-          :data-test="`${dataTest}-add-button`"
+          :data-test="getDataTest('add-button')"
           @click="onClickAddOption"
         >
           <UIcon

package/ui.form-calendar/config.ts

@@ -75,9 +75,9 @@ export default /*tw*/ {
   timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",
   i18n: {
-    today: "Today,",
-    yesterday: "Yesterday,",
-    tomorrow: "Tomorrow,",
+    today: "Today",
+    yesterday: "Yesterday",
+    tomorrow: "Tomorrow",
     weekdays: {
       shorthand: {
         sunday: "Sun",

package/ui.form-calendar/utilFormatting.ts

@@ -225,6 +225,6 @@ export const formats = {
       return `${locale.tomorrow}`;
     }
 
-    return "";
+    return formats.l(date, locale);
   },
 };

package/ui.form-checkbox/UCheckbox.vue

@@ -119,8 +119,14 @@ const mutatedProps = computed(() => ({
   error: Boolean(props.error),
 }));
 
-const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIconAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const {
+  getDataTest,
+  config,
+  checkboxAttrs,
+  iconWrapperAttrs,
+  checkboxLabelAttrs,
+  checkedIconAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
@@ -134,7 +140,7 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
     :description="description"
     interactive
     v-bind="checkboxLabelAttrs"
-    :data-test="`${dataTest}-label`"
+    :data-test="getDataTest('label')"
   >
     <template #label>
       <!--
@@ -154,7 +160,7 @@ const { config, checkboxAttrs, iconWrapperAttrs, checkboxLabelAttrs, checkedIcon
       :checked="isChecked"
       :disabled="disabled"
       v-bind="checkboxAttrs"
-      :data-test="dataTest"
+      :data-test="getDataTest()"
       @change="onChange"
     />