Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webix-hub/webix-vue
Adapter to use Webix with Vue
https://github.com/webix-hub/webix-vue
vue webix webix-integration
Last synced: about 1 month ago
JSON representation
Adapter to use Webix with Vue
- Host: GitHub
- URL: https://github.com/webix-hub/webix-vue
- Owner: webix-hub
- Created: 2017-02-15T11:17:16.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-06T20:55:53.000Z (over 1 year ago)
- Last Synced: 2024-04-25T23:20:44.171Z (9 months ago)
- Topics: vue, webix, webix-integration
- Language: JavaScript
- Size: 87.9 KB
- Stars: 19
- Watchers: 11
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VueJS adapter for Webix UI
[](https://badge.fury.io/js/vue-webix)
See the [detailed documentation on integration of Webix with VueJS](http://docs.webix.com/desktop__vue.html).
If you need a framework for using Webix UI, we highly recommend you use the [Webix Jet](https://webix.gitbooks.io/webix-jet/content/chapter1.html) framework for building web apps with Webix, as it is native for the library and will help you to manage the development stages in the most natural way.
## When to Use Vue+Webix integration
- to add a few complex widgets to a VueJS-based apps (such as datatable, spreadsheet, etc.)
- to use a VueJS app inside of Webix UI (reactive templates, custom forms, etc.)
You can also create a custom component by wrapping a Webix widget into a Vue component or use one of ready-made Vue+Webix Form controls.
## webix-ui component in a Vue app
This techique allows adding a Webix component in a Vue-based app
### Rendering a Webix view
- create a Vue app
- use the tag < webix-ui > inside of the Vue template to define a Webix widget
- specify an object with the Webix UI configuration inside of the data object of the Vue instance
- bind the "config" attribute of < webix-ui > to the data object that contains the UI configuration via the v-bind directive
In the example below we add a Calendar and a List Webix views to a Vue application:
```js
const app = Vue.createApp({
template: `
1. Building UI
`,
data() {
return {
ui: {
cols: [
{
view: "calendar",
},
{
view: "list",
select: true,
data,
},
],
},
};
}
});
app.component(...); // init webix-ui component
app.mount("#demo1");
```
### Data binding
It's possible to bind data of a Webix widget and a Vue template using a common Vue technique: the _v-bind_ directive.
In the example below we add a Webix DataTable widget into a Vue app and add a button by click on which data in the datatable will be cleared:
```js
const app = Vue.createApp({
template: `
2. One way data binding,
Clean
`,
data() {
return {
data,
ui: {
view: "datatable",
autoheight: true,
select: "row",
columns:[
{
id: "value",
header: "Section Index"
},
...
]
}
};
}
});
app.component(...); // init webix-ui component
app.mount("#demo2");
```
### Two-way data binding
You can also implement two-way data binding using the regular _v-model_ Vue directive.
For example, we can create a Vue template with an input element and add a < webix-ui > element that will render a Webix Layout with a Slider inside. If a value is changed in an input or a slider, it will automatically get updated in the other component. See the code below:
```js
const app = Vue.createApp({
template: `
3. Two-way data binding, try to change
`,
data() {
return {
result: 50,
ui: {
margin: 20,
rows: [
{
view: "template",
type: "header",
template: "Webix UI",
},
{
view: "slider",
label: "Change me",
labelWidth: 120,
inputWidth: 300,
value: 50,
on: {
onChange() {
this.$scope.$emit("update:modelValue", this.getValue());
},
onValue(value) {
this.setValue(value);
},
},
},
],
},
};
}
});
app.component(...); // init webix-ui component
app.mount("#demo3");
```
## view: "vue" in a Webix app
This technique allows adding a Vue component to a Webix-based app.
For example, we have a Webix Layout with a List view and we want to display a data item in a template depending on the selected List item.
The code sample below shows how a Webix List and a Vue template can be bound together:
```js
const list = {
view: "list",
id: "list",
select: true,
template: "#value# (#size#)",
data: [
{ id: 1, value: "Record 1", size: 92 },
...
]
};
const preview = {
view: "vue",
id: "preview",
template: `
This part is rendered by VueJS, data from the list
Selected:
Size:
`,
data: {
value: "",
size: ""
},
watch: {
size(value) {
$$("list").updateItem($$("list").getSelectedId(), { size: value });
}
}
};
$$("preview").bind("list");
```
## Custom Components
If you have some UI element which is reused in an app several times or you just don't like storing UI config in data, it is possible to write a custom Vue component around any Webix component.
### Creating a custom component
For example, we have an input and a slider. We want them to update their values simultaneously.
1. Register a global Vue component using app.component(name,options):
```js
const app = Vue.createApp({ ... });
app.component("my-slider", {
// component config options
});
```
2. Specify the necessary Vue configuration options for the component
```js
app.component("my-slider", {
props: ["modelValue"],
// always an empty div
template: "
",
watch: {
// updates component when the bound value changes
value: {
handler(value) {
webix.$$(this.webixId).setValue(value);
},
},
},
mounted() {
// initializes Webix Slider
this.webixId = webix.ui({
// container and scope are mandatory, other properties are optional
container: this.$el,
$scope: this,
view: "slider",
value: this.modelValue,
});
// informs Vue about changed value in case of 2-way data binding
$$(this.webixId).attachEvent("onChange", function() {
var value = this.getValue();
// you can use a custom event here
this.$scope.$emit("update:modelValue", value);
});
},
// memory cleaning
destroyed() {
webix.$$(this.webixId).destructor();
},
});
```
3. Use the registered component in the Vue component's template as a custom element.
Overall, it would look something like this:
```js
const app = Vue.createApp({
template: `
Vue + Webix: Custom UI
`,
data: {
progress: 50,
},
});
app.component("my-slider", { ... });
app.mount("#demo1");
```
The above is an example based on a global Vue component, but this approach is also possible with local components.
### Form controls
There is also a set of readily available Vue-wrapped Webix Form Controls:
- < webix-text >
- < webix-datepicker >
- < webix-colorpicker >
- < webix-slider >
- < webix-select >
- < webix-richselect >
- < webix-combo >
- < webix-multicombo >
- < webix-radio >
- < webix-segmented >
- < webix-tabbar >
- < webix-textarea >
- < webix-checkbox >
You can use any of these controls in a Vue application as seen in the code below:
```js
const app = Vue.createApp({
template: `
User
`,
data: {
fname: "Reno",
lname: "Abrams",
birthdate: new Date(1992, 10, 24),
color: "#aaaff0",
level: 20,
},
});
app.component(...) // register controls
app.mount("#demo1");
```