@antify/ui 4.1.4 → 4.1.6

package/dist/components/AntAccordion.vue

@@ -50,7 +50,9 @@ function onClose(index: number) {
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col bg-base-300 gap-px">
+  <div class="w-full h-full flex flex-col bg-base-300 gap-px"
+    data-e2e="accordion"
+  >
     <slot>
       <AntAccordionItem
         v-for="(item, index) in items"

package/dist/components/AntAccordionItem.vue

@@ -63,6 +63,7 @@ const labelClasses = computed(() => ({
     class="p-2 select-none transition-colors"
     :class="labelClasses"
     @click="onClick"
+    data-e2e="accordion-item"
   >
     <slot
       name="label"

package/dist/components/AntAlert.vue

@@ -96,6 +96,7 @@ onMounted(() => {
     <div
       :class="classes"
       data-e2e="alert"
+      :data-e2e-state="state"
     >
       <div
         v-if="icon || hasQuestionMark || dismissBtn || title"

package/dist/components/AntButton.vue

@@ -236,6 +236,8 @@ onMounted(() => {
     <div
       class="inline-flex h-fit"
       :class="{'w-full': props.expanded}"
+      data-e2e="button"
+      :data-e2e-state="state"
     >
       <AntTooltip
         class="w-full"
@@ -251,7 +253,7 @@ onMounted(() => {
           :tabindex="noFocus || hasInputState ? '-1' : '0'"
           v-bind="$attrs"
           :data-e2e="dataE2e"
-          :data-e2e-state="props.state"
+          :data-e2e-state="state"
           @click="(e: MouseEvent) => !props.readonly ? $emit('click', e) : null"
           @blur="(e: FocusEvent) => !props.readonly ? $emit('blur', e) : null"
         >

package/dist/components/AntCard.vue

@@ -34,6 +34,7 @@ const cardClass = computed(() => ({
   <div
     :class="cardClass"
     class="bg-white outline outline-offset-[-1px] outline-base-300 rounded-md relative"
+    data-e2e="card"
   >
     <slot />
 

package/dist/components/AntContent.vue

@@ -10,6 +10,7 @@ withDefaults(defineProps<{
   <div
     :class="{ 'p-2.5': padding }"
     class="bg-white overflow-auto"
+    data-e2e="content"
   >
     <slot />
   </div>

package/dist/components/AntIcon.vue

@@ -55,7 +55,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <span :class="containerClasses">
+  <span :class="containerClasses"
+    data-e2e="icon"
+  >
     <AntSkeleton
       :visible="skeleton"
       rounded

package/dist/components/AntKeycap.vue

@@ -52,6 +52,7 @@ const iconClasses = computed(() => {
     <div
       class="inline-flex justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium"
       :class="classes"
+      data-e2e="keycap"
     >
       <AntIcon
         v-if="icon"

package/dist/components/AntListGroup.vue

@@ -20,6 +20,7 @@ withDefaults(defineProps<{
       <div
         class="flex flex-col rounded-md bg-base-300 gap-px relative border border-base-300 overflow-hidden"
         :class="{'invisible': skeleton, 'shadow-md': shadow}"
+        data-e2e="list-group"
       >
         <slot />
       </div>

package/dist/components/AntListGroupItem.vue

@@ -69,6 +69,8 @@ onMounted(() => {
     :is="to !== undefined ? 'router-link' : 'div'"
     :to="to"
     :class="classes"
+    data-e2e="list-group-item"
+    :data-e2e-state="state"
   >
     <div :class="contentWrapperClasses">
       <div class="flex items-center gap-2.5">

package/dist/components/AntModal.vue

@@ -65,6 +65,7 @@ onMounted(() => {
       class="absolute inset-0 flex items-center justify-center z-[80] cursor-pointer overflow-hidden"
       :class="{'bg-black/50 backdrop-blur-xs': !fullscreen}"
       @click.self="closeModal"
+      data-e2e="modal"
     >
       <Transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
         <div
@@ -90,6 +91,7 @@ onMounted(() => {
               :skeleton="skeleton"
               :icon-left="faXmark"
               @click="closeModal"
+              data-e2e="modal-close-button"
             />
           </div>
 

package/dist/components/AntPagination.vue

@@ -187,6 +187,7 @@ const pagination = computed(() => {
           :grouped="Grouped.left"
           :filled="false"
           @click="() => page = page - 1"
+          data-e2e="left-arrow-button"
         />
 
         <AntButton
@@ -209,6 +210,7 @@ const pagination = computed(() => {
           :disabled="page === pages"
           :filled="false"
           @click="() => page = page + 1"
+          data-e2e="right-arrow-button"
         />
       </div>
     </div>

package/dist/components/AntPopover.vue

@@ -119,6 +119,7 @@ const onClickOutside = [
     <div
       ref="reference"
       v-on-click-outside="onClickOutside"
+      data-e2e="popover"
     >
       <slot />
     </div>
@@ -130,6 +131,7 @@ const onClickOutside = [
             ref="floating"
             :class="_popoverClasses"
             :style="floatingStyles"
+            data-e2e="popover"
           >
             <div class="shadow-lg border-base-300 rounded-md text-sm relative inline-flex flex-col">
               <div

package/dist/components/AntProgress.vue

@@ -39,6 +39,7 @@ const progressWidth = computed(() => {
   <div
     class="relative bg-base-100 w-full rounded-md"
     :style="{ height: height }"
+    data-e2e="progress"
   >
     <div
       class="absolute rounded-md"

package/dist/components/AntSpinner.vue

@@ -96,6 +96,7 @@ const spinningElementClass = computed(() => {
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     data-e2e="spinner"
+    :data-e2e-state="state"
   >
     <path
       :class="circleClass"

package/dist/components/AntTag.vue

@@ -94,6 +94,7 @@ onMounted(() => {
   <span
     :class="classes"
     data-e2e="tag"
+    :data-e2e-state="state"
   >
     <span
       v-if="iconLeft"

package/dist/components/AntToast.vue

@@ -77,7 +77,7 @@ onMounted(() => {
   <div
     :class="classes"
     data-e2e="toast"
-    :data-e2e-state="props.state"
+    :data-e2e-state="state"
   >
     <div class="inline-flex items-start justify-between min-w-[260px] w-content gap-2.5">
       <div class="inline-flex items-start gap-2.5">
@@ -116,7 +116,7 @@ onMounted(() => {
       class="flex justify-end"
     >
       <AntButton
-        :state="props.state as unknown as State"
+        :state="state as unknown as State"
         @click="() => $emit('undo')"
       >
         undo

package/dist/components/AntTooltip.vue

@@ -172,6 +172,7 @@ function onClick() {
   <div
     class="relative h-fit"
     data-e2e="tooltip"
+    :data-e2e-state="state"
   >
     <div
       ref="reference"

package/dist/components/calendar/AntDatePicker.vue

@@ -151,7 +151,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div
+    data-e2e="date-picker"
+  >
     <AntDateSwitcher
       v-model:month="currentMonthIndex"
       v-model:year="currentYear"
@@ -232,6 +234,7 @@ onMounted(() => {
       <AntButton
         :skeleton="skeleton"
         @click="() => $emit('update:modelValue', Date.now())"
+        data-e2e="today-button"
       >
         Heute
       </AntButton>

package/dist/components/calendar/AntDateSwitcher.vue

@@ -84,12 +84,15 @@ function onClickNext() {
 </script>
 
 <template>
-  <div class="flex">
+  <div class="flex"
+    data-e2e="date-switcher"
+  >
     <AntButton
       :icon-left="faChevronLeft"
       :grouped="Grouped.left"
       :skeleton="skeleton"
       @click="onClickPrevious"
+      data-e2e="left-arrow-button"
     />
     <AntDropdown
       v-model:show-dropdown="showMonthDropdown"
@@ -101,6 +104,7 @@ function onClickNext() {
         :skeleton="skeleton"
         expanded
         @click="showMonthDropdown = !showMonthDropdown"
+        data-e2e="month-dropdown-button"
       >
         {{ options[month] }}
       </AntButton>
@@ -125,6 +129,7 @@ function onClickNext() {
         :skeleton="skeleton"
         expanded
         @click="showYearDropdown = !showYearDropdown"
+        data-e2e="year-dropdown-button"
       >
         {{ year }}
       </AntButton>
@@ -147,6 +152,7 @@ function onClickNext() {
         :grouped="Grouped.right"
         :skeleton="skeleton"
         @click="onClickNext"
+        data-e2e="right-arrow-button"
       />
     </div>
   </div>

package/dist/components/calendar/AntMonthPicker.vue

@@ -33,7 +33,9 @@ const currentMonthIndex = new Date().getMonth();
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-2">
+  <div class="grid grid-cols-3 gap-2"
+    data-e2e="month-picker"
+  >
     <div
       v-for="(month, index) in months"
       :key="index"

package/dist/components/calendar/AntYearPicker.vue

@@ -36,7 +36,9 @@ defineExpose({
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col"
+    data-e2e="year-picker"
+  >
     <div
       ref="yearListRef"
       class="h-64 overflow-y-auto flex flex-col gap-2 p-2 border-b border-base-300"

package/dist/components/forms/AntField.vue

@@ -75,6 +75,8 @@ const descriptionClasses = computed(() => ({
   <div
     class="flex flex-col items-start"
     :class="fieldClasses"
+    :data-e2e-state="_state"
+    :data-e2e-skeleton="skeleton"
   >
     <AntInputLabel
       :label="label"

package/dist/components/forms/AntFormGroup.vue

@@ -34,6 +34,7 @@ const classes = computed(() => {
   <section
     class="flex"
     :class="classes"
+    data-e2e="form-group"
   >
     <slot />
   </section>

package/dist/components/forms/__stories/AntFormGroup.stories.js

@@ -45,7 +45,7 @@ const Docs = exports.Docs = {
       <AntFormGroup v-bind="args">
         <AntFormGroupLabel>Example label</AntFormGroupLabel>
         <AntTextInput label="Example"/>
-        <AntButton state="primary">Submit</AntButton>
+        <AntButton state="primary" data-e2e="submit-button">Submit</AntButton>
       </AntFormGroup>
     `
   }),

package/dist/components/forms/__stories/AntFormGroup.stories.mjs

@@ -40,7 +40,7 @@ export const Docs = {
       <AntFormGroup v-bind="args">
         <AntFormGroupLabel>Example label</AntFormGroupLabel>
         <AntTextInput label="Example"/>
-        <AntButton state="primary">Submit</AntButton>
+        <AntButton state="primary" data-e2e="submit-button">Submit</AntButton>
       </AntFormGroup>
     `
   }),

package/dist/components/inputs/AntColorInput/AntColorInput.vue

@@ -187,6 +187,7 @@ onMounted(() => {
     :state="state"
     :messages="messages"
     label-for="noop"
+    data-e2e="color-input"
   >
     <AntDropdown
       v-model:show-dropdown="showDropdown"
@@ -202,8 +203,6 @@ onMounted(() => {
         >
           <div
             ref="itemRef"
-            data-e2e="color-input"
-            :data-e2e-state="state"
             :class="itemClasses"
             :tabindex="disabled || readonly ? -1 : 0"
             @click="onClick"

package/dist/components/inputs/AntColorInput/ColorSelection.vue

@@ -42,6 +42,7 @@ onMounted(() => {
 
 <template>
   <div
+    data-e2e="color-selection"
     class="grid grid-cols-4 gap-1.5"
     :class="{
       'p-1': size === Size.xs2,

package/dist/components/inputs/AntDateInput.vue

@@ -105,6 +105,7 @@ function onClickCalendar() {
     :description="description"
     :state="state"
     :messages="messages"
+    data-e2e="date-input"
   >
     <div class="flex">
       <AntBaseInput
@@ -140,8 +141,10 @@ function onClickCalendar() {
         :icon-left="faMultiply"
         :grouped="Grouped.right"
         :state="state as unknown as State"
+        :skeleton="skeleton"
         :size="size"
         @click="_modelValue = null"
+        data-e2e="clear-button"
       />
     </div>
   </AntField>

package/dist/components/inputs/AntImageInput.vue

@@ -154,6 +154,7 @@ onBeforeUnmount(() => {
     :state="state"
     :messages="messages"
     :expanded="expanded"
+    data-e2e="image-input"
   >
     <div
       class="flex gap-2.5 w-full"
@@ -224,6 +225,7 @@ onBeforeUnmount(() => {
 
           <AntButton
             v-if="src"
+            data-e2e="remove-button"
             :size="Size.lg"
             :icon-left="faMultiply"
             :skeleton="skeleton"
@@ -239,6 +241,7 @@ onBeforeUnmount(() => {
 
           <AntButton
             v-else
+            data-e2e="upload-button"
             :size="Size.lg"
             :icon-left="faUpload"
             :skeleton="skeleton"

package/dist/components/inputs/AntMultiSelect.vue

@@ -260,7 +260,7 @@ onMounted(() => {
     :expanded="expanded"
     :messages="messages"
     label-for="noop"
-    data-e2e="select"
+    data-e2e="multi-select"
     @click-label="() => inputRef?.focus()"
   >
     <AntDropdown

package/dist/components/inputs/AntNumberInput.vue

@@ -158,6 +158,7 @@ function onButtonBlur() {
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
     :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? Number(_modelValue) : undefined"
     :messages="messages"
+    data-e2e="number-input"
   >
     <div
       class="flex relative"
@@ -173,6 +174,7 @@ function onButtonBlur() {
         :readonly="readonly"
         @click="subtract"
         @blur="onButtonBlur"
+        data-e2e="decrement-button"
       />
 
       <AntBaseInput
@@ -204,6 +206,7 @@ function onButtonBlur() {
         :readonly="readonly"
         @click="add"
         @blur="onButtonBlur"
+        data-e2e="increment-button"
       />
     </div>
   </AntField>

package/dist/components/inputs/AntPasswordInput.vue

@@ -94,6 +94,7 @@ onMounted(() => {
     :description="description"
     :state="state"
     :messages="messages"
+    data-e2e="password-input"
   >
     <div class="flex relative">
       <AntBaseInput

package/dist/components/inputs/AntRadio.vue

@@ -174,6 +174,7 @@ onMounted(() => {
     :size="size"
     :expanded="false"
     :messages="messages"
+    data-e2e="radio"
   >
     <div
       class="flex items-center"

package/dist/components/inputs/AntRadioGroup.vue

@@ -130,6 +130,7 @@ onMounted(() => {
     :messages="messages"
     :size="fieldSize"
     label-for="noop"
+    data-e2e="radio-group"
   >
     <div
       ref="containerRef"

package/dist/components/inputs/AntRangeSlider.vue

@@ -101,6 +101,7 @@ onMounted(() => {
     :description="description"
     :state="state"
     :messages="messages"
+    data-e2e="range-slider"
   >
     <input
       v-model.number="_modelValue"

package/dist/components/inputs/AntSelect.vue

@@ -240,6 +240,7 @@ function onClickRemoveButton() {
 
 <template>
   <AntField
+    data-e2e="select"
     :label="label"
     :size="size"
     :skeleton="skeleton"
@@ -249,7 +250,6 @@ function onClickRemoveButton() {
     :expanded="expanded"
     :messages="messages"
     label-for="noop"
-    data-e2e="select"
     @click-label="() => inputRef?.focus()"
   >
     <div

package/dist/components/inputs/AntSwitcher.vue

@@ -161,6 +161,7 @@ onMounted(() => {
     :state="state"
     :messages="messages"
     label-for="noop"
+    data-e2e="switcher"
   >
     <div
       :class="containerClasses"
@@ -180,6 +181,7 @@ onMounted(() => {
         :disabled="disabled"
         @click="prevOption"
         @blur="onBlur"
+        data-e2e="left-arrow-button"
       />
 
       <AntSkeleton
@@ -206,6 +208,7 @@ onMounted(() => {
         :disabled="disabled"
         @click="nextOption"
         @blur="onBlur"
+        data-e2e="right-arrow-button"
       />
     </div>
   </AntField>

package/dist/components/inputs/AntTagInput.vue

@@ -271,6 +271,7 @@ onMounted(() => {
       :state="state"
       :expanded="expanded"
       :messages="messages"
+      data-e2e="tag-input"
     >
       <AntSkeleton
         :visible="skeleton"

package/dist/components/inputs/AntTextInput.vue

@@ -80,6 +80,7 @@ onMounted(() => {
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
     :limiter-value="limiter ? _value?.length : undefined"
     :messages="messages"
+    data-e2e="text-input"
   >
     <AntBaseInput
       v-model="_value"

package/dist/components/inputs/AntTextarea.vue

@@ -192,6 +192,7 @@ defineExpose({
     :limiter-value="limiter ? _modelValue?.length : undefined"
     :messages="messages"
     :expanded-height="!resize"
+    data-e2e="textarea"
   >
     <AntSkeleton
       :visible="skeleton"

package/dist/components/inputs/AntUnitInput.vue

@@ -90,6 +90,7 @@ onMounted(() => {
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
     :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? Number(_modelValue) : undefined"
     :messages="messages"
+    data-e2e="unit-input"
   >
     <div
       class="flex relative"

package/dist/components/inputs/Elements/AntBaseInput.vue

@@ -231,6 +231,7 @@ function onClickClearIcon() {
   <div
     class="block relative w-full h-fit"
     :class="_wrapperClass"
+    data-e2e="base-input"
   >
     <AntSkeleton
       :visible="skeleton"
@@ -271,6 +272,7 @@ function onClickClearIcon() {
         title=""
         v-bind="$attrs"
         @blur="onBlur"
+        :data-e2e-state="state"
       >
 
       <div

package/dist/components/inputs/Elements/AntInputDescription.vue

@@ -52,6 +52,8 @@ onMounted(() => {
 <template>
   <div
     :class="classes"
+    data-e2e="input-description"
+    :data-e2e-state="state"
   >
     <AntSkeleton
       :visible="skeleton"

package/dist/components/inputs/Elements/AntInputLimiter.vue

@@ -52,7 +52,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="classes">
+  <div :class="classes"
+    data-e2e="input-limiter"
+    :data-e2e-state="state"
+  >
     <AntSkeleton
       :visible="skeleton"
       rounded

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -295,8 +295,9 @@ watch(_modelValue, (val) => {
         v-if="isOpen"
         ref="floating"
         :class="dropdownClasses"
-        data-e2e="select-menu"
         :style="{minWidth: `${elementSize.width.value}px!important`, ...floatingStyles}"
+        data-e2e="select-menu"
+        :data-e2e-state="state"
       >
         <div class="flex flex-col gap-px">
           <div

package/dist/components/layouts/AntNavLeftLayout.vue

@@ -26,6 +26,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
         v-if="hasLogoImageSlot"
         :to="logoRoute"
         class="bg-white min-h-[60px] flex justify-center items-center p-2.5"
+        data-e2e="nav-left-layout-logo"
       >
         <slot name="logo-image" />
       </component>

package/dist/components/navbar/AntNavbar.vue

@@ -19,7 +19,9 @@ const containerClasses = computed(() => ({
 </script>
 
 <template>
-  <div :class="containerClasses">
+  <div :class="containerClasses"
+    data-e2e="navbar"
+  >
     <AntNavbarItem
       v-for="(navbarItem, index) in navbarItems"
       :key="`navbar-item-${index}`"

package/dist/components/navbar/AntNavbarItem.vue

@@ -41,6 +41,7 @@ function itemClick(): void {
     v-bind="$attrs"
     :class="itemClasses"
     @click="itemClick"
+    data-e2e="navbar-item"
   >
     <AntIcon
       v-if="navbarItem.icon"

package/dist/components/table/AntTableSortButton.vue

@@ -53,5 +53,6 @@ const buttonIcon = computed(() => {
   <AntButton
     :size="buttonSize"
     :icon-left="buttonIcon"
+    data-e2e="table-sort-button"
   />
 </template>

package/dist/components/tabs/AntTabItem.vue

@@ -113,6 +113,8 @@ const iconColor = computed(() => {
     :is="to !== undefined && !disabled ? 'router-link' : 'div'"
     :to="to"
     :class="containerClasses"
+    data-e2e="tab-item"
+    :data-e2e-state="state"
   >
     <slot name="iconLeft">
       <AntIcon

package/dist/components/tabs/AntTabs.vue

@@ -56,6 +56,7 @@ function clickTab(tabItem: TabItem) {
     <div
       class="flex gap-px bg-base-300 border-base-300 overflow-x-auto"
       :class="scrollContainerClasses"
+      data-e2e="tabs"
     >
       <slot>
         <AntTabItem

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "4.1.4",
+  "version": "4.1.6",
   "private": false,
   "type": "module",
   "exports": {