Update v-calendar to a @vue/compat compatible fork ...

Includes:
- nathanreyes/v-calendar#1228
- nathanreyes/v-calendar#1149

package.json

@@ -143,7 +143,6 @@
     "patchedDependencies": {
       "@adobe/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch",
       "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch",
-      "v-calendar@2.3.4": "patches/v-calendar@2.3.4.patch",
       "vue-gettext@2.1.12": "patches/vue-gettext@2.1.12.patch"
     }
   },

packages/design-system/package.json

@@ -106,7 +106,7 @@
     "tippy.js": "^6.3.7",
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
-    "v-calendar": "^2.3.4",
+    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue-gettext": "^2.1.12",
     "vue-inline-svg": "^2.0.0",
     "vue-jest": "^3.0.4",
@@ -134,7 +134,7 @@
     "postcss-import": "^12.0.1",
     "postcss-url": "^9.0.0",
     "tippy.js": "^6.3.7",
-    "v-calendar": "^2.3.4",
+    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue": "3.2.45",
     "vue-inline-svg": "^2.0.0",
     "vue-select": "^3.12.0",

packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts

@@ -1,16 +1,16 @@
-import { shallowMount } from 'web-test-helpers'
-
 import Datepicker from './OcDatepicker.vue'
-
-const slotDefault = "<button id='default-slot'>Open datepicker</button>"
+import { mount } from 'web-test-helpers'
 
 describe('OcDatePicker', () => {
   it('renders default scoped slot', () => {
-    const wrapper = shallowMount(Datepicker, {
+    const slotDefault = "<button id='default-slot'>Open datepicker</button>"
+    const wrapper = mount(Datepicker, {
       slots: { default: slotDefault },
-      props: { value: null }
+      props: { value: null },
+      global: {
+        renderStubDefaultSlot: true
+      }
     })
-
     expect(wrapper.find('#default-slot').exists()).toBeTruthy()
   })
 })

packages/design-system/src/components/OcDatepicker/OcDatepicker.vue

@@ -1,27 +1,34 @@
 <template>
-  <date-picker class="oc-datepicker" v-bind="$attrs" v-on="$listeners">
+  <date-picker class="oc-datepicker" v-bind="$attrs">
     <template #default="{ inputValue, togglePopover, hidePopover }">
       <!-- @slot Default slot to use as the popover anchor for datepicker -->
       <slot :input-value="inputValue" :toggle-popover="togglePopover" :hide-popover="hidePopover" />
     </template>
   </date-picker>
 </template>
 
-<script>
-import DatePicker from 'v-calendar/lib/components/date-picker.umd'
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import { DatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
 
 /**
  * Datepicker component based on [v-calendar](https://vcalendar.io/). For detailed documentation (props, slots, events, etc.), please visit https://vcalendar.io/api/v2.0/calendar.html
  */
-export default {
+export default defineComponent({
+  compatConfig: {
+    MODE: 3 // opt in to $listeners being included in $attrs
+  },
+
   name: 'OcDatepicker',
   status: 'ready',
   release: '1.0.0',
 
   components: { DatePicker },
 
   inheritAttrs: true
-}
+})
 </script>
 
 <style lang="scss">