glib-web 3.0.3 → 3.0.5

package/components/fields/text.vue

@@ -1,12 +1,11 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-text-field v-model="fieldModel" :label="spec.label" :name="fieldName" :placeholder="spec.placeholder"
-      :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :type="config.type" :rules="rules"
-      :prepend-inner-icon="leftIconName" :append-inner-icon="config.appendIcon" :prefix="spec.leftText"
-      :suffix="spec.rightText" :min="spec.min" :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur"
-      @click:appendInner="onRightIconClick" @input="onChange" :variant="variant" persistent-placeholder />
+    <v-text-field :label="spec.label" :name="fieldName" :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255"
+      :disabled="spec.readOnly" :type="config.type" :rules="rules" :prepend-inner-icon="leftIconName"
+      :append-inner-icon="config.appendIcon" :prefix="spec.leftText" :suffix="spec.rightText" :min="spec.min"
+      :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur" @click:appendInner="onRightIconClick"
+      @input="onChange" :variant="variant" persistent-placeholder />
     <input v-if="spec.readOnly" type="hidden" :name="fieldName" />
-
   </div>
 </template>
 
@@ -18,7 +17,7 @@ export default {
   mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },
-    type: { type: String, required: true }
+    type: { type: String, required: true },
   },
   data() {
     return {
@@ -31,17 +30,17 @@ export default {
           prependIcon: "email",
           onRightIconClick: function () { },
           rules: [
-            v =>
+            (v) =>
               !v ||
               /^\w+([.-\\+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,5})+$/.test(v) ||
-              "E-mail must be valid"
-          ]
+              "E-mail must be valid",
+          ],
         },
         number: {
           type: "number",
           prependIcon: "looks_one",
           onRightIconClick: function () { },
-          rules: [v => !v || /^\-?[.\d]*$/.test(v) || "Must be a number"]
+          rules: [(v) => !v || /^\-?[.\d]*$/.test(v) || "Must be a number"],
         },
         password: {
           type: "password",
@@ -50,7 +49,7 @@ export default {
           onRightIconClick: function (vm) {
             vm.togglePasswordVisibility();
           },
-          rules: [v => !v || v.length >= 6 || "Password must be longer"]
+          rules: [(v) => !v || v.length >= 6 || "Password must be longer"],
         },
         url: {
           type: "url",
@@ -59,23 +58,23 @@ export default {
           rules: [
             // From https://gist.github.com/rodneyrehm/8013067
             // Make sure to support unicode chars, e.g. https://www.facebook.com/%E5%86%B0%E5%8F%8B%E4%BE%86%E7%9C%8B%E7%90%83-103474391161721/
-            v =>
+            (v) =>
               !v ||
               /^(https?|ftp|torrent|image|irc):\/\/(-\.)?([^\s\/?\.#]+\.?)+(\/[^\s]*)?$/i.test(
                 v
               ) ||
-              "Must be a valid URL"
-          ]
+              "Must be a valid URL",
+          ],
         },
         search: {
           type: "url",
           prependIcon: "search",
           onRightIconClick: function () { },
           rules: [
-            v => !v || /^\w+:\/\/[.-\w]+$/.test(v) || "Must be a valid URL"
-          ]
-        }
-      }
+            (v) => !v || /^\w+:\/\/[.-\w]+$/.test(v) || "Must be a valid URL",
+          ],
+        },
+      },
     };
   },
   computed: {
@@ -88,11 +87,11 @@ export default {
       const icon = this.spec.rightIcon || {};
       const materialIcon = icon.material || {};
       return materialIcon.name;
-    }
+    },
   },
   methods: {
     $ready() {
-      this.fieldModel = this.spec.value
+      this.fieldModel = this.spec.value;
       this.config = this.fields[this.type] || {};
       this.rules = this.$validation(this.config.rules);
 
@@ -120,8 +119,8 @@ export default {
     },
     onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
-    }, 300)
-  }
+    }, 300),
+  },
 };
 </script>
 

package/components/fields/timer.vue

@@ -101,10 +101,9 @@ export default {
       }
     },
     $tearDown() {
-      console.log("Cleaning up timer...");
       if (this.timer != null) {
         clearInterval(this.timer);
-        console.log(`Timer stopped: ${this.timer}`);
+        console.debug(`Timer stopped: ${this.timer}`);
         this.timer == null;
       }
     },

package/components/label.vue

@@ -24,10 +24,14 @@ export default {
 
       this.text = this.spec.text;
     },
-    action_set(spec) {
-      if (spec.user_id !== spec.filterKey) {
-        this.text = spec.text;
-      }
+    // action_set(spec) {
+    //   if (spec.user_id !== spec.filterKey) {
+    //     this.text = spec.text;
+    //   }
+    // },
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      this.$ready();
     }
   }
 };

package/components/mixins/events.js

@@ -165,26 +165,21 @@ export default {
       // this._linkFieldModels();
       this.$ready();
     },
-    async $recursiveUpdate() {
-      this.$update();
-      this.$forceUpdate();
+    async $recursiveUpdate(stack) {
+      // const children = this.$children;
+      if (this.spec) {
+        // this.$update();
+        // this.$forceUpdate();
 
-      // Execute on next tick to ensure that the child has received the updated spec.
-      // $children is removed in vue 3
-      // this.$nextTick(() => {
-      //   this.$children.find(child => {
-      //     child.$recursiveUpdate();
-      //   });
-      // });
-    },
-    // _recursiveUpdate() {
-    //   this.$update();
-    //   this.$forceUpdate();
-
-    //   this.$children.find(child => {
-    //     child._recursiveUpdate();
-    //   });
-    // },
+        // Execute on next tick to ensure that the child has received the updated spec.
+        // $children is removed in vue 3
+        // this.$nextTick(() => {
+        //   this.$children.find(child => {
+        //     child.$recursiveUpdate();
+        //   });
+        // });
+      }
+    },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/components/mixins/generic.js

@@ -57,7 +57,7 @@ export default {
       const channel = ws.channels[topicName];
 
       if (!channel) {
-        console.log(`Topic not ready: '${topicName}'`);
+        console.debug(`Topic not ready: '${topicName}'`);
         setTimeout(() => {
           // Wait until $wsInitPhoenixSocket() has executed.
           this.$wsSubscribeEvents(spec);
@@ -66,7 +66,7 @@ export default {
       }
 
       for (const eventName of events) {
-        console.log(`Registering event '${eventName}'`);
+        console.debug(`Registering event '${eventName}'`);
         channel.on(eventName, payload => {
           console.debug(`Received '${eventName}' event`, payload);
           Utils.ws.handleResponse(payload.onResponse, this);

package/components/mixins/styles.js

@@ -60,7 +60,7 @@ export default {
         const topDialog = Utils.launch.dialog.topDialog();
         if (topDialog) {
           if (!topDialog.isFormDirty) {
-            console.log("Dialog form is now dirty");
+            console.debug("Dialog form is now dirty");
             topDialog.isFormDirty = true;
           }
         } else {

package/components/mixins/ws/actionCable.js

@@ -20,13 +20,13 @@ export default {
             channel: channelName
           });
 
-          console.log("Connecting to channel", subscription);
+          console.debug("Connecting to channel", subscription);
 
           consumer.subscriptions.create(subscription, {
             connected() {
               const ws = vueApp.actionCable;
               ws.channels[channelName] = this;
-              console.log("Connected to channel", channelName);
+              console.debug("Connected to channel", channelName);
             },
 
             disconnected() { },

package/components/mixins/ws/phoenixSocket.js

@@ -13,7 +13,6 @@ export default {
       Utils.type.ifObject(
         spec,
         ws => {
-          console.log("Connecting socket...");
           Utils.launch.snackbar.indicator("Connecting...");
           Utils.http.startIndicator(this);
 
@@ -55,14 +54,14 @@ export default {
 
       this._wsSocket = socket;
       socket.onOpen(() => {
-        console.log("Connected socket");
+        console.debug("Connected socket");
         this._wsJoinChannel(socket, spec);
         Utils.http.stopIndicator(this);
       });
       socket.onError(() => {
         // Start the indicator again because this can trigger even after successfully connected.
         Utils.http.startIndicator(this);
-        console.log("Unable to connect socket");
+        console.debug("Unable to connect socket");
       });
       socket.connect();
     },
@@ -81,7 +80,7 @@ export default {
       const channel = socket.channel(topicName, {});
 
       for (const eventName of events) {
-        console.log(`Registering event '${eventName}'`);
+        console.debug(`Registering event '${eventName}'`);
         channel.on(eventName, payload => {
           console.debug(`Received '${eventName}' event`, payload);
           Utils.ws.handleResponse(payload.onResponse, this);
@@ -91,11 +90,11 @@ export default {
       channel
         .join()
         .receive("ok", resp => {
-          console.log(`Channel joined '${topicName}'`, resp);
+          console.debug(`Channel joined '${topicName}'`, resp);
           ws.channels[topicName] = channel;
         })
         .receive("error", resp => {
-          console.log(`Unable to join channel '${topicName}'`, resp);
+          console.debug(`Unable to join channel '${topicName}'`, resp);
           Utils.launch.snackbar.error(
             "Unable to connect. Please try again.",
             this
@@ -104,7 +103,7 @@ export default {
     },
     _wsDisconnectSocket() {
       if (this._wsSocket) {
-        console.log("Disconnecting socket");
+        console.debug("Disconnecting socket");
         // Sometimes this doesn't prevent errorneous socket from trying to reconnect. In this case,
         // the socket will keep attempting to connect.
         this._wsSocket.disconnect();

package/components/panels/horizontal.vue

@@ -41,7 +41,7 @@ export default {
   data: function () {
     return {
       dragSupport: null,
-      childViews: []
+      childViews: [],
     };
   },
   computed: {
@@ -82,7 +82,7 @@ export default {
     childStyles() {
       const styles = {
         width: "100%",
-        height: "100%"
+        height: "100%",
       };
 
       switch (this.spec.align) {
@@ -100,7 +100,7 @@ export default {
     },
     componentName() {
       return this.spec.onClick ? "a" : "div";
-    }
+    },
   },
   methods: {
     $ready() {
@@ -119,7 +119,7 @@ export default {
 
       const targetRowIndex = event.newIndex;
       if (event.from == event.to && event.oldIndex == targetRowIndex) {
-        console.log("Reordering canceled");
+        console.debug("Reordering canceled");
         return;
       }
 
@@ -136,8 +136,8 @@ export default {
           [dragSpec.paramNameForNewAbsoluteIndex || "newIndex"]: targetRowIndex,
           [dragSpec.paramNameForItemId || "itemId"]: itemId,
           [dragSpec.paramNameForOldPanelId || "oldPanelId"]: oldPanelId,
-          [dragSpec.paramNameForNewPanelId || "newPanelId"]: newPanelId
-        }
+          [dragSpec.paramNameForNewPanelId || "newPanelId"]: newPanelId,
+        },
       });
 
       GLib.action.execute(mergedSpec, this);
@@ -145,8 +145,8 @@ export default {
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);
       this.$ready();
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/panels/list.vue

@@ -94,7 +94,6 @@ export default {
       return row;
     },
     action_loadNext(spec) {
-      console.log("TODO: load new comments and append to this list", spec);
       // TODO
       // - Load next rows/items from the Rails server
       //   - You can pass some parameters (e.g. currentItemId) for pagination
@@ -182,7 +181,7 @@ export default {
       const targetSectionedRowIndex = event.newIndex;
       // const sourceSectionedRowIndex = event.oldIndex;
       if (event.from == event.to && event.oldIndex == targetSectionedRowIndex) {
-        console.log("Reordering canceled");
+        console.debug("Reordering canceled");
         return;
       }
 
@@ -190,7 +189,6 @@ export default {
       this.$recursiveUpdate();
 
       const targetSectionIndex = this.getSectionIndex(event.to);
-      // const targetSection = this.getSection(targetSectionIndex);
 
       const targetAbsoluteIndex =
         this.previousSectionsRowCount(event.to) + targetSectionedRowIndex;
@@ -215,6 +213,27 @@ export default {
       });
 
       GLib.action.execute(mergedSpec, this);
+
+      this.hackLingeringHighlight();
+    },
+    hackLingeringHighlight() {
+      // After a row finished dragging, the row below it will automatically be
+      // "active&hover" for some reason, which will cause it to be incorrectly
+      // highlighted
+      // This seems to be a browser/library bug, so as a workaround, we temporarily
+      // apply the "disabled" class so the highlighting doesn't happen.
+      this.$el
+        .querySelectorAll(":active .row_container > .glib-clickable:hover")
+        .forEach(activeRow => {
+          activeRow.classList.add("disabled");
+          document.addEventListener(
+            "mousemove",
+            function () {
+              activeRow.classList.remove("disabled");
+            },
+            { once: true }
+          );
+        });
     },
     getSectionIndex(element) {
       return element.dataset.dragsectionindex;

package/components/panels/responsive.vue

@@ -10,18 +10,9 @@ export default {
       required: true,
       default: function () {
         return {};
-      }
-    }
+      },
+    },
   },
-  data() {
-    return {
-      hoverViewsSpec: null
-    };
-  },
-  methods: {
-    $ready() {
-    }
-  }
 };
 </script>
 

package/components/panels/scroll.vue

@@ -23,7 +23,6 @@ export default {
       // // Let the styles be handled by the child panel.
       // const outerSpec = {};
       // outerSpec["padding"] = this.spec["outerPadding"];
-      // console.log("outerSpec", outerSpec);
       // const styles = this.$styles(outerSpec);
       //
       // const styles = this.genericStyles();
@@ -36,8 +35,6 @@ export default {
       //   width: this.spec.width,
       //   height: this.spec.height
       // });
-      //
-      // console.log("styles", styles);
 
       // Let the specified styles be handled by the child panel.
       const styles = this.$styles({

package/components/panels/table.vue

@@ -99,9 +99,6 @@ export default {
       //     const createdAt = row[5]
       //     const activationState = row[14] ? 'active' : 'pending'
       //     count += 1
-      //     if (email.includes("'")) {
-      //       console.log("INVALID NAME", name)
-      //     }
       //     str += `{ name: "${name}".to_s, email: '${email}'.to_s, created_at: '${createdAt}', activation_state: '${activationState}'},\n`
       //   }
       // }

package/components/switch.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="$classes()">
     <v-switch
+      color="primary"
       v-model="enabled"
       :label="spec.text"
       hide-details
@@ -13,11 +14,11 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      enabled: false
+      enabled: false,
     };
   },
   methods: {
@@ -30,8 +31,8 @@ export default {
       } else {
         GLib.action.execute(this.spec.onDisabled, this);
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

package/nav/dialog.vue

@@ -1,10 +1,19 @@
 <template>
-  <v-dialog :width="spec.width || 600" v-model="model" :fullscreen="fullscreen" :persistent="true">
-    <v-card>
-      <v-card-title v-if="title || showClose" class="text-h5" primary-title>
-        {{ title }}
-        <v-btn v-if="showClose" icon="close" size="small" :flat="true" class="dialog-close" @click.native="close" />
-      </v-card-title>
+  <v-dialog v-model="model" :width="spec.width || 600" :dark="false" :fullscreen="fullscreen" :sm-and-down="false"
+    :persistent="!spec.closeOnBlur">
+    <v-card :style="hamburgerStyles" class="hamburger">
+      <!-- <v-card-title v-if="title || showClose" class="text-h5" primary-title> -->
+      <div>
+        <panels-responsive v-if="header" :spec="header" />
+        <div v-if="title" class="dialogs-title theme--light v-subheader">
+          {{ title }}
+        </div>
+
+        <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </div>
+      <!-- </v-card-title> -->
 
       <div class="dialogs-body">
         <component :is="containerComponent" :spec="formSpec">
@@ -108,7 +117,7 @@ export default {
       });
     },
     $tearDown() {
-      console.log("Dialog destroyed");
+      console.debug("Dialog destroyed");
       this.stack.remove(this);
     },
     close() {
@@ -152,6 +161,8 @@ export default {
               this.body = response.body;
               this.footer = response.footer;
               this.showClose = this.spec.showClose || false;
+
+              Action.execute(response.onLoad, this);
             });
           });
         }
@@ -166,7 +177,6 @@ export default {
       this.model = true;
     },
     updateMainHeight() {
-      console.debug("Setting body height");
       this.mainHeight = window.innerHeight - 140;
     }
   }

package/package.json

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

package/utils/history.js

@@ -81,7 +81,7 @@ export default class {
       window.history.back();
       return true;
     } else {
-      console.log("Reached beginning of navigation stack");
+      console.debug("Reached beginning of navigation stack");
       return false;
     }
   }