glib-web 1.0.0 → 2.1.0

package/actions/forms/submit.js

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

package/components/fields/_patternText.vue

@@ -13,6 +13,7 @@
       :min="$sanitizeValue(spec.min)"
       :max="$sanitizeValue(spec.max)"
       :pattern="pattern"
+      :rules="$validation()"
       :outlined="$classes().includes('outlined')"
       :style="$styles()"
       clearable

package/components/fields/richText.vue

@@ -5,7 +5,7 @@
       v-model="rawValue"
       :editor-toolbar="customToolbar"
       use-custom-image-handler
-      @text-change="separateOutImages"
+      @text-change="onChange"
       @image-added="uploadImage"
     />
     <input type="hidden" :name="spec.name" :value="produceValue" />
@@ -127,6 +127,22 @@ export default {
         });
       }
     },
+    onChange() {
+      this.separateOutImages();
+
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          const params = {
+            [this.spec.paramNameForFormData || "formData"]: {
+              [this.fieldName]: this.fieldModel
+            }
+          };
+
+          const data = Object.assign({}, onChange, params);
+          GLib.action.execute(data, this);
+        });
+      });
+    },
     separateOutImages: function() {
       const vm = this;
       var index = 0;

package/components/map.vue

@@ -39,26 +39,35 @@
         :clickable="true"
         :title="String(marker.clusterSize || 1)"
         @click="onMarkerClick(marker, index)"
-      ></gmap-marker>
+      >
+      </gmap-marker>
     </gmap-cluster>
     <template v-else>
-      <gmap-marker
+      <gmap-custom-marker
         v-for="(marker, index) in markers"
         :key="index"
-        :position="{ lat: marker.latitude, lng: marker.longitude }"
-        :clickable="true"
-        @click="onMarkerClick(marker, index)"
-      ></gmap-marker>
+        :marker="{ lat: marker.latitude, lng: marker.longitude }"
+        @click.native="onMarkerClick(marker, index)"
+      >
+        <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+        <common-icon
+          v-else
+          class="marker"
+          :spec="{ material: { name: 'place', size: 40 }, color: '#c92b2a' }"
+        />
+      </gmap-custom-marker>
     </template>
   </gmap-map>
 </template>
 
 <script>
 import GmapCluster from "vue2-google-maps/dist/components/cluster";
+import GmapCustomMarker from "vue2-gmap-custom-marker";
 
 export default {
   components: {
-    "gmap-cluster": GmapCluster
+    "gmap-cluster": GmapCluster,
+    "gmap-custom-marker": GmapCustomMarker
   },
   props: {
     spec: { type: Object, required: true }
@@ -204,3 +213,11 @@ export default {
   // }
 };
 </script>
+
+<style lang="scss" scoped>
+.marker {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+</style>

package/components/mixins/styles.js

@@ -202,7 +202,10 @@ export default {
         // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
         // may be used without a form.
         this.fieldName = this.spec.name;
-        this.fieldModel = this._sanitizeValue(this.spec.value);
+        // Don't initialize fieldModel unnecessarily because this will trigger validations on page load
+        if (this.spec.value) {
+          this.fieldModel = this._sanitizeValue(this.spec.value);
+        }
       }
     },
     $classes(spec) {

package/components/panels/form.vue

@@ -64,7 +64,7 @@ export default {
       });
 
       this.$onEvent("forms/directSubmit", e => {
-        this.directSubmit();
+        this.directSubmit(e.data.url);
       });
     },
     $ready() {
@@ -117,10 +117,14 @@ export default {
         );
       });
     },
-    directSubmit() {
-      this.validate(() => {
-        GLib.form.submitData(this.formElement, this);
-      });
+    directSubmit(overrideUrl = null) {
+      if (overrideUrl) {
+        GLib.form.submitData(this.formElement, this, overrideUrl);
+      } else {
+        this.validate(() => {
+          GLib.form.submitData(this.formElement, this);
+        });
+      }
     },
     validate(onPassed) {
       if (this.$refs.form.validate()) {

package/components/panels/timeline.vue

@@ -1,42 +1,32 @@
 <template>
   <v-container :class="$classes()">
-    <v-timeline v-if="items" dense align-top>
+    <v-timeline v-if="events" dense align-top>
       <v-timeline-item
-        v-for="(item, item_key) in items"
-        :key="item_key"
+        v-for="(item, index) in events"
+        :key="index"
         color="white"
         fill-dot
         :small="$classes().includes('small')"
         :large="$classes().includes('large')"
-        :class="timelineItemClasses(item)"
+        class="my-6"
         :hide-dot="item.hide_dot"
       >
         <template v-slot:icon>
-          <div
-            :class="$classes().includes('outlined') ? 'outlined-dots' : ''"
-            :style="`border-color: ${dotColor(item)};`"
-          >
-            <div v-if="item.left_label" class="number-circle">
-              {{ item.left_label }}
+          <div :class="$classes().includes('outlined') ? 'outlined-dots' : ''">
+            <div v-if="item.label" class="number-circle">
+              {{ item.label }}
+            </div>
+            <div v-else class="icon">
+              <common-icon
+                :spec="{
+                  material: { name: item.icon, size: iconSize() },
+                  color: item.color
+                }"
+              />
             </div>
-            <!-- TODO: Use common-icon -->
-            <v-icon v-else size="24" :color="dotColor(item)">
-              {{ dotIcon(item) }}
-            </v-icon>
           </div>
         </template>
-
-        <div :class="item.subtitle ? 'mt-5' : 'mt-2'" class="content">
-          <div
-            :class="item.active ? 'font-weight-bold' : 'font-weight-regular'"
-          >
-            {{ item.label }}
-          </div>
-          <div class="font-weight-regular">
-            {{ item.subtitle }}
-          </div>
-          <panels-responsive v-if="item.active" :spec="spec" />
-        </div>
+        <panels-responsive :spec="{ childViews: [childViews[index]] }" />
       </v-timeline-item>
     </v-timeline>
   </v-container>
@@ -49,32 +39,17 @@ export default {
   },
   data() {
     return {
-      items: this.spec.items,
-      uncompletedIcon: this.spec.uncompletedIcon || "check_circle",
-      completedIcon: this.spec.completedIcon || "radio_button_unchecked",
-      completedColor: this.spec.completedColor || "blue",
-      uncompletedColor: this.spec.uncompletedColor || "grey"
+      events: null,
+      childViews: null
     };
   },
   methods: {
-    timelineItemClasses(item) {
-      let classes = !item.completed && !item.active ? "uncompleted" : "";
-
-      if (!this.$classes().includes("small")) {
-        classes += " my-6";
-      }
-
-      return classes;
-    },
-    dotColor(item) {
-      return !item.completed && !item.active
-        ? this.uncompletedColor
-        : this.completedColor;
+    $ready() {
+      this.events = this.spec.events;
+      this.childViews = this.spec.childViews;
     },
-    dotIcon(item) {
-      return item.active || item.completed
-        ? item.uncompletedIcon || this.uncompletedIcon
-        : item.completedIcon || this.completedIcon
+    iconSize() {
+      return this.$classes().includes("small") ? 16 : 24;
     }
   }
 };
@@ -84,18 +59,12 @@ export default {
 .v-timeline {
   padding-top: 0px;
 }
-
 .v-timeline-item {
   padding-bottom: 0px !important;
 }
 .container {
   padding-top: 0px;
 }
-.small {
-  > .number-circle {
-    font-size: 14px;
-  }
-}
 .outlined-dots {
   border-radius: 50%;
   width: 100%;
@@ -111,4 +80,18 @@ export default {
     box-shadow: none;
   }
 }
+.icon {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+// Size variations
+.number-circle {
+  font-size: 16px;
+}
+.small {
+  .number-circle {
+    font-size: 14px;
+  }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "vue-youtube": "^1.4.0",
     "vue2-editor": "^2.9.1",
     "vue2-google-maps": "^0.10.6",
+    "vue2-gmap-custom-marker": "^6.1.1",
     "vuedraggable": "^2.24.1",
     "vuetify": "2.3.9"
   },

package/utils/form.js

@@ -3,14 +3,14 @@ export default class {
   // Button -> Button.onClick() -> Utils.http.execute() -- doesn't save autofill values
   // Button -> Button.onClick() -> form.submit() -- doesn't execute Form.onSubmit(), so cannot call Utils.http.execute() there
   // Submit -> Form.onSubmit() -> Utils.http.execute() -- save autofill values and auto-submit when ENTER is pressed
-  static submitData(form, component) {
+  static submitData(form, component, overrideUrl = null) {
     // 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");
+      const url = overrideUrl ? overrideUrl : form.getAttribute("action");
       const formData = new FormData(form);
       const method = form.getAttribute("method");
       if (method.toUpperCase() === "GET") {