@fishawack/lab-velocity 0.3.9 → 0.5.0

package/_base.scss

@@ -1 +1,5 @@
-@import "element-plus/theme-chalk/base";
+@import "element-plus/theme-chalk/base";
+@import "element-plus/theme-chalk/el-message-box";
+@import "element-plus/theme-chalk/el-message";
+@import "element-plus/theme-chalk/el-notification";
+@import "element-plus/theme-chalk/el-overlay";

package/components/_icon.scss

@@ -1,8 +1,8 @@
-@import "@fishawack/lab-ui/_icon.scss";
+// @import "@fishawack/lab-ui/_icon.scss";
 
 .vel-icon {
 
-    .el-link &, .el-button & {
+    .el-link &, .el-button &, .vel-side-bar__button & {
         width: 1em;
         min-width: 1em;
         padding-bottom: 0px;

package/components/_menu.scss

@@ -1,47 +1,95 @@
 @import 'element-plus/theme-chalk/el-menu';
 @import 'element-plus/theme-chalk/el-menu-item';
+@import 'element-plus/theme-chalk/el-sub-menu';
 
-ul.el-menu--vertical {
+ul.vel-menu  {
     li {
         --el-menu-level-padding : 0;
         padding-right: 0px;
     }
-
-    a {
-        padding: 1.5 * $spacing 2.5 * $spacing;
-        height: 100%;
+    .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;
         width: 100%;
-        border-left: solid .5 * $spacing $color8;
-        box-sizing: border-box;
         display: flex;
         align-items: center;
         overflow: hidden;
-        font-size: get-ratio(18px);
-
-        &.active{
-            border-left-color: $color1;
+        .vel-icon {
+            vertical-align: middle;
+            width: 2.5 * $spacing;
+            min-width: 2.5 * $spacing;
+            fill: currentColor;
+            margin-right: .5 * $spacing;
+            * {
+                vertical-align: middle;
+            }
         }
 
-        .icon {
+    }
+
+    a {
+        height: 100%;
+        box-sizing: border-box;
+        border-left: solid .5 * $spacing $color8;
+        .vel-icon {
             width: 2.5 * $spacing;
             max-width: 2.5 * $spacing;
             min-width: 2.5 * $spacing;
             padding-bottom: 0px;
-             * {
-                vertical-align: middle;
-             }
         }
+        &.active{
+            border-left-color: $color1;
+        }
+
     }
     
-    span {
+    span, .el-sub-menu__icon-arrow {
         opacity: 0;
         transition: .2s ease-in-out opacity;
         margin-left: .5 * $spacing;
     }
 
     .active & {
-        span {
+        span,.el-sub-menu__icon-arrow {
             opacity: 1;
         }
     }
+
+    .el-icon {
+        flex-shrink: 1;
+        width: auto;
+    }
+}
+
+
+
+.vel-sub-menu {
+    --el-menu-level-padding: 0;
+    .el-menu-item, .vel-sub-menu {
+        padding-left: 5 * $spacing !important;
+    }
+    .el-sub-menu__title {
+        height: auto;
+        line-height: get-ratio(48px);
+    }
+}
+
+.vel-menu-item {
+    height: auto;
+    line-height: get-ratio(48px);
+    * {
+        vertical-align: middle;
+    }
+}
+
+.vel-menu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    li:last-child {
+        margin-top: auto;
+        margin-bottom: 0px;
+    }
 }

package/components/_sidebar.scss

@@ -24,7 +24,7 @@
     &.active {
         flex-basis: 31.5 * $spacing;
 
-        .side-bar__button {
+        .vel-side-bar__button {
             transform: rotateY(180deg);
         }
     }
@@ -35,12 +35,6 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-    .icon {
-        width: 2.5 * $spacing;
-        min-width: 2.5 * $spacing;
-        padding-bottom: 2.5 * $spacing;
-        fill: currentColor;
-    }
     &:focus {
         outline: 1px solid;
     }

package/components/_table.scss

@@ -0,0 +1,20 @@
+@import "element-plus/theme-chalk/el-table-column";
+@import "element-plus/theme-chalk/el-table";
+@import "element-plus/theme-chalk/el-pagination";
+
+.el-table {
+    padding: get-ratio(8px);
+    thead tr .el-table__cell{
+        background-color: #F7F7F7;
+    }
+    .el-table__cell {
+        padding: get-ratio(8px) get-ratio(12px);
+    }
+}
+
+.table-wrapper {
+    // display: flex;
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+  }

package/components/_typography.scss

@@ -1,3 +1,4 @@
+@import "@fishawack/lab-ui/_typography.scss";
 /* Primary font
 -------------------------------------------------- */
 @font-face {

package/components/_upload.scss

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

package/form/Select.vue

@@ -18,23 +18,27 @@
             @clear="this.$emit('clear')"
             @blur="this.$emit('blur')"
         >
-            <el-option
-                v-if="!options[0]?.value"
-                v-for="(label, value) in options"
-                :key="value"
-                :label="label"
-                :value="castValue(value)"
-            >
-            </el-option>
-            <el-option
-                v-else
-                v-for="option in options"
-                :key="option.value"
-                :label="option.label"
-                :disabled="option.disabled"
-                :value="castValue(option.value)"
-            >
-            </el-option>
+            <template #default>
+                <slot name="default">
+                    <el-option
+                        v-if="!options[0]?.value"
+                        v-for="(label, value) in options"
+                        :key="value"
+                        :label="label"
+                        :value="castValue(value)"
+                    >
+                    </el-option>
+                    <el-option
+                        v-else
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :disabled="option.disabled"
+                        :value="castValue(option.value)"
+                    >
+                    </el-option>
+                </slot>
+            </template>
         </el-select>
     </XInput>
 </template>

package/form/Upload.vue

@@ -0,0 +1,79 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-upload
+            v-bind="$attrs.props"
+            :class="[`${baseClass}`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            :limit="limit"
+            :action="action"
+            v-model:file-list="content"
+            :auto-upload="autoUpload"
+            :required="required"
+        >
+            <template #trigger>
+                <slot name="trigger">
+                    <el-button type="primary">Select file</el-button>
+                </slot>
+            </template>
+            <template #tip>
+                <slot name="tip" />
+            </template>
+            <slot name="default">
+            </slot>
+        </el-upload>
+    </XInput>
+</template>
+
+<script>
+import { ElUpload } from "element-plus";
+import input from "./input.js";
+import ElButton from "../basic/Button.vue";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-upload",
+        },
+        limit: {
+            type: Number,
+            default: 1,
+        },
+        action: {
+            type: Function,
+            default: null,
+        },
+        autoUpload: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    components: {
+        XInput,
+        ElUpload,
+        ElButton,
+    },
+
+    emits: ["upload"],
+
+    watch: {
+        content: {
+            immediate: true,
+            handler(val) {
+                this.handleInput();
+            },
+        },
+    },
+
+};
+</script>

package/general.scss

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

package/index.js

@@ -10,6 +10,7 @@ export { default as file } from "./form/file.vue";
 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 SideBar } from "./layout/sideBar.vue";
 export { default as Footer } from "./layout/Footer.vue";

package/navigation/MenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-menu-item v-bind="$props">
+    <el-menu-item class="vel-menu-item" v-bind="$props">
       <template #title>
         <slot name="title" />
       </template>

package/navigation/SubMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-sub-menu v-bind="$props">
+    <el-sub-menu class="vel-sub-menu" v-bind="$props">
       <template #title>
         <slot name="title" />
       </template>

package/package.json

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