fix: follow (and understand) custom-element HTML spec

Author: FGRibreau

Diff for: packages/ui-predicate-vue/src/UIPredicateComparison.vue renamed to packages/ui-predicate-vue/src/ui-predicate-comparison.vue

@@ -13,13 +13,13 @@
       <div class="ui-predicate--col">
         <input type="text" :value="predicate.arguments"></input>
       </div>
-      <UIPredicateOptions :predicate="predicate"></UIPredicateOptions>
+      <ui-predicate-options :predicate="predicate"></ui-predicate-options>
     </div>
 </template>
 
 <script>
 module.exports = {
-  name: 'UIPredicateComparison',
+  name: 'ui-predicate-comparison',
   props: {
     predicate: {
       type: Object,

Diff for: packages/ui-predicate-vue/src/UIPredicateCompound.vue renamed to packages/ui-predicate-vue/src/ui-predicate-compound.vue

@@ -7,29 +7,29 @@
             <option v-for="logicalType in columns.logicalTypes" :value="logicalType.logicalType_id">{{logicalType.label}}</option>
           </select>
         </div>
-        <UIPredicateOptions :predicate="compound"></UIPredicateOptions>
+        <ui-predicate-options :predicate="compound"></ui-predicate-options>
       </div>
 
       <div class="ui-predicate predicates ui-predicate--row">
         <div class="ui-predicate predicate" v-for="(model, index) in compound.predicates">
-          <UIPredicateCompound
+          <ui-predicate-compound
             v-if="model.$_type === 'CompoundPredicate'"
             :compound="model"
             :columns="columns"
-          ></UIPredicateCompound>
-          <UIPredicateComparison
+          ></ui-predicate-compound>
+          <ui-predicate-comparison
             v-if="model.$_type === 'ComparisonPredicate'"
             :predicate="model"
             :columns="columns"
-          ></UIPredicateComparison>
+          ></ui-predicate-comparison>
         </div>
       </div>
     </div>
 </template>
 
 <script>
 module.exports = {
-  name: 'UIPredicateCompound',
+  name: 'ui-predicate-compound',
   props: {
     compound: {
       type: Object,

Diff for: packages/ui-predicate-vue/src/UIPredicateOptions.vue renamed to packages/ui-predicate-vue/src/ui-predicate-options.vue

@@ -7,7 +7,7 @@
 
 <script>
 module.exports = {
-  name: 'UIPredicateOptions',
+  name: 'ui-predicate-options',
   props: {
     predicate: {
       type: Object,

Diff for: packages/ui-predicate-vue/src/ui-predicate.test.js

@@ -1,8 +1,26 @@
-import { mount } from '@vue/test-utils';
-import Component from '..';
+import UIPredicateCore, { UIPredicate } from '..';
+import a, { mount, createLocalVue, shallow } from '@vue/test-utils';
+
+import DEFAULT_CONFIG from './__fixtures__';
 
 describe('<ui-predicate/>', () => {
   describe('minimal-configuration', () => {
-    it('works', () => {});
+    // it('requires :config prop', () => {
+    //   expect(() => {
+    //     shallow(UIPredicate, { propsData: { config: DEFAULT_CONFIG } });
+    //   }).toThrow();
+    // });
+
+    it('works', () => {
+      const localVue = createLocalVue();
+      localVue.use(UIPredicateCore);
+      const wrapper = mount(UIPredicate, {
+        propsData: { config: DEFAULT_CONFIG },
+        // stubs: UIPredicateCore.components,
+        localVue,
+      });
+
+      // console.log(wrapper.text());
+    });
   });
 });

Diff for: packages/ui-predicate-vue/src/UIPredicate.vue renamed to packages/ui-predicate-vue/src/ui-predicate.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="">
     <div class="ui-predicate main">
-      <UIPredicateCompound v-bind:compound="root" v-bind:columns="columns"></UIPredicateCompound>
+      <ui-predicate-compound v-bind:compound="root" v-bind:columns="columns"></ui-predicate-compound>
     </div>
   </div>
 </template>
@@ -10,7 +10,7 @@
 import { PredicateCore } from 'ui-predicate-core';
 
 module.exports = {
-  name: 'UIPredicate',
+  name: 'ui-predicate',
   props: {
     config: {
       type: Object,