Maintenance: Update dependency @vuepic/vue-datepicker to v9

Co-authored-by: Dusan Vuckovic <dv@zammad.com>

app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue

@@ -92,8 +92,8 @@ const { isDarkMode } = storeToRefs(useThemeStore())
       :action-row="actionRow"
       :config="config"
       :aria-labels="ariaLabels"
+      :text-input="{ openMenu: 'toggle' }"
       auto-apply
-      text-input
       offset="12"
       @blur="context.handlers.blur"
     >
@@ -192,7 +192,7 @@ const { isDarkMode } = storeToRefs(useThemeStore())
   --dp-input-background-color: theme(colors.blue.200);
 
   .dp {
-    &__clear_icon:hover {
+    &--clear-btn:hover {
       color: theme(colors.black);
     }
 
@@ -246,7 +246,7 @@ const { isDarkMode } = storeToRefs(useThemeStore())
   --dp-input-background-color: theme(colors.gray.700);
 
   .dp {
-    &__clear_icon:hover {
+    &--clear-btn:hover {
       color: theme(colors.white);
     }
 
@@ -316,7 +316,7 @@ const { isDarkMode } = storeToRefs(useThemeStore())
       }
     }
 
-    &__clear_icon {
+    &--clear-btn {
       right: theme(space.6);
 
       &:where([dir='rtl'], [dir='rtl'] *) {
@@ -429,6 +429,10 @@ const { isDarkMode } = storeToRefs(useThemeStore())
       }
     }
 
+    &__overlay_container {
+      padding-bottom: theme(padding.2);
+    }
+
     &__overlay_container + .dp__button,
     &__overlay_row + .dp__button {
       width: auto;
@@ -436,7 +440,7 @@ const { isDarkMode } = storeToRefs(useThemeStore())
     }
 
     &__overlay_container + .dp__button {
-      width: calc(var(--dp-menu-min-width) - theme(margin[1.5]) * 2);
+      width: calc(var(--dp-menu-min-width));
     }
 
     &__time_display {

app/frontend/apps/mobile/components/Form/fields/FieldDate/FieldDateTimeInput.vue

@@ -113,9 +113,9 @@ useEventListener('click', (e) => {
       :aria-labels="ariaLabels"
       :inline="{ input: true }"
       :month-change-on-scroll="false"
+      :text-input="{ openMenu: 'toggle' }"
       auto-apply
       dark
-      text-input
       @open="expandPicker"
       @close="collapsePicker"
       @blur="context.handlers.blur"
@@ -243,7 +243,7 @@ useEventListener('click', (e) => {
       background: theme(colors.gray.200);
     }
 
-    &__clear_icon {
+    &--clear-btn {
       top: 2.3rem;
     }
 
@@ -282,6 +282,10 @@ useEventListener('click', (e) => {
       color: theme(colors.blue.DEFAULT);
     }
 
+    &__overlay_container {
+      padding-bottom: theme(padding.2);
+    }
+
     &__overlay_container + .dp__button,
     &__overlay_row + .dp__button {
       width: auto;

app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts

@@ -47,8 +47,6 @@ export const useDateTime = (context: Ref<DateTimeContext>) => {
     toggleOverlay: i18n.t('Toggle the overlay'),
     menu: i18n.t('Datepicker menu'),
     input: i18n.t('Datepicker input field'),
-    calendarWrap: i18n.t('Area for calendar month display'),
-    calendarDays: i18n.t('Area for calendar days display'),
     openTimePicker: i18n.t('Open the time picker'),
     closeTimePicker: i18n.t('Close the time picker'),
     incrementValue: (type: string) => {
@@ -91,6 +89,24 @@ export const useDateTime = (context: Ref<DateTimeContext>) => {
     prevMonth: i18n.t('Previous month'),
     nextYear: i18n.t('Next year'),
     prevYear: i18n.t('Previous year'),
+    clearInput: i18n.t('Clear the value'),
+    calendarIcon: i18n.t('The calendar icon'),
+    timePicker: i18n.t('The time picker'),
+    monthPicker: (overlay: boolean) =>
+      overlay ? i18n.t('The month picker overlay') : i18n.t('The month picker'),
+    yearPicker: (overlay: boolean) =>
+      overlay ? i18n.t('The year picker overlay') : i18n.t('The year picker'),
+    timeOverlay: (type: 'hours' | 'minutes' | 'seconds') => {
+      switch (type) {
+        case 'hours':
+          return i18n.t('The hours overlay')
+        case 'minutes':
+          return i18n.t('The minutes overlay')
+        case 'seconds':
+        default:
+          return i18n.t('The seconds overlay')
+      }
+    },
   }))
 
   return {

i18n/zammad.pot

@@ -1560,14 +1560,6 @@ msgstr ""
 msgid "Are you sure? Your notifications settings will be reset to default."
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:51
-msgid "Area for calendar days display"
-msgstr ""
-
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:50
-msgid "Area for calendar month display"
-msgstr ""
-
 #: app/assets/javascripts/app/controllers/_ui_element/_application_action.coffee:54
 #: app/assets/javascripts/app/controllers/_ui_element/_application_selector.coffee:11
 #: app/assets/javascripts/app/controllers/_ui_element/core_workflow_condition.coffee:16
@@ -2710,6 +2702,10 @@ msgstr ""
 msgid "Clear filter"
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:92
+msgid "Clear the value"
+msgstr ""
+
 #: app/assets/javascripts/app/controllers/_integration/clearbit.coffee:3
 #: app/assets/javascripts/app/views/integration/clearbit.jst.eco:24
 msgid "Clearbit"
@@ -2810,7 +2806,7 @@ msgstr ""
 msgid "Close tab on ticket close"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:53
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:51
 msgid "Close the time picker"
 msgstr ""
 
@@ -3710,15 +3706,15 @@ msgstr ""
 msgid "December"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:68
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:66
 msgid "Decrement hours value"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:70
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:68
 msgid "Decrement minutes value"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:73
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:71
 msgid "Decrement seconds value"
 msgstr ""
 
@@ -7312,15 +7308,15 @@ msgstr ""
 msgid "Increment (SystemID.Counter)"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:57
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:55
 msgid "Increment hours value"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:59
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:57
 msgid "Increment minutes value"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:62
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:60
 msgid "Increment seconds value"
 msgstr ""
 
@@ -9301,11 +9297,11 @@ msgstr ""
 msgid "Next in overview"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:90
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:88
 msgid "Next month"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:92
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:90
 msgid "Next year"
 msgstr ""
 
@@ -9954,27 +9950,27 @@ msgstr ""
 msgid "Open note box"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:79
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:77
 msgid "Open the hours overlay"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:81
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:79
 msgid "Open the minutes overlay"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:89
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:87
 msgid "Open the months overlay"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:84
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:82
 msgid "Open the seconds overlay"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:52
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:50
 msgid "Open the time picker"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:88
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:86
 msgid "Open the years overlay"
 msgstr ""
 
@@ -10796,11 +10792,11 @@ msgstr ""
 msgid "Previous in overview"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:91
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:89
 msgid "Previous month"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:93
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:91
 msgid "Previous year"
 msgstr ""
 
@@ -13536,6 +13532,10 @@ msgstr ""
 msgid "The browser is outdated. It does not support WebSocket - the technology we use for the chat."
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:93
+msgid "The calendar icon"
+msgstr ""
+
 #: app/models/setting/validation/saml/security.rb:16
 msgid "The certificate could not be parsed."
 msgstr ""
@@ -13777,6 +13777,10 @@ msgstr ""
 msgid "The hostname could not be found."
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:102
+msgid "The hours overlay"
+msgstr ""
+
 #: db/seeds/settings.rb:2144
 msgid "The identifier for a ticket, e.g. Ticket#, Call#, MyTicket#. The default is Ticket#."
 msgstr ""
@@ -13833,6 +13837,18 @@ msgstr ""
 msgid "The login is not possible."
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:104
+msgid "The minutes overlay"
+msgstr ""
+
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:96
+msgid "The month picker"
+msgstr ""
+
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:96
+msgid "The month picker overlay"
+msgstr ""
+
 #: app/models/ticket/number.rb:14
 msgid "The new ticket number could not be generated."
 msgstr ""
@@ -14212,6 +14228,10 @@ msgstr ""
 msgid "The retried security process failed!"
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:107
+msgid "The seconds overlay"
+msgstr ""
+
 #: app/frontend/shared/form/i18n/locales.ts:567
 msgid "The selected date is invalid."
 msgstr ""
@@ -14313,6 +14333,10 @@ msgstr ""
 msgid "The tickets could not be merged."
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:94
+msgid "The time picker"
+msgstr ""
+
 #: app/services/service/user/signup.rb:49
 msgid "The token could not be generated."
 msgstr ""
@@ -14396,6 +14420,14 @@ msgstr ""
 msgid "The webhook could not be saved by Telegram, seems to be an invalid URL."
 msgstr ""
 
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:98
+msgid "The year picker"
+msgstr ""
+
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:98
+msgid "The year picker overlay"
+msgstr ""
+
 #: app/frontend/apps/mobile/pages/user/views/UserDetailView.vue:76
 msgid "Their tickets"
 msgstr ""
@@ -15430,7 +15462,7 @@ msgstr ""
 msgid "Today"
 msgstr ""
 
-#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:87
+#: app/frontend/shared/components/Form/fields/FieldDate/useDateTime.ts:85
 msgid "Toggle AM/PM mode"
 msgstr ""
 

package.json

@@ -147,7 +147,7 @@
     "@tiptap/vue-3": "^2.5.4",
     "@vue/apollo-composable": "^4.0.2",
     "@vue/runtime-core": "^3.4.34",
-    "@vuepic/vue-datepicker": "^8.8.1",
+    "@vuepic/vue-datepicker": "^9.0.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/router": "^10.11.0",
     "@vueuse/shared": "^10.11.0",

pnpm-lock.yaml

@@ -162,8 +162,8 @@ importers:
         specifier: ^3.4.34
         version: 3.4.34
       '@vuepic/vue-datepicker':
-        specifier: ^8.8.1
-        version: 8.8.1(vue@3.4.34(typescript@5.5.4))
+        specifier: ^9.0.1
+        version: 9.0.1(vue@3.4.34(typescript@5.5.4))
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.34(typescript@5.5.4))
@@ -2302,8 +2302,9 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  '@vuepic/vue-datepicker@8.8.1':
-    resolution: {integrity: sha512-8ehfUz1m69Vuc16Pm4ukgb3Mg1VT14x4EsG1ag4O/qbSNRWztTo+pUV4JnFt0FGLl5gGb6NXlxIvR7EjLgD7Gg==}
+  '@vuepic/vue-datepicker@9.0.1':
+    resolution: {integrity: sha512-5sSdwib5cY8cE4Y7SCh+Zemfp+U/m6BDcgaPwd5Vmdv5LAASyV0wugn9sTb6NWX0sIQEdrGDl/RmD9EjcIke3A==}
+    engines: {node: '>=18.12.0'}
     peerDependencies:
       vue: '>=3.2.0'
 
@@ -8592,7 +8593,7 @@ snapshots:
       js-beautify: 1.14.11
       vue-component-type-helpers: 2.0.6
 
-  '@vuepic/vue-datepicker@8.8.1(vue@3.4.34(typescript@5.5.4))':
+  '@vuepic/vue-datepicker@9.0.1(vue@3.4.34(typescript@5.5.4))':
     dependencies:
       date-fns: 3.6.0
       vue: 3.4.34(typescript@5.5.4)

spec/support/capybara/form_helpers.rb

@@ -323,9 +323,9 @@ class ZammadFormFieldCapybaraElementDelegator < SimpleDelegator
 
     date = Date.parse(date) if !date.is_a?(Date) && !date.is_a?(DateTime) && !date.is_a?(Time)
 
-    element.find('[aria-label="Open the years overlay"]').click
+    element.find('[aria-label*="Open the years overlay"]').click
     element.find('.dp__overlay_col', text: date.year).click
-    element.find('[aria-label="Open the months overlay"]').click
+    element.find('[aria-label*="Open the months overlay"]').click
     element.find('.dp__overlay_col', text: date.strftime('%b')).click
 
     id = date.strftime('%Y-%m-%d')
@@ -356,10 +356,10 @@ class ZammadFormFieldCapybaraElementDelegator < SimpleDelegator
     select_date(datetime) do
       element.find('[aria-label="Open the time picker"]').click
 
-      element.find('[aria-label="Open the hours overlay"]').click
+      element.find('[aria-label*="Open the hours overlay"]').click
       element.find('.dp__overlay_col', text: format('%02d', datetime.hour)).click
 
-      element.find('[aria-label="Open the minutes overlay"]').click
+      element.find('[aria-label*="Open the minutes overlay"]').click
       element.find('.dp__overlay_col', text: format('%02d', datetime.min)).click
 
       meridian_indicator = element.find('[aria-label="Toggle AM/PM mode"]')

spec/support/capybara/selenium_driver.rb

@@ -36,7 +36,7 @@ def build_chrome_driver(app, user_agent: nil)
       'profile.default_content_setting_values.notifications' => 1, # ALLOW notifications
     },
     # Disable shared memory usage as it does not really provide a performance gain but cause resource limit issues in CI.
-    args:             %w[--enable-logging --v=1 --disable-dev-shm-usage],
+    args:             %w[--enable-logging --v=1 --disable-dev-shm-usage --disable-search-engine-choice-screen],
     # Disable the "Chrome is being controlled by automated test software." info bar.
     exclude_switches: ['enable-automation'],
   )