From af987e3315e75e6e3ac83b91fb253305b1a83482 Mon Sep 17 00:00:00 2001
From: Dusan Vuckovic <dv@zammad.com>
Date: Tue, 30 Apr 2024 14:36:45 +0200
Subject: [PATCH] Maintenance: Update dependency @vuepic/vue-datepicker to
 v8.5.0

---
 .../Form/fields/FieldDate/FieldDateTimeInput.vue    | 13 +++++++------
 .../FieldDate/__tests__/FieldDateTime.spec.ts       |  3 +--
 .../components/Form/fields/FieldDate/index.ts       |  1 -
 .../Form/fields/FieldDate/FieldDateTimeInput.vue    |  6 +++---
 package.json                                        |  2 +-
 yarn.lock                                           |  8 ++++----
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue b/app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue
index d162f081fad7..2b363c1e782f 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue
@@ -1,9 +1,9 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { storeToRefs } from 'pinia'
-import VueDatePicker from '@vuepic/vue-datepicker'
+import VueDatePicker, { type DatePickerInstance } from '@vuepic/vue-datepicker'
 import { i18n } from '#shared/i18n.ts'
 import useValue from '#shared/components/Form/composables/useValue.ts'
 import { useAppTheme } from '#shared/stores/theme.ts'
@@ -56,6 +56,8 @@ const inputIcon = computed(() => {
   return 'calendar-event'
 })
 
+const picker = ref<DatePickerInstance>()
+
 const { theme } = storeToRefs(useAppTheme())
 
 const dark = computed(() => theme.value === 'dark')
@@ -65,6 +67,7 @@ const dark = computed(() => theme.value === 'dark')
   <div class="w-full">
     <!-- eslint-disable vuejs-accessibility/aria-props   -->
     <VueDatePicker
+      ref="picker"
       v-model="localValue"
       :uid="context.id"
       :model-type="valueFormat"
@@ -99,7 +102,6 @@ const dark = computed(() => theme.value === 'dark')
           onInput,
           onEnter,
           onTab,
-          onFocus,
           onBlur,
           onKeypress,
           onPaste,
@@ -120,13 +122,12 @@ const dark = computed(() => theme.value === 'dark')
           @keypress="onKeypress"
           @paste="onPaste"
           @blur="onBlur"
-          @focus="onFocus"
         />
       </template>
       <template #input-icon>
         <CommonIcon :name="inputIcon" size="tiny" decorative />
       </template>
-      <template #clear-icon="{ clear }">
+      <template #clear-icon>
         <CommonIcon
           class="me-3"
           name="x-lg"
@@ -134,7 +135,7 @@ const dark = computed(() => theme.value === 'dark')
           tabindex="0"
           role="button"
           :aria-label="$t('Clear Selection')"
-          @click="clear"
+          @click.stop="picker?.clearValue()"
         />
       </template>
       <template #clock-icon>
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldDate/__tests__/FieldDateTime.spec.ts b/app/frontend/apps/desktop/components/Form/fields/FieldDate/__tests__/FieldDateTime.spec.ts
index 6afd2f317a7c..068824065d2f 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldDate/__tests__/FieldDateTime.spec.ts
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldDate/__tests__/FieldDateTime.spec.ts
@@ -1,9 +1,8 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
-import { waitForNextTick } from '#tests/support/utils.ts'
-
 const { FormKit } = await import('@formkit/vue')
 const { renderComponent } = await import('#tests/support/components/index.ts')
+const { waitForNextTick } = await import('#tests/support/utils.ts')
 const { i18n } = await import('#shared/i18n.ts')
 
 export {}
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldDate/index.ts b/app/frontend/apps/desktop/components/Form/fields/FieldDate/index.ts
index 15010d5b3adb..d54e7ac09a27 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldDate/index.ts
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldDate/index.ts
@@ -1,7 +1,6 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import type { FormKitNode, FormKitProps } from '@formkit/core'
-
 import createInput from '#shared/form/core/createInput.ts'
 import addLink from '#shared/form/features/addLink.ts'
 import formUpdaterTrigger from '#shared/form/features/formUpdaterTrigger.ts'
diff --git a/app/frontend/apps/mobile/components/Form/fields/FieldDate/FieldDateTimeInput.vue b/app/frontend/apps/mobile/components/Form/fields/FieldDate/FieldDateTimeInput.vue
index 8ed01d0d4bc4..950266f1058b 100644
--- a/app/frontend/apps/mobile/components/Form/fields/FieldDate/FieldDateTimeInput.vue
+++ b/app/frontend/apps/mobile/components/Form/fields/FieldDate/FieldDateTimeInput.vue
@@ -151,7 +151,7 @@ useEventListener('click', (e) => {
           <div class="h-[1px] w-full bg-white/10"></div>
         </div>
       </template>
-      <template #clear-icon="{ clear }">
+      <template #clear-icon>
         <CommonIcon
           class="text-gray absolute -mt-5 shrink-0 ltr:right-2 rtl:left-2"
           :aria-label="i18n.t('Clear Selection')"
@@ -159,8 +159,8 @@ useEventListener('click', (e) => {
           size="base"
           role="button"
           tabindex="0"
-          @click.stop="clear"
-          @keypress.space.prevent.stop="clear"
+          @click.stop="picker?.clearValue()"
+          @keypress.space.prevent.stop="picker?.clearValue()"
         />
       </template>
       <template #clock-icon>
diff --git a/package.json b/package.json
index b24cbdaf1a0e..2f3cd4a79c5c 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,7 @@
     "@tiptap/suggestion": "^2.3.0",
     "@tiptap/vue-3": "^2.3.0",
     "@vue/apollo-composable": "^4.0.2",
-    "@vuepic/vue-datepicker": "^8.4.0",
+    "@vuepic/vue-datepicker": "^8.5.0",
     "@vueuse/core": "^10.9.0",
     "@vueuse/router": "^10.9.0",
     "@vueuse/shared": "^10.9.0",
diff --git a/yarn.lock b/yarn.lock
index 0dcd1fbc989e..7444cdc31e11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3354,10 +3354,10 @@
     js-beautify "^1.14.9"
     vue-component-type-helpers "^2.0.0"
 
-"@vuepic/vue-datepicker@^8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz#ba31de2f8842a47dafebf40516b252e991336ecc"
-  integrity sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==
+"@vuepic/vue-datepicker@^8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@vuepic/vue-datepicker/-/vue-datepicker-8.5.0.tgz#e6bdbd76ffb949f9736d88ff7c23fe1047dd0046"
+  integrity sha512-p8CHPJYJ1nQgrKzVBaDi1ZO9G9syuvOacPDNMF4uViHsXGdUyGLZbgrvvcmDTd0xYtyCUswiH6S27gb1E7qQ2Q==
   dependencies:
     date-fns "^3.6.0"