Skip to content

Commit 952eae8

Browse files
jqwidgetsjqwidgets
committed
Initial Commit
1 parent c7673b1 commit 952eae8

File tree

2,406 files changed

+89338
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,406 files changed

+89338
-1
lines changed

‎README.md

Lines changed: 127 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,127 @@
1-
# vue_demos
1+
# This GitHub repository contains all jQWidgets Vue Demos.
2+
3+
You can view them online here: https://www.jqwidgets.com/vue/.
4+
5+
Build modern Web Apps with jQWidgets and Vue. jQWidgets Vue UI components will help you to build perfect looking web applications. Use the most advanced UI framework for Vue and save your time for the business logic. Choose from more than 60 UI components including Grid, Chart, Scheduler, Editor, TreeGrid and more. Our product supports native Vue features.
6+
7+
Vue Buttons - https://www.jqwidgets.com/vue/vue-buttons/
8+
9+
Vue BarGauge - https://www.jqwidgets.com/vue/vue-bargauge/
10+
11+
Vue BulletChart - https://www.jqwidgets.com/vue/vue-bulletchart/
12+
13+
Vue ComboBox - https://www.jqwidgets.com/vue/vue-combobox/
14+
15+
Vue Calendar - https://www.jqwidgets.com/vue/vue-calendar/
16+
17+
Vue Chart - https://www.jqwidgets.com/vue/vue-chart/
18+
19+
Vue ColorPicker - https://www.jqwidgets.com/vue/vue-colorpicker/
20+
21+
Vue ComplexInput - https://www.jqwidgets.com/vue/vue-complexinput/
22+
23+
Vue Docking - https://www.jqwidgets.com/vue/vue-docking/
24+
25+
Vue DropDownList - https://www.jqwidgets.com/vue/vue-dropdownlist/
26+
27+
Vue DataTable - https://www.jqwidgets.com/vue/vue-datatable/
28+
29+
Vue DateTimeInput - https://www.jqwidgets.com/vue/vue-datetimeinput/
30+
31+
Vue Draw - https://www.jqwidgets.com/vue/vue-draw/
32+
33+
Vue DragDrop - https://www.jqwidgets.com/vue/vue-dragdrop/
34+
35+
Vue DockingLayout - https://www.jqwidgets.com/vue/vue-dockinglayout/
36+
37+
Vue Editor - https://www.jqwidgets.com/vue/vue-editor/
38+
39+
Vue Expander - https://www.jqwidgets.com/vue/vue-expander/
40+
41+
Vue Form - https://www.jqwidgets.com/vue/vue-form/
42+
43+
Vue FormattedInput - https://www.jqwidgets.com/vue/vue-formattedinput/
44+
45+
Vue FileUpload - https://www.jqwidgets.com/vue/vue-fileupload/
46+
47+
Vue Grid - https://www.jqwidgets.com/vue/vue-grid/
48+
49+
Vue Gauge - https://www.jqwidgets.com/vue/vue-gauge/
50+
51+
Vue Input - https://www.jqwidgets.com/vue/vue-input/
52+
53+
Vue Layout - https://www.jqwidgets.com/vue/vue-layout/
54+
55+
Vue ListMenu - https://www.jqwidgets.com/vue/vue-listmenu/
56+
57+
Vue Loader - https://www.jqwidgets.com/vue/vue-loader/
58+
59+
Vue ListBox - https://www.jqwidgets.com/vue/vue-listbox/
60+
61+
Vue Knob - https://www.jqwidgets.com/vue/vue-knob/
62+
63+
Vue Kanban - https://www.jqwidgets.com/vue/vue-Kanban/
64+
65+
Vue MaskedInput - https://www.jqwidgets.com/vue/vue-maskedinput/
66+
67+
Vue Menu - https://www.jqwidgets.com/vue/vue-menu/
68+
69+
Vue NavBar - https://www.jqwidgets.com/vue/vue-navbar/
70+
71+
Vue NavigationBar - https://www.jqwidgets.com/vue/vue-navigationbar/
72+
73+
Vue Notification - https://www.jqwidgets.com/vue/vue-notification/
74+
75+
Vue NumberInput - https://www.jqwidgets.com/vue/vue-numberinput/
76+
77+
Vue Toolbar - https://www.jqwidgets.com/vue/vue-Toolbar/
78+
79+
Vue TextArea - https://www.jqwidgets.com/vue/vue-textarea/
80+
81+
Vue PasswordInput - https://www.jqwidgets.com/vue/vue-passwordinput/
82+
83+
Vue Panel - https://www.jqwidgets.com/vue/vue-panel/
84+
85+
Vue Popover - https://www.jqwidgets.com/vue/vue-popover/
86+
87+
Vue PivotGrid - https://www.jqwidgets.com/vue/vue-pivotgrid/
88+
89+
Vue ProgressBar - https://www.jqwidgets.com/vue/vue-progressbar/
90+
91+
Vue Rating - https://www.jqwidgets.com/vue/vue-rating/
92+
93+
Vue RangeSelector - https://www.jqwidgets.com/vue/vue-rangeselector/
94+
95+
Vue ResponsivePanel - https://www.jqwidgets.com/vue/vue-responsivepanel/
96+
97+
Vue Ribbon - https://www.jqwidgets.com/vue/vue-ribbon/
98+
99+
Vue Scheduler - https://www.jqwidgets.com/vue/vue-scheduler/
100+
101+
Vue Slider - https://www.jqwidgets.com/vue/vue-slider/
102+
103+
Vue ScrollBar - https://www.jqwidgets.com/vue/vue-scrollbar/
104+
105+
Vue Splitter - https://www.jqwidgets.com/vue/vue-splitter/
106+
107+
Vue ScrollView - https://www.jqwidgets.com/vue/vue-scrollview/
108+
109+
Vue Sortable - https://www.jqwidgets.com/vue/vue-sortable/
110+
111+
Vue Tabs - https://www.jqwidgets.com/vue/vue-tabs/
112+
113+
Vue Tree - https://www.jqwidgets.com/vue/vue-tree/
114+
115+
Vue TreeGrid - https://www.jqwidgets.com/vue/vue-treegrid/
116+
117+
Vue TreeMap - https://www.jqwidgets.com/vue/vue-treemap/
118+
119+
Vue TagCloud - https://www.jqwidgets.com/vue/vue-tagcloud/
120+
121+
Vue Tooltip - https://www.jqwidgets.com/vue/vue-tooltip/
122+
123+
Vue Validator - https://www.jqwidgets.com/vue/vue-validator/
124+
125+
Vue Window - https://www.jqwidgets.com/vue/vue-window/
126+
127+
If you would like to contribute with new examples, we welcome pull requests and feedback!

‎bargauge/addandremovevalues/App.vue

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<template>
2+
<div>
3+
<JqxBarGauge ref="myBarGauge" style="float: left"
4+
:width="getWidth" :height="600" :relativeInnerRadius="0.2" :max="500"
5+
:values="[450, 15, 330]" :baseValue="50" :startAngle="0" :endAngle="360"
6+
:title="'Nutritional Values'" :colorScheme="'scheme05'" :tooltip="tooltip"
7+
:barSpacing="9" :animationDuration="0" :labels="labels">
8+
</JqxBarGauge>
9+
10+
<div style="margin-left: 50px; margin-top: 150px; float: left;">
11+
<JqxListBox ref="myListBox" @checkChange="onCheckChange()"
12+
:width="230" :source="dataAdapter" :displayMember="'name'"
13+
:valueMember="'calories'" :checkboxes="true">
14+
</JqxListBox>
15+
16+
<br />
17+
<br />
18+
<div ref='log'>
19+
<strong>Summary calories: 970</strong>
20+
</div>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
27+
import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
28+
29+
export default {
30+
components: {
31+
JqxBarGauge,
32+
JqxListBox
33+
},
34+
data: function () {
35+
return {
36+
getWidth: getWidth('barGauge'),
37+
tooltip: {
38+
visible: true,
39+
formatFunction: (value, index) => {
40+
let items = this.$refs.myListBox.getCheckedItems();
41+
let item = items[index];
42+
return item.label + ': ' + value + ' cal.';
43+
}
44+
},
45+
labels: {
46+
formatFunction: (value) => {
47+
return value + ' cal.';
48+
},
49+
precision: 0,
50+
indent: 15,
51+
connectorWidth: 1
52+
},
53+
dataAdapter: new jqx.dataAdapter(this.source)
54+
}
55+
},
56+
beforeCreate: function () {
57+
const data = [{
58+
'id': '1',
59+
'name': 'Hot Chocolate',
60+
'calories': '370'
61+
}, {
62+
'id': '2',
63+
'name': 'Peppermint Hot Chocolate',
64+
'calories': '440'
65+
}, {
66+
'id': '3',
67+
'name': 'Salted Caramel Hot Chocolate',
68+
'calories': '450'
69+
}, {
70+
'id': '4',
71+
'name': 'White Hot Chocolate',
72+
'calories': '420'
73+
}, {
74+
'id': '5',
75+
'name': 'Caffe Americano',
76+
'calories': '15'
77+
}, {
78+
'id': '6',
79+
'name': 'Caffe Latte',
80+
'calories': '190'
81+
}, {
82+
'id': '7',
83+
'name': 'Caffe Mocha',
84+
'calories': '330'
85+
}];
86+
87+
this.source = {
88+
datatype: 'json',
89+
datafields: [
90+
{ name: 'name' },
91+
{ name: 'calories', type: 'int' }
92+
],
93+
id: 'id',
94+
localdata: data
95+
}
96+
},
97+
mounted: function () {
98+
this.$refs.myListBox.checkIndex(2);
99+
this.$refs.myListBox.checkIndex(5);
100+
this.$refs.myListBox.checkIndex(6);
101+
},
102+
methods: {
103+
onCheckChange: function () {
104+
let items = this.$refs.myListBox.getCheckedItems();
105+
let arrayOfItems = this.convertToArray(items);
106+
let log = this.$refs.log;
107+
log.innerHTML = '<strong>Summary calories: ' + this.getSum(arrayOfItems) + '</strong>';
108+
this.$refs.myBarGauge.val(arrayOfItems);
109+
},
110+
getSum: function (array) {
111+
array = array || [];
112+
let sum = 0;
113+
if (array.length) {
114+
for (let i = 0; i < array.length; i += 1) {
115+
sum += array[i];
116+
}
117+
}
118+
return sum;
119+
},
120+
convertToArray: function (items) {
121+
let preparedArray = new Array(items.length);
122+
for (let i = 0; i < items.length; i += 1) {
123+
preparedArray[i] = items[i].value;
124+
}
125+
return preparedArray;
126+
}
127+
}
128+
}
129+
</script>
130+
131+
<style scoped>
132+
</style>

‎bargauge/addandremovevalues/main.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import App from './App'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
el: '#app',
8+
components: { App },
9+
template: '<App/>'
10+
})

‎bargauge/addandremovevalues/package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"dependencies": {
3+
"jqwidgets-scripts": "~6.0.6",
4+
"vue": "^2.5.16"
5+
},
6+
"main": "main.js"
7+
}

‎bargauge/autochangevalue/App.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd()"
3+
:width="getWidth" :height="600" :relativeInnerRadius="0.6"
4+
:values="[25]" :formatFunction="formatFunction">
5+
</JqxBarGauge>
6+
</template>
7+
8+
<script>
9+
import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
10+
11+
export default {
12+
components: {
13+
JqxBarGauge,
14+
},
15+
data: function () {
16+
return {
17+
getWidth: getWidth('barGauge')
18+
}
19+
},
20+
methods: {
21+
formatFunction: function (value, index, color) {
22+
let barGaugePalette = ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'];
23+
24+
if (value < 20) {
25+
return barGaugePalette[0];
26+
}
27+
if (value < 40) {
28+
return barGaugePalette[1];
29+
}
30+
if (value < 60) {
31+
return barGaugePalette[2];
32+
}
33+
if (value < 80) {
34+
return barGaugePalette[3];
35+
}
36+
if (value <= 100) {
37+
return barGaugePalette[4];
38+
}
39+
},
40+
onDrawEnd: function () {
41+
let values = [this.getRandomInt(1, 99)];
42+
setTimeout(() => {
43+
this.$refs.myBarGauge.val(values);
44+
}, 1000);
45+
},
46+
getRandomInt: function (min, max) {
47+
return Math.floor(Math.random() * (max - min)) + min;
48+
}
49+
}
50+
}
51+
</script>
52+
53+
<style scoped>
54+
</style>

‎bargauge/autochangevalue/main.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import App from './App'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
el: '#app',
8+
components: { App },
9+
template: '<App/>'
10+
})

‎bargauge/autochangevalue/package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"dependencies": {
3+
"jqwidgets-scripts": "~6.0.6",
4+
"vue": "^2.5.16"
5+
},
6+
"main": "main.js"
7+
}

‎bargauge/createComponent/App.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<JqxBarGauge ref="myBarGauge" :autoCreate="false"></JqxBarGauge>
3+
</template>
4+
5+
<script>
6+
import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
7+
8+
export default {
9+
components: {
10+
JqxBarGauge,
11+
},
12+
mounted: function() {
13+
14+
const settings = {
15+
width: 600,
16+
height: 600,
17+
max: 150,
18+
values: [102, 115, 130, 137],
19+
colorScheme: 'scheme02',
20+
tooltip: {
21+
visible: true,
22+
formatFunction: (value) => {
23+
let realVal = parseInt(value);
24+
return ('Year: 2016<br/>Price Index:' + realVal);
25+
}
26+
}
27+
};
28+
29+
this.$refs.myBarGauge.createComponent(settings);
30+
}
31+
}
32+
</script>
33+
34+
<style scoped>
35+
36+
</style>

0 commit comments

Comments
 (0)