Skip to content

Commit a738313

Browse files
xkamxkam
committed
more examples
1 parent 3a7195d commit a738313

File tree

16 files changed

+188
-2
lines changed

16 files changed

+188
-2
lines changed

‎examples/columns/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
[Open fullscreen](https://vue.activewidgets.com/columns/) | [Source on github](https://github.com/activewidgets/vue/tree/master/examples/columns) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/vue/tree/master/examples/columns)
3+
4+
Vue example

‎examples/columns/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Columns, rows - ActiveWidgets/Vue</title>
6+
</head>
7+
<body>
8+
<div id="app">Loading...</div>
9+
<script src="src/main.js"></script>
10+
</body>
11+
</html>

‎examples/columns/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue-columns",
3+
"version": "1.0.0",
4+
"description": "Columns, rows - ActiveWidgets/Vue",
5+
"keywords": [],
6+
"main": "src/main.js",
7+
"scripts": {
8+
"start": "parcel index.html --open",
9+
"build": "parcel build index.html"
10+
},
11+
"dependencies": {
12+
"@activewidgets/vue": "0.0.10",
13+
"vue": "^2"
14+
},
15+
"devDependencies": {
16+
"parcel-bundler": "^1"
17+
},
18+
"private": true
19+
}

‎examples/columns/src/app.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
<template>
3+
<ax-datagrid :columns="columns" :rows="rows"></ax-datagrid>
4+
</template>
5+
<script>
6+
7+
import {components} from '@activewidgets/vue';
8+
import { northwind } from "@activewidgets/examples/data";
9+
import './styles.css';
10+
11+
12+
function data(){
13+
14+
const columns = [
15+
{header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
16+
{header: 'Company Name', field: 'companyName', width: 160},
17+
{header: 'Contact', field: 'contactName', width: 120},
18+
{header: 'Title', field: 'contactTitle', width: 120},
19+
{header: 'Address', field: 'address', width: 120},
20+
{header: 'City', field: 'city'},
21+
{header: 'Zip', field: 'postalCode', align: 'right'},
22+
{header: 'Phone', field: 'phone'},
23+
{header: 'Fax', field: 'fax'},
24+
{header: 'Country', field: 'country'}
25+
];
26+
27+
const rows = northwind.customers;
28+
29+
return { columns, rows };
30+
}
31+
32+
33+
export default { components, data };
34+
35+
</script>

‎examples/columns/src/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
import Vue from "vue";
3+
import App from "./app.vue";
4+
5+
6+
new Vue({
7+
el: '#app',
8+
render: h => h(App)
9+
});

‎examples/columns/src/styles.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
body {
3+
margin: 60px;
4+
font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
5+
}
6+
7+
.ax-headers-view {
8+
font-weight: bold;
9+
color: #666;
10+
border-bottom: 1px solid #aaa;
11+
}
12+
13+
.ax-gridlines {
14+
border-bottom: 1px solid #eee;
15+
}

‎examples/events/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
[Open fullscreen](https://vue.activewidgets.com/events/) | [Source on github](https://github.com/activewidgets/vue/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/vue/tree/master/examples/events)
3+
4+
Vue example

‎examples/events/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>User events - ActiveWidgets/Vue</title>
6+
</head>
7+
<body>
8+
<div id="app">Loading...</div>
9+
<p>&#10140; Click on a datagrid row to open an alert box</p>
10+
<script src="src/main.js"></script>
11+
</body>
12+
</html>

‎examples/events/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue-events",
3+
"version": "1.0.0",
4+
"description": "User events - ActiveWidgets/Vue",
5+
"keywords": [],
6+
"main": "src/main.js",
7+
"scripts": {
8+
"start": "parcel index.html --open",
9+
"build": "parcel build index.html"
10+
},
11+
"dependencies": {
12+
"@activewidgets/vue": "0.0.10",
13+
"vue": "^2"
14+
},
15+
"devDependencies": {
16+
"parcel-bundler": "^1"
17+
},
18+
"private": true
19+
}

‎examples/events/src/app.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
<template>
3+
<ax-datagrid :columns="columns" :rows="rows" @mouse="onMouse"></ax-datagrid>
4+
</template>
5+
<script>
6+
7+
import {components} from '@activewidgets/vue';
8+
import { columns, rows } from "@activewidgets/examples/data";
9+
import './styles.css';
10+
11+
12+
function data(){
13+
return { columns, rows };
14+
}
15+
16+
17+
function onMouse({row}){
18+
alert(`row ${row.key} clicked!`);
19+
}
20+
21+
22+
const methods = { onMouse };
23+
24+
export default { components, data, methods };
25+
26+
</script>

‎examples/events/src/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
import Vue from "vue";
3+
import App from "./app.vue";
4+
5+
6+
new Vue({
7+
el: '#app',
8+
render: h => h(App)
9+
});

‎examples/events/src/styles.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
body {
3+
margin: 60px;
4+
font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
5+
}
6+
7+
.ax-datagrid {
8+
max-height: 200px;
9+
}
10+
11+
.ax-headers-view {
12+
font-weight: bold;
13+
color: #666;
14+
border-bottom: 1px solid #aaa;
15+
}
16+
17+
.ax-gridlines {
18+
border-bottom: 1px solid #eee;
19+
}

‎examples/viewer/examples.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11

22
import hello_world from '../hello-world/README.md';
3+
import columns from '../columns/README.md';
4+
import events from '../events/README.md';
35

46

57
export const Local = {
6-
'Hello, World!': {path: 'hello-world', readme: hello_world}
8+
'Hello, World!': {path: 'hello-world', readme: hello_world},
9+
'Columns, rows': {path: 'columns', readme: columns},
10+
'User events': {path: 'events', readme: events}
711
};
812

913

‎test/snapshots/local-js-columns-1-snap.png

46.6 KB
Loading

‎test/snapshots/local-js-hello-world-1-snap.png

5.08 KB
Loading

‎test/visual/local.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ function local(name){
33
return 'http://localhost:2345/' + name + '/';
44
}
55

6-
['demo'].forEach(item => {
6+
['demo', 'hello-world', 'columns'].forEach(item => {
77
test(item, async () => {
88
await page.goto(local(item));
99
const image = await page.screenshot();

0 commit comments

Comments
 (0)