1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <script setup lang="ts">
| import type {
| PopoverContentProps,
| PopoverRootEmits,
| PopoverRootProps,
| } from 'radix-vue';
|
| import type { ClassType } from '@vben-core/typings';
|
| import { computed } from 'vue';
|
| import { useForwardPropsEmits } from 'radix-vue';
|
| import {
| PopoverContent,
| Popover as PopoverRoot,
| PopoverTrigger,
| } from '../../ui';
|
| interface Props extends PopoverRootProps {
| class?: ClassType;
| contentClass?: ClassType;
| contentProps?: PopoverContentProps;
| }
|
| const props = withDefaults(defineProps<Props>(), {});
|
| const emits = defineEmits<PopoverRootEmits>();
|
| const delegatedProps = computed(() => {
| const {
| class: _cls,
| contentClass: _,
| contentProps: _cProps,
| ...delegated
| } = props;
|
| return delegated;
| });
|
| const forwarded = useForwardPropsEmits(delegatedProps, emits);
| </script>
|
| <template>
| <PopoverRoot v-bind="forwarded">
| <PopoverTrigger>
| <slot name="trigger"></slot>
|
| <PopoverContent
| :class="contentClass"
| class="side-content z-popup"
| v-bind="contentProps"
| >
| <slot></slot>
| </PopoverContent>
| </PopoverTrigger>
| </PopoverRoot>
| </template>
|
|