refactor(datepicker): fixed focus prevention on inputs

app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue

@@ -51,7 +51,7 @@
     </v-col>
   </v-row>
 
-  <v-dialog max-width="750" v-model="showModal" persistent>
+  <v-dialog max-width="750" v-model="showModal" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>

app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue

@@ -58,7 +58,7 @@
     </v-col>
   </v-row>
 
-  <v-dialog max-width="750" v-model="showModal" persistent>
+  <v-dialog max-width="750" v-model="showModal" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať dátum</h1>
@@ -70,8 +70,9 @@
       </div>
 
       <v-card-actions class="mt-10 d-flex flex-column modal-content">
-        <Datepicker
+        <Z-datepicker
           v-model="form.date"
+          label="Dátum"
           format="dd.MM.yyyy"
           locale="sk"
           select-text="Vybrať"
@@ -115,7 +116,7 @@
       <v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
     </v-card>
   </v-dialog>
-  <v-dialog v-model="visible" max-width="750" persistent>
+  <v-dialog v-model="visible" max-width="750" persistent :retain-focus="false">
     <v-card>
       <div class="d-flex justify-space-between align-center">
         <h1 class="text-red">
@@ -152,7 +153,7 @@ import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
 import useVuelidate from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import Datepicker from '@vuepic/vue-datepicker';
+import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
 import moment from 'moment';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import { mapGetters } from 'vuex';
@@ -162,7 +163,7 @@ export default {
   emits: ['update-subtask'],
 
   components: {
-    Datepicker,
+    ZDatepicker,
   },
 
   props: {

app/src/plugins/tm@modal/task/_components/a-timeblock.vue

@@ -3,15 +3,11 @@
     <div v-if="deletable && editable" class="x-button">
       <button @click="$emit('removeTimeblock')" class="x-button">x</button>
     </div>
-    <div
-      @click="handleDatepickerClick"
-      class="datepicker-wrapper"
-      :ref="`timeblock-datepicker-wrapper-${index}`"
-    >
-      <Datepicker
+    <div class="datepicker-wrapper">
+      <Z-datepicker
         :model-value="timeblock.date"
-        :ref="`timeblock-datepicker-${index}`"
         @update:model-value="updateDate"
+        label="Dátum"
         format="dd.MM.yyyy"
         locale="sk"
         select-text="Vybrať"
@@ -48,11 +44,11 @@
 <script>
 import useVuelidate from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
-import Datepicker from '@vuepic/vue-datepicker';
+import ZDatepicker from '@/plugins/tm@_components/z-datepicker.vue';
 
 export default {
   components: {
-    Datepicker,
+    ZDatepicker,
   },
 
   props: {
@@ -71,21 +67,6 @@ export default {
       default: false,
     },
 
-    preventInputFocus: {
-      type: Boolean,
-      default: false,
-    },
-
-    onInputFocus: {
-      type: Function,
-      default: () => ({}),
-    },
-
-    onDateOpen: {
-      type: Function,
-      default: () => ({}),
-    },
-
     index: {
       type: Number,
     },
@@ -107,50 +88,6 @@ export default {
   },
 
   methods: {
-    handleDatepickerClick() {
-      // Pass the datepicker wrapper element reference to the mixin
-      const scrollTarget =
-        this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
-      this.onDateOpen(scrollTarget);
-      // Open the datepicker
-      this.openDatepicker(`timeblock-datepicker-${this.index}`);
-
-      setTimeout(() => {
-        const calendar = document.querySelector(
-          '.dp__menu.dp__menu_index.dp__theme_light',
-        );
-
-        if (!calendar) return;
-
-        // Get the datepicker wrapper element
-        const datepickerWrapper =
-          this.$refs[`timeblock-datepicker-wrapper-${this.index}`];
-
-        // Get the modal container
-        const modalContainer = document.querySelector('.v-overlay__content');
-
-        if (!datepickerWrapper || !modalContainer) return;
-
-        // Get bounding rectangles
-        const wrapperRect = datepickerWrapper.getBoundingClientRect();
-        const modalRect = modalContainer.getBoundingClientRect();
-
-        // Calculate position relative to modal
-        const topPosition =
-          wrapperRect.top - modalRect.top + wrapperRect.height;
-        const leftPosition = wrapperRect.left - modalRect.left;
-
-        // Apply positioning
-        // calendar.style.position = 'absolute';
-        calendar.style.top = `${topPosition + 210}px`;
-        // calendar.style.left = `${leftPosition}px`;
-      }, 100);
-    },
-
-    async openDatepicker(ref) {
-      this.$refs[ref].openMenu();
-    },
-
     updateDate(date) {
       const updated = { ...this.timeblock, date };
       this.$emit('updateTimeblock', updated);
@@ -195,7 +132,4 @@ export default {
 
 .datepicker-wrapper
     width: 100%
-    .datepicker-input
-        width: 100% !important
-        pointer-events: none
 </style>