feat(DatePicker): Add portal prop (#1852)

* #1847 add portal prop to date picker

* fix(DatePicker): review feedback

* docs(DatePicker): add docs for portal prop

Author: jack-allocate

docs/content/meta/DatePickerContent.md

@@ -74,6 +74,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'portal',
+    'description': '<p>Props to control the portal wrapped around the content.</p>\n',
+    'type': 'PopoverPortalProps',
+    'required': false
+  },
   {
     'name': 'positionStrategy',
     'description': '<p>The type of CSS position property to use.</p>\n',

docs/content/meta/DatePickerRoot.md

@@ -176,7 +176,7 @@
   {
     'name': 'weekdayFormat',
     'description': '<p>The format to use for the weekday strings provided via the weekdays slot prop</p>\n',
-    'type': '\'long\' | \'short\' | \'narrow\'',
+    'type': '\'narrow\' | \'short\' | \'long\'',
     'required': false,
     'default': '\'narrow\''
   },

docs/content/meta/DateRangePickerContent.md

@@ -74,6 +74,12 @@
     'type': 'boolean',
     'required': false
   },
+  {
+    'name': 'portal',
+    'description': '<p>Props to control the portal wrapped around the content.</p>\n',
+    'type': 'PopoverPortalProps',
+    'required': false
+  },
   {
     'name': 'positionStrategy',
     'description': '<p>The type of CSS position property to use.</p>\n',

docs/content/meta/DateRangePickerRoot.md

@@ -196,7 +196,7 @@
   {
     'name': 'weekdayFormat',
     'description': '<p>The format to use for the weekday strings provided via the weekdays slot prop</p>\n',
-    'type': '\'long\' | \'short\' | \'narrow\'',
+    'type': '\'narrow\' | \'short\' | \'long\'',
     'required': false,
     'default': '\'narrow\''
   },

docs/content/meta/RangeCalendarRoot.md

@@ -164,7 +164,7 @@
   {
     'name': 'weekdayFormat',
     'description': '<p>The format to use for the weekday strings provided via the weekdays slot prop</p>\n',
-    'type': '\'long\' | \'short\' | \'narrow\'',
+    'type': '\'narrow\' | \'short\' | \'long\'',
     'required': false,
     'default': '\'narrow\''
   },

docs/content/meta/StepperItem.md

@@ -40,6 +40,6 @@
   {
     'name': 'state',
     'description': '<p>The current state of the stepper item</p>\n',
-    'type': '\'active\' | \'completed\' | \'inactive\''
+    'type': '\'active\' | \'inactive\' | \'completed\''
   }
 ]" />

docs/content/meta/VisuallyHidden.md

@@ -17,7 +17,7 @@
   {
     'name': 'feature',
     'description': '',
-    'type': '\'focusable\' | \'fully-hidden\'',
+    'type': '\'fully-hidden\' | \'focusable\'',
     'required': false,
     'default': '\'focusable\''
   }

packages/core/src/DatePicker/DatePickerContent.vue

@@ -1,20 +1,30 @@
 <script lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from '..'
+import type { PopoverContentEmits, PopoverContentProps, PopoverPortalProps } from '..'
+import { computed } from 'vue'
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from '..'
 
-export interface DatePickerContentProps extends PopoverContentProps {}
+export interface DatePickerContentProps extends PopoverContentProps {
+  /**
+   * Props to control the portal wrapped around the content.
+   */
+  portal?: PopoverPortalProps
+}
 export interface DatePickerContentEmits extends PopoverContentEmits {}
 </script>
 
 <script setup lang="ts">
 const props = defineProps<DatePickerContentProps>()
 const emits = defineEmits<DatePickerContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const propsToForward = computed(() => ({
+  ...props,
+  portal: undefined,
+}))
+const forwarded = useForwardPropsEmits(propsToForward, emits)
 </script>
 
 <template>
-  <PopoverPortal>
+  <PopoverPortal v-bind="portal">
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
     >

packages/core/src/DateRangePicker/DateRangePickerContent.vue

@@ -1,20 +1,30 @@
 <script lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from '..'
+import type { PopoverContentEmits, PopoverContentProps, PopoverPortalProps } from '..'
+import { computed } from 'vue'
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from '..'
 
-export interface DateRangePickerContentProps extends PopoverContentProps {}
+export interface DateRangePickerContentProps extends PopoverContentProps {
+  /**
+   * Props to control the portal wrapped around the content.
+   */
+  portal?: PopoverPortalProps
+}
 export interface DateRangePickerContentEmits extends PopoverContentEmits {}
 </script>
 
 <script setup lang="ts">
 const props = defineProps<DateRangePickerContentProps>()
 const emits = defineEmits<DateRangePickerContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const propsToForward = computed(() => ({
+  ...props,
+  portal: undefined,
+}))
+const forwarded = useForwardPropsEmits(propsToForward, emits)
 </script>
 
 <template>
-  <PopoverPortal>
+  <PopoverPortal v-bind="portal">
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
     >