glib-web 0.10.4 → 0.10.5

package/components/_responsive.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    :class="cssClasses"
+    :style="$styles()"
+    :href="$href()"
+    @click="$onClick()"
+  >
+    <v-row no-gutters class="full-height">
+      <template v-for="(item, index) in spec.childViews">
+        <ui-component
+          v-if="isColumn(item)"
+          :key="viewKey(item, index)"
+          :spec="item"
+        />
+        <div
+          v-else
+          :key="viewKey(item, index)"
+          class="full-width"
+          :style="innerStyles"
+        >
+          <ui-component :spec="item" />
+        </div>
+      </template>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  props: {
+    spec: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      innerStyles: {}
+    };
+  },
+  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();
+    }
+  },
+  methods: {
+    $ready() {
+      let align = null;
+      switch (this.spec.align) {
+        case "center":
+          align = "center";
+          break;
+        case "right":
+          align = "flex-end";
+          break;
+        default:
+          align = "flex-start";
+      }
+      Vue.set(this.innerStyles, "align-items", align);
+    },
+    isColumn(item) {
+      return item.view == "panels/column-v1";
+    },
+    viewKey(item, index) {
+      // Use view name for key to avoid component reuse issue
+      return `view${index}_${item.view}`;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.row {
+  margin-left: 0;
+  margin-right: 0;
+}
+.full-width {
+  width: 100%;
+  flex: 0 0 100%;
+  display: flex;
+  flex-direction: column;
+}
+/* Needed to ensure that split's sub panels have the same height */
+.full-height {
+  height: 100%;
+}
+</style>

package/components/panels/column.vue

@@ -81,26 +81,6 @@ export default {
           this.applyStyles(styles, this.spec.xsAndDown || {});
           this.applyStyles(styles, this.spec.xsOnly || {});
           break;
-
-        // const padding = this.lg.padding;
-        // Utils.type.ifObject(this.lg.padding, padding => {
-        //   Utils.type.ifNumber(
-        //     padding.top,
-        //     top => (styles["padding-top"] = `${top}px`)
-        //   );
-        //   Utils.type.ifNumber(
-        //     padding.bottom,
-        //     bottom => (styles["padding-bottom"] = `${bottom}px`)
-        //   );
-        //   Utils.type.ifNumber(
-        //     padding.left,
-        //     left => (styles["padding-left"] = `${left}px`)
-        //   );
-        //   Utils.type.ifNumber(
-        //     padding.right,
-        //     right => (styles["padding-right"] = `${right}px`)
-        //   );
-        // });
       }
       return styles;
     },

package/components/panels/responsive.vue

@@ -1,33 +1,27 @@
 <template>
-  <div
-    :class="cssClasses"
-    :style="$styles()"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <v-row no-gutters class="full-height">
-      <template v-for="(item, index) in spec.childViews">
-        <ui-component
-          v-if="isColumn(item)"
-          :key="viewKey(item, index)"
-          :spec="item"
-        />
-        <div
-          v-else
-          :key="viewKey(item, index)"
-          class="full-width"
-          :style="innerStyles"
-        >
-          <ui-component :spec="item" />
+  <div style="display: contents;">
+    <common-responsive v-if="!hoverViewsSpec" :spec="spec" />
+    <v-menu
+      v-else
+      :close-on-content-click="false"
+      open-on-hover
+      offset-x
+      transition="scale-transition"
+      content-class="hover"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <div v-bind="attrs" v-on="on">
+          <common-responsive :spec="spec" />
         </div>
       </template>
-    </v-row>
+      <v-card>
+        <common-responsive :spec="hoverViewsSpec" />
+      </v-card>
+    </v-menu>
   </div>
 </template>
 
 <script>
-import Vue from "vue";
-
 export default {
   props: {
     spec: {
@@ -40,55 +34,19 @@ export default {
   },
   data() {
     return {
-      innerStyles: {}
+      hoverViewsSpec: this.spec.hoverViews
+        ? {
+            childViews: this.spec.hoverViews,
+            align: this.spec.align
+          }
+        : false
     };
-  },
-  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();
-    }
-  },
-  methods: {
-    $ready() {
-      let align = null;
-      switch (this.spec.align) {
-        case "center":
-          align = "center";
-          break;
-        case "right":
-          align = "flex-end";
-          break;
-        default:
-          align = "flex-start";
-      }
-      Vue.set(this.innerStyles, "align-items", align);
-    },
-    isColumn(item) {
-      return item.view == "panels/column-v1";
-    },
-    viewKey(item, index) {
-      // Use view name for key to avoid component reuse issue
-      return `view${index}_${item.view}`;
-    }
   }
 };
 </script>
 
 <style scoped>
-.row {
-  margin-left: 0;
-  margin-right: 0;
-}
-.full-width {
-  width: 100%;
-  flex: 0 0 100%;
-  display: flex;
-  flex-direction: column;
-}
-/* Needed to ensure that split's sub panels have the same height */
-.full-height {
-  height: 100%;
+.hover {
+  width: 8rem;
 }
 </style>

package/index.js

@@ -53,6 +53,7 @@ import CommonBadge from "./components/_badge";
 import CommonButton from "./components/_button";
 import CommonMessage from "./components/_message";
 import CommonDropdownMenu from "./components/_dropdownMenu";
+import CommonResponsive from "./components/_responsive";
 import CommonTemplateMenu from "./templates/_menu";
 Vue.component("panels-vertical", VerticalPanel);
 Vue.component("panels-responsive", ResponsivePanel);
@@ -61,6 +62,7 @@ Vue.component("common-icon", CommonIcon);
 Vue.component("common-badge", CommonBadge);
 Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
+Vue.component("common-responsive", CommonResponsive);
 Vue.component("templates-menu", CommonTemplateMenu);
 
 // TODO: Deprecate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "",
   "main": "index.js",
   "scripts": {