glib-web 2.4.1 → 3.0.0-beta1

package/components/fields/newRichText.vue

@@ -1,8 +1,18 @@
 <template>
   <div style="width: 100%;">
-    <v-progress-linear v-if="showProgress" v-model="progress.value" />
-    <textarea id="editor" class="entry"></textarea>
-    <input type="hidden" :name="spec.name" :value="cleanValue" />
+    <v-progress-linear
+      v-if="showProgress"
+      v-model="progress.value"
+    />
+    <textarea
+      id="editor"
+      class="entry"
+    ></textarea>
+    <input
+      type="hidden"
+      :name="spec.name"
+      :value="cleanValue"
+    />
     <input
       v-for="(imageKey, index) in imageKeys"
       :key="index"
@@ -14,7 +24,10 @@
     <p>{{ cleanValue }}</p>
 
     <ol>
-      <li v-for="(imageKey, index) in imageKeys" :key="index">
+      <li
+        v-for="(imageKey, index) in imageKeys"
+        :key="index"
+      >
         {{ images[imageKey] }} -- {{ imageKey }}
       </li>
     </ol>
@@ -23,7 +36,7 @@
 
 <script>
 import Uploader from "../../utils/uploader";
-import RedactorX from "../../static/redactorx";
+// import RedactorX from "../../static/redactorx";
 import "../../static/redactorx.css";
 import "../../static/plugins/icons/icons";
 import "../../static/plugins/inlineformat/inlineformat";
@@ -35,8 +48,8 @@ export default {
   props: {
     spec: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
   data() {
     return {
@@ -44,13 +57,13 @@ export default {
       cleanValue: "",
       progress: { value: -1 },
       images: {},
-      imageKeys: []
+      imageKeys: [],
     };
   },
   computed: {
-    showProgress: function() {
+    showProgress: function () {
       return this.progress.value >= 0;
-    }
+    },
   },
   methods: {
     $ready() {
@@ -60,26 +73,26 @@ export default {
     initValue() {
       let rawValue = this.spec.value || "";
 
-      Utils.type.ifArray(this.spec.images, images => {
+      Utils.type.ifArray(this.spec.images, (images) => {
         const vm = this;
-        rawValue = rawValue.replace(/\{\{image([0-9]+)\}\}/g, function(
-          _,
-          index
-        ) {
-          const image = images[index - 1];
-          if (
-            image &&
-            vm.$type.isString(image.value) &&
-            vm.$type.isString(image.fileUrl)
-          ) {
-            const url = image.fileUrl;
-            const key = url.hashCode().toString();
-            vm.images[key] = image.value;
-            // return `<img src="${url}">`;
-            return url;
+        rawValue = rawValue.replace(
+          /\{\{image([0-9]+)\}\}/g,
+          function (_, index) {
+            const image = images[index - 1];
+            if (
+              image &&
+              vm.$type.isString(image.value) &&
+              vm.$type.isString(image.fileUrl)
+            ) {
+              const url = image.fileUrl;
+              const key = url.hashCode().toString();
+              vm.images[key] = image.value;
+              // return `<img src="${url}">`;
+              return url;
+            }
+            return "{{IMAGE_NOT_FOUND}}";
           }
-          return "{{IMAGE_NOT_FOUND}}";
-        });
+        );
       });
 
       this.updateValue(rawValue);
@@ -91,23 +104,23 @@ export default {
         source: Utils.settings.isDev,
         plugins: ["inlineformat", "style"],
         image: {
-          upload: function(upload, data) {
+          upload: function (upload, data) {
             for (var key in data.files) {
               if (typeof data.files[key] === "object") {
                 const file = data.files[key];
-                vm.uploadImage(file, response => {
+                vm.uploadImage(file, (response) => {
                   upload.complete(response, data.e);
                 });
               }
             }
-          }
+          },
         },
         subscribe: {
-          "editor.change": function(event) {
+          "editor.change": function (event) {
             const content = this.app.editor.getContent();
             vm.updateValue(content);
-          }
-        }
+          },
+        },
       });
     },
     updateValue(content) {
@@ -119,20 +132,20 @@ export default {
       var index = 0;
       vm.imageKeys.clear();
       // TODO: Fix to avoid replacing <video src="">
-      this.cleanValue = this.rawValue.replace(/src="([^"]+)"/g, function(
-        _,
-        imageValue
-      ) {
-        // It seems that quill encodes '&' in the URL to '&amp;' which would screw up key matching.
-        var decodedValue = imageValue.replace(/&amp;/g, "&");
-        const key = decodedValue.hashCode().toString();
-        const existingIndex = vm.imageKeys.indexOf(key);
-        if (existingIndex < 0) {
-          vm.imageKeys.push(key);
-          return `src="{{image${++index}}}"`;
+      this.cleanValue = this.rawValue.replace(
+        /src="([^"]+)"/g,
+        function (_, imageValue) {
+          // It seems that quill encodes '&' in the URL to '&amp;' which would screw up key matching.
+          var decodedValue = imageValue.replace(/&amp;/g, "&");
+          const key = decodedValue.hashCode().toString();
+          const existingIndex = vm.imageKeys.indexOf(key);
+          if (existingIndex < 0) {
+            vm.imageKeys.push(key);
+            return `src="{{image${++index}}}"`;
+          }
+          return `src="{{image${existingIndex + 1}}}"`;
         }
-        return `src="{{image${existingIndex + 1}}}"`;
-      });
+      );
     },
     uploadImage(file, onComplete) {
       const uploaderSpec = this.spec.imageUploader;
@@ -157,18 +170,18 @@ export default {
     insertImage(file, blob, onComplete) {
       let vm = this;
       var reader = new FileReader();
-      reader.onload = function(e) {
+      reader.onload = function (e) {
         if (file.type.indexOf("image") !== -1) {
           var image = new Image();
           image.src = e.target.result;
 
           const key = image.src.hashCode().toString();
-          image.onload = function() {
+          image.onload = function () {
             const response = {
               [key]: {
                 url: image.src,
-                id: key
-              }
+                id: key,
+              },
             };
 
             onComplete(response);
@@ -179,8 +192,8 @@ export default {
       };
       reader.readAsDataURL(file);
       vm.progress.value = -1;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/otpField.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="otp[index]" maxlength="1" class="otp-input"
+      @input="handleInput($event, index)" @keydown="handleKeydown($event, index)" @paste="handlePaste($event, index)"
+      @focus="handleFocus($event, index)" @blur="handleBlur($event, index)" />
+    <input type="hidden" :name="spec.name" :value="otpValue" />
+  </div>
+</template>
+
+<script>
+import bus from '../../utils/eventBus'
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      digits: 0,
+      otp: []
+    };
+  },
+
+  computed: {
+    otpValue() {
+      // concatenate the digits into a single string
+      return this.otp.join("");
+    }
+  },
+  methods: {
+    $ready() {
+      this.digits = this.spec.lengths;
+      this.otp = Array(this.spec.lengths).fill("");
+    },
+    handleInput(event, index) {
+      if (event.target.value.length === 1) {
+        this.focusNext(index);
+      }
+    },
+    handleKeydown(event, index) {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        this.focusPrevious(index);
+        this.$set(this.otp, index, "");
+      }
+    },
+    handlePaste(event, index) {
+      event.preventDefault();
+      const pasted = event.clipboardData
+        .getData("text")
+        .slice(0, this.digits - index);
+      for (let i = 0; i < pasted.length; i++) {
+        this.$set(this.otp, index + i, pasted[i]);
+      }
+      this.focusNext(index + pasted.length - 1);
+    },
+    handleFocus(event, index) {
+      if (index > 0 && this.otp[index - 1] === "") {
+        this.focusPrevious(index);
+      }
+    },
+    handleBlur(event, index) {
+      if (this.otp.filter(digit => digit === "").length === 0) {
+        bus.$emit("complete", this.otp.join(""));
+      }
+    },
+    focusNext(index) {
+      if (index < this.digits - 1) {
+        this.$refs.input[index + 1].focus();
+      }
+    },
+    focusPrevious(index) {
+      if (index > 0) {
+        this.$refs.input[index - 1].focus();
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.otp-input {
+  border: 1px solid #47495f;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  font-size: 24px;
+  margin: 8px;
+}
+</style>

package/components/fields/phone/field.vue

@@ -1,56 +1,26 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <div class="country-code">
-      <v-select
-        v-model="countryCode"
-        :items="sortedCountries"
-        :disabled="spec.readOnly"
-        :outlined="$classes().includes('outlined')"
-        :rounded="$classes().includes('rounded')"
-        :dense="$classes().includes('dense')"
-        item-text="name"
-        item-value="iso2"
-        return-object
-        @change="onChangeCountryCode"
-      >
-        <template v-slot:selection>
-          <div :class="activeCountry.iso2.toLowerCase()" class="country_flag" />
-        </template>
-        <template v-slot:item="data">
-          <span :class="data.item.iso2.toLowerCase()" class="country_flag" />
-          <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
-        </template>
+      <v-select v-model="countryCode" :items="sortedCountries" :disabled="spec.readOnly"
+        :outlined="$classes().includes('outlined') || null" :rounded="$classes().includes('rounded')"
+        :dense="$classes().includes('dense') || null" item-text="name" item-value="iso2" return-object
+        @change="onChangeCountryCode">
+        <!-- <template v-slot:selection> -->
+        <div :class="activeCountry.iso2.toLowerCase()" class="country_flag" />
+        <!-- </template> -->
+        <!-- <template v-slot:item="data"> -->
+        <span :class="data.item.iso2.toLowerCase()" class="country_flag" />
+        <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
+        <!-- </template> -->
       </v-select>
     </div>
-    <v-text-field
-      :id="inputId"
-      ref="input"
-      v-model="phone"
-      class="tel"
-      :label="spec.label"
-      :name="fieldName"
-      :value="spec.value"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :maxlength="spec.maxLength || 25"
-      :disabled="spec.readOnly"
-      type="tel"
-      :rules="hiddenDisplay() ? [] : rules"
-      :prefix="spec.leftText"
-      :suffix="spec.rightText"
-      :outlined="$classes().includes('outlined')"
-      :dense="$classes().includes('dense')"
-      :rounded="$classes().includes('rounded')"
-      :autofocus="spec.autoFocus || false"
-      validate-on-blur
-    >
+    <v-text-field :id="inputId" ref="input" v-model="phone" class="tel" :label="spec.label" :name="fieldName"
+      :hint="spec.hint" :placeholder="spec.placeholder" :maxlength="spec.maxLength || 25" :disabled="spec.readOnly"
+      type="tel" :rules="hiddenDisplay() ? [] : rules" :prefix="spec.leftText" :suffix="spec.rightText"
+      :outlined="$classes().includes('outlined') || null" :dense="$classes().includes('dense') || null"
+      :rounded="$classes().includes('rounded')" :autofocus="spec.autoFocus || false" validate-on-blur>
     </v-text-field>
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="phone"
-    />
+    <input v-if="spec.readOnly" type="hidden" :name="fieldName" v-model="phone" />
   </div>
 </template>
 
@@ -60,8 +30,8 @@ import allCountries from "./countries";
 
 function getCountryByIp() {
   return fetch("https://ip2c.org/s")
-    .then(response => response.text())
-    .then(response => {
+    .then((response) => response.text())
+    .then((response) => {
       const result = (response || "").toString();
       if (!result || result[0] !== "1") {
         throw new Error("unable to fetch the country");
@@ -74,44 +44,44 @@ export default {
   props: {
     spec: {
       type: Object,
-      required: true
+      required: true,
     },
     rules: {
       type: Array,
       default: () => [
-        v =>
+        (v) =>
           !v ||
           /^\+[1-9]([0-9\(\)\-\ ]*)$/.test(v) ||
-          "Must be a valid international phone number with prefix (e.g. +1 416 555 0134)"
-      ]
+          "Must be a valid international phone number with prefix (e.g. +1 416 555 0134)",
+      ],
     },
     disableFetchingCountry: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     mode: {
       type: String,
-      default: () => ""
+      default: () => "",
     },
     allCountries: {
       type: Array,
-      default: () => allCountries
+      default: () => allCountries,
     },
     preferredCountries: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     inputId: {
       type: String,
-      default: () => ""
-    }
+      default: () => "",
+    },
   },
   data() {
     return {
       phone: "",
       activeCountry: { iso2: "" },
       selectedIndex: null,
-      countryCode: null
+      countryCode: null,
     };
   },
   computed: {
@@ -130,9 +100,9 @@ export default {
     },
     sortedCountries() {
       // Sort by preferred countries
-      const preferredCountries = this.getCountries(
-        this.preferredCountries
-      ).map(country => ({ ...country, preferred: true }));
+      const preferredCountries = this.getCountries(this.preferredCountries).map(
+        (country) => ({ ...country, preferred: true })
+      );
       return [...preferredCountries, ...this.allCountries];
     },
     phoneObject() {
@@ -142,14 +112,14 @@ export default {
       ).toJSON();
       Object.assign(result, {
         isValid: result.valid,
-        country: this.activeCountry
+        country: this.activeCountry,
       });
       if (!this.phone) {
         return {
           ...result,
           number: {
-            input: ""
-          }
+            input: "",
+          },
         };
       }
       return result;
@@ -160,7 +130,7 @@ export default {
         key = this.parsedMode;
       }
       return this.phoneObject.number[key] || "";
-    }
+    },
   },
   watch: {
     phone(val) {
@@ -172,7 +142,7 @@ export default {
           }
         }
       }
-    }
+    },
   },
   mounted() {
     this.initializeCountry()
@@ -190,6 +160,9 @@ export default {
     }
   },
   methods: {
+    $ready() {
+      this.phone = this.spec.value;
+    },
     hiddenDisplay() {
       return this.$styles()["display"] == "none";
     },
@@ -197,7 +170,7 @@ export default {
       return this.$classes().concat(["g-text-field--hintless", "fields-phone"]);
     },
     initializeCountry() {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         // 1. If the phone included prefix (+12), try to get the country and set it
         if (this.phone && this.phone[0] === "+") {
           const activeCountry = PhoneNumber(this.phone).getRegionCode();
@@ -221,13 +194,13 @@ export default {
         // 3. Check if fetching country based on user's IP is allowed, set it as the default country
         if (!this.disableFetchingCountry) {
           getCountryByIp()
-            .then(res => {
+            .then((res) => {
               if (this.phone === "") {
                 this.activeCountry =
                   this.findCountry(res) || this.activeCountry;
               }
             })
-            .catch(error => {
+            .catch((error) => {
               console.warn(error);
               // 4. Use the first country from preferred list (if available) or all countries list
               this.choose(fallbackCountry);
@@ -245,24 +218,24 @@ export default {
     // Get ISO2 code from a list of countries
     getCountries(list = []) {
       return list
-        .map(countryCode => this.findCountry(countryCode))
+        .map((countryCode) => this.findCountry(countryCode))
         .filter(Boolean);
     },
     findCountry(iso = "") {
       return this.allCountries.find(
-        country => country.iso2 === iso.toUpperCase()
+        (country) => country.iso2 === iso.toUpperCase()
       );
     },
     getItemClass(index, iso2) {
       const highlighted = this.selectedIndex === index;
       const lastPreferred = index === this.preferredCountries.length - 1;
       const preferred = this.preferredCountries.some(
-        c => c.toUpperCase() === iso2
+        (c) => c.toUpperCase() === iso2
       );
       return {
         highlighted,
         "last-preferred": lastPreferred,
-        preferred
+        preferred,
       };
     },
     choose(country) {
@@ -292,13 +265,13 @@ export default {
     },
     reset() {
       this.selectedIndex = this.sortedCountries
-        .map(c => c.iso2)
+        .map((c) => c.iso2)
         .indexOf(this.activeCountry.iso2);
     },
     onChangeCountryCode() {
       this.choose(this.countryCode, true);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -309,6 +282,7 @@ export default {
     .v-text-field__details {
       min-height: 0;
       margin-bottom: 0;
+
       .v-messages__message {
         min-height: 0;
         line-height: 14px;
@@ -316,26 +290,33 @@ export default {
     }
   }
 }
+
 .country_flag {
   margin-right: 8px;
 }
+
 .fields-phone {
   display: flex;
   align-items: center;
+
   .country-code {
     width: 75px;
   }
+
   li.last-preferred {
     border-bottom: 1px solid #cacaca;
   }
+
   .v-text-field {
     .v-select__selections {
       position: relative;
+
       .country_flag {
         position: absolute;
         margin-left: 18px;
       }
     }
+
     &--outlined {
       .v-select__selections {
         .country_flag {
@@ -345,6 +326,7 @@ export default {
     }
   }
 }
+
 .fields-phone.outlined .country-code {
   margin-right: 6px;
 }

package/components/fields/radio.vue

@@ -1,10 +1,10 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
+  <!-- <common-tooltip :spec="spec"> -->
+  <!-- <template v-slot:activator="{ on }"> -->
+  <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
 
-      <div :class="$classes()">
-        <!-- <v-tooltip
+  <div :class="$classes()">
+    <!-- <v-tooltip
       :disabled="tooltip.disabled"
       :top="tooltipPositionMatches('top')"
       :right="tooltipPositionMatches('right')"
@@ -12,26 +12,19 @@
       :left="tooltipPositionMatches('left')"
     >
       <template v-slot:activator="{ on }"> -->
-        <v-radio
-          :label="spec.label"
-          :value="spec.value.presence() || vuetifyEmptyString"
-          :disabled="spec.readOnly"
-          :on-icon="spec.onIcon"
-          :off-icon="spec.offIcon"
-          v-on="on"
-          @click="$onClick()"
-        />
-        <div v-if="spec.childViews" class="radio-childviews">
-          <div v-for="(item, i) in spec.childViews" :key="i">
-            <glib-component :spec="item" />
-          </div>
-        </div>
-        <!-- </template>
+    <v-radio :label="spec.label" :value="spec.value.presence() || vuetifyEmptyString" :disabled="spec.readOnly"
+      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" />
+    <div v-if="spec.childViews" class="radio-childviews">
+      <div v-for="(item, i) in spec.childViews" :key="i">
+        <glib-component :spec="item" />
+      </div>
+    </div>
+    <!-- </template>
       <span>{{ tooltip.text }}</span>
     </v-tooltip> -->
-      </div>
-    </template>
-  </common-tooltip>
+  </div>
+  <!-- </template>
+  </common-tooltip> -->
 </template>
 
 <script>