Merge pull request #11565 from owncloud/feat/date-range-filter

feat: add custom date range filter

Author: JammingBen

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

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
+import { computed, defineComponent, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { DateTime } from 'luxon'
 export default defineComponent({
@@ -56,11 +56,18 @@ export default defineComponent({
       return ''
     })
 
-    onMounted(() => {
-      if (props.currentDate) {
-        dateInputString.value = props.currentDate.toISODate()
-      }
-    })
+    watch(
+      () => props.currentDate,
+      () => {
+        if (props.currentDate) {
+          dateInputString.value = props.currentDate.toISODate()
+          return
+        }
+
+        dateInputString.value = undefined
+      },
+      { immediate: true }
+    )
 
     watch(
       date,

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

@@ -25,6 +25,7 @@
     </oc-button>
     <oc-drop
       v-if="!isToggle"
+      ref="dropRef"
       :toggle="'#' + id"
       class="oc-filter-chip-drop"
       mode="click"
@@ -49,8 +50,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import uniqueId from '../../utils/uniqueId'
+import OcDrop from '../OcDrop/OcDrop.vue'
 
 export default defineComponent({
   name: 'OcFilterChip',
@@ -107,14 +109,23 @@ export default defineComponent({
     }
   },
   emits: ['clearFilter', 'hideDrop', 'showDrop', 'toggleFilter'],
-  setup(props) {
+  setup(props, { expose }) {
+    const dropRef = ref<typeof OcDrop>()
+
     const filterActive = computed(() => {
       if (props.isToggle) {
         return props.isToggleActive
       }
       return !!props.selectedItemNames.length
     })
-    return { filterActive }
+
+    const hideDrop = () => {
+      unref(dropRef)?.hide()
+    }
+
+    expose({ hideDrop })
+
+    return { filterActive, dropRef }
   }
 })
 </script>