Remove axios
parent
34d6fc9e37
commit
642d82d132
|
@ -38,7 +38,6 @@
|
|||
"@vue/compiler-sfc": "3.1.5",
|
||||
"@vuelidate/core": "^2.0.0-alpha.14",
|
||||
"@vuelidate/validators": "^2.0.0-alpha.12",
|
||||
"axios": "^0.19.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"chart.js": "3.3.2",
|
||||
"codesandbox": "2.1.14",
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export default class CountryService {
|
||||
|
||||
getCountries() {
|
||||
return axios.get('demo/data/countries.json').then(res => res.data.data);
|
||||
return fetch('demo/data/countries.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,24 +1,27 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export default class CustomerService {
|
||||
|
||||
getCustomersSmall() {
|
||||
return axios.get('demo/data/customers-small.json').then(res => res.data.data);
|
||||
}
|
||||
getCustomersSmall() {
|
||||
return fetch('demo/data/customers-small.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomersMedium() {
|
||||
return axios.get('demo/data/customers-medium.json').then(res => res.data.data);
|
||||
}
|
||||
getCustomersMedium() {
|
||||
return fetch('demo/data/customers-medium.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomersLarge() {
|
||||
return axios.get('demo/data/customers-large.json').then(res => res.data.data);
|
||||
}
|
||||
getCustomersLarge() {
|
||||
return fetch('demo/data/customers-large.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomersXLarge() {
|
||||
return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
|
||||
}
|
||||
|
||||
getCustomers(params) {
|
||||
return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
|
||||
}
|
||||
}
|
||||
getCustomersXLarge() {
|
||||
return fetch('demo/data/customers-xlarge.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
getCustomers(params) {
|
||||
const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
|
||||
return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export default class EventService {
|
||||
|
||||
getEvents() {
|
||||
return axios.get('demo/data/events.json').then(res => res.data.data);
|
||||
return fetch('demo/data/events.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,15 +1,12 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export default class NodeService {
|
||||
|
||||
getTreeTableNodes() {
|
||||
return axios.get('demo/data/treetablenodes.json')
|
||||
.then(res => res.data.root);
|
||||
return fetch('demo/data/treetablenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
getTreeNodes() {
|
||||
return axios.get('demo/data/treenodes.json')
|
||||
.then(res => res.data.root);
|
||||
return fetch('demo/data/treenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export default class PhotoService {
|
||||
|
||||
getImages() {
|
||||
return axios.get('demo/data/photos.json')
|
||||
.then(res => res.data.data);
|
||||
return fetch('demo/data/photos.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,16 +1,14 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export default class ProductService {
|
||||
|
||||
getProductsSmall() {
|
||||
return axios.get('demo/data/products-small.json').then(res => res.data.data);
|
||||
return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
|
||||
getProducts() {
|
||||
return axios.get('demo/data/products.json').then(res => res.data.data);
|
||||
return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
|
||||
getProductsWithOrdersSmall() {
|
||||
return axios.get('demo/data/products-orders-small.json').then(res => res.data.data);
|
||||
return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,23 +11,21 @@ import ColumnGroup from 'primevue/columngroup'; //optional for column groupi
|
|||
|
||||
<h5>Getting Started</h5>
|
||||
<p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable.
|
||||
Cars are loaded by a CarService that connects to a server to fetch the cars with a axios. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
|
||||
Cars are loaded by a CarService that connects to a server to fetch the cars with a fetch API. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import axios from 'axios'
|
||||
|
||||
export default class CarService {
|
||||
|
||||
getCarsSmall() {
|
||||
return axios.get('demo/data/cars-small.json').then(res => res.data.data);
|
||||
return fetch.get('demo/data/cars-small.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
|
||||
getCarsMedium() {
|
||||
return axios.get('demo/data/cars-medium.json').then(res => res.data.data);
|
||||
return fetch.get('demo/data/cars-medium.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
|
||||
getCarsLarge() {
|
||||
return axios.get('demo/data/cars-large.json').then(res => res.data.data);
|
||||
return fetch.get('demo/data/cars-large.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -121,12 +121,11 @@ import Galleria from 'primevue/galleria';
|
|||
</div>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import axios from 'axios'
|
||||
|
||||
export default class PhotoService {
|
||||
|
||||
getImages() {
|
||||
return axios.get('demo/data/photos.json').then(res => res.data.data);
|
||||
return fetch('demo/data/photos.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -98,8 +98,6 @@ export default {
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
@ -108,19 +106,20 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('demo/data/icons.json').then(res => {
|
||||
let icons = res.data.icons;
|
||||
icons.sort((icon1, icon2) => {
|
||||
if(icon1.properties.name < icon2.properties.name)
|
||||
return -1;
|
||||
else if(icon1.properties.name < icon2.properties.name)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
});
|
||||
fetch('demo/data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } }).then(res => res.json())
|
||||
.then(d => {
|
||||
let icons = d.icons;
|
||||
icons.sort((icon1, icon2) => {
|
||||
if(icon1.properties.name < icon2.properties.name)
|
||||
return -1;
|
||||
else if(icon1.properties.name < icon2.properties.name)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.icons = icons;
|
||||
});
|
||||
this.icons = icons;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
filteredIcons() {
|
||||
|
|
|
@ -94,7 +94,6 @@ export default {
|
|||
dependencies: {
|
||||
...extDependencies,
|
||||
'vue': dependencies['vue'],
|
||||
'axios': dependencies['axios'],
|
||||
'primevue': '^3.7.2',
|
||||
'primeflex': dependencies['primeflex'],
|
||||
'primeicons': dependencies['primeicons'],
|
||||
|
|
|
@ -1,99 +1,90 @@
|
|||
const services = {
|
||||
'CountryService': `
|
||||
import axios from 'axios'
|
||||
|
||||
export default class CountryService {
|
||||
|
||||
|
||||
getCountries() {
|
||||
return axios.get('data/countries.json').then(res => res.data.data);
|
||||
return fetch('demo/data/countries.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
'CustomerService': `
|
||||
import axios from 'axios'
|
||||
|
||||
export default class CustomerService {
|
||||
|
||||
|
||||
getCustomersSmall() {
|
||||
return axios.get('data/customers-small.json').then(res => res.data.data);
|
||||
return fetch('demo/data/customers-small.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
|
||||
getCustomersMedium() {
|
||||
return axios.get('data/customers-medium.json').then(res => res.data.data);
|
||||
return fetch('demo/data/customers-medium.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
|
||||
getCustomersLarge() {
|
||||
return axios.get('data/customers-large.json').then(res => res.data.data);
|
||||
return fetch('demo/data/customers-large.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
|
||||
getCustomersXLarge() {
|
||||
return axios.get('data/customers-xlarge.json').then(res => res.data.data);
|
||||
return fetch('demo/data/customers-xlarge.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
|
||||
|
||||
getCustomers(params) {
|
||||
return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
|
||||
const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
|
||||
return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
|
||||
}
|
||||
}
|
||||
`,
|
||||
'EventService': `
|
||||
import axios from 'axios';
|
||||
|
||||
export default class EventService {
|
||||
|
||||
getEvents() {
|
||||
return axios.get('data/events.json').then(res => res.data.data);
|
||||
return fetch('demo/data/events.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
`,
|
||||
'NodeService': `
|
||||
import axios from 'axios';
|
||||
|
||||
export default class NodeService {
|
||||
|
||||
|
||||
getTreeTableNodes() {
|
||||
return axios.get('data/treetablenodes.json')
|
||||
.then(res => res.data.root);
|
||||
return fetch('demo/data/treetablenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
|
||||
getTreeNodes() {
|
||||
return axios.get('data/treenodes.json')
|
||||
.then(res => res.data.root);
|
||||
return fetch('demo/data/treenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
}
|
||||
`,
|
||||
'PhotoService': `
|
||||
import axios from 'axios'
|
||||
|
||||
export default class PhotoService {
|
||||
|
||||
getImages() {
|
||||
return axios.get('data/photos.json')
|
||||
.then(res => res.data.data);
|
||||
return fetch('demo/data/photos.json').then(res => res.json())
|
||||
.then(d => d.data);
|
||||
}
|
||||
}
|
||||
`,
|
||||
'ProductService': `
|
||||
import axios from 'axios';
|
||||
|
||||
export default class ProductService {
|
||||
|
||||
getProductsSmall() {
|
||||
return axios.get('data/products-small.json')
|
||||
.then(res => res.data.data);
|
||||
}
|
||||
return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
|
||||
getProducts() {
|
||||
return axios.get('data/products.json')
|
||||
.then(res => res.data.data);
|
||||
getProducts() {
|
||||
return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
|
||||
getProductsWithOrdersSmall() {
|
||||
return axios.get('data/products-orders-small.json')
|
||||
.then(res => res.data.data);
|
||||
}
|
||||
return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue">
|
||||
<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Tree from 'primevue/tree';
|
||||
|
@ -112,12 +112,11 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import axios from 'axios';
|
||||
|
||||
export default class NodeService {
|
||||
|
||||
getTreeNodes() {
|
||||
return axios.get('demo/data/treenodes.json').then(res => res.data.root);
|
||||
return fetch('demo/data/treenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -895,4 +894,4 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -38,12 +38,11 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import axios from 'axios';
|
||||
|
||||
export default class NodeService {
|
||||
|
||||
getTreeNodes() {
|
||||
return axios.get('demo/data/treenodes.json').then(res => res.data.root);
|
||||
return fetch('demo/data/treenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -587,7 +586,7 @@ export default {
|
|||
const selectedNode = ref();
|
||||
const selectedNodes1 = ref();
|
||||
const selectedNodes2 = ref();
|
||||
|
||||
|
||||
return { options, selectedNode, selectedNodes1, selectedNodes2 };
|
||||
}
|
||||
}
|
||||
|
|
|
@ -93,12 +93,11 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import axios from 'axios';
|
||||
|
||||
export default class NodeService {
|
||||
|
||||
getTreeTableNodes() {
|
||||
return axios.get('demo/data/treetablenodes.json').then(res => res.data.root);
|
||||
return fetch('demo/data/treetablenodes.json').then(res => res.json())
|
||||
.then(d => d.root);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1074,7 +1073,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<h6>Flex Scroll</h6>
|
||||
<p>In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.
|
||||
<p>In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.
|
||||
FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size for full page scroll.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
|
||||
|
@ -1898,4 +1897,4 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue