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

CSR-254: update list-button w/ vee validate and add to form-test layout

Browse source
This commit is contained in:
Adam Caouette 2022-01-14 16:42:38 -05:00
parent 1958610b2b
commit 8108886b10
2 changed files with 76 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/layouts/form-test/form-test.vue
View file

@ -66,31 +66,22 @@
<h4 class="mx-2 mt-4 mb-0">Which windshield part needs fixed? (Required)</h4>
<fieldset>
<legend class="sr-only">Which windshield part needs fixed?</legend>
<listCard
isMultiSelectHorizontal
buttonImage="windshield-damage.svg"
buttonLabel="Single Windshield"
<listButton
isMultiSelect
buttonID="Single Windshield"
value="Single Windshield"
altText=""
buttonID="List Card Horizontal Checkbox a"
groupName="demo2"
/>
<listCard
isMultiSelectHorizontal
buttonImage="windshield-damage.svg"
buttonLabel="Driver Side"
<listButton
isMultiSelect
buttonID="Driver Side"
value="Driver Side"
altText=""
buttonID="List Card Horizontal Checkbox b"
groupName="demo2"
/>
<listCard
isMultiSelectHorizontal
buttonImage="windshield-damage.svg"
buttonLabel="Passenger Side"
<listButton
isMultiSelect
buttonID="Passenger Side"
value="Passenger Side"
altText=""
buttonID="List Card Horizontal Checkbox c"
groupName="demo2"
/>
</fieldset>
@ -127,7 +118,6 @@
<div class="row g-2 mt-6 mx-4">
<h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
<div
role="radiogroup"
aria-labelledby="demo5-group"
class="d-flex flex-row p-0"
>
@ -145,7 +135,7 @@
/>
<listCard
isMultiSelect
buttonImage="side-window-damage.svg"
buttonImage="side-window-damage-left-all.svg"
buttonLabel="Side Door"
value="Side Door"
altText=""
@ -251,6 +241,7 @@ import * as Yup from "yup";
import listCard from "@/ux-components/list-card/list-card";
import textInput from "@/common-components/text-input/text-input";
import listButton from "@/ux-components/list-button/list-button";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
export default {
@ -304,6 +295,7 @@ export default {
},
components: {
listCard,
listButton,
listButtonHorizontal,
textInput,
Form,

70
src/ux-components/list-button/list-button.vue
View file

@ -1,16 +1,42 @@
<template>
<!-- See the component-test.vue page for example implementation -->
<div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
<input
type="checkbox"
:id="buttonID"
:name="groupName"
:value="buttonID"
:aria-required="isRequired"
@click="handleClick(value)"
:data-focus-target="groupName"
>
<label
tabindex="-1"
:for="buttonID"
:aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4"
>
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
</label>
</div>
<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
<label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
<input
type="radio"
:id="buttonID"
:name="groupName"
:value="buttonID"
:aria-required="isRequired"
@click="handleClick(value)"
:data-focus-target="groupName"
>
<label
tabindex="-1"
:for="buttonID"
:aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4"
>
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@ -20,6 +46,8 @@
</template>
<script>
import { toRefs } from 'vue';
import { useField } from 'vee-validate';
import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
@ -35,6 +63,10 @@ export default {
loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
value: { // Field initial value
type: String,
default: ""
}
},
data() {
return {
@ -45,12 +77,38 @@ export default {
displayLoader() {
this.isLoaderDisplayed = true;
},
handleClick() {
handleClick(value) {
this.loaderEnabled && this.displayLoader();
this.handleChange(value);
}
},
components: {
loader,
}
},
setup(props) {
const { groupName, value } = toRefs(props);
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
type: inputType,
checkedValue: value
});
return {
checked,
handleChange,
errorMessage,
};
},
};
</script>
<style lang="scss">
.list-group {
&.list-button {
input[type="radio"],
input[type="checkbox"] {
position: static !important; //override bootstrap
height: 0;
}
}
}
</style>