jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SSR-532 make label trigger radio button and display pointer on hover.

Browse source
This commit is contained in:
Bryan Mauger 2023-06-16 14:28:14 -04:00
parent 3b2237ce74
commit 12b8c4a2d4
1 changed files with 128 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/ux-components/radio/radio.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex --> <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<input <input
type="radio" type="radio"
class="form-check-input" class="form-check-input"
@ -14,19 +15,18 @@
:checked="checkValue" :checked="checkValue"
:validationRules="validationRules" :validationRules="validationRules"
/> />
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p> <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{ <span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText screenReaderOnlyText
}}</span> }}</span>
</label> </label>
</div> </div>
</template> </template>
<script> <script>
import { useField } from "vee-validate"; import { useField } from "vee-validate";
export default { export default {
name: "radio", name: "radio",
props: { props: {
groupName: String, groupName: String,
@ -93,6 +93,12 @@
.form-check { .form-check {
position: relative; position: relative;
label {
&:hover {
cursor: pointer;
}
}
.form-check-input { .form-check-input {
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 50%; border-radius: 50%;
@ -136,4 +142,3 @@
} }
} }
</style> </style>