Contextpaths removed - version updates
This commit is contained in:
8
CHANGELOG.md
Normal file
8
CHANGELOG.md
Normal 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
1131
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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,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>
|
||||
|
||||
|
||||
@@ -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,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,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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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,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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }" />
|
||||
|
||||
@@ -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,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!
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;">
|
||||
|
||||
@@ -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,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) => {
|
||||
|
||||
@@ -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))
|
||||
|
||||
Reference in New Issue
Block a user