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

package/README.md

@@ -16,16 +16,19 @@ Prevent code repetition.
 npm install @fishawack/lab-velocity
 ```
 
-
 ### Auth Module
+
     Frontend files to to work with the Hydrate Module.
+
 #### Installation
 
-##### Import Axios File 
+##### Import Axios File
+
     import axios from "axios";
     import "@fishawack/lab-velocity/AuthModule/js/AuthAxios.js";
 
 ##### Import Routes File
+
     Inside Router.js file
     import { authRoutes, configureRoutes } from "@fishawack/lab-velocity/AuthModule/js/AuthRoutes";
 
@@ -34,7 +37,9 @@ npm install @fishawack/lab-velocity
 
     add method call after createRouter
     configureRoutes(router);
-##### Import Store 
+
+##### Import Store
+
     import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
     Inside createStore method add
         modules: {
@@ -43,9 +48,11 @@ npm install @fishawack/lab-velocity
     Inside VuexPersistedState add
         paths:["auth"]
 
-    At bottom of file set 
+    At bottom of file set
         window.store = store;
+
 ##### SVGS
+
     Ensure Content has Velocity pulled in
     {
         "lftp": "ftp-fishawack.egnyte.com",
@@ -54,15 +61,14 @@ npm install @fishawack/lab-velocity
     Copy out the svg folder contents into the svg files within vue.
 
 ##### ENV VARS
+
     HYDRATE_LOGO=example-logo
-    HYDRATE_REDIRECT=index
 
     HYDRATE_LOGO=example-logo(No Default set, name of svg logo to display on page)
-    HYDRATE_ROUTE=(Default auth if not configured)
     HYDRATE_REDIRECT=(Default index if not configured)
-    HYDRATE_ADMIN=true (DO NOT use unless on Admin site and want to disable auth flows and only use sso login)
     HYDRATE_CONTACT=(Default mailto:EP@avalerehealth, Email for contact us button)
 
 ##### Verify dependencies are installed
+
     Axios
     form-backend-validation

package/_base.scss

@@ -3,4 +3,4 @@
 @import "element-plus/theme-chalk/el-message";
 @import "element-plus/theme-chalk/el-notification";
 @import "element-plus/theme-chalk/el-overlay";
-@import "./components/input.scss";
+@import "./components/input.scss";

package/_defaults.scss

@@ -2,7 +2,7 @@
 
 @import "@fishawack/lab-ui/_defaults.scss";
 
-$colors: variables.dynamic('color', module-variables("variables"));
+$colors: variables.dynamic("color", module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
 $spacing: 8px;
@@ -11,11 +11,10 @@ $spacing: 8px;
     padding: 0px 5 * $spacing;
 }
 
-
 body {
     font-family: $primaryFont, sans-serif;
     font-size: get-ratio(16px);
     line-height: 1.5;
     color: $color1;
     background-color: $color3;
-}
+}

package/_variables.scss

@@ -2,24 +2,22 @@
 // Set global variables here, e.g $color6: red;
 @import "./modules/AuthVariables";
 
+$primaryFont: "Inter";
+$primaryFontThin: "Inter-Thin";
+$primaryFontExtraLight: "Inter-ExtraLight";
+$primaryFontLight: "Inter-Light";
+$primaryFontRegular: "Inter-Regular";
+$primaryFontMedium: "Inter-Medium";
+$primaryFontSemiBold: "Inter-SemiBold";
+$primaryFontBold: "Inter-Bold";
 
-$primaryFont: 'Inter';
-$primaryFontThin: 'Inter-Thin';
-$primaryFontExtraLight: 'Inter-ExtraLight';
-$primaryFontLight: 'Inter-Light';
-$primaryFontRegular: 'Inter-Regular';
-$primaryFontMedium: 'Inter-Medium';
-$primaryFontSemiBold: 'Inter-SemiBold';
-$primaryFontBold: 'Inter-Bold';
-
-
-$secondaryFont: 'NotoSerif';
-$secondaryFontMedium: 'NotoSerif-Medium';
+$secondaryFont: "NotoSerif";
+$secondaryFontMedium: "NotoSerif-Medium";
 // Colors
 
-$color1: #2D2D2D;
+$color1: #2d2d2d;
 $color2: #333333;
-$color3: #F7F7F7;
+$color3: #f7f7f7;
 $color4: #e6e6e6;
 $color5: #cccccc;
 $color6: #999999;
@@ -27,7 +25,7 @@ $color7: #666666;
 $color8: #f2f2f2; //Used
 $color9: #ff0000;
 $color10: #dcdbdb;
-$color11: #8C8C8C; //Used
-$color12: #5C5C5C;
-$color13: #3C976E;
-$colorAlert: #D53A3A;
+$color11: #8c8c8c; //Used
+$color12: #5c5c5c;
+$color13: #3c976e;
+$colorAlert: #d53a3a;

package/components/_alert.scss

@@ -1,5 +1,5 @@
 @import "element-plus/theme-chalk/el-alert";
 
 .vel-alert {
-    --el-color-error: #D53A3A;
-}
+    --el-color-error: #d53a3a;
+}

package/components/_basic.scss

@@ -8,9 +8,10 @@
     }
 
     .el-input__inner {
-        --el-input-inner-height:46px
+        --el-input-inner-height: 46px;
     }
-    .el-input-group__append, .el-input-group__prepend {
+    .el-input-group__append,
+    .el-input-group__prepend {
         padding: 0 2 * $spacing;
     }
 }
@@ -49,6 +50,6 @@
         width: 24px;
         min-width: 24px;
         padding: 0px !important;
-        fill: #cfd8dd !important
+        fill: #cfd8dd !important;
     }
-}
+}

package/components/_breadcrumbs.scss

@@ -1,31 +1,30 @@
 @import "element-plus/theme-chalk/el-breadcrumb";
 @import "element-plus/theme-chalk/el-breadcrumb-item";
 .vel-breadcrumb {
-
     .el-breadcrumb__separator {
         display: none;
-        margin:0px $spacing;
+        margin: 0px $spacing;
     }
-    
+
     .el-breadcrumb__separator,
     .el-breadcrumb__inner {
         font-size: get-ratio(16px);
         line-height: get-ratio(24px);
     }
-    
+
     .el-breadcrumb__inner {
         &.is-link {
             text-decoration: underline;
             font-weight: 500;
             color: $color2;
             text-transform: capitalize;
-    
+
             &:hover {
-                color:$color12;
+                color: $color12;
             }
         }
     }
-    
+
     .el-breadcrumb__item {
         &:last-child {
             .el-breadcrumb__inner {
@@ -37,4 +36,4 @@
             }
         }
     }
-}
+}

package/components/_button.scss

@@ -231,10 +231,11 @@
 
     // shapes
 
-    &.is-circle, &.is-square  {
+    &.is-circle,
+    &.is-square {
         width: auto;
-        & [class*=el-icon] + span {
-           margin-left: 0;
+        & [class*="el-icon"] + span {
+            margin-left: 0;
         }
         &.el-button--default,
         &.el-button--primary,
@@ -252,11 +253,9 @@
         &.el-button--small {
             padding: get-ratio(5px);
         }
-
     }
     // Fix for improper spacing
     .el-icon.is-loading {
-
         + span:empty {
             margin-left: 0px;
         }
@@ -269,14 +268,14 @@
     }
 
     &--iconRight {
-            .el-icon {
-                order: 2;
-            }
+        .el-icon {
+            order: 2;
+        }
 
-            > span {
-                order: 1;
-                margin: 0 0.5rem 0 0;
-            }
+        > span {
+            order: 1;
+            margin: 0 0.5rem 0 0;
+        }
     }
 
     &--iconOnly1 {

package/components/_cascader.scss

@@ -9,4 +9,4 @@
 .el-cascader-node {
     line-height: get-ratio(40px);
     height: get-ratio(40px);
-}
+}

package/components/_checkbox.scss

@@ -1,40 +1,41 @@
 @import "element-plus/theme-chalk/el-checkbox";
 @import "element-plus/theme-chalk/el-checkbox-button";
 
-.vel-checkbox, .el-checkbox {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: $spacing * .5;
-        flex-wrap: wrap ;
-        align-items: baseline;
-        
-        &__label{
-            order: 2;
-        }
-        &__checkbox {
-            order: 1;
-            .el-checkbox__input {
-                &.is-checked {
-                    .el-checkbox__inner {
-                        background-color: black;
-                    }
+.vel-checkbox,
+.el-checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $spacing * 0.5;
+    flex-wrap: wrap;
+    align-items: baseline;
+
+    &__label {
+        order: 2;
+    }
+    &__checkbox {
+        order: 1;
+        .el-checkbox__input {
+            &.is-checked {
+                .el-checkbox__inner {
+                    background-color: black;
                 }
             }
         }
-        &__error {
-           order: 3;
-           flex-basis: 100%;
-           color: $colorAlert;
-        }        
+    }
+    &__error {
+        order: 3;
+        flex-basis: 100%;
+        color: $colorAlert;
+    }
 }
 
-.vel-checkbox-group, .vel-checkbox {
+.vel-checkbox-group,
+.vel-checkbox {
     &--vertical {
         .vel-checkbox-group__wrapper {
             display: flex;
             flex-direction: column;
         }
     }
-
-}
+}

package/components/_chip.scss

@@ -0,0 +1,24 @@
+.chip {
+    border: solid 1px currentColor;
+    border-radius: 4px;
+    background-color: #f0f9eb;
+    padding: get-ratio(2px) get-ratio(10px);
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
+    box-sizing: border-box;
+
+    &.deactive,
+    &--inherited {
+        color: #909399 !important;
+        border-color: #dedfe0 !important;
+        background-color: #f4f4f5 !important;
+    }
+}
+
+.chip--round {
+    display: inline-block;
+    text-indent: -100000px;
+    width: get-ratio(22px);
+    height: get-ratio(22px);
+    border-radius: 100%;
+}

package/components/_collapse.scss

@@ -1,10 +1,9 @@
-
 @import "element-plus/theme-chalk/el-collapse";
 @import "element-plus/theme-chalk/el-collapse-item";
 
 .el-collapse-item__header {
     align-items: center;
-    --el-collapse-header-font-size:get-ratio(16px);
+    --el-collapse-header-font-size: get-ratio(16px);
     .vel-icon {
         vertical-align: middle;
         width: 13px;
@@ -22,4 +21,4 @@
     --el-collapse-header-bg-color: transparent;
     --el-collapse-content-bg-color: transparent;
     --el-collapse-border-color: transparent;
-}
+}

package/components/_datepicker.scss

@@ -4,7 +4,7 @@
     // --el-input-height:38px;
 
     // &.el-input--large {
-        --el-input-height:46px;
+    --el-input-height: 46px;
     // }
 
     &__error {
@@ -13,16 +13,16 @@
 }
 
 .vel-popper {
-    @include breakpoint (max-width $mobileMax) {
+    @include breakpoint(max-width $mobileMax) {
         min-width: 280px;
         max-width: 325px;
         width: auto;
-        .el-date-range-picker{
+        .el-date-range-picker {
             width: 100%;
             .el-picker-panel__body {
                 width: 100%;
                 min-width: 100%;
-                &>div {
+                & > div {
                     width: auto;
                     min-width: auto;
                     border: none;
@@ -32,7 +32,8 @@
     }
 }
 
-.vel-date-picker, .el-date-picker {
+.vel-date-picker,
+.el-date-picker {
     &.has-sidebar {
         width: auto;
 
@@ -48,4 +49,4 @@
         margin-left: 0px;
         position: relative !important;
     }
-}
+}

package/components/_footer.scss

@@ -25,7 +25,7 @@
     flex-basis: 100%;
     justify-content: space-between;
     margin-top: 3.5 * $spacing;
-    
+
     > * {
         max-width: 50%;
         flex-basis: 50%;

package/components/_form.scss

@@ -7,16 +7,18 @@
     }
 
     &:not(:last-child) {
-        margin-bottom:  2.5 * $spacing;
+        margin-bottom: 2.5 * $spacing;
     }
 }
 
 .form__group--error {
-
-    .el-select__wrapper, .el-select__wrapper:hover, .el-input__wrapper, .el-input__wrapper:hover {
+    .el-select__wrapper,
+    .el-select__wrapper:hover,
+    .el-input__wrapper,
+    .el-input__wrapper:hover {
         box-shadow: 0 0 0 1px $colorAlert inset;
         .el-select__icon {
             color: $colorAlert;
         }
     }
-}
+}

package/components/_header.scss

@@ -15,7 +15,6 @@
         max-width: 50%;
         flex-basis: 50%;
         justify-content: flex-end !important;
-
     }
 
     .icon {
@@ -23,7 +22,7 @@
         max-width: $spacing * 2.5;
         width: $spacing * 2.5;
         height: $spacing * 2.5;
-        margin-right: .5 * $spacing;
+        margin-right: 0.5 * $spacing;
     }
 }
 
@@ -43,13 +42,13 @@
             position: relative;
             &::after {
                 position: absolute;
-                content:"";
+                content: "";
                 border-right: solid get-ratio(1px) $color4;
                 height: 75%;
                 transform: translateY(-50%);
                 top: 50%;
-                right:0px;
+                right: 0px;
             }
         }
     }
-}
+}

package/components/_icon.scss

@@ -1,8 +1,9 @@
 // @import "@fishawack/lab-ui/_icon.scss";
 
 .vel-icon {
-
-    .vel-link &, .vel-button &, .vel-basic & {
+    .vel-link &,
+    .vel-button &,
+    .vel-basic & {
         width: get-ratio(16px);
         min-width: get-ratio(16px);
         max-height: get-ratio(16px);
@@ -21,4 +22,4 @@
         padding-bottom: 0px;
         line-height: 0px;
     }
-}
+}

package/components/_inputNumber.scss

@@ -9,13 +9,14 @@
     }
 
     .el-input__inner {
-        --el-input-inner-height:38px
+        --el-input-inner-height: 38px;
     }
-    .el-input-group__append, .el-input-group__prepend {
+    .el-input-group__append,
+    .el-input-group__prepend {
         padding: 0 2 * $spacing;
     }
 
     &__error {
         color: $colorAlert;
     }
-}
+}

package/components/_link.scss

@@ -1,9 +1,9 @@
 @import "element-plus/theme-chalk/el-link";
 
 .vel-link.el-link--default {
-    &:hover{
-        color:currentColor;
-        &:after{
+    &:hover {
+        color: currentColor;
+        &:after {
             border-color: currentColor;
         }
     }
@@ -19,9 +19,9 @@
         right: 0;
         border-color: currentColor;
     }
-    &:hover{
-        color:currentColor;
-        &:after{
+    &:hover {
+        color: currentColor;
+        &:after {
             border-color: currentColor;
         }
     }
@@ -41,4 +41,4 @@
 
 .vel-link--xsmall {
     font-size: get-ratio(12px);
-}
+}

package/components/_loader.scss

@@ -5,7 +5,7 @@
     height: 6rem;
     border-radius: 50%;
     background-color: inherit;
-    
+
     svg {
         .circle {
             animation: 2s spinning cubic-bezier(0.41, 0.26, 0.2, 0.62) infinite;
@@ -22,7 +22,7 @@
         border-width: 0.6rem;
     }
 
-    @include breakpoint (max-width $mobileMax) {
+    @include breakpoint(max-width $mobileMax) {
         width: 6rem;
         height: 6rem;
 
@@ -32,7 +32,6 @@
     }
 }
 
-
 @keyframes spinning {
     from {
         transform: rotate(0);
@@ -41,4 +40,4 @@
     to {
         transform: rotate(2turn);
     }
-}
+}