@fishawack/lab-velocity 2.0.0-beta.4 → 2.0.0-beta.41

package/_Build/vue/components/form/Select.vue

@@ -5,6 +5,7 @@
         </template>
 
         <el-select
+            ref="select"
             v-model="content"
             :class="baseClass"
             :multiple="multiple"
@@ -14,32 +15,35 @@
             :collapse-tags="collapseTags"
             :filterable="filterable"
             :value-on-clear="null"
-            @change="handleInput"
-            @clear="this.$emit('clear')"
-            @blur="this.$emit('blur')"
+            remote-show-suffix
+            :remote="!!endpoint"
+            :remote-method="endpoint ? handleSearch : undefined"
+            :loading="initialLoading"
             :empty-values="[null, undefined]"
+            :value-key="effectiveValueKey"
+            @change="handleInput"
+            @clear="$emit('clear')"
+            @blur="$emit('blur')"
+            @visible-change="handleVisibleChange"
         >
             <template #default>
                 <slot name="default">
                     <el-option
-                        v-if="!options[0]?.label"
-                        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"
+                        v-for="option in currentOptions"
+                        :key="option[effectiveValueKey]"
+                        :label="option[labelKey]"
                         :disabled="option.disabled"
-                        :value="castValue(option.value)"
+                        :value="option"
                     >
                     </el-option>
                 </slot>
             </template>
+            <template v-if="endpoint" #loading>
+                <div class="el-select-dropdown__loading">Loading...</div>
+            </template>
+            <template #label="{ value }">
+                {{ value[labelKey] || value }}
+            </template>
         </el-select>
     </XInput>
 </template>
@@ -47,17 +51,26 @@
 <script>
 import { ElSelect } from "element-plus";
 import { ElOption } from "element-plus";
+import { ElNotification } from "element-plus";
 import input from "./input.js";
 import XInput from "./input.vue";
 import _ from "lodash";
+import axios from "axios";
 
 export default {
+    components: {
+        XInput,
+        ElOption,
+        ElSelect,
+    },
+
     mixins: [input],
+
     props: {
         ...input.props,
         modelValue: {
-            type: Array,
-            default: [],
+            type: [Array, Number],
+            default: () => [],
         },
         baseClass: {
             type: String,
@@ -77,32 +90,209 @@ export default {
         },
         options: {
             type: Array,
-            default: [],
+            default: () => [],
         },
         multiple: {
             type: Boolean,
             default: false,
         },
+        endpoint: {
+            type: String,
+            default: null,
+        },
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
+        labelKey: {
+            type: String,
+            default: "label",
+        },
+        valueKey: {
+            type: String,
+            default: null,
+        },
+        searchParam: {
+            type: String,
+            default: "name",
+        },
+        perPage: {
+            type: Number,
+            default: 10,
+        },
     },
 
-    components: {
-        XInput,
-        ElOption,
-        ElSelect,
+    emits: ["change", "clear", "blur"],
+
+    data() {
+        return {
+            initialLoading: false,
+            loadingMore: false,
+            asyncOptions: [],
+            currentPage: 1,
+            hasMore: false,
+            searchQuery: "",
+            lastSearchQuery: "",
+            initialLoadDone: false,
+            scrollListener: null,
+            wrapScrollTop: 0,
+            wrapScrollLeft: 0,
+        };
+    },
+
+    computed: {
+        currentOptions() {
+            // If endpoint is provided, use async options, otherwise use static options
+            if (this.endpoint) {
+                return this.asyncOptions;
+            }
+            return this.options;
+        },
+        effectiveValueKey() {
+            // If valueKey was explicitly provided, use it
+            if (this.valueKey !== null) {
+                return this.valueKey;
+            }
+            // Otherwise, use "id" for endpoints, "value" for static options
+            return this.endpoint ? "id" : "value";
+        },
+    },
+
+    mounted() {
+        if (this.endpoint && this.$refs.select?.$refs?.scrollbarRef) {
+            const scrollbar = this.$refs.select.$refs.scrollbarRef;
+            const wrapRef = scrollbar.wrapRef;
+
+            this.scrollListener = () => {
+                if (!wrapRef) return;
+
+                const distance = 10;
+                const prevTop = this.wrapScrollTop;
+                const prevLeft = this.wrapScrollLeft;
+
+                this.wrapScrollTop = wrapRef.scrollTop;
+                this.wrapScrollLeft = wrapRef.scrollLeft;
+
+                const arrivedStates = {
+                    bottom:
+                        this.wrapScrollTop + wrapRef.clientHeight >=
+                        wrapRef.scrollHeight - distance,
+                    top: this.wrapScrollTop <= distance && prevTop !== 0,
+                    right:
+                        this.wrapScrollLeft + wrapRef.clientWidth >=
+                            wrapRef.scrollWidth - distance &&
+                        prevLeft !== this.wrapScrollLeft,
+                    left: this.wrapScrollLeft <= distance && prevLeft !== 0,
+                };
+
+                let direction = null;
+                if (prevTop !== this.wrapScrollTop) {
+                    direction = this.wrapScrollTop > prevTop ? "bottom" : "top";
+                }
+                if (prevLeft !== this.wrapScrollLeft) {
+                    direction =
+                        this.wrapScrollLeft > prevLeft ? "right" : "left";
+                }
+
+                if (direction && arrivedStates[direction]) {
+                    this.handleEndReached(direction);
+                }
+            };
+
+            wrapRef.addEventListener("scroll", this.scrollListener);
+        }
+    },
+
+    beforeUnmount() {
+        if (
+            this.scrollListener &&
+            this.$refs.select?.$refs?.scrollbarRef?.wrapRef
+        ) {
+            this.$refs.select.$refs.scrollbarRef.wrapRef.removeEventListener(
+                "scroll",
+                this.scrollListener,
+            );
+        }
     },
 
-    emits: ["change", "clear", "blur"],
     methods: {
-        castValue(value) {
-            if (
-                !_.isNull(value) &&
-                typeof value === "string" &&
-                value !== "" &&
-                !isNaN(Number(value))
-            ) {
-                return parseInt(value);
+        async handleVisibleChange(visible) {
+            // Load data when dropdown is opened for the first time
+            if (visible && this.endpoint && !this.initialLoadDone) {
+                await this.handleSearch("");
+            }
+        },
+
+        async handleSearch(query) {
+            if (!this.endpoint) return;
+
+            // For initial load, allow empty query even if it matches lastSearchQuery
+            if (!this.initialLoadDone || query !== this.lastSearchQuery) {
+                this.searchQuery = query;
+                this.lastSearchQuery = query;
+                this.currentPage = 1;
+                this.asyncOptions = [];
+                await this.fetchOptions(1, query);
+
+                if (!this.initialLoadDone) {
+                    this.initialLoadDone = true;
+                }
+            }
+        },
+
+        handleEndReached(direction) {
+            if (!this.endpoint) return;
+            if (direction !== "bottom") return;
+            if (!this.hasMore || this.loadingMore) return;
+            this.fetchOptions(this.currentPage + 1, this.searchQuery);
+        },
+
+        async fetchOptions(page, searchQuery = "") {
+            const isInitialLoad = page === 1;
+            const loadingKey = isInitialLoad ? "initialLoading" : "loadingMore";
+
+            if (this[loadingKey]) return;
+
+            this[loadingKey] = true;
+
+            try {
+                const requestParams = {
+                    ...this.params,
+                    page,
+                    per_page: this.perPage,
+                };
+
+                // Add search filter if query is provided
+                if (searchQuery) {
+                    requestParams[`filter[${this.searchParam}]`] = searchQuery;
+                }
+
+                const response = await axios.get(this.endpoint, {
+                    params: requestParams,
+                });
+
+                const data = response.data.data || [];
+                const meta = response.data.meta;
+
+                // If it's the first page, replace options, otherwise append
+                if (page === 1) {
+                    this.asyncOptions = data;
+                } else {
+                    this.asyncOptions = [...this.asyncOptions, ...data];
+                }
+
+                this.currentPage = page;
+                this.hasMore = meta && meta.current_page < meta.last_page;
+            } catch (error) {
+                console.error("Error fetching select options:", error);
+                ElNotification.error({
+                    title: "Error",
+                    message: "Failed to load options. Please try again.",
+                    duration: 5000,
+                });
+            } finally {
+                this[loadingKey] = false;
             }
-            return value;
         },
     },
 };

package/_Build/vue/components/form/Spinner.vue

@@ -0,0 +1,5 @@
+<template>
+    <p>Loading...</p>
+</template>
+
+<script></script>

package/_Build/vue/components/layout/Alert.vue

@@ -11,7 +11,11 @@
 <script>
 import { ElAlert } from "element-plus";
 export default {
-    name: "VPageTitle",
+    name: "Alert",
+
+    components: {
+        ElAlert,
+    },
 
     props: {
         effect: {
@@ -30,9 +34,5 @@ export default {
             default: true,
         },
     },
-
-    components: {
-        ElAlert,
-    },
 };
 </script>

package/_Build/vue/components/layout/Audit.vue

@@ -0,0 +1,75 @@
+<template>
+    <el-table
+        :data="audits"
+        :default-sort="
+            query && {
+                prop: query.sort_by,
+                order: query.sort_dir === 'asc' ? 'ascending' : 'descending',
+            }
+        "
+        @sort-change="$emit('sort-change')"
+    >
+        <el-table-column label="Previous" :fit="false">
+            <template #default="scope">
+                <p
+                    :key="key"
+                    v-for="{ key, value } in scope?.row?.old_values"
+                    class="truncate color-9"
+                >
+                    <strong>{{ $filters.ucfirst(key) }}</strong
+                    ><br />{{ value }}
+                </p>
+            </template>
+        </el-table-column>
+
+        <el-table-column label="New" :fit="false">
+            <template #default="scope">
+                <p
+                    :key="key"
+                    v-for="{ key, value } in scope?.row?.new_values"
+                    class="truncate"
+                >
+                    <strong>{{ $filters.ucfirst(key) }}</strong
+                    ><br />{{ value }}
+                </p>
+            </template>
+        </el-table-column>
+
+        <el-table-column label="User" prop="user.email" :fit="false" />
+
+        <el-table-column label="Date" :fit="false">
+            <template #default="scope">
+                {{ $filters.calendarFormat(scope?.row?.created_at) }}
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<script>
+import { ElTable, ElTableColumn } from "element-plus";
+
+export default {
+    components: {
+        ElTable,
+        ElTableColumn,
+    },
+
+    props: ["data", "query"],
+
+    computed: {
+        audits() {
+            return (this.data || [])
+                .map((d) => {
+                    d.new_values = Object.entries(d.new_values)
+                        .filter(([key, value]) => value)
+                        .map(([key, value]) => ({ key, value }));
+                    d.old_values = Object.entries(d.old_values)
+                        .filter(([key, value]) => value)
+                        .map(([key, value]) => ({ key, value }));
+                    return d;
+                })
+                .reverse();
+        },
+    },
+};
+</script>

package/_Build/vue/{modules/AuthModule/components/VBreadcrumbs.vue → components/layout/Breadcrumbs.vue}

@@ -3,7 +3,7 @@
         <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
             <div class="grid__1/1">
                 <div class="flex items-center">
-                    <breadcrumbs :crumbs="items" />
+                    <VelBreadcrumbs :crumbs="items" />
                 </div>
             </div>
         </div>
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import Breadcrumbs from "../../../components/navigation/Breadcrumbs.vue";
+import VelBreadcrumbs from "../navigation/Breadcrumbs.vue";
 
 export default {
-    name: "VBreadcrumbs",
+    name: "Breadcrumbs",
     components: {
-        Breadcrumbs,
+        VelBreadcrumbs,
     },
 
     props: {

package/_Build/vue/{modules/AuthModule/components → components/layout}/Chips.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="chips">
         <template v-for="(item, index) in array" :key="item.name">
-            <Chip
+            <VelChip
                 class="chip--round"
                 :name="item.name"
                 :label="`${item.label}${index < array.length - 1 ? ',' : ''}`"
@@ -13,7 +13,7 @@
 <script>
 export default {
     components: {
-        Chip: require("./Chip.vue").default,
+        VelChip: require("./Chip.vue").default,
     },
 
     props: {

package/_Build/vue/components/layout/Footer.vue

@@ -8,25 +8,25 @@
         <div class="vel-footer__bottom">
             <div class="vel-footer__bottom__links">
                 <p class="color-0">&copy;2025 Avalere Health.</p>
-                <el-link
+                <VelLink
                     underline
                     class="color-0 ml"
                     href="https://avalerehealth.com/privacy-policy/"
                     target="_blank"
-                    >Privacy Policy</el-link
+                    >Privacy Policy</VelLink
                 >
-                <el-link
+                <VelLink
                     underline
                     class="color-0 ml"
                     href="https://avalerehealth.com/corporate-policies/"
                     target="_blank"
-                    >Corporate policies and compliance</el-link
+                    >Corporate policies and compliance</VelLink
                 >
             </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
+                <VelLink underline class="color-0 ml" :href="contact"
+                    >Contact our Support Team</VelLink
                 >
             </div>
         </div>
@@ -34,17 +34,18 @@
 </template>
 
 <script>
-import elLink from "../basic/link.vue";
+import VelLink from "../basic/link.vue";
 
 export default {
+    components: {
+        VelLink,
+    },
+
     props: {
         contact: {
             required: true,
             type: String,
         },
     },
-    components: {
-        elLink,
-    },
 };
 </script>

package/_Build/vue/{modules/AuthModule/components/VFormFooter.vue → components/layout/FormFooter.vue}

@@ -1,15 +1,15 @@
 <template>
     <div class="grid items-center my-4">
         <slot>
-            <el-button type="primary" native-type="submit" :loading="loading">
+            <VelButton type="primary" native-type="submit" :loading="loading">
                 Save changes
-            </el-button>
+            </VelButton>
 
-            <el-button tag="a" class="ml-2" @click="$router.go(-1)">
+            <VelButton tag="a" class="ml-2" @click="$router.go(-1)">
                 Discard changes
-            </el-button>
+            </VelButton>
 
-            <el-button
+            <VelButton
                 v-if="method === 'patch' && preview"
                 class="ml-2"
                 tag="a"
@@ -18,14 +18,20 @@
                 link
             >
                 <span v-text="`Preview`" />
-            </el-button>
+            </VelButton>
         </slot>
     </div>
 </template>
 
 <script>
+import VelButton from "../basic/Button.vue";
+
 export default {
-    name: "VFormFooter",
+    name: "FormFooter",
+
+    components: {
+        VelButton,
+    },
 
     props: {
         loading: {

package/_Build/vue/{modules/AuthModule/components → components/layout}/FormRole.vue

@@ -5,7 +5,7 @@
     <template v-if="readonly">
         <p>Roles</p>
         <div v-if="!overrides" class="my-2">
-            <Chip
+            <VelChip
                 class="mr mb inline-block"
                 name="inherited"
                 label="Inherited"
@@ -17,14 +17,14 @@
                 :key="roles.find((d) => d.id === role)"
                 class="mr mb inline-block"
             >
-                <Chip
+                <VelChip
                     :name="roles.find((d) => d.id === role)?.name"
                     :label="roles.find((d) => d.id === role)?.label"
                 />
             </li>
         </ul>
     </template>
-    <el-select
+    <VelSelect
         v-else
         v-model="form.roles"
         class="mt-2"
@@ -49,21 +49,23 @@
                 :key="index"
                 class="mr mb inline-block"
             >
-                <Chip :name="permission.name" :label="permission.label" />
+                <VelChip :name="permission.name" :label="permission.label" />
             </li>
         </ul>
     </template>
 
-    <VRoleLegend class="mt-2" />
+    <VelRoleLegend class="mt-2" />
 </template>
 
 <script>
 import axios from "axios";
+import VelSelect from "../form/Select.vue";
 
 export default {
     components: {
-        VRoleLegend: require("./VRoleLegend.vue").default,
-        Chip: require("./Chip.vue").default,
+        VelRoleLegend: require("./RoleLegend.vue").default,
+        VelChip: require("./Chip.vue").default,
+        VelSelect,
     },
 
     props: {
@@ -89,7 +91,7 @@ export default {
 
     computed: {
         permissions() {
-            const allPermissions = this.form.roles.reduce((acc, id) => {
+            const allPermissions = (this.form.roles || []).reduce((acc, id) => {
                 return acc.concat(
                     this.roles.find((d) => d.id === id)?.permissions || [],
                 );