Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
This is a quick example that shows how to wrap an oojs-ui component in a Vue component. It's nasty because of the lack of componentization of oojs-ui, but it's just a proof of concept.
<template>
<!-- In Vue, $el is this root element defined in the template section -->
<span></span>
</template>
<script>
// the script-loader webpack plugin has to be used to hack the oojs-ui files directly into script tags
// because they have no modularization whatsoever (AMD, ES6, etc.)
import 'script-loader!oojs/dist/oojs.jquery'
import 'oojs-ui/dist/oojs-ui-core'
import 'script-loader!oojs-ui/dist/oojs-ui-mediawiki'
export default {
name: 'oojs-ui-checkbox',
props: [ 'selected' ],
data () {
return {
checkbox: new OO.ui.CheckboxInputWidget({ selected: this.selected })
}
},
mounted () {
var self = this
// This just worked in the few minutes I had to put it together, but
// I found out later that this.checkbox.$element is a jQuery thing so
// in theory it could be made a little nicer
this.$el.append(this.checkbox.$element[0])
this.checkbox.on('change', function () {
// This gets listened to in the parent with something like:
// <oojs-ui-checkbox :selected="bv.on" @update="updateCheck($event, bv)"/>
// even though :selected.sync should work in Vue 2.3+, didn't have time to debug
// Here, bv is just a local with a boolean field called "on"
self.$emit('update', self.checkbox.isSelected())
})
}
}
</script>
<style src="../assets/oojs-ui-core-mediawiki.min.css"></style>
... for this style reference to work I had to symlink the css but it would be better
... to use webpack and import it via JS or something nicer like that.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment