glib-web 0.11.0 → 0.11.9

package/action.js

@@ -13,6 +13,7 @@ import ActionsDialogsAlert from "./actions/dialogs/alert";
 import ActionsDialogsShow from "./actions/dialogs/show";
 import ActionsDialogsOpen from "./actions/dialogs/open";
 import ActionsDialogsClose from "./actions/dialogs/close";
+import ActionsDialogsReload from "./actions/dialogs/reload";
 import ActionsDialogsOptions from "./actions/dialogs/options";
 import ActionsDialogsNotification from "./actions/dialogs/notification";
 import ActionsDialogsOauth from "./actions/dialogs/oauth";
@@ -62,6 +63,7 @@ const actions = {
   "dialogs/show": ActionsDialogsShow,
   "dialogs/open": ActionsDialogsOpen,
   "dialogs/close": ActionsDialogsClose,
+  "dialogs/reload": ActionsDialogsReload,
   "dialogs/options": ActionsDialogsOptions,
   "dialogs/notification": ActionsDialogsNotification,
   "dialogs/oauth": ActionsDialogsOauth,

package/actions/cables/push.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties) {
+  execute(properties, component) {
     Utils.type.ifString(properties.channel, channelName => {
       const ws = window.vueApp.actionCable;
       const channel = ws.channels[channelName];
@@ -17,7 +17,8 @@ export default class {
         } else {
           console.error(`Channel not joined: '${channelName}'`);
           Utils.launch.snackbar.error(
-            "Something went wrong and we have been notified"
+            "Something went wrong and we have been notified",
+            component
           );
         }
       });

package/actions/dialogs/alert.js

@@ -1,4 +1,4 @@
-import Launch from "../../utils/launch";
+// import Launch from "../../utils/launch";
 
 export default class {
   execute(properties, component) {

package/actions/dialogs/reload.js

@@ -0,0 +1,5 @@
+export default class {
+  execute(spec, component) {
+    Utils.launch.dialog.reload(spec, component);
+  }
+}

package/actions/dialogs/show.js

@@ -1,6 +1,5 @@
 export default class {
   execute(spec, component) {
-    console.log("P1", spec);
     Utils.launch.dialog.open(spec, component);
   }
 }

package/actions/sheets/select.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties) {
-    Utils.launch.sheet.open(properties);
+  execute(properties, component) {
+    Utils.launch.sheet.open(properties, component);
   }
 }

package/actions/snackbars/alert.js

@@ -1,7 +1,5 @@
-import Launch from "../../utils/launch";
-
 export default class {
-  execute(properties) {
+  execute(properties, component) {
     const spec = Object.assign({}, properties, {
       buttons: [
         {
@@ -10,6 +8,6 @@ export default class {
         }
       ]
     });
-    Utils.launch.snackbar.open(spec);
+    Utils.launch.snackbar.open(spec, component);
   }
 }

package/actions/snackbars/select.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties) {
-    Utils.launch.snackbar.open(properties);
+  execute(properties, component) {
+    Utils.launch.snackbar.open(properties, component);
   }
 }

package/actions/ws/push.js

@@ -26,7 +26,8 @@ export default class {
         } else {
           console.error(`Topic not joined: '${topicName}'`);
           Utils.launch.snackbar.error(
-            "Something went wrong and we have been notified"
+            "Something went wrong and we have been notified",
+            component
           );
         }
       });

package/components/_responsive.vue

@@ -81,7 +81,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .row {
   margin-left: 0;
   margin-right: 0;
@@ -96,8 +96,25 @@ export default {
 .full-height {
   height: 100%;
 }
-.v-application a {
+a.panels-responsive {
   color: inherit;
   text-decoration: inherit;
+
+  // So that we can display a semi-transparent layer on hover (see below)
+  position: relative;
+
+  &:hover:after {
+    content: "\A";
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:after {
+    background: rgba(0, 0, 0, 0.4);
+  }
 }
 </style>

package/components/fields/_select.vue

@@ -17,6 +17,7 @@
       :class="$classes()"
       :outlined="$classes().includes('outlined')"
       :append-icon="append.icon"
+      @change="onChange"
     />
 
     <input
@@ -80,6 +81,13 @@ export default {
     },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
+    },
+    onChange() {
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          GLib.action.execute(onChange, this);
+        });
+      });
     }
   }
 };

package/components/fields/check.vue

@@ -68,11 +68,17 @@ export default {
         );
       }, 100);
 
-      if (this.spec.submitOnChange) {
-        setTimeout(() => {
-          this.$dispatchEvent("forms/submit");
-        }, 200);
-      }
+      // if (this.spec.submitOnChange) {
+      //   setTimeout(() => {
+      //     this.$dispatchEvent("forms/submit");
+      //   }, 200);
+      // }
+
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          GLib.action.execute(onChange, this);
+        });
+      });
     },
     $internalizeValue(val) {
       if (val == this.spec.checkValue) {

package/components/fields/dynamicGroup.vue

@@ -93,10 +93,14 @@ export default {
       this.groupValues.push([{}]);
     },
     removeGroup(index) {
-      Utils.launch.sheet.confirm({}, () => {
-        // Don't delete the group in order to maintain consistent indexes between model and view.
-        this.$set(this.groupValues[index], "_destroy", 1);
-      });
+      Utils.launch.sheet.confirm(
+        {},
+        () => {
+          // Don't delete the group in order to maintain consistent indexes between model and view.
+          this.$set(this.groupValues[index], "_destroy", 1);
+        },
+        this
+      );
     },
     isDeleted(index) {
       return this.groupValues[index]._destroy;

package/components/fields/file.vue

@@ -133,7 +133,7 @@ export default {
         input.disabled = true;
         upload.start((error, blob) => {
           if (error) {
-            Utils.launch.snackbar.error(error);
+            Utils.launch.snackbar.error(error, this);
           } else {
             this.uploaded = true;
             this.progress.value = -1;

package/components/fields/radioGroup.vue

@@ -5,6 +5,7 @@
     :disabled="spec.readOnly"
     :rules="$validation()"
     :row="spec.row"
+    @change="onChange"
   >
     <div v-for="(item, index) in spec.childViews" :key="index">
       <ui-component :spec="item" />
@@ -23,6 +24,15 @@
 export default {
   props: {
     spec: { type: Object, required: true }
+  },
+  methods: {
+    onChange() {
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          GLib.action.execute(onChange, this);
+        });
+      });
+    }
   }
 };
 </script>

package/components/mixins/generic.js

@@ -23,12 +23,12 @@ export default {
       });
       return augmentedRules;
     },
-    // This can be overridden by the component to ensure that dialogs are shown within the component,
-    // which is necessary for operations requiring certain hierarchy, e.g. submitting a form from a
-    // child dialog.
-    $dialogContainer() {
-      return document.body;
-    },
+    // // This can be overridden by the component to ensure that dialogs are shown within the component,
+    // // which is necessary for operations requiring certain hierarchy, e.g. submitting a form from a
+    // // child dialog.
+    // $dialogContainer() {
+    //   return document.body;
+    // },
     $wsSubscribeEvents(spec) {
       if (!Utils.type.isObject(spec)) {
         return;

package/components/mixins/ws/phoenixSocket.js

@@ -95,7 +95,10 @@ export default {
         })
         .receive("error", resp => {
           console.log(`Unable to join channel '${topicName}'`, resp);
-          Utils.launch.snackbar.error("Unable to connect. Please try again.");
+          Utils.launch.snackbar.error(
+            "Unable to connect. Please try again.",
+            this
+          );
         });
     },
     _wsDisconnectSocket() {

package/components/panels/column.vue

@@ -5,7 +5,7 @@
     :md="md.cols"
     :sm="sm.cols"
     :style="cssStyles()"
-    cols="12"
+    :cols="xs.cols || 12"
   >
     <panels-responsive :spec="spec" />
   </v-col>

package/components/panels/form.vue

@@ -96,10 +96,7 @@ export default {
       this.submit();
     },
     submit() {
-      if (this.$refs.form.validate()) {
-        // Remove focus from current input field to avoid double submit if the user presses ENTER again.
-        document.activeElement.blur();
-
+      this.validate(() => {
         Utils.type.ifObject(
           this.spec.onSubmit,
           onSubmit => {
@@ -114,19 +111,29 @@ export default {
             this.directSubmit();
           }
         );
-      } else {
-        Utils.launch.dialog.alert("Make sure all fields are valid");
-      }
+      });
     },
     directSubmit() {
-      GLib.form.submitData(this.formElement, this);
+      this.validate(() => {
+        GLib.form.submitData(this.formElement, this);
+      });
+    },
+    validate(onPassed) {
+      if (this.$refs.form.validate()) {
+        // Remove focus from current input field to avoid double submit if the user presses ENTER again.
+        document.activeElement.blur();
+
+        onPassed();
+      } else {
+        Utils.launch.dialog.alert("Make sure all fields are valid", this);
+      }
     },
     action_clear() {
       this.formElement.reset();
-    },
-    $dialogContainer() {
-      return this.formElement;
     }
+    // $dialogContainer() {
+    //   return this.formElement;
+    // }
   }
 };
 </script>

package/components/panels/horizontal.vue

@@ -65,7 +65,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .layouts-horizontal {
   display: flex;
   /* overflow: hidden; */
@@ -75,6 +75,28 @@ export default {
 .layouts-horizontal--space-equally {
   justify-content: space-around;
 }
+
+a.panels-horizontal {
+  color: inherit;
+  text-decoration: inherit;
+
+  // So that we can display a semi-transparent layer on hover (see below)
+  position: relative;
+
+  &:hover:after {
+    content: "\A";
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:after {
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
 </style>
 
 <style>

package/components/panels/timeline.vue

@@ -19,12 +19,10 @@
             <div v-if="item.left_label" class="number-circle">
               {{ item.left_label }}
             </div>
-            <v-icon v-else size="24" :color="dotColor(item)">{{
-              (item.active || item.completed
-                ? item.activeIcon
-                : item.regularIcon) ||
-                (item.active || item.completed ? activeIcon : regularIcon)
-            }}</v-icon>
+            <!-- TODO: Use common-icon -->
+            <v-icon v-else size="24" :color="dotColor(item)">
+              {{ dotIcon(item) }}
+            </v-icon>
           </div>
         </template>
 
@@ -52,9 +50,9 @@ export default {
   data() {
     return {
       items: this.spec.items,
-      activeIcon: this.spec.activeIcon || "check_circle",
-      regularIcon: this.spec.regularIcon || "radio_button_unchecked",
-      color: this.spec.color || "blue",
+      uncompletedIcon: this.spec.uncompletedIcon || "check_circle",
+      completedIcon: this.spec.completedIcon || "radio_button_unchecked",
+      completedColor: this.spec.completedColor || "blue",
       uncompletedColor: this.spec.uncompletedColor || "grey"
     };
   },
@@ -71,7 +69,12 @@ export default {
     dotColor(item) {
       return !item.completed && !item.active
         ? this.uncompletedColor
-        : item.color || this.color;
+        : this.completedColor;
+    },
+    dotIcon(item) {
+      return item.active || item.completed
+        ? item.uncompletedIcon || this.uncompletedIcon
+        : item.completedIcon || this.completedIcon
     }
   }
 };

package/components/panels/vertical.vue

@@ -56,7 +56,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .layouts-vertical {
   display: flex;
   /* overflow: hidden; */
@@ -67,6 +67,28 @@ export default {
 .layouts-vertical--space-equally {
   justify-content: space-around;
 }
+
+a.panels-vertical {
+  color: inherit;
+  text-decoration: inherit;
+
+  // So that we can display a semi-transparent layer on hover (see below)
+  position: relative;
+
+  &:hover:after {
+    content: "\A";
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:after {
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
 </style>
 
 <style>

package/nav/appbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="cssClasses()">
     <nav-drawer
       v-if="page.leftDrawer"
       :trigger="drawerTrigger"
@@ -7,7 +7,7 @@
       :spec="page.leftDrawer"
     />
 
-    <v-toolbar :style="style" class="pages-navBar">
+    <v-toolbar :style="style" :height="navBar.height">
       <v-app-bar-nav-icon
         v-if="page.leftDrawer && !isPermanent"
         style="color: inherit;"
@@ -25,20 +25,29 @@
       </div>
       <v-spacer></v-spacer>
 
-      <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"
-        />
-      </template>
+      <!-- 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"
+          />
+        </template>
+      </v-toolbar-items>
+
+      <common-dropdownMenu
+        v-if="showMobileMenu"
+        class="hidden-md-and-up"
+        :spec="mobileMenu"
+      />
 
       <views-avatar v-if="navBar.imageUrl" :spec="avatarSpec(navBar)" />
 
@@ -56,7 +65,6 @@
 
 <script>
 import NavDrawer from "./drawer";
-import Launch from "../utils/launch";
 import ViewsAvatar from "../components/avatar";
 
 export default {
@@ -71,7 +79,8 @@ export default {
     return {
       drawerTrigger: null,
       navBar: {},
-      on: false
+      rightButtons: []
+      // on: false
     };
   },
   computed: {
@@ -90,16 +99,29 @@ export default {
     },
     isPermanent() {
       return this.leftPadding !== null;
+    },
+    showMobileMenu() {
+      return this.rightButtons.length > 0 && this.$vuetify.breakpoint.smAndDown;
+    },
+    mobileMenu() {
+      return {
+        icon: { material: { name: "mdi-dots-vertical" } },
+        childButtons: this.rightButtons
+      };
     }
   },
   methods: {
     $ready() {
       this.navBar = this.page.navBar || {};
+      this.rightButtons = this.navBar.rightButtons || [];
     },
     buttonSpec(item) {
+      const styleClasses = (item.styleClasses || []).concat(
+        item.text ? ["text"] : ["icon"]
+      );
       return Object.assign({}, item, {
         view: "button-v1",
-        styleClasses: item.text ? ["text"] : ["icon"]
+        styleClasses: styleClasses
       });
     },
     viewSourceEnabled: function() {
@@ -116,18 +138,25 @@ export default {
         url: spec["imageUrl"],
         onClick: spec["onCLick"]
       };
+    },
+    cssClasses() {
+      this.navBar.view = this.navBar.view || "pages/navBar";
+      // console.log("A", this.navBar.view, this.navBar);
+      return this.$classes(this.navBar);
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.v-btn.views-button {
-  &.icon {
-    color: inherit;
-  }
-  &.text {
-    color: inherit;
+.v-btn {
+  &.views-button {
+    &.icon {
+      color: inherit;
+    }
+    &.text {
+      color: inherit;
+    }
   }
 }
 .pages-navBar {

package/nav/dialog.vue

@@ -89,6 +89,7 @@ export default {
         this.title = this.spec.title;
         this.message = this.spec.message;
         this.body = this.spec.body;
+        this.showClose = this.spec.showClose || false;
         Action.execute(spec.onLoad, this);
       }
 

package/package.json

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

package/utils/http.js

@@ -170,7 +170,7 @@ export default class {
         vm.stopIndicator(component);
         if (!request.canceled) {
           console.error("Error:", error);
-          Utils.launch.snackbar.error(error);
+          Utils.launch.snackbar.error(error, component);
         } else {
           console.info("Canceled");
         }

package/utils/launch.js

@@ -41,11 +41,28 @@ class LaunchDialog {
     // instance.stack = this.stack;
 
     if (component) {
-      const placeholder = component
-        .$dialogContainer()
-        .appendChild(document.createElement("div"));
+      // const placeholder = component
+      //   .$dialogContainer()
+      //   .appendChild(document.createElement("div"));
+
+      const placeholder = component.$el.appendChild(
+        document.createElement("div")
+      );
       instance.$mount(placeholder);
+    } else {
+      console.error("A dialog has to be displayed in a component");
+    }
+  }
+
+  static reload(properties, component) {
+    if (!this.stack) {
+      return;
     }
+
+    Utils.type.ifObject(this.stack.last(), dialog => {
+      // TODO: Find out a way to change the dialog's property.
+      console.log("D", dialog);
+    });
   }
 
   static close(properties, component) {
@@ -62,7 +79,8 @@ class LaunchDialog {
     });
   }
 
-  static alert(message) {
+  // This is only meant to be used internally
+  static alert(message, component) {
     const properties = {
       message: message
     };
@@ -74,12 +92,12 @@ class LaunchDialog {
         }
       ]
     });
-    this.dialog(spec);
+    this.open(spec, component);
   }
 }
 
 class LaunchSheet {
-  static open(properties) {
+  static open(properties, component) {
     const SheetClass = Vue.extend(Sheet);
     const instance = new SheetClass({
       vuetify: new Vuetify({
@@ -89,15 +107,20 @@ class LaunchSheet {
       }),
       propsData: { spec: properties }
     });
-    const placeholder = document.body.appendChild(
-      document.createElement("div")
-    );
-    instance.$mount(placeholder);
-    // instance.show = true
+
+    if (component) {
+      const placeholder = component.$el.appendChild(
+        document.createElement("div")
+      );
+      instance.$mount(placeholder);
+    } else {
+      console.error("A sheet has to be displayed in a component");
+    }
+
     return instance;
   }
 
-  static confirm(properties, onConfirm) {
+  static confirm(properties, onConfirm, component) {
     const spec = Object.assign({}, properties, {
       buttons: [
         {
@@ -106,37 +129,42 @@ class LaunchSheet {
         }
       ]
     });
-    this.open(spec);
+    this.open(spec, component);
   }
 
-  static alert(message, buttons) {
+  static alert(message, buttons, component) {
     const spec = { message: message, buttons: buttons };
-    this.open(spec);
+    this.open(spec, component);
   }
 }
 
 class LaunchSnackbar {
-  static open(properties) {
+  static open(properties, component) {
     const SnackbarClass = Vue.extend(Snackbar);
     const instance = new SnackbarClass({
       vuetify: window.vueApp.vuetify,
       propsData: { spec: properties, vueApp: window.vueApp }
     });
 
-    const placeholder = document.body.appendChild(
-      document.createElement("div")
-    );
-    instance.$mount(placeholder);
-    instance.show = true;
+    if (component) {
+      const placeholder = component.$el.appendChild(
+        document.createElement("div")
+      );
+      instance.$mount(placeholder);
+      instance.show = true;
+    } else {
+      console.error("A snackbar has to be displayed in a component");
+    }
+
     return instance;
   }
 
-  static error(message) {
-    this.open({ message: message, styleClasses: ["error"] });
+  static error(message, component) {
+    this.open({ message: message, styleClasses: ["error"] }, component);
   }
 
-  static indicator(message) {
-    const instance = this.open({ message: message, timeout: -1 });
+  static indicator(message, component) {
+    const instance = this.open({ message: message, timeout: -1 }, component);
     instance.indicator = true;
   }
 }