glib-web 0.6.0 → 0.6.4

package/action.js

@@ -45,6 +45,8 @@ import ActionsCreditCard from "./actions/auth/creditCard";
 
 import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
+import ActionCommandsCopy from "./actions/commands/copy";
+
 const actions = {
   runMultiple: ActionsRunMultiple,
 
@@ -89,11 +91,12 @@ const actions = {
   "auth/restart": ActionsAuthRestart,
   "auth/creditCard": ActionsCreditCard,
 
-  "analytics/logEvent": ActionsAnalyticsLogEvent
+  "analytics/logEvent": ActionsAnalyticsLogEvent,
+  "commands/copy": ActionCommandsCopy
 };
 
 export default class Action {
-  static execute(spec, target, component, params = {}) {
+  static execute(spec, component, params = {}) {
     if (!TypeUtils.isObject(spec)) {
       return;
     }
@@ -141,7 +144,7 @@ export default class Action {
       if (!logDisabled) {
         console.log(`Executing "${actionName}"`);
       }
-      action.execute(spec, null, component, params);
+      action.execute(spec, component, params);
     } catch (e) {
       console.log(
         "Failed executing command",
@@ -159,7 +162,7 @@ export default class Action {
     }
 
     window.vueApp.temp.analytics = response.analytics;
-    GLib.action.execute(response.onResponse, null, component);
+    GLib.action.execute(response.onResponse, component);
     window.vueApp.temp.analytics = null;
   }
 }

package/actions/analytics/logEvent.js

@@ -3,7 +3,7 @@ export default class {
     return true;
   }
 
-  execute(properties, target, component) {
+  execute(properties, component) {
     if (Utils.settings.isDev) {
       return;
     }

package/actions/auth/creditCard.js

@@ -9,9 +9,9 @@ export default class {
         Utils.http.stopIndicator(component);
 
         if (result.error) {
-          GLib.action.execute(properties.onFailure, {}, component);
+          GLib.action.execute(properties.onFailure, component);
         } else {
-          GLib.action.execute(properties.onSuccess, {}, component);
+          GLib.action.execute(properties.onSuccess, component);
         }
       });
     } else {
@@ -19,9 +19,9 @@ export default class {
         Utils.http.stopIndicator(component);
 
         if (result.error) {
-          GLib.action.execute(properties.onFailure, {}, component);
+          GLib.action.execute(properties.onFailure, component);
         } else {
-          GLib.action.execute(properties.onSuccess, {}, component);
+          GLib.action.execute(properties.onSuccess, component);
         }
       });
     }

package/actions/auth/saveCsrfToken.js

@@ -2,11 +2,11 @@
 // import Keys from '../../keys'
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     // console.log(properties['token'])
     // Storage.setLocal(Keys.Db.csrfToken, properties['token'])
-    
-    Utils.dom.setCsrf(properties['token'])
-    Action.execute(properties['onSave'], target, component)
+
+    Utils.dom.setCsrf(properties["token"]);
+    Action.execute(properties["onSave"], component);
   }
 }

package/actions/cables/push.js

@@ -1,17 +1,5 @@
 export default class {
   execute(properties) {
-    // const spec = Object.assign({}, properties, {
-    //   buttons: [
-    //     {
-    //       text: "OK",
-    //       onClick: properties.onClose
-    //     }
-    //   ]
-    // });
-    // Launch.dialog(spec);
-
-    // const ws = window.vueApp.actionCable;
-
     Utils.type.ifString(properties.channel, channelName => {
       const ws = window.vueApp.actionCable;
       const channel = ws.channels[channelName];

package/actions/commands/copy.js

@@ -0,0 +1,12 @@
+export default class {
+  execute(properties) {
+    let spec = Object.assign({}, properties, {
+      message: "Copied",
+      styleClasses: ["success"]
+    });
+    navigator.clipboard.writeText(properties.text).then(
+      () => Utils.launch.snackbar.open(spec),
+      reason => console.error("Could not copy text: " + reason)
+    );
+  }
+}

package/actions/dialogs/alert.js

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

package/actions/dialogs/close.js

@@ -1,7 +1,5 @@
-import Launch from '../../utils/launch'
-
 export default class {
-  execute(properties, target, component) {
-    Launch.closeDialog(properties, target, component)
+  execute(spec, component) {
+    Utils.launch.dialog.close(spec, component);
   }
 }

package/actions/dialogs/notification.js

@@ -1,12 +1,12 @@
 import Push from "push.js";
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     Push.create(properties.title, {
       body: properties.message,
       onClick() {
         const onClick = properties.onClick;
-        GLib.action.execute(onClick, null, component);
+        GLib.action.execute(onClick, component);
         this.close();
       }
     });

package/actions/dialogs/open.js

@@ -1,7 +1,5 @@
-import Launch from "../../utils/launch";
-
 export default class {
-  execute(properties) {
-    Launch.dialog(properties);
+  execute(spec, component) {
+    Utils.launch.dialog.open(spec, component);
   }
 }

package/actions/dialogs/show.js

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

package/actions/forms/submit.js

@@ -1,15 +1,5 @@
 export default class {
-  execute(properties, target, component) {
-    const form = component.$closest("panels-form");
-    if (form != null) {
-      form.submit();
-    }
-
-    // const vm = this;
-    // // Allows time for things to get finalized. For example, select.vue needs time to insert values
-    // // into hidden fields before they get submitted.
-    // setTimeout(() => {
-    //   vm.submit(target, component);
-    // }, 10);
+  execute(properties, component) {
+    component.$dispatchEvent("forms/directSubmit");
   }
 }

package/actions/http/delete.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "DELETE", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/patch.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "PATCH", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/post.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "POST", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/http/put.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, controller) {
+  execute(properties, controller) {
     GLib.http.execute(properties, "PUT", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/runMultiple.js

@@ -3,9 +3,9 @@ export default class {
     return true;
   }
 
-  execute(properties, target, component) {
+  execute(properties, component) {
     for (const action of properties.childActions) {
-      GLib.action.execute(action, null, component);
+      GLib.action.execute(action, component);
     }
   }
 }

package/actions/timeouts/set.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     component.$data._isBusy = true;
 
     if (properties.repeat) {
@@ -15,6 +15,6 @@ export default class {
 
   onTimeout(properties, component) {
     component.$data._isBusy = false;
-    GLib.action.execute(properties.onTimeout, null, component);
+    GLib.action.execute(properties.onTimeout, component);
   }
 }

package/actions/windows/close.js

@@ -1,12 +1,12 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     Utils.history.back();
 
     Utils.type.ifObject(properties["onClose"], it => {
       // Allow time for history.back() to complete, which is important for actions that need
       // to use window.location.href such as windows/reload
       setTimeout(function() {
-        GLib.action.execute(it, null, component);
+        GLib.action.execute(it, component);
       }, 100);
     });
   }

package/actions/windows/closeAll.js

@@ -1,7 +1,7 @@
 import Type from "../../utils/type";
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     // TODO
     // window.history.deleteAll()
 
@@ -9,7 +9,7 @@ export default class {
       // Allow time for history.back() to complete, which is important for actions that need
       // to use window.location.href such as windows/reload
       setTimeout(function() {
-        GLib.action.execute(it, null, component);
+        GLib.action.execute(it, component);
       }, 100);
     });
   }

package/actions/windows/closeWithReload.js

@@ -1,7 +1,7 @@
 import Hash from "../../utils/hash";
 
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     const fallbackUrl = new Hash(properties).remove("fallbackUrl");
     const data = Object.assign({}, properties);
     if (!Utils.history.back()) {

package/actions/windows/open.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     Utils.http.load(properties, null, component);
   }
 }

package/actions/windows/reload.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component) {
+  execute(properties, component) {
     if (Utils.settings.reactive) {
       // const currentUrl = window.location.href;
       // const data = {

package/actions/ws/push.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, target, component, params) {
+  execute(properties, component, params) {
     Utils.type.ifString(properties.topic, topicName => {
       const ws = window.vueApp.webSocket;
       const channel = ws.channels[topicName];

package/app.vue

@@ -42,13 +42,14 @@ import Utils from "./utils/helper";
 import ContentLayout from "./nav/content";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
+import tourMixin from "./components/mixins/tour";
 
 export default {
   components: {
     "nav-appbar": NavAppBar,
     "layouts-content": ContentLayout
   },
-  mixins: [phoenixSocketMixin, actionCableMixin],
+  mixins: [phoenixSocketMixin, actionCableMixin, tourMixin],
   props: {
     page: { type: Object, required: true }
   },
@@ -103,12 +104,13 @@ export default {
       if (Utils.history.isPoppedState(this.page)) {
         setTimeout(() => {
           // Wait until page is rendered
-          GLib.action.execute(this.page.onRefocus, null, this);
+          GLib.action.execute(this.page.onRefocus, this);
         });
       } else {
         setTimeout(() => {
           // Wait until page is rendered
-          GLib.action.execute(this.page.onLoad, null, this);
+          GLib.action.execute(this.page.onLoad, this);
+          this.startTour();
         });
       }
     }

package/components/button.vue

@@ -2,10 +2,10 @@
   <div>
     <v-tooltip
       v-if="spec.tooltip"
-      :top="tooltipClasses('top')"
-      :right="tooltipClasses('right')"
-      :bottom="tooltipClasses('bottom')"
-      :left="tooltipClasses('left')"
+      :top="tooltipPositionMatches('top')"
+      :right="tooltipPositionMatches('right')"
+      :bottom="tooltipPositionMatches('bottom')"
+      :left="tooltipPositionMatches('left')"
     >
       <template v-slot:activator="{ on }">
         <div v-on="on">
@@ -21,17 +21,17 @@
 </template>
 
 <script>
+import tooltipMixin from "./mixins/tooltip";
+import tourMixin from "./mixins/tour";
+
 export default {
+  mixins: [tooltipMixin, tourMixin],
   props: {
     spec: { type: Object, required: true }
   },
   methods: {
-    tooltipClasses(position) {
-      if (this.spec.tooltip.position) {
-        return position == this.spec.tooltip.position;
-      } else {
-        return position == "bottom";
-      }
+    $ready() {
+      this.registerTour();
     }
   }
 };

package/components/calendar.vue

@@ -98,7 +98,7 @@ export default {
       });
     },
     showEvent({ event, target }) {
-      Action.execute(event.onClick, target, this);
+      Action.execute(event.onClick, this);
     }
   }
 };

package/components/chip.vue

@@ -1,24 +1,49 @@
 <template>
-  <v-chip
-    v-if="spec.onClick"
-    :style="genericStyles()"
-    :class="$classes()"
-    :href="$href()"
-    @click="$onClick()"
+  <v-tooltip
+    :disabled="!spec.tooltip"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
   >
-    {{ spec.text }}
-    <common-badge :spec="spec" />
-  </v-chip>
-  <v-chip v-else :style="genericStyles()" :class="$classes()">
-    {{ spec.text }}
-    <common-badge :spec="spec" />
-  </v-chip>
+    <template v-slot:activator="{ on }">
+      <div v-on="on">
+        <v-chip
+          v-if="spec.onClick"
+          :style="genericStyles()"
+          :class="$classes()"
+          :href="$href()"
+          @click="$onClick()"
+        >
+          {{ spec.text }}
+          <common-badge :spec="spec" />
+        </v-chip>
+        <v-chip v-else :style="genericStyles()" :class="$classes()">
+          {{ spec.text }}
+          <common-badge :spec="spec" />
+        </v-chip>
+      </div>
+    </template>
+    <span>{{ tooltip.text }}</span>
+  </v-tooltip>
 </template>
 
 <script>
+import TooltipMixins from "./mixins/tooltip";
 export default {
+  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      tooltip: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || {};
+    }
   }
 };
 </script>

package/components/component.vue

@@ -105,6 +105,8 @@ import ResponsivePanel from "./panels/responsive";
 import UlPanel from "./panels/ul";
 import WebPanel from "./panels/web";
 
+import MultimediaVideo from "./multimedia/video";
+
 import AlertBanner from "./banners/alert";
 import SelectBanner from "./banners/select";
 
@@ -185,6 +187,8 @@ export default {
     "panels-ul": UlPanel,
     "panels-web": WebPanel,
 
+    "multimedia-video": MultimediaVideo,
+
     "banners-alert": AlertBanner,
     "banners-select": SelectBanner,
 

package/components/fields/check.vue

@@ -1,6 +1,9 @@
 <template>
   <div :class="$classes()" :style="$styles()">
-    <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" />
+    <!-- <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" /> -->
+    <!-- This hidden field should always be there to make sure the submitted param is not empty,
+         which could cause "Not accessible" error on the server. -->
+    <input type="hidden" :name="fieldName" :value="spec.uncheckValue" />
     <v-checkbox
       v-model="fieldModel"
       :name="fieldName"
@@ -15,20 +18,20 @@
 </template>
 
 <script>
-import HiddenField from "./hidden";
+// import HiddenField from "./hidden";
 
 export default {
-  components: {
-    "fields-hidden": HiddenField
-  },
+  // components: {
+  //   "fields-hidden": HiddenField
+  // },
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
       groupName: null,
-      fieldType: null,
-      uncheckSpec: null
+      fieldType: null
+      // uncheckSpec: null
     };
   },
   methods: {
@@ -42,6 +45,7 @@ export default {
       );
 
       this.fieldName = this.spec.name || groupName;
+
       this.fieldModel = this.spec.checked
         ? this.spec.checkValue
         : this.spec.value;
@@ -52,9 +56,9 @@ export default {
         }
       });
 
-      Utils.type.ifNotNull(this.spec.uncheckValue, value => {
-        this.uncheckSpec = { name: this.spec.name, value: value };
-      });
+      // Utils.type.ifNotNull(this.spec.uncheckValue, value => {
+      //   this.uncheckSpec = { name: this.spec.name, value: value };
+      // });
     },
     changed(event) {
       // Execute later to ensure the checkbox's checked state has been updated.
@@ -69,6 +73,12 @@ export default {
           this.$dispatchEvent("forms/submit");
         }, 200);
       }
+    },
+    $internalizeValue(val) {
+      if (val == this.spec.checkValue) {
+        return val;
+      }
+      return this.spec.uncheckValue;
     }
   }
 };

package/components/fields/creditCard.vue

@@ -1,18 +1,20 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
-    <StripeIndividualFields
-      v-if="$classes().includes('individual')"
-      :spec="spec"
-      :on-complete="_retrieveToken"
-      :on-error="_displayError"
-    />
-    <StripeFields
-      v-else
-      :spec="spec"
-      :on-complete="_retrieveToken"
-      :on-error="_displayError"
-    />
-    <div ref="error" style="color: red;"></div>
+    <div class="stretcher">
+      <StripeIndividualFields
+        v-if="$classes().includes('individual')"
+        :spec="spec"
+        :on-complete="_retrieveToken"
+        :on-error="_displayError"
+      />
+      <StripeFields
+        v-else
+        :spec="spec"
+        :on-complete="_retrieveToken"
+        :on-error="_displayError"
+      />
+      <div ref="error" style="color: red;"></div>
+    </div>
     <!-- <input ref="token" type="hidden" :name="spec.name" /> -->
 
     <input
@@ -103,3 +105,10 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+// Without this, this view will have minimal width when displayed using showIf.
+.stretcher {
+  width: 100%;
+}
+</style>