@fishawack/lab-velocity 2.0.0-beta.1 → 2.0.0-beta.3

package/_Build/vue/components/form/color.vue

@@ -0,0 +1,22 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-color-picker v-model="content" @change="handleInput" />
+    </XInput>
+</template>
+
+<script>
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: {
+        XInput,
+    },
+};
+</script>

package/_Build/vue/components/form/file.vue

@@ -0,0 +1,89 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <input
+            ref="input"
+            type="file"
+            class="absolute invisible top-0 left-0"
+            @change="onImageChange"
+        />
+        <div class="border-solid border border-color-6">
+            <el-empty
+                @click.prevent="$refs.input.click()"
+                class="p-0 w-100 block mx-auto cursor"
+                style="max-width: 150px"
+                :image="hasPreview && imgSrc"
+                :description="hasPreview ? 'Preview' : 'No preview available'"
+            />
+        </div>
+        <div class="text-center mt-0.5">
+            <el-button v-if="content" type="danger" @click="cancel"
+                >Clear</el-button
+            >
+        </div>
+    </XInput>
+</template>
+
+<script>
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: { XInput },
+
+    props: {
+        preview: {},
+    },
+
+    data() {
+        return {
+            imgSrc: null,
+        };
+    },
+
+    mounted() {
+        this.imgSrc = this.preview;
+    },
+
+    computed: {
+        hasPreview() {
+            return this.imgSrc &&
+                [".svg", ".jpg", ".png", "data:image/"].some((d) =>
+                    this.imgSrc.includes(d),
+                )
+                ? this.imgSrc
+                : "";
+        },
+    },
+
+    methods: {
+        onImageChange(e) {
+            if (!e.target.files.length) return;
+
+            let file = e.target.files[0];
+            let reader = new FileReader();
+
+            reader.readAsDataURL(file);
+
+            reader.onload = (e) => {
+                this.imgSrc = reader.result;
+            };
+
+            this.content = file;
+
+            this.handleInput();
+        },
+        cancel() {
+            this.$refs.input.value = null;
+            this.content = null;
+            this.imgSrc = this.preview;
+            this.handleInput();
+        },
+    },
+};
+</script>

package/_Build/vue/components/form/input.js

@@ -0,0 +1,79 @@
+export default {
+    props: {
+        type: {
+            type: String,
+            default: "text",
+        },
+        placeholder: {
+            type: String,
+            default: null,
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
+        modelValue: {
+            type: [String, Number, Array],
+            default: null,
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        id: {
+            type: String,
+            default: null,
+        },
+        size: {
+            type: String,
+            default: null,
+        },
+        error: {
+            type: [String, Object],
+            default: null,
+        },
+        baseClass: {
+            type: String,
+            default: null,
+        },
+        classes: {
+            type: String,
+            default: null,
+        },
+    },
+
+    emits: ["update:modelValue"],
+
+    data() {
+        return {
+            content: "",
+        };
+    },
+
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(val) {
+                this.content = val;
+            },
+        },
+    },
+
+    methods: {
+        handleInput() {
+            this.$emit("update:modelValue", this.content);
+        },
+    },
+};

package/_Build/vue/components/form/input.vue

@@ -0,0 +1,105 @@
+<template>
+    <div
+        class="form__group"
+        :class="{
+            [baseClass]: baseClass,
+            'form__group--error': hasError(name),
+            [classes]: classes,
+        }"
+    >
+        <label
+            v-if="(label || $slots.label) && inputType !== 'button'"
+            :class="{ [baseClass + '__label']: baseClass }"
+            :for="name"
+        >
+            <slot name="label">
+                <span v-html="label"></span>
+            </slot>
+        </label>
+
+        <slot />
+
+        <div
+            v-if="hasError(name)"
+            class="form__error"
+            :class="{ [baseClass + '__error']: baseClass }"
+        >
+            <small v-html="first(name)" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String,
+            default: null,
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        error: {
+            type: [String, Object],
+            default: null,
+        },
+        baseClass: {
+            type: String,
+            default: null,
+        },
+        classes: {
+            type: String,
+            default: null,
+        },
+        type: {
+            type: String,
+            default: null,
+        },
+        inputType: {
+            type: String,
+            default: "text",
+        },
+        size: {
+            type: String,
+            default: null,
+        },
+    },
+
+    methods: {
+        hasError(field) {
+            if (!this.$props?.error?.errors) {
+                if (typeof this.$props?.error === "string") {
+                    return true;
+                }
+                return false;
+            }
+            let hasError = this.$props.error.errors.hasOwnProperty(field);
+
+            if (!hasError) {
+                const errors = Object.keys(this.$props.error.errors).filter(
+                    (e) =>
+                        e.startsWith(`${field}.`) || e.startsWith(`${field}[`),
+                );
+
+                hasError = errors.length > 0;
+            }
+
+            return hasError;
+        },
+
+        first(field) {
+            return this.get(field)[0];
+        },
+
+        get(field) {
+            return (
+                this.$props.error?.errors?.[field] ||
+                (typeof this.$props.error === "string"
+                    ? [this.$props.error]
+                    : [])
+            );
+        },
+    },
+};
+</script>

package/_Build/vue/components/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/_Build/vue/components/layout/Footer.vue

@@ -0,0 +1,50 @@
+<template>
+    <footer class="vel-footer">
+        <div>
+            <h5 class="color-0">
+                <slot />
+            </h5>
+        </div>
+        <div class="vel-footer__bottom">
+            <div class="vel-footer__bottom__links">
+                <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/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
+                >
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script>
+import elLink from "../basic/link.vue";
+
+export default {
+    props: {
+        contact: {
+            required: true,
+            type: String,
+        },
+    },
+    components: {
+        elLink,
+    },
+};
+</script>

package/_Build/vue/components/layout/Header.vue

@@ -0,0 +1,13 @@
+<template>
+    <header class="vel-header">
+        <slot />
+
+        <div class="vel-header__list">
+            <slot name="links" />
+        </div>
+    </header>
+</template>
+
+<script>
+export default {};
+</script>

package/_Build/vue/components/layout/Loader.vue

@@ -0,0 +1,59 @@
+<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,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAAIi0lEQVR4Ae2XWY4kuRFEe7RBv9L9/3UJ3URXkDACBO0rX1S+KEtvZ2TkND+EAR1gmflK0oZR1fPdly9ffjvWfy/Wf0pu5hvvMGPwzn8VN5/IudNPXnP6IrXyxCtOzmW//oE/GwXfjTUzimo+/cwbTzRPLLm+++K7qLtr1LpqT43ri9TDsUTzPwhfCcolq2VMzubwihmTMw+ei75vtSqA8zJOLP07/K2eVYIiDtYhMQ6+WkD2u7IqFrXGkhtbgq8E/cnYmd8VaYpGTN4hB6wipn+H574dvyOCfXdqu5rud2UXO3pfCcphFMuDpS/vMGNwFpu+Y86oPV68xjvfWpGajhv7JrwjaH2leUl5h8Q4HPjOGuWXxsxq3yTCGPZO//R1MueOoBxeweApsPEOFdF+/Q6p0Zw1842DCtHFzCVmT8bv8ksxOc9dQVNEDuWljYvGUzTrMyYnh3X+R+b5JxfXKlcU86CxGb4SKPPJZ/MOQRGjFtBcTdGIJ0cMLEWR15zxj47PnqzLnLwi59Uqz7vUmsxVrmBizd/yZy9UkauwMyE5OKKYV7jqp3DWeOnMGXuFXBLzssmNWTMT6k68q+liLz/5TlhFmqFCmdd/hYhRRdUnV02hEivHZ3l5UG4u0ZyYvdZlztiJsxdaD684xr2ocX2QlXFjHTKPODbDj+znTw6vyRPPy42iGa+iVN++jCc3/xUiKJf/KvGIMUSzjpiCkUMI/crx313OBGfGeTX51R26HPdIkeQV6TWWc2qM89z+5B1Kk+J1SJ6NrkSkj3m1ZoTOGDyN2mpejrj8h2AKI6/oXOP6X+HdT55DK2ByYyIXh3fG5lXE6ts3i5tPzEsRT78KgJ/LWmP49ogZs36Krz55GxmOIZYbKGIiNdRWQfDtrbyrZU5nnudd5EwpkP01bk1F60FzGZN/uftCFcOBKSIb6CtWFYM+c/JOyIx1M7qYl6noxUXy8LoyLk+sHH+6FJSLTIseOQ6CKS6cHkyEU5fCwOnBqLPfOLGspw4z9uE9/6Qn99RXrPThNW6+5modfq1NPzknfPo/JQJXphAeAp8NE6/66XOGSEzhKs5m0YOBs5VCyMHZYo45ubPt17/Ed16og9hAQQY9X4pxYtXopQdzThWw86knXo0ZmLM67AQyVpF+Y87C77ixisd58o8SAQ5fC9NnE8VMTi9GbWfGQfvr3BSUGfo5zx5i8kRFEcnJwerXmPlEeOcbH+nPs6SgWUARpsBsjKUY+G6Ur494Neow98g5zMYHFRG8Mue4f2JyZr5a1lMnT4TfXU9/5RWvNnOxFMA8cThW8SP6+TPzybmEsztRFfhzUn+5FKNy/KvFeczLwcqNdcj5jnh9oTNRr4bQw4Ew6q4s83DFpJ85+IoIVrMfrEtRxH+PGrnYxcgxq2LG6l7pj9bPs3R/lLhINsx4DoLTx6G0KghzNGcqKMii/46o9lPfLYUDk3e1xpgJz9nyGY7ys56a45P3Uilk8tkwBSQvZya8+sS1nPfTEcRXUMUUnQVmH9zLK4iogPqgMTFzdZb7UCPvcKSf8oefn3wt6C5RBysccUxfjq8lN0Zfiimn1mWtmGdIYZIjXC5ynZj2MBPu7OTGKo7ys/7kKSgNXMLGsyhi5hLp4QCJcmZg+NWY4Qt1HnOuRLUOpDZXJ6Ax6maCOisx9+n4GHfqRB47sP4ONZFFOTDzxDkoiGAVieUa7lRYZymmaD+9mrUzMRUxcSaosxLhrxZnseaJ+0IzqDgZo7n6xKyFc2h8UTESuWSah7JfkahDVHox0fqsS+Hk/xo9cpB60V7QfXOuvOIo70V8xI+8gtLMoUEssXL8btmfCJ8t9tGc52V9oSlqrVEkhFJAMLkiis4XmQl39iscpWet/AlT0KcEzjA2wNwoubGKKSiCeHiQiykws+CYMzgPdfxuTVGHe5h1zurETEGzDu5iDjzR2RXZ2FjHjR3IBfKCNGJX2A03BiqiyPzkXMQ9FXSEDqOfvELRZ23mzPsi/znqWPqKSp0iVvTMxOWJI3zGO24s8fx3KEGMgZiY3M2MWWM8UQFFchwccUSFEnMuQvAf25dKDqM3xVRIUUGpcdFTl2clLhdH6Cmmf4Vnzk+eAMZQTX6FmYPnQkx8Dw0qMIhYCACvoirGPyLvLAVVRGrkoL1iiun5PJN+4hhx3kPeYcZOfkfQs3gQNsY69FDm9T18ImJyYcQUFdZ+4j8fi1oEZx4xREPEvz8WXFHrp0597lvPNNKneOaMdTiLnfErQc8iyDA21OQd1oPheyk5vqJyaTiCpqjUINDfHnF8xSTmUsz6Oqlnuafn6nCUncLKQYx6TPzwJv4rQV8NcpMOMwZ35SXhCMriLCzFHfSI/3UgQlOLeH+JxStVUOeA1OY+7i2O9HkeeeIVrzl8jNnTP0rkqh0NEZz5xjsklsuLgwjBJ/6LByIshmh/HIsX+Oex/vRYCK2YfurOYw8Fdb8ROveWJ15xchizZnbk6gul+KrJYbOaGtfvkFguxUCcXz4W4mLfj8XL/P1YfxgLYRFaIX2VOU8+ys47EdOSE6v+rM54xaO/EzQLZ5tkzRWf9WdcLvqyEOlXY/36scFvBv5uLIRVSHpyDfdJGGcSr3aVq7V3/GMefz053Epj5pXVfPWvev/vc1yGF3HXflSXv3vpd+oQaPXTf2f/H10t/xzZtlCBLehCMRm1Bd2CLlZg8bj9QregixVYPG6/0C3oYgUWj9svdAu6WIHF4/YL3YIuVmDxuP1Ct6CLFVg8br/QLehiBRaP2y90C7pYgcXj9gvdgi5WYPG4/UK3oIsVWDxuv9At6GIFFo/bL3QLuliBxeP2C92CLlZg8bj9QregixVYPG6/0C3oYgUWj9svdAu6WIHF4/YL3YIuVmDxuP1Ct6CLFVg8br/QxYL+DzAT0LD/r1MPAAAAAElFTkSuQmCC"
+                    />
+                    <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/_Build/vue/components/layout/Tooltip.vue

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

package/_Build/vue/components/layout/pageTitle.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="vel-page-title">
+        <h2 class="h2" v-html="title" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: "VPageTitle",
+
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+    },
+};
+</script>

package/_Build/vue/components/layout/sideBar.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="vel-side-bar" :class="{ active: active }">
+        <div>
+            <slot name="navigation" />
+        </div>
+
+        <div class="vel-side-bar__bottom">
+            <button class="vel-side-bar__button" @click="active = !active">
+                <slot name="expand"> > </slot>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SideBar",
+
+    data() {
+        return {
+            active: true,
+        };
+    },
+};
+</script>

package/_Build/vue/components/navigation/Breadcrumbs.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-breadcrumb class="vel-breadcrumb" :seperator="''">
+        <slot name="default">
+            <template v-for="(crumb, index) in crumbs">
+                <el-breadcrumb-item :to="crumb.href"
+                    >{{ crumb.text }}
+                </el-breadcrumb-item>
+                <template v-if="index !== crumbs.length - 1">
+                    <span class="el-breadcrumb__item">
+                        <span
+                            class="el-breadcrumb__separator inline-block"
+                            role="presentation"
+                        >
+                            <slot name="seperator">/</slot>
+                        </span>
+                    </span>
+                </template>
+            </template>
+        </slot>
+    </el-breadcrumb>
+</template>
+
+<script>
+import { ElBreadcrumb } from "element-plus";
+import ElBreadcrumbItem from "./BreadcrumbsItem.vue";
+export default {
+    props: {
+        crumbs: {
+            required: false,
+        },
+    },
+    components: {
+        ElBreadcrumb,
+        ElBreadcrumbItem,
+    },
+};
+</script>

package/_Build/vue/components/navigation/BreadcrumbsItem.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-breadcrumb-item v-bind="$props">
+        <slot></slot>
+    </el-breadcrumb-item>
+</template>
+
+<script>
+import { ElBreadcrumbItem } from "element-plus";
+export default {
+    props: {
+        crumbs: {
+            required: false,
+        },
+    },
+    components: {
+        ElBreadcrumbItem,
+    },
+};
+</script>

package/_Build/vue/components/navigation/Menu.vue

@@ -0,0 +1,14 @@
+<template>
+    <el-menu class="vel-menu">
+        <slot />
+    </el-menu>
+</template>
+
+<script>
+import { ElMenu } from "element-plus";
+export default {
+    components: {
+        ElMenu,
+    },
+};
+</script>

package/_Build/vue/components/navigation/MenuItem.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-menu-item :index="index" class="vel-menu-item" v-bind="$props">
+        <template #title>
+            <slot name="title" />
+        </template>
+        <template #default>
+            <slot name="default" />
+        </template>
+    </el-menu-item>
+</template>
+
+<script>
+import { ElMenuItem } from "element-plus";
+export default {
+    components: {
+        ElMenuItem,
+    },
+    props: ["index"],
+};
+</script>

package/_Build/vue/components/navigation/MenuItemGroup.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-sub-menu :index="index" v-bind="$props">
+        <template #title>
+            <slot name="title" />
+        </template>
+        <template #default>
+            <slot name="default" />
+        </template>
+    </el-sub-menu>
+</template>
+
+<script>
+import ElSubMenu from "./SubMenu.vue";
+export default {
+    components: {
+        ElSubMenu,
+    },
+    props: ["index"],
+};
+</script>