Merge pull request #56 from Safelite/CSR-119-loader-overlay
Csr 119 loader overlay
This commit is contained in:
bmauger
GitHub
commit
2e381027f7
14 changed files with 433 additions and 134 deletions
3
src/assets/img/icons/spinner.svg
Normal file
3
src/assets/img/icons/spinner.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xml:space="preserve">
|
||||
<path d="M24.01 48c-2.93 0-5.92-.52-8.85-1.58-6.25-2.25-11.33-7.33-13.58-13.57C-1.25 25-.25 16.76 4.34 10.22A24.05 24.05 0 0 1 24 0v2.26c-7.08 0-13.74 3.46-17.81 9.27-4.16 5.91-5.07 13.4-2.49 20.55 2.03 5.62 6.6 10.19 12.22 12.22 7.14 2.58 14.64 1.67 20.56-2.49A21.78 21.78 0 0 0 45.74 24H48c0 7.81-3.82 15.16-10.22 19.66A23.846 23.846 0 0 1 24.01 48z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 446 B |
|
|
@ -1,112 +1,250 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
|
||||
<radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
|
||||
<radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
|
||||
<radioCard
|
||||
radioLabel="Windshield"
|
||||
radioImage="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
groupName="damageKey"
|
||||
radioID="windshield"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Side Window"
|
||||
radioImage="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
groupName="damageKey"
|
||||
radioID="sidewindow"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Back Glass"
|
||||
radioImage="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
groupName="damageKey"
|
||||
radioID="backglass"
|
||||
/>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary buttonText="Primary" />
|
||||
</div>
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary
|
||||
buttonText="Primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonSecondary buttonText="Secondary" />
|
||||
</div>
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonSecondary
|
||||
buttonText="Secondary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<listButton buttonText="List Button" errorText="Test error message" />
|
||||
</div>
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<listButton
|
||||
buttonText="List Button"
|
||||
errorText="Test error message"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
||||
<div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="visually-hidden" id="select-year-radio-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" />
|
||||
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" />
|
||||
<radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" />
|
||||
</div>
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
|
||||
<div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
|
||||
<radioList
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2021"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
/>
|
||||
<radioList
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2020"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
/>
|
||||
<radioList
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2019"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<a href="#">Text Link</a>
|
||||
</div>
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<a href="#">Text Link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<p>This is default body copy font size/weight</p>
|
||||
<p class="small">
|
||||
This is small body copy using <code>.small</code> class
|
||||
</p>
|
||||
<p>
|
||||
<small>This is also small using <code><small></code> tag</small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>This is default body copy font size/weight</p>
|
||||
<p class="small">This is small body copy using <code>.small</code> class</p>
|
||||
<p><small>This is also small using <code><small></code> tag</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Headings</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h1>h1 Heading</h1>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h1>h1 Heading</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h2>h2 Heading</h2>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2>h2 Heading</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h3>h3 Heading</h3>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>h3 Heading</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h4>h4 Heading</h4>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4>h4 Heading</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h5>h5 Heading</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5>h5 Heading</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h6>h6 Heading</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6>h6 Heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<div class="select-car">
|
||||
<div class="select-car-form">
|
||||
<radioQuestion questionText="What year is your vehicle?" :answers="this.years" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Dismissible Alert"
|
||||
alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
|
||||
v-bind:isDismissible = "true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="NON-Dismissible Alert"
|
||||
alertCopy="This is an example of a NON-DISMISSIBLE alert."
|
||||
v-bind:isDismissible = "false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-warning"
|
||||
alertHeadline="Warning Alert"
|
||||
alertCopy="This is an example of a WARNING alert."
|
||||
v-bind:isDismissible = "false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-info"
|
||||
alertHeadline="Info Alert"
|
||||
alertCopy="This is an example of a INFO alert."
|
||||
v-bind:isDismissible = "false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="Danger Alert"
|
||||
alertCopy="This is an example of a DANGER alert."
|
||||
v-bind:isDismissible = "false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="No Body Copy Alert"
|
||||
alertCopy=""
|
||||
v-bind:isDismissible = "false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonPrimary from "@/ux-components/button-primary/button-primary";
|
||||
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
|
||||
import radioCard from "@/ux-components/radio-card/radio-card";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import radioList from "@/ux-components/radio-list/radio-list";
|
||||
export default {
|
||||
import buttonPrimary from "@/ux-components/button-primary/button-primary";
|
||||
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
|
||||
import radioCard from "@/ux-components/radio-card/radio-card";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import radioList from "@/ux-components/radio-list/radio-list";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
buttonPrimary,
|
||||
buttonSecondary,
|
||||
radioCard,
|
||||
listButton,
|
||||
radioList,
|
||||
buttonPrimary,
|
||||
buttonSecondary,
|
||||
radioCard,
|
||||
listButton,
|
||||
radioList,
|
||||
alert
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: [2023, 2022, 2021, 2020],
|
||||
};
|
||||
},
|
||||
};
|
||||
return {
|
||||
years: [2023, 2022, 2021, 2020],
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
28
src/layouts/loader-demo/loader-demo.vue
Normal file
28
src/layouts/loader-demo/loader-demo.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Loader</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<loader
|
||||
sizeInRem="10"
|
||||
loaderColor="blue"
|
||||
loaderPosition="center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
loader
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
|
|||
import { storeActions } from "@/constants/store-actions.js";
|
||||
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
||||
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
||||
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
|
||||
import NotFound from "@/layouts/not-found/not-found.vue";
|
||||
import store from "@/store";
|
||||
|
||||
|
|
@ -16,6 +17,11 @@ const routes = [
|
|||
name: "ComponentTest",
|
||||
component: ComponentTest,
|
||||
},
|
||||
{
|
||||
path: "/loader-demo", // This is a temporary route for testing.
|
||||
name: "LoaderDemo",
|
||||
component: LoaderDemo,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
beforeEnter(to, from, next) {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
label {
|
||||
position: relative;
|
||||
background: $white;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
|
|
@ -37,23 +37,8 @@
|
|||
color: $danger;
|
||||
}
|
||||
}
|
||||
&.button-loader {
|
||||
padding: 0 40px 0 12px;
|
||||
&:after {
|
||||
content: url(../../assets/img/icons/button-spinner-blue.svg);
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 12px;
|
||||
animation: rotation 1s infinite linear;
|
||||
@keyframes rotation {
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Add spinner. Specify width and height
|
||||
@include loader();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,3 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
//Custom Mixins
|
||||
|
||||
//Blue gradient background mixin
|
||||
@mixin blue-gradient {
|
||||
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
|
||||
}
|
||||
|
|
|
|||
69
src/styles/mixins/customMixins.scss
Normal file
69
src/styles/mixins/customMixins.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
//Custom Mixins
|
||||
|
||||
//Blue gradient background mixin
|
||||
@mixin blue-gradient {
|
||||
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
|
||||
}
|
||||
|
||||
//Spinner
|
||||
//Choose color and position
|
||||
@mixin loader() {
|
||||
.loader {
|
||||
display: flex;
|
||||
//Open an overlay to prevent page interaction
|
||||
&:before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
cursor: default;
|
||||
}
|
||||
//Spinner basics
|
||||
&:after {
|
||||
content: '';
|
||||
mask: url(../../assets/img/icons/spinner.svg);
|
||||
mask-size: cover;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: rotation 1s infinite linear;
|
||||
@keyframes rotation {
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
//Spinner position
|
||||
&.center {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&.right {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
&.left {
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
//Spinner color
|
||||
&:after { //Default spinner color (blue) if no other color is specified from the options below
|
||||
background-color: $blue;
|
||||
}
|
||||
&.red:after {
|
||||
background-color: $red;
|
||||
}
|
||||
&.green:after {
|
||||
background-color: $green;
|
||||
}
|
||||
&.white:after {
|
||||
background-color: $white;
|
||||
}
|
||||
&.black:after {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,6 +51,8 @@ export default {
|
|||
}
|
||||
svg {
|
||||
fill: $blue-700;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
&.alert-danger {
|
||||
|
|
@ -59,6 +61,8 @@ export default {
|
|||
}
|
||||
svg {
|
||||
fill: $red-700;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
&.alert-warning {
|
||||
|
|
@ -67,6 +71,8 @@ export default {
|
|||
}
|
||||
svg {
|
||||
fill: $yellow-700;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
&.alert-success {
|
||||
|
|
@ -75,6 +81,8 @@ export default {
|
|||
}
|
||||
svg {
|
||||
fill: $green-700;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,48 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column w-100">
|
||||
<button
|
||||
class="btn list-button d-flex align-items-center"
|
||||
v-on:click="showLoader()"
|
||||
v-bind:class="[
|
||||
this.isLoading ? 'button-loader' : 'not-loading',
|
||||
this.isError ? 'error' : '',
|
||||
]"
|
||||
class="btn list-button d-flex align-items-center justify-content-between"
|
||||
@click='displayComponent'
|
||||
v-bind:class="[
|
||||
this.isLoading ? 'button-loader' : 'not-loading',
|
||||
this.isError ? 'error' : '',
|
||||
]"
|
||||
>
|
||||
{{ this.buttonText }}
|
||||
</button>
|
||||
<label class="small mt-1">{{ this.errorText }}</label>
|
||||
</div>
|
||||
{{ this.buttonText }}
|
||||
<loader
|
||||
v-if="display"
|
||||
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</button>
|
||||
<label class="small mt-1">{{ this.errorText }}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
buttonText: String,
|
||||
errorText: String,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
display: false,
|
||||
isError: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showLoader() {
|
||||
this.isLoading = true;
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
1
src/ux-components/loader/loader.spec.js
Normal file
1
src/ux-components/loader/loader.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
31
src/ux-components/loader/loader.vue
Normal file
31
src/ux-components/loader/loader.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="loader"
|
||||
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loader",
|
||||
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
|
||||
props: {
|
||||
sizeInRem: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
/* Color options: red, green, blue, white, black */
|
||||
loaderColor: {
|
||||
type: String
|
||||
},
|
||||
/* Position options: center, right, left (OPTIONAL) */
|
||||
loaderPosition: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@include loader();
|
||||
</style>
|
||||
|
|
@ -1,28 +1,51 @@
|
|||
<template>
|
||||
<div class="radiogroup radio-list-button d-flex flex-column w-100">
|
||||
<input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID" />
|
||||
<label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2" v-on:click="showLoader()" v-bind:class="[
|
||||
this.isLoading ? 'button-loader' : 'not-loading',
|
||||
this.isError ? 'error' : '',
|
||||
]">{{ radioID }}</label>
|
||||
<p class="small">{{ errorMessage }}</p>
|
||||
<div class="radiogroup radio-list-button d-flex flex-column w-100">
|
||||
<input type="radio"
|
||||
v-bind:id="radioID"
|
||||
v-bind:name="groupName"
|
||||
v-bind:value="radioID">
|
||||
<label role="radio" tabindex="0" aria-checked="false"
|
||||
v-bind:for="radioID"
|
||||
class="mb-2 d-flex align-items-center justify-content-between p-2"
|
||||
@click='displayComponent'
|
||||
>{{radioID}}
|
||||
<loader
|
||||
v-if="display"
|
||||
v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</label>
|
||||
<p class="small">{{errorMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "radioList",
|
||||
props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"],
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showLoader() {
|
||||
this.isLoading = true;
|
||||
},
|
||||
name: "radioList",
|
||||
props: [
|
||||
"groupName",
|
||||
"ariaLabelBy",
|
||||
"radioID",
|
||||
"errorMessage",
|
||||
"loaderColor",
|
||||
"loaderPosition",
|
||||
"sizeInRem"
|
||||
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
isError: false,
|
||||
display: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ module.exports = {
|
|||
@import "@/styles/ux-variables.scss";
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
@import "./node_modules/bootstrap/scss/mixins";
|
||||
@import "@/styles/mixins/customMixins";
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "@/styles/common-styles.scss";
|
||||
@import "@/styles/common-button-styles.scss";
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ module.exports = {
|
|||
@import "@/styles/ux-variables.scss";
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
@import "./node_modules/bootstrap/scss/mixins";
|
||||
@import "@/styles/mixins/customMixins";
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "@/styles/common-styles.scss";
|
||||
@import "@/styles/common-button-styles.scss";
|
||||
|
|
|
|||
Loading…
Reference in a new issue