glib-web 0.5.98 → 0.6.2

package/components/fields/checkGroup.vue

@@ -1,58 +1,58 @@
-<template>
-  <div ref="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" />
-    </div>
-  </div>
-</template>
-
-<script>
-import HiddenField from "./hidden";
-
-export default {
-  components: {
-    "fields-hidden": HiddenField
-  },
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      anyChecked: false
-    };
-  },
-  computed: {
-    uncheckSpec() {
-      return { name: this.spec.name, value: this.spec.uncheckValue };
-    }
-  },
-  methods: {
-    $ready() {
-      this.detectChecked();
-      const vm = this;
-      this.$el.addEventListener(
-        "change",
-        function(e) {
-          vm.detectChecked();
-        },
-        false
-      );
-    },
-    detectChecked() {
-      this.anyChecked = false;
-      const vm = this;
-      this.$el
-        .querySelectorAll("input[type=checkbox]")
-        .forEach(function(checkbox) {
-          if (checkbox.checked) {
-            vm.anyChecked = true;
-          }
-        });
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div ref="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" />
+    </div>
+  </div>
+</template>
+
+<script>
+import HiddenField from "./hidden";
+
+export default {
+  components: {
+    "fields-hidden": HiddenField
+  },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      anyChecked: false
+    };
+  },
+  computed: {
+    uncheckSpec() {
+      return { name: this.spec.name, value: this.spec.uncheckValue };
+    }
+  },
+  methods: {
+    $ready() {
+      this.detectChecked();
+      const vm = this;
+      this.$el.addEventListener(
+        "change",
+        function(e) {
+          vm.detectChecked();
+        },
+        false
+      );
+    },
+    detectChecked() {
+      this.anyChecked = false;
+      const vm = this;
+      this.$el
+        .querySelectorAll("input[type=checkbox]")
+        .forEach(function(checkbox) {
+          if (checkbox.checked) {
+            vm.anyChecked = true;
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style scoped></style>

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>

package/components/fields/date.vue

@@ -1,24 +1,24 @@
-<template>
-  <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-  <fields-patternText
-    :spec="spec"
-    :type="spec.type || 'date'"
-    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
-  />
-</template>
-
-<script>
-import PatternTextField from "./_patternText";
-
-export default {
-  components: {
-    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-patternText": PatternTextField
-  },
-  props: {
-    spec: { type: Object, required: true }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
+  <fields-patternText
+    :spec="spec"
+    :type="spec.type || 'date'"
+    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
+  />
+</template>
+
+<script>
+import PatternTextField from "./_patternText";
+
+export default {
+  components: {
+    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
+    "fields-patternText": PatternTextField
+  },
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/fields/location.vue

@@ -1,198 +1,198 @@
-<template>
-  <v-container fluid class="pa-0" :style="$styles()">
-    <!--
-      It's safer to manually implement styling than adding another dependency such as vuetify-google-autocomplete,
-      which behaves differently and needs to be actively maintained.
-    -->
-    <div
-      class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined"
-    >
-      <div class="v-input__control">
-        <div class="v-input__slot">
-          <fieldset aria-hidden="true">
-            <legend :style="`width: ${labelWidth}px;`"><span>​</span></legend>
-          </fieldset>
-          <div class="v-text-field__slot">
-            <label
-              ref="label"
-              class="v-label v-label--active theme--light"
-              style="left: 0px; right: auto; position: absolute; font-size: 16px;"
-              >{{ spec.label }}</label
-            >
-            <!-- See https://developers.google.com/places/web-service/autocomplete#place_types for autocompleteOptions -->
-            <gmap-autocomplete
-              :name="spec.name"
-              :placeholder="spec.placeholder"
-              :value="address"
-              :options="spec.autocompleteOptions"
-              @input="onAddressChanged"
-              @place_changed="onPlaceChanged"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <gmap-map
-      ref="map"
-      :center="{ lat: 0, lng: 0 }"
-      :zoom="13"
-      class="mt-3 mb-3 map"
-      map-type-id="roadmap"
-      :style="mapStyles"
-      @idle="onActionCompleted"
-    >
-      <gmap-marker
-        :position="markerPos"
-        :clickable="true"
-        :draggable="true"
-        @drag="onDrag"
-        @dragend="onDrag"
-      />
-    </gmap-map>
-    <ui-component
-      v-if="latitudeField"
-      ref="latitudeView"
-      :spec="latitudeField"
-    />
-    <ui-component
-      v-if="longitudeField"
-      ref="longitudeView"
-      :spec="longitudeField"
-    />
-    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
-  </v-container>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      infoOptions: {
-        pixelOffset: {
-          width: 0,
-          height: -35
-        }
-      },
-      // markerPos: { lat: null, lng: null },
-      address: null,
-      longitude: null,
-      latitude: null,
-      longitudeField: null,
-      latitudeField: null,
-      zoomField: null,
-      longitudeView: null,
-      latitudeView: null,
-      zoomView: null,
-      labelWidth: 0
-    };
-  },
-  computed: {
-    markerPos() {
-      return { lat: this.latitude || 0, lng: this.longitude || 0 };
-    },
-    mapStyles() {
-      return this.longitude != null && this.latitude != null
-        ? {
-            display: "block"
-          }
-        : { display: "none" };
-    }
-  },
-  methods: {
-    $ready() {
-      this.address = this.spec.value;
-      this.longitudeField = this.spec.longitudeField;
-      this.latitudeField = this.spec.latitudeField;
-      this.zoomField = this.spec.zoomField;
-
-      this.centerInitial();
-
-      setTimeout(() => {
-        this.latitudeView = this.$refs.latitudeView.$children[0];
-        this.longitudeView = this.$refs.longitudeView.$children[0];
-
-        if (this.$refs.zoomView) {
-          this.zoomView = this.$refs.zoomView.$children[0];
-        }
-
-        const labelView = this.$refs.label;
-        this.labelWidth = labelView.getBoundingClientRect().width + 6;
-      });
-    },
-    centerInitial() {
-      const latitudeValue = Utils.type.floatValue(this.latitudeField.value);
-      const longitudeValue = Utils.type.floatValue(this.longitudeField.value);
-
-      if (latitudeValue !== 0 && longitudeValue !== 0) {
-        this.setLocation(latitudeValue, longitudeValue, true);
-
-        // Avoid asking for user location right away for now
-        // } else {
-        //   navigator.geolocation.getCurrentPosition(position => {
-        //     const coordinate = position.coords;
-        //     this.setLocation(coordinate.latitude, coordinate.longitude, false);
-        //   });
-      }
-    },
-    setLocation(latitudeValue, longitudeValue, dropPin) {
-      this.$refs.map.$gmapApiPromiseLazy().then(() => {
-        // eslint-disable-next-line no-undef
-        const location = new google.maps.LatLng(latitudeValue, longitudeValue);
-        this.$refs.map.$mapObject.setCenter(location);
-
-        if (dropPin) {
-          this.setMarkerPosition(location);
-        }
-      });
-    },
-    setMarkerPosition(location) {
-      this.latitude = location.lat();
-      this.longitude = location.lng();
-
-      this.latitudeView.fieldModel = location.lat();
-      this.longitudeView.fieldModel = location.lng();
-    },
-    onPlaceChanged(place) {
-      this.address = place.formatted_address;
-
-      const location = place.geometry.location;
-      this.setMarkerPosition(location);
-      this.$refs.map.$mapObject.setCenter(location);
-    },
-    onDrag(e) {
-      this.setMarkerPosition(e.latLng);
-    },
-    onActionCompleted() {
-      if (this.zoomView) {
-        this.zoomView.fieldModel = this.$refs.map.$mapObject.zoom;
-      }
-    },
-    onAddressChanged(e) {
-      this.address = e.target.value;
-      if (this.address === "") {
-        this.address = null;
-        this.longitude = null;
-        this.latitude = null;
-
-        this.latitudeView.fieldModel = null;
-        this.longitudeView.fieldModel = null;
-      }
-    },
-    // Override
-    $displayValue() {
-      return "block";
-    }
-  }
-};
-</script>
-
-<style scoped>
-.map {
-  width: 100%;
-  height: 300px;
-}
-</style>
+<template>
+  <v-container fluid class="pa-0" :style="$styles()">
+    <!--
+      It's safer to manually implement styling than adding another dependency such as vuetify-google-autocomplete,
+      which behaves differently and needs to be actively maintained.
+    -->
+    <div
+      class="v-input theme--light v-text-field v-text-field--enclosed v-text-field--outlined"
+    >
+      <div class="v-input__control">
+        <div class="v-input__slot">
+          <fieldset aria-hidden="true">
+            <legend :style="`width: ${labelWidth}px;`"><span>​</span></legend>
+          </fieldset>
+          <div class="v-text-field__slot">
+            <label
+              ref="label"
+              class="v-label v-label--active theme--light"
+              style="left: 0px; right: auto; position: absolute; font-size: 16px;"
+              >{{ spec.label }}</label
+            >
+            <!-- See https://developers.google.com/places/web-service/autocomplete#place_types for autocompleteOptions -->
+            <gmap-autocomplete
+              :name="spec.name"
+              :placeholder="spec.placeholder"
+              :value="address"
+              :options="spec.autocompleteOptions"
+              @input="onAddressChanged"
+              @place_changed="onPlaceChanged"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <gmap-map
+      ref="map"
+      :center="{ lat: 0, lng: 0 }"
+      :zoom="13"
+      class="mt-3 mb-3 map"
+      map-type-id="roadmap"
+      :style="mapStyles"
+      @idle="onActionCompleted"
+    >
+      <gmap-marker
+        :position="markerPos"
+        :clickable="true"
+        :draggable="true"
+        @drag="onDrag"
+        @dragend="onDrag"
+      />
+    </gmap-map>
+    <ui-component
+      v-if="latitudeField"
+      ref="latitudeView"
+      :spec="latitudeField"
+    />
+    <ui-component
+      v-if="longitudeField"
+      ref="longitudeView"
+      :spec="longitudeField"
+    />
+    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
+  </v-container>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      infoOptions: {
+        pixelOffset: {
+          width: 0,
+          height: -35
+        }
+      },
+      // markerPos: { lat: null, lng: null },
+      address: null,
+      longitude: null,
+      latitude: null,
+      longitudeField: null,
+      latitudeField: null,
+      zoomField: null,
+      longitudeView: null,
+      latitudeView: null,
+      zoomView: null,
+      labelWidth: 0
+    };
+  },
+  computed: {
+    markerPos() {
+      return { lat: this.latitude || 0, lng: this.longitude || 0 };
+    },
+    mapStyles() {
+      return this.longitude != null && this.latitude != null
+        ? {
+            display: "block"
+          }
+        : { display: "none" };
+    }
+  },
+  methods: {
+    $ready() {
+      this.address = this.spec.value;
+      this.longitudeField = this.spec.longitudeField;
+      this.latitudeField = this.spec.latitudeField;
+      this.zoomField = this.spec.zoomField;
+
+      this.centerInitial();
+
+      setTimeout(() => {
+        this.latitudeView = this.$refs.latitudeView.$children[0];
+        this.longitudeView = this.$refs.longitudeView.$children[0];
+
+        if (this.$refs.zoomView) {
+          this.zoomView = this.$refs.zoomView.$children[0];
+        }
+
+        const labelView = this.$refs.label;
+        this.labelWidth = labelView.getBoundingClientRect().width + 6;
+      });
+    },
+    centerInitial() {
+      const latitudeValue = Utils.type.floatValue(this.latitudeField.value);
+      const longitudeValue = Utils.type.floatValue(this.longitudeField.value);
+
+      if (latitudeValue !== 0 && longitudeValue !== 0) {
+        this.setLocation(latitudeValue, longitudeValue, true);
+
+        // Avoid asking for user location right away for now
+        // } else {
+        //   navigator.geolocation.getCurrentPosition(position => {
+        //     const coordinate = position.coords;
+        //     this.setLocation(coordinate.latitude, coordinate.longitude, false);
+        //   });
+      }
+    },
+    setLocation(latitudeValue, longitudeValue, dropPin) {
+      this.$refs.map.$gmapApiPromiseLazy().then(() => {
+        // eslint-disable-next-line no-undef
+        const location = new google.maps.LatLng(latitudeValue, longitudeValue);
+        this.$refs.map.$mapObject.setCenter(location);
+
+        if (dropPin) {
+          this.setMarkerPosition(location);
+        }
+      });
+    },
+    setMarkerPosition(location) {
+      this.latitude = location.lat();
+      this.longitude = location.lng();
+
+      this.latitudeView.fieldModel = location.lat();
+      this.longitudeView.fieldModel = location.lng();
+    },
+    onPlaceChanged(place) {
+      this.address = place.formatted_address;
+
+      const location = place.geometry.location;
+      this.setMarkerPosition(location);
+      this.$refs.map.$mapObject.setCenter(location);
+    },
+    onDrag(e) {
+      this.setMarkerPosition(e.latLng);
+    },
+    onActionCompleted() {
+      if (this.zoomView) {
+        this.zoomView.fieldModel = this.$refs.map.$mapObject.zoom;
+      }
+    },
+    onAddressChanged(e) {
+      this.address = e.target.value;
+      if (this.address === "") {
+        this.address = null;
+        this.longitude = null;
+        this.latitude = null;
+
+        this.latitudeView.fieldModel = null;
+        this.longitudeView.fieldModel = null;
+      }
+    },
+    // Override
+    $displayValue() {
+      return "block";
+    }
+  }
+};
+</script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 300px;
+}
+</style>