glib-web 2.6.7 → 3.0.0

package/components/markdown.vue

@@ -2,35 +2,59 @@
   <div :style="genericStyles()" :class="$classes()">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <span v-html="compiledText"></span>
-    <div
-      v-if="youtubeId"
-      :style="`width: 320px; overflow: hidden; max-height: 180px;`"
-    >
-      <youtube :video-id="youtubeId" fit-parent></youtube>
+    <div class="flex w-100 justify-start" v-if="videoUrls">
+      <MultimediaVideo class="mr-2" v-for="videoUrl in videoUrls"
+        :spec="{ width: 360, height: 180, url: videoUrl, view: 'multimedia-video' }" />
     </div>
   </div>
 </template>
 
 <script>
+import MultimediaVideo from '../components/multimedia/video.vue'
+
+const extractUrl = (str, lower = false) => {
+  const regexp = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()'@:%_\+.~#?!&//=]*)/gi;
+
+  if (typeof str !== "string") {
+    throw new TypeError(
+      `The str argument should be a string, got ${typeof str}`
+    );
+  }
+
+  if (str) {
+    let urls = str.match(regexp);
+    if (urls) {
+      return lower ? urls.map((item) => item.toLowerCase()) : urls;
+    } else {
+      undefined;
+    }
+  } else {
+    undefined;
+  }
+};
+
 export default {
+  components: {
+    MultimediaVideo
+  },
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      youtubeId: null
+      videoUrls: ''
     };
   },
   computed: {
     compiledText() {
-      return Utils.format.markdown(this.spec.text);
+      return Utils.format.markdown(this.spec.text || '');
     }
   },
   methods: {
     $ready() {
       if (this.spec.previewVideo) {
-        this.youtubeId = this.extractYoutubeId(this.spec.text);
-        console.debug("Detected Youtube ID", this.youtubeId);
+        this.videoUrls = extractUrl(this.spec.text);
+        console.log("Detected url", this.videoUrls);
       }
       // Set all links to be openWeb or open in a new tab by default
       if (!this.spec.openWeb) {
@@ -40,63 +64,61 @@ export default {
         }
       }
     },
-    // From https://gist.github.com/takien/4077195
-    extractYoutubeId(url) {
-      var ID = "";
-      url = url
-        .replace(/(>|<)/gi, "")
-        .split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-      if (url[2] !== undefined) {
-        ID = url[2].split(/[^0-9a-z_\-]/i);
-        ID = ID[0];
-      }
-      return ID;
-    }
   }
 };
 </script>
 
 <style lang="scss">
 .views-markdown {
-  & > span > :last-child {
+  &>span> :last-child {
     margin-bottom: 0;
   }
+
   pre {
     background-color: #f0f0f0;
     padding: 8px 10px;
 
-    & > code {
+    &>code {
       background-color: transparent;
       padding: 0;
     }
   }
 }
+
 .line-clamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
 .line-clamp-1 {
   -webkit-line-clamp: 1;
 }
+
 .line-clamp-2 {
   -webkit-line-clamp: 2;
 }
+
 .line-clamp-3 {
   -webkit-line-clamp: 3;
 }
+
 .line-clamp-4 {
   -webkit-line-clamp: 4;
 }
+
 .line-clamp-5 {
   -webkit-line-clamp: 5;
 }
+
 .line-clamp-6 {
   -webkit-line-clamp: 6;
 }
+
 .line-clamp-7 {
   -webkit-line-clamp: 7;
 }
+
 .line-clamp-8 {
   -webkit-line-clamp: 8;
 }

package/components/mixins/events.js

@@ -1,6 +1,7 @@
 import Action from "../../action";
 import UrlUtils from "../../utils/url";
 import TypeUtils from "../../utils/type";
+import { vueApp } from "../../store";
 
 export default {
   data() {
@@ -10,7 +11,8 @@ export default {
       // Submit button needs to be disabled when redirecting after form submission
       _isBusy: false,
       _events: [],
-      _typingTimer: null
+      _typingTimer: null,
+      _mountedUrl: null,
     };
   },
   computed: {
@@ -33,11 +35,17 @@ export default {
     this._ready();
     this.$mounted();
   },
-  updated() {
+  beforeUpdate() {
+    if (vueApp.isStale) {
+      this._mountedUrl = null
+    }
+
     if (!this._renderingTheSamePage()) {
       this.$tearDown();
       this._ready();
     }
+  },
+  updated() {
     // this._executeIfReady(true);
     this.$updated();
   },
@@ -51,18 +59,9 @@ export default {
   //     this._ready();
   //   }
   // },
-  destroyed() {
+  onDeactivated() {
     this.$tearDown();
   },
-  watch: {
-    // See Utils.http
-    "$root.vueApp.isStale": function(val, oldVal) {
-      if (val === true) {
-        // Make sure $ready() will be called in the next update
-        this._mountedUrl = null;
-      }
-    }
-  },
   methods: {
     $href(spec) {
       const properties = spec || this.spec;
@@ -77,7 +76,7 @@ export default {
       }
       return null;
     },
-    $onClick: function(explicitEvent, spec) {
+    $onClick: function (explicitEvent, spec) {
       const properties = spec || this.spec;
       const e = explicitEvent || event;
 
@@ -92,7 +91,7 @@ export default {
         Action.execute(properties.onClick, this);
       }
     },
-    $rel: function(spec) {
+    $rel: function (spec) {
       const properties = spec || this.spec;
       const onClick = properties.onClick;
       if (TypeUtils.isObject(onClick)) {
@@ -109,12 +108,12 @@ export default {
     $onLongPress() {
       GLib.action.execute(this.spec.onLongPress, this);
     },
-    $addViewportChangeListeners: function(handler) {
+    $addViewportChangeListeners: function (handler) {
       window.addEventListener("load", handler);
       window.addEventListener("resize", handler);
       this._pageBody.addEventListener("scroll", handler);
     },
-    $removeViewportChangeListeners: function(handler) {
+    $removeViewportChangeListeners: function (handler) {
       window.removeEventListener("load", handler);
       window.removeEventListener("resize", handler);
       this._pageBody.removeEventListener("scroll", handler);
@@ -170,13 +169,13 @@ export default {
       this.$update();
       this.$forceUpdate();
 
-      // Execute on next tick to ensure that the children have received the updated spec.
-      // Important: The nextTick() needs to be used in each of the recursion.
-      await this.$nextTick();
-
-      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();
+      //   });
+      // });
     },
     // _recursiveUpdate() {
     //   this.$update();
@@ -222,8 +221,8 @@ export default {
           };
           const params = this.spec.paramNameForFormData
             ? {
-                [this.spec.paramNameForFormData]: formData
-              }
+              [this.spec.paramNameForFormData]: formData
+            }
             : formData;
           const data = Object.assign({}, onChange, params);
           GLib.action.execute(data, this);

package/components/mixins/generic.js

@@ -1,14 +1,17 @@
+import { vueApp } from "../../store";
+
 export default {
   methods: {
     $closest(name) {
       var parent = this.$parent;
       while (parent != null) {
         if (
-          Utils.type.isObject(parent.spec) &&
+          (Utils.type.isObject(parent.spec) || Utils.type.isObject(parent.formSpec)) &&
           GLib.component.vueName(parent) == name
         ) {
           return parent;
         }
+
         parent = parent.$parent;
       }
     },
@@ -50,11 +53,11 @@ export default {
         return;
       }
 
-      const ws = window.vueApp.webSocket;
+      const ws = vueApp.webSocket;
       const channel = ws.channels[topicName];
 
       if (!channel) {
-        console.debug(`Topic not ready: '${topicName}'`);
+        console.log(`Topic not ready: '${topicName}'`);
         setTimeout(() => {
           // Wait until $wsInitPhoenixSocket() has executed.
           this.$wsSubscribeEvents(spec);
@@ -63,7 +66,7 @@ export default {
       }
 
       for (const eventName of events) {
-        console.debug(`Registering event '${eventName}'`);
+        console.log(`Registering event '${eventName}'`);
         channel.on(eventName, payload => {
           console.debug(`Received '${eventName}' event`, payload);
           Utils.ws.handleResponse(payload.onResponse, this);

package/components/mixins/inputVariant.js

@@ -0,0 +1,16 @@
+const variants = ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled']
+
+export default {
+    data: function () {
+        return {
+            variant: 'outlined'
+        }
+    },
+    methods: {
+        $ready() {
+            variants.forEach((value) => {
+                if (this.$classes().includes(value)) this.variant = value
+            })
+        }
+    }
+}

package/components/mixins/list/autoload.js

@@ -1,5 +1,7 @@
+import { vueApp } from "../../../store";
+
 export default {
-  data: function() {
+  data: function () {
     return {
       topScrollHandler: null,
       bottomScrollHandler: null,
@@ -17,7 +19,7 @@ export default {
   //   }
   // },
   methods: {
-    enableInfiniteScrollIfApplicable: function() {
+    enableInfiniteScrollIfApplicable: function () {
       this.$removeViewportChangeListeners(this.topScrollHandler);
       this.$removeViewportChangeListeners(this.bottomScrollHandler);
 
@@ -95,7 +97,7 @@ export default {
 
               this._updateScrollAfterPrepending(previousFirstRowIndex);
             }
-            Utils.history.updatePage();
+            Utils.history.updatePage(vueApp.page);
           }
         );
       }
@@ -153,7 +155,7 @@ export default {
             for (const section of response.sections) {
               this.sections.push(section);
             }
-            Utils.history.updatePage();
+            Utils.history.updatePage(vueApp.page);
           }
         );
       }
@@ -176,7 +178,7 @@ export default {
         { url: nextPageUrl },
         "GET",
         vm,
-        function(response) {
+        function (response) {
           for (const section of response.sections) {
             vm.sections.push(section);
           }

package/components/mixins/styles.js

@@ -1,8 +1,7 @@
+import { vueApp } from "../../store";
 import Hash from "../../utils/hash";
-import Vue from "vue";
-import launch from "../../utils/launch";
 
-var jsonLogic = require("json-logic-js");
+import jsonLogic from 'json-logic-js';
 
 // jsonLogic.add_operation("add_ms", function(a, b) {
 //   if (Utils.type.isString(a)) {
@@ -12,7 +11,7 @@ var jsonLogic = require("json-logic-js");
 //   return null;
 // });
 export default {
-  data: function() {
+  data: function () {
     return {
       _fieldModels: {},
       fieldName: null,
@@ -36,17 +35,13 @@ export default {
     }
   },
   watch: {
-    fieldModel: function(val, oldVal) {
+    fieldModel: function (val, oldVal) {
       if (val === this.vuetifyEmptyString) {
         val = "";
       }
 
       // Make the field property observable for dynamic showing/hiding
-      Vue.set(
-        this.$data._fieldModels,
-        this.fieldName,
-        this.$internalizeValue(val)
-      );
+      Object.assign(this.$data._fieldModels, { [this.fieldName]: this.$internalizeValue(val) })
 
       this._checkDirtyState(val, oldVal);
     }
@@ -65,13 +60,13 @@ export default {
         const topDialog = Utils.launch.dialog.topDialog();
         if (topDialog) {
           if (!topDialog.isFormDirty) {
-            console.debug("Dialog form is now dirty");
+            console.log("Dialog form is now dirty");
             topDialog.isFormDirty = true;
           }
         } else {
-          if (!window.vueApp.isFormDirty) {
-            console.debug("Window form is now dirty");
-            window.vueApp.isFormDirty = true;
+          if (vueApp.isFormDirty) {
+            console.log("Window form is now dirty");
+            vueApp.isFormDirty = true;
           }
         }
       }
@@ -135,7 +130,7 @@ export default {
 
       return new Hash(styles);
     },
-    $length: function(length) {
+    $length: function (length) {
       if (Utils.type.isString(length) || Utils.type.isNumber(length)) {
         switch (length) {
           case "wrapContent":
@@ -162,7 +157,9 @@ export default {
     _updateDisplay(styles, properties) {
       Utils.type.ifObject(
         properties.showIf,
-        () => (styles["display"] = this.display)
+        () => {
+          styles["display"] = this.display
+        }
       );
       Utils.type.ifObject(properties.valueIf, logic => {
         const newValue = jsonLogic.apply(logic, this.$data._fieldModels);
@@ -192,6 +189,7 @@ export default {
     _linkFieldModels() {
       const hasCondition = this.spec && this.spec.showIf;
       const name = GLib.component.vueName(this);
+
       const isField = name && name.startsWith("fields-");
       if (hasCondition || isField) {
         const form = this.$closest("panels-form");
@@ -220,6 +218,7 @@ export default {
         classes.push("glib-clickable")
       );
 
+      // This could appear not as before after migration to vuetify 3
       Utils.type.ifArray(properties.styleClasses, val => {
         if (val.includes("card")) {
           classes.push("v-card");
@@ -231,6 +230,7 @@ export default {
           }
         }
       });
+
       return classes;
     }
   }

package/components/mixins/table/autoload.js

@@ -1,5 +1,7 @@
+import { vueApp } from "../../../store";
+
 export default {
-  data: function() {
+  data: function () {
     return {
       topScrollHandler: null,
       bottomScrollHandler: null,
@@ -17,7 +19,7 @@ export default {
     }
   },
   methods: {
-    enableInfiniteScrollIfApplicable: function() {
+    enableInfiniteScrollIfApplicable: function () {
       this.$removeViewportChangeListeners(this.topScrollHandler);
       this.$removeViewportChangeListeners(this.bottomScrollHandler);
 
@@ -90,7 +92,7 @@ export default {
             for (const section of response.sections) {
               this.sections.push(section);
             }
-            Utils.history.updatePage();
+            Utils.history.updatePage(vueApp.page);
           }
         );
       }
@@ -113,7 +115,7 @@ export default {
         { url: nextPageUrl },
         "GET",
         vm,
-        function(response) {
+        function (response) {
           for (const section of response.sections) {
             vm.sections.push(section);
           }

package/components/mixins/ws/actionCable.js

@@ -1,9 +1,10 @@
 import { createConsumer } from "@rails/actioncable";
+import { vueApp } from "../../../store";
 
 const consumer = createConsumer();
 
 export default {
-  data: function() {
+  data: function () {
     return {
       _wsSocket: null
     };
@@ -19,16 +20,16 @@ export default {
             channel: channelName
           });
 
-          console.debug("Connecting to channel", subscription);
+          console.log("Connecting to channel", subscription);
 
           consumer.subscriptions.create(subscription, {
             connected() {
-              const ws = window.vueApp.actionCable;
+              const ws = vueApp.actionCable;
               ws.channels[channelName] = this;
-              console.debug("Connected to channel", channelName);
+              console.log("Connected to channel", channelName);
             },
 
-            disconnected() {},
+            disconnected() { },
 
             received(data) {
               const action = data.action;

package/components/mixins/ws/phoenixSocket.js

@@ -1,8 +1,9 @@
 import { Socket } from "phoenix";
 import Hash from "../../../utils/hash";
+import { vueApp } from "../../../store";
 
 export default {
-  data: function() {
+  data: function () {
     return {
       _wsSocket: null
     };
@@ -12,6 +13,7 @@ export default {
       Utils.type.ifObject(
         spec,
         ws => {
+          console.log("Connecting socket...");
           Utils.launch.snackbar.indicator("Connecting...");
           Utils.http.startIndicator(this);
 
@@ -53,19 +55,19 @@ export default {
 
       this._wsSocket = socket;
       socket.onOpen(() => {
-        console.debug("Connected socket");
+        console.log("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.debug("Unable to connect socket");
+        console.log("Unable to connect socket");
       });
       socket.connect();
     },
     _wsJoinChannel(socket, spec) {
-      const ws = window.vueApp.webSocket;
+      const ws = vueApp.webSocket;
       Utils.type.ifObject(spec.header, header => {
         ws.header = header;
       });
@@ -79,7 +81,7 @@ export default {
       const channel = socket.channel(topicName, {});
 
       for (const eventName of events) {
-        console.debug(`Registering event '${eventName}'`);
+        console.log(`Registering event '${eventName}'`);
         channel.on(eventName, payload => {
           console.debug(`Received '${eventName}' event`, payload);
           Utils.ws.handleResponse(payload.onResponse, this);
@@ -89,11 +91,11 @@ export default {
       channel
         .join()
         .receive("ok", resp => {
-          console.debug(`Channel joined '${topicName}'`, resp);
+          console.log(`Channel joined '${topicName}'`, resp);
           ws.channels[topicName] = channel;
         })
         .receive("error", resp => {
-          console.debug(`Unable to join channel '${topicName}'`, resp);
+          console.log(`Unable to join channel '${topicName}'`, resp);
           Utils.launch.snackbar.error(
             "Unable to connect. Please try again.",
             this
@@ -102,13 +104,13 @@ export default {
     },
     _wsDisconnectSocket() {
       if (this._wsSocket) {
-        console.debug("Disconnecting socket");
+        console.log("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();
         this._wsSocket = null;
 
-        const ws = window.vueApp.webSocket;
+        const ws = vueApp.webSocket;
         ws.channels = {};
         ws.header = {};
 

package/components/p.vue

@@ -30,7 +30,17 @@ p {
   display: inline-block;
   margin-bottom: 0;
 }
+
 p.muted {
   opacity: 0.7;
 }
+
+.tooltip {
+  padding: 4px 8px;
+  color: white;
+  font-weight: 500;
+  background-color: #111827;
+  border-radius: .5rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
 </style>

package/components/panels/column.vue

@@ -1,18 +1,7 @@
 <template>
-  <v-col
-    :xl="xl.cols"
-    :lg="lg.cols"
-    :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"
-  >
+  <v-col :xl="xl.cols" :lg="lg.cols" :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="innerSpec()" />
   </v-col>
 </template>
@@ -22,7 +11,7 @@ import Hash from "../../utils/hash";
 
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
@@ -30,7 +19,7 @@ export default {
       lg: {},
       md: {},
       sm: {},
-      xs: {}
+      xs: {},
     };
   },
   methods: {
@@ -47,7 +36,7 @@ export default {
     },
     cssStyles() {
       const styles = Object.assign({}, this.$styles());
-      switch (this.$vuetify.breakpoint.name) {
+      switch (this.$vuetify.display.name) {
         case "xl":
           this.applyStyles(styles, this.xs);
           this.applyStyles(styles, this.sm);
@@ -101,8 +90,8 @@ export default {
       Utils.type.ifBoolean(spec.hide, () => {
         styles["display"] = "none";
       });
-    }
-  }
+    },
+  },
 };
 </script>