glib-web 2.2.0 → 2.3.0

package/action.js

@@ -49,6 +49,7 @@ import ActionsCreditCard from "./actions/auth/creditCard";
 import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
+import ActionCommandsCustom from "./actions/commands/custom";
 
 import ActionToursStart from "./actions/tours/start";
 
@@ -102,11 +103,16 @@ const actions = {
   "auth/creditCard": ActionsCreditCard,
 
   "analytics/logEvent": ActionsAnalyticsLogEvent,
+
   "commands/copy": ActionCommandsCopy,
+  "commands/custom": ActionCommandsCustom,
+
   "tours/start": ActionToursStart,
   "components/update": ActionComponentsUpdate
 };
 
+const customActions = {};
+
 export default class Action {
   static execute(spec, component, params = {}) {
     if (!TypeUtils.isObject(spec)) {
@@ -148,17 +154,21 @@ export default class Action {
   }
 
   static executeGlobal(name, spec, component, params) {
+    this._executeInternal(name, spec, component, params, actions);
+  }
+
+  static _executeInternal(name, spec, component, params, registry) {
     const actionName = name.replace(/-v1$/, "");
 
     try {
-      const action = new actions[actionName]();
+      const action = new registry[actionName]();
       const logDisabled = action.logDisabled && action.logDisabled();
       if (!logDisabled) {
         console.log(`Executing "${actionName}"`);
       }
       action.execute(spec, component, params);
     } catch (e) {
-      console.log(
+      console.error(
         "Failed executing command",
         actionName,
         `Error: '${e.message}'`
@@ -178,6 +188,18 @@ export default class Action {
     GLib.action.execute(response.onResponse, component);
     window.vueApp.temp.analytics = null;
   }
+
+  static registerCustom(actionName, action) {
+    if (customActions[actionName]) {
+      console.error("Command already registered", actionName);
+    } else {
+      customActions[actionName] = action;
+    }
+  }
+
+  static executeCustom(name, spec, component, params) {
+    this._executeInternal(name, spec, component, params, customActions);
+  }
 }
 
 window.Action = Action;

package/actions/commands/custom.js

@@ -0,0 +1,10 @@
+import Hash from "../../utils/hash";
+
+export default class {
+  execute(spec, component) {
+    const properties = new Hash(spec.properties);
+    // `spec` might contain params that were coming from other actions (e.g. `formData`).
+    Object.assign(properties, spec);
+    GLib.action.executeCustom(spec.name, properties, component);
+  }
+}

package/actions/components/update.js

@@ -5,11 +5,14 @@ export default class {
     if (!spec.views.length > 1) {
       console.warn("Make sure views only have 1 child!");
     }
-    const target = component.updatables[spec.targetId];
-    if (!target) console.error("no component found :" + spec.targetId);
+    // const target = component.updatables[spec.targetId];
+    // if (!target) console.error("no component found :" + spec.targetId);
 
-    Object.assign(target.spec, spec.views[0]);
-    this.updateComponent(target);
+    const target = GLib.component.findById(spec.targetId);
+    if (target) {
+      Object.assign(target.spec, spec.views[0]);
+      this.updateComponent(target);
+    }
   }
 
   updateComponent(component) {

package/app.vue

@@ -1,7 +1,11 @@
 <template>
   <v-app :class="page.styleClasses">
-    <component :is="containerComponent" :spec="formSpec">
-      <nav-appbar :page="page" />
+    <component
+      :is="containerComponent"
+      :spec="formSpec"
+      :style="'height: 100%;'"
+    >
+      <nav-appbar ref="appBar" :page="page" />
 
       <v-progress-linear
         v-if="$root.vueApp.indicator"
@@ -11,29 +15,24 @@
       >
       </v-progress-linear>
 
-      <div class="pages-header">
-        <layouts-content
-          :template="page.template"
-          :spec="header"
-          :full-height="false"
-        />
-      </div>
-
-      <div id="page_body" class="pages-body body-wrapper">
-        <layouts-content
-          :template="page.template"
-          :spec="body"
-          :full-height="true"
-        />
-      </div>
-
-      <div class="pages-footer">
-        <layouts-content
-          :template="page.template"
-          :spec="footer"
-          :full-height="false"
-        />
-      </div>
+      <v-main :style="`height: ${mainHeight}px;`">
+        <v-container
+          :fluid="page.template == 'fullWidth'"
+          :class="containerClasses"
+        >
+          <div class="pages-header">
+            <panels-responsive :spec="header" />
+          </div>
+
+          <div id="page_body" class="pages-body body-wrapper">
+            <panels-responsive :spec="body" />
+          </div>
+
+          <div class="pages-footer">
+            <panels-responsive :spec="footer" />
+          </div>
+        </v-container>
+      </v-main>
     </component>
   </v-app>
 </template>
@@ -41,7 +40,6 @@
 <script>
 import NavAppBar from "./nav/appbar";
 import Utils from "./utils/helper";
-import ContentLayout from "./nav/content";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
 import FormPanel from "./components/panels/form";
@@ -49,7 +47,6 @@ import FormPanel from "./components/panels/form";
 export default {
   components: {
     "nav-appbar": NavAppBar,
-    "layouts-content": ContentLayout,
     "panels-form": FormPanel
   },
   mixins: [phoenixSocketMixin, actionCableMixin],
@@ -58,7 +55,8 @@ export default {
   },
   data() {
     return {
-      title: "..."
+      title: "...",
+      mainHeight: 0
     };
   },
   computed: {
@@ -77,6 +75,11 @@ export default {
       }
       return "div";
     },
+    containerClasses() {
+      const classes = ["hamburger"];
+      classes.push(this.page.containerStyleClasses || []);
+      return classes;
+    },
     // Use computed to ensure that the spec gets updated when the user navigates to another page.
     formSpec() {
       return this.page.fullPageForm;
@@ -96,6 +99,15 @@ export default {
     Utils.http.promptIfDirtyOnUnload();
   },
   methods: {
+    $mounted() {
+      window.addEventListener(
+        "resize",
+        event => {
+          this.updateMainHeight();
+        },
+        true
+      );
+    },
     $ready() {
       document.title = this.page.title;
 
@@ -125,6 +137,15 @@ export default {
           GLib.action.execute(this.page.onLoad, this);
         });
       }
+
+      // Use nextTick() to allow time for the appBar to complete initialization.
+      this.$nextTick(() => {
+        this.updateMainHeight();
+      });
+    },
+    updateMainHeight() {
+      console.debug("Setting body height");
+      this.mainHeight = window.innerHeight - this.$refs.appBar.$el.offsetHeight;
     }
   }
 };
@@ -178,11 +199,12 @@ body,
 
 <style scoped>
 /*** Header/footer support ***/
-.application--wrap {
+.hamburger {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
+  padding: 0;
 }
 
 .body-wrapper {

package/components/_button.vue

@@ -15,6 +15,7 @@
       :rounded="$classes().includes('rounded')"
       :depressed="$classes().includes('depressed')"
       @click="type == 'submit' ? null : $onClick()"
+      v-on="eventHandlers"
     >
       <span><common-icon :spec="spec.icon || {}"/></span>
       <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
@@ -30,7 +31,8 @@ export default {
     spec: { type: Object, required: true },
     type: { type: String, default: "button" },
     disabled: { type: Boolean, required: true },
-    hideTextOnXs: { type: Boolean }
+    hideTextOnXs: { type: Boolean },
+    eventHandlers: { type: Object, default: null }
   },
   data: function() {
     return {

package/components/_chip.vue

@@ -1,37 +1,29 @@
 <template>
-  <v-tooltip
-    :disabled="!spec.tooltip"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
+  <common-tooltip :spec="spec">
     <template v-slot:activator="{ on }">
-      <span v-on="on">
-        <common-badge :spec="spec">
-          <v-chip
-            v-if="spec.onClick"
-            :style="genericStyles()"
-            :class="$classes()"
-            :href="$href()"
-            @click="$onClick()"
-          >
-            {{ spec.text }}
-          </v-chip>
-          <v-chip v-else :style="genericStyles()" :class="$classes()">
-            {{ spec.text }}
-          </v-chip>
-        </common-badge>
-      </span>
+      <common-badge :spec="spec">
+        <v-chip
+          v-if="spec.onClick"
+          :style="genericStyles()"
+          :class="$classes()"
+          :href="$href()"
+          @click="$onClick()"
+          v-on="on"
+        >
+          {{ spec.text }}
+        </v-chip>
+        <v-chip v-else :style="genericStyles()" :class="$classes()" v-on="on">
+          {{ spec.text }}
+        </v-chip>
+      </common-badge>
     </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  </common-tooltip>
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
+// import TooltipMixins from "./mixins/tooltip";
 export default {
-  mixins: [TooltipMixins],
+  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   },
@@ -50,7 +42,7 @@ export default {
 
 <style lang="scss" scoped>
 // Prevent hover effect if the chip is not clickable.
-span.theme--light.v-chip:hover:before {
+.v-chip:not(.v-chip--clickable).theme--light:hover:before {
   opacity: 0;
 }
 </style>

package/components/_responsive.vue

@@ -5,6 +5,7 @@
     :style="$styles()"
     :href="$href()"
     @click="$onClick()"
+    v-on="eventHandlers"
   >
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
@@ -31,13 +32,8 @@ import Vue from "vue";
 
 export default {
   props: {
-    spec: {
-      type: Object,
-      required: true,
-      default: function() {
-        return {};
-      }
-    }
+    spec: { type: Object, required: true },
+    eventHandlers: { type: Object, default: null }
   },
   data() {
     return {
@@ -46,12 +42,18 @@ export default {
   },
   computed: {
     cssClasses() {
-      // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
-      this.spec.view = this.spec.view || "panels/responsive";
-      return this.$classes();
+      // Provide a default name so the panel will not be nameless when used in predefined layouts (e.g. page.body, list.header, etc.)
+      return this.$classes(
+        Object.assign(
+          {
+            view: "panels/responsive"
+          },
+          this.spec
+        )
+      );
     },
     componentName() {
-      return this.$href() ? "a" : "div";
+      return this.spec.onClick ? "a" : "div";
     }
   },
   methods: {
@@ -91,7 +93,7 @@ export default {
   display: flex;
   flex-direction: column;
 }
-/* Needed to ensure that split's sub panels have the same height */
+// Needed to ensure that split's sub panels have the same height
 .full-height {
   height: 100%;
 }

package/components/_tooltip.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-tooltip
+    :disabled="tooltip.disabled"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
+  >
+    <template v-slot:activator="{ on }">
+      <!-- Pass the slot props through to the caller using the same slot name (i.e. `activator`) -->
+      <slot name="activator" :on="on" />
+    </template>
+    <span> {{ tooltip.text }} </span>
+  </v-tooltip>
+</template>
+
+<script>
+// import tooltipMixin from "./mixins/tooltip";
+
+export default {
+  // mixins: [tooltipMixin],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      tooltip: {},
+      childSpec: Object.assign({}, this.spec, { id: undefined })
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
+      this.childSpec = Object.assign({}, this.spec, { id: undefined });
+    },
+    // $initAccessories() {
+    //   this.tooltip = this.spec.tooltip || { disabled: true };
+    // },
+    tooltipPositionMatches(position) {
+      if (this.spec.tooltip && this.spec.tooltip.position) {
+        return position == this.spec.tooltip.position;
+      } else {
+        return position == "bottom";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/avatar.vue

@@ -1,11 +1,5 @@
 <template>
-  <v-tooltip
-    :disabled="tooltip.disabled"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
+  <common-tooltip :spec="spec">
     <template v-slot:activator="{ on }">
       <common-badge :spec="spec">
         <v-avatar :size="spec.size">
@@ -14,31 +8,18 @@
             :style="$styles()"
             :src="spec.url || spec.base64Data"
             @click="$onClick()"
+            v-on="on"
           />
         </v-avatar>
       </common-badge>
     </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  </common-tooltip>
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
-
 export default {
-  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      styles: {}
-    };
-  },
-  methods: {
-    $ready() {
-      this.$initAccessories();
-    }
   }
 };
 </script>

package/components/button.vue

@@ -1,41 +1,15 @@
 <template>
-  <div>
-    <v-tooltip
-      :disabled="tooltip.disabled"
-      :top="tooltipPositionMatches('top')"
-      :right="tooltipPositionMatches('right')"
-      :bottom="tooltipPositionMatches('bottom')"
-      :left="tooltipPositionMatches('left')"
-    >
-      <template v-slot:activator="{ on }">
-        <div v-on="on">
-          <common-button :spec="childSpec" :disabled="$isBusy" />
-        </div>
-      </template>
-      <span> {{ tooltip.text }} </span>
-    </v-tooltip>
-  </div>
+  <common-tooltip :spec="spec">
+    <template v-slot:activator="{ on }">
+      <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" />
+    </template>
+  </common-tooltip>
 </template>
 
 <script>
-import tooltipMixin from "./mixins/tooltip";
-
 export default {
-  mixins: [tooltipMixin],
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      tooltip: {},
-      childSpec: Object.assign({}, this.spec, { id: undefined })
-    };
-  },
-  methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-      this.childSpec = Object.assign({}, this.spec, { id: undefined });
-    }
   }
 };
 </script>

package/components/charts/column.vue

@@ -10,10 +10,10 @@
 // https://chartkick.com/vue
 
 import annotation from "../mixins/chart/annotation.js";
-import tooltip from "../mixins/chart/tooltip.js";
+// import tooltip from "../mixins/chart/tooltip.js";
 
 export default {
-  mixins: [annotation, tooltip],
+  mixins: [annotation],
   props: {
     spec: { type: Object, required: true }
   },

package/components/charts/line.vue

@@ -9,10 +9,10 @@
 
 <script>
 import annotation from "../mixins/chart/annotation.js";
-import tooltip from "../mixins/chart/tooltip.js";
+// import tooltip from "../mixins/chart/tooltip.js";
 
 export default {
-  mixins: [annotation, tooltip],
+  mixins: [annotation],
   props: {
     spec: { type: Object, required: true }
   },

package/components/chip.vue

@@ -3,28 +3,9 @@
 </template>
 
 <script>
-import TooltipMixins from "./mixins/tooltip";
 export default {
-  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      tooltip: {}
-    };
-  },
-  methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || {};
-    }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-// Prevent hover effect if the chip is not clickable.
-span.theme--light.v-chip:hover:before {
-  opacity: 0;
-}
-</style>

package/components/fields/_select.vue

@@ -60,12 +60,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.options = this.normalizedOptions();
-      this.append = this.spec.append || {};
-      this.rules = this.$validation();
-      if (this.defaultValue) {
-        this.fieldModel = this.defaultValue;
-      }
+      this.updateData();
     },
     normalizedOptions() {
       return this.spec.options.map(i => {
@@ -88,6 +83,17 @@ export default {
           GLib.action.execute(onChange, this);
         });
       });
+    },
+    updateData() {
+      this.options = this.normalizedOptions();
+      this.append = this.spec.append || {};
+      this.rules = this.$validation();
+      if (this.defaultValue) {
+        this.fieldModel = this.defaultValue;
+      }
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };

package/components/fields/dynamicGroup.vue

@@ -1,20 +1,10 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
     <div v-for="(group, groupIndex) in groupSpecs" :key="`group${groupIndex}`">
-      <input
-        v-if="isDeleted(groupIndex)"
-        type="hidden"
-        :name="`${spec.name}[${groupIndex}][_destroy]`"
-        value="1"
-      />
+      <input v-if="isDeleted(groupIndex)" type="hidden" :name="`${spec.name}[${groupIndex}][_destroy]`" value="1" />
       <div :style="{ display: isDeleted(groupIndex) ? 'none' : 'block' }">
-        <v-icon
-          class="float-left mr-2"
-          color="error"
-          @click="removeGroup(groupIndex)"
-          >remove_circle</v-icon
-        >
-        <h4>{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
+        <v-icon class="float-left mr-2" color="error" @click="removeGroup(groupIndex)">remove_circle</v-icon>
+        <h4 v-if="spec.titlePrefix">{{ spec.titlePrefix }} {{ groupIndex + 1 }}</h4>
         <panels-responsive :spec="group" />
       </div>
     </div>

package/components/fields/radio.vue

@@ -1,13 +1,17 @@
 <template>
-  <div :class="$classes()">
-    <v-tooltip
+  <common-tooltip :spec="spec">
+    <template v-slot:activator="{ on }">
+      <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
+
+      <div :class="$classes()">
+        <!-- <v-tooltip
       :disabled="tooltip.disabled"
       :top="tooltipPositionMatches('top')"
       :right="tooltipPositionMatches('right')"
       :bottom="tooltipPositionMatches('bottom')"
       :left="tooltipPositionMatches('left')"
     >
-      <template v-slot:activator="{ on }">
+      <template v-slot:activator="{ on }"> -->
         <v-radio
           :label="spec.label"
           :value="spec.value.presence() || vuetifyEmptyString"
@@ -22,29 +26,31 @@
             <glib-component :spec="item" />
           </div>
         </div>
-      </template>
+        <!-- </template>
       <span>{{ tooltip.text }}</span>
-    </v-tooltip>
-  </div>
+    </v-tooltip> -->
+      </div>
+    </template>
+  </common-tooltip>
 </template>
 
 <script>
-import TooltipMixins from "../mixins/tooltip";
+// import TooltipMixins from "../mixins/tooltip";
 
 export default {
-  mixins: [TooltipMixins],
+  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      tooltip: {}
-    };
-  },
-  methods: {
-    $ready() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-    }
   }
+  // data() {
+  //   return {
+  //     tooltip: {}
+  //   };
+  // },
+  // methods: {
+  //   $ready() {
+  //     this.tooltip = this.spec.tooltip || { disabled: true };
+  //   }
+  // }
 };
 </script>

package/components/fields/radioGroup.vue

@@ -1,10 +1,15 @@
 <template>
+  <!-- In the current Vuetify, there seems to be a bug with validate-on-blur where once a radioGroup has a validation error,
+       the error can only be removed by submitting the form. But this is better than the alternative, which is radioGroup showing
+       validation error on page load.
+    -->
   <v-radio-group
     v-model="fieldModel"
     :name="fieldName"
     :disabled="spec.readOnly"
     :rules="$validation()"
     :row="spec.row"
+    validate-on-blur
     @change="onChange"
   >
     <div v-for="(childView, index) in spec.childViews" :key="index">

package/components/fields/richText.vue

@@ -56,7 +56,7 @@ export default {
   data: () => ({
     customToolbar: [
       ["bold", "italic", "strike"],
-      [{ header: 1 }, { header: 2 }],
+      [{ header: 1 }, { header: 2 }, { header: 3 }],
       [{ list: "ordered" }, { list: "bullet" }],
       ["image", "link"]
     ],

package/components/fields/select.vue

@@ -1,5 +1,5 @@
 <template>
-  <fields-genericSelect :spec="spec" />
+  <fields-genericSelect ref="delegate" :spec="updatedSpec" />
 </template>
 
 <script>
@@ -12,6 +12,20 @@ export default {
   },
   props: {
     spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      updatedSpec: this.spec
+    };
+  },
+  methods: {
+    $ready() {
+      this.updatedSpec = this.spec;
+    },
+    action_merge(mergedSpec) {
+      Object.assign(this.updatedSpec, mergedSpec);
+      this.$refs.delegate.updateData();
+    }
   }
 };
 </script>

package/components/image.vue

@@ -1,34 +1,27 @@
 <template>
-  <v-tooltip
-    :disabled="tooltip.disabled"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
+  <common-tooltip :spec="spec">
     <template v-slot:activator="{ on }">
       <common-badge :spec="spec">
         <!-- TODO: Add support for href and :rel="$rel()" -->
         <v-img
           :src="spec.url || spec.base64Data"
           :style="styles"
-          v-on="on"
           @click="$onClick()"
+          v-on="on"
         >
           <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
         </v-img>
       </common-badge>
     </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  </common-tooltip>
 </template>
 
 <script>
 import Vue from "vue";
-import TooltipMixins from "./mixins/tooltip";
+// import TooltipMixins from "./mixins/tooltip";
 
 export default {
-  mixins: [TooltipMixins],
+  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   },
@@ -39,7 +32,7 @@ export default {
   },
   methods: {
     $ready() {
-      this.$initAccessories();
+      // this.$initAccessories();
 
       const styles = this.genericStyles(Object.assign({}, this.spec));
       this.styles = styles;

package/components/mixins/generic.js

@@ -23,7 +23,6 @@ export default {
         Utils.type.ifObject(val.format, spec => {
           augmentedRules = augmentedRules.concat([
             v => {
-              console.log("VALIDATE1");
               if (v && !v.match(spec.regex)) {
                 return spec.message;
               }

package/components/mixins/styles.js

@@ -202,10 +202,7 @@ export default {
         // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
         // may be used without a form.
         this.fieldName = this.spec.name;
-        // Don't initialize fieldModel unnecessarily because this will trigger validations on page load
-        if (this.spec.value) {
-          this.fieldModel = this._sanitizeValue(this.spec.value);
-        }
+        this.fieldModel = this._sanitizeValue(this.spec.value);
       }
     },
     $classes(spec) {

package/components/panels/column.vue

@@ -5,13 +5,21 @@
     :md="md.cols"
     :sm="sm.cols"
     :style="cssStyles()"
+    :class="$classes()"
     :cols="xs.cols || 12"
+    :order-xl="xl.order"
+    :order-lg="lg.order"
+    :order-md="md.order"
+    :order-sm="sm.order"
+    :order="xs.order"
   >
-    <panels-responsive :spec="spec" />
+    <panels-responsive :spec="innerSpec()" />
   </v-col>
 </template>
 
 <script>
+import Hash from "../../utils/hash";
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -33,8 +41,12 @@ export default {
       this.sm = this.spec.sm || this.sm;
       this.xs = this.spec.xs || this.xs;
     },
+    innerSpec() {
+      // Remove properties that are handled by the container (i.e. v-col).
+      return new Hash(this.spec).without("padding").without("styleClasses");
+    },
     cssStyles() {
-      const styles = this.$styles();
+      const styles = Object.assign({}, this.$styles());
       switch (this.$vuetify.breakpoint.name) {
         case "xl":
           this.applyStyles(styles, this.xs);

package/components/panels/responsive.vue

@@ -1,8 +1,8 @@
 <template>
   <div style="display: contents;">
-    <common-responsive v-if="!hoverViewsSpec" :spec="spec" />
+    <!-- <common-responsive v-if="!hoverViewsSpec" :spec="spec" /> -->
     <v-menu
-      v-else
+      v-if="hoverViewsSpec"
       :close-on-content-click="false"
       open-on-hover
       offset-x
@@ -18,6 +18,12 @@
         <common-responsive :spec="hoverViewsSpec" />
       </v-card>
     </v-menu>
+    <common-tooltip v-else :spec="spec">
+      <template v-slot:activator="{ on }">
+        <common-responsive :spec="spec" :event-handlers="on" />
+        <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
+      </template>
+    </common-tooltip>
   </div>
 </template>
 

package/components/panels/ul.vue

@@ -31,4 +31,7 @@ ul.breadcrumbs {
     content: "/\00a0";
   }
 }
+li > * {
+  vertical-align: text-top;
+}
 </style>

package/index.js

@@ -50,6 +50,7 @@ import ResponsivePanel from "./components/panels/responsive";
 import Component from "./components/component";
 import CommonIcon from "./components/_icon";
 import CommonBadge from "./components/_badge";
+import CommonTooltip from "./components/_tooltip";
 import CommonButton from "./components/_button";
 import CommonChip from "./components/_chip";
 import CommonMessage from "./components/_message";
@@ -61,6 +62,7 @@ Vue.component("panels-responsive", ResponsivePanel);
 Vue.component("common-button", CommonButton);
 Vue.component("common-icon", CommonIcon);
 Vue.component("common-badge", CommonBadge);
+Vue.component("common-tooltip", CommonTooltip);
 Vue.component("common-chip", CommonChip);
 Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
@@ -174,6 +176,7 @@ document.addEventListener("DOMContentLoaded", () => {
     stateUpdatedAt: null,
     webSocket: { channels: {}, header: {} },
     actionCable: { channels: {} },
+    registeredComponents: [],
     temp: {}
   };
   new Vue({

package/nav/appbar.vue

@@ -1,22 +1,11 @@
 <template>
   <div>
-    <nav-drawer
-      v-if="page.leftDrawer"
-      :trigger="drawerTrigger"
-      :permanent="isPermanent"
-      :spec="page.leftDrawer"
-    />
+    <nav-drawer v-if="page.leftDrawer" :trigger="drawerTrigger" :permanent="isPermanent" :spec="page.leftDrawer" />
 
-    <v-toolbar :style="style" :height="navBar.height" :class="cssClasses()">
-      <v-app-bar-nav-icon
-        v-if="page.leftDrawer && !isPermanent"
-        style="color: inherit;"
-        @click="drawerTrigger = new Date()"
-      ></v-app-bar-nav-icon>
-      <v-progress-circular
-        v-if="$root.vueApp.indicator"
-        indeterminate
-      ></v-progress-circular>
+    <v-toolbar v-if="navBar.height" :style="style" :height="navBar.height" :class="cssClasses()">
+      <v-app-bar-nav-icon v-if="page.leftDrawer && !isPermanent" style="color: inherit;"
+        @click="drawerTrigger = new Date()"></v-app-bar-nav-icon>
+      <v-progress-circular v-if="$root.vueApp.indicator" indeterminate></v-progress-circular>
       <div v-else>
         <panels-responsive v-if="navBar.logo" :spec="navBar.logo" />
         <v-toolbar-title v-else-if="navBar.showTitle">{{
@@ -28,35 +17,16 @@
       <!-- See https://codesandbox.io/embed/14ry9r3lll -->
       <v-toolbar-items class="hidden-sm-and-down">
         <template v-for="(btn, index) in navBar.rightButtons">
-          <common-dropdownMenu
-            v-if="btn.childButtons"
-            :key="index"
-            :spec="btn"
-            :disabled="$isBusy"
-          />
-          <common-button
-            v-else
-            :key="`right_${index}`"
-            :spec="buttonSpec(btn)"
-            :disabled="$isBusy"
-          />
+          <common-dropdownMenu v-if="btn.childButtons" :key="index" :spec="btn" :disabled="$isBusy" />
+          <common-button v-else :key="`right_${index}`" :spec="buttonSpec(btn)" :disabled="$isBusy" />
         </template>
       </v-toolbar-items>
 
-      <common-dropdownMenu
-        v-if="showMobileMenu"
-        class="hidden-md-and-up"
-        :spec="mobileMenu"
-      />
+      <common-dropdownMenu v-if="showMobileMenu" class="hidden-md-and-up" :spec="mobileMenu" />
 
       <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
 
-      <v-btn
-        v-if="viewSourceEnabled()"
-        icon
-        style="color: inherit;"
-        @click="viewSource"
-      >
+      <v-btn v-if="viewSourceEnabled()" icon style="color: inherit;" @click="viewSource">
         <v-icon>zoom_in</v-icon>
       </v-btn>
     </v-toolbar>
@@ -75,7 +45,7 @@ export default {
   props: {
     page: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       drawerTrigger: null,
       navBar: {},
@@ -84,11 +54,11 @@ export default {
     };
   },
   computed: {
-    style: function() {
+    style: function () {
       return Object.assign(this.genericStyles(this.navBar), this.leftPadding);
     },
     // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
-    leftPadding: function() {
+    leftPadding: function () {
       switch (this.$vuetify.breakpoint.name) {
         case "lg":
         case "xl":
@@ -124,11 +94,11 @@ export default {
         styleClasses: styleClasses
       });
     },
-    viewSourceEnabled: function() {
+    viewSourceEnabled: function () {
       // return process.env.NODE_ENV === "development";
       return false;
     },
-    viewSource: function() {
+    viewSource: function () {
       const properties = { message: this.page };
       Utils.launch.dialog.open(Object.assign({}, properties));
     },
@@ -157,11 +127,13 @@ export default {
     &.icon {
       color: inherit;
     }
+
     &.text {
       color: inherit;
     }
   }
 }
+
 .pages-navBar {
   box-shadow: none !important;
 }

package/nav/drawer.vue

@@ -51,6 +51,7 @@
 // import UrlUtils from "../utils/url";
 import NavDrawerButton from "./drawerButton";
 import NavDrawerLabel from "./drawerLabel";
+import bus from "../utils/eventBus";
 
 export default {
   components: {
@@ -102,12 +103,10 @@ export default {
   methods: {
     $ready() {
       this.shrunk = this.mini = this.cssClasses.includes("mini");
-
-      // this.$el.addEventListener('drawers/clickButton', () => { this.updateState(false) }, false)
-      this.$el.addEventListener("drawers/clickButton", () => {
-        if (!this.permanent) {
-          this.updateState(false);
-        }
+    },
+    $mounted() {
+      bus.$on("drawers/toggle", () => {
+        this.updateState(!this.state);
       });
     },
     updateState(state) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -45,4 +45,4 @@
     "eslint-plugin-vuetify": "^1.0.0-beta.3",
     "prettier": "^1.18.2"
   }
-}
+}

package/plugins/updatableComponent.js

@@ -1,13 +1,22 @@
 export default {
   install: (Vue, options) => {
-    Vue.prototype.updatables = {};
+    // Vue.prototype.updatables = {};
+
     Vue.mixin({
       created: function() {
         let spec = this.spec;
-        if (spec && spec.id) {
-          Object.assign(this.updatables, {
-            [spec.id]: this
-          });
+        if (spec && spec.id && this.$registryEnabled()) {
+          GLib.component.register(spec.id, this);
+          // Object.assign(this.updatables, {
+          //   [spec.id]: this
+          // });
+          // console.log("U", this.updatables);
+        }
+      },
+      methods: {
+        $registryEnabled() {
+          // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).
+          return true;
         }
       }
     });

package/utils/app.js

@@ -1,3 +1,4 @@
+// TODO: Move to component.js
 export default class {
   static componentName(jsonName) {
     const name = `${jsonName.replace("/", "-").replace(/-v1$/, "")}`;

package/utils/component.js

@@ -0,0 +1,12 @@
+export default class {
+  static findById(id) {
+    const component = window.vueApp.registeredComponents[id];
+    if (component) {
+      return component;
+    }
+    console.error("Component not found: " + id);
+  }
+  static register(id, component) {
+    window.vueApp.registeredComponents[id] = component;
+  }
+}

package/utils/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default new Vue();

package/utils/public.js

@@ -3,6 +3,7 @@ import Url from "./url";
 import Http from "./http";
 import Type from "./type";
 import Form from "./form";
+import Component from "./component";
 
 export default class {
   static get action() {
@@ -20,4 +21,7 @@ export default class {
   static get form() {
     return Form;
   }
+  static get component() {
+    return Component;
+  }
 }

package/components/mixins/tooltip.js

@@ -1,20 +0,0 @@
-// TODO: Make tooltip reusable component. See _badge.vue
-export default {
-  data() {
-    return {
-      tooltip: {}
-    };
-  },
-  methods: {
-    $initAccessories() {
-      this.tooltip = this.spec.tooltip || { disabled: true };
-    },
-    tooltipPositionMatches(position) {
-      if (this.spec.tooltip && this.spec.tooltip.position) {
-        return position == this.spec.tooltip.position;
-      } else {
-        return position == "bottom";
-      }
-    }
-  }
-};

package/nav/content.vue

@@ -1,40 +0,0 @@
-<template>
-  <v-main :style="outerStyle()">
-    <panels-responsive v-if="template == 'fullWidth'" :spec="spec" />
-    <v-col v-else cols="12" md="8" offset-md="2" :style="innerStyle()">
-      <template v-if="spec">
-        <panels-responsive v-if="template == 'flatCentered'" :spec="spec" />
-        <v-card v-else :height="$length(spec.height)">
-          <panels-responsive :spec="spec" />
-        </v-card>
-      </template>
-    </v-col>
-  </v-main>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true },
-    template: { type: String, default: null },
-    fullHeight: { type: Boolean, required: true }
-  },
-  methods: {
-    outerStyle() {
-      if (this.fullHeight) {
-        return { height: "100%" };
-      }
-      return {};
-    },
-    innerStyle() {
-      const style = { padding: "0" };
-      if (this.fullHeight) {
-        return Object.assign(style, { height: "100%" });
-      }
-      return style;
-    }
-  }
-};
-</script>
-
-<style scoped></style>