Skip to content

Commit 076eaa2

Browse files
lepturelepture
committed
fix: use ThemeWrapper for portal elements
1 parent e25c52b commit 076eaa2

File tree

12 files changed

+261
-255
lines changed

12 files changed

+261
-255
lines changed

‎demo/App.vue‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { ThemeProvider } from '#components'
23
import RadioDemo from './components/RadioDemo.vue'
34
import PaginationDemo from './components/PaginationDemo.vue'
45
import SpinnerDemo from './components/SpinnerDemo.vue'
@@ -13,15 +14,17 @@ import AccordionDemo from './components/AccordionDemo.vue'
1314
</script>
1415

1516
<template>
16-
<RadioDemo />
17-
<SpinnerDemo />
18-
<AccordionDemo />
19-
<CollapsibleDemo />
20-
<ToggleDemo />
21-
<ToggleGroupDemo />
22-
<SelectDemo />
23-
<ComboboxDemo />
24-
<TabsDemo />
25-
<ColorFieldDemo />
26-
<PaginationDemo />
17+
<ThemeProvider>
18+
<RadioDemo />
19+
<SpinnerDemo />
20+
<AccordionDemo />
21+
<CollapsibleDemo />
22+
<ToggleDemo />
23+
<ToggleGroupDemo />
24+
<SelectDemo />
25+
<ComboboxDemo />
26+
<TabsDemo />
27+
<ColorFieldDemo />
28+
<PaginationDemo />
29+
</ThemeProvider>
2730
</template>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Typlog UI</title>
77
</head>
8-
<body class="ui-root" data-accent-color="indigo" data-radius="medium" data-has-background="true">
8+
<body>
99
<div id="app"></div>
1010
<script type="module" src="/demo/main.ts"></script>
1111
</body>

‎src/components/alert/AlertDialogContent.vue‎

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type {
33
AlertDialogContentProps as _DialogContentProps,
44
AlertDialogContentEmits,
55
} from 'reka-ui'
6-
import { injectThemeContext } from '../ThemeProvider.vue'
6+
import ThemeWrapper from '../provider/ThemeWrapper.vue'
77
88
export interface AlertDialogContentProps extends _DialogContentProps {
99
to?: string | HTMLElement
@@ -29,8 +29,6 @@ defineOptions({
2929
inheritAttrs: false,
3030
})
3131
32-
const theme = injectThemeContext()
33-
3432
const props = withDefaults(defineProps<AlertDialogContentProps>(), {
3533
size: '3',
3634
maxWidth: '450px',
@@ -46,35 +44,31 @@ const forwarded = useForwardPropsEmits(props, emits, [
4644

4745
<template>
4846
<AlertDialogPortal :to="props.to">
49-
<AlertDialogOverlay
50-
class="ui-root ui-DialogOverlay"
51-
:data-accent-color="theme.accentColor.value"
52-
:data-gray-color="theme.grayColor.value"
53-
:data-radius="theme.radius.value"
54-
:data-scaling="theme.scaling.value"
55-
>
56-
<div class="ui-DialogWrapper">
57-
<div class="ui-DialogContainer">
58-
<AlertDialogContent
59-
class="ui-DialogContent"
60-
:class="`r-size-${props.size}`"
61-
v-bind="{
62-
...$attrs,
63-
...forwarded,
64-
}"
65-
:style="{
66-
width: props.width,
67-
height: props.height,
68-
minWidth: props.minWidth,
69-
maxWidth: props.maxWidth,
70-
minHeight: props.minHeight,
71-
maxHeight: props.maxHeight,
72-
}"
73-
>
74-
<slot></slot>
75-
</AlertDialogContent>
47+
<ThemeWrapper>
48+
<AlertDialogOverlay class="ui-DialogOverlay">
49+
<div class="ui-DialogWrapper">
50+
<div class="ui-DialogContainer">
51+
<AlertDialogContent
52+
class="ui-DialogContent"
53+
:class="`r-size-${props.size}`"
54+
v-bind="{
55+
...$attrs,
56+
...forwarded,
57+
}"
58+
:style="{
59+
width: props.width,
60+
height: props.height,
61+
minWidth: props.minWidth,
62+
maxWidth: props.maxWidth,
63+
minHeight: props.minHeight,
64+
maxHeight: props.maxHeight,
65+
}"
66+
>
67+
<slot></slot>
68+
</AlertDialogContent>
69+
</div>
7670
</div>
77-
</div>
78-
</AlertDialogOverlay>
71+
</AlertDialogOverlay>
72+
</ThemeWrapper>
7973
</AlertDialogPortal>
8074
</template>

‎src/components/combobox/ComboboxContent.vue‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import type { ComboboxContentProps as _ComboboxContentProps, ComboboxContentEmits } from 'reka-ui'
3-
import { injectThemeContext } from '../ThemeProvider.vue'
3+
import ThemeWrapper from '../provider/ThemeWrapper.vue'
44
55
export interface ComboboxContentProps extends _ComboboxContentProps {
66
to?: string | HTMLElement
@@ -28,7 +28,6 @@ defineOptions({
2828
})
2929
const { forwardRef } = useForwardExpose()
3030
31-
const theme = injectThemeContext()
3231
const props = withDefaults(defineProps<ComboboxContentProps>(), {
3332
variant: 'solid',
3433
position: 'popper',
@@ -48,44 +47,42 @@ const contentClass = computed(() => {
4847

4948
<template>
5049
<ComboboxPortal :to="props.to">
51-
<ComboboxContent
52-
:ref="forwardRef"
53-
v-bind="{
54-
...$attrs,
55-
...forwarded,
56-
position: 'popper',
57-
to: undefined,
58-
variant: undefined,
59-
}"
60-
class="ui-root ui-ComboboxContent"
61-
:class="contentClass"
62-
:data-accent-color="context.color.value || theme.accentColor.value"
63-
:data-gray-color="theme.grayColor.value"
64-
:data-radius="theme.radius.value"
65-
:data-scaling="theme.scaling.value"
66-
>
67-
<ScrollAreaRoot
68-
type="auto"
69-
class="ui-ScrollArea"
50+
<ThemeWrapper :accent-color="context.color.value">
51+
<ComboboxContent
52+
:ref="forwardRef"
53+
v-bind="{
54+
...$attrs,
55+
...forwarded,
56+
position: 'popper',
57+
to: undefined,
58+
variant: undefined,
59+
}"
60+
class="ui-ComboboxContent"
61+
:class="contentClass"
7062
>
71-
<ComboboxViewport
72-
class="ui-ComboboxViewport"
73-
as-child
63+
<ScrollAreaRoot
64+
type="auto"
65+
class="ui-ScrollArea"
7466
>
75-
<ScrollAreaViewport class="ui-ScrollAreaViewport">
76-
<slot></slot>
77-
</ScrollAreaViewport>
78-
</ComboboxViewport>
79-
<div class="ui-ScrollAreaViewportFocusRing"></div>
80-
<ScrollAreaScrollbar
81-
class="ui-ScrollAreaScrollbar"
82-
:data-size="1"
83-
orientation="vertical"
84-
>
85-
<ScrollAreaThumb class="ui-ScrollAreaThumb" />
86-
</ScrollAreaScrollbar>
87-
</ScrollAreaRoot>
88-
</ComboboxContent>
67+
<ComboboxViewport
68+
class="ui-ComboboxViewport"
69+
as-child
70+
>
71+
<ScrollAreaViewport class="ui-ScrollAreaViewport">
72+
<slot></slot>
73+
</ScrollAreaViewport>
74+
</ComboboxViewport>
75+
<div class="ui-ScrollAreaViewportFocusRing"></div>
76+
<ScrollAreaScrollbar
77+
class="ui-ScrollAreaScrollbar"
78+
:data-size="1"
79+
orientation="vertical"
80+
>
81+
<ScrollAreaThumb class="ui-ScrollAreaThumb" />
82+
</ScrollAreaScrollbar>
83+
</ScrollAreaRoot>
84+
</ComboboxContent>
85+
</ThemeWrapper>
8986
</ComboboxPortal>
9087
</template>
9188

‎src/components/dialog/DialogContent.vue‎

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ import type {
33
DialogContentProps as _DialogContentProps,
44
DialogContentEmits,
55
} from 'reka-ui'
6-
import { injectThemeContext } from '../ThemeProvider.vue'
6+
import {
7+
DialogPortal,
8+
DialogContent,
9+
DialogOverlay,
10+
DialogClose,
11+
} from 'reka-ui'
12+
import { Icon } from '@iconify/vue'
13+
import IconButton from '../button/IconButton.vue'
14+
import ThemeWrapper from '../provider/ThemeWrapper.vue'
715
816
export interface DialogContentProps extends _DialogContentProps {
917
to?: string | HTMLElement
@@ -19,15 +27,7 @@ export interface DialogContentProps extends _DialogContentProps {
1927
</script>
2028

2129
<script setup lang="ts">
22-
import {
23-
DialogPortal,
24-
DialogContent,
25-
DialogOverlay,
26-
DialogClose,
27-
} from 'reka-ui'
28-
import { Icon } from '@iconify/vue'
2930
import { useForwardPropsEmits } from '../util'
30-
import IconButton from '../button/IconButton.vue'
3131
3232
defineOptions({
3333
inheritAttrs: false,
@@ -37,7 +37,6 @@ const props = withDefaults(defineProps<DialogContentProps>(), {
3737
size: '3',
3838
maxWidth: '600px',
3939
})
40-
const theme = injectThemeContext()
4140
const emits = defineEmits<DialogContentEmits>()
4241
const forwarded = useForwardPropsEmits(props, emits, [
4342
'to', 'align', 'class', 'size',
@@ -49,47 +48,43 @@ const forwarded = useForwardPropsEmits(props, emits, [
4948

5049
<template>
5150
<DialogPortal :to="props.to">
52-
<DialogOverlay
53-
class="ui-root ui-DialogOverlay"
54-
:data-accent-color="theme.accentColor.value"
55-
:data-gray-color="theme.grayColor.value"
56-
:data-radius="theme.radius.value"
57-
:data-scaling="theme.scaling.value"
58-
>
59-
<div class="ui-DialogWrapper">
60-
<div class="ui-DialogContainer">
61-
<DialogContent
62-
class="ui-DialogContent"
63-
:class="`r-size-${props.size}`"
64-
v-bind="{
65-
...$attrs,
66-
...forwarded,
67-
}"
68-
:style="{
69-
width: props.width,
70-
height: props.height,
71-
minWidth: props.minWidth,
72-
maxWidth: props.maxWidth,
73-
minHeight: props.minHeight,
74-
maxHeight: props.maxHeight,
75-
}"
76-
>
77-
<IconButton
78-
v-if="props.closeIcon"
79-
class="ui-DialogContentClose"
80-
:as="DialogClose"
81-
type="button"
82-
variant="ghost"
83-
color="gray"
84-
aria-label="Close"
51+
<ThemeWrapper>
52+
<DialogOverlay class="ui-DialogOverlay">
53+
<div class="ui-DialogWrapper">
54+
<div class="ui-DialogContainer">
55+
<DialogContent
56+
class="ui-DialogContent"
57+
:class="`r-size-${props.size}`"
58+
v-bind="{
59+
...$attrs,
60+
...forwarded,
61+
}"
62+
:style="{
63+
width: props.width,
64+
height: props.height,
65+
minWidth: props.minWidth,
66+
maxWidth: props.maxWidth,
67+
minHeight: props.minHeight,
68+
maxHeight: props.maxHeight,
69+
}"
8570
>
86-
<Icon icon="lucide:x" />
87-
</IconButton>
88-
<slot></slot>
89-
</DialogContent>
71+
<IconButton
72+
v-if="props.closeIcon"
73+
class="ui-DialogContentClose"
74+
:as="DialogClose"
75+
type="button"
76+
variant="ghost"
77+
color="gray"
78+
aria-label="Close"
79+
>
80+
<Icon icon="lucide:x" />
81+
</IconButton>
82+
<slot></slot>
83+
</DialogContent>
84+
</div>
9085
</div>
91-
</div>
92-
</DialogOverlay>
86+
</DialogOverlay>
87+
</ThemeWrapper>
9388
</DialogPortal>
9489
</template>
9590

0 commit comments

Comments
 (0)