Merge pull request #1476 from privy-open-source/feat/datepicker-placement

feat: create placement for datepicker

Author: adenvt

src/components/datepicker/Datepicker.vue

@@ -4,6 +4,7 @@
     class="datepicker"
     data-testid="datepicker"
     aria-label="datepicker"
+    :placement="placement"
     :class="classNames"
     :disabled="disabled">
     <template #activator>
@@ -63,6 +64,7 @@ import type { CalendarMode } from '../calendar/adapter/adapter'
 import { useVModel } from '../input'
 import IconCalendar from '@privyid/persona-icon/vue/calendar/16.vue'
 import type { SizeVariant } from '../button'
+import type { Placement } from '@floating-ui/dom'
 
 defineOptions({ inheritAttrs: false })
 
@@ -139,6 +141,10 @@ const props = defineProps({
     type   : String,
     default: undefined,
   },
+  placement: {
+    type   : String as PropType<Placement>,
+    default: 'bottom-start',
+  },
 })
 
 const emit = defineEmits<{

src/components/datepicker/index.md

@@ -57,6 +57,37 @@ Datepicker has 4 variants size: `xs`, `sm`, `md`, `lg`, default is `md`.
 </template>
 ```
 
+## Placement
+
+You can customize the datepicker position using the `placement` prop. 
+This flexibility ensures that the datepicker fits seamlessly within your user interface. 
+The placement prop determines where the datepicker will appear in relation to the input field. 
+
+<preview>
+  <p-datepicker placement="left" />
+</preview>
+
+```vue
+<template>
+  <p-datepicker placement="left" />
+</template>
+```
+
+### Combining Placement
+
+You can further refine the placement by combining it with a suffix to adjust vertical/horizontal alignment.
+This suffix is useful for aligning the datepicker with the start (`*-start`) or end (`*-end`) of the input field.
+
+<preview class="flex-col space-y-6">
+  <p-datepicker placement="bottom-end" />
+</preview>
+
+```vue
+<template>
+  <p-datepicker placement="bottom-end" />
+</template>
+```
+
 ## Placeholder
 
 You can set input placeholder via `placeholder` props