Skip to content

Commit 511c6d1

Browse files
xkamxkam
committed
demo
1 parent c12a2ea commit 511c6d1

File tree

9 files changed

+300
-3
lines changed

9 files changed

+300
-3
lines changed

‎examples/demo/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
[Open fullscreen](/demo/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/demo) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/demo)
3+
4+
5+
A minimal example showing ActiveWidgets datagrid for React
6+
7+
```js
8+
import React from "react";
9+
import ReactDOM from "react-dom";
10+
import {Datagrid} from "@activewidgets/react";
11+
import {columns, rows} from "./data.js"
12+
import "./styles.css";
13+
14+
function App() {
15+
return (
16+
<Datagrid columns={columns} rows={rows} />
17+
);
18+
}
19+
20+
const rootElement = document.getElementById("root");
21+
ReactDOM.render(<App />, rootElement);
22+
```
23+
24+
[![Edit react-get-started](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/get-started)

‎examples/demo/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>Demo - 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/demo/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue-demo",
3+
"version": "1.0.0",
4+
"description": "Demo - 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/demo/src/app.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
2+
<template>
3+
<ax-datagrid :columns="columns" :rows="rows" :options="options" @row="onRow">
4+
5+
<template #company="{data}">
6+
<div>
7+
<div class="bold blue">{{data.customerID}}</div>
8+
<div class="small">{{data.companyName}}</div>
9+
</div>
10+
</template>
11+
12+
<template #contact="{data}">
13+
<div>
14+
<div class="bold">{{data.contactName}}</div>
15+
<div class="small">{{data.contactTitle}}</div>
16+
</div>
17+
</template>
18+
19+
<template #address="{data}">
20+
<div>
21+
<div class="small">{{data.address}}</div>
22+
<div class="small">{{data.postalCode}} <span>{{data.city}}</span></div>
23+
</div>
24+
</template>
25+
26+
<template #country="{text}">
27+
<div>
28+
<img :src="flags[text]"/>{{text}}
29+
</div>
30+
</template>
31+
32+
<template #phone="{data}">
33+
<div>
34+
<div class="small phone">{{data.phone}}</div>
35+
<div class="small fax">{{data.fax}}</div>
36+
</div>
37+
</template>
38+
39+
</ax-datagrid>
40+
</template>
41+
<script>
42+
43+
import {components} from '@activewidgets/vue';
44+
import { northwind } from '@activewidgets/examples/data';
45+
import * as flags from '@activewidgets/examples/flags';
46+
import options from './options';
47+
import './styles.css';
48+
49+
50+
function data(){
51+
52+
const columns = [
53+
{ header: 'Company', template: 'company', fixed: true },
54+
{ header: 'Contact', template: 'contact', style: 'background:#f4f4f4', key: 'contact' },
55+
{ header: 'Address', template: 'address', key: 'address' },
56+
{ header: 'Country', type: 'country flag', field: 'country' },
57+
{ header: 'Phone/Fax', type: 'phone & fax'},
58+
{ header: 'Last Order', type: 'money', field: 'amount' },
59+
{ header: 'Order Date', type: 'date', field: 'date' }
60+
];
61+
62+
63+
const rows = Object.freeze(northwind.customers);
64+
65+
return { columns, rows, options, flags };
66+
}
67+
68+
69+
function onRow(row){
70+
71+
const {data, cells} = row;
72+
73+
// calculated values
74+
cells.amount = 2000 * Math.random();
75+
cells.date = Date.now() - 500 * 86400000 * Math.random();
76+
77+
78+
// dynamic row style
79+
if (data.country == 'France'){
80+
row.class = 'bg-green';
81+
}
82+
83+
// dynamic cell styles
84+
if (data.city == 'London'){
85+
cells.address = {class: 'circle'};
86+
}
87+
88+
if (data.contactTitle == 'Owner'){
89+
cells.contact = {class: 'star'};
90+
}
91+
}
92+
93+
94+
const methods = { onRow };
95+
96+
97+
export default { components, data, methods };
98+
99+
</script>

‎examples/demo/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+
Vue.config.productionTip = false;
6+
7+
new Vue({
8+
render: h => h(App)
9+
}).$mount('#app');

‎examples/demo/src/options.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import { intl, format, column, type } from "@activewidgets/options";
3+
4+
5+
export default [
6+
7+
// enable intl. number/date formats
8+
intl('en-US'),
9+
10+
// define named formats
11+
format('money', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2}),
12+
format('date', {year: 'numeric', month: 'short', day: 'numeric'}),
13+
14+
// set column defaults
15+
column({width: 200}),
16+
17+
// define reusable column types
18+
type('country flag', {template: 'country', width: 170}),
19+
type('phone & fax', {template: 'phone', width: 150}),
20+
type('money', {format: 'money', width: 100, align: 'right'}),
21+
type('date', {format: 'date', width: 150, align: 'right'})
22+
];

‎examples/demo/src/styles.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
2+
body {
3+
margin: 60px;
4+
font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
5+
}
6+
7+
8+
.ax-datagrid {
9+
height: calc(100vh - 120px);
10+
min-height: 400px;
11+
}
12+
13+
.ax-headers-view {
14+
font-weight: bold;
15+
color: #666;
16+
border-bottom: 1px solid #aaa;
17+
}
18+
19+
.ax-gridlines {
20+
border-bottom: 1px solid #eee;
21+
}
22+
23+
.ax-cell:hover {
24+
background: rgba(0,127,255,0.1);
25+
}
26+
27+
.ax-cell > div {
28+
width: 100%;
29+
overflow: hidden;
30+
text-overflow: ellipsis;
31+
}
32+
33+
.ax-cell > img {
34+
width: 32px;
35+
height: 32px;
36+
vertical-align: middle;
37+
margin: 0px 10px;
38+
}
39+
40+
.small {
41+
font-size: 13px;
42+
line-height: 1.308;
43+
color: #444;
44+
}
45+
46+
.bold {
47+
font-weight: bold;
48+
color: #666;
49+
}
50+
51+
.blue {
52+
color: #369;
53+
}
54+
55+
.italic {
56+
font-style: italic;
57+
}
58+
59+
.phone:before {
60+
content: '\260E';
61+
color: #666;
62+
margin-right: 10px;
63+
}
64+
65+
.fax:before {
66+
content: 'fax';
67+
color: #666;
68+
margin-right: 10px;
69+
font-size: 11px;
70+
}
71+
72+
.circle {
73+
position: relative;
74+
overflow: visible;
75+
}
76+
77+
.circle span {
78+
font-weight: bold;
79+
color: #900;
80+
}
81+
82+
.circle:after {
83+
content: '';
84+
position: absolute;
85+
top: -15px;
86+
bottom: -15px;
87+
left: -30px;
88+
width: 180px;
89+
border: 2px dotted red;
90+
border-radius: 100px;
91+
background: rgba(255, 0, 0, 0.03);
92+
}
93+
94+
95+
.star .small {
96+
overflow: visible;
97+
}
98+
99+
.star .small:after {
100+
content: '\2605';
101+
display: inline-block;
102+
margin: -1em 5px;
103+
font-size: 2em;
104+
color: #fb0;
105+
text-shadow: 1px 1px 2px #333;
106+
vertical-align: -3px;
107+
}
108+
109+
.bg-green {
110+
background: rgba(0, 255, 0, 0.05);
111+
}

‎examples/viewer/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
import {Viewer} from '@activewidgets/examples';
3-
import {components} from '../../';
3+
import {components} from '@activewidgets/vue';
44
import Vue from "vue";
55
import * as pages from './examples.js';
6-
import readme from '../README.md';
6+
import readme from '../demo/README.md';
77
import logo from './vue.svg';
88
import pkg from '../../package.json';
99

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@
2424
"vue": "^2"
2525
},
2626
"devDependencies": {
27-
"@activewidgets/examples": "0.0.2",
27+
"@activewidgets/examples": "0.0.3",
2828
"@activewidgets/options": "0.0.10",
2929
"@activewidgets/puppeteer": "0.0.4",
3030
"@activewidgets/testing": "0.0.3",
3131
"@babel/core": "^7",
3232
"@babel/preset-env": "^7",
3333
"@rollup/plugin-node-resolve": "^6",
3434
"@testing-library/vue": "^4",
35+
"@vue/component-compiler-utils": "^3",
3536
"postcss-import": "^12",
3637
"rimraf": "^3",
3738
"rollup": "^1.20",
@@ -40,6 +41,7 @@
4041
"rollup-plugin-sourcemaps": "^0.4",
4142
"rollup-plugin-terser": "^5",
4243
"style-inject": "^0.3",
44+
"vue-hot-reload-api": "*",
4345
"vue-template-compiler": "^2"
4446
},
4547
"alias": {

0 commit comments

Comments
 (0)