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

Merge branch 'develop' into feature/digital/SSR-540

Browse source 
# Conflicts:
#	src/layouts/coverage-statement/coverage-statement.vue
This commit is contained in:
Katie Kroell 2023-07-06 16:19:08 -04:00
commit e7d15c2135
14 changed files with 277 additions and 318 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/digital-components/base-input-button/base-input-button.vue
View file

@ -121,9 +121,7 @@ export default {
return this.isMultiSelect ? "checkbox" : "radio"; return this.isMultiSelect ? "checkbox" : "radio";
}, },
buttonId() { buttonId() {
return `${this.groupName?.replace(" ", "-")}-${this.value return `${this.groupName}-${this.value}`.replaceAll(" ", "-");
?.toString()
?.replace(" ", "-")}`;
}, },
isValueSelectedOnClick() { isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad; return this.isMultiSelect || this.selectingInitiatesLoad;

2
src/digital-components/button-question/button-question.vue
View file

@ -31,7 +31,7 @@
<div <div
:class="getComponentWrapperClasses" :class="getComponentWrapperClasses"
v-for="answer in buttonsInfo" v-for="answer in buttonsInfo"
:key="answer.value ? answer.value : answer"> :key="answer.value ?? answer">
<component <component
:is="buttonTypeString" :is="buttonTypeString"
:buttonLabel="answer.buttonLabel" :buttonLabel="answer.buttonLabel"

2
src/digital-components/modal/modal.vue
View file

@ -23,7 +23,7 @@
@keypress.space="closeModal" @keypress.space="closeModal"
aria-label="Close"></button> aria-label="Close"></button>
</div> </div>
<div class="modal-body ps-5 pe-5 pb-4 pt-0"> <div class="modal-body ps-5 pe-5 pb-5 pt-0">
<slot></slot> <slot></slot>
</div> </div>
<div class="modal-footer px-5 py-4"> <div class="modal-footer px-5 py-4">

5
src/digital-components/textbox-question/textbox-question.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''"> <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label <label
v-if="displayQuestionText"
:for="inputId" :for="inputId"
:aria-label="questionText" :aria-label="questionText"
class="form-label" class="form-label"
@ -66,6 +67,10 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
displayQuestionText: {
type: Boolean,
default: true,
},
modelValue: String, modelValue: String,
inputId: { inputId: {
type: String, type: String,

2
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -29,7 +29,7 @@
:validationRules="validationRules" /> :validationRules="validationRules" />
</div> </div>
<siteFooter <siteFooter
class="mt-3" class="mt-5"
ref="siteFooter" ref="siteFooter"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!isMetaValid" :isForwardActionDisabled="!isMetaValid"

85
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -32,6 +32,7 @@
</div> </div>
<siteFooter <siteFooter
class="mt-5"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack" @backClicked="navigateBack"
@ -43,7 +44,7 @@
</div> </div>
</div> </div>
</div> </div>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" /> <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
</Form> </Form>
</template> </template>
<script> <script>
@ -81,14 +82,6 @@ export default {
recalModal, recalModal,
steeringText steeringText
}, },
data () {
return {
isITAC: false,
deductible: "",
policyVehicles: useMainStore().pageData(issPageValues.POLICY_VEHICLES),
isVerified: useMainStore().order.payment.insuranceCoverage.isVerified,
}
},
mounted() { mounted() {
setupModalLinks(this); setupModalLinks(this);
this.getPriceInfo(); this.getPriceInfo();
@ -239,61 +232,23 @@ export default {
}); });
}, },
methods: { methods: {
processIfStatements, arePagePrerequisitesValid() {
getSubheaderTextFromCms(cmsWidgetName) { if (useMainStore().vehicle.vin) {
const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText'); return true;
return this.processIfStatements(subHeader, "custom", this.getCustomValueFromString); }
}, return false;
getBodyTextFromCms(cmsWidgetName) { },
const bodyText = this.getCmsContent(cmsWidgetName, "BodyText");
return this.processIfStatements(bodyText, "custom", this.getCustomValueFromString); async forwardButtonAction() {
}, return this.navigateForward();
getSecondaryTextFromCms(cmsWidgetName) { },
const secondaryText = this.getCmsContent(cmsWidgetName, "SecondaryText");
return this.processIfStatements(secondaryText, "custom", this.getCustomValueFromString);
},
arePagePrerequisitesValid() {
if (useMainStore().vehicle.vin) {
return true;
}
return false;
},
getCustomValueFromString(str) {
switch (str) {
case 'coverageUnverified':
return this.coverageUnverified;
case 'verifiedDeductible':
return this.verifiedDeductible;
case 'verifiedITAC':
return this.verifiedITAC;
case 'verifiedNoComp':
return this.verifiedNoComp;
case 'ADASReplace':
return this.ADASReplace;
case 'nonADASReplace':
return this.nonADASReplace;
case 'nonADASRepair':
return this.nonADASRepair;
default:
return null;
}
},
getPriceInfo() {
const servicePrice = store.getPriceOrderItems();
if (servicePrice > this.vehicleDeductible) { navigateForward() {
return this.isITAC = true; this.$router.navigate(
} this.navigationScenarios.CLICKED_FORWARD,
}, this.$route
async forwardButtonAction() { );
return this.navigateForward(); },
},
navigateForward() {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
}, },
}; };
</script> </script>
@ -315,10 +270,10 @@ ol {
color: $black; color: $black;
} }
p strong { p strong {
color: $black; color: $black;
font-weight: 500; font-weight: 500;
} }
p.small{ p.small{
margin-bottom:0; margin-bottom:0;
} }
</style> </style>

36
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -193,25 +193,25 @@ export default {
const vehicle = await this.lookupVehicleByVin(value); const vehicle = await this.lookupVehicleByVin(value);
// handle error in case vehicle info doesn't come back for selected VIN // handle error in case vehicle info doesn't come back for selected VIN
if (vehicle?.error ?? true) { if (vehicle?.error === true) {
this.mainStore.resetVehicleState(); this.mainStore.resetVehicleState();
this.displayGeneric = true; this.displayGeneric = true;
return; return;
} }
if (vehicle) {
// save selected vehicle to the store // save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data); this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = true; this.displayGeneric = true;
// get the style(s) associated with the selected YMM // get the style(s) associated with the selected YMM
const styleOptions = await this.mainStore.getVehicleStyles( const styleOptions = await this.mainStore.getVehicleStyles(
vehicle.data.year, vehicle.data.year,
vehicle.data.make, vehicle.data.make,
vehicle.data.model vehicle.data.model,
) );
// if there is more than 1 style for the selected vehicle, display generic/blurred image
// if there is more than 1 style for the selected vehicle, display generic/blurred image this.displayGeneric = styleOptions?.data?.length > 1;
this.displayGeneric = styleOptions?.data?.length > 1; }
} }
} }
}, },

26
src/layouts/service-location/service-location.vue
View file

@ -31,22 +31,14 @@
validationRules="selection-required" validationRules="selection-required"
class="service-location-button-question mb-1"/> class="service-location-button-question mb-1"/>
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2 g-0"> <siteFooter
<div class="row"> class="mt-5"
<div class="col px-0"> cmsWidgetName="SiteFooterWidget"
<div class="select-car-form rounded"> :isForwardActionDisabled="!meta.valid"
<siteFooter @backClicked="backButtonAction"
class="mt-4" @forwardClicked="forwardButtonAction"
cmsWidgetName="SiteFooterWidget" ref="siteFooter"
:isForwardActionDisabled="!meta.valid" />
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -81,7 +73,7 @@ import serviceZipModalQuestion from '@/layouts/service-location/service-zip-moda
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED)); defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
export default { export default {
name: "service-location", name: "service-location",
mixins: [baseFormMixin, baseMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

1
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -12,6 +12,7 @@
</div> </div>
<modal <modal
:ref="modalName" :ref="modalName"
:headerText="modalHeaderText"
:onModalOpenedCallback="onModalOpened" :onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed" :onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText" :footerButtonText="modalFooterText"

299
src/layouts/service-packages/service-packages.vue
View file

@ -1,30 +1,27 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition sub-container make-tall"> <div class="fade-on-route-transition sub-container make-tall">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
justification="left" justification="left"
issContainingPage="service-packages" issContainingPage="service-packages"
/> />
<div class="mx-5"> <div class="mx-5">
<servicePackageQuestion ref="servicePackage" <servicePackageQuestion ref="servicePackage"
cmsWidgetName="ServicePackage" cmsWidgetName="ServicePackage"
groupName="ServicePackageQuestion" groupName="ServicePackageQuestion"
:availableLineItems="availableLineItems" :availableLineItems="availableLineItems"
@vapsItemsSelected="vapsItemsSelectedAction" @vapsItemsSelected="vapsItemsSelectedAction"
v-on:link-event="openModalAction" v-on:link-event="openModalAction"
validationRules="option-required" validationRules="option-required"
isRequired isRequired
/> />
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
<siteFooter cmsWidgetName="SiteFooterWidget" <siteFooter cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div> </div>
</div> </div>
</div> </div>
@ -33,155 +30,155 @@
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" /> <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" /> <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" /> <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
</Form> </Form>
</template> </template>
<script> <script>
// Components // Components
import baseFormMixin from '@/mixins/base-form-mixin'; import baseFormMixin from '@/mixins/base-form-mixin';
import siteHeader from '@/iss-components/site-header/site-header'; import siteHeader from '@/iss-components/site-header/site-header';
import siteFooter from '@/iss-components/site-footer/site-footer'; import siteFooter from '@/iss-components/site-footer/site-footer';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header'; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import servicePackageQuestion from './service-package-question/service-package-question'; import servicePackageQuestion from './service-package-question/service-package-question';
import textBlock from '@/digital-components/text-block/text-block'; import textBlock from '@/digital-components/text-block/text-block';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal'; import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue'; import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import { settleAllPromises } from '@/helpers/layout-helper'; import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from "@/store"; import { useMainStore } from "@/store";
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { required } from '@/helpers/validation-rules'; import { required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages'; import { errorMessages } from '@/constants/error-messages';
import { Form, defineRule } from 'vee-validate'; import { Form, defineRule } from 'vee-validate';
import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper' import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
defineRule('option-required', required(errorMessages.OPTION_REQUIRED)); defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
const store = useMainStore(); const store = useMainStore();
export default { export default {
name: 'service-packages', name: 'service-packages',
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const wipersPromise = await store.getWipers(); const wipersPromise = await store.getWipers();
const rainDefensePromise = await store.getRainDefense(); const rainDefensePromise = await store.getRainDefense();
const supportingItemsPromise = await store.getSupportingItems(); const supportingItemsPromise = await store.getSupportingItems();
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
{ {
resultKey: 'wipers', resultKey: 'wipers',
promise: wipersPromise, promise: wipersPromise,
}, },
{ {
resultKey: 'rainDefense', resultKey: 'rainDefense',
promise: rainDefensePromise, promise: rainDefensePromise,
}, },
{ {
resultKey: 'supportingItems', resultKey: 'supportingItems',
promise: supportingItemsPromise, promise: supportingItemsPromise,
}, },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = store.order.lineItems.glassParts const clonedGlassParts = store.order.lineItems.glassParts
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts)) ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
: []; : [];
const availableLineItems = [ const availableLineItems = [
resultMap.rainDefense, resultMap.rainDefense,
...resultMap.supportingItems, ...resultMap.supportingItems,
...resultMap.wipers, ...resultMap.wipers,
...clonedGlassParts, ...clonedGlassParts,
]; ];
const pricingResults = await store.getPriceOrderItems(availableLineItems); const pricingResults = await store.getPriceOrderItems(availableLineItems);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.pricedGlassParts = clonedGlassParts; vm.pricedGlassParts = clonedGlassParts;
vm.supportingItems = resultMap.supportingItems; vm.supportingItems = resultMap.supportingItems;
vm.availableLineItems = pricingResults; vm.availableLineItems = pricingResults;
}); });
},
data() {
return {
selectedVaps: [],
availableLineItems: [],
supportingItems: [],
pricedGlassParts: []
};
},
computed: {
PriceDisclaimerText() {
return this.getCmsContent("PriceDisclaimerWidget", "Text");
}, },
data() { },
return { methods: {
selectedVaps: [], openModalAction(modalName) {
availableLineItems: [], this.$refs[modalName.args].openModal();
supportingItems: [],
pricedGlassParts: []
};
}, },
computed: { arePagePrerequisitesValid() {
PriceDisclaimerText() { return (
return this.getCmsContent("PriceDisclaimerWidget", "Text"); store.order.serviceLocation.zipCode &&
}, store.order.serviceLocation.zipCodeCtu &&
}, (store.order.damage.isRepair ||
methods: { (store.order.lineItems?.glassParts != null &&
openModalAction(modalName) { store.order.lineItems.glassParts.length > 0)) &&
this.$refs[modalName.args].openModal(); store.order.referralNumber?.length !== 6
}, );
arePagePrerequisitesValid() { },
return ( vapsItemsSelectedAction(vapsItemsSelected) {
store.order.serviceLocation.zipCode && this.selectedVaps = vapsItemsSelected;
store.order.serviceLocation.zipCodeCtu && },
(store.order.damage.isRepair || backButtonAction() {
(store.order.lineItems?.glassParts != null && this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
store.order.lineItems.glassParts.length > 0)) && },
store.order.referralNumber?.length !== 6 forwardButtonAction() {
); const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
}, if (!allGlassPartsAndItemsHavePrices(parts)) {
vapsItemsSelectedAction(vapsItemsSelected) { console.error('One or more items have no price assigned!');
this.selectedVaps = vapsItemsSelected; }
}, if (this.pricedGlassParts.length > 0) {
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); store.saveGlassParts(this.pricedGlassParts);
}, }
forwardButtonAction() { store.saveSupportingItems(this.supportingItems);
const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps }; store.saveVaps(this.selectedVaps);
if (!allGlassPartsAndItemsHavePrices(parts)) {
console.error('One or more items have no price assigned!'); this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
} }
if (this.pricedGlassParts.length > 0) { },
components: {
store.saveGlassParts(this.pricedGlassParts); siteHeader,
} siteFooter,
store.saveSupportingItems(this.supportingItems); siteSubHeader,
store.saveVaps(this.selectedVaps); Form, /* eslint-disable-line */
textBlock,
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route); servicePackageQuestion,
loadingModal,
contentGroupModal
} }
}, };
components: { </script>
siteHeader, <style lang="scss">
siteFooter, .subheader-secondary {
siteSubHeader, margin-top: .5rem;
Form, /* eslint-disable-line */ padding: 0px;
textBlock,
servicePackageQuestion,
loadingModal,
contentGroupModal
} }
};
</script>
<style lang="scss">
.subheader-secondary {
margin-top: .5rem;
padding: 0px;
}
.disclaimer { .disclaimer {
margin-top: 1.3rem; margin: 1.3rem 0 1.5rem 0;
a { a {
color: #4D5151; color: #4D5151;
font-weight: 400; font-weight: 400;
}
} }
} </style>
</style>

2
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -11,7 +11,7 @@
<VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" /> <VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
<SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" /> <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
<VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" /> <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-3"/> <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-5"/>
</div> </div>
</div> </div>
</div> </div>

8
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -12,7 +12,7 @@
:isWide="true" :isWide="true"
altText="" altText=""
isRequired isRequired
:groupName="`${glassLocation}-${glassName}`" :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)"
:validationRules="tintValidationRules"> :validationRules="tintValidationRules">
<div class="row my-2" aria-live="polite"> <div class="row my-2" aria-live="polite">
<div class="col"> <div class="col">
@ -27,7 +27,7 @@
:loaderEnabled="false" :loaderEnabled="false"
isRequired isRequired
isSmallQuestionText isSmallQuestionText
:groupName="`${glassLocation}-${glassName}-${selectedTint}`" :groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)"
:validationRules="partValidationRules" /> :validationRules="partValidationRules" />
</div> </div>
</div> </div>
@ -210,6 +210,10 @@ export default {
} }
}); });
}, },
replaceAllSpaceWithDash(str) {
return String(str).replaceAll(" ", "-");
},
}, },
watch: { watch: {
selectedTint() { selectedTint() {

1
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -38,6 +38,7 @@
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" /> :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div> </div>
<siteFooter <siteFooter
class="mt-5"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
ref="siteFooter" ref="siteFooter"
:isForwardActionDisabled="isForwardActionDisabled" :isForwardActionDisabled="isForwardActionDisabled"

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

@ -76,69 +76,75 @@ export default {
value: inputValue, value: inputValue,
handleChange, handleChange,
errors, errors,
resetField
} = useField(props.groupName, props.validationRules, } = useField(props.groupName, props.validationRules,
{ {
type: inputType, type: inputType
checkedValue: props.value, });
});
return {
handleChange,
errors,
};
},
};
</script>
<style lang="scss" scoped> return {
.form-check { handleChange,
position: relative; errors,
resetField
};
},
unmounted(){
this.resetField();
}
};
</script>
label { <style lang="scss" scoped>
&:hover {
cursor: pointer;
}
}
.form-check-input { .form-check {
border: 1px solid $gray-500; position: relative;
border-radius: 50%;
margin-right: 0.5rem;
&:checked {
background-color: $white;
background-size: 71%;
background-position: center;
border: 1px solid $blue;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+ label {
p {
font-weight: 500;
font-size: .875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
}
&, & + label {
margin-top: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
label {
&:hover { &:hover {
.form-check-input { cursor: pointer;
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
font-weight: 400;
font-size: .875rem;
color: $gray-600;
} }
} }
</style>
.form-check-input {
border: 1px solid $gray-500;
border-radius: 50%;
margin-right: 0.5rem;
&:checked {
background-color: $white;
background-size: 71%;
background-position: center;
border: 1px solid $blue;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+ label {
p {
font-weight: 500;
font-size: .875rem;
color: $black;
}
}
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
}
&, & + label {
margin-top: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
font-weight: 400;
font-size: .875rem;
color: $gray-600;
}
}
</style>