@viewerplate/fontawesome 1.0.3

package/components/index.d.ts

@@ -0,0 +1,11 @@
+/*! @licence MIT */
+export { default as ViewerPlate } from "./viewer/Viewer.vue";
+/*! 
+* Element plus v2.13.0 by elementplus - https://element-plus.org/
+* Licensed under the MIT License (MIT), see LICENSE.
+* Copyright 2025S Element plus Labs.
+
+* Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
+* License - https://fontawesome.com/license/free - MIT License
+* Copyright 2025 Fonticons, Inc.
+*/

package/components/viewer/Viewer.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="flex">
+    <div class="menu-background-color menu-border-bottom">
+      <div class="flex menu-border-right menu-button" @click="open(isCollapse, $event)">
+        <FontAwesomeIcon v-if="menuIcon" class="custom-color" :icon="menuIcon" />
+      </div>
+    </div>
+    <div class="flex justify-between menu-border-bottom w-100">
+      <div class="title-padding">
+        <h2 v-if="name != null" class="regular-color">{{name}}</h2>
+        <img v-if="logoUrl != null" class="logo" :src="logoUrl"></img>
+      </div>
+      <el-menu
+        class="el-menu-demo"
+        :default-active="activeIndex"
+        :mode="mode"
+        :ellipsis="ellipsis"
+        @select="handleSelect">
+        <template v-for="( item, index ) in TopItems">
+          <Item v-if="!item.items.length" 
+                :index="'' + index"
+                :name="item.name" />
+          <SubItem v-else :index="'' + index"
+                   :name="item.name"
+                   :item="item"/>
+        </template>
+      </el-menu>
+    </div>
+  </div>
+  <el-row class="tac">
+    <el-col :span="1" class="v-menu-overlay">
+      <el-menu
+        class="el-menu-vertical-demo"
+        style="height: 100vh;"
+        :default-active="activeTopIndex"
+        :collapse="isCollapse"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <template v-for="( item, index ) in LeftItems">
+          <Item v-if="!item.items.length" 
+                :index="'' + index"
+                :item="item"
+                :name="item.name" />
+          <SubItem v-else :index="'' + index"
+                   :name="item.name"
+                   :item="item"/>
+        </template>
+      </el-menu>
+    </el-col>
+    <el-col :span="23" 
+            v-loading="Loading"
+            :element-loading-text="loadingText"
+            :element-loading-background="bgRegular">
+          <slot name="handler"></slot>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+  import Item from './components/Item.vue';
+  import SubItem from './components/SubItem.vue';
+  import { Items, LeftItems } from './models/models';
+  import { load, router, Loading } from './functions/route';
+  import { ref } from 'vue';
+
+  export default {
+    components:{
+      Item: Item,
+      SubItem: SubItem,
+      FontAwesomeIcon: FontAwesomeIcon
+    },
+    props: {
+      LeftItems: {
+        type: Array as () => LeftItems[],
+        required: false
+      },
+      TopItems: {
+        type: Array as () => Items[],
+        required: false
+      },
+      logoUrl: {
+        type: String,
+        required: false
+      },
+      name: {
+        type: String,
+        required: false
+      },
+      colors: {
+        type: Object as () => {
+          textColor: string
+          activeTextColor: string
+          BgColor: string
+        },
+        required: true
+      },
+      menuIcon: {
+        type: null, 
+        required: false
+      },
+      Router: {
+        type: null, 
+        required: false
+      }
+    },
+    mounted() {
+      router(this.Router);
+      load(false);
+    },
+    data() {
+      return {
+        isCollapse: ref(true),
+        Loading: Loading,
+        activeIndex: ref('0'),
+        activeTopIndex: ref('0'),
+        bgColor: 'rgb(76, 135, 236);',
+        textColor: 'white',
+        bgRegular: 'rgb(76, 135, 236);',
+        mode: "horizontal",
+        ellipsis: false,
+        loadingText: "Loading...",
+        LeftItems: this.LeftItems,
+        TopItems: this.TopItems,
+        Router: this.Router,
+        colors: this.colors,
+        menuIcon: this.menuIcon
+      }
+    },
+    methods: {
+      handleOpen(key: string, keyPath: string[]) {
+        console.log(key, keyPath);
+      },
+      handleClose(key: string, keyPath: string[]) {
+        console.log(key, keyPath);
+      },
+      handleSelect(key: string, keyPath: string[]) {
+        console.log(key, keyPath);
+      },
+      open(value: boolean, event: any) {
+        this.isCollapse = !value;
+      }
+    }
+
+  }
+</script>
+
+<style>
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+
+  .menu-background-color{
+    background-color: rgb(76, 135, 236);
+  }
+
+  .menu-border-bottom{
+     border-bottom: 1px solid #000000;
+  }
+
+  .menu-border-right{
+     border-right: 1px solid #fff;
+  }
+
+  .flex{
+    display: flex;
+  }
+
+  .justify-between{
+    justify-content: space-between;
+  }
+
+  .w-100{
+    width: 100%;
+  }
+
+  .custom-color{
+    color: #eaeaea
+  }
+
+  .regular-color{
+    color: rgb(76, 135, 236);
+  }
+
+  .menu-button{
+    width: 64px; 
+    height: 64px; 
+    justify-content: center; 
+    align-items: center;
+  }
+
+  .logo{
+    width: 64px; 
+    height: 64px; 
+  }
+
+  .title-padding{
+    padding: 10px 10px;
+  }
+
+  .v-menu-overlay{
+    z-index: 99999;
+  }
+
+  .el-loading-spinner circle{
+    stroke-width: 5px !important;
+  }
+</style>

package/components/viewer/components/Item.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { LeftItems, Items } from '../models/models';
+import { setIndex } from './../functions/index';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { toTop, to } from './../functions/route';
+
+const defaults = defineProps<{
+    name: string,
+    index: string,
+    item?: LeftItems | Items;
+}>()
+
+const item: LeftItems = defaults.item as LeftItems; 
+const topItem: Items = defaults.item as Items; 
+</script>
+
+<template>
+    <el-menu-item :index="setIndex(defaults.index)"  
+        @click="() => item ? to(item.path) : toTop(topItem.path)">
+            <el-icon v-if="item"><FontAwesomeIcon v-if="item.icon" :icon="item.icon" /></el-icon>
+            <template #title>{{name}}</template>
+            <slot :name="defaults.name"></slot>
+    </el-menu-item>
+</template>
+
+<style scoped>
+</style>

package/components/viewer/components/SubItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { setIndex } from './../functions/index';
+import { toTop, to } from './../functions/route';
+import { Items, LeftItems }  from './../models/models';
+import  Item  from './Item.vue';
+import  SubItem  from './SubItem.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+const defaults = defineProps<{
+    name: string,
+    index: string,
+    item: Items | LeftItems
+}>()
+const item: LeftItems = defaults.item as LeftItems; 
+const topItem: Items = defaults.item as Items; 
+</script>
+
+<template>
+    <el-sub-menu :index="setIndex(index)" >
+        <template #title 
+            @click="() => item ? to(item.path) : toTop(topItem.path)"> 
+                <el-icon v-if="item.icon"><FontAwesomeIcon v-if="item.icon" :icon="item.icon" /></el-icon>
+                <span>{{ name }}</span>
+        </template>
+        <el-item-group v-for="( subItem, subIndex ) in item.items">
+            <Item v-if="!subItem.items.length" 
+                    @click="toTop(subItem.path)"
+                    :index="'' + index + ':' + subIndex"
+                    :name="subItem.name" 
+                    :item="subItem"/>
+            <SubItem v-else
+                    :index="setIndex('' + index + ':' + subIndex)"
+                    :name="subItem.name"
+                    :item="subItem"/>
+        </el-item-group>
+    </el-sub-menu>
+</template>
+
+<style scoped>
+</style>

package/components/viewer/functions/index.ts

@@ -0,0 +1,15 @@
+export const setIndex = (index: string) => {
+    let counter = 1;
+    let parts = index.split(':');
+    let value = '' + (parts[0] + counter);
+
+    if(parts.length > 1){
+        value += "-" + (parts[1] + counter);
+    }
+
+    if(parts.length > 2){
+        value += "-" + (parts[2] + counter);
+    }
+
+    return index;
+}

package/components/viewer/functions/route.ts

@@ -0,0 +1,32 @@
+let Router: any;
+export let Loading: any;
+
+export const router = (router: any) => {
+    Router = router;
+}
+
+export const load = (loading: any) => {
+    Loading = loading;
+}
+
+export  const to = (path: string) => {
+    if(Router != null){
+      Loading = true;
+      setTimeout(() => {
+        Router.push({ path: `${path}` }).finally(() => {
+          Loading = false;
+        });
+      }, 400)
+    }
+}
+
+export  const toTop = (path: string) => {
+    if(Router != null){
+      Loading = true;
+      setTimeout(() => {
+        Router.push({ path: `${path}` }).finally(() => {
+          Loading = false;
+        });
+      }, 400)
+    }
+}

package/components/viewer/models/models.ts

@@ -0,0 +1,12 @@
+export class LeftItems{
+    name: string = "";
+    path: string = "";
+    icon: any | string = "";
+    items: Items[] = [];
+}
+
+export class Items{
+    name: string = "";
+    path: string = "";
+    items: Items[] = [];
+}