Initial Commit

README.md

@@ -1 +1,127 @@
-# vue_demos
+# This GitHub repository contains all jQWidgets Vue Demos. 
+
+You can view them online here: https://www.jqwidgets.com/vue/.
+
+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.
+
+Vue Buttons - https://www.jqwidgets.com/vue/vue-buttons/
+
+Vue BarGauge - https://www.jqwidgets.com/vue/vue-bargauge/
+
+Vue BulletChart - https://www.jqwidgets.com/vue/vue-bulletchart/
+
+Vue ComboBox - https://www.jqwidgets.com/vue/vue-combobox/
+
+Vue Calendar - https://www.jqwidgets.com/vue/vue-calendar/
+
+Vue Chart - https://www.jqwidgets.com/vue/vue-chart/
+
+Vue ColorPicker - https://www.jqwidgets.com/vue/vue-colorpicker/
+
+Vue ComplexInput - https://www.jqwidgets.com/vue/vue-complexinput/
+
+Vue Docking - https://www.jqwidgets.com/vue/vue-docking/
+
+Vue DropDownList - https://www.jqwidgets.com/vue/vue-dropdownlist/
+
+Vue DataTable - https://www.jqwidgets.com/vue/vue-datatable/
+
+Vue DateTimeInput - https://www.jqwidgets.com/vue/vue-datetimeinput/
+
+Vue Draw - https://www.jqwidgets.com/vue/vue-draw/
+
+Vue DragDrop - https://www.jqwidgets.com/vue/vue-dragdrop/
+
+Vue DockingLayout - https://www.jqwidgets.com/vue/vue-dockinglayout/
+
+Vue Editor - https://www.jqwidgets.com/vue/vue-editor/
+
+Vue Expander - https://www.jqwidgets.com/vue/vue-expander/
+
+Vue Form - https://www.jqwidgets.com/vue/vue-form/
+
+Vue FormattedInput - https://www.jqwidgets.com/vue/vue-formattedinput/
+
+Vue FileUpload - https://www.jqwidgets.com/vue/vue-fileupload/
+
+Vue Grid - https://www.jqwidgets.com/vue/vue-grid/
+
+Vue Gauge - https://www.jqwidgets.com/vue/vue-gauge/
+
+Vue Input - https://www.jqwidgets.com/vue/vue-input/
+
+Vue Layout - https://www.jqwidgets.com/vue/vue-layout/
+
+Vue ListMenu - https://www.jqwidgets.com/vue/vue-listmenu/
+
+Vue Loader - https://www.jqwidgets.com/vue/vue-loader/
+
+Vue ListBox - https://www.jqwidgets.com/vue/vue-listbox/
+
+Vue Knob - https://www.jqwidgets.com/vue/vue-knob/
+
+Vue Kanban - https://www.jqwidgets.com/vue/vue-Kanban/
+
+Vue MaskedInput - https://www.jqwidgets.com/vue/vue-maskedinput/
+
+Vue Menu - https://www.jqwidgets.com/vue/vue-menu/
+
+Vue NavBar - https://www.jqwidgets.com/vue/vue-navbar/
+
+Vue NavigationBar - https://www.jqwidgets.com/vue/vue-navigationbar/
+
+Vue Notification - https://www.jqwidgets.com/vue/vue-notification/
+
+Vue NumberInput - https://www.jqwidgets.com/vue/vue-numberinput/
+
+Vue Toolbar - https://www.jqwidgets.com/vue/vue-Toolbar/
+
+Vue TextArea - https://www.jqwidgets.com/vue/vue-textarea/
+
+Vue PasswordInput - https://www.jqwidgets.com/vue/vue-passwordinput/
+
+Vue Panel - https://www.jqwidgets.com/vue/vue-panel/
+
+Vue Popover - https://www.jqwidgets.com/vue/vue-popover/
+
+Vue PivotGrid - https://www.jqwidgets.com/vue/vue-pivotgrid/
+
+Vue ProgressBar - https://www.jqwidgets.com/vue/vue-progressbar/
+
+Vue Rating - https://www.jqwidgets.com/vue/vue-rating/
+
+Vue RangeSelector - https://www.jqwidgets.com/vue/vue-rangeselector/
+
+Vue ResponsivePanel - https://www.jqwidgets.com/vue/vue-responsivepanel/
+
+Vue Ribbon - https://www.jqwidgets.com/vue/vue-ribbon/
+
+Vue Scheduler - https://www.jqwidgets.com/vue/vue-scheduler/
+
+Vue Slider - https://www.jqwidgets.com/vue/vue-slider/
+
+Vue ScrollBar - https://www.jqwidgets.com/vue/vue-scrollbar/
+
+Vue Splitter - https://www.jqwidgets.com/vue/vue-splitter/
+
+Vue ScrollView - https://www.jqwidgets.com/vue/vue-scrollview/
+
+Vue Sortable - https://www.jqwidgets.com/vue/vue-sortable/
+
+Vue Tabs - https://www.jqwidgets.com/vue/vue-tabs/
+
+Vue Tree - https://www.jqwidgets.com/vue/vue-tree/
+
+Vue TreeGrid - https://www.jqwidgets.com/vue/vue-treegrid/
+
+Vue TreeMap - https://www.jqwidgets.com/vue/vue-treemap/
+
+Vue TagCloud - https://www.jqwidgets.com/vue/vue-tagcloud/
+
+Vue Tooltip - https://www.jqwidgets.com/vue/vue-tooltip/
+
+Vue Validator - https://www.jqwidgets.com/vue/vue-validator/
+
+Vue Window - https://www.jqwidgets.com/vue/vue-window/
+
+If you would like to contribute with new examples, we welcome pull requests and feedback! 

bargauge/addandremovevalues/App.vue

@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <JqxBarGauge ref="myBarGauge" style="float: left"
+                     :width="getWidth" :height="600" :relativeInnerRadius="0.2" :max="500"
+                     :values="[450, 15, 330]" :baseValue="50" :startAngle="0" :endAngle="360"
+                     :title="'Nutritional Values'" :colorScheme="'scheme05'" :tooltip="tooltip"
+                     :barSpacing="9" :animationDuration="0" :labels="labels">
+        </JqxBarGauge>
+
+        <div style="margin-left: 50px; margin-top: 150px; float: left;">
+            <JqxListBox ref="myListBox" @checkChange="onCheckChange()"
+                        :width="230" :source="dataAdapter" :displayMember="'name'"
+                        :valueMember="'calories'" :checkboxes="true">
+            </JqxListBox>
+
+            <br />
+            <br />
+            <div ref='log'>
+                <strong>Summary calories: 970</strong>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+    import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+            JqxListBox
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge'),
+                tooltip: {
+                    visible: true,
+                    formatFunction: (value, index) => {
+                        let items = this.$refs.myListBox.getCheckedItems();
+                        let item = items[index];
+                        return item.label + ': ' + value + ' cal.';
+                    }
+                },
+                labels: {
+                    formatFunction: (value) => {
+                        return value + ' cal.';
+                    },
+                    precision: 0,
+                    indent: 15,
+                    connectorWidth: 1
+                },
+                dataAdapter: new jqx.dataAdapter(this.source)
+            }
+        },
+        beforeCreate: function () {
+            const data = [{
+                'id': '1',
+                'name': 'Hot Chocolate',
+                'calories': '370'
+            }, {
+                'id': '2',
+                'name': 'Peppermint Hot Chocolate',
+                'calories': '440'
+            }, {
+                'id': '3',
+                'name': 'Salted Caramel Hot Chocolate',
+                'calories': '450'
+            }, {
+                'id': '4',
+                'name': 'White Hot Chocolate',
+                'calories': '420'
+            }, {
+                'id': '5',
+                'name': 'Caffe Americano',
+                'calories': '15'
+            }, {
+                'id': '6',
+                'name': 'Caffe Latte',
+                'calories': '190'
+            }, {
+                'id': '7',
+                'name': 'Caffe Mocha',
+                'calories': '330'
+            }];
+
+            this.source = {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name' },
+                    { name: 'calories', type: 'int' }
+                ],
+                id: 'id',
+                localdata: data
+            }
+        },
+        mounted: function () {
+            this.$refs.myListBox.checkIndex(2);
+            this.$refs.myListBox.checkIndex(5);
+            this.$refs.myListBox.checkIndex(6);
+        },
+        methods: {
+            onCheckChange: function () {
+                let items = this.$refs.myListBox.getCheckedItems();
+                let arrayOfItems = this.convertToArray(items);
+                let log = this.$refs.log;
+                log.innerHTML = '<strong>Summary calories: ' + this.getSum(arrayOfItems) + '</strong>';
+                this.$refs.myBarGauge.val(arrayOfItems);
+            },
+            getSum: function (array) {
+                array = array || [];
+                let sum = 0;
+                if (array.length) {
+                    for (let i = 0; i < array.length; i += 1) {
+                        sum += array[i];
+                    }
+                }
+                return sum;
+            },
+            convertToArray: function (items) {
+                let preparedArray = new Array(items.length);
+                for (let i = 0; i < items.length; i += 1) {
+                    preparedArray[i] = items[i].value;
+                }
+                return preparedArray;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+</style>

bargauge/addandremovevalues/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})

bargauge/addandremovevalues/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}

bargauge/autochangevalue/App.vue

@@ -0,0 +1,54 @@
+<template>
+    <JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd()"
+                 :width="getWidth" :height="600" :relativeInnerRadius="0.6"
+                 :values="[25]" :formatFunction="formatFunction">
+    </JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        data: function () {
+            return {
+                getWidth: getWidth('barGauge')
+            }
+        },
+        methods: {
+            formatFunction: function (value, index, color) {
+                let barGaugePalette = ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'];
+
+                if (value < 20) {
+                    return barGaugePalette[0];
+                }
+                if (value < 40) {
+                    return barGaugePalette[1];
+                }
+                if (value < 60) {
+                    return barGaugePalette[2];
+                }
+                if (value < 80) {
+                    return barGaugePalette[3];
+                }
+                if (value <= 100) {
+                    return barGaugePalette[4];
+                }
+            },
+            onDrawEnd: function () {
+                let values = [this.getRandomInt(1, 99)];
+                setTimeout(() => {
+                    this.$refs.myBarGauge.val(values);
+                }, 1000);
+            },
+            getRandomInt: function (min, max) {
+                return Math.floor(Math.random() * (max - min)) + min;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+</style>

bargauge/autochangevalue/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})

bargauge/autochangevalue/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jqwidgets-scripts": "~6.0.6",
+    "vue": "^2.5.16"
+  },
+  "main": "main.js"
+}

bargauge/createComponent/App.vue

@@ -0,0 +1,36 @@
+<template>
+    <JqxBarGauge ref="myBarGauge" :autoCreate="false"></JqxBarGauge>
+</template>
+
+<script>
+    import JqxBarGauge from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbargauge.vue';
+
+    export default {
+        components: {
+            JqxBarGauge,
+        },
+        mounted: function() {
+
+            const settings = {
+                width: 600,
+                height: 600,
+                max: 150,
+                values: [102, 115, 130, 137],
+                colorScheme: 'scheme02',
+                tooltip: {
+                    visible: true,
+                    formatFunction: (value) => {
+                        let realVal = parseInt(value);
+                        return ('Year: 2016<br/>Price Index:' + realVal);
+                    }
+                }
+            };   
+
+            this.$refs.myBarGauge.createComponent(settings);
+        }
+    }
+</script>
+
+<style scoped>
+	
+</style>