refactor: remove unnecessary avoid-collisions

This commit is contained in:
Sadegh Barati 2024-01-30 23:26:33 +03:30
parent 51a858dc61
commit 62c41092bd
13 changed files with 11 additions and 27 deletions

View File

@ -40,7 +40,7 @@ const date = ref({
</span> </span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0" :align="'end'" :avoid-collisions="true"> <PopoverContent class="w-auto p-0" :align="'end'">
<Calendar <Calendar
v-model.range="date" v-model.range="date"
:columns="2" :columns="2"

View File

@ -40,7 +40,7 @@ const date = ref({
</span> </span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true"> <PopoverContent class="w-auto p-0" align="start">
<Calendar <Calendar
v-model.range="date" v-model.range="date"
:columns="2" :columns="2"

View File

@ -40,7 +40,7 @@ const date = ref({
</span> </span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true"> <PopoverContent class="w-auto p-0" align="start">
<Calendar <Calendar
v-model.range="date" v-model.range="date"
mode="date" mode="date"

View File

@ -9,13 +9,7 @@ import {
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = withDefaults( const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),
{
sideOffset: 2,
alignOffset: 0,
},
)
const emits = defineEmits<MenubarSubContentEmits>() const emits = defineEmits<MenubarSubContentEmits>()

View File

@ -18,8 +18,6 @@ defineOptions({
const props = withDefaults( const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), { defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
position: 'popper', position: 'popper',
sideOffset: 4,
avoidCollisions: true,
}, },
) )
const emits = defineEmits<SelectContentEmits>() const emits = defineEmits<SelectContentEmits>()

View File

@ -40,7 +40,7 @@ const date = ref({
</span> </span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true"> <PopoverContent class="w-auto p-0" align="start">
<Calendar <Calendar
v-model.range="date" v-model.range="date"
:columns="2" :columns="2"

View File

@ -40,7 +40,7 @@ const date = ref({
</span> </span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true"> <PopoverContent class="w-auto p-0" align="start">
<Calendar <Calendar
v-model.range="date" v-model.range="date"
mode="date" mode="date"

View File

@ -9,13 +9,7 @@ import {
} from 'radix-vue' } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = withDefaults( const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),
{
sideOffset: 2,
alignOffset: 0,
},
)
const emits = defineEmits<MenubarSubContentEmits>() const emits = defineEmits<MenubarSubContentEmits>()

View File

@ -18,8 +18,6 @@ defineOptions({
const props = withDefaults( const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), { defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
position: 'popper', position: 'popper',
sideOffset: 4,
avoidCollisions: true,
}, },
) )
const emits = defineEmits<SelectContentEmits>() const emits = defineEmits<SelectContentEmits>()

View File

@ -55,7 +55,7 @@
}, },
{ {
"name": "MenubarSubContent.vue", "name": "MenubarSubContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 2,\n alignOffset: 0,\n },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n"
}, },
{ {
"name": "MenubarSubTrigger.vue", "name": "MenubarSubTrigger.vue",

View File

@ -11,7 +11,7 @@
}, },
{ {
"name": "SelectContent.vue", "name": "SelectContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 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',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 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',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
}, },
{ {
"name": "SelectGroup.vue", "name": "SelectGroup.vue",

View File

@ -55,7 +55,7 @@
}, },
{ {
"name": "MenubarSubContent.vue", "name": "MenubarSubContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>(),\n {\n sideOffset: 2,\n alignOffset: 0,\n },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n MenubarPortal,\n MenubarSubContent,\n type MenubarSubContentEmits,\n type MenubarSubContentProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarSubContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarSubContent>\n </MenubarPortal>\n</template>\n"
}, },
{ {
"name": "MenubarSubTrigger.vue", "name": "MenubarSubTrigger.vue",

View File

@ -11,7 +11,7 @@
}, },
{ {
"name": "SelectContent.vue", "name": "SelectContent.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n sideOffset: 4,\n avoidCollisions: true,\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 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',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectContent,\n type SelectContentEmits,\n type SelectContentProps,\n SelectPortal,\n SelectViewport,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(\n defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {\n position: 'popper',\n },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SelectPortal>\n <SelectContent\n v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n 'relative z-50 max-h-96 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',\n position === 'popper'\n && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n props.class,\n )\n \"\n >\n <SelectScrollUpButton />\n <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\">\n <slot />\n </SelectViewport>\n <SelectScrollDownButton />\n </SelectContent>\n </SelectPortal>\n</template>\n"
}, },
{ {
"name": "SelectGroup.vue", "name": "SelectGroup.vue",