@fishawack/lab-velocity 2.0.0-beta.11 → 2.0.0-beta.12

package/README.md

@@ -155,6 +155,7 @@ There are two different set of sass imports for the admin and the frontend route
 @import "@fishawack/lab-ui/typography";
 @import "@fishawack/lab-ui/grid";
 @import "@fishawack/lab-ui/utilities";
+@import "@fishawack/lab-ui/icon";
 
 // Lab velocity
 @import "@fishawack/lab-velocity/base";
@@ -170,6 +171,32 @@ There are two different set of sass imports for the admin and the frontend route
 @import "@fishawack/lab-velocity/components/loader";
 @import "@fishawack/lab-velocity/components/permissionLegend";
 @import "@fishawack/lab-velocity/components/chip";
+@import "@fishawack/lab-velocity/components/header";
+@import "@fishawack/lab-velocity/components/footer";
+@import "@fishawack/lab-velocity/components/sidebar";
+@import "@fishawack/lab-velocity/components/menu";
+@import "@fishawack/lab-velocity/components/layout";
+```
+
+Lastly for the admin layout & navigation import & apply the Layout component to the app.vue within your project.
+
+```vue
+<template>
+    <main id="app">
+        <VelLayout>
+            <router-view />
+        </VelLayout>
+    </main>
+</template>
+
+<script>
+import { Layout as VelLayout } from "@fishawack/lab-velocity";
+export default {
+    components: {
+        VelLayout,
+    },
+};
+</script>
 ```
 
 ### Icons
@@ -186,11 +213,9 @@ Ensure Content has Velocity pulled in & copy out the svg folder contents into th
 ### ENV VARS (frontend)
 
 ```env
-# Required
-HYDRATE_LOGO=example-logo
-
 # Descriptions
-HYDRATE_LOGO Name of svg logo to display on page
-HYDRATE_REDIRECT Default index if not configured
-HYDRATE_CONTACT Default mailto:EP@avalerehealth, Email for contact us button
+HYDRATE_LOGO Name of primary logo (default: example-logo)
+HYDRATE_LOGO_REVERSE Name of the logo when color scheme is reversed (default: to HYDRATE_LOGO value if not provided)
+HYDRATE_REDIRECT Name of the route name to redirect to after login (default: index)
+HYDRATE_CONTACT Email for contact us button (default: mailto:det@avalerehealth.com)
 ```

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/{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}

@@ -24,10 +24,10 @@
 </template>
 
 <script>
-import VelButton from "../../../components/basic/Button.vue";
+import VelButton from "../basic/Button.vue";
 
 export default {
-    name: "VFormFooter",
+    name: "FormFooter",
 
     components: {
         VelButton,

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,7 +17,7 @@
                 :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"
                 />
@@ -49,22 +49,22 @@
                 :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 "../../../components/form/Select.vue";
+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,
     },
 

package/_Build/vue/components/layout/Layout.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="vel-app">
+        <VelHeader class="justify-end-dive">
+            <GSvg
+                class="logo"
+                style="width: 180px"
+                embed
+                asis
+                :name="$store.state.auth.logo"
+            />
+            <template #links>
+                <div class="flex items-center pr">
+                    <GIcon
+                        class="icon fill-1 icon--0.5 mr-0.5"
+                        name="icon-account-circle"
+                        embed
+                        asis
+                    />
+                    <span>{{ $store?.state?.auth?.user?.name }}</span>
+                </div>
+                <VelButton
+                    class="ml"
+                    type="primary"
+                    tag="a"
+                    round
+                    :href="`${$root.spaUrl}?authenticated=1`"
+                >
+                    <span v-text="`Access ${$root.appName}`" />
+                </VelButton>
+            </template>
+        </VelHeader>
+        <div class="vel-content">
+            <VelSideBar>
+                <template #navigation>
+                    <VelNavigation v-bind="$attrs" />
+                </template>
+                <template #expand>
+                    <GIcon
+                        class="icon icon--0.5"
+                        name="icon-keyboard-tab"
+                        embed
+                        asis
+                    />
+                </template>
+            </VelSideBar>
+            <main class="vel-main">
+                <div class="vel-main__inner">
+                    <slot />
+                </div>
+                <VelFooter contact="mailTo:det@avalerehealth.com">
+                    <GSvg
+                        class="logo fill-0"
+                        style="width: 180px"
+                        embed
+                        asis
+                        :name="$store.state.auth.logo"
+                    />
+                </VelFooter>
+            </main>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+        VelHeader: require("./Header.vue").default,
+        VelSideBar: require("./SideBar.vue").default,
+        VelFooter: require("./Footer.vue").default,
+        VelNavigation: require("./Navigation.vue").default,
+        VelButton: require("../basic/Button.vue").default,
+    },
+};
+</script>

package/_Build/vue/components/layout/Navigation.vue

@@ -0,0 +1,77 @@
+<template>
+    <VMenu>
+        <template v-for="(link, lkey) in links" :key="lkey">
+            <MenuItem v-if="!link.children" :index="lkey">
+                <router-link :to="link.href">
+                    <GIcon
+                        class="icon icon--0.5"
+                        :name="link.icon"
+                        asis
+                        embed
+                    />
+                    <span>{{ link.title }}</span>
+                </router-link>
+            </MenuItem>
+            <SubMenu v-else :id="lkey" :index="lkey">
+                <template #title>
+                    <GIcon
+                        class="icon icon--0.5"
+                        :name="link.icon"
+                        asis
+                        embed
+                    />
+                    <span>{{ link.title }}</span>
+                </template>
+                <MenuItem
+                    v-for="(child, cindex) in link.children"
+                    :key="cindex"
+                    :index="lkey + '-1-' + cindex"
+                >
+                    <router-link :to="child.href">
+                        <span>{{ child.title }}</span>
+                    </router-link>
+                </MenuItem>
+            </SubMenu>
+        </template>
+    </VMenu>
+</template>
+
+<script>
+export default {
+    name: "Navigation",
+
+    components: {
+        VMenu: require("../navigation/Menu.vue").default,
+        MenuItem: require("../navigation/MenuItem.vue").default,
+        SubMenu: require("../navigation/SubMenu.vue").default,
+    },
+
+    props: {
+        links: {
+            type: Array,
+            default: () => [
+                {
+                    title: "Home",
+                    href: { name: "index" },
+                    icon: "icon-home",
+                },
+                {
+                    title: "Companies",
+                    href: { name: "companies.index" },
+                    icon: "icon-cases",
+                },
+                {
+                    title: "Users",
+                    href: { name: "users.index" },
+                    icon: "icon-user",
+                },
+                {
+                    title: "Utilities",
+                    href: { name: "index" },
+                    icon: "icon-utility",
+                },
+            ],
+        },
+    },
+};
+</script>

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

@@ -5,7 +5,12 @@
                 <div
                     class="p-1.5 mr-2 border-radius border border-solid border-muted flex items-center justify-center"
                 >
-                    <GIcon class="icon--3 fill-1" :name="icon" embed artboard />
+                    <GIcon
+                        class="fill-1 icon--0.5"
+                        :name="icon"
+                        embed
+                        artboard
+                    />
                 </div>
             </span>
 
@@ -22,7 +27,7 @@
 
 <script>
 export default {
-    name: "VShowPageHeader",
+    name: "PageHeader",
 
     props: {
         icon: {

package/_Build/vue/components/layout/SideBar.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="vel-sidebar" :class="{ active: active }">
+        <div class="vel-sidebar__inner">
+            <div class="vel-sidebar__top">
+                <slot name="navigation" />
+            </div>
+            <div class="vel-sidebar__bottom">
+                <button class="vel-sidebar__button" @click="active = !active">
+                    <slot name="expand"> > </slot>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SideBar",
+
+    data() {
+        return {
+            active: true,
+        };
+    },
+};
+</script>

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

@@ -13,25 +13,16 @@
                 <el-table-column
                     :width="item.width ?? 'auto'"
                     :sortable="!!item.sortable ? 'custom' : false"
-                    :label="item.label"
+                    :label="
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
                     :prop="item.key"
                     :show-overflow-tooltip="true"
                 >
                     <!-- Support a custom render function -->
                     <template v-if="item.render" #default="scope">
-                        {{ item.render(scope.row) }}
-                    </template>
-
-                    <!-- Support module passed (as a raw component or :is property) -->
-                    <template v-else-if="item.component" #default="scope">
-                        <component
-                            :is="
-                                item.component.is
-                                    ? item.component.is(scope.row)
-                                    : item.component.module(scope.row)
-                            "
-                            v-bind="item.component.props(scope.row)"
-                        />
+                        <component :is="item.render(scope.row, this)" />
                     </template>
                 </el-table-column>
             </template>
@@ -68,7 +59,7 @@
 
 <script>
 import { ElTable, ElTableColumn } from "element-plus";
-import VelButton from "../../../components/basic/Button.vue";
+import VelButton from "../basic/Button.vue";
 
 export default {
     name: "VTable",

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

@@ -25,7 +25,11 @@
                         @update:model-value="handleSearch"
                     >
                         <template #prepend
-                            ><GIcon embed asis name="icon-search"
+                            ><GIcon
+                                embed
+                                asis
+                                name="icon-search"
+                                class="icon--0.5"
                         /></template>
                     </VelBasic>
                     <slot v-if="displayActions" name="table-action">
@@ -45,7 +49,7 @@
                                 name="icon-plus"
                                 embed
                                 asis
-                                class="fill-0 mr-0.5"
+                                class="fill-0 icon--0.5 mr-0.5"
                             />
                             Create new {{ jsonData.label }}
                         </VelButton>
@@ -54,7 +58,7 @@
             </slot>
         </div>
         <div class="bg-0 p-0.5 box-shadow-1 border-r-4">
-            <VTable
+            <VelTable
                 :data="table_data"
                 :structure="jsonData.tableStructure"
                 :label="jsonData.label"
@@ -78,7 +82,7 @@
                 @sort="handleSort"
             >
                 <slot name="table-content"></slot>
-            </VTable>
+            </VelTable>
 
             <div class="flex justify-center items-center py-2">
                 <el-pagination
@@ -100,15 +104,15 @@
 <script>
 import axios from "axios";
 import { ElPagination } from "element-plus";
-import VelButton from "../../../components/basic/Button.vue";
-import VelBasic from "../../../components/form/basic.vue";
-import VelSpinner from "../../../components/form/Spinner.vue";
+import VelButton from "../basic/Button.vue";
+import VelBasic from "../form/basic.vue";
+import VelSpinner from "../form/Spinner.vue";
 
 export default {
-    name: "VTableSorter",
+    name: "TableSorter",
 
     components: {
-        VTable: require("./VTable.vue").default,
+        VelTable: require("./Table.vue").default,
         VelButton,
         VelBasic,
         ElPagination,
@@ -124,10 +128,6 @@ export default {
             default: true,
             type: Boolean,
         },
-        api: {
-            required: true,
-            type: String,
-        },
         defaults: {
             required: false,
             type: String,
@@ -205,10 +205,8 @@ export default {
             const query = mergedQuery.join("&");
 
             return axios
-                .get(`/api/${this.$props.api}${query ? "?" + query : ""}`)
-                .then((res) => {
-                    return res.data;
-                })
+                .get(`${this.$props.jsonData.api}${query ? "?" + query : ""}`)
+                .then((res) => res.data)
                 .catch(console.log);
         },
 

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

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-    name: "VPageTitle",
+    name: "PageTitle",
 
     props: {
         title: {

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

@@ -1,5 +1,5 @@
 <template>
-    <el-menu-item :index="index" class="vel-menu-item" v-bind="$props">
+    <el-menu-item class="vel-menu-item" v-bind="$props" :index="`${index}`">
         <template #title>
             <slot name="title" />
         </template>
@@ -15,6 +15,11 @@ export default {
     components: {
         ElMenuItem,
     },
-    props: ["index"],
+    props: {
+        index: {
+            type: [String, Number],
+            required: true,
+        },
+    },
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-    <el-sub-menu :index="index" v-bind="$props">
+    <el-sub-menu v-bind="$props" :index="`${index}`">
         <template #title>
             <slot name="title" />
         </template>
@@ -15,6 +15,11 @@ export default {
     components: {
         ElSubMenu,
     },
-    props: ["index"],
+    props: {
+        index: {
+            type: [String, Number],
+            required: true,
+        },
+    },
 };
 </script>