glib-web 3.0.0-beta1 → 3.0.0

package/action.js

@@ -2,7 +2,9 @@ import TypeUtils from "./utils/type";
 
 import ActionsRunMultiple from "./actions/runMultiple";
 
-import ActionsFormsSubmitV1 from "./actions/forms/submit";
+import ActionsFormsSubmit from "./actions/forms/submit";
+import ActionsFieldsReset from "./actions/fields/reset";
+import ActionsFieldsFocus from "./actions/fields/focus";
 
 import ActionsHttpGetV1 from "./actions/http/get";
 import ActionsHttpPostV1 from "./actions/http/post";
@@ -53,15 +55,21 @@ import ActionCommandsCustom from "./actions/commands/custom";
 import ActionCommandsEnqueue from "./actions/commands/enqueue";
 
 import ActionToursStart from "./actions/tours/start";
+import ActionToursStop from "./actions/tours/stop";
 
 import ActionComponentsUpdate from "./actions/components/update";
 
-import eventBus from "./utils/eventBus";
+import ActionPopoversOpen from "./actions/popovers/open"
+import ActionPopoversClose from "./actions/popovers/close"
+
+import { vueApp } from "./store";
 
 const actions = {
   runMultiple: ActionsRunMultiple,
 
-  "forms/submit": ActionsFormsSubmitV1,
+  "forms/submit": ActionsFormsSubmit,
+  "fields/reset": ActionsFieldsReset,
+  "fields/focus": ActionsFieldsFocus,
 
   "http/get": ActionsHttpGetV1,
   "http/post": ActionsHttpPostV1,
@@ -112,6 +120,10 @@ const actions = {
   "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
+  "components/update": ActionComponentsUpdate,
+  "popovers/open": ActionPopoversOpen,
+  "popovers/close": ActionPopoversClose,
+  "tours/stop": ActionToursStop,
   "components/update": ActionComponentsUpdate
 };
 
@@ -172,10 +184,10 @@ export default class Action {
       }
       action.execute(spec, component, params);
     } catch (e) {
-      console.error(
-        "Failed executing command",
-        actionName,
-        `Error: '${e.message}'`
+      GLib.settings.errorHandler(
+        new Error(
+          `Failed executing command "${actionName}". Error: ${e.message}`
+        )
       );
     }
   }
@@ -184,14 +196,13 @@ export default class Action {
     // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        // window.vueApp.page = response;
-        eventBus.$emit('app/updatePage', response)
+        vueApp.page = response
       });
     }
 
-    window.vueApp.temp.analytics = response.analytics;
+    vueApp.temp.analytics = response.analytics;
     GLib.action.execute(response.onResponse, component);
-    window.vueApp.temp.analytics = null;
+    vueApp.temp.analytics = null;
   }
 
   static registerCustom(actionName, action) {

package/actions/cables/push.js

@@ -1,7 +1,9 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component) {
     Utils.type.ifString(properties.channel, channelName => {
-      const ws = window.vueApp.actionCable;
+      const ws = vueApp.actionCable;
       const channel = ws.channels[channelName];
 
       console.log("Pushing to", channel);

package/actions/components/update.js

@@ -1,5 +1,3 @@
-import { Vue } from "../../index";
-
 export default class {
   execute(spec, component) {
     if (!spec.views.length > 1) {
@@ -12,17 +10,4 @@ export default class {
       target.$recursiveUpdate();
     }
   }
-
-  // // TODO: Use $recursiveUpdate(). See mixins/events
-  // updateComponent(component) {
-  //   component.$ready();
-  //   component.$forceUpdate();
-
-  //   // Execute on next tick to ensure that the child has received the updated spec.
-  //   Vue.nextTick(() => {
-  //     component.$children.find(child => {
-  //       this.updateComponent(child);
-  //     });
-  //   });
-  // }
 }

package/actions/fields/focus.js

@@ -0,0 +1,6 @@
+export default class {
+  execute(properties, component) {
+    const target = GLib.component.findById(properties.targetId);
+    target.action_focus();
+  }
+}

package/actions/fields/reset.js

@@ -0,0 +1,12 @@
+import { nextTick } from "vue";
+
+export default class {
+  execute(properties, component) {
+    const target = GLib.component.findById(properties.targetId);
+    target.action_resetValue();
+
+    nextTick(() => {
+      GLib.action.execute(properties["onReset"], component);
+    });
+  }
+}

package/actions/forms/submit.js

@@ -2,6 +2,6 @@ export default class {
   execute(properties, component) {
     component.$dispatchEvent("forms/directSubmit", {
       url: properties.overrideUrl
-    });
+    })
   }
 }

package/actions/http/get.js

@@ -8,7 +8,7 @@ export default class {
         const cleanUrl = Utils.url.htmlUrl(historyUrl);
         if (cleanUrl !== currentUrl) {
           console.log("URL", cleanUrl, response.url, response);
-          const data = Object.assign({}, window.vueApp.page, {
+          const data = Object.assign({}, page, {
             replayGetResponse: page.onResponse
           });
 

package/actions/panels/scrollTo.js

@@ -1,7 +1,9 @@
 // Scroll the main body of the current window
 export default class {
-  execute(properties) {
-    const pageBody = Utils.history._pageBody;
+  execute(properties, component) {
+    const pageBody =
+      Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
+
     const selector = `#${properties.viewId}`;
     console.log("Scrolling to", selector);
     const element = pageBody.querySelector(selector);

package/actions/popovers/close.js

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

package/actions/popovers/open.js

@@ -0,0 +1,9 @@
+import { nextTick } from "vue";
+import bus from "../../utils/eventBus";
+
+export default class {
+    execute(properties, component) {
+        Utils.launch.popover.open(properties, component);
+
+    }
+}

package/actions/tours/start.js

@@ -1,9 +1,11 @@
 import Driver from "driver.js";
 import "driver.js/dist/driver.min.css";
 
+let driver = null;
+
 export default class {
   execute(spec, component) {
-    let driver = new Driver(spec.options || {});
+    driver = new Driver(spec.options || {});
     let steps = spec.steps;
     steps
       .filter(value => value.customBehavior)
@@ -14,4 +16,11 @@ export default class {
     driver.defineSteps(steps);
     driver.start(spec.startFrom || 0);
   }
+
+  static stopTour() {
+    if (driver) {
+      driver.reset();
+      driver = null;
+    }
+  }
 }

package/actions/tours/stop.js

@@ -0,0 +1,7 @@
+import tour from "./start.js";
+
+export default class {
+  execute(spec, component) {
+    tour.stopTour();
+  }
+}

package/actions/windows/refreshState.js

@@ -1,5 +1,7 @@
+import { vueApp } from '../../store'
+
 export default class {
   execute(properties) {
-    window.vueApp.stateUpdatedAt = Date.now();
+    vueApp.stateUpdatedAt = Date.now
   }
 }

package/actions/ws/push.js

@@ -1,7 +1,9 @@
+import { vueApp } from "../../store";
+
 export default class {
   execute(properties, component, params) {
     Utils.type.ifString(properties.topic, topicName => {
-      const ws = window.vueApp.webSocket;
+      const ws = vueApp.webSocket;
       const channel = ws.channels[topicName];
 
       Utils.type.ifString(properties.event, eventName => {

package/app.vue

@@ -3,7 +3,7 @@
     <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
       <nav-appbar ref="appBar" :page="page" />
 
-      <v-progress-linear v-if="$root.vueApp.indicator" :indeterminate="true" height="5"
+      <v-progress-linear color="primary" v-if="vueApp.indicator" :indeterminate="true" height="5"
         style="position: fixed; z-index: 4;">
       </v-progress-linear>
 
@@ -32,6 +32,7 @@ import Utils from "./utils/helper";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
 import FormPanel from "./components/panels/form.vue";
+import { vueApp } from "./store";
 
 export default {
   components: {
@@ -46,6 +47,7 @@ export default {
     return {
       title: "...",
       mainHeight: 0,
+      vueApp
     };
   },
   computed: {
@@ -60,6 +62,7 @@ export default {
     },
     containerComponent() {
       if (this.formSpec) {
+        this.name = 'panels-form'
         return "panels-form";
       }
       return "div";
@@ -75,7 +78,7 @@ export default {
     },
   },
   watch: {
-    "$root.indicator": function (val, oldVal) {
+    "vueApp.indicator": function (val, oldVal) {
       document.title = val ? "..." : this.page.title;
     }
   },
@@ -103,26 +106,27 @@ export default {
       this.$wsInitPhoenixSocket(this.page.phoenixSocket);
       this.$wsInitActionCable(this.page.actionCable);
 
-      if (this.$gtag) {
-        if (!Utils.settings.isDev) {
-          console.log(`Tracking analytics: ${window.location}`);
-          this.$gtag.pageview({
-            page_location: window.location,
-          });
-        }
-      } else {
-        console.warn("Analytics not setup. Set `settings.gtagId`.");
-      }
+      // TODO: Remove gtag dependency
+      // if (this.$gtag) {
+      //   if (!Utils.settings.isDev) {
+      //     console.log(`Tracking analytics: ${window.location}`);
+      //     this.$gtag.pageview({
+      //       page_location: window.location
+      //     });
+      //   }
+      // } else {
+      //   console.warn("Analytics not setup. Set `settings.gtagId`.");
+      // }
 
+      // Use setTimeout() to wait until page is rendered. Don't use nextTick() because
+      // it would execute much earlier (before all components finish initializing).
       if (Utils.history.isPoppedState(this.page)) {
         setTimeout(() => {
-          // Wait until page is rendered
           GLib.action.execute(this.page.onRefocus, this);
           GLib.action.execute(this.page.replayGetResponse, this);
         });
       } else {
         setTimeout(() => {
-          // Wait until page is rendered
           GLib.action.execute(this.page.onLoad, this);
         });
       }
@@ -188,8 +192,61 @@ body,
   background: yellow !important;
 }
 
-.glib-clickable {
+// Don't override the default button's effect.
+.glib-clickable:not(.v-btn) {
   cursor: pointer;
+
+  // // So that we can display a semi-transparent layer on hover (see below)
+  position: relative;
+
+  &:hover:before {
+    content: "\A";
+    width: 100%;
+    height: 100%;
+    background: rgba(100, 100, 100, 0.1);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:before {
+    background: rgba(100, 100, 100, 0.2);
+  }
+}
+
+.glib-clickable.theme--light.v-list-item:hover:before {
+  opacity: 1; // Override Vuetify
+}
+
+.popover-menu {
+  padding: 8px 0;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  height: fit-content;
+}
+
+.popover-menu-item {
+  font-size: 14px;
+  padding: 8px 16px;
+  width: 100%;
+}
+
+.popover-menu-item:hover {
+  background-color: #f3f4f6;
+}
+
+.v-input__details {
+  min-height: 0;
+  margin-bottom: 0;
+
+  .v-messages {
+    min-height: 0;
+  }
+}
+
+.v-label {
+  opacity: 1;
 }
 
 /******/

package/components/_badge.vue

@@ -1,10 +1,5 @@
 <template>
-  <v-badge
-    :color="badge.backgroundColor || 'red'"
-    overlap
-    :value="badgeExists()"
-    :style="styles()"
-  >
+  <v-badge :color="badge.backgroundColor || 'red'" overlap :model-value="badgeExists()" :style="styles()">
     <template v-slot:badge>{{ badge.text }}</template>
     <slot />
   </v-badge>

package/components/_button.vue

@@ -1,33 +1,32 @@
 <template>
-  <!-- <common-badge :spec="spec"> -->
   <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
          located in a list row that has href. -->
-  <v-btn :type="type" :disabled="disabled || $isBusy || spec.disabled" :style="styles()" :class="$classes()"
-    :href="$href()" :rel="$rel()" :small="linkStyling || null" :icon="$classes().includes('icon')"
-    :outlined="$classes().includes('outlined') || null" :tile="$classes().includes('tile') || null"
-    :rounded="$classes().includes('rounded')" :depressed="$classes().includes('depressed') || null" @click.prevent="
+  <v-btn :type="type" :disabled="disabled || $isBusy || spec.disabled" :style="styles()" :class="classes()"
+    :href="$href()" :rel="$rel()" :variant="variant" :rounded="$classes().includes('rounded') || null" @click.prevent="
       type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
-    ">
-    <span><common-icon :spec="spec.icon || {}" /></span>
+      ">
+    <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span>
     <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
       {{ spec.text }}
     </div>
   </v-btn>
-  <!-- </common-badge> -->
 </template>
 
 <script>
+import { variants } from '../utils/constant'
+
 export default {
   props: {
     spec: { type: Object, required: true },
     type: { type: String, default: "button" },
-    disabled: { type: Boolean, required: true },
+    disabled: { type: Boolean },
     hideTextOnXs: { type: Boolean },
     eventHandlers: { type: Object, default: null }
   },
   data: function () {
     return {
-      linkStyling: false
+      linkStyling: false,
+      variant: 'elevated'
     };
   },
   methods: {
@@ -35,14 +34,25 @@ export default {
       this.$type.ifArray(this.spec.styleClasses, val => {
         this.linkStyling = val.includes("link");
       });
+
+      const vm = this
+      variants.forEach((value) => {
+        if (vm.$classes().includes(value)) {
+          vm.variant = value
+        }
+      })
     },
     styles() {
-      const styles = this.genericStyles();
+      const styles = this.$styles();
       if (this.linkStyling) {
         styles["color"] = styles["color"] || "#1976d2";
       }
       return styles;
     },
+    classes() {
+      const classes = this.$classes();
+      return classes;
+    },
     $registryEnabled() {
       return false;
     }
@@ -79,6 +89,7 @@ button {
     font-size: 16px;
     line-height: 1;
     min-width: auto;
+    box-shadow: none !important;
   }
 }
 

package/components/_chip.vue

@@ -1,22 +1,27 @@
 <template>
-  <!-- <common-tooltip :spec="spec"> -->
-  <!-- <template v-slot:activator="{ on }"> -->
-  <!-- <common-badge :spec="spec"> -->
-  <div>
-    <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>
-  </div>
-  <!-- </common-badge> -->
-  <!-- </template> -->
-  <!-- </common-tooltip> -->
+  <common-badge :spec="spec">
+    <div>
+      <v-chip v-if="spec.onClick" :style="genericStyles()" :color="color" :class="$classes()" :href="$href()"
+        @click="$onClick()" :variant="variant">
+        {{ spec.text }}
+      </v-chip>
+      <v-chip v-else :style="genericStyles()" :color="color" :class="$classes()" :variant="variant">
+        {{ spec.text }}
+      </v-chip>
+    </div>
+  </common-badge>
 </template>
 
 <script>
+import { colors, variants } from '../utils/constant'
+
 export default {
+  data: function () {
+    return {
+      color: '',
+      variant: 'tonal'
+    }
+  },
   props: {
     spec: { type: Object, required: true }
   },
@@ -26,9 +31,14 @@ export default {
   //   };
   // },
   methods: {
-    // $ready() {
-    //   this.tooltip = this.spec.tooltip || {};
-    // },
+    $ready() {
+      colors.forEach((value) => {
+        if (this.$classes().includes(value)) this.color = value;
+      })
+      variants.forEach((value) => {
+        if (this.$classes().includes(value)) this.variant = value;
+      })
+    },
     $registryEnabled() {
       return false;
     }

package/components/_responsive.vue

@@ -45,7 +45,7 @@ export default {
         default:
           align = "flex-start";
       }
-      Object.assign(this.innerStyles, { 'align-items': align })
+      Object.assign(this.innerStyles, { 'align-items': align, height: 'auto' })
     },
     isColumn(item) {
       return item.view == "panels/column-v1";
@@ -80,21 +80,21 @@ a.panels-responsive {
   color: inherit;
   text-decoration: inherit;
 
-  // So that we can display a semi-transparent layer on hover (see below)
-  position: relative;
+  // // 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.1);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
+  // &:hover:after {
+  //   content: "\A";
+  //   width: 100%;
+  //   height: 100%;
+  //   background: rgba(0, 0, 0, 0.1);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  // }
 
-  &:active:after {
-    background: rgba(0, 0, 0, 0.4);
-  }
+  // &:active:after {
+  //   background: rgba(0, 0, 0, 0.4);
+  // }
 }
 </style>

package/components/button.vue

@@ -1,9 +1,8 @@
 <template>
-  <!-- <common-tooltip ref="tooltip" :spec="spec"> -->
-  <!-- <template v-slot:activator="{ on }"> -->
-  <common-button :spec="spec" :disabled="$isBusy" />
-  <!-- </template> -->
-  <!-- </common-tooltip> -->
+  <common-badge v-if="spec.badge" :spec="spec">
+    <common-button :spec="spec" :disabled="$isBusy" />
+  </common-badge>
+  <common-button v-else :spec="spec" :disable="$isBusy" />
 </template>
 
 <script>

package/components/component.vue

@@ -19,8 +19,8 @@
 
   <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
-  <component :is="name" v-else-if="name" :id="spec.id" :spec="spec" />
-
+  <component v-else-if="name" :is="name" :id="spec.id" ref="delegate" :spec="spec"
+    @[menter]="handlePopover(spec.onMouseEnter)" @[mleave]="handlePopover(spec.onMouseLeave)" />
   <div v-else>Unsupported view: {{ spec.view }}</div>
 </template>
 
@@ -112,6 +112,7 @@ import ColumnChart from "./charts/column.vue";
 import PieChart from "./charts/pie.vue";
 
 import ShareButton from "./shareButton.vue";
+import Action from "../action";
 
 import { getCurrentInstance } from 'vue';
 
@@ -208,16 +209,24 @@ export default {
   },
   data() {
     return {
-      name: null,
+      name: null
     };
   },
-  beforeUpdate() {
-    // NOTE: Not sure what this is for
-    // Make sure vuejs will not attempt to render old data.
-    // if (this._mountedUrl !== window.location.href) {
-    //   this.name = null;
-    // }
+  computed: {
+    menter() {
+      return this.spec.onMouseEnter ? 'mouseenter' : null
+    },
+    mleave() {
+      return this.spec.onMouseLeave ? 'mouseleave' : null
+    }
   },
+  // beforeUpdate() {
+  //   // NOTE: Not sure what this is for
+  //   // Make sure vuejs will not attempt to render old data.
+  //   // if (this._mountedUrl !== window.location.href) {
+  //   //   this.name = null;
+  //   // }
+  // },
   methods: {
     $ready() {
       const name = Utils.app.componentName(this.spec.view);
@@ -230,9 +239,15 @@ export default {
         }
       }
     },
+    $update() {
+      this.$refs.delegate.$update();
+    },
     $registryEnabled() {
       return false;
     },
+    handlePopover(spec) {
+      GLib.action.execute(spec, this)
+    }
   },
 };
 </script>