feat: hide the date picker when click outside

src/components/AppDateInput.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
- .c-date-picker
+ .c-date-picker(v-click-outside="hide")
  label.c-date-picker__label(
  v-if="label"
  :for="name"
@@ -8,7 +8,7 @@
  )
  .c-date-picker__container
  input.c-date-picker__field(
- @focus="showPicker = !showPicker"
+ @focus="showPicker = true"
  v-model="localeDate"
  v-bind='$attrs'
  type="text"
@@ -28,13 +28,17 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
+import ClickOutside from "vue-click-outside";
 import DatePicker from "./DatePicker.vue";
 import { ILocaleOption } from "../util/helpers";
 
 @Component({
  name: "app-date-input",
  components: {
  DatePicker
+ },
+ directives: {
+ ClickOutside
  }
 })
 export default class AppDateInput extends Vue {
@@ -51,5 +55,9 @@ export default class AppDateInput extends Vue {
  year: "numeric",
  day: "numeric"
  });
+
+ hide() {
+ this.showPicker = false;
+ }
 }
 </script>