Maintenance: Update dependency @vuepic/vue-datepicker to v8.5.0

zammad · Apr 30, 2024 · af987e3 · af987e3
1 parent ca8e127
commit af987e3
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 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
@@ -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,21 +122,20 @@ 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"
           size="xs"
           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
@@ -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
@@ -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
@@ -151,16 +151,16 @@ 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')"
           name="close-small"
           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
@@ -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
@@ -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"