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

jack-allocate · web-flow · commit b4f42238e388 · 2025-05-08T17:33:03.000+03:00
* #1847 add portal prop to date picker * fix(DatePicker): review feedback * docs(DatePicker): add docs for portal prop
diff --git a/docs/content/meta/DatePickerContent.md b/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',
diff --git a/docs/content/meta/DatePickerRoot.md b/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\''
   },
diff --git a/docs/content/meta/DateRangePickerContent.md b/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',
diff --git a/docs/content/meta/DateRangePickerRoot.md b/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\''
   },
diff --git a/docs/content/meta/RangeCalendarRoot.md b/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\''
   },
diff --git a/docs/content/meta/StepperItem.md b/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\''
   }
 ]" />
diff --git a/docs/content/meta/VisuallyHidden.md b/docs/content/meta/VisuallyHidden.md
@@ -17,7 +17,7 @@
   {
     'name': 'feature',
     'description': '',
-    'type': '\'focusable\' | \'fully-hidden\'',
+    'type': '\'fully-hidden\' | \'focusable\'',
     'required': false,
     'default': '\'focusable\''
   }
diff --git a/packages/core/src/DatePicker/DatePickerContent.vue b/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 }"
     >
diff --git a/packages/core/src/DateRangePicker/DateRangePickerContent.vue b/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 }"
     >

Original file line number	Diff line number	Diff line change
`@@ -176,7 +176,7 @@`
`176`	`176`	`{`
`177`	`177`	`'name': 'weekdayFormat',`
`178`	`178`	`'description': '<p>The format to use for the weekday strings provided via the weekdays slot prop</p>\n',`
`179`		`- 'type': '\'long\' \| \'short\' \| \'narrow\'',`
	`179`	`+ 'type': '\'narrow\' \| \'short\' \| \'long\'',`
`180`	`180`	`'required': false,`
`181`	`181`	`'default': '\'narrow\''`
`182`	`182`	`},`
Original file line number	Diff line number	Diff line change
`@@ -196,7 +196,7 @@`
`196`	`196`	`{`
`197`	`197`	`'name': 'weekdayFormat',`
`198`	`198`	`'description': '<p>The format to use for the weekday strings provided via the weekdays slot prop</p>\n',`
`199`		`- 'type': '\'long\' \| \'short\' \| \'narrow\'',`
	`199`	`+ 'type': '\'narrow\' \| \'short\' \| \'long\'',`
`200`	`200`	`'required': false,`
`201`	`201`	`'default': '\'narrow\''`
`202`	`202`	`},`
Original file line number	Diff line number	Diff line change
`@@ -164,7 +164,7 @@`
`164`	`164`	`{`
`165`	`165`	`'name': 'weekdayFormat',`
`166`	`166`	`'description': '<p>The format to use for the weekday strings provided via the weekdays slot prop</p>\n',`
`167`		`- 'type': '\'long\' \| \'short\' \| \'narrow\'',`
	`167`	`+ 'type': '\'narrow\' \| \'short\' \| \'long\'',`
`168`	`168`	`'required': false,`
`169`	`169`	`'default': '\'narrow\''`
`170`	`170`	`},`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,6 @@`
`40`	`40`	`{`
`41`	`41`	`'name': 'state',`
`42`	`42`	`'description': '<p>The current state of the stepper item</p>\n',`
`43`		`- 'type': '\'active\' \| \'completed\' \| \'inactive\''`
	`43`	`+ 'type': '\'active\' \| \'inactive\' \| \'completed\''`
`44`	`44`	`}`
`45`	`45`	`]" />`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`{`
`18`	`18`	`'name': 'feature',`
`19`	`19`	`'description': '',`
`20`		`- 'type': '\'focusable\' \| \'fully-hidden\'',`
	`20`	`+ 'type': '\'fully-hidden\' \| \'focusable\'',`
`21`	`21`	`'required': false,`
`22`	`22`	`'default': '\'focusable\''`
`23`	`23`	`}`