Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contextpaths removed - version updates

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

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

4
src/layout/AppFooter.vue
View File

@@ -2,10 +2,10 @@
import { useLayout } from '@/layout/composables/layout'; import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue'; import { computed } from 'vue';
const { layoutConfig, contextPath } = useLayout(); const { layoutConfig } = useLayout();
const logoUrl = computed(() => { 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> </script>

4
src/layout/AppTopbar.vue
View File

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useLayout } from '@/layout/composables/layout'; import { useLayout } from '@/layout/composables/layout';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const { layoutConfig, onMenuToggle, contextPath } = useLayout(); const { layoutConfig, onMenuToggle } = useLayout();
const outsideClickListener = ref(null); const outsideClickListener = ref(null);
const topbarMenuActive = ref(false); const topbarMenuActive = ref(false);
@@ -18,7 +18,7 @@ onBeforeUnmount(() => {
}); });
const logoUrl = computed(() => { 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 = () => { const onTopBarMenuButton = () => {

4
src/layout/composables/layout.js
View File

@@ -1,7 +1,5 @@
import { toRefs, reactive, computed } from 'vue'; import { toRefs, reactive, computed } from 'vue';
const contextPath = import.meta.env.BASE_URL;
const layoutConfig = reactive({ const layoutConfig = reactive({
ripple: false, ripple: false,
darkTheme: false, darkTheme: false,
@@ -51,5 +49,5 @@ export function useLayout() {
const isDarkTheme = computed(() => layoutConfig.darkTheme); 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 };
} }

3
src/service/CountryService.js
View File

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

9
src/service/CustomerService.js
View File

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

5
src/service/NodeService.js
View File

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

3
src/service/PhotoService.js
View File

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

8
src/service/ProductService.js
View File

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

4
src/views/Dashboard.vue
View File

@@ -3,7 +3,7 @@ import { onMounted, reactive, ref, watch } from 'vue';
import ProductService from '@/service/ProductService'; import ProductService from '@/service/ProductService';
import { useLayout } from '@/layout/composables/layout'; import { useLayout } from '@/layout/composables/layout';
const { isDarkTheme, contextPath } = useLayout(); const { isDarkTheme } = useLayout();
const products = ref(null); const products = ref(null);
const lineData = reactive({ const lineData = reactive({
@@ -184,7 +184,7 @@ watch(
<Column style="width: 15%"> <Column style="width: 15%">
<template #header> Image </template> <template #header> Image </template>
<template #body="slotProps"> <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> </template>
</Column> </Column>
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column> <Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>

6
src/views/pages/Crud.vue
View File

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

4
src/views/pages/Landing.vue
View File

@@ -3,7 +3,7 @@ import { useLayout } from '@/layout/composables/layout';
import { computed } from 'vue'; import { computed } from 'vue';
import AppConfig from '@/layout/AppConfig.vue'; import AppConfig from '@/layout/AppConfig.vue';
const { layoutConfig, contextPath } = useLayout(); const { layoutConfig } = useLayout();
const smoothScroll = (id) => { const smoothScroll = (id) => {
document.querySelector(id).scrollIntoView({ document.querySelector(id).scrollIntoView({
@@ -12,7 +12,7 @@ const smoothScroll = (id) => {
}; };
const logoUrl = computed(() => { 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> </script>

5
src/views/pages/Timeline.vue
View File

@@ -1,8 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
const customEvents = ref([ const customEvents = ref([
{ {
@@ -98,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
{{ slotProps.item.date }} {{ slotProps.item.date }}
</template> </template>
<template #content> <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> <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 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! neque quas!

4
src/views/pages/auth/Login.vue
View File

@@ -3,13 +3,13 @@ import { useLayout } from '@/layout/composables/layout';
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import AppConfig from '@/layout/AppConfig.vue'; import AppConfig from '@/layout/AppConfig.vue';
const { layoutConfig, contextPath } = useLayout(); const { layoutConfig } = useLayout();
const email = ref(''); const email = ref('');
const password = ref(''); const password = ref('');
const checked = ref(false); const checked = ref(false);
const logoUrl = computed(() => { 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> </script>

7
src/views/uikit/List.vue
View File

@@ -1,9 +1,6 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import ProductService from '@/service/ProductService'; import ProductService from '@/service/ProductService';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
const picklistValue = ref([ const picklistValue = ref([
[ [
@@ -79,7 +76,7 @@ const onSortChange = (event) => {
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="col-12">
<div class="flex flex-column md:flex-row align-items-center p-3 w-full"> <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="flex-1 text-center md:text-left">
<div class="font-bold text-2xl">{{ slotProps.data.name }}</div> <div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
<div class="mb-3">{{ slotProps.data.description }}</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> <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
</div> </div>
<div class="text-center"> <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="text-2xl font-bold">{{ slotProps.data.name }}</div>
<div class="mb-3">{{ slotProps.data.description }}</div> <div class="mb-3">{{ slotProps.data.description }}</div>
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating> <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>

11
src/views/uikit/Media.vue
View File

@@ -2,9 +2,6 @@
import ProductService from '@/service/ProductService'; import ProductService from '@/service/ProductService';
import PhotoService from '@/service/PhotoService'; import PhotoService from '@/service/PhotoService';
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
const products = ref([]); const products = ref([]);
const images = ref([]); const images = ref([]);
@@ -63,7 +60,7 @@ onMounted(() => {
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <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>
<div> <div>
<h4 class="mb-1"> <h4 class="mb-1">
@@ -89,10 +86,10 @@ onMounted(() => {
<h5>Galleria</h5> <h5>Galleria</h5>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto"> <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
<template #item="slotProps"> <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>
<template #thumbnail="slotProps"> <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> </template>
</Galleria> </Galleria>
</div> </div>
@@ -102,7 +99,7 @@ onMounted(() => {
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<div class="flex justify-content-center"> <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> </div>
</div> </div>

19
src/views/uikit/Misc.vue
View File

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

5
src/views/uikit/Overlay.vue
View File

@@ -3,9 +3,6 @@ import ProductService from '@/service/ProductService';
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm'; import { useConfirm } from 'primevue/useconfirm';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
const display = ref(false); const display = ref(false);
const displayConfirmation = 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 field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"></Column>
<Column header="Image" headerStyle="min-width:5rem;"> <Column header="Image" headerStyle="min-width:5rem;">
<template #body="slotProps"> <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> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;"> <Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">

13
src/views/uikit/Table.vue
View File

@@ -3,9 +3,6 @@ import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '@/service/CustomerService'; import CustomerService from '@/service/CustomerService';
import ProductService from '@/service/ProductService'; import ProductService from '@/service/ProductService';
import { ref, onBeforeMount } from 'vue'; import { ref, onBeforeMount } from 'vue';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
const customer1 = ref(null); const customer1 = ref(null);
const customer2 = ref(null); const customer2 = ref(null);
@@ -150,7 +147,7 @@ const calculateCustomerTotal = (name) => {
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }"> <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> <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <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"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <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> <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
@@ -245,7 +242,7 @@ const calculateCustomerTotal = (name) => {
<Column field="activity" header="Activity" :style="{ width: '200px' }"></Column> <Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
<Column field="representative.name" header="Representative" :style="{ width: '200px' }"> <Column field="representative.name" header="Representative" :style="{ width: '200px' }">
<template #body="{ data }"> <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> <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
</template> </template>
</Column> </Column>
@@ -276,7 +273,7 @@ const calculateCustomerTotal = (name) => {
</Column> </Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <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> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true"> <Column field="price" header="Price" :sortable="true">
@@ -360,7 +357,7 @@ const calculateCustomerTotal = (name) => {
</Column> </Column>
<Column field="date" header="Date" style="min-width: 200px"></Column> <Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps"> <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> <span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">

5
src/views/utilities/Icons.vue
View File

@@ -1,8 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
const icons = ref(null); const icons = ref(null);
const filter = ref(null); const filter = ref(null);
@@ -13,7 +10,7 @@ const filteredIcons = computed(() => {
}); });
onMounted(() => { 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((res) => res.json())
.then((d) => { .then((d) => {
let data = d.icons.filter((value) => { let data = d.icons.filter((value) => {

3
vite.config.js
View File

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