feat: emit opened/closed event

Closes #98 Co-Authored-by: Liumingxun <[email protected]>
icehaunter · Oct 10, 2022 · 99f3141 · 99f3141
1 parent b0507d9
commit 99f3141
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -60,6 +60,11 @@ Full props documentation is available at https://icehaunter.github.io/vue3-datep
 | `clearable`              | `Boolean`                                                | `false`              | Allows clearing the selected date and setting the value to `null`                                                                          |
 | `allowOutsideInterval`   | `Boolean`                                                | `false`              | Allows user to click dates outside of current interval                                                                                     |
 
+### Events
+
+- `opened`: Emitted every time the popup opens, including on field focus
+- `closed`: Emitted every time the popup closes, including on field blur
+
 ## Compatibility
 
 Package is transpiled and should be usable for everyone with ES6 and above, but the styling of the datepicker itself uses CSS Grid and CSS variables.

diff --git a/docs/index.md b/docs/index.md
@@ -72,6 +72,11 @@ More in-depth documentation of the props, as well as examples, can be found in [
 | `weekStartsOn`           | `Number`                                                 | 1                    | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default      |
 | `clearable`              | `Boolean`                                                | `false`              | Allows clearing the selected date and setting the value to `null`                                                                          |
 
+### Events
+
+- `opened`: Emitted every time the popup opens, including on field focus
+- `closed`: Emitted every time the popup closes, including on field blur
+
 ## Styling
 
 Styling is done via CSS variables, which control colors used in the popup. All variables, as well as styling example and playground can be found in [Configuration section](/config.html#styling-example-and-playground)
diff --git a/src/App.vue b/src/App.vue
@@ -2,6 +2,8 @@
   <img alt="Vue logo" src="./assets/logo.png" />
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="selected"
       :locale="locale"
@@ -17,6 +19,8 @@
   </div>
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="time"
       :locale="locale"
@@ -29,6 +33,8 @@
   </div>
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="full"
       :locale="locale"
@@ -40,6 +46,8 @@
   </div>
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="selected"
       :locale="locale"
@@ -62,10 +70,18 @@
     />
   </div>
   <div>
-    <datepicker class="picker" v-model="to" placeholder="to" />
+    <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
+      class="picker"
+      v-model="to"
+      placeholder="to"
+    />
   </div>
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="to"
       :locale="locale"
@@ -75,6 +91,8 @@
   </div>
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="yearSelected"
       :locale="locale"
@@ -84,6 +102,8 @@
   </div>
   <div>
     <datepicker
+      @opened="log('opened')"
+      @closed="log('closed')"
       class="picker"
       v-model="monthSelected"
       :locale="locale"
@@ -134,6 +154,9 @@ export default defineComponent({
       const newDate = set(new Date(date.getTime()), { hours: 11, minutes: 0 })
       return date < newDate
     },
+    log(data) {
+      console.log(data)
+    },
   },
 })
 </script>

diff --git a/src/datepicker/Datepicker.vue b/src/datepicker/Datepicker.vue
@@ -14,9 +14,9 @@
         :disabled="disabled"
         :tabindex="disabled ? -1 : 0"
         @keyup="keyUp"
-        @blur="renderView()"
-        @focus="renderView(initialView)"
-        @click="renderView(initialView)"
+        @blur="blur"
+        @focus="focus"
+        @click="click"
       />
       <div class="v3dp__clearable" v-show="clearable && modelValue">
         <slot name="clear" :onClear="clearModelValue">
@@ -247,11 +247,14 @@ export default defineComponent({
   emits: {
     'update:modelValue': (value: Date | null | undefined) =>
       value === null || value === undefined || isValid(value),
+    opened: null,
+    closed: null,
   },
   setup(props, { emit, attrs }) {
     const viewShown = ref('none' as 'year' | 'month' | 'day' | 'time' | 'none')
     const pageDate = ref<Date>(new Date())
     const inputRef = ref(null as HTMLInputElement | null)
+    const isFocused = ref(false)
 
     const input = ref('')
     watchEffect(() => {
@@ -277,16 +280,23 @@ export default defineComponent({
           pageDate.value =
             props.modelValue || boundedDate(props.lowerLimit, props.upperLimit)
         viewShown.value = view
+
+        if (view !== 'none') {
+          emit('opened')
+        } else {
+          emit('closed')
+        }
       }
     }
+
     watchEffect(() => {
       if (props.disabled) viewShown.value = 'none'
     })
     const selectYear = (date: Date) => {
       pageDate.value = date
 
       if (props.minimumView === 'year') {
-        viewShown.value = 'none'
+        renderView('none')
         emit('update:modelValue', date)
       } else {
         viewShown.value = 'month'
@@ -296,7 +306,7 @@ export default defineComponent({
       pageDate.value = date
 
       if (props.minimumView === 'month') {
-        viewShown.value = 'none'
+        renderView('none')
         emit('update:modelValue', date)
       } else {
         viewShown.value = 'day'
@@ -306,17 +316,16 @@ export default defineComponent({
       pageDate.value = date
 
       if (props.minimumView === 'day') {
-        viewShown.value = 'none'
+        renderView('none')
         emit('update:modelValue', date)
       } else {
         viewShown.value = 'time'
       }
     }
 
     const selectTime = (date: Date) => {
+      renderView('none')
       emit('update:modelValue', date)
-
-      viewShown.value = 'none'
     }
 
     const clearModelValue = () => {
@@ -325,6 +334,15 @@ export default defineComponent({
       }
     }
 
+    const click = () => (isFocused.value = true)
+
+    const focus = () => renderView(initialView.value)
+
+    const blur = () => {
+      isFocused.value = false
+      renderView()
+    }
+
     const keyUp = (event: KeyboardEvent) => {
       const code = event.keyCode ? event.keyCode : event.which
       // close calendar if escape or enter are pressed
@@ -373,6 +391,9 @@ export default defineComponent({
         : (viewShown.value = 'day')
 
     return {
+      blur,
+      focus,
+      click,
       input,
       inputRef,
       pageDate,