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
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
+566 -565
View File
File diff suppressed because it is too large Load Diff
+4 -4
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"
}
}
+2 -2
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>
+2 -2
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 = () => {
+1 -3
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 };
}
+1 -2
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);
}
+4 -5
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);
}
+2 -3
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);
}
+1 -2
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);
}
+3 -5
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);
}
+2 -2
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>
+2 -4
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 }" />
+2 -2
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>
+1 -4
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!
+2 -2
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>
+2 -5
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>
+4 -7
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>
+8 -11
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>
+1 -4
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;">
+5 -8
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">
+1 -4
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) => {
+1 -2
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))