glib-web 2.6.7 → 3.0.0

package/components/fields/select.vue

@@ -1,21 +1,24 @@
 <template>
-  <fields-genericSelect ref="delegate" :spec="updatedSpec" />
+  <fields-genericSelect
+    ref="delegate"
+    :spec="updatedSpec"
+  />
 </template>
 
 <script>
-import SelectField from "./_select";
+import SelectField from "./_select.vue";
 
 export default {
   components: {
     // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-genericSelect": SelectField
+    "fields-genericSelect": SelectField,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      updatedSpec: this.spec
+      updatedSpec: this.spec,
     };
   },
   methods: {
@@ -25,7 +28,7 @@ export default {
     action_merge(mergedSpec) {
       Object.assign(this.updatedSpec, mergedSpec);
       this.$refs.delegate.updateData(true);
-    }
-  }
+    },
+  },
 };
 </script>

package/components/fields/stripe/stripeFields.vue

@@ -7,6 +7,9 @@
 </template>
 
 <script>
+
+import { vueApp } from '../../../store';
+
 export default {
   props: {
     spec: { type: Object, required: true },
@@ -22,11 +25,12 @@ export default {
   data() {
     return {
       stripe: null,
-      card: null
+      card: null,
+      vueApp
     };
   },
   watch: {
-    "$root.vueApp.stateUpdatedAt": function(val, oldVal) {
+    "vueApp.stateUpdatedAt": function (val, oldVal) {
       this.onComplete(this.stripe, this.card);
     }
   },
@@ -77,14 +81,17 @@ export default {
     -webkit-transition: box-shadow 150ms ease;
     transition: box-shadow 150ms ease;
   }
+
   .StripeElement:hover {
     border-color: #000000;
     cursor: text;
   }
+
   .StripeElement--focus {
     border-color: #1976d2;
     border-width: 2px;
   }
+
   .StripeElement--invalid {
     border-color: #f44336;
     border-width: 2px;

package/components/fields/stripe/stripeIndividualFields.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script>
+import { vueApp } from '../../../store';
 export default {
   props: {
     spec: { type: Object, required: true },
@@ -47,11 +48,12 @@ export default {
     return {
       stripe: null,
       card: null,
-      errorMessages: []
+      errorMessages: [],
+      vueApp
     };
   },
   watch: {
-    "$root.vueApp.stateUpdatedAt": function(val, oldVal) {
+    "vueApp.stateUpdatedAt": function (val, oldVal) {
       this.onComplete(this.stripe, this.card);
     }
   },
@@ -144,24 +146,24 @@ export default {
     width: 100%;
   }
 
-  .input.StripeElement--focus + label {
+  .input.StripeElement--focus+label {
     color: #1976d2 !important;
   }
 
-  .input.StripeElement--invalid + label {
+  .input.StripeElement--invalid+label {
     color: #f44336 !important;
   }
 
-  .input:hover + label + .baseline {
+  .input:hover+label+.baseline {
     border-color: #000000;
   }
 
-  .input.StripeElement--focus + label + .baseline {
+  .input.StripeElement--focus+label+.baseline {
     border-color: #1976d2;
     border-width: 2px;
   }
 
-  .input.StripeElement--invalid + label + .baseline {
+  .input.StripeElement--invalid+label+.baseline {
     border-color: #f44336;
     border-width: 2px;
   }

package/components/fields/stripeExternalAccount.vue

@@ -1,29 +1,15 @@
 <template>
   <div :style="genericStyles()" :class="$classes()">
-    <v-text-field
-      v-model="accountNumber"
-      label="Account Number"
-      placeholder="000123456"
-      :outlined="$classes().includes('outlined')"
-      :rounded="$classes().includes('rounded')"
-      :dense="$classes().includes('dense')"
-      :rules="accountNumberRules"
-      :error-messages="errorMessages"
-      @keyup="$onTyping({ duration: 200 })"
-    />
+    <v-text-field v-model="accountNumber" label="Account Number" placeholder="000123456"
+      :outlined="$classes().includes('outlined') || null" :rounded="$classes().includes('rounded')"
+      :dense="$classes().includes('dense') || null" :rules="accountNumberRules" :error-messages="errorMessages"
+      @keyup="$onTyping({ duration: 200 })" />
 
     <div v-if="spec.country">
       <div v-for="field in inputs[country].fields" :key="field.label">
-        <v-text-field
-          v-model="field.model"
-          :label="field.label"
-          :placeholder="field.placeholder"
-          :outlined="$classes().includes('outlined')"
-          :rounded="$classes().includes('rounded')"
-          :dense="$classes().includes('dense')"
-          :rules="field.rules"
-          @keyup="$onTyping({ duration: 200 })"
-        />
+        <v-text-field v-model="field.model" :label="field.label" :placeholder="field.placeholder"
+          :outlined="$classes().includes('outlined') || null" :rounded="$classes().includes('rounded')"
+          :dense="$classes().includes('dense') || null" :rules="field.rules" @keyup="$onTyping({ duration: 200 })" />
       </div>
     </div>
 
@@ -48,7 +34,7 @@ export default {
     this.country = this.spec.country.toLowerCase();
     this.stripe = Stripe(this.spec.publicKey);
     this.spec.onTypeEnd = { action: "component/createToken" };
-    this.registerCountry("nz", [], function() {
+    this.registerCountry("nz", [], function () {
       return "";
     });
     this.registerCountry(
@@ -61,7 +47,7 @@ export default {
           rules: [value => !!value || "Bank state number required"]
         }
       ],
-      function() {
+      function () {
         return this.fields[0].model;
       }
     );
@@ -81,7 +67,7 @@ export default {
           rules: [value => !!value || "Institution number required"]
         }
       ],
-      function() {
+      function () {
         return `${this.fields[0].model}-${this.fields[1].model}`;
       }
     );

package/components/fields/text.vue

@@ -1,58 +1,35 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-text-field
-      ref="field"
-      v-model="fieldModel"
-      :label="spec.label"
-      :name="fieldName"
-      :value="spec.value"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :maxlength="spec.maxLength || 255"
-      :disabled="spec.readOnly"
-      :type="variant.type"
-      :rules="rules"
-      :prepend-inner-icon="leftIconName"
-      :append-icon="rightIconName || variant.appendIcon"
-      :prefix="spec.leftText"
-      :suffix="spec.rightText"
-      :min="spec.min"
-      :max="spec.max"
-      :outlined="$classes().includes('outlined')"
-      :rounded="$classes().includes('rounded')"
-      :dense="$classes().includes('dense')"
-      :autofocus="spec.autoFocus || false"
-      validate-on-blur
-      v-on="onRightIconClick ? { 'click:append': onRightIconClick } : null"
-      @input="onChange"
-    />
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="fieldModel"
-    />
+    <v-text-field v-model="fieldModel" :label="spec.label" :name="fieldName" :placeholder="spec.placeholder"
+      :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :type="config.type" :rules="rules"
+      :prepend-inner-icon="leftIconName" :append-inner-icon="config.appendIcon" :prefix="spec.leftText"
+      :suffix="spec.rightText" :min="spec.min" :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur"
+      @click:appendInner="onRightIconClick" @input="onChange" :variant="variant" persistent-placeholder />
+    <input v-if="spec.readOnly" type="hidden" :name="fieldName" />
+
   </div>
 </template>
 
 <script>
 import eventFiltering from "../../utils/eventFiltering";
+import inputVariant from "../mixins/inputVariant";
 
 export default {
+  mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },
     type: { type: String, required: true }
   },
   data() {
     return {
-      variant: {},
+      config: {},
       rules: [],
       onRightIconClick: null,
       fields: {
         email: {
           type: "email",
           prependIcon: "email",
-          onRightIconClick: function() {},
+          onRightIconClick: function () { },
           rules: [
             v =>
               !v ||
@@ -63,14 +40,14 @@ export default {
         number: {
           type: "number",
           prependIcon: "looks_one",
-          onRightIconClick: function() {},
+          onRightIconClick: function () { },
           rules: [v => !v || /^\-?[.\d]*$/.test(v) || "Must be a number"]
         },
         password: {
           type: "password",
           prependIcon: "lock",
           appendIcon: "visibility",
-          onRightIconClick: function(vm) {
+          onRightIconClick: function (vm) {
             vm.togglePasswordVisibility();
           },
           rules: [v => !v || v.length >= 6 || "Password must be longer"]
@@ -78,7 +55,7 @@ export default {
         url: {
           type: "url",
           prependIcon: "web",
-          onRightIconClick: function() {},
+          onRightIconClick: function () { },
           rules: [
             // From https://gist.github.com/rodneyrehm/8013067
             // Make sure to support unicode chars, e.g. https://www.facebook.com/%E5%86%B0%E5%8F%8B%E4%BE%86%E7%9C%8B%E7%90%83-103474391161721/
@@ -93,7 +70,7 @@ export default {
         search: {
           type: "url",
           prependIcon: "search",
-          onRightIconClick: function() {},
+          onRightIconClick: function () { },
           rules: [
             v => !v || /^\w+:\/\/[.-\w]+$/.test(v) || "Must be a valid URL"
           ]
@@ -115,12 +92,13 @@ export default {
   },
   methods: {
     $ready() {
-      this.variant = this.fields[this.type] || {};
-      this.rules = this.$validation(this.variant.rules);
+      this.fieldModel = this.spec.value
+      this.config = this.fields[this.type] || {};
+      this.rules = this.$validation(this.config.rules);
 
-      if (this.variant.onRightIconClick) {
+      if (this.config.onRightIconClick) {
         this.onRightIconClick = () => {
-          this.variant.onRightIconClick(this);
+          this.config.onRightIconClick(this);
         };
       }
     },
@@ -140,7 +118,7 @@ export default {
     action_focus() {
       this.$refs.field.focus();
     },
-    onChange: eventFiltering.debounce(function() {
+    onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
     }, 300)
   }
@@ -149,14 +127,12 @@ export default {
 
 <style lang="scss">
 .g-text-field--hintless {
-  .v-text-field {
-    .v-text-field__details {
-      min-height: 0;
-      margin-bottom: 0;
+  .v-input__details {
+    min-height: 0;
+    margin-bottom: 0;
 
-      .v-messages {
-        min-height: 0;
-      }
+    .v-messages {
+      min-height: 0;
     }
   }
 }

package/components/fields/textarea.vue

@@ -1,46 +1,32 @@
 <template>
   <div :style="styles()" :class="classes()">
-    <v-textarea
-      v-model="fieldModel"
-      :label="spec.label"
-      :name="fieldName"
-      :value="spec.value"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :maxlength="spec.maxLength || 255"
-      :disabled="spec.readOnly"
-      :height="height"
-      :rules="$validation()"
-      counter
-      :outlined="$classes().includes('outlined')"
-      :no-resize="$classes().includes('no-resize')"
-      validate-on-blur
-      @keyup="$onTyping"
-      @input="onChange"
-    ></v-textarea>
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="spec.value"
-    />
+    <v-textarea v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
+      :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :height="height"
+      :rules="$validation()" counter :outlined="$classes().includes('outlined')"
+      :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant"></v-textarea>
+    <input v-if="spec.readOnly" type="hidden" :name="fieldName" :value="fieldModel" />
   </div>
 </template>
 
 <script>
 import eventFiltering from "../../utils/eventFiltering";
+import inputVariant from "../mixins/inputVariant";
 
 export default {
+  mixins: [inputVariant],
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
       // styles: null,
-      height: null
+      height: null,
     };
   },
   methods: {
+    $ready() {
+      this.fieldModel = this.spec.value;
+    },
     styles() {
       const styles = this.$styles();
       this.height = styles.remove("height");
@@ -49,7 +35,7 @@ export default {
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
-    onChange: eventFiltering.debounce(function() {
+    onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
     }, 300)
   }
@@ -60,6 +46,7 @@ export default {
 .v-text-field__details {
   margin-top: 2px;
 }
+
 .text-bold {
   font-weight: bold;
 }

package/components/fields/timeZone.vue

@@ -1,22 +1,25 @@
 <template>
-  <fields-genericSelect :spec="spec" :default-value="defaultValue" />
+  <fields-genericSelect
+    :spec="spec"
+    :default-value="defaultValue"
+  />
 </template>
 
 <script>
-import SelectField from "./_select";
+import SelectField from "./_select.vue";
 
 export default {
   components: {
     // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-genericSelect": SelectField
+    "fields-genericSelect": SelectField,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   computed: {
     defaultValue() {
       return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    }
-  }
+    },
+  },
 };
 </script>

package/components/fields/timer.vue

@@ -22,16 +22,9 @@
         </v-row>
       </div>
     </div>
-    <v-text-field
-      v-else
-      v-model="fieldModel"
-      :label="spec.label"
-      :name="fieldName"
-      :disabled="true"
-      :outlined="$classes().includes('outlined')"
-      :rounded="$classes().includes('rounded')"
-      :dense="$classes().includes('dense')"
-    />
+    <v-text-field v-else v-model="fieldModel" :label="spec.label" :name="fieldName" :disabled="true"
+      :outlined="$classes().includes('outlined') || null" :rounded="$classes().includes('rounded')"
+      :dense="$classes().includes('dense') || null" />
     <input type="hidden" :name="fieldName" :value="fieldModel" />
   </div>
 </template>
@@ -108,9 +101,10 @@ export default {
       }
     },
     $tearDown() {
+      console.log("Cleaning up timer...");
       if (this.timer != null) {
         clearInterval(this.timer);
-        console.debug(`Timer stopped: ${this.timer}`);
+        console.log(`Timer stopped: ${this.timer}`);
         this.timer == null;
       }
     },

package/components/image.vue

@@ -1,33 +1,20 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-badge :spec="spec">
-        <!-- TODO: Add support for href and :rel="$rel()" -->
-        <v-img
-          :src="spec.url || spec.base64Data"
-          :style="styles"
-          @click="$onClick()"
-          v-on="on"
-        >
-          <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
-        </v-img>
-      </common-badge>
-    </template>
-  </common-tooltip>
+  <v-img :eager="true" :src="spec.url || spec.base64Data" @click="$onClick()" :style="styles" :class="$classes()"
+    :max-width="width" :max-height="height" cover>
+  </v-img>
 </template>
 
 <script>
-import Vue from "vue";
-// import TooltipMixins from "./mixins/tooltip";
 
 export default {
-  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      styles: {}
+      styles: {},
+      height: null,
+      width: null
     };
   },
   methods: {
@@ -71,8 +58,9 @@ export default {
         }
       }
 
-      Vue.set(this.styles, "width", width);
-      Vue.set(this.styles, "height", height);
+      Object.assign(this.styles, { width, height });
+      this.width = width
+      this.height = height
     },
     fitCrop(image) {
       let width, height;
@@ -85,8 +73,9 @@ export default {
         height = `${this.spec.height}px`;
       }
 
-      Vue.set(this.styles, "width", width);
-      Vue.set(this.styles, "height", height);
+      Object.assign(this.styles, { width, height });
+      this.width = width
+      this.height = height
     }
   }
 };

package/components/label.vue

@@ -1,13 +1,6 @@
 <template>
-  <a
-    v-if="spec.onClick"
-    :href="$href()"
-    :rel="$rel()"
-    :style="textStyles()"
-    :class="$classes()"
-    @click="$onClick()"
-    >{{ text }}</a
-  >
+  <a v-if="spec.onClick" :href="$href()" :rel="$rel()" :style="textStyles()" :class="$classes()" @click="$onClick()">{{
+    text }}</a>
   <span v-else :style="$styles()" :class="$classes()">{{ text }}</span>
 </template>
 
@@ -20,7 +13,7 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       text: " "
     };
@@ -31,14 +24,10 @@ export default {
 
       this.text = this.spec.text;
     },
-    // action_set(spec) {
-    //   if (spec.user_id !== spec.filterKey) {
-    //     this.text = spec.text;
-    //   }
-    // },
-    action_merge(mergedSpec) {
-      Object.assign(this.spec, mergedSpec);
-      this.$ready();
+    action_set(spec) {
+      if (spec.user_id !== spec.filterKey) {
+        this.text = spec.text;
+      }
     }
   }
 };
@@ -54,12 +43,15 @@ a {
   display: inline-block;
   line-height: 1;
 }
+
 span.muted {
   opacity: 0.7;
 }
+
 span.small {
   font-size: 80%;
 }
+
 a:hover {
   text-decoration: none;
 }