@fishawack/lab-velocity 0.6.4 → 0.8.0

package/_defaults.scss

@@ -10,3 +10,12 @@ $spacing: get-ratio(8px);
     margin-left: 0;
     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

@@ -28,4 +28,5 @@ $color8: #f2f2f2; //Used
 $color9: #ff0000;
 $color10: #dcdbdb;
 $color11: #8C8C8C; //Used
-$color12: #5C5C5C;
+$color12: #5C5C5C;
+$colorAlert: #D53A3A;

package/basic/Button.vue

@@ -1,6 +1,6 @@
 <template>
     <el-button 
-        :class="[`button ${baseClass}__button`]" 
+        :class="[`vel-button button ${baseClass}__button`]" 
         :name="name" 
         :id="name" 
         :disabled="disabled"

package/components/_alert.scss

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

package/components/_basic.scss

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

package/components/_button.scss

@@ -1,6 +1,8 @@
 @import "element-plus/theme-chalk/el-button";
 
-
+.vel-button {
+    --el-font-size-base:get-ratio(16px);
+}
 .el-button--default {
     border: solid get-ratio(1px) $color5;
     &:hover {
@@ -17,6 +19,7 @@
 .el-button--primary {
     background-color: $color1;
     color: $color0; 
+    border-width: 0px;
 
     &:hover, &.is-loading {
         background-color: #5C5C5C;
@@ -105,11 +108,11 @@
 .el-button--default {
     font-size: get-ratio(16px);
     line-height: get-ratio(24px);
-    padding: $spacing 2 * $spacing;
+    padding: get-ratio(7px) get-ratio(16px);
 }
 
 .el-button--large {
-    padding: 1.5 * $spacing 2.5 * $spacing;
+    padding: get-ratio(15px) get-ratio(24px);
 }
 
 .el-button--small {

package/components/_collapse.scss

@@ -0,0 +1,25 @@
+
+@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);
+    .vel-icon {
+        vertical-align: middle;
+        width: 13px;
+        min-width: 13px;
+        fill: currentColor;
+        margin-right: 0.25rem;
+
+        svg {
+            vertical-align: middle;
+        }
+    }
+}
+
+.el-collapse {
+    --el-collapse-header-bg-color: transparent;
+    --el-collapse-content-bg-color: transparent;
+    --el-collapse-border-color: transparent;
+}

package/components/_datepicker.scss

@@ -1,8 +1,31 @@
 @import "element-plus/theme-chalk/el-date-picker";
 
-.vel-datepicker {   
+.vel-datepicker {
+    // --el-input-height:38px;
+
+    // &.el-input--large {
+        --el-input-height:46px;
+    // }
 }
 
 .vel-popper {
     border-color: red !important;
+}
+
+.vel-date-picker, .el-date-picker {
+    &.has-sidebar {
+        width: auto;
+
+        .el-picker-panel__body-wrapper {
+            display: flex;
+        }
+    }
+    .el-picker-panel__sidebar {
+        width: auto;
+        position: relative;
+    }
+    .el-picker-panel__body {
+        margin-left: 0px;
+        position: relative !important;
+    }
 }

package/components/_icon.scss

@@ -2,9 +2,15 @@
 
 .vel-icon {
 
-    .el-link &, .el-button &, .vel-side-bar__button &, .vel-basic & {
-        width: 1em;
-        min-width: 1em;
+    .el-link &, .el-button &, .vel-basic & {
+        width: get-ratio(16px);
+        min-width: get-ratio(16px);
+        padding-bottom: 0px;
+        line-height: 0px;
+    }
+    .vel-side-bar__button & {
+        width: get-ratio(20px);
+        min-width: get-ratio(20px);
         padding-bottom: 0px;
         line-height: 0px;
     }

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/_loader.scss

@@ -42,3 +42,9 @@
         transform: rotate(2turn);
     }
 }
+
+
+.loading {
+    animation: 4s spinning cubic-bezier(0.41, 0.26, 0.2, 0.62) infinite;
+    transform-origin: center;
+}

package/components/_pageTitle.scss

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

package/components/_select.scss

@@ -8,7 +8,7 @@
 .vel-select {   
     .el-select__wrapper {
         font-size: get-ratio(16px);
-        padding: 1.5 * $spacing;
+        padding: get-ratio(16px);
     }
     .el-select__input, .el-select__selected-item {
         line-height: get-ratio(16px);

package/components/_sidebar.scss

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     box-shadow: 0px $spacing * .5 $spacing * .5 0px hsla(0, 0%, 0%, 0.251);
-    min-height: 94.5vh;
+    min-height: 10vh;
     max-height: 100vh;
     overflow: hidden;
     transition: flex-basis .3s ease-in-out;
@@ -11,10 +11,12 @@
 
     position: sticky;
     top: 0vh;
+    padding-top: 2 * $spacing;
+
 
     > div {
         &:first-child {
-            flex-grow: .98;
+            flex-grow: .80;
         }
         &:last-child {
             margin-bottom: 5.5vh;
@@ -23,6 +25,7 @@
 
     &.active {
         flex-basis: 31.5 * $spacing;
+        min-width: 31.5 * $spacing;
 
         .vel-side-bar__button {
             transform: rotateY(180deg);
@@ -40,6 +43,13 @@
     }
 }
 
+.vel-side-bar__bottom {
+    display: flex;
+    justify-content: flex-end;
+    border-top: solid 1px #E6E6E6;
+    padding: $spacing $spacing * 1.5;
+}
+
 main {
     overflow: hidden;
 }

package/components/_tooltip.scss

@@ -0,0 +1 @@
+@import "element-plus/theme-chalk/el-tooltip";

package/components/_typography.scss

@@ -86,13 +86,13 @@
 h1,.h1 {
     font-size: get-ratio(48px);
     line-height: get-ratio(56px);
-    font-family: $secondaryFont;
+    font-family: $primaryFont;
 }
 
 h2, .h2 {
     font-size: get-ratio(36px);
     line-height: get-ratio(48px);
-    font-family : $primaryFont;
+    font-family : $secondaryFont;
 }
 
 h3, .h3 {
@@ -119,6 +119,15 @@ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
 }
 
 // may be project specific
+
+.font-secondary {
+    font-family: $secondaryFont;
+}
+
+.font-primary {
+    font-family: $primaryFont;
+}
+
 .text-10 {
     font-size: get-ratio(10px);
     line-height: get-ratio(16px);
@@ -131,10 +140,14 @@ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {
     font-size: get-ratio(14px);
     line-height: get-ratio(20px);
 }
+.font-16 {
+    font-size: get-ratio(16px);
+    line-height: get-ratio(24px);
+}
 
 .text-60 {
     font-size: get-ratio(60px);
     line-height: get-ratio(68px);
     font-weight: 500;
     font-family : $primaryFont;
-}
+}

package/form/DatePicker.vue

@@ -11,7 +11,8 @@
             :disabled-date="disabledDate"
 -           :placeholder="placeholder"
             :shortcuts="shortcuts"
-            class="w-100"
+            :size="size" 
+            class="w-100 vel-datepicker"
             v-model="content"
             @change="handleInput"
             :value-format="valueFormat"
@@ -56,6 +57,10 @@ export default {
             type: Array,
             default: [],
         },
+        size: {
+            type: String,
+            default: "default",
+        },
     },
     components: {
         XInput,

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/input.js

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

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";
@@ -23,14 +24,9 @@
 @import "./components/_header.scss";
 @import "./components/_pageTitle.scss";
 @import "./components/_form.scss";
+@import "./components/_alert.scss";
+@import "./components/_collapse.scss";
+@import "./components/_tooltip.scss";
 
 
-@import "./_base.scss";
-
-body {
-    font-family: $primaryFont, sans-serif;
-    font-size: get-ratio(16px);
-    line-height: 1.5;
-    color: $color1;
-    background-color: $color3;
-}
+@import "./_base.scss";

package/index.js

@@ -11,11 +11,15 @@ 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 Tooltip } from "./layout/Tooltip.vue";
 export { default as Footer } from "./layout/Footer.vue";
 export { default as Header } from "./layout/Header.vue";
 export { default as PageTitle } from "./layout/pageTitle.vue";
+export { default as Alert } from "./layout/Alert.vue";
+export { default as Tooltip } from "./layout/Tooltip.vue";
 export { default as Menu } from "./navigation/Menu.vue";
 export { default as MenuItem } from "./navigation/MenuItem.vue";
 export { default as MenuItemGroup } from "./navigation/MenuItemGroup.vue";

package/layout/Alert.vue

@@ -0,0 +1,38 @@
+<template>
+    <el-alert
+        class="mb-4 vel-alert"
+        :effect="effect"
+        :title="title"
+        :type="type"
+        :show-icon="showIcon"
+    />
+</template>
+
+<script>
+import { ElAlert } from "element-plus";
+export default {
+    name: "VPageTitle",
+
+    props: {
+        effect: {
+            type:String,
+            default:'dark'
+        },
+        title: {
+            type:String
+        },
+        type: {
+            type:String,
+            default:'error'
+        },
+        showIcon: {
+            type:Boolean,
+            default:true,
+        }
+    },
+
+    components: {
+        ElAlert,
+    },
+}
+</script>

package/layout/Footer.vue

@@ -7,9 +7,9 @@
         </div>
         <div class="vel-footer__bottom">
             <div class="vel-footer__bottom__links">
-                <p class="color-0">&copy; 2024 Avalere. Part of Avalere Health</p>
+                <p class="color-0">&copy;2025 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>
+                <el-link underline class="color-0 ml" href="https://avalerehealth.com/corporate-policies/" target="_blank">Corporate policies and compliance</el-link>
             </div>
             <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>

package/layout/Tooltip.vue

@@ -0,0 +1,36 @@
+<template>
+    <el-tooltip
+        class="vel-tooltip"
+        :trigger="trigger"
+        :placement="placement"
+    >
+        <template #content><slot name="content"></slot></template>
+        <slot/>
+    </el-tooltip>
+</template>
+
+<script>
+import { ElTooltip } from "element-plus";
+export default {
+    name: "Tooltip",
+
+    props: {
+        width: {
+            type:Number,
+            default:100
+        },
+        trigger: {
+            type:String,
+            default:'hover'
+        },
+        placement: {
+            type:String,
+            default:'top'
+        }
+    },
+
+    components: {
+        ElTooltip,
+    },
+}
+</script>

package/layout/sideBar.vue

@@ -4,8 +4,8 @@
             <slot name="navigation" />
         </div>
 
-        <div class="flex justify-end border-t-color-1 border-t-solid py px-1.5">
-            <button class="vel-side-bar__button pointer" @click="active = !active">
+        <div class="vel-side-bar__bottom">
+            <button class="vel-side-bar__button" @click="active = !active">
                 <slot name="expand">
                     >
                 </slot>

package/package.json

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