JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://unpkg.com/ic-crud-dropdown/dist/umd/ic-crud-dropdown.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ic-crud-dropdown/dist/umd/ic-crud-dropdown.min.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@^1.5.1/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@%5E1.5.1/dist/bootstrap-vue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app"></div>
JavaScript
Vue.component('ic-crud-dropdown', window.IcCrudDropdown.default);
new Vue({
el: '#app',
template: `<div :style="{display: 'flex', justifyContent: 'space-around'}">
<ic-crud-dropdown
:selected-item="selectedShow"
:items="shows"
:formly-edit-fields="fields"
:formly-add-fields="fields"
txt-single-entitity-name="TV Show"
txt-plural-entitity-name="TV Shows"
@create="onCreate"
@update="onUpdate"
@delete="onDelete"
@select="onSelect"
/>
<code><pre>{{ JSON.stringify(shows, null, 4) }}</pre></code>
<code><pre>{{ JSON.stringify(selectedShow, null, 4) }}</pre></code>
</div>`,
data: {
fields: [
{
key: 'name',
type: 'input',
required: true,
templateOptions: {label: 'Name'}
}, {
key: 'season',
type: 'input',
requried: true,
templateOptions: {label: 'Season', atts: {type: 'number'}}
}, {
key: 'channel',
type: 'select',
options: ['CB ', 'USA'],
templateOptions: {label: 'Channel'}
},
],
shows: [
{ id: 's0', name: 'The Big Bang Theory', season: 1, channel: 'CBS'},
{ id: 's1', name: 'Suits', season: 3, channel: 'USA'},
],
selectedShow: null,
},
methods: {
onCreate(event) {
this.shows.push(event);
},
onUpdate(event) {
const index = this.shows.indexOf(
this.shows.find(s => s.id === event.id)
);
this.shows.splice(index, 1, event.item);
},
onDelete(event) {
const index = this.shows.indexOf(
this.shows.find(s => s.id === event.id)
);
this.shows.splice(index, 1);
},
onSelect(event) {
this.selectedShow = event.item;
}
}
});