vueless 1.5.1-beta.2 → 1.5.1-beta.4

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

@@ -60,7 +60,14 @@ export default /*tw*/ {
   periodRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
   periodButtonActive: "{>periodButton} bg-grayscale-accented/15!",
-  rangeSwitchWrapper: "flex items-center justify-between py-2",
+  rangeSwitchWrapper: {
+    base: "flex items-center justify-between py-2",
+    variants: {
+      periodSwitch: {
+        false: "pt-0",
+      },
+    },
+  },
   rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-medium",
   periodDateList: {
@@ -87,7 +94,14 @@ export default /*tw*/ {
     },
   },
   customRangeDescription: "",
-  rangeInputWrapper: "flex mt-4 group/range-input-wrapper",
+  rangeInputWrapper: {
+    base: "flex mt-4 group/range-input-wrapper",
+    variants: {
+      periodSwitch: {
+        false: "mt-2",
+      },
+    },
+  },
   rangeInput: {
     base: "{UInput}",
     inputLabel: {
@@ -211,6 +225,7 @@ export default /*tw*/ {
     dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
+    periods: ["week", "month", "quarter", "year", "ownRange"],
     /* icons */
     calendarIcon: "calendar_month-fill",
     nextIcon: "keyboard_arrow_right",

package/ui.form-date-picker-range/storybook/stories.ts

@@ -225,6 +225,54 @@ OpenDirection.parameters = {
   },
 };
 
+export const Periods: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
+  components: { UDatePickerRange, UCol, UText },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        label="All periods (default)"
+        class="w-full max-w-96"
+      />
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        :periods="['month', 'quarter', 'year']"
+        label="Month, quarter, year"
+        class="w-full max-w-96"
+      />
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        :periods="['week', 'month']"
+        label="Week, month"
+        class="w-full max-w-96"
+      />
+      <UDatePickerRange
+        v-bind="args"
+        v-model="args.modelValue"
+        :periods="['ownRange']"
+        label="Own range only"
+        class="w-full max-w-96"
+      />
+    </UCol>
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+  `,
+});
+Periods.parameters = {
+  docs: {
+    description: {
+      story: "Use the `periods` prop to limit which period types are available for selection.",
+    },
+    story: {
+      height: "800px",
+    },
+  },
+};
+
 export const DateFormat = DefaultTemplate.bind({});
 DateFormat.args = { variant: "input", dateFormat: "Y-m-d" };
 DateFormat.parameters = {
@@ -259,6 +307,35 @@ MinMax.parameters = {
   },
 };
 
+export const DayClasses = DefaultTemplate.bind({});
+DayClasses.args = {
+  modelValue: { from: fromDate, to: toDate },
+  dayClasses: (day: Date) => {
+    return [5, 12, 19].includes(day.getDate()) ? "bg-success" : "";
+  },
+};
+DayClasses.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "Use the `dayClasses` prop to apply extra CSS classes to individual day cells, e.g. to highlight dates by status.",
+    },
+    source: {
+      code: `
+        <UDatePickerRange
+          v-model="args.modelValue"
+          label="Select date range"
+          :day-classes="(day) => ([5, 12, 19].includes(day.getDate()) ? 'bg-success' : '')"
+          class="w-full max-w-96"
+        />
+
+        <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+      `,
+    },
+  },
+};
+
 export const CustomRangeButton = DefaultTemplate.bind({});
 CustomRangeButton.args = {
   customRangeButton: {

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

@@ -1,11 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import UDatePickerRange from "../UDatePickerRange.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UDatePickerRangePeriodMenu from "../UDatePickerRangePeriodMenu.vue";
+import { Period } from "../constants";
 
 import type { RangeDate } from "../../ui.form-calendar/types";
 
@@ -298,6 +299,24 @@ describe("UDatePickerRange.vue", () => {
       expect(component.props("maxDate")).toBe(maxDate);
     });
 
+    it("Day Classes – passes dayClasses to UCalendar", async () => {
+      const dayClasses = (day: Date) => (day.getDate() === 15 ? "bg-mint-highlight" : "");
+
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          dayClasses,
+          modelValue: { from: null, to: null },
+        },
+      });
+
+      const input = component.findComponent(UInput).get("input");
+
+      await input.trigger("focus");
+
+      expect(component.findComponent({ name: "UCalendar" }).props("dayClasses")).toBe(dayClasses);
+    });
+
     it("Custom Range Button – applies custom range button configuration", async () => {
       const customRangeButton = {
         range: { from: new Date("2023-01-01"), to: new Date("2023-01-31") },
@@ -440,6 +459,189 @@ describe("UDatePickerRange.vue", () => {
     });
   });
 
+  describe("Periods", () => {
+    const dataTest = "date-picker-range";
+    const menuPrefix = `${dataTest}-period-menu`;
+    const periodButtonNames: string[] = Object.values(Period).filter(
+      (type) => type !== Period.OwnRange && type !== Period.Custom,
+    );
+    const fullWeek: RangeDate = {
+      from: new Date(2023, 11, 4),
+      to: new Date(2023, 11, 10, 23, 59, 59),
+    };
+
+    async function mountOpened(props: Record<string, unknown>) {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          dataTest,
+          modelValue: { from: null, to: null },
+          ...props,
+        },
+      });
+
+      await component.findComponent(UInput).get("input").trigger("focus");
+
+      return component;
+    }
+
+    function findPeriodButton(component: ReturnType<typeof mount>, name: string) {
+      return component.find(`[data-test="${menuPrefix}-period-${name}"]`);
+    }
+
+    function findOwnRangeButton(component: ReturnType<typeof mount>) {
+      return component.find(`[data-test="${menuPrefix}-own-range"]`);
+    }
+
+    function getRenderedPeriodNames(component: ReturnType<typeof mount>) {
+      return component
+        .findAll(`[data-test^="${menuPrefix}-period-"]`)
+        .map((button) => button.attributes("data-test")!.replace(`${menuPrefix}-period-`, ""))
+        .filter((name) => periodButtonNames.includes(name));
+    }
+
+    function isActive(button: ReturnType<ReturnType<typeof mount>["find"]>) {
+      return button.attributes("vl-key") === "periodButtonActive";
+    }
+
+    it("Periods – renders all period buttons and own range button by default", async () => {
+      const component = await mountOpened({});
+
+      expect(getRenderedPeriodNames(component)).toEqual(periodButtonNames);
+      expect(findOwnRangeButton(component).exists()).toBe(true);
+    });
+
+    it("Periods – renders only allowed period buttons without own range button", async () => {
+      const component = await mountOpened({ periods: ["month", "year"] });
+
+      expect(getRenderedPeriodNames(component)).toEqual(["month", "year"]);
+      expect(findOwnRangeButton(component).exists()).toBe(false);
+    });
+
+    it.each(["ownRange", "month"])(
+      "Periods – hides period switch when %s is the only period",
+      async (period) => {
+        const component = await mountOpened({ periods: [period] });
+
+        expect(getRenderedPeriodNames(component)).toEqual([]);
+        expect(findOwnRangeButton(component).exists()).toBe(false);
+      },
+    );
+
+    it("Periods – reduces range inputs top margin when period switch is hidden", async () => {
+      const component = await mountOpened({ periods: ["ownRange"] });
+      const rangeInputWrapper = component.get("[vl-key='rangeInputWrapper']");
+
+      expect(rangeInputWrapper.classes()).toContain("mt-2");
+      expect(rangeInputWrapper.classes()).not.toContain("mt-4");
+    });
+
+    it("Periods – removes range switch top padding when period switch is hidden", async () => {
+      const component = await mountOpened({ periods: ["month"] });
+
+      expect(component.get("[vl-key='rangeSwitchWrapper']").classes()).toContain("pt-0");
+    });
+
+    it("Periods – keeps range inputs top margin when period switch is shown", async () => {
+      const component = await mountOpened({});
+
+      expect(component.get("[vl-key='rangeInputWrapper']").classes()).toContain("mt-4");
+    });
+
+    it("Periods – shows own range button when custom range is also available", async () => {
+      const component = await mountOpened({
+        periods: ["ownRange"],
+        customRangeButton: {
+          range: { from: new Date(2023, 5, 1), to: new Date(2023, 5, 15) },
+          label: "First half of June",
+        },
+      });
+
+      expect(findOwnRangeButton(component).exists()).toBe(true);
+      expect(component.find(`[data-test="${menuPrefix}-custom-range"]`).exists()).toBe(true);
+    });
+
+    it("Periods – renders period buttons in canonical order", async () => {
+      const component = await mountOpened({
+        periods: ["year", "ownRange", "week", "quarter"],
+      });
+
+      expect(getRenderedPeriodNames(component)).toEqual(["week", "quarter", "year"]);
+      expect(findOwnRangeButton(component).exists()).toBe(true);
+    });
+
+    it("Periods – falls back to own range when model matches a disallowed period", async () => {
+      const component = await mountOpened({
+        periods: ["month", "ownRange"],
+        modelValue: fullWeek,
+      });
+
+      expect(findPeriodButton(component, "week").exists()).toBe(false);
+      expect(isActive(findOwnRangeButton(component))).toBe(true);
+      expect(isActive(findPeriodButton(component, "month"))).toBe(false);
+    });
+
+    it("Periods – falls back to the first allowed period when own range is not allowed", async () => {
+      const component = await mountOpened({
+        periods: ["year", "month"],
+        modelValue: fullWeek,
+      });
+
+      expect(isActive(findPeriodButton(component, "month"))).toBe(true);
+      expect(isActive(findPeriodButton(component, "year"))).toBe(false);
+    });
+
+    it("Periods – treats an empty array as all periods and warns", async () => {
+      const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      const component = await mountOpened({ periods: [] });
+
+      expect(getRenderedPeriodNames(component)).toEqual(periodButtonNames);
+      expect(findOwnRangeButton(component).exists()).toBe(true);
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('No valid "periods"'));
+
+      warnSpy.mockRestore();
+    });
+
+    it.each([
+      ["next", new Date(2023, 6, 1), new Date(2023, 6, 31)],
+      ["prev", new Date(2023, 4, 1), new Date(2023, 4, 31)],
+    ])(
+      "Periods – shifts custom range by the resolved period (%s)",
+      async (direction, expectedFrom, expectedTo) => {
+        const component = mount(UDatePickerRange, {
+          props: {
+            variant: "button",
+            dataTest,
+            periods: ["month", "year"],
+            modelValue: { from: null, to: null },
+            customRangeButton: {
+              range: { from: new Date(2023, 5, 1), to: new Date(2023, 5, 15) },
+              label: "First half of June",
+            },
+            "onUpdate:modelValue": (value: RangeDate) => {
+              component.setProps({ modelValue: value });
+            },
+          },
+        });
+
+        await component.get("[vl-key='rangeButtonSelect']").trigger("click");
+        await findPeriodButton(component, "year").trigger("click");
+        await component.get(`[data-test="${menuPrefix}-custom-range"]`).trigger("click");
+
+        await component.get(`[data-test="${dataTest}-button-${direction}"]`).trigger("click");
+
+        const { from, to } = component.props("modelValue") as {
+          from: Date;
+          to: Date;
+        };
+
+        expect(from.toDateString()).toBe(expectedFrom.toDateString());
+        expect(to.toDateString()).toBe(expectedTo.toDateString());
+      },
+    );
+  });
+
   describe("Menu", () => {
     it("Menu – opens when input is focused", async () => {
       const component = mount(UDatePickerRange, {

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

@@ -1,5 +1,5 @@
 import defaultConfig from "./config";
-import { ShiftAction } from "./constants";
+import { ShiftAction, Period } from "./constants";
 
 import type { Ref } from "vue";
 import type { UnknownObject, ComponentConfig, GetDataTest } from "../types";
@@ -9,6 +9,7 @@ export type Locale = typeof defaultConfig.i18n;
 export type Config = typeof defaultConfig;
 export type IsDatePeriodOutOfRange = (datePeriod: DatePeriodRange) => boolean;
 export type ShiftActions = `${ShiftAction}`;
+export type PeriodType = `${Period}`;
 
 export interface SortedLocale extends Omit<Locale, "weekdays" | "months"> {
   months: {
@@ -53,6 +54,8 @@ export interface UDatePickerRangePeriodMenuProps {
   locale: SortedLocale;
   dateFormat: string | undefined;
   isPeriod: IsPeriod;
+  allowedPeriods: readonly Period[];
+  isPeriodSwitchShown: boolean;
   maxDate: string | Date | undefined;
   minDate: string | Date | undefined;
   customRangeButton: CustomRangeButton;
@@ -122,6 +125,11 @@ export interface Props<TModelValue> {
    */
   customRangeButton?: CustomRangeButton;
 
+  /**
+   * Period types available for selection.
+   */
+  periods?: PeriodType[];
+
   /**
    * Datepicker open direction on x-axis.
    * @extendOnly
@@ -179,6 +187,11 @@ export interface Props<TModelValue> {
    */
   rightIcon?: string;
 
+  /**
+   * Extra CSS classes to apply to each day cell, on top of the built-in state classes.
+   */
+  dayClasses?: (day: Date) => string;
+
   /**
    * Unique element id.
    */

package/utils/node/helper.d.ts

@@ -13,6 +13,7 @@ export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {
 }): Promise<void>;
 export function buildTSFile(entryPath: string, configOutFile: string): Promise<void>;
 export function removeFolderIfEmpty(dirPath: string): Promise<void>;
+export function getAppName(): string;
 export function detectTypeScript(): Promise<boolean>;
 export function autoImportUserConfigs(basePath?: string): Promise<void>;
 export function generateConfigIndexContent(imports?: string[], componentEntries?: string[]): Promise<string>;

package/utils/node/helper.js

@@ -2,7 +2,7 @@ import { build as rolldownBuild } from "rolldown";
 import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
-import { existsSync, statSync } from "node:fs";
+import { existsSync, statSync, readFileSync } from "node:fs";
 import { mkdir, readdir, rmdir, readFile, writeFile } from "node:fs/promises";
 
 import { getMergedConfig, getVuelessConfig } from "./vuelessConfig.js";
@@ -226,6 +226,18 @@ export async function removeFolderIfEmpty(dirPath) {
   }
 }
 
+/**
+ * Reads the app name from the project's package.json (used to prefix theme cookies).
+ * @returns {string} The package name, or an empty string if unavailable.
+ */
+export function getAppName() {
+  try {
+    return JSON.parse(readFileSync(path.join(cwd(), "package.json"), "utf-8")).name || "";
+  } catch {
+    return "";
+  }
+}
+
 /**
  * Detects if TypeScript is a dependency in the project's package.json
  * @returns {Promise<boolean>} True if TypeScript is found in dependencies or devDependencies

package/utils/tests/theme.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { AUTO_MODE_KEY, COLOR_MODE_KEY } from "../../constants.js";
+import { ColorMode } from "../../types";
+import type { Config } from "../../types";
+
+const mockVuelessConfig: Config = {};
+
+vi.mock("../ui", () => ({ vuelessConfig: mockVuelessConfig }));
+
+/* jsdom doesn't implement matchMedia, which theme.ts evaluates on import. */
+const prefersDark = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
+
+window.matchMedia = vi.fn(() => prefersDark) as unknown as typeof window.matchMedia;
+
+const { getTheme, getThemeCookieName, resetTheme } = await import("../theme");
+
+function setConfig(config: Config) {
+  Object.keys(mockVuelessConfig).forEach((key) => delete mockVuelessConfig[key as keyof Config]);
+  Object.assign(mockVuelessConfig, config);
+}
+
+function clearCookies() {
+  document.cookie.split("; ").forEach((cookie) => {
+    const name = cookie.split("=")[0];
+
+    if (name) document.cookie = `${name}=; max-age=-1; path=/`;
+  });
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  clearCookies();
+  setConfig({});
+});
+
+describe("getThemeCookieName", () => {
+  it("prefixes a key with the app name from package.json", () => {
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`vueless-${COLOR_MODE_KEY}`);
+  });
+
+  it("makes the prefix cookie-safe", () => {
+    setConfig({ cookiePrefix: "@acme/Back_Office!" });
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`acme-back_office-${COLOR_MODE_KEY}`);
+  });
+
+  it("lets cookiePrefix override the app name", () => {
+    setConfig({ cookiePrefix: "app-a" });
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
+  });
+
+  it("returns the legacy name when cookiePrefix is an empty string", () => {
+    setConfig({ cookiePrefix: "" });
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(COLOR_MODE_KEY);
+  });
+});
+
+describe("theme value storage", () => {
+  it("writes the cookie prefixed and the localStorage key raw", () => {
+    setConfig({ cookiePrefix: "app-a" });
+
+    getTheme({ colorMode: ColorMode.Dark });
+
+    expect(localStorage.getItem(COLOR_MODE_KEY)).toBe(ColorMode.Dark);
+    expect(document.cookie).toContain(`app-a-${COLOR_MODE_KEY}=${ColorMode.Dark}`);
+    expect(document.cookie.split("; ")).not.toContain(`${COLOR_MODE_KEY}=${ColorMode.Dark}`);
+  });
+
+  it("deletes the prefixed cookies on resetTheme", () => {
+    setConfig({ cookiePrefix: "app-a" });
+
+    getTheme({ colorMode: ColorMode.Dark });
+    resetTheme();
+
+    expect(localStorage.getItem(COLOR_MODE_KEY)).toBeNull();
+    expect(document.cookie).not.toContain(`app-a-${COLOR_MODE_KEY}=${ColorMode.Dark}`);
+  });
+});
+
+describe("CSR color mode precedence", () => {
+  it("prefers the explicit mode over everything else", () => {
+    localStorage.setItem(COLOR_MODE_KEY, ColorMode.Light);
+    setConfig({ colorMode: ColorMode.Light });
+
+    expect(getTheme({ colorMode: ColorMode.Dark }).colorMode).toBe(ColorMode.Dark);
+  });
+
+  it("falls back to localStorage when no mode is passed", () => {
+    localStorage.setItem(COLOR_MODE_KEY, ColorMode.Dark);
+    setConfig({ colorMode: ColorMode.Light });
+
+    expect(getTheme().colorMode).toBe(ColorMode.Dark);
+  });
+
+  it("ignores cookies when localStorage is empty", () => {
+    document.cookie = `${COLOR_MODE_KEY}=${ColorMode.Dark}; path=/`;
+    document.cookie = `vueless-${COLOR_MODE_KEY}=${ColorMode.Dark}; path=/`;
+    setConfig({ colorMode: ColorMode.Light });
+
+    expect(getTheme().colorMode).toBe(ColorMode.Light);
+  });
+
+  it("falls back to vuelessConfig.colorMode", () => {
+    setConfig({ colorMode: ColorMode.Dark });
+
+    expect(getTheme().colorMode).toBe(ColorMode.Dark);
+  });
+
+  it("falls back to light when nothing is set", () => {
+    expect(getTheme().colorMode).toBe(ColorMode.Light);
+  });
+});
+
+describe("auto color mode", () => {
+  it("reports auto mode from the cached localStorage flag", () => {
+    localStorage.setItem(AUTO_MODE_KEY, "1");
+    localStorage.setItem(COLOR_MODE_KEY, ColorMode.Dark);
+
+    expect(getTheme().isColorModeAuto).toBe(true);
+  });
+});