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

@@ -0,0 +1,44 @@
+.vel-loader {
+    position: relative;
+    display: block;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    background-color: inherit;
+    
+    svg {
+        .circle {
+            animation: 2s spinning cubic-bezier(0.41, 0.26, 0.2, 0.62) infinite;
+            transform-origin: center;
+        }
+    }
+}
+
+.vel-loader--l {
+    width: 10rem;
+    height: 10rem;
+
+    &::before {
+        border-width: 0.6rem;
+    }
+
+    @include breakpoint (max-width $mobileMax) {
+        width: 6rem;
+        height: 6rem;
+
+        &::before {
+            border-width: 0.4rem;
+        }
+    }
+}
+
+
+@keyframes spinning {
+    from {
+        transform: rotate(0);
+    }
+
+    to {
+        transform: rotate(2turn);
+    }
+}

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";
@@ -23,4 +24,5 @@ export { default as Breadcrumbs } from "./navigation/Breadcrumbs.vue";
 export { default as BreadcrumbsItem } from "./navigation/BreadcrumbsItem.vue";
 
 export { default as Icon } from "./Icon.vue";
-export { default as Svg } from "./Svg.vue";
+export { default as Svg } from "./Svg.vue";
+export { default as Loader } from "./layout/Loader.vue";

package/layout/Loader.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="vel-loader">
+        <slot>
+            <svg viewBox="0 0 84 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <defs>
+                    <pattern id="e11rz3cojb" width="100%" height="100%" patternUnits="objectBoundingBox">
+                        <use xlink:href="#w1y9w0pc6a"/>
+                    </pattern>
+                    <image id="w1y9w0pc6a" width="84" height="84" xlink:href="data:image/png;base64,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"/>
+                    <path id="3vizvfpwxc" d="M0 0h39.967v39.966H0z"/>
+                </defs>
+                <g fill="none" fill-rule="evenodd">
+                    <path class="circle" d="M42 0C18.804 0 0 18.804 0 42s18.804 42 42 42 42-18.804 42-42S65.196 0 42 0zm0 4c20.987 0 38 17.013 38 38S62.987 80 42 80 4 62.987 4 42 21.013 4 42 4z" fill="url(#e11rz3cojb)" fill-rule="nonzero"/>
+                    <g transform="translate(22 22)">
+                        <mask id="y3cby6hymd" fill="#fff">
+                            <use xlink:href="#3vizvfpwxc"/>
+                        </mask>
+                        <path d="m16.552 21.54 4.036-12.407h.312l4.204 12.946c2.503 1.604 4.81 3.465 6.752 5.604l-.38.486c-3.45-2.688-8.243-5.126-14.924-6.63m23.414 18.425L26.189 0h-10.89L8.295 20.29a82.37 82.37 0 0 0-6.892-.306L0 24.047c2.37.103 4.628.329 6.769.664L1.502 39.966h9.055l4.314-13.26c7.747 2.716 13.03 7.333 15.105 13.26h9.99v-.002" fill="#0D0D0D" mask="url(#y3cby6hymd)"/>
+                    </g>
+                </g>
+            </svg>
+                
+        </slot>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        reversed: {
+            type: Boolean,
+            default: false,
+        }
+    },
+    components: {
+    }
+};
+</script>

package/package.json

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