@fishawack/lab-velocity 0.4.0 → 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/_menu.scss

@@ -16,14 +16,14 @@ ul.vel-menu  {
         align-items: center;
         overflow: hidden;
         .vel-icon {
-            * {
-                vertical-align: middle;
-            }
             vertical-align: middle;
             width: 2.5 * $spacing;
             min-width: 2.5 * $spacing;
             fill: currentColor;
             margin-right: .5 * $spacing;
+            * {
+                vertical-align: middle;
+            }
         }
 
     }

package/components/_upload.scss

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

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/package.json

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