Added v-models and catch emit function
This commit is contained in:
FrankRua
parent
483f342baa
commit
79bf4f774e
9 changed files with 502 additions and 489 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
||||
<div v-if="questionText" class="mt-6 mb-4 d-flex">
|
||||
<span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
|
||||
<div v-if="questionText" class="d-flex">
|
||||
<span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center">
|
||||
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
|
||||
|
|
|
|||
48
src/constants/dynamictext-mapper.js
Normal file
48
src/constants/dynamictext-mapper.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// Used to support custom (non-state) related dynamic text.
|
||||
// Example: {custom:glassName}, each key in the array is the value after custom:, like 'glassname'
|
||||
// Please use lowercase only so that we don't have to worry about case sensitivity.
|
||||
|
||||
const customMappings = {
|
||||
glassname: [
|
||||
{ key: 'Single Windshield', transformedValue: 'windshield' },
|
||||
{ key: 'Driver split windshield', transformedValue: 'driver side split windshield' },
|
||||
{ key: 'Passenger split windshield', transformedValue: 'passenger side split windshield' },
|
||||
{ key: 'Stationary backglass', transformedValue: 'rear window' },
|
||||
{ key: 'Sliding backglass', transformedValue: 'rear window' },
|
||||
{ key: 'Driver front door', transformedValue: 'driver side front door' },
|
||||
{ key: 'Driver back door ', transformedValue: 'driver side back door' },
|
||||
{ key: 'Driver vent', transformedValue: 'driver side vent glass' },
|
||||
{ key: 'Driver quarter', transformedValue: 'driver side quarter panel' },
|
||||
{ key: 'Driver sliding door', transformedValue: 'driver side sliding door' },
|
||||
{ key: 'Passenger front door', transformedValue: 'passenger side front door' },
|
||||
{ key: 'Passenger back door', transformedValue: 'passenger side back door' },
|
||||
{ key: 'Passenger vent', transformedValue: 'passenger side vent glass' },
|
||||
{ key: 'Passenger quarter', transformedValue: 'passenger side quarter panel' },
|
||||
{ key: 'Passenger sliding door', transformedValue: 'passenger side sliding door' },
|
||||
]
|
||||
}
|
||||
|
||||
export function getCustomTransformValue(type, key) {
|
||||
const transformArray = customMappings[type.toLowerCase()];
|
||||
|
||||
if(transformArray === undefined) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const transformValue = transformArray.find(map => map.key === key.toLowerCase());
|
||||
|
||||
return transformValue === undefined ? '' : transformValue;
|
||||
}
|
||||
|
||||
export function getCustomTransformKey(value) {
|
||||
const regexExp = new RegExp("{(.*?):(.*?)}", "g");
|
||||
const matches = [...value.matchAll(regexExp)];
|
||||
|
||||
if (matches.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const key = matches[0][2];
|
||||
|
||||
return key;
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@ const tintMap = {
|
|||
{ name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
|
||||
],
|
||||
|
||||
windhshield: [
|
||||
windshield: [
|
||||
// Blue Shade
|
||||
{ name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
|
||||
{ name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
|
||||
|
|
@ -72,5 +72,10 @@ const tintMap = {
|
|||
}
|
||||
|
||||
export function getTintImage(glassType, colorString) {
|
||||
|
||||
if(tintMap[glassType.toLowerCase()] === undefined) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return tintMap[glassType.toLowerCase()].find(item => item.name == colorString.toLowerCase())
|
||||
}
|
||||
|
|
@ -1,77 +1,53 @@
|
|||
<template>
|
||||
|
||||
<div class="container-fluid nested-radio">
|
||||
<div class="container-fluid nested-radio">
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<listCard
|
||||
groupName="listcard1"
|
||||
isWide="true"
|
||||
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
|
||||
buttonLabel="Green Tint, Blue Shade"
|
||||
buttonID="radio1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint, Blue Shade" buttonID="radio1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<p class="mb-0 fw-bold">Ok, select the features</p>
|
||||
<buttonQuestion
|
||||
buttonType="radio"
|
||||
groupName="Demo Group"
|
||||
buttonID="button1"
|
||||
isRequired
|
||||
value="test button"
|
||||
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
|
||||
:answers="demoArray"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<buttonQuestion buttonType="radio" groupName="Demo Group" buttonID="button1" isRequired value="test button" screenReaderOnlyText="rain sensor, solar, 3rd visor band" :answers="demoArray" questionText="ok now select your features" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<listCard
|
||||
groupName="listcard1"
|
||||
isWide="true"
|
||||
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
|
||||
buttonLabel="Green Tint"
|
||||
buttonID="radio2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint" buttonID="radio2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
||||
export default {
|
||||
name: "nestedRadio",
|
||||
components: {
|
||||
buttonQuestion,
|
||||
radio,
|
||||
listCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
demoArray: [
|
||||
"rain sensor, solar, 3rd visor band",
|
||||
"rain sensor, heated glass, solar, 3rd visor band",
|
||||
]
|
||||
name: "nestedRadio",
|
||||
components: {
|
||||
buttonQuestion,
|
||||
listCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
demoArray: [
|
||||
"rain sensor, solar, 3rd visor band",
|
||||
"rain sensor, heated glass, solar, 3rd visor band",
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nested-radio {
|
||||
.ui-radio {
|
||||
flex-direction: column;
|
||||
margin: .25rem 0;
|
||||
}
|
||||
p {
|
||||
font-size: .875rem;
|
||||
}
|
||||
.ui-radio {
|
||||
flex-direction: column;
|
||||
margin: .25rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,40 @@
|
|||
<template>
|
||||
<p>Select your current {{ colorQuestionText }} color:</p>
|
||||
|
||||
<div v-for="(value, name, index) in featureListData" :key="index">
|
||||
<listCard isRadio isWide :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${name}-${index}`" groupName="test" />
|
||||
|
||||
<buttonQuestion v-model="inputParams['question'+index]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true :groupName="name" />
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<p>Select your current {{ glassName }} color:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
{{ selectedTint }}
|
||||
<listCard v-model="selectedTint[name]" isRadio=true isWide=true :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${glassName}-${name}`" :groupName="`${glassName}`" @isCheckedChanged="TestMethod(name, $event)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="selectedTint[name] != undefined && selectedTint[name].isChecked === `${glassName}-${name}`" class="row my-2">
|
||||
<div class="col">
|
||||
{{ selectedPart }}
|
||||
<buttonQuestion v-model="selectedPart[glassName]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true :groupName="`${glassName}-${name}`" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
|
||||
// Supporting files
|
||||
import {
|
||||
getTintImage
|
||||
} from "@/constants/tint-mapper";
|
||||
import {
|
||||
getCustomTransformValue,
|
||||
getCustomTransformKey
|
||||
} from '@/constants/dynamictext-mapper';
|
||||
|
||||
export default {
|
||||
name: "part-question",
|
||||
|
|
@ -24,7 +42,8 @@ export default {
|
|||
return {
|
||||
glassColorQuestion: String,
|
||||
glassFeatureQuestion: String,
|
||||
inputParams: []
|
||||
selectedPart: {}, // v-model for the radio button selections
|
||||
selectedTint: {} // v-model for the list card selections
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -43,6 +62,10 @@ export default {
|
|||
return this.createFeatureListMap(this.colorAnswers);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const s = getCustomTransformKey('Select your current {custom:glassName} color')
|
||||
const r = getCustomTransformValue(s, this.glassName);
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
this.glassColorQuestion = cmsContent.ColorQuestion;
|
||||
|
|
@ -77,7 +100,24 @@ export default {
|
|||
const tintObject = getTintImage(glassType, tintColor);
|
||||
|
||||
return tintObject === undefined ? "" : tintObject.src;
|
||||
}
|
||||
},
|
||||
|
||||
TestMethod(name, event) {
|
||||
this.selectedTint[name] = event;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nested-radio {
|
||||
.ui-radio {
|
||||
flex-direction: column;
|
||||
margin: .25rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
{
|
||||
"partsOrQuestions": [
|
||||
{
|
||||
"glassName": "Backglass",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "DB12209GTYN",
|
||||
"description": "heated glass, solar, 1 hole",
|
||||
"color": "Green Tint",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DB12209YPYN",
|
||||
"description": "heated glass, solar, 1 hole",
|
||||
"color": "Gray Tint Privacy",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
}
|
||||
],
|
||||
"partQuestions": null
|
||||
},
|
||||
{
|
||||
"glassName": "DriverRearQuarterGlass",
|
||||
"parts": [
|
||||
{
|
||||
"partNumber": "DQ12204GTYNOEM",
|
||||
"description": "solar, driver side, encap",
|
||||
"color": "Green Tint",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12204YPYNOEM",
|
||||
"description": "solar, driver side, encap",
|
||||
"color": "Gray Tint Privacy",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12205GTYNOEM",
|
||||
"description": "solar, antenna, driver side, encap",
|
||||
"color": "Green Tint",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12205YPYNOEM",
|
||||
"description": "solar, antenna, driver side, encap",
|
||||
"color": "Gray Tint Privacy",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12207GTYN",
|
||||
"description": "solar, driver side, encap, chrome molding",
|
||||
"color": "Green Tint",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12207YPYNOEM",
|
||||
"description": "solar, driver side, encap, chrome molding",
|
||||
"color": "Gray Tint Privacy",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12208GTYNOEM",
|
||||
"description": "solar, antenna, driver side, encap, chrome molding",
|
||||
"color": "Green Tint",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
},
|
||||
{
|
||||
"partNumber": "DQ12208YPYNOEM",
|
||||
"description": "solar, antenna, driver side, encap, chrome molding",
|
||||
"color": "Gray Tint Privacy",
|
||||
"requiresRecalibration": false,
|
||||
"requiresCapabilityQuestions": false,
|
||||
"childParts": null
|
||||
}
|
||||
],
|
||||
"partQuestions": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -12,38 +12,72 @@ export default {
|
|||
name: "vehicle-parts",
|
||||
data() {
|
||||
return {
|
||||
Parts: [{
|
||||
glassName: 'Backglass',
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: 'Green Tint',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'heated glass, solar, 1 hole',
|
||||
PartNumber: 'DB12209GTYN'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Green Tint',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'heated glass, solar, 3 hole',
|
||||
PartNumber: 'DB12209XXXX'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Gray Tint Privacy',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'heated glass, solar, 1 hole',
|
||||
PartNumber: 'DB12209YPYN'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Gray Tint Privacy',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'heated glass, solar, 5 hole',
|
||||
PartNumber: 'DB12209YZZZ'
|
||||
}]
|
||||
},
|
||||
]
|
||||
}]
|
||||
Parts: [
|
||||
{
|
||||
glassName: 'Backglass',
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: 'Green Tint',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Backglass - heated glass, solar, 1 hole',
|
||||
PartNumber: 'test-backglass-green-tint-1-hole',
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Green Tint',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Backglass - heated glass, solar, 2 hole',
|
||||
PartNumber: 'test-backglass-green-tint-2-hole'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Gray Tint Privacy',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Backglass - heated glass, solar, 3 hole',
|
||||
PartNumber: 'test-backglass-gray-tint-privacy-3-hole'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Gray Tint Privacy',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Backglass - heated glass, solar, 4 hole',
|
||||
PartNumber: 'test-backglass-blue-tint-4-hole'
|
||||
}]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
glassName: 'Windshield',
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: 'Blue Tint',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Windshield - heated glass, solar, 1 hole',
|
||||
PartNumber: 'test-windshield-blue-tint-1-hole'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Blue Tint',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Windshield -heated glass, solar, 2 hole',
|
||||
PartNumber: 'test-blue-tint-windshield-2-hole'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Gray Tint Privacy',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Windshield -heated glass, solar, 3 hole',
|
||||
PartNumber: 'test-gray-tint-privacy-windshield-3-hole'
|
||||
}]
|
||||
},
|
||||
{
|
||||
ColorAnswerText: 'Gray Tint Privacy',
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: 'Windshield -heated glass, solar, 4 hole',
|
||||
PartNumber: 'test-brown-tint-windshield-4-hole'
|
||||
}]
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1,266 +1,268 @@
|
|||
<template>
|
||||
<div :class="'col' + colLength">
|
||||
<div
|
||||
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
|
||||
:class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
|
||||
>
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
@click="handleChange(value)"
|
||||
v-model="checkValue"
|
||||
@change="handleCheckChange()"
|
||||
/>
|
||||
<label
|
||||
:for="buttonID"
|
||||
class="d-flex w-100 align-items-center px-2 h-100"
|
||||
:class="getLabelClasses" tabindex="-1"
|
||||
>
|
||||
<img
|
||||
:id="buttonImageId"
|
||||
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
|
||||
:src="buttonImage"
|
||||
:alt="altText"
|
||||
/>
|
||||
<p
|
||||
v-if="!isWide"
|
||||
class="small order-3"
|
||||
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
|
||||
>
|
||||
{{buttonLabel}}
|
||||
</p>
|
||||
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
|
||||
{{buttonLabelSubCopy}}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
<div :class="'col' + colLength">
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" @click="handleChange(value)" v-model="checkValue" @change="handleCheckChange()" />
|
||||
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
|
||||
<img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
|
||||
<p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
|
||||
{{buttonLabel}}
|
||||
</p>
|
||||
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
|
||||
{{buttonLabelSubCopy}}
|
||||
</p>
|
||||
<div v-if="isWide" class="order-2">
|
||||
<p class="m-0 small">{{ buttonLabel }}</p>
|
||||
<p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
import {
|
||||
useField
|
||||
} from "vee-validate";
|
||||
|
||||
export default {
|
||||
name: "listCard",
|
||||
props: {
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isWide: Boolean,
|
||||
buttonImage: String, //Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String, //Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
|
||||
buttonID: String, //Required: Unique
|
||||
groupName: String, //Rquired: Unique
|
||||
buttonLabelSubCopy: String, //Optional: sub text
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
default: "",
|
||||
name: "listCard",
|
||||
props: {
|
||||
isMultiSelect: Boolean, //Defines use as checkbox
|
||||
isWide: Boolean,
|
||||
buttonImage: String, //Required: File name of image
|
||||
buttonImageId: String,
|
||||
buttonLabel: String, //Required: Label text
|
||||
isRequired: Boolean, //Required: is aria-required required or not?
|
||||
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
|
||||
buttonID: String, //Required: Unique
|
||||
groupName: String, //Rquired: Unique
|
||||
buttonLabelSubCopy: String, //Optional: sub text
|
||||
value: {
|
||||
// Field initial value
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
colLength: String,
|
||||
validationRules: String,
|
||||
selectedButtonIDs: [Array, String],
|
||||
hasError: Boolean,
|
||||
},
|
||||
colLength: String,
|
||||
validationRules: String,
|
||||
selectedButtonIDs: [Array, String],
|
||||
hasError: Boolean,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
checkValue: Boolean,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.selectedButtonIDs){
|
||||
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
let classes = "flex-row py-r ps-3 pe-8";
|
||||
if (this.buttonLabelSubCopy) {
|
||||
classes += " checkboxTop";
|
||||
data() {
|
||||
return {
|
||||
checkValue: Boolean,
|
||||
}
|
||||
return classes;
|
||||
} else {
|
||||
return "flex-column pt-4 pb-2";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange(newValue, oldValue){
|
||||
const isInitialization = typeof(oldValue) === 'function';
|
||||
if (!isInitialization) {
|
||||
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
created() {
|
||||
if (this.selectedButtonIDs) {
|
||||
this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
if (this.isWide) {
|
||||
let classes = "flex-row py-r ps-3 pe-8";
|
||||
if (this.buttonLabelSubCopy) {
|
||||
classes += " checkboxTop";
|
||||
}
|
||||
return classes;
|
||||
} else {
|
||||
return "flex-column pt-4 pb-2";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange() {
|
||||
this.$emit('isCheckedChanged', {
|
||||
isChecked: this.checkValue,
|
||||
buttonId: this.buttonID.toString()
|
||||
});
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
||||
const {
|
||||
value: inputValue,
|
||||
handleChange,
|
||||
errors,
|
||||
} = useField(props.groupName, props.validationRules,
|
||||
{
|
||||
type: inputType,
|
||||
checkedValue: props.value,
|
||||
});
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
};
|
||||
},
|
||||
const {
|
||||
value: inputValue,
|
||||
handleChange,
|
||||
errors,
|
||||
} = useField(props.groupName, props.validationRules, {
|
||||
type: inputType,
|
||||
checkedValue: props.value,
|
||||
});
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
&.invalid {
|
||||
//Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
img {
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
height: auto;
|
||||
width: 6.5rem;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $blue-300;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
+ label {
|
||||
display: block;
|
||||
position: relative;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
border: 1px solid $gray-500;
|
||||
|
||||
&.invalid {
|
||||
//Red border if invalid
|
||||
border: 1px solid $red;
|
||||
}
|
||||
&:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked + label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked + label {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 3rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
+ label.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
+ label.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
&:checked + label::before {
|
||||
background: $blue;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
+ label::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
+ label {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
width: 5.5rem;
|
||||
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
|
||||
height: auto;
|
||||
width: 6.5rem;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $blue-300;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0.5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
&:checked + label::after {
|
||||
content: "";
|
||||
margin: -0.25rem 0 0 0;
|
||||
left: 0.875rem;
|
||||
}
|
||||
+ label {
|
||||
min-height: 48px;
|
||||
color: $gray-600;
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
+label {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
text-align: left;
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
|
||||
&:focus+label {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&:checked+label {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&:checked+label {
|
||||
p {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
+label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 3rem 0 0 0;
|
||||
background: white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
+label.checkboxTop::before {
|
||||
margin: -1.25rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
+label.checkboxTop::after {
|
||||
margin: -1.5rem 0.5rem 0 0 !important;
|
||||
}
|
||||
|
||||
&:checked+label::before {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
&:checked+label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 3.2rem 0 0 0;
|
||||
border-left: 2px solid $white;
|
||||
border-bottom: 2px solid $white;
|
||||
height: 6px;
|
||||
width: 11px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
+label::before {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+label::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
+label {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+label::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0.5rem 0 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&:checked+label::after {
|
||||
content: "";
|
||||
margin: -0.25rem 0 0 0;
|
||||
left: 0.875rem;
|
||||
}
|
||||
|
||||
+label {
|
||||
min-height: 48px;
|
||||
color: $gray-600;
|
||||
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:v-model="checkValue"
|
||||
@change="handleCheckChanged()"
|
||||
@change="handleCheckChanged"
|
||||
/>
|
||||
<label class="d-flex align-items-start form-check-label" :for="buttonID">
|
||||
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
|
||||
|
|
@ -18,66 +18,70 @@
|
|||
screenReaderOnlyText
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs } from "vue";
|
||||
import { useField } from "vee-validate";
|
||||
import {
|
||||
toRefs
|
||||
} from "vue";
|
||||
import {
|
||||
useField
|
||||
} from "vee-validate";
|
||||
export default {
|
||||
name: "radio",
|
||||
props: {
|
||||
groupName: String,
|
||||
buttonLabel: String,
|
||||
buttonID: String,
|
||||
isRequired: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
name: "radio",
|
||||
props: {
|
||||
groupName: String,
|
||||
buttonLabel: String,
|
||||
buttonID: String,
|
||||
isRequired: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
screenReaderOnlyText: String,
|
||||
},
|
||||
screenReaderOnlyText: String,
|
||||
hasError: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkValue: Boolean,
|
||||
};
|
||||
},
|
||||
created(){
|
||||
if(this.selectedButtonIDs){
|
||||
this.checkValue = this.selectedButtonIDs[0];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(value) {
|
||||
this.handleChange(value);
|
||||
data() {
|
||||
return {
|
||||
checkValue: Boolean,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckChanged(newValue, oldValue) {
|
||||
const isInitialization = typeof oldValue === "function";
|
||||
|
||||
if (!isInitialization) {
|
||||
this.$emit("isCheckedChanged", {
|
||||
isChecked: newValue.target.checked,
|
||||
buttonId: this.buttonID.toString(),
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const {
|
||||
groupName,
|
||||
value
|
||||
} = toRefs(props);
|
||||
const {
|
||||
checked,
|
||||
handleChange,
|
||||
errorMessage
|
||||
} = useField(
|
||||
groupName,
|
||||
undefined, {
|
||||
type: "radio",
|
||||
checkedValue: value,
|
||||
}
|
||||
);
|
||||
return {
|
||||
checked,
|
||||
handleChange,
|
||||
errorMessage,
|
||||
};
|
||||
},
|
||||
handleCheckChange(newValue, oldValue){
|
||||
const isInitialization = typeof(oldValue) === 'function';
|
||||
if (!isInitialization) {
|
||||
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const { checked, handleChange, errorMessage } = useField(
|
||||
groupName,
|
||||
undefined,
|
||||
{
|
||||
type: "radio",
|
||||
checkedValue: value,
|
||||
}
|
||||
);
|
||||
return {
|
||||
checked,
|
||||
handleChange,
|
||||
errorMessage,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-check {
|
||||
.form-check-input {
|
||||
|
|
@ -100,4 +104,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in a new issue