Start-ANNA-PALM.imjoy.html

<docs lang="markdown">
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "Start-ANNA-PALM",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.2",
  "api_version": "0.1.2",
  "description": "This is a backbone plugin for using Vue.js in ImJoy",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "env": "",
  "requirements": [
        "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js",
        "https://static.imjoy.io/spectre.css/spectre.min.css",
        "https://static.imjoy.io/spectre.css/spectre-exp.min.css",
        "https://static.imjoy.io/spectre.css/spectre-icons.min.css"
  ],
  "dependencies": [],
  "defaults": {"w": 20, "h": 10},
  "runnable": true
}
</config>

<script lang="javascript">
const default_options = {
  "Default Option 1": {'src': 'https://via.placeholder.com/150', 'callback': ()=>{
    api.alert('Option 1')
  }},
  "Default Option 2": {'src': 'https://via.placeholder.com/150', 'callback': ()=>{
    api.alert('Option 2')
  }}}
class ImJoyPlugin {
  async setup() {
    this.store = {options: {}}
    this.app = new Vue({
        el: '#app',
        data: this.store,
        methods: {
   
        }
    })
  }
  async run(ctx) {
    this.store.options = ctx.data.options || default_options
    this.app.$forceUpdate()
  }
}
api.export(new ImJoyPlugin())
</script>

<window lang="html">
<div style="text-align: center;" id="app">
  <div class="container">
  <div class="columns">
   <button  class="column col-xs-6 cursor-pointer btn" @click="d.callback()" v-for="(d, k) in options">
     <p>{{k}}</p>
     <img :src="d.src" class="img-fit-contain cursor-pointer" alt="k" >
     </div>
  </button>
</div>

</div>
</window>

<style lang="css">
</style>