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

package/index.d.ts

@@ -27,7 +27,15 @@ export {
 } from "./utils/ui";
 export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
+export {
+  getTheme,
+  setTheme,
+  resetTheme,
+  getThemeCookieName,
+  normalizeThemeConfig,
+  cssVar,
+  setRootCSSVariables,
+} from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";

package/index.ts

@@ -33,7 +33,15 @@ export {
 } from "./utils/ui";
 export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
+export {
+  getTheme,
+  setTheme,
+  resetTheme,
+  getThemeCookieName,
+  normalizeThemeConfig,
+  cssVar,
+  setRootCSSVariables,
+} from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";

package/modules.d.ts

@@ -33,3 +33,4 @@ declare module "virtual:vueless/vue-i18n" {
 }
 
 declare const __VUELESS_DEV__: boolean;
+declare const __VUELESS_APP_NAME__: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.1-beta.2",
+  "version": "1.5.1-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -24,6 +24,7 @@ import { overrideComponents, restoreComponents } from "./utils/node/componentOve
 import {
   getNuxtDirs,
   getVueDirs,
+  getAppName,
   getVuelessAppDirs,
   cacheMergedConfigs,
   autoImportUserConfigs,
@@ -74,6 +75,9 @@ export const Vueless = function (options = {}) {
 
   const vuelessSrcDir = isInternalEnv ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
 
+  /* app name for theme cookie prefixing */
+  const appName = getAppName();
+
   // Cache to store previous icon content for change detection
   const iconContentCache = new Map();
 
@@ -109,6 +113,7 @@ export const Vueless = function (options = {}) {
       define: {
         "process.env": {},
         __VUELESS_DEV__: process.argv.includes("--watch") || process.argv.includes("-w"),
+        __VUELESS_APP_NAME__: JSON.stringify(appName),
       },
       optimizeDeps: {
         include: isInternalEnv

package/types.ts

@@ -183,6 +183,11 @@ export interface Config extends ThemeConfig {
    */
   directives?: Partial<Directives>;
 
+  /**
+   * Theme cookie name prefix (defaults to the app `package.json` name, `""` disables prefixing).
+   */
+  cookiePrefix?: string;
+
   /**
    * Tailwind CSS theme config.
    * https://tailwindcss.com/docs/theme

package/ui.form-calendar/UCalendar.vue

@@ -54,6 +54,7 @@ const props = withDefaults(defineProps<Props<TModelValue>>(), {
   modelValue: undefined,
   minDate: undefined,
   maxDate: undefined,
+  dayClasses: undefined,
 });
 
 const emit = defineEmits([
@@ -918,6 +919,7 @@ const {
       :date-format="actualDateFormat"
       :locale="locale"
       :config="config"
+      :day-classes="dayClasses"
       :is-arrow-key-dirty="isArrowKeyDirty"
       :data-test="getDataTest('day-view')"
       @input="onInputDate"

package/ui.form-calendar/UCalendarDayView.vue

@@ -232,6 +232,10 @@ function onMouseleaveDayView() {
   }
 }
 
+function getDayCustomClasses(day: Date) {
+  return props.dayClasses?.(day);
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -279,6 +283,7 @@ defineExpose({
           size="md"
           square
           v-bind="selectedDayAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -294,6 +299,7 @@ defineExpose({
           size="md"
           square
           v-bind="selectedDayAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -311,6 +317,7 @@ defineExpose({
           size="md"
           square
           v-bind="firstDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -328,6 +335,7 @@ defineExpose({
           size="md"
           square
           v-bind="lastDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -343,6 +351,7 @@ defineExpose({
           size="md"
           square
           v-bind="anotherMonthFirstDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -358,6 +367,7 @@ defineExpose({
           size="md"
           square
           v-bind="anotherMonthLastDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -373,6 +383,7 @@ defineExpose({
           size="md"
           square
           v-bind="lastDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -391,6 +402,7 @@ defineExpose({
           size="md"
           square
           v-bind="anotherMonthDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -409,6 +421,7 @@ defineExpose({
           size="md"
           square
           v-bind="currentDayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -424,6 +437,7 @@ defineExpose({
           size="md"
           square
           v-bind="dayInRangeAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -439,6 +453,7 @@ defineExpose({
           size="md"
           square
           v-bind="currentDayAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -454,6 +469,7 @@ defineExpose({
           size="md"
           square
           v-bind="activeDayAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -469,6 +485,7 @@ defineExpose({
           size="md"
           square
           v-bind="anotherMonthDayAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture
@@ -484,6 +501,7 @@ defineExpose({
           size="md"
           square
           v-bind="dayAttrs"
+          :class="getDayCustomClasses(day)"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
           :label="formatDate(day, 'j', locale)"
           @mousedown.prevent.capture

package/ui.form-calendar/storybook/stories.ts

@@ -147,3 +147,29 @@ MinMax.parameters = {
     },
   },
 };
+
+export const DayClasses = DefaultTemplate.bind({});
+DayClasses.args = {
+  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: `
+        <UCalendar
+          v-model="args.modelValue"
+          :day-classes="(day) => ([5, 12, 19].includes(day.getDate()) ? 'bg-success' : '')"
+        />
+
+        <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+      `,
+    },
+  },
+};

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -295,6 +295,19 @@ describe("UCalendar.vue", () => {
       expect(updatedValue.to).toMatch(dateFormatRegex);
     });
 
+    it("Day Classes – passes dayClasses to UCalendarDayView", () => {
+      const dayClasses = (day: Date) => (day.getDate() === 15 ? "bg-mint-highlight" : "");
+
+      const component = mount(UCalendar, {
+        props: {
+          modelValue: null,
+          dayClasses,
+        },
+      });
+
+      expect(component.findComponent(DayView).props("dayClasses")).toBe(dayClasses);
+    });
+
     it("Tabindex – sets tabindex attribute on wrapper", () => {
       const tabindex = 5;
 

package/ui.form-calendar/tests/UCalendarDayView.test.ts

@@ -386,6 +386,39 @@ describe("UCalendarDayView.vue", () => {
     });
   });
 
+  describe("Day Classes Prop", () => {
+    it("applies function-based dayClasses only to the matching day", () => {
+      const component = mount(UCalendarDayView, {
+        props: {
+          ...defaultProps,
+          selectedDate: null,
+          dayClasses: (day: Date) => (day.getDate() === 10 ? "bg-mint-highlight" : ""),
+        },
+      });
+
+      const dayButtons = component.findAll('[vl-key="day"]');
+      const targetDay = dayButtons.find((button) => button.text() === "10");
+      const otherDay = dayButtons.find((button) => button.text() === "12");
+
+      expect(targetDay?.classes()).toContain("bg-mint-highlight");
+      expect(otherDay?.classes()).not.toContain("bg-mint-highlight");
+    });
+
+    it("renders regular day cells without error when dayClasses prop is not provided", () => {
+      const component = mount(UCalendarDayView, {
+        props: {
+          ...defaultProps,
+          selectedDate: null,
+        },
+      });
+
+      const regularDay = component.find('[vl-key="day"]');
+
+      expect(regularDay.exists()).toBe(true);
+      expect(regularDay.classes()).not.toContain("bg-mint-highlight");
+    });
+  });
+
   describe("Exposed Properties", () => {
     it("exposes days computed property", () => {
       const component = mount(UCalendarDayView, {

package/ui.form-calendar/types.ts

@@ -72,6 +72,11 @@ export interface Props<TModelValue extends DateValue> {
    */
   maxDate?: Date | string;
 
+  /**
+   * Extra CSS classes to apply to each day cell, on top of the built-in state classes.
+   */
+  dayClasses?: (day: Date) => string;
+
   /**
    * Component config object.
    */
@@ -93,5 +98,6 @@ export interface UCalendarViewProps {
   isArrowKeyDirty: boolean;
   maxDate?: Date | string;
   minDate?: Date | string;
+  dayClasses?: (day: Date) => string;
   config: Config;
 }

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

@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<Props<TModelValue>>(), {
   modelValue: undefined,
   minDate: undefined,
   maxDate: undefined,
+  dayClasses: undefined,
   placeholder: "",
   label: "",
 });
@@ -364,6 +365,7 @@ watchEffect(() => {
         :user-date-time-format="userDateTimeFormat"
         :max-date="maxDate"
         :min-date="minDate"
+        :day-classes="dayClasses"
         v-bind="datepickerCalendarAttrs"
         :data-test="getDataTest('calendar')"
         @keydown.esc="deactivate"

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

@@ -454,3 +454,32 @@ Slots.parameters = {
     },
   },
 };
+
+export const DayClasses = DefaultTemplate.bind({});
+DayClasses.args = {
+  modelValue: dateValue,
+  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: `
+        <UDatePicker
+          v-model="args.modelValue"
+          label="Select a date"
+          :day-classes="(day) => ([5, 12, 19].includes(day.getDate()) ? 'bg-success' : '')"
+          class="max-w-96"
+        />
+
+        <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+      `,
+    },
+  },
+};

package/ui.form-date-picker/tests/UDatePicker.test.ts

@@ -284,6 +284,19 @@ describe("UDatePicker.vue", () => {
       expect(component.findComponent({ name: "UCalendar" }).props("maxDate")).toBe(maxDate);
     });
 
+    it("Day Classes – passes dayClasses to UCalendar", () => {
+      const dayClasses = (day: Date) => (day.getDate() === 15 ? "bg-mint-highlight" : "");
+
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+          dayClasses,
+        },
+      });
+
+      expect(component.findComponent({ name: "UCalendar" }).props("dayClasses")).toBe(dayClasses);
+    });
+
     it("Id – sets id attribute on input", () => {
       const idValue = "date-picker-id";
 

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

@@ -103,6 +103,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/ui.form-date-picker-range/UDatePickerRange.vue

@@ -73,9 +73,12 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<Props<TModelValue>>(), {
   ...getDefaults<Props<TModelValue>, Config>(defaultConfig, COMPONENT_NAME),
   customRangeButton: () => ({ range: { from: null, to: null } }),
+  periods: () =>
+    getDefaults<Props<TModelValue>, Config>(defaultConfig, COMPONENT_NAME).periods || [],
   modelValue: undefined,
   minDate: undefined,
   maxDate: undefined,
+  dayClasses: undefined,
   placeholder: "",
   label: "",
 });
@@ -129,7 +132,21 @@ const activeDate: Ref<string | Date | null> = ref(
     ? parseDate<SortedLocale>(props.modelValue.from, props.dateFormat, locale.value)
     : new Date(),
 );
-const period = ref(Period.OwnRange);
+let isInvalidPeriodsWarned = false;
+const allowedPeriods = computed(() => getAllowedPeriods());
+const isPeriodSwitchShown = computed(() => {
+  const hasCustomRange = Boolean(
+    props.customRangeButton.range.from && props.customRangeButton.range.to,
+  );
+  const periodButtonCount = allowedPeriods.value.filter((type) => type !== Period.Custom).length;
+
+  return periodButtonCount + Number(hasCustomRange) > 1;
+});
+const rawPeriod = ref(Period.OwnRange);
+const period = computed({
+  get: () => getAllowedPeriod(rawPeriod.value),
+  set: (value: Period) => (rawPeriod.value = value),
+});
 const rangeStart = ref("");
 const rangeEnd = ref("");
 const inputRangeFromError = ref("");
@@ -319,6 +336,29 @@ function deactivate() {
   isShownMenu.value = false;
 }
 
+function getAllowedPeriods(): readonly Period[] {
+  const allPeriods = Object.values(Period);
+  const validPeriods = allPeriods.filter((type) => props.periods.includes(type));
+
+  if (validPeriods.length) return validPeriods;
+
+  if (import.meta.env.DEV && !isInvalidPeriodsWarned) {
+    // eslint-disable-next-line no-console
+    console.warn(`[${COMPONENT_NAME}] No valid "periods" provided, falling back to all periods.`);
+    isInvalidPeriodsWarned = true;
+  }
+
+  return allPeriods;
+}
+
+function getAllowedPeriod(detectedPeriod: Period): Period {
+  if (detectedPeriod === Period.Custom || allowedPeriods.value.includes(detectedPeriod)) {
+    return detectedPeriod;
+  }
+
+  return allowedPeriods.value.includes(Period.OwnRange) ? Period.OwnRange : allowedPeriods.value[0];
+}
+
 setDefaultPeriodForButton();
 
 function setDefaultPeriodForButton() {
@@ -404,16 +444,12 @@ function shiftRangeNext(to: Date, from: Date, daysDifference: number) {
     return;
   }
 
-  let nextDate = periodDateList.value.find(
-    (item) => localValue.value.to && item.endRange > localValue.value.to,
-  );
+  let nextDate = periodDateList.value.find((item) => item.startRange > from);
 
   if (!nextDate) {
     onClickShiftDatesList(ShiftAction.Next);
 
-    nextDate = periodDateList.value.find(
-      (item) => localValue.value.to && item.endRange > localValue.value.to,
-    );
+    nextDate = periodDateList.value.find((item) => item.startRange > from);
   }
 
   if (nextDate && isDatePeriodOutOfRange(nextDate)) return;
@@ -468,8 +504,19 @@ function shiftRangePrev(to: Date, from: Date, daysDifference: number) {
   }
 }
 
+function getPeriodDateList(date: Date): DatePeriodRange[] {
+  if (isPeriod.value.week) return getWeekDateList(date, locale.value.months.shorthand);
+  if (isPeriod.value.month) return getMonthsDateList(date, locale.value.months.longhand);
+  if (isPeriod.value.quarter) return getQuartersDateList(date, locale.value.quarter);
+  if (isPeriod.value.year) return getYearDateList(date);
+
+  return [];
+}
+
 function onClickShiftRange(action: ShiftActions) {
-  if (isPeriod.value.custom) {
+  const isLeavingCustom = isPeriod.value.custom;
+
+  if (isLeavingCustom) {
     period.value = Period.OwnRange;
   }
 
@@ -487,6 +534,10 @@ function onClickShiftRange(action: ShiftActions) {
   if (!from) return;
   to = to || addDays(from, 1);
 
+  if (isLeavingCustom && !isPeriod.value.ownRange) {
+    periodDateList.value = getPeriodDateList(from);
+  }
+
   const daysDifference = Math.ceil(Math.abs(getDatesDifference(from, to)) / millisecondsPerDay);
 
   action === ShiftAction.Next
@@ -568,6 +619,7 @@ const mutatedProps = computed(() => ({
   quarter: isPeriod.value.quarter,
   year: isPeriod.value.year,
   customRangeButtonDescription: Boolean(props.customRangeButton.description),
+  periodSwitch: isPeriodSwitchShown.value,
 }));
 
 const {
@@ -730,6 +782,8 @@ watchEffect(() => {
           v-model:period="period"
           :config="config"
           :is-period="isPeriod"
+          :allowed-periods="allowedPeriods"
+          :is-period-switch-shown="isPeriodSwitchShown"
           :custom-range-button="customRangeButton"
           :locale="locale"
           :date-format="dateFormat"
@@ -781,6 +835,7 @@ watchEffect(() => {
           :min-date="minDate"
           :max-date="maxDate"
           :date-format="dateFormat"
+          :day-classes="dayClasses"
           v-bind="datepickerCalendarAttrs as KeyAttrsWithConfig<UCalendarConfig>"
           range
           :data-test="getDataTest('calendar')"

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

@@ -36,12 +36,20 @@ const isDatePeriodOutOfRange = inject<IsDatePeriodOutOfRange | null>(
   null,
 );
 
-const periods = computed(() => [
-  { name: Period.Week, title: props.locale.week },
-  { name: Period.Month, title: props.locale.month },
-  { name: Period.Quarter, title: props.locale.quarter },
-  { name: Period.Year, title: props.locale.year },
-]);
+const periods = computed(() =>
+  [
+    { name: Period.Week, title: props.locale.week },
+    { name: Period.Month, title: props.locale.month },
+    { name: Period.Quarter, title: props.locale.quarter },
+    { name: Period.Year, title: props.locale.year },
+  ].filter(({ name }) => props.allowedPeriods.includes(name)),
+);
+
+const isOwnRangeAllowed = computed(() => props.allowedPeriods.includes(Period.OwnRange));
+
+const hasCustomRange = computed(() =>
+  Boolean(props.customRangeButton.range.from && props.customRangeButton.range.to),
+);
 
 const rangeSwitchTitle = computed(() => {
   if (props.isPeriod.month || props.isPeriod.quarter) {
@@ -148,7 +156,11 @@ function getDatePeriodState(date: DatePeriodRange) {
 </script>
 
 <template>
-  <div v-bind="attrs.periodRowAttrs.value" :data-test="getDataTest()">
+  <div
+    v-if="isPeriodSwitchShown && periods.length"
+    v-bind="attrs.periodRowAttrs.value"
+    :data-test="getDataTest()"
+  >
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -176,27 +188,12 @@ function getDatePeriodState(date: DatePeriodRange) {
     </template>
   </div>
 
-  <div v-bind="attrs.periodRowAttrs.value">
-    <UButton
-      v-if="customRangeButton.range.to && customRangeButton.range.from && Period.Custom !== period"
-      square
-      size="xs"
-      color="grayscale"
-      variant="soft"
-      :data-test="getDataTest('custom-range')"
-      v-bind="attrs.customRangeButtonAttrs.value"
-      @click="onClickCustomRangeButton"
-    >
-      {{ customRangeButton.label }}
-      <span
-        v-if="customRangeButton.description"
-        v-bind="attrs.customRangeDescriptionAttrs.value"
-        v-text="customRangeButton.description"
-      />
-    </UButton>
-
+  <div
+    v-if="isPeriodSwitchShown && (hasCustomRange || isOwnRangeAllowed)"
+    v-bind="attrs.periodRowAttrs.value"
+  >
     <UButton
-      v-if="customRangeButton.range.to && customRangeButton.range.from && Period.Custom === period"
+      v-if="hasCustomRange"
       square
       size="xs"
       color="grayscale"
@@ -214,7 +211,7 @@ function getDatePeriodState(date: DatePeriodRange) {
     </UButton>
 
     <UButton
-      v-if="Period.OwnRange !== period"
+      v-if="isOwnRangeAllowed && Period.OwnRange !== period"
       square
       size="xs"
       color="grayscale"
@@ -227,7 +224,7 @@ function getDatePeriodState(date: DatePeriodRange) {
     />
 
     <UButton
-      v-else
+      v-else-if="isOwnRangeAllowed"
       square
       size="xs"
       color="grayscale"