@fishawack/lab-velocity 0.3.1 → 0.3.3

package/_defaults.scss

@@ -5,20 +5,16 @@
 $colors: variables.dynamic('color', module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
-$spacing: 12px;
-
-html {
-    font-size: 10px;
-}
+$spacing: get-ratio(8px);
 
 body {
     font-family: $primaryFont, sans-serif;
-    font-size: 1.6rem;
+    font-size: get-ratio(16px);
     line-height: 1.5;
     color: $color1;
     background-color: $color3;
 }
 .container {
     margin-left: 0;
-    padding: 0px 4rem
-}
+    padding: 0px 5 * $spacing;
+}

package/components/_breadcrumbs.scss

@@ -3,13 +3,13 @@
 
 .el-breadcrumb__separator {
     display: none;
-    margin:0px .8rem;
+    margin:0px $spacing;
 }
 
 .el-breadcrumb__separator,
 .el-breadcrumb__inner {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
+    font-size: get-ratio(16px);
+    line-height: get-ratio(24px);
 }
 
 .el-breadcrumb__inner {

package/components/_button.scss

@@ -2,14 +2,14 @@
 
 
 .el-button--default {
-    border: solid 1px $color5;
+    border: solid get-ratio(1px) $color5;
     &:hover {
         background-color: #AFAFAF;
         color: $color1;
     }
     &:active {
         background-color: #F2F2F2;
-        border: solid 1px #2D2D2D;
+        border: solid get-ratio(1px) #2D2D2D;
         color: $color1;
     }
 }
@@ -27,7 +27,7 @@
     }
 
     &.is-plain {
-        padding: .4rem 1.6rem;
+        padding: .5 * $spacing  2 * $spacing;
         background-color: #F2F2F2;
         color: #2D2D2D; 
 
@@ -103,18 +103,18 @@
 
 // sizes
 .el-button--default {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-    padding: 1rem 1.6rem;
+    font-size: get-ratio(16px);
+    line-height: get-ratio(24px);
+    padding: $spacing 2 * $spacing;
 }
 
 .el-button--large {
-    padding: 1.2rem 2rem;
+    padding: 1.5 * $spacing 2.5 * $spacing;
 }
 
 .el-button--small {
-    font-size: 1.2rem;
-    line-height: 1.8rem;
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
 }
 
 .el-button {
@@ -123,7 +123,7 @@
 
     &.is-circle {
         width: auto;
-        padding: 1.5rem;
+        padding: 1.5 * $spacing;
     }
 }
 
@@ -143,14 +143,13 @@
         }
     }
     &--iconOnly {
-        // padding: 1.5rem;
         
         > span {
             margin: 0;
         }
         .vel-icon{
-            width: 1.138rem;
-            height: 1.138rem;
+            width: 1.5 * $spacing;
+            height: 1.5 * $spacing;
         }
         svg {
             width: 100%;
@@ -158,11 +157,11 @@
         }
 
         &.el-button--small {
-            padding: .6rem 1.2rem;
+            padding: $spacing $spacing * 2;
         }
 
         &.el-button--large {
-            padding: 1.7rem 2rem;
+            padding: 2 * $spacing 2.5 * $spacing;
         }
     }
 }

package/components/_checkbox.scss

@@ -5,7 +5,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: .5rem;
+        gap: $spacing * .5;
         flex-wrap: wrap ;
         &__label{
             order: 2;

package/components/_footer.scss

@@ -1,15 +1,15 @@
 footer {
     background-color: $color1;
     // width: 100%;
-    min-height: 16.4rem;
-    padding: 4rem 2.4rem;
+    min-height: $spacing * 20.5;
+    padding: $spacing * 5 $spacing * 3;
     box-sizing: border-box;
     width: 100%;
 
     svg {
-        width: 2.2rem;
-        max-width: 2.2rem;
-        height: 2.2rem;
+        width: 3 * $spacing;
+        max-width: 3 * $spacing;
+        height: 3 * $spacing;
         display: inline-block;
         margin-right: $spacing;
     }

package/components/_header.scss

@@ -1,14 +1,14 @@
 header {
-    border-bottom: solid 1px $color4;
+    border-bottom: solid get-ratio(1px) $color4;
     background-color: $color0;
     width: 100%;
     box-sizing: border-box;
 
     .icon {
-        min-width: 2rem;
-        max-width: 2rem;
-        width: 2rem;
-        height: 2rem;
+        min-width: $spacing * 2.5;
+        max-width: $spacing * 2.5;
+        width: $spacing * 2.5;
+        height: $spacing * 2.5;
         margin-right: .5 * $spacing;
     }
 }
@@ -21,7 +21,7 @@ header {
             &::after {
                 position: absolute;
                 content:"";
-                border-right: solid 1px $color4;
+                border-right: solid get-ratio(1px) $color4;
                 height: 75%;
                 transform: translateY(-50%);
                 top: 50%;

package/components/_link.scss

@@ -16,17 +16,17 @@
 }
 
 .vel-link--default {
-    font-size: 1rem;
+    font-size: get-ratio(16px);
 }
 
 .vel-link--large {
-    font-size: 1.125rem;
+    font-size: get-ratio(18px);
 }
 
 .vel-link--small {
-    font-size: .875rem;
+    font-size: get-ratio(14px);
 }
 
 .vel-link--xsmall {
-    font-size: .75rem;
+    font-size: get-ratio(12px);
 }

package/components/_navigation.scss

@@ -8,24 +8,24 @@ ul.el-menu--vertical {
     }
 
     a {
-        padding: 1.2rem 2rem;
+        padding: 1.5* $spacing 2.5 $spacing;
         height: 100%;
         width: 100%;
-        border-left: solid .4rem $color8;
+        border-left: solid .5 * $spacing $color8;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         overflow: hidden;
-        font-size: 1.8rem;
+        font-size: get-ratio(18px);
 
         &.active{
             border-left-color: $color1;
         }
 
         .icon {
-            width: 2rem;
-            max-width: 2rem;
-            min-width: 2rem;
+            width: 2.5 * $spacing;
+            max-width: 2.5 * $spacing;
+            min-width: 2.5 * $spacing;
             padding-bottom: 0px;
              * {
                 vertical-align: middle;

package/components/_pageTitle.scss

@@ -1,9 +1,8 @@
 .page-title {
-    padding: 2.1rem 2.4rem;
+    padding: 2.5 * $spacing 3 * $spacing;
     background-color: $color0;
-    border-bottom: 4px solid;
+    border-bottom: .5 * $spacing solid;
     border-image: linear-gradient(90deg, #FF558F 0%, #856DF6 100%) 1;
-    box-shadow: 4px 4px 8px 0px #00000040;
-
-    margin-bottom: 2.2rem;
+    box-shadow: .5 * $spacing .5 * $spacing $spacing 0px #00000040;
+    margin-bottom: 2.5 * $spacing;
 }

package/components/_sidebar.scss

@@ -1,8 +1,8 @@
 .side-bar {
-    flex-basis: 6rem;
+    flex-basis: $spacing * 7.5;
     display: flex;
     flex-direction: column;
-    box-shadow: 0px 4px 4px 0px hsla(0, 0%, 0%, 0.251);
+    box-shadow: 0px $spacing * .5 $spacing * .5 0px hsla(0, 0%, 0%, 0.251);
     min-height: 94.5vh;
     max-height: 100vh;
     overflow: hidden;
@@ -22,7 +22,7 @@
     }
 
     &.active {
-        flex-basis: 25.2rem;
+        flex-basis: 31.5 * $spacing;
 
         .side-bar__button {
             transform: rotateY(180deg);
@@ -36,9 +36,9 @@
     border: none;
     cursor: pointer;
     .icon {
-        width: 2rem;
-        min-width: 2rem;
-        padding-bottom: 2rem;
+        width: 2.5 * $spacing;
+        min-width: 2.5 * $spacing;
+        padding-bottom: 2.5 * $spacing;
         fill: currentColor;
     }
     &:focus {

package/components/_typography.scss

@@ -83,32 +83,32 @@
 
 
 h1,.h1 {
-    font-size: 4.8rem;
-    line-height: 5.52rem;
+    font-size: get-ratio(48px);
+    line-height: get-ratio(56px);
     font-family: $secondaryFont;
 }
 
 h2, .h2 {
-    font-size: 3.6rem;
-    line-height: 4.8rem;
+    font-size: get-ratio(36px);
+    line-height: get-ratio(48px);
     font-family : $primaryFont;
 }
 
 h3, .h3 {
-    font-size: 3.2rem;
-    line-height: 4.17rem;
+    font-size: get-ratio(32px);
+    line-height: get-ratio(42px);
     font-family : $primaryFont;
 }
 
 h4, .h4 {
-    font-size: 2.4rem;
-    line-height: 3.36rem;
+    font-size: get-ratio(24px);
+    line-height: get-ratio(32px);
     font-family : $primaryFont;
 }
 
 h5, .h5 {
-    font-size: 2rem;
-    line-height: 2.4rem;
+    font-size: get-ratio(20px);
+    line-height: get-ratio(24px);
     font-weight: 700;
     font-family : $primaryFont;
 }
@@ -119,21 +119,21 @@ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
 
 // may be project specific
 .text-10 {
-    font-size: 10px;
-    line-height: 15px;
+    font-size: get-ratio(10px);
+    line-height: get-ratio(16px);
 }
 .text-12 {
-    font-size: 12px;
-    line-height: 18px;
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
 }
 .text-14 {
-    font-size: 14px;
-    line-height: 21px;
+    font-size: get-ratio(14px);
+    line-height: get-ratio(20px);
 }
 
 .text-60 {
-    font-size: 6rem;
-    line-height: 6.9rem;
+    font-size: get-ratio(60px);
+    line-height: get-ratio(68px);
     font-weight: 500;
     font-family : $primaryFont;
 }

package/form/input.vue

@@ -9,8 +9,8 @@
 
         <slot />
 
-        <div v-if="error" class="form__error" :class="{ [baseClass + '__error']: baseClass }">
-            <small v-text="(error && typeof error === 'object' && error[name][0]) || (error || 'nbsp;')" />
+        <div v-if="hasError(name)" class="form__error" :class="{ [baseClass + '__error']: baseClass }">
+            <small v-html="first(name)" />
         </div>
     </div>
 </template>
@@ -47,5 +47,35 @@ export default {
             default: "text",
         },
     },
+
+    methods: {
+        hasError(field) {
+            if(!this.$props?.error?.errors) {
+                if(typeof this.$props?.error === 'string') {
+                    return true;
+                }
+                return false;
+            }
+            let hasError = this.$props.error.errors.hasOwnProperty(field);
+
+            if (!hasError) {
+                const errors = Object.keys(this.$props.error.errors).filter(
+                    e => e.startsWith(`${field}.`) || e.startsWith(`${field}[`)
+                );
+
+                hasError = errors.length > 0;
+            }
+
+            return hasError;
+        },
+
+        first(field) {
+            return this.get(field)[0];
+        },
+
+        get(field) {
+            return this.$props.error?.errors?.[field] || ( typeof this.$props.error === 'string' ? [this.$props.error] : []);
+        }
+    }
 };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",