fix: vue - bring back simple demo (without storybook)

Author: FGRibreau

Diff for: packages/ui-predicate-vue/examples/simple.js

@@ -2,11 +2,13 @@ import Vue from 'vue';
 
 import App from './simple.vue';
 
-import uiPredicate from './..';
+import UIPredicateCore from '..';
+Vue.use(UIPredicateCore);
 
-Vue.use(uiPredicate);
-
-new Vue({
+// expose for debug purposes
+window.Vue = Vue;
+window.UIPredicateCore = UIPredicateCore;
+window.app = new Vue({
   el: '#app',
   render: h => h(App),
 });

Diff for: packages/ui-predicate-vue/examples/simple.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="app">
     <h1>Simple ui-predicate usage</h1>
-    <UIPredicate v-bind:config="config"></UIPredicate>
+    <ui-predicate :config="config" @onChange="onChange"></ui-predicate>
     <p>Tips: Use "alt + click" to create a sub-group.</p>
+    <pre>{{ ast }}</pre>
   </div>
 </template>
 
@@ -11,6 +12,7 @@ export default {
   name: 'app',
   data() {
     return {
+      ast: {},
       msg: 'Welcome to Your Vue.js App!',
       config: {
         operators: [
@@ -99,6 +101,11 @@ export default {
       },
     };
   },
+  methods: {
+    onChange(diff) {
+      this.ast = diff;
+    },
+  },
 };
 </script>
 

Diff for: packages/ui-predicate-vue/package-lock.json

@@ -11,6 +11,7 @@
     "test:watch": "jest --watch --coverage=false",
     "test:watch:coverage": "npm run --silent test:watch -- --coverage",
     "test:coverage": "true",
+    "dev":"parcel --no-cache examples/index.html",
     "storybook:build": "build-storybook --output-dir ../../docs/packages/$npm_package_name/$npm_package_version/examples",
     "storybook:watch": "start-storybook -p 9001",
     "image-snapshots": "npm run storybook:build && npm run image-snapshots:run",
@@ -53,7 +54,7 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "svg-url-loader": "^2.3.2",
-    "ui-predicate-core": "0.*",
+    "ui-predicate-core": "^0.1.0",
     "vue-jest": "^2.5.0",
     "vue-loader": "^14.2.2",
     "vue-template-compiler": "^2.5.16",

Diff for: packages/ui-predicate-vue/package.json

@@ -1,21 +1,25 @@
-const UIPredicateOptions = require('../src/UIPredicateOptions.vue');
-const UIPredicateComparison = require('../src/UIPredicateComparison.vue');
-const UIPredicateCompound = require('../src/UIPredicateCompound.vue');
-const UIPredicate = require('../src/UIPredicate.vue');
+const UIPredicateOptions = require('./ui-predicate-options.vue');
+const UIPredicateComparison = require('./ui-predicate-comparison.vue');
+const UIPredicateCompound = require('./ui-predicate-compound.vue');
+const UIPredicate = require('./ui-predicate.vue');
 
 // not single-source-of-truth, but need it for static refs
 const components = {
-  UIPredicateOptions,
-  UIPredicateComparison,
-  UIPredicateCompound,
-  UIPredicate,
+  // https://w3c.github.io/webcomponents/spec/custom/#concepts
+  // The custom element type identifies a custom element interface and is a sequence of characters that must match the NCName production,
+  // must contain a U+002D HYPHEN-MINUS character, and must not contain any uppercase ASCII letters.
+  'ui-predicate-options': UIPredicateOptions,
+  'ui-predicate-comparison': UIPredicateComparison,
+  'ui-predicate-compound': UIPredicateCompound,
+  'ui-predicate': UIPredicate,
 };
 
 // f(Vue, opts = {}) used by Vue.use()
 const install = function(Vue) {
-  Object.keys(components).forEach(name =>
-    Vue.component(name, components[name].default)
-  );
+  Object.keys(components).forEach(name => {
+    // console.log('Installing %s', name, components[name]);
+    Vue.component(name, components[name]);
+  });
 };
 
 /* istanbul ignore if */