vueless 1.4.11 → 1.4.12-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.11",
+  "version": "1.4.12-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@types/lodash-es": "^4.17.12",
     "cva": "^1.0.0-beta.4",
     "lodash-es": "^4.18.1",
-    "rolldown": "1.0.0-rc.17",
+    "rolldown": "^1.1.5",
     "svgo": "^4.0.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",

package/types.ts

@@ -390,9 +390,11 @@ export interface CVACompoundVariants {
 
 export type MutatedProps = ComputedRef<UnknownObject>;
 
+export type GetDataTest = (suffix?: string) => string | null;
+
 export type UseUI<T> = {
   config: Ref<T & ComponentConfig<T>>;
-  getDataTest: (suffix?: string) => string | null;
+  getDataTest: GetDataTest;
 } & KeysAttrs<T>;
 
 export interface ConfigDerivedData {

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

@@ -736,7 +736,9 @@ watchEffect(() => {
           :min-date="minDate"
           :max-date="maxDate"
           :attrs="rangePeriodMenuAttrs as unknown as UDatePickerRangePeriodMenuAttrs"
-          :data-test="getDataTest('period-menu')"
+          :get-data-test="
+            (suffix?: string) => getDataTest(suffix ? `period-menu-${suffix}` : 'period-menu')
+          "
           @toggle-menu="isShownMenu = !isShownMenu"
           @close-menu="isShownMenu = false"
           @click-prev="onClickShiftDatesList(ShiftAction.Prev)"
@@ -759,7 +761,9 @@ watchEffect(() => {
           :date-format="dateFormat"
           :config="config"
           :attrs="rangeInputsAttrs as unknown as UDatePickerRangeInputsAttrs"
-          :data-test="getDataTest('range-inputs')"
+          :get-data-test="
+            (suffix?: string) => getDataTest(suffix ? `range-inputs-${suffix}` : 'range-inputs')
+          "
         />
 
         <div

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

@@ -16,9 +16,7 @@ type UInputRef = InstanceType<typeof UInput>;
 
 defineOptions({ internal: true });
 
-const props = withDefaults(defineProps<UDatePickerRangeInputsProps>(), {
-  dataTest: null,
-});
+const props = defineProps<UDatePickerRangeInputsProps>();
 
 const rangeInputStartRef = useTemplateRef<UInputRef>("range-input-start");
 const rangeInputEndRef = useTemplateRef<UInputRef>("range-input-end");
@@ -142,7 +140,7 @@ defineExpose({
       v-bind="attrs.rangeInputFirstAttrs.value"
       :name="rangeInputName"
       no-autocomplete
-      :data-test="`${dataTest}-from`"
+      :data-test="getDataTest('from')"
       @blur="updateDateValue(rangeStart, InputRangeType.Start)"
       @keydown.enter="updateDateValue(rangeStart, InputRangeType.Start)"
       @input="validateInput($event, InputRangeType.Start)"
@@ -156,7 +154,7 @@ defineExpose({
       v-bind="attrs.rangeInputLastAttrs.value"
       :name="rangeInputName"
       no-autocomplete
-      :data-test="`${dataTest}-to`"
+      :data-test="getDataTest('to')"
       @blur="updateDateValue(rangeEnd, InputRangeType.End)"
       @keydown.enter="updateDateValue(rangeEnd, InputRangeType.End)"
       @input="validateInput($event, InputRangeType.End)"

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

@@ -22,9 +22,7 @@ import type { DatePeriodRange } from "./utilDateRange";
 
 defineOptions({ internal: true });
 
-const props = withDefaults(defineProps<UDatePickerRangePeriodMenuProps>(), {
-  dataTest: null,
-});
+const props = defineProps<UDatePickerRangePeriodMenuProps>();
 
 const emit = defineEmits(["toggleMenu", "closeMenu", "clickPrev", "clickNext"]);
 
@@ -150,7 +148,7 @@ function getDatePeriodState(date: DatePeriodRange) {
 </script>
 
 <template>
-  <div v-bind="attrs.periodRowAttrs.value" :data-test="dataTest">
+  <div v-bind="attrs.periodRowAttrs.value" :data-test="getDataTest()">
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -159,6 +157,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="soft"
         :label="periodButton.title"
+        :data-test="getDataTest(`period-${periodButton.name}`)"
         v-bind="attrs.periodButtonAttrs.value"
         @click="onClickPeriodButton(periodButton.name)"
       />
@@ -170,6 +169,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="soft"
         :label="periodButton.title"
+        :data-test="getDataTest(`period-${periodButton.name}`)"
         v-bind="attrs.periodButtonActiveAttrs.value"
         @click="onClickPeriodButton(periodButton.name)"
       />
@@ -183,6 +183,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       size="xs"
       color="grayscale"
       variant="soft"
+      :data-test="getDataTest('custom-range')"
       v-bind="attrs.customRangeButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
@@ -200,6 +201,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       size="xs"
       color="grayscale"
       variant="soft"
+      :data-test="getDataTest('custom-range')"
       v-bind="attrs.customRangeButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
@@ -219,6 +221,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       variant="soft"
       :label="locale.ownRange"
       :left-icon="config.defaults?.ownRangeIcon"
+      :data-test="getDataTest('own-range')"
       v-bind="attrs.periodButtonAttrs.value"
       @click="onClickOwnRange"
     />
@@ -231,6 +234,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       variant="soft"
       :label="locale.ownRange"
       :left-icon="config.defaults?.ownRangeIcon"
+      :data-test="getDataTest('own-range')"
       v-bind="attrs.periodButtonActiveAttrs.value"
       @click="onClickOwnRange"
     />
@@ -244,6 +248,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults?.prevIcon"
+        :data-test="getDataTest('range-switch-prev')"
         v-bind="attrs.rangeSwitchButtonAttrs.value"
         @click="emit('clickPrev')"
       />
@@ -258,6 +263,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults?.nextIcon"
+        :data-test="getDataTest('range-switch-next')"
         v-bind="attrs.rangeSwitchButtonAttrs.value"
         @click="emit('clickNext')"
       />
@@ -265,7 +271,7 @@ function getDatePeriodState(date: DatePeriodRange) {
 
     <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs.value">
       <template
-        v-for="date in periodDateList"
+        v-for="(date, index) in periodDateList"
         :key="date.title + date.startRange.toISOString() + date.endRange.toISOString()"
       >
         <UButton
@@ -276,6 +282,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentSelectedAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
 
@@ -287,6 +294,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateSelectedAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
 
@@ -298,6 +306,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
 
@@ -309,6 +318,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
       </template>

package/ui.form-date-picker-range/tests/UDatePickerRange.test.ts

@@ -379,6 +379,65 @@ describe("UDatePickerRange.vue", () => {
       expect(component.find(`[data-test="${dataTest}-button-prev"]`).exists()).toBe(true);
       expect(component.find(`[data-test="${dataTest}-button-next"]`).exists()).toBe(true);
     });
+
+    it("Data Test – applies data-test to period menu buttons when menu is open", async () => {
+      const dataTest = "date-picker-range";
+      const menuPrefix = `${dataTest}-period-menu`;
+
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          dataTest,
+          modelValue: { from: null, to: null },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const monthButton = component.find(`[data-test="${menuPrefix}-period-month"]`);
+      const quarterButton = component.find(`[data-test="${menuPrefix}-period-quarter"]`);
+      const yearButton = component.find(`[data-test="${menuPrefix}-period-year"]`);
+      const ownRangeButton = component.find(`[data-test="${menuPrefix}-own-range"]`);
+
+      expect(monthButton.exists()).toBe(true);
+      expect(quarterButton.exists()).toBe(true);
+      expect(yearButton.exists()).toBe(true);
+      expect(ownRangeButton.exists()).toBe(true);
+
+      await monthButton.trigger("click");
+
+      const gridButtons = component.findAll(`[data-test^="${menuPrefix}-period-date-"]`);
+
+      expect(gridButtons.length).toBeGreaterThan(0);
+    });
+
+    it("Data Test – period menu buttons have no data-test attribute when dataTest is not set", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const periodMenu = component.findComponent(UDatePickerRangePeriodMenu);
+
+      expect(periodMenu.exists()).toBe(true);
+      expect(component.findAll('[data-test^="null-"]').length).toBe(0);
+
+      const monthButton = component.findAll("button").find((button) => button.text() !== "");
+
+      if (monthButton) {
+        await monthButton.trigger("click");
+      }
+
+      expect(component.findAll('[data-test^="null-"]').length).toBe(0);
+    });
   });
 
   describe("Menu", () => {

package/ui.form-date-picker-range/types.ts

@@ -2,7 +2,7 @@ import defaultConfig from "./config";
 import { ShiftAction } from "./constants";
 
 import type { Ref } from "vue";
-import type { UnknownObject, ComponentConfig } from "../types";
+import type { UnknownObject, ComponentConfig, GetDataTest } from "../types";
 import type { DatePeriodRange } from "./utilDateRange";
 
 export type Locale = typeof defaultConfig.i18n;
@@ -56,7 +56,7 @@ export interface UDatePickerRangePeriodMenuProps {
   maxDate: string | Date | undefined;
   minDate: string | Date | undefined;
   customRangeButton: CustomRangeButton;
-  dataTest?: string | null;
+  getDataTest: GetDataTest;
   config: Config;
   attrs: UDatePickerRangePeriodMenuAttrs;
 }
@@ -74,7 +74,7 @@ export interface UDatePickerRangeInputsProps {
   minDate: string | Date | undefined;
   config: Config;
   attrs: UDatePickerRangeInputsAttrs;
-  dataTest?: string | null;
+  getDataTest: GetDataTest;
 }
 
 export interface CustomRangeButton {

package/utils/node/helper.js

@@ -204,6 +204,7 @@ export async function buildTSFile(entryPath, configOutFile) {
     output: {
       file: configOutFile,
       format: "esm",
+      codeSplitting: false,
     },
   });
 }