glib-web 2.6.7 → 3.0.0

package/components/fields/otpField.vue

@@ -1,45 +1,25 @@
 <template>
   <div>
     <div v-if="spec.type === 'text'">
-      <input
-        v-for="(digit, index) in digits"
-        ref="input"
-        :key="index"
-        v-model="otp[index]"
-        type="text"
-        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)"
-        @click="handleClick($event)"
-      />
+      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="otp[index]" type="text" 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)"
+        @click="handleClick($event)" />
     </div>
     <div v-else>
-      <input
-        v-for="(digit, index) in digits"
-        ref="input"
-        :key="index"
-        v-model="otp[index]"
-        type="number"
+      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="otp[index]" type="number"
         oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
-        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)"
-        @click="handleClick($event)"
-      />
+        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)"
+        @click="handleClick($event)" />
     </div>
     <input type="hidden" :name="spec.name" :value="otpValue" />
   </div>
 </template>
 
 <script>
+import bus from '../../utils/eventBus'
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -95,7 +75,7 @@ export default {
     },
     handleBlur(event, index) {
       if (this.otp.filter(digit => digit === "").length === 0) {
-        this.$emit("complete", this.otp.join(""));
+        bus.$emit("complete", this.otp.join(""));
       }
     },
     focusNext(index) {

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,56 +1,20 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
-
-      <div :class="$classes()">
-        <!-- <v-tooltip
-      :disabled="tooltip.disabled"
-      :top="tooltipPositionMatches('top')"
-      :right="tooltipPositionMatches('right')"
-      :bottom="tooltipPositionMatches('bottom')"
-      :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>
-      <span>{{ tooltip.text }}</span>
-    </v-tooltip> -->
+  <div :class="$classes()" :style="$styles()">
+    <v-radio :label="spec.label" :value="spec.value.presence() || vuetifyEmptyString" :disabled="spec.readOnly"
+      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" color="primary" />
+    <div v-if="spec.childViews" class="radio-childviews">
+      <div v-for="(item, i) in spec.childViews" :key="i">
+        <glib-component :spec="item" />
       </div>
-    </template>
-  </common-tooltip>
+    </div>
+  </div>
 </template>
 
 <script>
-// import TooltipMixins from "../mixins/tooltip";
 
 export default {
-  // mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
   }
-  // data() {
-  //   return {
-  //     tooltip: {}
-  //   };
-  // },
-  // methods: {
-  //   $ready() {
-  //     this.tooltip = this.spec.tooltip || { disabled: true };
-  //   }
-  // }
 };
 </script>

package/components/fields/radioGroup.vue

@@ -3,27 +3,13 @@
        the error can only be removed by submitting the form. But this is better than the alternative, which is radioGroup showing
        validation error on page load.
     -->
-  <v-radio-group
-    v-model="fieldModel"
-    :name="fieldName"
-    :disabled="spec.readOnly"
-    :rules="$validation()"
-    :row="spec.row"
-    validate-on-blur
-    @change="onChange"
-  >
-    <div v-for="(childView, index) in spec.childViews" :key="index">
-      <div :class="activeClass(childView)" @click="updateValue(childView)">
-        <glib-component :spec="childView" />
-      </div>
+  <v-radio-group v-model="fieldModel" :name="fieldName" :disabled="spec.readOnly" :rules="$validation()" :row="spec.row"
+    validate-on="blur" @change="onChange" :class="$classes()" :style="$styles()">
+    <div v-for="(childView, index) in spec.childViews" :key="index" style="width: 100%;">
+      <glib-component :spec="childSpec(childView)" @click="updateValue(childView)" />
     </div>
 
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="fieldModel"
-    />
+    <input v-if="spec.readOnly" type="hidden" :name="fieldName" :value="fieldModel" />
   </v-radio-group>
 </template>
 
@@ -43,6 +29,17 @@ export default {
         this.fieldModel = variable.value;
       }
     },
+    childSpec(childView) {
+      const cls = Object.assign({}, childView)
+      if (this.activeClass(cls)) {
+        if (!cls.styleClasses.includes('radio--active')) {
+          cls.styleClasses.push('radio--active')
+        }
+      } else {
+        cls.styleClasses = childView.styleClasses.filter((v) => v != 'radio--active')
+      }
+      return cls;
+    },
     activeClass(childView) {
       if (
         childView.view.includes("fields/radio") &&
@@ -68,6 +65,7 @@ div.v-input--radio-group {
 div.v-input--radio-group .v-messages {
   min-height: 0;
 }
+
 div.v-input--radio-group.v-input--selection-controls .v-input__slot {
   margin-bottom: 0;
 }

package/components/fields/rating.vue

@@ -1,26 +1,19 @@
 <template>
   <div>
-    <v-rating
-      v-model="fieldModel"
-      :name="fieldName"
-      :value="spec.value"
-      empty-icon="star_outline"
-      full-icon="star"
-      half-icon="star_half"
-      :half-increments="spec.halfIncrements"
-      hover
-      length="5"
-      :readonly="spec.readOnly"
-      :color="spec.color"
-      :background-color="spec.color"
-      :size="spec.size"
-    ></v-rating>
+    <v-rating v-model="fieldModel" :name="fieldName" empty-icon="star_outline" full-icon="star" half-icon="star_half"
+      :half-increments="spec.halfIncrements" hover length="5" :readonly="spec.readOnly" :color="spec.color"
+      :bg-color="spec.color" :size="spec.size"></v-rating>
     <input type="hidden" :name="fieldName" :value="fieldModel" />
   </div>
 </template>
 
 <script>
 export default {
-  props: { spec: { type: Object, required: true } }
+  props: { spec: { type: Object, required: true } },
+  methos: {
+    $ready() {
+      this.fieldModel = this.spec.value;
+    },
+  },
 };
 </script>

package/components/fields/richText.vue

@@ -8,36 +8,18 @@
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
 
     <!-- Remove the editor to avoid circular updating between this editor and the raw field. -->
-    <VueEditor
-      v-if="!rawMode"
-      id="rich-editor"
-      v-model="richEditorValue"
-      :editor-toolbar="customToolbar"
-      use-custom-image-handler
-      :editor-options="editorSettings"
-      @text-change="onRichTextEditorChanged"
-      @image-added="uploadImage"
-    />
+    <!-- <VueEditor v-if="!rawMode" id="rich-editor" v-model="richEditorValue" :editor-toolbar="customToolbar"
+      use-custom-image-handler :editor-options="editorSettings" @text-change="onRichTextEditorChanged"
+      @image-added="uploadImage" /> -->
+    <QuillEditor v-if="!rawMode" ref="quilEditor" theme="snow" :toolbar="customToolbar" :content="richEditorValue"
+      contentType="html" :modules="modules" @textChange="onRichTextEditorChanged" />
     <!-- Hide these fields but don't remove them because these are the values that will get submitted. -->
     <div :style="{ display: rawMode ? 'block' : 'none' }">
-      <v-textarea
-        id="raw-editor"
-        v-model="rawEditorValue"
-        :style="$styles()"
-        :class="$classes()"
-        :outlined="$classes().includes('outlined')"
-        @input="onRawTextEditorChanged"
-      ></v-textarea>
-      <v-text-field
-        v-for="(imageKey, index) in imageKeys"
-        :key="index"
-        :label="`Image ${index + 1}`"
-        :style="$styles()"
-        :outlined="$classes().includes('outlined')"
-        type="text"
-        :name="imageUploader.name"
-        :value="images[imageKey]"
-      />
+      <v-textarea id="raw-editor" v-model="rawEditorValue" :style="$styles()" :class="$classes()"
+        :outlined="$classes().includes('outlined') || null" @input="onRawTextEditorChanged"></v-textarea>
+      <v-text-field v-for="(imageKey, index) in imageKeys" :key="index" :label="`Image ${index + 1}`" :style="$styles()"
+        :outlined="$classes().includes('outlined') || null" type="text" :name="imageUploader.name"
+        :value="images[imageKey]" />
     </div>
     <input type="hidden" :name="spec.name" :value="producedValue" />
   </div>
@@ -45,15 +27,14 @@
 
 <script>
 import Uploader from "../../utils/uploader";
-import { VueEditor, Quill } from "vue2-editor";
+import { QuillEditor, Quill } from '@vueup/vue-quill'
+
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
 import eventFiltering from "../../utils/eventFiltering";
 import QuillImageDropAndPaste from "quill-image-drop-and-paste";
 import bus from "../../utils/eventBus";
 
-Quill.register("modules/imageDropAndPaste", QuillImageDropAndPaste);
-
 var ImageBlot = Quill.import("formats/image");
 ImageBlot.sanitize = function (url) {
   return url;
@@ -170,7 +151,7 @@ class TextEditor {
 }
 
 export default {
-  components: { VueEditor },
+  components: { QuillEditor },
   props: {
     spec: { type: Object, required: true },
   },
@@ -179,21 +160,21 @@ export default {
       ["bold", "italic", "strike"],
       [{ header: [false, 1, 2, 3, 4, 5] }],
       [{ list: "ordered" }, { list: "bullet" }],
-      ["image", "link"],
+      ["link"],
     ],
-    editorSettings: {
-      modules: {
-        imageDropAndPaste: {
-          // add an custom image handler
-          handler: function (imageDataUrl, type, imageData) {
-            bus.$emit("richText/dropOrPaste", {
-              file: imageData.toFile(),
-              editor: this.quill,
-              cursorLocation: this.getIndex(),
-            });
-          },
+    modules: {
+      name: 'imageDropAndPaste',
+      module: QuillImageDropAndPaste,
+      options: {
+        // add an custom image handler
+        handler: function (imageDataUrl, type, imageData) {
+          bus.$emit("richText/dropOrPaste", {
+            file: imageData.toFile(),
+            editor: this.quill,
+            cursorLocation: this.getIndex(),
+          });
         },
-      },
+      }
     },
     richEditorValue: "",
     rawEditorValue: "",
@@ -283,6 +264,7 @@ export default {
       );
     },
     onRichTextEditorChanged: eventFiltering.debounce(function () {
+      this.richEditorValue = this.$refs.quilEditor.getHTML()
       this.producedValue = this.textEditor.producedValue(
         this.richEditorValue,
         "html",