Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add :avoid-collisions='true'

Browse Source
This commit is contained in:
Mael Primet 2023-09-24 21:56:25 +02:00
parent a92b15deee
commit bd1d02f340
14 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
View File

@ -15,6 +15,7 @@ const emits = defineEmits<ContextMenuContentEmits>()
<ContextMenuPortal>
<ContextMenuContent
:align-offset="props.alignOffset"
:avoid-collisions="true"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -23,6 +23,7 @@ const props = withDefaults(
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:avoid-collisions="true"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
View File

@ -18,6 +18,7 @@ const props = withDefaults(
<HoverCardPortal>
<HoverCardContent
v-bind="props"
:avoid-collisions="true"
:class="
cn(
'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
View File

@ -25,6 +25,7 @@ const props = withDefaults(
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:avoid-collisions="true"
:class="
cn(
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
View File

@ -21,6 +21,7 @@ const emitsAsProps = useEmitAsProps(emits)
<PopoverPortal>
<PopoverContent
v-bind="{ ...props, ...emitsAsProps, $attrs }"
:avoid-collisions="true"
:class="
cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/default/ui/select/SelectContent.vue
View File

@ -22,6 +22,7 @@ const emitsAsProps = useEmitAsProps(emits)
<SelectPortal>
<SelectContent
v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
:avoid-collisions="true"
:class="
cn(
'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

2
apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
View File

@ -12,7 +12,7 @@ const emitsAsProps = useEmitAsProps(emits)
<template>
<TooltipPortal>
<TooltipContent v-bind="{ ...props, ...emitsAsProps, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<TooltipContent v-bind="{ ...props, ...emitsAsProps, ...$attrs }" :avoid-collisions="true" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<slot />
</TooltipContent>
</TooltipPortal>

1
apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
View File

@ -15,6 +15,7 @@ const emits = defineEmits<ContextMenuContentEmits>()
<ContextMenuPortal>
<ContextMenuContent
:align-offset="props.alignOffset"
:avoid-collisions="true"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -23,6 +23,7 @@ const props = withDefaults(
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:avoid-collisions="true"
:class="[
cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/new-york/ui/hover-card/HoverCardContent.vue
View File

@ -18,6 +18,7 @@ const props = withDefaults(
<HoverCardPortal>
<HoverCardContent
v-bind="props"
:avoid-collisions="true"
:class="
cn(
'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
View File

@ -25,6 +25,7 @@ const props = withDefaults(
:side="props.side"
:align="props.align"
:align-offset="props.alignOffset"
:avoid-collisions="true"
:class="
cn(
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/new-york/ui/popover/PopoverContent.vue
View File

@ -21,6 +21,7 @@ const emitsAsProps = useEmitAsProps(emits)
<PopoverPortal>
<PopoverContent
v-bind="{ ...props, ...emitsAsProps, $attrs }"
:avoid-collisions="true"
:class="
cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

1
apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
View File

@ -22,6 +22,7 @@ const emitsAsProps = useEmitAsProps(emits)
<SelectPortal>
<SelectContent
v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
:avoid-collisions="true"
:class="
cn(
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

2
apps/www/src/lib/registry/new-york/ui/tooltip/TooltipContent.vue
View File

@ -9,7 +9,7 @@ const emits = defineEmits<TooltipContentEmits>()
</script>
<template>
<TooltipContent v-bind="{ ...props, ...useEmitAsProps(emits) }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<TooltipContent v-bind="{ ...props, ...useEmitAsProps(emits) }" :avoid-collisions="true" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')">
<slot />
</TooltipContent>
</template>