arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(RadioGroup): rendering empty slots (#2456)

Browse Source
This commit is contained in:
Nestor Vera
2024-10-30 12:42:56 +01:00
committed by GitHub
parent 424efe783e
commit b6ed1c59ff
3 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/runtime/components/forms/RadioGroup.vue
View File

@@ -17,11 +17,11 @@
:ui="uiRadio"
@change="onUpdate(option.value)"
>
<template #label>
<template v-if="$slots.label" #label>
<slot name="label" v-bind="{ option, selected: option.selected }" />
</template>
<template #help>
<template v-if="$slots.help" #help>
<slot name="help" v-bind="{ option, selected: option.selected }" />
</template>
</URadio>

15
test/components/elements/RadioGroup.spec.ts Normal file
View File

@@ -0,0 +1,15 @@
import { describe, it, expect } from 'vitest'
import type { TypeOf } from 'zod'
import ComponentRender from '../component-render'
import { URadioGroup } from '#components'
describe('RadioGroup', () => {
it.each([
['basic case', { props: { options: [{ value: 'value', label: 'label' }] } }],
['help text', { props: { options: [{ value: 'value', label: 'label', help: 'i need somebody' }] } }]
// @ts-ignore
])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof URadioGroup.props>) => {
const html = await ComponentRender(nameOrHtml, options, URadioGroup)
expect(html).toMatchSnapshot()
})
})

33
test/components/elements/__snapshots__/RadioGroup.spec.ts.snap Normal file
View File

@@ -0,0 +1,33 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`RadioGroup > renders basic case correctly 1`] = `
"<div class="">
<fieldset>
<!--v-if-->
<div class="relative flex items-start">
<div class="flex items-center h-5"><input id="v-0-0-0" type="radio" class="h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent form-radio bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 text-primary-500 dark:text-primary-400" value="value"></div>
<div class="ms-3 flex flex-col"><label for="v-0-0-0" class="text-sm font-medium text-gray-700 dark:text-gray-200">label
<!--v-if-->
</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders help text correctly 1`] = `
"<div class="">
<fieldset>
<!--v-if-->
<div class="relative flex items-start">
<div class="flex items-center h-5"><input id="v-0-0-0" type="radio" class="h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent form-radio bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 text-primary-500 dark:text-primary-400" value="value"></div>
<div class="ms-3 flex flex-col"><label for="v-0-0-0" class="text-sm font-medium text-gray-700 dark:text-gray-200">label
<!--v-if-->
</label>
<p class="text-sm text-gray-500 dark:text-gray-400">i need somebody</p>
</div>
</div>
</fieldset>
</div>"
`;