@fishawack/lab-velocity 1.11.0 → 2.0.0-beta.1

package/modules/_AuthModule.scss

@@ -11,7 +11,8 @@
     background-color: black;
     height: 100vh;
     width: 100%;
-    background: url('../media/content/images/hero-auth-background-desktop.jpg') center top no-repeat;
+    background: url("../media/content/images/hero-auth-background-desktop.jpg")
+        center top no-repeat;
     background-size: cover;
     z-index: 10;
 
@@ -19,11 +20,13 @@
         width: 13.3rem;
         z-index: 99;
     }
-    @include breakpoint (max-width $tabletMax) {
-        background: url('../media/content/images/hero-auth-background-tablet.jpg') center top no-repeat;
+    @include breakpoint(max-width $tabletMax) {
+        background: url("../media/content/images/hero-auth-background-tablet.jpg")
+            center top no-repeat;
     }
-    @include breakpoint (max-width $mobileMax) {
-        background: url('../media/content/images/hero-auth-background-mobile.jpg') center top no-repeat;
+    @include breakpoint(max-width $mobileMax) {
+        background: url("../media/content/images/hero-auth-background-mobile.jpg")
+            center top no-repeat;
     }
 }
 
@@ -38,7 +41,7 @@
     padding: 48px 40px 40px;
     z-index: 1;
 
-    @include breakpoint (max-width $mobileMax) {
+    @include breakpoint(max-width $mobileMax) {
         top: 84px;
         transform: translate(-50%, 0);
         padding: 24px;
@@ -49,7 +52,8 @@
         }
     }
 
-    h2, .h2 {
+    h2,
+    .h2 {
         line-height: 50px;
         font-size: 48px;
     }
@@ -82,7 +86,7 @@
         width: 200px;
         padding: 9px 23.5px;
         font-size: 14px;
-        @include breakpoint (max-width $mobileMax) {
+        @include breakpoint(max-width $mobileMax) {
             max-width: unset;
             width: 100%;
         }
@@ -96,7 +100,7 @@
                 }
             }
             .form__input.error {
-                border:none;
+                border: none;
                 .el-input__wrapper {
                     border: 0.4px solid red;
                 }
@@ -119,28 +123,29 @@
         color: rgba($color1, 0.5);
     }
     .vel-basic__textbox {
-        --el-border-color:#CFD8DD;
-        --el-input-text-color :#666666;
-        --el-input-focus-border-color:#CFD8DD;
-        --el-input-hover-border-color:#CFD8DD;
+        --el-border-color: #cfd8dd;
+        --el-input-text-color: #666666;
+        --el-input-focus-border-color: #cfd8dd;
+        --el-input-hover-border-color: #cfd8dd;
         font-size: 14px;
         padding-bottom: $am-spacing * 2.5;
         .el-input__inner {
-            --el-input-inner-height:38px;
+            --el-input-inner-height: 38px;
         }
     }
     .el-button--primary {
-        --el-button-text-color:#ffffff;
+        --el-button-text-color: #ffffff;
     }
-    input, input:focus {
+    input,
+    input:focus {
         @extend .el-input__inner;
     }
 }
 
 .AuthModule__logo__container {
     position: absolute;
-    top:48px;
-    left:0%;
+    top: 48px;
+    left: 0%;
 }
 .AuthModule__logo {
     position: relative;
@@ -156,27 +161,25 @@
     height: 100%;
 }
 
-
-.AM-mb{
+.AM-mb {
     margin-bottom: $am-spacing !important;
 }
-.AM-mt{
+.AM-mt {
     margin-top: $am-spacing !important;
 }
-.AM-pb{
+.AM-pb {
     padding-bottom: $am-spacing !important;
 }
-.AM-pt{
+.AM-pt {
     padding-top: $am-spacing !important;
 }
 @for $i from 1 through 5 {
-
     .AM-mb-#{$i - 1} {
         margin-bottom: ($i - 1) * $am-spacing !important;
     }
 
     .AM-mb-#{$i - 1}\.5 {
-        margin-bottom: ($i - .5) * $am-spacing !important;
+        margin-bottom: ($i - 0.5) * $am-spacing !important;
     }
 
     .AM-mt-#{$i - 1} {
@@ -184,7 +187,7 @@
     }
 
     .AM-mt-#{$i - 1}\.5 {
-        margin-top: ($i - .5) * $am-spacing !important;
+        margin-top: ($i - 0.5) * $am-spacing !important;
     }
 
     .AM-pt-#{$i - 1} {
@@ -192,7 +195,7 @@
     }
 
     .AM-pt-#{$i - 1}\.5 {
-        padding-top: ($i - .5) * $am-spacing !important;
+        padding-top: ($i - 0.5) * $am-spacing !important;
     }
 
     .AM-pb-#{$i - 1} {
@@ -200,10 +203,10 @@
     }
 
     .AM-pb-#{$i - 1}\.5 {
-        padding-bottom: ($i - .5) * $am-spacing !important;
+        padding-bottom: ($i - 0.5) * $am-spacing !important;
     }
 }
 
 .AM-color-highlight {
     color: $am-highlight;
-}
+}

package/modules/_AuthVariables.scss

@@ -1,7 +1,7 @@
 $am-spacing: 8px;
-$am-highlight: #3C976E;
+$am-highlight: #3c976e;
 
 $color8: #f2f2f2; //Used
 $color10: #dcdbdb;
-$color12: #5C5C5C;
-$colorAlert: #D53A3A;
+$color12: #5c5c5c;
+$colorAlert: #d53a3a;

package/modules/_modal.scss

@@ -5,8 +5,8 @@
 
     transition: all 500ms ease-in-out;
 
-    &::before{
-        content: '';
+    &::before {
+        content: "";
         pointer-events: none;
         z-index: 0 !important;
         position: fixed;
@@ -21,4 +21,4 @@
 }
 .AuthModule__form.modal__box {
     position: absolute;
-}
+}

package/package.json

@@ -1,104 +1,111 @@
 {
-  "name": "@fishawack/lab-velocity",
-  "version": "1.11.0",
-  "description": "Avalere Health branded style system",
-  "scripts": {
-    "setup": "npm ci || npm i && npm run content",
-    "content": "npm run content --prefix node_modules/@fishawack/core/",
-    "start": "npm run production && npm run story:dev",
-    "start-modules": "npm start --prefix node_modules/@fishawack/core/",
-    "production": "npm run production --prefix node_modules/@fishawack/core/ && npm run story:build",
-    "test": "npm test --prefix node_modules/@fishawack/core/",
-    "package": "npm run package --prefix node_modules/@fishawack/core/",
-    "deploy": "npm run deploy --prefix node_modules/@fishawack/core/",
-    "mail": "npm run mail --prefix node_modules/@fishawack/core/",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "preversion": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./ && cp -r _Build/vue/modules/AuthModule ./"
-  },
-  "license": "BSD-3-Clause",
-  "author": {
-    "name": "Fishawack",
-    "url": "https://fishawack.com/"
-  },
-  "keywords": [
-    "css",
-    "components"
-  ],
-  "devDependencies": {
-    "@fishawack/core": "^8.16.1",
-    "@fishawack/lab-ui": "^12.5.0",
-    "@histoire/plugin-vue": "^0.17.17",
-    "@vitejs/plugin-vue": "^5.1.1",
-    "histoire": "^0.17.17",
-    "sass": "^1.77.8",
-    "vite": "^5.3.5",
-    "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.34",
-    "vue-loader": "^17.2.2",
-    "vue-router": "^4.4.0",
-    "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0",
-    "form-backend-validation": "github:mikemellor11/form-backend-validation#master",
-    "mitt": "^3.0.1"
-  },
-  "dependencies": {
-    "@tiptap/extension-link": "^2.11.2",
-    "@tiptap/extension-subscript": "^2.11.2",
-    "@tiptap/extension-superscript": "^2.11.2",
-    "@tiptap/extension-table": "^2.11.2",
-    "@tiptap/extension-table-cell": "^2.11.2",
-    "@tiptap/extension-table-header": "^2.11.2",
-    "@tiptap/extension-table-row": "^2.11.2",
-    "@tiptap/extension-underline": "^2.11.2",
-    "@tiptap/pm": "^2.11.2",
-    "@tiptap/starter-kit": "^2.11.2",
-    "@tiptap/vue-3": "^2.11.2",
-    "element-plus": "^2.7.8",
-    "quill": "^1.3.7",
-    "sanitize-html": "^2.13.1"
-  },
-  "files": [
-    "*.scss",
-    "*.vue",
-    "form",
-    "components",
-    "layout",
-    "navigation",
-    "basic",
-    "modules",
-    "AuthModule"
-  ],
-  "main": "index.js",
-  "release": {
-    "plugins": [
-      [
-        "@semantic-release/commit-analyzer",
-        {
-          "preset": "conventionalcommits"
-        }
-      ],
-      [
-        "@semantic-release/release-notes-generator",
-        {
-          "preset": "conventionalcommits",
-          "writerOpts": {
-            "headerPartial": "### {{version}} ({{date}})\n",
-            "mainTemplate": "{{> header}}\n{{#each commitGroups}}\n\n{{#if title}}\n#### {{title}}\n\n{{/if}}\n{{#each commits}}\n{{> commit root=@root}}\n{{/each}}\n{{/each}}"
-          },
-          "presetConfig": {
-            "commitUrlFormat": "{{host}}/{{owner}}/{{repository}}/commits/{{hash}}"
-          }
-        }
-      ],
-      [
-        "@semantic-release/changelog",
-        {
-          "changelogTitle": "## Changelog"
-        }
-      ],
-      "@semantic-release/npm",
-      "@semantic-release/git"
-    ]
-  }
+    "name": "@fishawack/lab-velocity",
+    "version": "2.0.0-beta.1",
+    "description": "Avalere Health branded style system",
+    "scripts": {
+        "setup": "npm ci || npm i && npm run content",
+        "content": "npm run content --prefix node_modules/@fishawack/core/",
+        "start": "npm run production && npm run story:dev",
+        "start-modules": "npm start --prefix node_modules/@fishawack/core/",
+        "production": "npm run production --prefix node_modules/@fishawack/core/ && npm run story:build",
+        "test": "npm test --prefix node_modules/@fishawack/core/",
+        "package": "npm run package --prefix node_modules/@fishawack/core/",
+        "deploy": "npm run deploy --prefix node_modules/@fishawack/core/",
+        "mail": "npm run mail --prefix node_modules/@fishawack/core/",
+        "story:dev": "histoire dev",
+        "story:build": "histoire build",
+        "preversion": "cp -r _Build/sass/** ./"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Fishawack",
+        "url": "https://fishawack.com/"
+    },
+    "keywords": [
+        "css",
+        "components"
+    ],
+    "devDependencies": {
+        "@fishawack/core": "^8.16.1",
+        "@fishawack/lab-ui": "^12.5.0",
+        "@histoire/plugin-vue": "^0.17.17",
+        "@vitejs/plugin-vue": "^5.1.1",
+        "histoire": "^0.17.17",
+        "mitt": "^3.0.1",
+        "sass": "^1.77.8",
+        "vite": "^5.3.5",
+        "vite-svg-loader": "^5.1.0",
+        "vue": "^3.4.34",
+        "vue-loader": "^17.2.2",
+        "vue-router": "^4.4.0",
+        "vuex": "^4.1.0",
+        "vuex-persistedstate": "^4.1.0"
+    },
+    "dependencies": {
+        "@tiptap/extension-link": "^2.11.2",
+        "@tiptap/extension-subscript": "^2.11.2",
+        "@tiptap/extension-superscript": "^2.11.2",
+        "@tiptap/extension-table": "^2.11.2",
+        "@tiptap/extension-table-cell": "^2.11.2",
+        "@tiptap/extension-table-header": "^2.11.2",
+        "@tiptap/extension-table-row": "^2.11.2",
+        "@tiptap/extension-underline": "^2.11.2",
+        "@tiptap/pm": "^2.11.2",
+        "@tiptap/starter-kit": "^2.11.2",
+        "@tiptap/vue-3": "^2.11.2",
+        "axios": "^1.11.0",
+        "element-plus": "^2.7.8",
+        "form-backend-validation": "github:mikemellor11/form-backend-validation#master",
+        "lodash": "^4.17.21",
+        "quill": "^1.3.7",
+        "sanitize-html": "^2.13.1"
+    },
+    "files": [
+        "*.scss",
+        "*.vue",
+        "form",
+        "components",
+        "layout",
+        "navigation",
+        "basic",
+        "modules",
+        "AuthModule"
+    ],
+    "main": "index.js",
+    "release": {
+        "plugins": [
+            [
+                "@semantic-release/commit-analyzer",
+                {
+                    "preset": "conventionalcommits"
+                }
+            ],
+            [
+                "@semantic-release/release-notes-generator",
+                {
+                    "preset": "conventionalcommits",
+                    "writerOpts": {
+                        "headerPartial": "### {{version}} ({{date}})\n",
+                        "mainTemplate": "{{> header}}\n{{#each commitGroups}}\n\n{{#if title}}\n#### {{title}}\n\n{{/if}}\n{{#each commits}}\n{{> commit root=@root}}\n{{/each}}\n{{/each}}"
+                    },
+                    "presetConfig": {
+                        "commitUrlFormat": "{{host}}/{{owner}}/{{repository}}/commits/{{hash}}"
+                    }
+                }
+            ],
+            [
+                "@semantic-release/changelog",
+                {
+                    "changelogTitle": "## Changelog"
+                }
+            ],
+            "@semantic-release/npm",
+            [
+                "@semantic-release/git",
+                {
+                    "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
+                }
+            ]
+        ]
+    }
 }

package/vendor.scss

@@ -4,7 +4,7 @@
 
 @import "normalize.css/normalize";
 
-#svgSprite{
+#svgSprite {
     position: absolute;
     width: 0;
     height: 0;
@@ -19,4 +19,4 @@
 @import "@fishawack/lab-ui/_utilities.scss";
 
 // Element-plus base style
-@import "./_base.scss";
+@import "./_base.scss";

package/AuthModule/components/AuthModal.vue

@@ -1,110 +0,0 @@
-<template>
-	<div :class="{'active': open}"
-        class="modal modal--auth">
-
-        <div class="modal__container"
-            v-on:click.self="close">
-
-            <div class="modal__box AuthModule__form" :class="boxCls">
-                    <component v-if="compName"
-                        :is="compName"
-                        v-bind="compProps"
-                        @close="close"
-                    />
-            </div>
-        </div>
-
-    </div>
-</template>
-
-<script>
-"use strict";
-
-export default {
-    name: "AuthModal",
-
-    data() {
-        return {
-            open: false,
-            compName: null,
-            compProps: null,
-            cb: null,
-            boxCls: null,
-            validComponents: {
-                "force-reset" : 'VForceReset',
-                "password-change" : 'VPasswordChange'
-            }
-        };
-    },
-
-    methods: {
-        reset(){
-            this.compName = null;
-            this.compProps = null;
-            this.boxCls = null;
-            this.cb = null;
-        },
-        close() {
-            if(this.compName === 'VForceReset') {
-                if(!this.$store.state.auth.forcePasswordChange) {
-                    this.open = false;
-                }
-            } else  {
-                this.open = false;
-            }
-        }
-    },
-
-    created() {
-        this.$emitter.on('AuthModal', (comp) => {
-            this.compName = this.validComponents[comp.type];
-            this.open = comp;
-            
-        });
-
-        window.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                this.open = false;
-            }
-        });
-    },
-
-    watch: {
-        open(isOpen) {
-            this.$emitter.emit('toggleBackgroundScroll', isOpen);
-
-            if(this.cb){
-                this.cb();
-            }
-
-            if (!isOpen) {
-                this.reset();
-            }
-        },
-        '$route'(to,from) {
-            if(from.fullPath !== to.fullPath) {
-                this.open = false;
-            }
-        },
-        '$store.state.auth.forcePasswordChange': {
-            async handler(forcePasswordChange) {
-                if(forcePasswordChange) {
-                    this.compName = this.validComponents["force-reset"];
-                    this.open = true;
-                }
-            }
-        }
-    },
-
-    components: {
-        VForceReset: require("../routes/force-reset.vue").default,
-        VPasswordChange: require("../routes/change-password.vue").default,
-    },
-    mounted() {
-        if(this.$store.state.auth.forcePasswordChange) {
-            this.compName = this.validComponents["force-reset"];
-            this.open = true;
-        }
-    }
-};
-</script>

package/AuthModule/components/VPasswordValidation.vue

@@ -1,66 +0,0 @@
-<template>
-    <div class="">
-        <p class="font-700 AM-mb-0.5">Your password must contain:</p>
-        <p class="flex m-0">
-            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7"
-                v-if="passwordLengthValid" />
-            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
-            At least 8 characters
-        </p>
-        <p class="flex m-0">
-            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7" v-if="hasLetter" />
-            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
-            At least one letter
-        </p>
-        <p class="flex AM-mt-0 ml-0 mr-0 AM-mb-3">
-            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7" v-if="hasNumberOrSymbol" />
-            <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
-            At least one number or symbol
-        </p>
-    </div>
-</template>
-
-<script>
-
-export default {
-    props: {
-        password: {
-            type: String,
-            default: '',
-        },
-    },
-    computed: {
-        passwordLengthValid() {
-            return this.password?.length >= 8;
-        },
-        hasLetter() {
-            return this.tests.letter.test(this.password);
-        },
-        hasNumberOrSymbol() {
-            return this.tests.number.test(this.password) || this.tests.symbol.test(this.password);
-        },
-        passwordValid() {
-            return this.passwordLengthValid && this.hasLetter && this.hasNumberOrSymbol;
-        },
-    },
-    data() {
-        return {
-            tests: {
-                letter: /[a-zA-Z]+/,
-                number: /[0-9]+/,
-                symbol: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/,
-            }
-        };
-    },
-    watch: {
-        password(newPassword) {
-            this.$emit('passwordValid', this.passwordValid);
-        },
-    },
-    methods: {
-    },
-    mounted() {
-        this.$emit('passwordValid', this.passwordValid);
-    },
-}
-</script>

package/AuthModule/js/AuthAxios.js

@@ -1,59 +0,0 @@
-import axios from "axios";
-
-function setAxiosDefaults() {
-    axios.defaults.baseURL = process.env.APP_URL;
-    axios.defaults.withCredentials = true;
-    axios.defaults.withXSRFToken = true;
-
-    // Some libraries will utilize the globally available version of axios so make sure it's our exact axios instance
-    window.axios = axios;
-}
-
-// Redirect to login page if 401
-axios.interceptors.response.use(null, (error) => {
-    if (error.response) {
-        if (error.response.status === 401) {
-            store.commit("setAuth", false);
-            window.router.push({ name: `${store.state.auth.authBase}.login` });
-        }
-
-        if (error.response.status === 404) {
-            window.router.push({ name: "index" });
-        }
-    }
-
-    return Promise.reject(error);
-});
-
-// Pull all paginated data
-axios.getAll = (url, options = {}) => {
-    // eslint-disable-next-line no-async-promise-executor
-    return new Promise(async (resolve, reject) => {
-        try {
-            const arr = { data: { data: [] } };
-            let page = 0;
-
-            // eslint-disable-next-line no-constant-condition
-            while (true) {
-                // eslint-disable-next-line no-await-in-loop
-                const res = await axios.get(
-                    // eslint-disable-next-line no-plusplus
-                    `${url}${url.includes("?") ? "&" : "?"}page=${++page}`,
-                    options
-                );
-                arr.data.data = arr.data.data.concat(res.data.data);
-                if (
-                    res.data.next_page_url === null ||
-                    (res.data.links && res.data.links.next === null)
-                )
-                    break;
-            }
-
-            resolve(arr);
-        } catch (e) {
-            reject(e);
-        }
-    });
-};
-
-setAxiosDefaults();