@fishawack/lab-velocity 0.6.3 → 0.7.0

package/_defaults.scss

@@ -6,6 +6,11 @@ $colors: variables.dynamic('color', module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
 $spacing: get-ratio(8px);
+.container {
+    margin-left: 0;
+    padding: 0px 5 * $spacing;
+}
+
 
 body {
     font-family: $primaryFont, sans-serif;
@@ -13,8 +18,4 @@ body {
     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/_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/_inputNumber.scss

@@ -0,0 +1,17 @@
+@import "element-plus/theme-chalk/el-input-number";
+
+.vel-input-number {
+    display: block;
+    font-size: 1rem;
+
+    .el-input__wrapper {
+        // padding: .5 * $spacing $spacing;
+    }
+
+    .el-input__inner {
+        --el-input-inner-height:38px
+    }
+    .el-input-group__append, .el-input-group__prepend {
+        padding: 0 2 * $spacing;
+    }
+}

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/form/InputNumber.vue

@@ -0,0 +1,90 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-input-number
+            v-bind="{ ...$attrs, class: undefined }"
+            :class="[`${baseClass}`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :size="size"
+            :precision="precision"
+            :step="step"
+            :controls="controls"
+            :step-strictly="stepStrictly"
+            :placeholder="placeholder"
+            v-model="content"
+            :required="required"
+            @input="handleInput"
+        >
+
+            <template #prefix>
+                <slot name="prefix" />
+            </template>
+            <template #suffix>
+                <slot name="suffix" />
+            </template>
+            <template #decrease-icon>
+                <slot name="decrease-icon" />
+            </template>
+            <template #increase-icon>
+                <slot name="increase-icon" />
+            </template>
+        </el-input-number>
+    </XInput>
+</template>
+
+<script>
+import { ElInputNumber } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-input-number",
+        },
+        min: {
+            type: Number,
+            default: -Infinity,
+        },
+        max: {
+            type: Number,
+            default: Infinity,
+        },
+        precision: {
+            type: Number,
+            default: null,
+        },
+        step: {
+            type: Number,
+            default: 1,
+        },
+        stepStrictly: {
+            type: Boolean,
+            default: true,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        controls: {
+            type: Boolean,
+            default: true,
+        }
+    },
+
+    components: {
+        XInput,
+        ElInputNumber,
+    },
+};
+</script>

package/form/basic.vue

@@ -61,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

@@ -21,7 +21,7 @@ export default {
             default: false,
         },
         modelValue: {
-            type: String,
+            type: [String,Number],
             default: null,
         },
         label: {
@@ -33,7 +33,7 @@ export default {
             default: null,
         },
         error: {
-            type: String,
+            type: [String,Object],
             default: null,
         },
         baseClass: {

package/general.scss

@@ -14,6 +14,7 @@
 @import "./components/_cascader.scss";
 @import "./components/_wysiwyg.scss";
 @import "./components/_upload.scss";
+@import "./components/_inputNumber.scss";
 
 @import "./components/_breadcrumbs.scss";
 @import "./components/_sidebar.scss";

package/index.js

@@ -11,6 +11,7 @@ export { default as Select } from "./form/Select.vue";
 export { default as Switch } from "./form/Switch.vue";
 export { default as Wysiwyg } from "./form/Wysiwyg.vue";
 export { default as Upload } from "./form/Upload.vue";
+export { default as InputNumber } from "./form/InputNumber.vue";
 
 export { default as SideBar } from "./layout/sideBar.vue";
 export { default as Footer } from "./layout/Footer.vue";

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/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.3",
+  "version": "0.7.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",