@fishawack/lab-velocity 0.6.2 → 0.6.4

package/_defaults.scss

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

package/basic/Button.vue

@@ -38,6 +38,10 @@ export default {
             type: String,
             default: null,
         },
+        name: {
+            type: String,
+            default: null,
+        },
         nativeType: {
             type: String,
             default: "button",
@@ -54,6 +58,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
         text: {
             type: Boolean,
             default: false,

package/basic/link.vue

@@ -2,7 +2,7 @@
     <el-link 
         :class="[`link ${baseClass} vel-link--${size} ${ underline ? 'vel-link--underline' : ''}`]" 
         :name="name" 
-        :underline="true" 
+        :underline="underline" 
         :id="name" 
         :disabled="disabled"
         :href="href"
@@ -28,7 +28,7 @@ export default {
         },
         underline: {
             type: Boolean,
-            default: false
+            default: true
         },
         href: {
             type: String,
@@ -42,6 +42,18 @@ export default {
             type: String,
             default: "default",
         },
+        name: {
+            type: String,
+            default: null,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
     },
 
     components: {

package/components/_basic.scss

@@ -10,4 +10,7 @@
     .el-input__inner {
         --el-input-inner-height:38px
     }
+    .el-input-group__append, .el-input-group__prepend {
+        padding: 0 2 * $spacing;
+    }
 }

package/components/_footer.scss

@@ -1,8 +1,6 @@
-footer {
+.vel-footer {
     background-color: $color1;
-    // width: 100%;
-    min-height: $spacing * 20.5;
-    padding: $spacing * 5 $spacing * 3;
+    padding: $spacing * 3 $spacing * 3 $spacing * 2 $spacing * 3;
     box-sizing: border-box;
     width: 100%;
 
@@ -13,5 +11,36 @@ footer {
         display: inline-block;
         margin-right: $spacing;
     }
+    * {
+        font-size: get-ratio(14px);
+        line-height: get-ratio(21px);
+    }
+}
+
+.vel-footer__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    align-content: stretch;
+    flex-basis: 100%;
+    justify-content: space-between;
+    margin-top: 3.5 * $spacing;
+    
+    > * {
+        max-width: 50%;
+        flex-basis: 50%;
+    }
+}
+.vel-footer__bottom__links {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: self-end;
+    flex-basis: 100%;
+}
 
-}
+.vel-footer__bottom__end {
+    justify-content: end;
+    flex-wrap: wrap;
+    align-items: self-end;
+    display: flex;
+}

package/components/_form.scss

@@ -2,6 +2,7 @@
 .form__group {
     label {
         margin-bottom: $spacing;
+        display: inline-block;
     }
 
     &:not(:last-child) {

package/components/_header.scss

@@ -3,6 +3,20 @@
     background-color: $color0;
     width: 100%;
     box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+    flex-basis: 100%;
+    justify-content: space-between;
+    padding: 1.5 * $spacing 3 * $spacing;
+
+    > * {
+        max-width: 50%;
+        flex-basis: 50%;
+        justify-content: flex-end !important;
+
+    }
 
     .icon {
         min-width: $spacing * 2.5;
@@ -14,6 +28,15 @@
 }
 
 .vel-header__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    align-content: stretch;
+    flex-basis: 100%;
+    padding-right: 1.5 * $spacing;
+    margin-left: -1.5 * $spacing;
+    margin-right: -1.5 * $spacing;
+
     > div {
         align-items: center;
         &:not(:last-child) {

package/components/_icon.scss

@@ -2,7 +2,7 @@
 
 .vel-icon {
 
-    .el-link &, .el-button &, .vel-side-bar__button & {
+    .el-link &, .el-button &, .vel-side-bar__button &, .vel-basic & {
         width: 1em;
         min-width: 1em;
         padding-bottom: 0px;

package/components/_link.scss

@@ -2,27 +2,27 @@
 
 .vel-link.el-link--default {
     &:hover{
-        color:$color12;
+        color:currentColor;
         &:after{
-            border-color: $color12;
+            border-color: currentColor;
         }
     }
 }
 .vel-link--underline.vel-link {
     &:after {
-        border-bottom: 1px solid $color12;
+        border-bottom: 1px solid currentColor;
         bottom: 0;
         content: "";
         height: 0;
         left: 0;
         position: absolute;
         right: 0;
-        border-color: $color12;
+        border-color: currentColor;
     }
     &:hover{
-        color:$color12;
+        color:currentColor;
         &:after{
-            border-color: $color12;
+            border-color: currentColor;
         }
     }
 }

package/components/_menu.scss

@@ -10,7 +10,7 @@ ul.vel-menu  {
     .el-sub-menu__title, a, .el-menu-item > *  {
         font-size: get-ratio(18px);
         border-left: solid .5 * $spacing transparent;
-        padding: 0 2.5 * $spacing !important;
+        padding: 0 2.5 * $spacing;
         width: 100%;
         display: flex;
         align-items: center;
@@ -28,6 +28,10 @@ ul.vel-menu  {
 
     }
 
+    .el-sub-menu__title {
+        padding: 0 2.5 * $spacing !important;
+    }
+
     a {
         height: 100%;
         box-sizing: border-box;
@@ -92,4 +96,17 @@ ul.vel-menu  {
         margin-top: auto;
         margin-bottom: 0px;
     }
-}
+
+    .el-sub-menu {
+
+        .vel-menu-item {
+            a.active {
+                border-left-color: transparent;
+            }
+        }
+        .vel-menu-item a{
+            padding-left: 0px;
+            padding-right: 0px;
+        }
+    }
+}

package/form/basic.vue

@@ -20,8 +20,13 @@
             :parser="parser"
             :formatter="formatter"
         >
-            <template v-if="prepend" #prepend>{{ prepend }}</template>
-            <template v-if="append" #append>{{ append }}</template>
+            
+            <template v-if="prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+            <template v-if="append" #append>
+                <slot name="append" />
+            </template>
         </el-input>
     </XInput>
 </template>
@@ -56,11 +61,11 @@ export default {
             default: null,
         },
         parser: {
-            type: String,
+            type: Function,
             default: null,
         },
         formatter: {
-            type: String,
+            type: Function,
             default: null,
         },
     },

package/form/input.js

@@ -33,7 +33,7 @@ export default {
             default: null,
         },
         error: {
-            type: String,
+            type: [String,Object],
             default: null,
         },
         baseClass: {

package/general.scss

@@ -25,4 +25,12 @@
 @import "./components/_form.scss";
 
 
-@import "./_base.scss";
+@import "./_base.scss";
+
+body {
+    font-family: $primaryFont, sans-serif;
+    font-size: get-ratio(16px);
+    line-height: 1.5;
+    color: $color1;
+    background-color: $color3;
+}

package/layout/Footer.vue

@@ -1,29 +1,35 @@
 <template>
     <footer class="vel-footer">
         <div>
-            <h5 class="color-0 flex items-center">
+            <h5 class="color-0">
                 <slot/>
             </h5>
         </div>
-        <div class="grid grid--1/2 justify-between mt-3.5">
-            <div class="grid">
-                <p class="color-0">&copy; 2024 Avalere Avalere Health</p>
-                <a class="color-0 link ml" href="https://avalerehealth.com/privacy-policy/" target="_blank">Privacy Policy</a>
+        <div class="vel-footer__bottom">
+            <div class="vel-footer__bottom__links">
+                <p class="color-0">&copy; 2024 Avalere. Part of Avalere Health</p>
+                <el-link underline class="color-0 ml" href="https://avalerehealth.com/privacy-policy/" target="_blank">Privacy Policy</el-link>
+                <el-link underline class="color-0 ml" href="https://avalerehealth.com/privacy-policy/" target="_blank">Terms of Use</el-link>
             </div>
-            <div class="justify-end flex">
-                <p class="color-0">Have a question? <a class="link" :href="contact">Contact our Support Team</a></p>
+            <div class="vel-footer__bottom__end">
+                <p class="color-0">Have a question?</p><el-link underline class="color-0 ml" :href="contact">Contact our Support Team</el-link>
             </div>
         </div>
     </footer>
 </template>
 
 <script>
+import elLink from "../basic/link.vue";
+
 export default {
     props: {
         contact: {
             required:true,
             type:String
         }
+    },
+    components: {
+        elLink
     }
 }
 </script>

package/layout/Header.vue

@@ -1,8 +1,8 @@
 <template>
-    <header class="vel-header grid justify-between items-center justify-end-dive grid--1/2 p-1.5">
+    <header class="vel-header">
         <slot/>
         
-        <div class="grid pr-1.5 grid--gutters-x-1.5 vel-header__list">
+        <div class="vel-header__list">
             <slot name="links"/>
         </div>
     </header>

package/layout/pageTitle.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="vel-page-title">
-        <h2 class="h1" v-html="title" />
+        <h2 class="h2" v-html="title" />
     </div>
 </template>
 

package/navigation/Menu.vue

@@ -1,8 +1,6 @@
 <template>
   <el-menu
     class="vel-menu"
-    @open="handleOpen"
-    @close="handleClose"
   >           
     <slot />
   </el-menu>

package/navigation/MenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-menu-item class="vel-menu-item" v-bind="$props">
+    <el-menu-item :index="index" class="vel-menu-item" v-bind="$props">
       <template #title>
         <slot name="title" />
       </template>
@@ -14,6 +14,7 @@ import { ElMenuItem } from "element-plus";
 export default  {
   components: {
     ElMenuItem
-  }
+  },
+  props: ['index']
 }
 </script>

package/navigation/MenuItemGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-sub-menu v-bind="$props">
+    <el-sub-menu :index="index" v-bind="$props">
       <template #title>
         <slot name="title" />
       </template>
@@ -10,10 +10,11 @@
 </template>
 
 <script>
-import { ElMenuItemGroup } from "element-plus";
+import ElSubMenu from "./SubMenu.vue";
 export default  {
   components: {
-    ElMenuItemGroup
-  }
+    ElSubMenu
+  },
+  props:['index']
 }
 </script>

package/navigation/SubMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-sub-menu class="vel-sub-menu" v-bind="$props">
+    <el-sub-menu :index="index" class="vel-sub-menu" >
       <template #title>
         <slot name="title" />
       </template>
@@ -14,6 +14,7 @@ import { ElSubMenu } from "element-plus";
 export default  {
   components: {
     ElSubMenu
-  }
+  },
+  props: ['index']
 }
 </script>

package/package.json

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