p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add offset in PopoverContent

Browse Source
This commit is contained in:
p-sw 2024-06-03 23:21:05 +09:00
parent 21fadb8c10
commit c7be14429b
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/react/components/Popover.tsx
View File

@ -57,16 +57,28 @@ const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`, base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
variants: { variants: {
anchor: { anchor: {
topLeft: "bottom-full right-full origin-bottom-right", topLeft:
topCenter: "bottom-full left-1/2 -translate-x-1/2 origin-bottom-center", "bottom-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-bottom-right",
topRight: "bottom-full left-full origin-bottom-left", topCenter:
"bottom-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-bottom-center",
topRight:
"bottom-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-bottom-left",
middleLeft: "top-1/2 translate-y-1/2 right-full origin-right", middleLeft: "top-1/2 translate-y-1/2 right-full origin-right",
middleCenter: middleCenter:
"top-1/2 translate-y-1/2 left-1/2 -translate-x-1/2 origin-center", "top-1/2 translate-y-1/2 left-1/2 -translate-x-1/2 origin-center",
middleRight: "top-1/2 translate-y-1/2 left-full origin-left", middleRight:
bottomLeft: "top-full right-full origin-top-right", "top-1/2 translate-y-1/2 left-[calc(100%+var(--popover-offset))] origin-left",
bottomCenter: "top-full left-1/2 -translate-x-1/2 origin-top-center", bottomLeft:
bottomRight: "top-full left-full origin-top-left", "top-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-top-right",
bottomCenter:
"top-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-top-center",
bottomRight:
"top-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-top-left",
},
offset: {
sm: "[--popover-offset:2px]",
md: "[--popover-offset:4px]",
lg: "[--popover-offset:8px]",
}, },
opened: { opened: {
true: "opacity-1 scale-100", true: "opacity-1 scale-100",
@ -76,6 +88,7 @@ const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
defaults: { defaults: {
anchor: "bottomCenter", anchor: "bottomCenter",
opened: false, opened: false,
offset: "md",
}, },
}); });