WebHasHistory added to router

CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 3.6.0 (2023-04-12)
+
+**Implemented New Features and Enhancements**
+
+-   Upgrade to PrimeVue 3.26.1
+-   Upgrade to vite 4.2.1

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-2022 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sakai-vue",
-    "version": "3.5.0",
+    "version": "3.6.0",
     "scripts": {
         "dev": "vite",
         "build": "vite build",
@@ -11,18 +11,18 @@
         "chart.js": "3.3.2",
         "primeflex": "^3.2.1",
         "primeicons": "^6.0.1",
-        "primevue": "^3.18.1",
+        "primevue": "3.26.1",
         "vue": "^3.2.41",
         "vue-router": "^4.1.5"
     },
     "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.4",
-        "@vitejs/plugin-vue": "^3.1.2",
+        "@vitejs/plugin-vue": "^4.1.0",
         "@vue/eslint-config-prettier": "^7.0.0",
         "eslint": "^8.22.0",
         "eslint-plugin-vue": "^9.3.0",
         "prettier": "^2.7.1",
         "sass": "^1.55.0",
-        "vite": "^3.1.8"
+        "vite": "^4.2.1"
     }
 }

public/.htaccess

@@ -1,11 +0,0 @@
-<filesMatch "\.(html)$">
-FileETag None
-Header unset ETag
-Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
-Header set Pragma "no-cache"
-Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
-</filesMatch>
-
-<Files "*.json">
-  Header set Access-Control-Allow-Origin "*"
-</Files>

public/upload.php

@@ -1 +0,0 @@
- <?php echo '<p>Fake Upload Process</p>'; ?> 

src/layout/AppFooter.vue

@@ -2,10 +2,10 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed } from 'vue';
 
-const { layoutConfig, contextPath } = useLayout();
+const { layoutConfig } = useLayout();
 
 const logoUrl = computed(() => {
-    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 

src/layout/AppTopbar.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useLayout } from '@/layout/composables/layout';
 import { useRouter } from 'vue-router';
 
-const { layoutConfig, onMenuToggle, contextPath } = useLayout();
+const { layoutConfig, onMenuToggle } = useLayout();
 
 const outsideClickListener = ref(null);
 const topbarMenuActive = ref(false);
@@ -18,7 +18,7 @@ onBeforeUnmount(() => {
 });
 
 const logoUrl = computed(() => {
-    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 
 const onTopBarMenuButton = () => {

src/layout/composables/layout.js

@@ -1,7 +1,5 @@
 import { toRefs, reactive, computed } from 'vue';
 
-const contextPath = import.meta.env.BASE_URL;
-
 const layoutConfig = reactive({
     ripple: false,
     darkTheme: false,
@@ -51,5 +49,5 @@ export function useLayout() {
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
 
-    return { contextPath, layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
 }

src/service/CountryService.js

@@ -1,7 +1,6 @@
-const contextPath = import.meta.env.BASE_URL;
 export default class CountryService {
     getCountries() {
-        return fetch(contextPath + 'demo/data/countries.json')
+        return fetch('demo/data/countries.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/service/CustomerService.js

@@ -1,25 +1,24 @@
-const contextPath = import.meta.env.BASE_URL;
 export default class CustomerService {
     getCustomersSmall() {
-        return fetch(contextPath + 'demo/data/customers-small.json')
+        return fetch('demo/data/customers-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersMedium() {
-        return fetch(contextPath + 'demo/data/customers-medium.json')
+        return fetch('demo/data/customers-medium.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersLarge() {
-        return fetch(contextPath + 'demo/data/customers-large.json')
+        return fetch('demo/data/customers-large.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersXLarge() {
-        return fetch(contextPath + 'demo/data/customers-xlarge.json')
+        return fetch('demo/data/customers-xlarge.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/service/NodeService.js

@@ -1,13 +1,12 @@
-const contextPath = import.meta.env.BASE_URL;
 export default class NodeService {
     getTreeTableNodes() {
-        return fetch(contextPath + 'demo/data/treetablenodes.json')
+        return fetch('demo/data/treetablenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }
 
     getTreeNodes() {
-        return fetch(contextPath + 'demo/data/treenodes.json')
+        return fetch('demo/data/treenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }

src/service/PhotoService.js

@@ -1,7 +1,6 @@
-const contextPath = import.meta.env.BASE_URL;
 export default class PhotoService {
     getImages() {
-        return fetch(contextPath + 'demo/data/photos.json')
+        return fetch('demo/data/photos.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/service/ProductService.js

@@ -1,20 +1,18 @@
-const contextPath = import.meta.env.BASE_URL;
-
 export default class ProductService {
     getProductsSmall() {
-        return fetch(contextPath + 'demo/data/products-small.json')
+        return fetch('demo/data/products-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProducts() {
-        return fetch(contextPath + 'demo/data/products.json')
+        return fetch('demo/data/products.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProductsWithOrdersSmall() {
-        return fetch(contextPath + 'demo/data/products-orders-small.json')
+        return fetch('demo/data/products-orders-small.json')
             .then((res) => res.json())
             .then((d) => d.data);
     }

src/views/Dashboard.vue

@@ -3,7 +3,7 @@ import { onMounted, reactive, ref, watch } from 'vue';
 import ProductService from '@/service/ProductService';
 import { useLayout } from '@/layout/composables/layout';
 
-const { isDarkTheme, contextPath } = useLayout();
+const { isDarkTheme } = useLayout();
 
 const products = ref(null);
 const lineData = reactive({
@@ -184,7 +184,7 @@ watch(
                     <Column style="width: 15%">
                         <template #header> Image </template>
                         <template #body="slotProps">
-                            <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
                         </template>
                     </Column>
                     <Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>

src/views/pages/Crud.vue

@@ -3,10 +3,8 @@ import { FilterMatchMode } from 'primevue/api';
 import { ref, onMounted, onBeforeMount } from 'vue';
 import ProductService from '@/service/ProductService';
 import { useToast } from 'primevue/usetoast';
-import { useLayout } from '@/layout/composables/layout';
 
 const toast = useToast();
-const { contextPath } = useLayout();
 
 const products = ref(null);
 const productDialog = ref(false);
@@ -183,7 +181,7 @@ const initFilters = () => {
                     <Column header="Image" headerStyle="width:14%; min-width:10rem;">
                         <template #body="slotProps">
                             <span class="p-column-title">Image</span>
-                            <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
@@ -219,7 +217,7 @@ const initFilters = () => {
                 </DataTable>
 
                 <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-                    <img :src="contextPath + 'demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
+                    <img :src="'demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
                     <div class="field">
                         <label for="name">Name</label>
                         <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />

src/views/pages/Landing.vue

@@ -3,7 +3,7 @@ import { useLayout } from '@/layout/composables/layout';
 import { computed } from 'vue';
 import AppConfig from '@/layout/AppConfig.vue';
 
-const { layoutConfig, contextPath } = useLayout();
+const { layoutConfig } = useLayout();
 
 const smoothScroll = (id) => {
     document.querySelector(id).scrollIntoView({
@@ -12,7 +12,7 @@ const smoothScroll = (id) => {
 };
 
 const logoUrl = computed(() => {
-    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 

src/views/pages/Timeline.vue

@@ -1,8 +1,5 @@
 <script setup>
 import { ref } from 'vue';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const customEvents = ref([
     {
@@ -98,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="contextPath + 'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
+                        <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!

src/views/pages/auth/Login.vue

@@ -3,13 +3,13 @@ import { useLayout } from '@/layout/composables/layout';
 import { ref, computed } from 'vue';
 import AppConfig from '@/layout/AppConfig.vue';
 
-const { layoutConfig, contextPath } = useLayout();
+const { layoutConfig } = useLayout();
 const email = ref('');
 const password = ref('');
 const checked = ref(false);
 
 const logoUrl = computed(() => {
-    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 

src/views/uikit/File.vue

@@ -13,11 +13,12 @@ const onUpload = () => {
         <div class="col-12">
             <div class="card">
                 <h5>Advanced</h5>
-                <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
+                <FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
 
                 <h5>Basic</h5>
-                <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+                <FileUpload mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
             </div>
         </div>
+        <Toast />
     </div>
 </template>

src/views/uikit/Input.vue

@@ -146,7 +146,7 @@ const searchCountry = (event) => {
                     </div>
                     <div class="col-12 md:col-6">
                         <h5>Rating</h5>
-                        <Rating v-model="ratingValue" style="position: relative" />
+                        <Rating v-model="ratingValue" />
                     </div>
                     <div class="col-12 md:col-6">
                         <h5>ColorPicker</h5>

src/views/uikit/List.vue

@@ -1,9 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import ProductService from '@/service/ProductService';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const picklistValue = ref([
     [
@@ -79,7 +76,7 @@ const onSortChange = (event) => {
                     <template #list="slotProps">
                         <div class="col-12">
                             <div class="flex flex-column md:flex-row align-items-center p-3 w-full">
-                                <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
+                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
                                 <div class="flex-1 text-center md:text-left">
                                     <div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
                                     <div class="mb-3">{{ slotProps.data.description }}</div>
@@ -109,7 +106,7 @@ const onSortChange = (event) => {
                                     <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
                                 </div>
                                 <div class="text-center">
-                                    <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
+                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
                                     <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
                                     <div class="mb-3">{{ slotProps.data.description }}</div>
                                     <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>

src/views/uikit/Media.vue

@@ -2,9 +2,6 @@
 import ProductService from '@/service/ProductService';
 import PhotoService from '@/service/PhotoService';
 import { ref, onMounted } from 'vue';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const products = ref([]);
 const images = ref([]);
@@ -63,7 +60,7 @@ onMounted(() => {
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="contextPath + 'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
+                                    <img :src="'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">
@@ -89,10 +86,10 @@ onMounted(() => {
                 <h5>Galleria</h5>
                 <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
                     <template #item="slotProps">
-                        <img :src="contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
             </div>
@@ -102,7 +99,7 @@ onMounted(() => {
             <div class="card">
                 <h5>Image</h5>
                 <div class="flex justify-content-center">
-                    <Image :src="contextPath + 'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
+                    <Image :src="'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
                 </div>
             </div>
         </div>

src/views/uikit/Misc.vue

@@ -1,8 +1,5 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const value = ref(0);
 let interval = null;
@@ -78,11 +75,11 @@ onBeforeUnmount(() => {
                 <h4>Avatar</h4>
                 <h5>Avatar Group</h5>
                 <AvatarGroup class="mb-3">
-                    <Avatar :image="contextPath + 'demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="contextPath + 'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="contextPath + 'demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="contextPath + 'demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="contextPath + 'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
                     <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
@@ -154,9 +151,9 @@ onBeforeUnmount(() => {
 
                 <h5>Image</h5>
                 <div class="flex align-items-center flex-column sm:flex-row">
-                    <Chip label="Amy Elsner" :image="contextPath + 'demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Asiya Javayant" :image="contextPath + 'demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Onyama Limba" :image="contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Amy Elsner" :image="'demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Asiya Javayant" :image="'demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Onyama Limba" :image="'demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
                 </div>
             </div>
 

src/views/uikit/Overlay.vue

@@ -3,9 +3,6 @@ import ProductService from '@/service/ProductService';
 import { ref, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const display = ref(false);
 const displayConfirmation = ref(false);
@@ -105,10 +102,10 @@ const confirm = (event) => {
                         <Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
                         <OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
                             <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
-                                <Column field="name" header="Name" :sortable="true" headerStyle="min-width:10rem;"></Column>
-                                <Column header="Image" headerStyle="min-width:10rem;">
+                                <Column field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"></Column>
+                                <Column header="Image" headerStyle="min-width:5rem;">
                                     <template #body="slotProps">
-                                        <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
+                                        <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
                                     </template>
                                 </Column>
                                 <Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">

src/views/uikit/Table.vue

@@ -3,9 +3,6 @@ import { FilterMatchMode, FilterOperator } from 'primevue/api';
 import CustomerService from '@/service/CustomerService';
 import ProductService from '@/service/ProductService';
 import { ref, onBeforeMount } from 'vue';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const customer1 = ref(null);
 const customer2 = ref(null);
@@ -150,7 +147,7 @@ const calculateCustomerTotal = (name) => {
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -158,7 +155,7 @@ const calculateCustomerTotal = (name) => {
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -245,7 +242,7 @@ const calculateCustomerTotal = (name) => {
                     <Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
                     <Column field="representative.name" header="Representative" :style="{ width: '200px' }">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
                         </template>
                     </Column>
@@ -268,7 +265,7 @@ const calculateCustomerTotal = (name) => {
                             <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" class="mb-2" />
                         </div>
                     </template>
-                    <Column :expander="true" headerStyle="width: 3rem" />
+                    <Column :expander="true" headerStyle="min-width: 3rem" />
                     <Column field="name" header="Name" :sortable="true">
                         <template #body="slotProps">
                             {{ slotProps.data.name }}
@@ -276,7 +273,7 @@ const calculateCustomerTotal = (name) => {
                     </Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true">
@@ -360,7 +357,7 @@ const calculateCustomerTotal = (name) => {
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">

src/views/utilities/Icons.vue

@@ -1,8 +1,5 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
-import { useLayout } from '@/layout/composables/layout';
-
-const { contextPath } = useLayout();
 
 const icons = ref(null);
 const filter = ref(null);
@@ -13,7 +10,7 @@ const filteredIcons = computed(() => {
 });
 
 onMounted(() => {
-    fetch(contextPath + 'demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+    fetch('demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
         .then((res) => res.json())
         .then((d) => {
             let data = d.icons.filter((value) => {

vite.config.js

@@ -4,10 +4,9 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
+export default defineConfig(() => {
     return {
         plugins: [vue()],
-        base: command === 'serve' ? '' : '/sakai-vue/',
         resolve: {
             alias: {
                 '@': fileURLToPath(new URL('./src', import.meta.url))