Skip to content

Commit 259d12c

Browse files
lepturelepture
committed
fix(radio): update Radio Cards
1 parent ec7c05a commit 259d12c

File tree

5 files changed

+98
-36
lines changed

5 files changed

+98
-36
lines changed

‎src/components/card/Card.vue‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
2323

2424
<template>
2525
<Primitive
26-
class="ui-Card"
26+
class="ui-Card ui-BaseCard"
2727
:class="resetClass"
2828
:as-child="props.asChild"
2929
:as="props.as"
@@ -34,27 +34,6 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
3434
</template>
3535

3636
<style>
37-
.ui-Card {
38-
display: block;
39-
position: relative;
40-
overflow: hidden;
41-
font-style: normal;
42-
text-align: start;
43-
box-sizing: border-box;
44-
border-radius: var(--card-border-radius);
45-
padding: var(--card-padding);
46-
border-color: var(--card-border-color, var(--gray-a5));
47-
border-width: var(--card-border-width, 1px);
48-
border-style: solid;
49-
width: 100%;
50-
}
51-
.ui-Card:where(:any-link, button, label):where(:hover) {
52-
--card-border-color: var(--gray-a7);
53-
}
54-
.ui-Card:where(:any-link, button, label):where(:focus-visible) {
55-
--card-border-color: var(--focus-8);
56-
box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
57-
}
5837
.ui-Card:where(.r-size-1) {
5938
--card-padding: var(--space-3);
6039
--card-border-radius: max(var(--radius-4), var(--radius-full));
@@ -82,9 +61,4 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
8261
.ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
8362
border-color: var(--gray-a5);
8463
}
85-
86-
/** special enhancement for tailwindcss */
87-
.ui-Card:where(.p-0) {
88-
--card0-padding: 0;
89-
}
9064
</style>

‎src/components/card/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.ui-BaseCard {
2+
display: block;
3+
position: relative;
4+
overflow: hidden;
5+
font-style: normal;
6+
text-align: start;
7+
box-sizing: border-box;
8+
border-radius: var(--card-border-radius);
9+
padding: var(--card-padding);
10+
border-color: var(--card-border-color, var(--gray-a5));
11+
border-width: var(--card-border-width, 1px);
12+
border-style: solid;
13+
width: 100%;
14+
}
15+
.ui-BaseCard:where(:any-link, button, label):where(:hover) {
16+
--card-border-color: var(--gray-a7);
17+
}
18+
.ui-BaseCard:where(:any-link, button, label):where(:focus-visible) {
19+
--card-border-color: var(--focus-8);
20+
box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
21+
}
22+
23+
/** special enhancement for tailwindcss */
24+
.ui-BaseCard:where(.p-0) {
25+
--card-padding: 0;
26+
}

‎src/components/radio/RadioCardsItem.vue‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { RadioGroupItemProps } from 'reka-ui'
44

55
<script setup lang="ts">
66
import { useForwardExpose, useForwardProps, RadioGroupItem } from 'reka-ui'
7-
import Card from '../card/Card.vue'
87
98
const props = defineProps<RadioGroupItemProps>()
109
const forwarded = useForwardProps(props)
@@ -14,22 +13,20 @@ useForwardExpose()
1413

1514
<template>
1615
<RadioGroupItem
17-
class="ui-RadioCardsItem"
16+
class="ui-RadioCardsItem ui-BaseCard"
1817
v-bind="{...forwarded, asChild: false}"
1918
>
20-
<Card :as-child="forwarded.asChild">
21-
<slot></slot>
22-
</Card>
19+
<slot></slot>
2320
</RadioGroupItem>
2421
</template>
2522

23+
<style src="../card/style.css"></style>
2624

2725
<style>
28-
.ui-RadioCardsItem .ui-Card {
29-
width: 100%;
26+
.ui-RadioCardsItem {
3027
height: 100%;
3128
}
32-
.ui-RadioCardsItem:where([data-state="checked"]) .ui-Card {
29+
.ui-RadioCardsItem:where([data-state="checked"]) {
3330
--card-border-color: var(--accent-10);
3431
box-shadow: 0 0 0 1px var(--accent-10);
3532
}

‎src/components/radio/RadioCardsRoot.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script lang="ts">
2+
import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui'
3+
import type { ColorType } from '../types'
4+
5+
export interface RadioCardsRootProps extends RadioGroupRootProps {
6+
/**
7+
* The visual variant of the radio group.
8+
* @default "surface"
9+
*/
10+
variant?: 'surface' | 'classic'
11+
/**
12+
* Control the size of the radio group.
13+
* @default "2"
14+
*/
15+
size?: '1' | '2' | '3'
16+
/** Overrides the accent color inherited from the ThemeProvider. */
17+
color?: ColorType
18+
/** Uses a higher contrast color for the component. */
19+
highContrast?: boolean
20+
}
21+
</script>
22+
23+
<script setup lang="ts">
24+
import { RadioGroupRoot } from 'reka-ui'
25+
import { useForwardPropsEmitsWithout, buildPropsClass } from '../util'
26+
27+
const emits = defineEmits<RadioGroupRootEmits>()
28+
29+
const props = withDefaults(defineProps<RadioCardsRootProps>(), {
30+
size: '2',
31+
variant: 'surface',
32+
})
33+
const forwarded = useForwardPropsEmitsWithout(props, emits, ['color', 'size', 'variant', 'highContrast'])
34+
const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
35+
</script>
36+
37+
<template>
38+
<RadioGroupRoot
39+
class="ui-RadioCardsRoot"
40+
:class="resetClass"
41+
:data-accent-color="props.color"
42+
v-bind="forwarded"
43+
>
44+
<slot></slot>
45+
</RadioGroupRoot>
46+
</template>
47+
48+
<style>
49+
.ui-RadioCardsRoot:where(.r-size-1) {
50+
--card-padding: var(--space-3);
51+
--card-border-radius: max(var(--radius-4), var(--radius-full));
52+
}
53+
.ui-RadioCardsRoot:where(.r-size-2) {
54+
--card-padding: var(--space-4);
55+
--card-border-radius: max(var(--radius-4), var(--radius-full));
56+
}
57+
.ui-RadioCardsRoot:where(.r-size-3) {
58+
--card-padding: var(--space-5);
59+
--card-border-radius: max(var(--radius-5), var(--radius-full));
60+
}
61+
</style>

‎src/components/radio/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export {
55

66
export {
77
default as RadioGroupRoot,
8-
default as RadioCardsRoot,
98
type RadioGroupRootProps,
109
} from './RadioGroupRoot.vue'
1110

@@ -14,6 +13,11 @@ export {
1413
type RadioGroupItemProps,
1514
} from './RadioGroupItem.vue'
1615

16+
export {
17+
default as RadioCardsRoot,
18+
type RadioCardsRootProps,
19+
} from './RadioCardsRoot.vue'
20+
1721
export {
1822
default as RadioCardsItem,
1923
} from './RadioCardsItem.vue'

0 commit comments

Comments
 (0)