Contextpaths removed - version updates

This commit is contained in:
Bahadır Sofuoğlu
2023-04-06 12:22:35 +03:00
parent 2f149147d1
commit 2b4b8b33ec
23 changed files with 625 additions and 648 deletions

8
CHANGELOG.md Normal file
View File

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

1131
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -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.22.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"
}
}

View File

@@ -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>

View File

@@ -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 = () => {

View File

@@ -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 };
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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>

View File

@@ -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 }" />

View File

@@ -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>

View File

@@ -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!

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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);
@@ -108,7 +105,7 @@ const confirm = (event) => {
<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="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="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">

View File

@@ -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>
@@ -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">

View File

@@ -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) => {

View File

@@ -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))