glib-web 2.6.7 → 3.0.0

package/components/fields/_patternText.vue

@@ -1,30 +1,19 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field
-      v-model="fieldModel"
-      :name="fieldName"
-      :label="spec.label"
-      :value="spec.value"
-      :hint="spec.hint"
-      :type="type"
-      :readonly="spec.readOnly || false"
-      :disabled="spec.readOnly"
-      :min="$sanitizeValue(spec.min)"
-      :max="$sanitizeValue(spec.max)"
-      :pattern="pattern"
-      :rules="$validation()"
-      :outlined="$classes().includes('outlined')"
-      :style="$styles()"
-      :dense="$classes().includes('dense')"
-      clearable
-      @input="onChange"
-    />
+    <v-text-field v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint" :type="type"
+      :readonly="spec.readOnly || false" :disabled="spec.readOnly" :min="$sanitizeValue(spec.min)"
+      :max="$sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
+      :dense="$classes().includes('dense') || null" clearable @input="onChange" :variant="variant" validate-on="blur"
+      persistent-placeholder />
   </div>
 </template>
 
 <script>
+import inputVariant from '../mixins/inputVariant';
+
 export default {
+  mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },
     type: { type: String, required: true },

package/components/fields/_select.vue

@@ -1,38 +1,20 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-autocomplete
-      v-model="fieldModel"
-      :label="spec.label"
-      :items="options"
-      :chips="spec.multiple"
-      :deletable-chips="spec.multiple"
-      :multiple="spec.multiple"
-      :disabled="spec.readOnly"
-      :clearable="!spec.readOnly"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :rules="rules"
-      validate-on-blur
-      persistent-hint
-      :class="$classes()"
-      :dense="$classes().includes('dense')"
-      :outlined="$classes().includes('outlined')"
-      :append-icon="append.icon"
-      @change="onChange"
-    />
+    <v-autocomplete v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
+      :multiple="spec.multiple" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint"
+      :placeholder="spec.placeholder" :rules="rules" persistent-hint :class="$classes()" :append-icon="append.icon"
+      @change="onChange" validate-on="blur" item-title='text' :variant="variant" :closable-chips="spec.multiple"
+      persistent-placeholder />
 
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="fieldName"
-      :value="item"
-    />
+    <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
   </div>
 </template>
 
 <script>
+import inputVariant from '../mixins/inputVariant';
+
 export default {
+  mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },
     defaultValue: { type: String, default: null }

package/components/fields/autocomplete.vue

@@ -1,33 +1,20 @@
 <!-- TODO: Remove (deprecated) -->
 <template>
   <div :style="genericStyles()">
-    <v-combobox
-      v-model="fieldModel"
-      :label="spec.label"
-      :items="options"
-      :chips="spec.multiple"
-      :deletable-chips="spec.multiple"
-      :multiple="spec.multiple"
-      :readonly="spec.readOnly"
-      :disabled="spec.readOnly"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :outlined="$classes().includes('outlined')"
-      :append-icon="append.icon"
-    />
+    <v-combobox v-model="fieldModel" :label="spec.label" :items="options" :chips="spec.multiple"
+      :deletable-chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :disabled="spec.readOnly"
+      :hint="spec.hint" :placeholder="spec.placeholder" :outlined="$classes().includes('outlined') || null"
+      :append-icon="append.icon" validate-on="blur" :variant="variant" persistent-placeholder />
 
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="fieldName"
-      :value="item"
-    />
+    <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
   </div>
 </template>
 
 <script>
+import inputVariant from '../mixins/inputVariant';
+
 export default {
+  mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true }
   },

package/components/fields/check.vue

@@ -2,18 +2,10 @@
   <div :class="$classes()" :style="$styles()">
     <!-- This hidden field should always be there to make sure the submitted param is not empty,
          which could cause "Not accessible" error on the server. -->
-    <input type="hidden" :name="fieldName" :value="spec.uncheckValue" />
-    <v-checkbox
-      v-model="fieldModel"
-      :name="fieldName"
-      :disabled="spec.readOnly"
-      :value="spec.checkValue"
-      :label="fieldModel ? spec.onLabel || spec.label : spec.label"
-      :on-icon="spec.onIcon"
-      :off-icon="spec.offIcon"
-      hide-details
-      @change="changed"
-    ></v-checkbox>
+    <input v-model="uncheckValue" type="hidden" :name="fieldName" />
+    <v-checkbox v-model="fieldModel" :name="fieldName" :disabled="spec.readOnly"
+      :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon" :false-icon="spec.offIcon"
+      :value="spec.checkValue" hide-details @change="changed" color="primary"></v-checkbox>
   </div>
 </template>
 
@@ -26,6 +18,7 @@ export default {
     return {
       groupName: null,
       fieldType: null,
+      uncheckValue: this.spec.uncheckValue
     };
   },
   methods: {

package/components/fields/checkGroup.vue

@@ -1,23 +1,13 @@
 <template>
-  <div
-    ref="checkGroup"
-    class="checkgroup"
-    data-component="checkGroup"
-    :name="spec.name"
-  >
+  <div ref="checkGroup" class="checkgroup" data-component="checkGroup" :name="spec.name">
     <!-- <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" /> -->
 
     <div v-for="(item, index) in spec.childViews" :key="index">
       <glib-component :spec="childSpec(item)" />
     </div>
 
-    <v-text-field
-      class="checkgroup__uncheckvalue"
-      :disabled="anyChecked"
-      :name="spec.name"
-      :value="spec.uncheckValue"
-      :rules="rules"
-    />
+    <v-text-field class="checkgroup__uncheckvalue" :disabled="anyChecked" :name="spec.name" :value="spec.uncheckValue"
+      :rules="rules" />
   </div>
 </template>
 

package/components/fields/country/field.vue

@@ -19,32 +19,14 @@
     :value="regionField.value"
     />-->
 
-    <v-autocomplete
-      v-model="country"
-      :label="spec.label"
-      :name="spec.name"
-      :items="countryOptions"
-      :readonly="spec.readOnly"
-      :disabled="spec.readOnly"
-      :clearable="!spec.readOnly"
-      :hint="spec.hint"
-      persistent-hint
-      :outlined="$classes().includes('outlined')"
-    />
+    <v-autocomplete v-model="country" :label="spec.label" :name="spec.name" :items="countryOptions"
+      :readonly="spec.readOnly" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint" persistent-hint
+      :outlined="$classes().includes('outlined') || null" />
 
-    <v-autocomplete
-      v-if="regionField && regionOptions"
-      :label="regionField.label"
-      :name="regionField.name"
-      :value="regionField.value"
-      :items="regionOptions"
-      :readonly="regionField.readOnly"
-      :disabled="regionField.readOnly"
-      :clearable="!regionField.readOnly"
-      :hint="regionField.hint"
-      persistent-hint
-      :outlined="$classes().includes('outlined')"
-    />
+    <v-autocomplete v-if="regionField && regionOptions" :label="regionField.label" :name="regionField.name"
+      :value="regionField.value" :items="regionOptions" :readonly="regionField.readOnly" :disabled="regionField.readOnly"
+      :clearable="!regionField.readOnly" :hint="regionField.hint" persistent-hint
+      :outlined="$classes().includes('outlined') || null" />
   </div>
 </template>
 
@@ -63,10 +45,10 @@ export default {
     };
   },
   computed: {
-    regionField: function() {
+    regionField: function () {
       return this.spec.region;
     },
-    regionOptions: function() {
+    regionOptions: function () {
       return regions[this.country];
     }
   },

package/components/fields/date.vue

@@ -9,22 +9,22 @@
 </template>
 
 <script>
-import PatternTextField from "./_patternText";
+import PatternTextField from "./_patternText.vue";
 
 export default {
   components: {
     // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-patternText": PatternTextField
+    "fields-patternText": PatternTextField,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   methods: {
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);
       this.$refs.delegate.updateData();
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/datetime.vue

@@ -13,30 +13,25 @@
     :outlined="$classes().includes('outlined')"
     :style="genericStyles()"
   /> -->
-  <fields-patternText
-    :spec="spec"
-    type="datetime-local"
-    pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
-    :value="value"
-  />
+  <fields-patternText :spec="spec" type="datetime-local" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" />
 </template>
 
 <script>
-import PatternTextField from "./_patternText";
+import PatternTextField from "./_patternText.vue";
 
 export default {
   components: {
     // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-patternText": PatternTextField
+    "fields-patternText": PatternTextField,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      value: null
+      value: null,
     };
-  }
+  },
   // methods: {
   //   $ready() {
   //     this.value = this.spec.value.slice(0, 16);

package/components/fields/dynamicSelect.vue

@@ -1,42 +1,20 @@
 <template>
   <div :style="genericStyles()">
-    <v-autocomplete
-      ref="autocomplete"
-      v-model="model"
-      :items="allItems"
-      :loading="$isBusy"
-      :search-input.sync="search"
-      :label="spec.label"
-      hide-no-data
-      hide-selected
-      no-filter
-      return-object
-      :chips="true"
-      :deletable-chips="true"
-      :multiple="spec.multiple"
-    >
+    <v-autocomplete ref="autocomplete" v-model="model" :items="allItems" :loading="$isBusy" :v-model:search-input="search"
+      :label="spec.label" hide-no-data hide-selected no-filter return-object :chips="true" :deletable-chips="true"
+      :multiple="spec.multiple">
       <template v-slot:item="data">
         {{ data.item.title }} - {{ data.item.subtitle }}
       </template>
 
-      <v-list-item
-        v-if="!$isBusy && nextPageUrl"
-        slot="append-item"
-        class="load-more"
-      >
+      <!-- <v-list-item v-if="!$isBusy && nextPageUrl" slot="append-item" class="load-more">
         <v-list-item-content class="text-content" @click="loadMore">
           <v-list-item-title>Load More</v-list-item-title>
         </v-list-item-content>
-      </v-list-item>
+      </v-list-item> -->
     </v-autocomplete>
 
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="spec.name"
-      :value="item.value"
-    />
+    <input v-for="(item, index) in values" :key="index" type="hidden" :name="spec.name" :value="item.value" />
   </div>
 </template>
 
@@ -155,7 +133,7 @@ export default {
       return data.rows.map(row => {
         const extra = row.extra;
         row.value = extra.value;
-        row.text = extra.text;
+        row.title = extra.text;
         return row;
       });
     }
@@ -167,6 +145,7 @@ export default {
 .load-more {
   cursor: pointer;
 }
+
 .load-more:hover {
   background-color: lightgray;
 }

package/components/fields/file.vue

@@ -1,29 +1,15 @@
 <template>
-  <div ref="fileUploadContainer" class="mb-3" :style="$styles()">
+  <div ref="fileUploadContainer" :style="$styles()">
     <label class="v-label v-label--active">{{ spec.label }}</label>
     <div class="preview-container">
-      <v-avatar
-        v-if="placeholder.type == 'avatar'"
-        :style="genericStyles(placeholder)"
-        class="mr-4"
-      >
+      <v-avatar v-if="placeholder.type == 'avatar'" :style="genericStyles(placeholder)" class="mr-4">
         <img :src="fileImage || placeholder.url" />
       </v-avatar>
-      <img
-        v-else-if="placeholder.type == 'image'"
-        class="square-image mr-4"
-        :style="genericStyles(placeholder)"
-        :src="fileImage || placeholder.url"
-      />
-
-      <v-text-field
-        v-else-if="placeholder.type == 'input'"
-        :value="fileTitle"
-        outlined
-        prominent
-        placholder="Upload your file"
-        disabled
-      />
+      <img v-else-if="placeholder.type == 'image'" class="square-image mr-4" :style="genericStyles(placeholder)"
+        :src="fileImage || placeholder.url" />
+
+      <v-text-field v-else-if="placeholder.type == 'input'" :value="fileTitle" variant="outlined"
+        placholder="Upload your file" disabled />
 
       <span v-else class="mr-4">{{ fileTitle }}</span>
 
@@ -38,21 +24,16 @@
         </v-btn>
       </span>
       <span v-else class="action-container">
-        <v-btn icon @click="triggerUpload">
+        <v-btn variant="flat" icon @click="triggerUpload">
           <v-icon>edit</v-icon>
         </v-btn>
 
-        <v-btn v-if="fileImage" icon @click="removeImage">
+        <v-btn variant="flat" v-if="fileImage" icon @click="removeImage">
           <v-icon>close</v-icon>
         </v-btn>
       </span>
     </div>
-    <input
-      ref="directUploadFile"
-      style="display: none"
-      type="file"
-      @change="uploadFiles"
-    />
+    <input ref="directUploadFile" style="display: none" type="file" @change="uploadFiles" />
 
     <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
     <v-progress-linear v-if="showProgress" v-model="progress.value" />

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;
@@ -147,7 +160,7 @@ export default {
         upload.start((error, blob) => {
           if (error) {
             // Handle the error
-            console.warn("Failed uploading image!");
+            console.log("Failed uploading image!");
           } else {
             this.insertImage(file, blob, onComplete);
           }
@@ -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>