[beast: 36/47] EBEAST: vc/projectshell.vue: add BseProject Shell component

[Tim Janik <timj src gnome org>]

commit ba8bde6a6562a0e649abefc85acd79d2fe902f2a
Author: Tim Janik <timj gnu org>
Date:   Thu Jun 8 18:06:33 2017 +0200

    EBEAST: vc/projectshell.vue: add BseProject Shell component
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/vc/bundle.js        |    1 +
 ebeast/vc/projectshell.vue |   72 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 0 deletions(-)
---
diff --git a/ebeast/vc/bundle.js b/ebeast/vc/bundle.js
index 4593b48..c1fc1fd 100644
--- a/ebeast/vc/bundle.js
+++ b/ebeast/vc/bundle.js
@@ -12,6 +12,7 @@ const vue_components = [
   require ('./playcontrols.vue'),
   require ('./modaldialog.vue'),
   require ('./aboutdialog.vue'),
+  require ('./projectshell.vue'),
 ];
 
 // register components
diff --git a/ebeast/vc/projectshell.vue b/ebeast/vc/projectshell.vue
new file mode 100644
index 0000000..708fe40
--- /dev/null
+++ b/ebeast/vc/projectshell.vue
@@ -0,0 +1,72 @@
+<!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->
+
+<docs>
+  ## vc-projectshell - Main shell used to display a BSE project
+  ### Props:
+  - **bse-project** - A *Bse.Project* instance to be displayed and edited.
+  - **project** - Read-only, the value of *bse-project*.
+</docs>
+
+<style lang="less">
+  @import 'mixins.less';
+  .vc-projectshell { }
+</style>
+
+<template>
+  <div class="vc-projectshell">
+    Project Shell. <br />
+    <vc-playcontrols> </vc-playcontrols>
+    <br />
+    {{ message }}
+    <br />
+    <vc-button @click="show_aboutdialog = true">About</vc-button>
+    <vc-button @click="frob (1, $event)">1</vc-button>
+    <vc-button @click="frob (2, $event)">2</vc-button>
+    <vc-button @click="frob (3, $event)">3</vc-button>
+    <vc-aboutdialog v-if="show_aboutdialog" @close="show_aboutdialog = false">
+    </vc-aboutdialog>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  name: 'vc-projectshell',
+  data: function() {
+    let d = {
+      message: 'Interpolated text',
+      show_aboutdialog: false,
+    };
+    for (const attrname in Electron.app)
+      d[attrname] = Electron.app[attrname];
+    return d;
+  },
+  methods: {
+    command (cmd) {
+      switch (cmd) {
+       case 'about-dialog':
+         this.show_aboutdialog = !this.show_aboutdialog;
+         break;
+       default:
+         console.log ('SHELLCOMMAND: ' + cmd);
+         break;
+      }
+    },
+    frob (w, e) { App.status (w); },
+  },
+  computed: {
+    project: function () {
+      if (!this.bse_project)
+       this.bse_project = this['bse-project'];
+      if (!this.bse_project)
+       this.bse_project = Bse.server.create_project ('Untitled');
+      return this.bse_project;
+    }
+  },
+  props: {
+    'bse-project': {
+      type: Object,
+      validator (value) { return value instanceof Bse.Project; },
+    },
+  },
+};
+</script>