feat: date range picker modal

hotellistat · Nov 22, 2023 · 860f909 · 860f909
1 parent 9a481da
commit 860f909
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/src/components/Calendar/index.vue b/src/components/Calendar/index.vue
@@ -531,7 +531,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="relative flex w-max select-none flex-col sm:flex-row">
+  <div class="relative flex w-full select-none flex-col sm:flex-row">
     <div
       v-if="presets.length"
       class="relative hidden min-h-0 w-48 border-r border-gray-200 dark:border-gray-700 lg:block"
@@ -595,7 +595,7 @@ defineExpose({
         </button>
       </div>
 
-      <div class="relative w-max">
+      <div class="relative w-full">
         <div
           v-if="showMonthSelectionActive"
           class="absolute inset-0 z-10 grid grid-cols-3 gap-4"

diff --git a/src/components/DateRangePicker/index.stories.ts b/src/components/DateRangePicker/index.stories.ts
@@ -53,6 +53,7 @@ export const Default: Story = {
       const activePresetComparison = ref(undefined);
       const perspectivePreset = ref(undefined);
       const perspectivePresetComparison = ref(undefined);
+      const showComparison = ref(false);
 
       return {
         args,
@@ -64,6 +65,7 @@ export const Default: Story = {
         activePresetComparison,
         perspectivePreset,
         perspectivePresetComparison,
+        showComparison,
       };
     },
     template: `
@@ -77,6 +79,7 @@ export const Default: Story = {
         v-model:active-preset-comparison="activePresetComparison"
         v-model:perspective-preset="perspectivePreset"
         v-model:perspective-preset-comparison="perspectivePresetComparison"
+        v-model:show-comparison="showComparison"
       >
       </DaterangePicker>
       `,

diff --git a/src/components/DateRangePicker/index.vue b/src/components/DateRangePicker/index.vue
@@ -9,6 +9,7 @@ import {
   RobustCheckbox,
   RobustDatePicker,
   RobustTabs,
+  RobustModal,
 } from '..';
 import { PhCaretDown, PhCalendar } from '@phosphor-icons/vue';
 import { computed, PropType, ref, watch } from 'vue';
@@ -99,6 +100,10 @@ const props = defineProps({
     type: String,
     default: 'Perspective of',
   },
+  type: {
+    type: String as PropType<'dropdown' | 'modal'>,
+    default: 'modal',
+  },
 });
 
 const emit = defineEmits([
@@ -304,7 +309,7 @@ const displayComparisonPreset = computed(() => {
 });
 
 onClickOutside(elementRef, (event) => {
-  if (!open.value) {
+  if (!open.value || props.type === 'modal') {
     return;
   }
 
@@ -322,9 +327,26 @@ function closeDropdown() {
   }
 }
 
-const handleClick = () => {
-  open.value = !open.value;
-};
+const wrapperAttrs = computed(() => {
+  if (props.type === 'modal') {
+    return {
+      opened: open.value,
+      size: 'xl',
+      center: true,
+      'onUpdate:opened': (value: boolean) => {
+        open.value = false;
+      },
+    };
+  }
+  return {
+    open: open.value,
+    class: 'z-[100] origin-top-left',
+    reference: inputWrapperRef.value?.wrapperRef,
+    options: {
+      placement: 'bottom-start',
+    },
+  };
+});
 
 const saveTime = async () => {
   emit('update:dateRange', stagedDateRange.value);
@@ -439,16 +461,12 @@ const saveTime = async () => {
       />
     </div>
   </RobustInputWrapper>
-  <RobustFloating
-    v-if="inputWrapperRef?.wrapperRef"
+  <Component
+    :is="type === 'modal' ? RobustModal : RobustFloating"
+    v-bind="wrapperAttrs"
     ref="elementRef"
-    v-model:open="open"
-    class="z-[100] origin-top-left"
-    :reference="inputWrapperRef?.wrapperRef"
-    :options="{
-      placement: 'bottom-start',
-    }"
   >
+    <template #title> </template>
     <div
       class="flex items-center justify-between border-gray-200 dark:border-gray-700"
     >
@@ -481,7 +499,7 @@ const saveTime = async () => {
           :title="perspectiveTitle"
           condensed
           resetable
-          class="mb-4 w-56"
+          class="mb-4 w-full"
           :presets="perspectiveDatePresets"
         />
 
@@ -508,7 +526,7 @@ const saveTime = async () => {
           :title="perspectiveTitle"
           condensed
           resetable
-          class="mb-4 w-56"
+          class="mb-4 w-full"
           :presets="perspectiveDatePresets"
         />
       </RobustCalendar>
@@ -521,5 +539,5 @@ const saveTime = async () => {
         >Apply time range</RobustButton
       >
     </div>
-  </RobustFloating>
+  </Component>
 </template>