WIP loader component.
This commit is contained in:
bmauger
parent
863d60ee89
commit
ed818f178d
8 changed files with 91 additions and 36 deletions
29
package-lock.json
generated
29
package-lock.json
generated
|
|
@ -14,7 +14,6 @@
|
|||
"canvas-confetti": "^1.4.0",
|
||||
"core-js": "^3.6.5",
|
||||
"http-status-codes": "^2.1.4",
|
||||
"jest-junit": "^13.0.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.11",
|
||||
"vuex": "^4.0.2",
|
||||
|
|
@ -32,6 +31,7 @@
|
|||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"jest-junit": "^13.0.0",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
|
|
@ -10962,6 +10962,7 @@
|
|||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
|
||||
"integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mkdirp": "^1.0.4",
|
||||
"strip-ansi": "^6.0.1",
|
||||
|
|
@ -10976,6 +10977,7 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
|
|
@ -10984,6 +10986,7 @@
|
|||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"mkdirp": "bin/cmd.js"
|
||||
},
|
||||
|
|
@ -10995,6 +10998,7 @@
|
|||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
|
|
@ -11006,6 +11010,7 @@
|
|||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
|
|
@ -11743,9 +11748,6 @@
|
|||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
|
|
@ -18003,7 +18005,6 @@
|
|||
"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^3.4.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"neo-async": "^2.5.0"
|
||||
},
|
||||
|
|
@ -18067,7 +18068,6 @@
|
|||
"anymatch": "^2.0.0",
|
||||
"async-each": "^1.0.1",
|
||||
"braces": "^2.3.2",
|
||||
"fsevents": "^1.2.7",
|
||||
"glob-parent": "^3.1.0",
|
||||
"inherits": "^2.0.3",
|
||||
"is-binary-path": "^1.0.0",
|
||||
|
|
@ -18982,7 +18982,8 @@
|
|||
"node_modules/xml": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
|
||||
"integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
|
||||
"integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/xml-name-validator": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -27872,6 +27873,7 @@
|
|||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
|
||||
"integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mkdirp": "^1.0.4",
|
||||
"strip-ansi": "^6.0.1",
|
||||
|
|
@ -27882,17 +27884,20 @@
|
|||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
}
|
||||
|
|
@ -27900,7 +27905,8 @@
|
|||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -34454,7 +34460,8 @@
|
|||
"xml": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
|
||||
"integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
|
||||
"integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
|
||||
"dev": true
|
||||
},
|
||||
"xml-name-validator": {
|
||||
"version": "3.0.0",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
|
||||
<path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z"/>
|
||||
<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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 222 B After Width: | Height: | Size: 446 B |
|
|
@ -28,6 +28,19 @@
|
|||
radioID="backglass"
|
||||
/>
|
||||
</div>
|
||||
<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="2"
|
||||
loaderColor="blue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
|
||||
|
|
@ -74,22 +87,22 @@
|
|||
groupName="demo"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2021"
|
||||
spinnerColor="blue"
|
||||
spinnerPosition="right"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
/>
|
||||
<radioList
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2020"
|
||||
spinnerColor="blue"
|
||||
spinnerPosition="right"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
/>
|
||||
<radioList
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-year"
|
||||
radioID="2019"
|
||||
spinnerColor="blue"
|
||||
spinnerPosition="right"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,12 +232,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
|
||||
import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
|
||||
import radioCard from "@/uxComponents/radioCard/radioCard";
|
||||
import listButton from "@/uxComponents/listButton/listButton";
|
||||
import radioList from "@/uxComponents/radioList/radioList";
|
||||
import alert from "@/uxComponents/alert/alert";
|
||||
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";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -233,7 +247,8 @@
|
|||
radioCard,
|
||||
listButton,
|
||||
radioList,
|
||||
alert
|
||||
alert,
|
||||
loader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
}
|
||||
//Add spinner. Specify width and height
|
||||
@include spinner(1rem,1rem);
|
||||
@include loader();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
|
||||
//Spinner
|
||||
//Choose color and position
|
||||
@mixin spinner($width, $height) {
|
||||
&.spinner {
|
||||
@mixin loader() {
|
||||
.loader {
|
||||
display: flex;
|
||||
//Open an overlay to prevent page interaction
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
@ -26,9 +27,9 @@
|
|||
content: '';
|
||||
mask: url(../../assets/img/icons/spinner.svg);
|
||||
mask-size: cover;
|
||||
position: absolute;
|
||||
width: $width;
|
||||
height: $height;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: rotation 1s infinite linear;
|
||||
@keyframes rotation {
|
||||
100% {
|
||||
|
|
|
|||
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 rem where 16px = 1rem */
|
||||
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>
|
||||
|
|
@ -2,14 +2,14 @@
|
|||
<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 ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
|
||||
|
||||
>{{radioID}}</label>
|
||||
<p class="small">{{errorMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
export default {
|
||||
name: "radioList",
|
||||
props: [
|
||||
|
|
@ -17,8 +17,8 @@ export default {
|
|||
"ariaLabelBy",
|
||||
"radioID",
|
||||
"errorMessage",
|
||||
"spinnerColor",
|
||||
"spinnerPosition"
|
||||
"loaderColor",
|
||||
"loaderPosition"
|
||||
|
||||
],
|
||||
data() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue