vueless 1.0.2-beta.19 → 1.0.2-beta.20

package/package.json

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

package/ui.form-calendar/UCalendar.vue

@@ -766,6 +766,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   navigationAttrs,
@@ -782,8 +783,14 @@ const {
 </script>
 
 <template>
-  <div ref="wrapper" :tabindex="tabindex" v-bind="wrapperAttrs" @keydown="onKeydown">
-    <div v-bind="navigationAttrs">
+  <div
+    ref="wrapper"
+    :tabindex="tabindex"
+    v-bind="wrapperAttrs"
+    :data-test="getDataTest()"
+    @keydown="onKeydown"
+  >
+    <div v-bind="navigationAttrs" :data-test="getDataTest('navigation')">
       <UButton
         v-if="range"
         square
@@ -792,6 +799,7 @@ const {
         variant="ghost"
         :icon="config.defaults.prevYearIcon"
         v-bind="nextPrevButtonAttrs"
+        :data-test="getDataTest('prev-year')"
         @mousedown.prevent.capture
         @click="onClickPrevYearButton"
       />
@@ -803,6 +811,7 @@ const {
         variant="ghost"
         :icon="config.defaults.prevIcon"
         v-bind="nextPrevButtonAttrs"
+        :data-test="getDataTest('prev')"
         @mousedown.prevent.capture
         @click="onClickPrevButton"
       />
@@ -814,6 +823,7 @@ const {
         variant="ghost"
         :label="currentViewLabel"
         v-bind="viewSwitchButtonAttrs"
+        :data-test="getDataTest('view-switch')"
         @mousedown.prevent.capture
         @click="onClickViewSwitch"
       />
@@ -825,6 +835,7 @@ const {
         variant="ghost"
         :icon="config.defaults.nextIcon"
         v-bind="nextPrevButtonAttrs"
+        :data-test="getDataTest('next')"
         @mousedown.prevent.capture
         @click="onClickNextButton"
       />
@@ -837,6 +848,7 @@ const {
         variant="ghost"
         :icon="config.defaults.nextYearIcon"
         v-bind="nextPrevButtonAttrs"
+        :data-test="getDataTest('next-year')"
         @mousedown.prevent.capture
         @click="onClickNextYearButton"
       />
@@ -855,6 +867,7 @@ const {
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :data-test="getDataTest('day-view')"
       @input="onInputDate"
     />
 
@@ -870,6 +883,7 @@ const {
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :data-test="getDataTest('month-view')"
       @input="onInput"
     />
 
@@ -885,10 +899,11 @@ const {
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :data-test="getDataTest('year-view')"
       @input="onInput"
     />
 
-    <div v-if="isTimepickerEnabled" v-bind="timepickerAttrs">
+    <div v-if="isTimepickerEnabled" v-bind="timepickerAttrs" :data-test="getDataTest('timepicker')">
       <span v-bind="timepickerLabelAttrs" v-text="localeMessages.timeLabel" />
 
       <div v-bind="timepickerInputWrapperAttrs">
@@ -897,6 +912,7 @@ const {
           placeholder="00"
           type="text"
           v-bind="timepickerInputHoursAttrs"
+          :data-test="getDataTest('timepicker-hours')"
           @input.prevent="onTimeInput($event as InputEvent, InputType.Hours)"
           @click.prevent="onClickTimeInput"
           @focus.prevent="onFocusTimeInput"
@@ -908,6 +924,7 @@ const {
           placeholder="00"
           type="text"
           v-bind="timepickerInputMinutesAttrs"
+          :data-test="getDataTest('timepicker-minutes')"
           @input.prevent="onTimeInput($event as InputEvent, InputType.Minutes)"
           @click.prevent="onClickTimeInput"
           @focus.prevent="onFocusTimeInput"
@@ -919,6 +936,7 @@ const {
           placeholder="00"
           type="text"
           v-bind="timepickerInputSecondsAttrs"
+          :data-test="getDataTest('timepicker-seconds')"
           @input.prevent="onTimeInput($event as InputEvent, InputType.Seconds)"
           @click.prevent="onClickTimeInput"
           @focus.prevent="onFocusTimeInput"
@@ -932,6 +950,7 @@ const {
         color="grayscale"
         variant="soft"
         v-bind="timepickerSubmitButtonAttrs"
+        :data-test="getDataTest('timepicker-submit')"
         @click="onClickSubmit"
       >
         {{ localeMessages.okLabel }}

package/ui.form-color-picker/UColorPicker.vue

@@ -57,11 +57,11 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div :id="elementId" ref="list" v-bind="listAttrs">
+  <div :id="elementId" ref="list" v-bind="listAttrs" :data-test="getDataTest()">
     <UButton
       v-for="(colorClass, color) in colors"
       :key="color"
@@ -71,9 +71,10 @@ const { listAttrs, colorButtonAttrs, circleAttrs } = useUI<Config>(defaultConfig
       color="grayscale"
       :variant="selectedItem === color ? 'soft' : 'ghost'"
       v-bind="colorButtonAttrs"
+      :data-test="getDataTest(`button-${color}`)"
       @click="onClickColor(color)"
     >
-      <div :class="colorClass" v-bind="circleAttrs" />
+      <div :class="colorClass" v-bind="circleAttrs" :data-test="getDataTest(`circle-${color}`)" />
     </UButton>
   </div>
 </template>

package/ui.form-date-picker/UDatePicker.vue

@@ -255,6 +255,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   rightIconAttrs,
@@ -278,7 +279,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
     <UInput
       :id="elementId"
       :key="String(userFormatDate)"
@@ -295,6 +296,7 @@ watchEffect(() => {
       :right-icon="rightIcon || config.defaults.calendarIcon"
       no-autocomplete
       v-bind="isShownCalendar ? datepickerInputActiveAttrs : datepickerInputAttrs"
+      :data-test="getDataTest('input')"
       @input="onTextInput"
       @focus="activate"
       @copy="onCopy"
@@ -337,6 +339,7 @@ watchEffect(() => {
         :max-date="maxDate"
         :min-date="minDate"
         v-bind="datepickerCalendarAttrs"
+        :data-test="getDataTest('calendar')"
         @keydown.esc="deactivate"
         @user-date-change="onUserFormatDateChange"
         @input="onInput"

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -565,6 +565,7 @@ const mutatedProps = computed(() => ({
 }));
 
 const {
+  getDataTest,
   config,
   wrapperAttrs,
   rightIconAttrs,
@@ -610,7 +611,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
     <UInput
       v-if="isVariant.input"
       :id="elementId"
@@ -628,6 +629,7 @@ watchEffect(() => {
       no-autocomplete
       readonly
       v-bind="isShownMenu ? datepickerInputActiveAttrs : datepickerInputAttrs"
+      :data-test="getDataTest('input')"
       @focus="activate"
       @keydown.esc="deactivate"
     >
@@ -659,6 +661,7 @@ watchEffect(() => {
         variant="soft"
         :icon="config.defaults.prevIcon"
         v-bind="rangeButtonShiftAttrs"
+        :data-test="getDataTest('button-prev')"
         @click="onClickShiftRange(ShiftAction.Prev)"
       />
 
@@ -671,6 +674,7 @@ watchEffect(() => {
         :label="userFormatDate"
         variant="soft"
         v-bind="rangeButtonSelectAttrs"
+        :data-test="getDataTest('button')"
         @click="activate"
       />
 
@@ -682,6 +686,7 @@ watchEffect(() => {
         variant="soft"
         :icon="config.defaults.nextIcon"
         v-bind="rangeButtonShiftAttrs"
+        :data-test="getDataTest('button-next')"
         @click="onClickShiftRange(ShiftAction.Next)"
       />
     </div>
@@ -693,6 +698,7 @@ watchEffect(() => {
         v-click-outside="[deactivate, clickOutsideOptions]"
         tabindex="-1"
         v-bind="menuAttrs"
+        :data-test="getDataTest('menu')"
         @keydown.esc="deactivate"
       >
         <UDatePickerRangePeriodMenu
@@ -708,6 +714,7 @@ watchEffect(() => {
           :min-date="minDate"
           :max-date="maxDate"
           :attrs="rangePeriodMenuAttrs as unknown as UDatePickerRangePeriodMenuAttrs"
+          :data-test="getDataTest('period-menu')"
           @toggle-menu="isShownMenu = !isShownMenu"
           @close-menu="isShownMenu = false"
           @click-prev="onClickShiftDatesList(ShiftAction.Prev)"
@@ -730,9 +737,14 @@ watchEffect(() => {
           :date-format="dateFormat"
           :config="config"
           :attrs="rangeInputsAttrs as unknown as UDatePickerRangeInputsAttrs"
+          :data-test="getDataTest('range-inputs')"
         />
 
-        <div v-if="inputRangeToError || inputRangeFromError" v-bind="rangeInputErrorAttrs">
+        <div
+          v-if="inputRangeToError || inputRangeFromError"
+          v-bind="rangeInputErrorAttrs"
+          :data-test="getDataTest('error')"
+        >
           {{ inputRangeToError || inputRangeFromError }}
         </div>
 
@@ -745,6 +757,7 @@ watchEffect(() => {
           :date-format="dateFormat"
           v-bind="datepickerCalendarAttrs as KeyAttrsWithConfig<UCalendarConfig>"
           range
+          :data-test="getDataTest('calendar')"
           @input="onInputCalendar"
         />
       </div>