feat: disable the navigation if readonly

formwerkjs · Feb 16, 2025 · 500900d · 500900d
1 parent 7754c2d
commit 500900d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/packages/core/src/useCalendar/useCalendar.ts b/packages/core/src/useCalendar/useCalendar.ts
@@ -174,6 +174,10 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
     getFocusedDate: getFocusedOrSelected,
     setDate,
     setFocusedDate: async (date: ZonedDateTime) => {
+      if (isDisabled.value || toValue(props.readonly)) {
+        return;
+      }
+
       focusedDay.value = date;
       await nextTick();
       focusCurrent();
@@ -198,6 +202,10 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
   );
 
   function setDate(date: ZonedDateTime, view?: CalendarViewType) {
+    if (isDisabled.value || toValue(props.readonly)) {
+      return;
+    }
+
     temporalValue.value = date;
     focusedDay.value = date;
     if (view) {
@@ -270,7 +278,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
   const nextButtonProps = useControlButtonProps(() => ({
     id: `${calendarId}-next`,
     'aria-label': 'Next',
-    disabled: isDisabled.value,
+    disabled: isDisabled.value || toValue(props.readonly),
     onClick: () => {
       if (currentView.value.type === 'weeks') {
         context.setFocusedDate(context.getFocusedDate().add({ months: 1 }));
@@ -289,7 +297,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
   const previousButtonProps = useControlButtonProps(() => ({
     id: `${calendarId}-previous`,
     'aria-label': 'Previous',
-    disabled: isDisabled.value,
+    disabled: isDisabled.value || toValue(props.readonly),
     onClick: () => {
       if (currentView.value.type === 'weeks') {
         context.setFocusedDate(context.getFocusedDate().subtract({ months: 1 }));
@@ -322,7 +330,7 @@ export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'
         'aria-live': 'polite' as const,
         tabindex: '-1',
         onClick: () => {
-          if (isDisabled.value) {
+          if (isDisabled.value || toValue(props.readonly)) {
             return;
           }
 

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import DateField from '@/components/DateField.vue';
-import Calendar from './components/Calendar.vue';
-import { createCalendar } from '@internationalized/date';
+import Calendar from '@/components/Calendar.vue';
 
-const minDate = new Date(2025, 1, 14, 0, 0, 0, 0);
-const maxDate = new Date(2025, 1, 18, 0, 0, 0, 0);
-
-const islamic = createCalendar('islamic-umalqura');
+// You need to be careful with the time component of the date object.
+// JS date objects fills the date time with the current time component.
+const min = new Date(2025, 0, 4, 0, 0, 0, 0);
+const value = new Date('2025-01-15');
+const max = new Date('2025-01-20');
 </script>
 
 <template>
@@ -25,6 +25,6 @@ const islamic = createCalendar('islamic-umalqura');
       }"
     /> -->
 
-    <Calendar label="Pick a date" :min="minDate" :max="maxDate" />
+    <Calendar label="Calendar" :value="value" readonly />
   </div>
 </template>