fix: Inline and disabled for inline mode (#70)

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -99,6 +99,8 @@
                     spaceConfirm,
                     monthChangeOnArrows,
                     textInput,
+                    disabled,
+                    readonly,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -13,6 +13,7 @@
         @keydown.left="handleArrow('left', false)"
         @keydown.right="handleArrow('right', false)"
     >
+        <div :class="disabledReadonlyOverlay" v-if="(disabled || readonly) && inline"></div>
         <div :class="arrowClass" v-if="!inline"></div>
         <div :class="menuCalendarClassWrapper" ref="calendarWrapperRef" role="document">
             <Calendar
@@ -178,6 +179,8 @@
         spaceConfirm: { type: Boolean as PropType<boolean>, default: true },
         monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true },
         textInput: { type: Boolean as PropType<boolean>, default: false },
+        disabled: { type: Boolean as PropType<boolean>, default: false },
+        readonly: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);
@@ -282,6 +285,10 @@
         }),
     );
 
+    const disabledReadonlyOverlay = computed(() => ({
+        dp__menu_disabled: props.disabled,
+        dp__menu_readonly: props.readonly,
+    }));
     /**
      * Array of the dates from which calendar is built.
      * It also sets classes depending on picker modes, active dates, today, v-model.

src/Vue3DatePicker/components/composition/calendar.ts

@@ -120,7 +120,9 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
             return props.internalModelValue;
         },
         set: (value: InternalModuleValue): void => {
-            emit('update:internalModelValue', value);
+            if (!props.readonly && !props.disabled) {
+                emit('update:internalModelValue', value);
+            }
         },
     });
 

src/Vue3DatePicker/style/components/_DatepickerMenu.scss

@@ -24,6 +24,29 @@
   }
 }
 
+%__dp_menu_readonly_disabled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999;
+}
+
+.dp__menu_disabled {
+  @extend %__dp_menu_readonly_disabled;
+
+  background: rgb(255 255 255 / 50%);
+  cursor: not-allowed;
+}
+
+.dp__menu_readonly {
+  @extend %__dp_menu_readonly_disabled;
+
+  background: transparent;
+  cursor: default;
+}
+
 .dp__arrow_top {
   left: 50%;
   top: -1px;