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

WIP CSR-186 horizontal radio button updates.

Browse source
This commit is contained in:
bmauger 2021-12-02 16:19:40 -05:00
parent 1d7c6a29d8
commit 78bd99af56
2 changed files with 94 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/layouts/component-test/component-test.vue
View file

@ -241,6 +241,8 @@
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="1"
/>
<radioHorizontal
groupName="demo-4"
@ -251,6 +253,20 @@
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="2"
/>
<radioHorizontal
groupName="demo-4"
ariaLabelBy="vehicle-model"
radioID="horizontal-2"
radioLabelSubCopy=""
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="3"
/>
</div>
</div>

139
src/ux-components/radio-horizontal/radio-horizontal.vue
View file

@ -1,29 +1,31 @@
<template>
<div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
<input type="radio" :id="radioID" :name="groupName" :value="radioID">
<label role="radio" tabindex="0" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
<label role="radio" tabindex="0" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastItem" @click='displayComponent'>
<span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
<span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
</label>
<p class="small">{{errorMessage}}</p>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "radioHorizontal",
props: [
"groupName", /* Required, unique for each radio button GROUP */
"radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
"radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
"textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
"errorMessage", /* Optional */
"loaderColor", /* Optional */
"loaderPosition", /* Optional */
"sizeInRem" /* Optional */
],
props: {
groupName: String, /* Required, unique for each radio button GROUP */
radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
errorMessage: String, /* Optional */
loaderColor: String, /* Optional */
loaderPosition: String, /* Optional */
sizeInRem: String, /* Optional */
totalInGroup: Number,
positionInGroup: Number
},
data() {
return {
isError: false,
@ -38,53 +40,68 @@ export default {
components: {
loader,
},
};
</script>
<style lang="scss">
.radio-horizontal {
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
width: 100%;
&:hover {
box-shadow: 0 0 0 4px $blue-100;
cursor: pointer;
}
+ p {
display: none;
}
&.error {
border: 1px solid $danger;
+ p {
display: flex;
color: $danger;
}
}
&:first-of-type {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
computed: {
isFirstOrLastItem() {
let className = '';
if(this.positionInGroup == this.totalInGroup) {
className = 'last-item'
} else if(this.positionInGroup == 1) {
className = 'first-item'
}
console.log(typeof this.positionInGroup);
return className;
}
}
};
</script>
<style lang="scss">
.radio-horizontal {
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
position: relative;
background: $white;
transition: all 150ms linear;
border: 1px solid $gray-500;
width: 100%;
&:hover {
box-shadow: 0 0 0 4px $blue-100;
cursor: pointer;
}
+ p {
display: none;
}
&.error {
border: 1px solid $danger;
+ p {
display: flex;
color: $danger;
}
}
&.first-item {
border-bottom-left-radius: .5rem;
border-top-left-radius: .5rem;
}
&.last-item {
border-bottom-right-radius: .5rem;
border-top-right-radius: .5rem;
}
}
}
</style>