glib-web 2.5.0 → 3.0.0-beta1

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>

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,16 @@
     <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
-      @text-change="onRichTextEditorChanged"
-      @image-added="uploadImage"
-      :editorOptions="editorSettings"
-    />
+    <VueEditor v-if="!rawMode" id="rich-editor" v-model="richEditorValue" :editor-toolbar="customToolbar"
+      use-custom-image-handler @text-change="onRichTextEditorChanged" @image-added="uploadImage"
+      :editorOptions="editorSettings" />
     <!-- 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>

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/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,36 +1,11 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-text-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="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
-      @click:append="onRightIconClick"
-      @input="onChange"
-    />
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="fieldModel"
-    />
+    <v-text-field v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
+      :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :disabled="spec.readOnly" :type="variant.type"
+      :rules="rules" :prepend-inner-icon="leftIconName" :append-icon="variant.appendIcon" :prefix="spec.leftText"
+      :suffix="spec.rightText" :min="spec.min" :max="spec.max" :outlined="$classes().includes('outlined') || null"
+      :autofocus="spec.autoFocus || false" validate-on-blur @click:append="onRightIconClick" @input="onChange" />
+    <input v-if="spec.readOnly" type="hidden" :name="fieldName" :model-value="fieldModel" />
   </div>
 </template>
 
@@ -46,11 +21,12 @@ export default {
     return {
       variant: {},
       rules: [],
+      onRightIconClick: null,
       fields: {
         email: {
           type: "email",
           prependIcon: "email",
-          onRightIconClick: function() {},
+          onRightIconClick: function () { },
           rules: [
             v =>
               !v ||
@@ -61,14 +37,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"]
@@ -76,7 +52,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/
@@ -91,7 +67,7 @@ export default {
         search: {
           type: "url",
           prependIcon: "search",
-          onRightIconClick: function() {},
+          onRightIconClick: function () { },
           rules: [
             v => !v || /^\w+:\/\/[.-\w]+$/.test(v) || "Must be a valid URL"
           ]
@@ -104,12 +80,23 @@ export default {
       const icon = this.spec.leftIcon || {};
       const materialIcon = icon.material || {};
       return materialIcon.name;
+    },
+    rightIconName() {
+      const icon = this.spec.rightIcon || {};
+      const materialIcon = icon.material || {};
+      return materialIcon.name;
     }
   },
   methods: {
     $ready() {
       this.variant = this.fields[this.type] || {};
       this.rules = this.$validation(this.variant.rules);
+
+      if (this.variant.onRightIconClick) {
+        this.onRightIconClick = () => {
+          this.variant.onRightIconClick(this);
+        };
+      }
     },
     togglePasswordVisibility() {
       const passwordField = this.fields["password"];
@@ -121,13 +108,10 @@ export default {
         passwordField.appendIcon = "visibility";
       }
     },
-    onRightIconClick() {
-      this.variant.onRightIconClick(this);
-    },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
-    onChange: eventFiltering.debounce(function() {
+    onChange: eventFiltering.debounce(function () {
       this.executeActionWithParams();
     }, 300),
     executeActionWithParams() {

package/components/fields/textarea.vue

@@ -1,43 +1,28 @@
 <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"
-    ></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') || null"
+      :no-resize="$classes().includes('no-resize')" validate-on-blur @keyup="$onTyping"></v-textarea>
+    <input v-if="spec.readOnly" type="hidden" :name="fieldName" :value="spec.value" />
   </div>
 </template>
 
 <script>
 export default {
   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");
@@ -45,8 +30,8 @@ export default {
     },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -54,6 +39,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>

package/components/image.vue

@@ -1,23 +1,18 @@
 <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>
+  <!-- <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" :width="spec.width" :max-height="spec.height" :style="styles"
+    :aspect-ratio="spec.aspectRatio" @click="$onClick()" cover>
+    <!-- <v-progress-circular v-if="$isBusy" indeterminate /> -->
+  </v-img>
+  <!-- </common-badge> -->
+  <!-- </template> -->
+  <!-- </common-tooltip> -->
 </template>
 
 <script>
-import Vue from "vue";
 // import TooltipMixins from "./mixins/tooltip";
 
 export default {
@@ -71,8 +66,7 @@ export default {
         }
       }
 
-      Vue.set(this.styles, "width", width);
-      Vue.set(this.styles, "height", height);
+      Object.assign(this.styles, { width, height });
     },
     fitCrop(image) {
       let width, height;
@@ -85,8 +79,7 @@ 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 });
     }
   }
 };

package/components/markdown.vue

@@ -2,12 +2,9 @@
   <div :style="genericStyles()" :class="$classes()">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <span v-html="compiledText"></span>
-    <div
-      v-if="youtubeId"
-      :style="`width: 320px; overflow: hidden; max-height: 180px;`"
-    >
+    <!-- <div v-if="youtubeId" :style="`width: 320px; overflow: hidden; max-height: 180px;`">
       <youtube :video-id="youtubeId" fit-parent></youtube>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -23,7 +20,7 @@ export default {
   },
   computed: {
     compiledText() {
-      return Utils.format.markdown(this.spec.text);
+      return Utils.format.markdown(this.spec.text || '');
     }
   },
   methods: {
@@ -58,45 +55,55 @@ export default {
 
 <style lang="scss">
 .views-markdown {
-  & > span > :last-child {
+  &>span> :last-child {
     margin-bottom: 0;
   }
+
   pre {
     background-color: #f0f0f0;
     padding: 8px 10px;
 
-    & > code {
+    &>code {
       background-color: transparent;
       padding: 0;
     }
   }
 }
+
 .line-clamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
 .line-clamp-1 {
   -webkit-line-clamp: 1;
 }
+
 .line-clamp-2 {
   -webkit-line-clamp: 2;
 }
+
 .line-clamp-3 {
   -webkit-line-clamp: 3;
 }
+
 .line-clamp-4 {
   -webkit-line-clamp: 4;
 }
+
 .line-clamp-5 {
   -webkit-line-clamp: 5;
 }
+
 .line-clamp-6 {
   -webkit-line-clamp: 6;
 }
+
 .line-clamp-7 {
   -webkit-line-clamp: 7;
 }
+
 .line-clamp-8 {
   -webkit-line-clamp: 8;
 }