glib-web 0.12.0 → 0.12.2

package/action.js

@@ -162,6 +162,7 @@ export default class Action {
   }
 
   static handleResponse(response, component) {
+    // 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;

package/actions/commands/copy.js

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

package/components/_responsive.vue

@@ -9,7 +9,7 @@
   >
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
-        <ui-component
+        <glib-component
           v-if="isColumn(item)"
           :key="viewKey(item, index)"
           :spec="item"
@@ -20,7 +20,7 @@
           class="full-width"
           :style="innerStyles"
         >
-          <ui-component :spec="item" />
+          <glib-component :spec="item" />
         </div>
       </template>
     </v-row>

package/components/fields/check.vue

@@ -1,6 +1,5 @@
 <template>
   <div :class="$classes()" :style="$styles()">
-    <!-- <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" />
@@ -18,12 +17,7 @@
 </template>
 
 <script>
-// import HiddenField from "./hidden";
-
 export default {
-  // components: {
-  //   "fields-hidden": HiddenField
-  // },
   props: {
     spec: { type: Object, required: true }
   },
@@ -31,7 +25,6 @@ export default {
     return {
       groupName: null,
       fieldType: null
-      // uncheckSpec: null
     };
   },
   methods: {
@@ -55,10 +48,6 @@ export default {
           this.fieldType = "switch";
         }
       });
-
-      // 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.

package/components/fields/checkGroup.vue

@@ -1,35 +1,60 @@
 <template>
-  <div ref="checkGroup" data-component="checkGroup" :name="spec.name">
-    <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" />
+  <div
+    ref="checkGroup"
+    class="checkgroup"
+    data-component="checkGroup"
+    :name="spec.name"
+  >
+    <!-- <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" /> -->
 
     <div v-for="(item, index) in spec.childViews" :key="index">
-      <ui-component :spec="item" />
+      <glib-component :spec="item" />
     </div>
+
+    <v-text-field
+      class="checkgroup__uncheckvalue"
+      :disabled="anyChecked"
+      :name="spec.name"
+      :value="spec.uncheckValue"
+      :rules="rules"
+    />
   </div>
 </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 {
-      anyChecked: false
+      anyChecked: false,
+      errorMessage: null,
+      rules: [
+        _v => {
+          return this.anyChecked || this.errorMessage || true;
+        }
+      ]
     };
   },
-  computed: {
-    uncheckSpec() {
-      return { name: this.spec.name, value: this.spec.uncheckValue };
-    }
-  },
+  // computed: {
+  //   uncheckSpec() {
+  //     return { name: this.spec.name, value: this.spec.uncheckValue };
+  //   }
+  // },
   methods: {
     $ready() {
+      const validation = this.spec.validation || {};
+
+      Utils.type.ifObject(validation.required, required => {
+        this.errorMessage = required.message;
+      });
+
       this.detectChecked();
       const vm = this;
       this.$el.addEventListener(
@@ -48,6 +73,7 @@ export default {
         .forEach(function(checkbox) {
           if (checkbox.checked) {
             vm.anyChecked = true;
+            return;
           }
         });
     }
@@ -55,4 +81,20 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style lang="scss">
+// Hide the uncheck field, but continue to show the validation div.
+.checkgroup__uncheckvalue {
+  padding-top: 0px;
+
+  .v-input__slot {
+    display: none;
+  }
+
+  // Hide the entire component unless there is a validation message.
+  display: none;
+
+  &.error--text {
+    display: block;
+  }
+}
+</style>

package/components/fields/location.vue

@@ -50,17 +50,17 @@
         @dragend="onDrag"
       />
     </gmap-map>
-    <ui-component
+    <glib-component
       v-if="latitudeField"
       ref="latitudeView"
       :spec="latitudeField"
     />
-    <ui-component
+    <glib-component
       v-if="longitudeField"
       ref="longitudeView"
       :spec="longitudeField"
     />
-    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
+    <glib-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
   </v-container>
 </template>
 

package/components/fields/richText.vue

@@ -12,8 +12,8 @@
     <input
       v-for="(imageKey, index) in imageKeys"
       :key="index"
-      type="hidden"
-      name="imageUrls[]"
+      type="text"
+      :name="imageUploader.name"
       :value="images[imageKey]"
     />
 
@@ -52,7 +52,8 @@ export default {
     cleanValue: "",
     images: {},
     imageKeys: [],
-    progress: { value: -1 }
+    progress: { value: -1 },
+    imageUploader: {}
   }),
   // mounted: function () {
   //   const vm = this
@@ -92,10 +93,12 @@ export default {
           return "{{IMAGE_NOT_FOUND}}";
         }
       );
+
+      this.imageUploader = this.spec.imageUploader;
     },
     uploadImage: function(file, editor, cursorLocation) {
       let vm = this;
-      const uploaderSpec = this.spec.imageUploader;
+      const uploaderSpec = this.imageUploader;
       // const input = this.$refs.directUploadFile
       const upload = new Uploader(
         file,

package/components/markdown.vue

@@ -34,9 +34,9 @@ export default {
       }
       // Set all links to be openWeb or open in a new tab by default
       if (!this.spec.openWeb) {
-        let anchors = document.querySelectorAll('a');
+        let anchors = document.querySelectorAll("a");
         for (let i = 0; i < anchors.length; i++) {
-          anchors[i].setAttribute('target', '_blank')
+          anchors[i].setAttribute("target", "_blank");
         }
       }
     },
@@ -56,4 +56,10 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style lang="scss">
+.views-markdown {
+  & > span > :last-child {
+    margin-bottom: 0;
+  }
+}
+</style>

package/components/mixins/styles.js

@@ -1,5 +1,6 @@
 import Hash from "../../utils/hash";
 import Vue from "vue";
+import launch from "../../utils/launch";
 
 var jsonLogic = require("json-logic-js");
 
@@ -46,19 +47,7 @@ export default {
         this.$internalizeValue(val)
       );
 
-      const dirtyCheckEnabled = !this.spec.disableDirtyCheck;
-      // Make sure value has changed and make sure that it is different from the original value.
-      // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
-      // from `null` to `this.spec.value`).
-      if (
-        dirtyCheckEnabled &&
-        !window.vueApp.isFormDirty &&
-        val != oldVal &&
-        val != this.spec.value
-      ) {
-        console.log("Form is now dirty");
-        window.vueApp.isFormDirty = true;
-      }
+      this._checkDirtyState(val, oldVal);
     }
   },
   methods: {
@@ -66,6 +55,26 @@ export default {
     genericStyles(spec) {
       return this.$styles(spec);
     },
+    _checkDirtyState(val, oldVal) {
+      const dirtyCheckEnabled = !this.spec.disableDirtyCheck;
+      // Make sure value has changed and make sure that it is different from the original value.
+      // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
+      // from `null` to `this.spec.value`).
+      if (dirtyCheckEnabled && val != oldVal && val != this.spec.value) {
+        const topDialog = Utils.launch.dialog.topDialog();
+        if (topDialog) {
+          if (!topDialog.isFormDirty) {
+            console.log("Dialog form is now dirty");
+            topDialog.isFormDirty = true;
+          }
+        } else {
+          if (!window.vueApp.isFormDirty) {
+            console.log("Window form is now dirty");
+            window.vueApp.isFormDirty = true;
+          }
+        }
+      }
+    },
     // NOTE: Styles are dynamic, do not save it in $ready().
     $styles(spec) {
       const properties = spec || this.spec;

package/components/panels/carousel.vue

@@ -7,7 +7,7 @@
     :show-arrows-on-hover="$classes().includes('show-arrows-on-hover')"
   >
     <v-carousel-item v-for="(item, i) in spec.childViews" :key="i">
-      <ui-component :spec="item" />
+      <glib-component :spec="item" />
     </v-carousel-item>
   </v-carousel>
 </template>

package/components/panels/flow.vue

@@ -6,7 +6,7 @@
         remaining space on the new line.
       -->
       <div :key="index" :style="innerStyles">
-        <ui-component :spec="item" />
+        <glib-component :spec="item" />
       </div>
     </template>
   </div>

package/components/panels/grid.vue

@@ -2,7 +2,7 @@
   <div :class="$classes()" :style="cssStyles">
     <template v-for="(item, index) in spec.childViews">
       <div :key="index">
-        <ui-component :spec="item" />
+        <glib-component :spec="item" />
       </div>
     </template>
   </div>

package/components/panels/horizontal.vue

@@ -7,7 +7,7 @@
     @click="$onClick()"
   >
     <template v-for="(item, index) in spec.childViews">
-      <ui-component :key="index" :spec="item" />
+      <glib-component :key="index" :spec="item" />
     </template>
   </component>
 </template>

package/components/panels/list.vue

@@ -127,7 +127,8 @@ export default {
           fieldCheckName: `${prefix}[checked]`,
           fieldTitleName: this.spec.fieldTitleName
             ? `${prefix}[${this.spec.fieldTitleName}]`
-            : null
+            : null,
+          fieldCheckValueIf: this.spec.fieldCheckValueIf
         });
       }
       return row;

package/components/panels/scroll.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="cssClasses" :style="cssStyles">
     <!-- <template v-for="(item, index) in spec.childViews">
-      <ui-component :key="`${index}_${item.view}`" :spec="item" />
+      <glib-component :key="`${index}_${item.view}`" :spec="item" />
     </template> -->
     <panels-responsive :spec="spec" />
   </div>

package/components/panels/split.vue

@@ -8,7 +8,7 @@
       <panels-responsive v-if="spec.center" :spec="spec.center" />
     </div>
 
-    <!-- <ui-component :spec="spec.centerView" v-if="spec.centerView" class="panels-split__expand"/>
+    <!-- <glib-component :spec="spec.centerView" v-if="spec.centerView" class="panels-split__expand"/>
     <div class="panels-split__expand" v-else></div> -->
 
     <div v-if="spec.right" class="layouts-split__side layouts-split__right">

package/components/panels/table.vue

@@ -65,7 +65,7 @@
               v-else
               :key="index"
             >
-              <ui-component :spec="cell" />
+              <glib-component :spec="cell" />
             </th>
           </tr>
         </thead>
@@ -84,9 +84,9 @@
                 :style="colStyles(row, cellIndex)"
               >
                 <!-- Prevent double links -->
-                <ui-component v-if="$href(cell)" :spec="cell" />
+                <glib-component v-if="$href(cell)" :spec="cell" />
                 <a v-else :href="$href(row)" @click="$onClick($event, row)">
-                  <ui-component :spec="cell" />
+                  <glib-component :spec="cell" />
                 </a>
               </td>
             </tr>

package/components/panels/ul.vue

@@ -2,7 +2,7 @@
   <ul :style="$styles()" :class="$classes()">
     <!-- Use view name for key to avoid component reuse issue -->
     <li v-for="(item, index) in spec.childViews" :key="`${index}_${item.view}`">
-      <ui-component :spec="item" />
+      <glib-component :spec="item" />
     </li>
   </ul>
 </template>

package/components/panels/vertical.vue

@@ -8,7 +8,7 @@
   >
     <template v-for="(item, index) in spec.childViews">
       <!-- Use view name for key to avoid component reuse issue -->
-      <ui-component :key="`${index}_${item.view}`" :spec="item" />
+      <glib-component :key="`${index}_${item.view}`" :spec="item" />
     </template>
   </component>
 </template>

package/components/shareButton.vue

@@ -115,7 +115,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 a[class^="share-network-"] {
   flex: none;
   color: #ffffff;
@@ -127,8 +127,10 @@ a[class^="share-network-"] {
   align-content: center;
   align-items: center;
   cursor: pointer;
-  margin: 0 10px 10px 0;
   text-decoration: none;
+
+  // Avoid hardcoding styling
+  // margin: 0 10px 10px 0;
 }
 
 a[class^="share-network-"] .fah {

package/index.js

@@ -67,9 +67,6 @@ Vue.component("common-dropdownMenu", CommonDropdownMenu);
 Vue.component("common-responsive", CommonResponsive);
 Vue.component("templates-menu", CommonTemplateMenu);
 
-// TODO: Deprecate
-Vue.component("ui-component", Component);
-
 Vue.component("glib-component", Component);
 Vue.component("glib-icon", CommonIcon);
 Vue.component("glib-panels-responsive", ResponsivePanel);

package/nav/dialog.vue

@@ -61,7 +61,9 @@ export default {
       model: null,
       url: null,
       urlLoaded: false,
-      showClose: false
+      showClose: false,
+      isFormDirty: false,
+      isFormSubmitted: false
     };
   },
   watch: {
@@ -77,14 +79,15 @@ export default {
 
       this.show(false);
       this.stack.push(this);
-      console.log("DIALOG READY1", this.stack.length);
     },
     $tearDown() {
       console.log("Dialog destroyed");
       this.stack.remove(this);
     },
     close() {
-      this.model = false;
+      if (Utils.http.proceedEvenWhenDirty()) {
+        this.model = false;
+      }
     },
     click(spec, event) {
       const onClick = spec["onClick"];
@@ -92,9 +95,11 @@ export default {
       Action.execute(onClick, this);
     },
     reload(newSpec) {
-      this.spec = newSpec;
-      this.urlLoaded = false;
-      this.show(true);
+      if (Utils.http.proceedEvenWhenDirty()) {
+        this.spec = newSpec;
+        this.urlLoaded = false;
+        this.show(true);
+      }
     },
     show(reload) {
       const spec = this.spec;

package/package.json

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

package/templates/thumbnail.vue

@@ -23,11 +23,13 @@
     >
       <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon>
 
-      <v-checkbox
+      <!-- <v-checkbox
         v-if="spec.fieldCheckName"
         :name="spec.fieldCheckName"
         :value="true"
-      ></v-checkbox>
+      ></v-checkbox> -->
+
+      <fields-check v-if="checkSpec" :spec="checkSpec" />
 
       <div v-if="spec.leftButtons" class="left-universal">
         <template v-for="(item, index) in spec.leftButtons">
@@ -96,7 +98,12 @@
 </template>
 
 <script>
+import CheckField from "../components/fields/check";
+
 export default {
+  components: {
+    "fields-check": CheckField
+  },
   props: {
     spec: { type: Object, required: true },
     responsiveCols: { type: Number, default: () => 0 }
@@ -104,7 +111,8 @@ export default {
   data() {
     return {
       accessory: {},
-      editButtons: []
+      editButtons: [],
+      checkSpec: null
       // chips: []
     };
   },
@@ -135,6 +143,15 @@ export default {
     $ready() {
       this.accessory = { childViews: this.spec.accessoryViews };
       this.editButtons = this.spec.editButtons || [];
+
+      if (this.spec.fieldCheckName) {
+        this.checkSpec = {
+          view: "fields/checkGroup",
+          name: this.spec.fieldCheckName,
+          checkValue: true,
+          valueIf: this.spec.fieldCheckValueIf
+        };
+      }
     },
     buttonSpec(item) {
       return Object.assign({}, item, {

package/utils/form.js

@@ -6,6 +6,8 @@ export default class {
   static submitData(form, component) {
     // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
+      // Prevent onUnload dirty prompt.
+      Utils.http.clearDirtyState();
       form.submit();
     } else {
       const url = form.getAttribute("action");
@@ -15,6 +17,7 @@ export default class {
         const data = {
           url: Utils.url.appendParams(url, formData)
         };
+        Utils.http.notifyFormSubmitted();
         Utils.http.load(data, component);
       } else {
         const data = {

package/utils/http.js

@@ -206,32 +206,44 @@ export default class {
 
   // See generic.js
   static forceComponentUpdate(handler) {
+    const dirtyContext = this.dirtyContext();
+
     window.vueApp.isStale = true;
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
     setTimeout(() => {
-      window.vueApp.isFormSubmitted = false;
-      window.vueApp.isFormDirty = false;
+      dirtyContext.isFormSubmitted = false;
+      dirtyContext.isFormDirty = false;
       handler();
       window.vueApp.isStale = false;
     }, 0);
   }
 
   static promptIfDirtyOnUnload() {
-    window.onbeforeunload = function() {
-      return window.vueApp.isFormDirty ? dirtyPrompt : null;
+    window.onbeforeunload = () => {
+      return this.dirtyContext().isFormDirty ? dirtyPrompt : null;
     };
   }
 
+  static dirtyContext() {
+    return Utils.launch.dialog.topDialog() || window.vueApp;
+  }
+
+  static clearDirtyState() {
+    this.dirtyContext().isFormDirty = false;
+  }
+
   static notifyFormSubmitted() {
-    window.vueApp.isFormSubmitted = true;
+    this.dirtyContext().isFormSubmitted = true;
   }
 
+  // `context` can be either window or dialog.
   static proceedEvenWhenDirty() {
+    const dirtyContext = this.dirtyContext();
     // Don't prompt if this is a result of form submission
     if (
-      window.vueApp.isFormDirty &&
-      !window.vueApp.isFormSubmitted &&
+      dirtyContext.isFormDirty &&
+      !dirtyContext.isFormSubmitted &&
       !confirm(dirtyPrompt)
     ) {
       return false;

package/utils/launch.js

@@ -19,6 +19,18 @@ export default class {
 }
 
 class LaunchDialog {
+  static _initStack() {
+    if (!this.stack) {
+      this.stack = [];
+    }
+  }
+
+  static topDialog() {
+    this._initStack();
+
+    return this.stack.last();
+  }
+
   static open(properties, component) {
     if (!this.stack) {
       this.stack = [];