glib-web 3.1.1 → 3.3.0

package/actions/panels/scrollTo.js

@@ -35,6 +35,7 @@ export default class {
     };
     new IntersectionObserver(function([entry]) {
       const ratio = entry.intersectionRatio;
+
       if (ratio < 1) {
         // const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
         const place = ratio <= 0 ? alignment : "nearest";
@@ -42,9 +43,15 @@ export default class {
           block: place,
           inline: place,
           behavior: spec["animate"] ? "smooth" : "auto",
-
         });
       } else {
+        if (spec.force) {
+          element.scrollIntoView({
+            block: alignment,
+            inline: alignment,
+            behavior: spec["animate"] ? "smooth" : "auto",
+          });
+        }
         vm.onScrollEnd(element, spec, component);
         this.disconnect();
       }

package/components/charts/area.vue

@@ -1,5 +1,7 @@
 <template>
-    <area-chart :style="genericStyles()" :class="$classes()" :data="series"></area-chart>
+    <div>
+        <area-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color">></area-chart>
+    </div>
 </template>
 
 <script setup>
@@ -7,6 +9,6 @@ import { computed } from 'vue';
 import { singleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
-
+const color = spec.colors == null ? '' : [spec.colors]
 const series = computed(() => singleDataSeries(spec.dataSeries))
 </script>

package/components/charts/column.vue

@@ -1,5 +1,5 @@
 <template>
-  <column-chart :data="series" :stacked="spec.stacked"></column-chart>
+  <column-chart :data="series" :stacked="spec.stacked" :colors="color"></column-chart>
 </template>
 
 <script setup>
@@ -8,6 +8,7 @@ import { computed } from 'vue';
 import { multipleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
+const color = spec.colors == null ? '' : spec.colors
 const series = computed(() => multipleDataSeries(spec.dataGroups))
 
 </script>

package/components/charts/line.vue

@@ -1,5 +1,5 @@
 <template>
-    <line-chart :style="genericStyles()" :class="$classes()" :data="series"></line-chart>
+    <line-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color"></line-chart>
 </template>
 
 <script setup>
@@ -7,6 +7,7 @@ import { computed } from 'vue';
 import { multipleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
+const color = spec.colors == null ? '' : spec.colors
 
 const series = computed(() => multipleDataSeries(spec.dataSeries))
 </script>

package/components/charts/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <pie-chart :style="genericStyles()" :class="$classes()" :data="series"></pie-chart>
+  <pie-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color"></pie-chart>
 </template>
 
 <script setup>
@@ -7,6 +7,7 @@ import { computed } from 'vue';
 import { singleDataSeries } from './series';
 
 const { spec } = defineProps({ spec: Object })
+const color = spec.colors == null ? '' : spec.colors
 const series = computed(() => singleDataSeries(spec.dataSeries))
 
 </script>

package/components/fields/_otp.vue

@@ -0,0 +1,160 @@
+<template>
+  <div :style="$styles()" :class="$classes()">
+    <div v-if="spec.type === 'text'">
+      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="val[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)" />
+      <label class="hint">{{ spec.hint }}</label>
+    </div>
+    <div v-else>
+      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="val[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)" />
+      <label class="hint">{{ spec.hint }}</label>
+    </div>
+    <input type="hidden" :name="fieldName" v-model="fieldModel" />
+  </div>
+</template>
+
+<script>
+import bus from '../../utils/eventBus'
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      otp: (this.spec.value || '').toString().split(""),
+      alignment: this.spec.align === null ? 'left' : this.spec.align
+    }
+  },
+  computed: {
+    otpValue() {
+      if (!this.otp) return ''
+
+      // concatenate the digits into a single string
+      return this.otp.join("");
+    },
+    digits() {
+      return this.spec.length
+    },
+    val() {
+      const field = this.fieldModel == null ? [] : this.fieldModel.toString().split("")
+
+      if (this.alignment === 'right') {
+        if (this.spec.valueIf == null) {
+          if (this.digits > this.otp.length && this.otp.length != 0) {
+            const results = []
+            for (let i = 0; i < (this.digits - this.otp.length); i++) {
+              results.push('')
+            }
+            return Reflect.apply(Array.prototype.concat, results, this.otp)
+          } else {
+            return field
+          }
+        } else {
+          return field
+        }
+      } else {
+        if (this.spec.valueIf == null) {
+          return this.otp
+        } else {
+          return field
+        }
+      }
+    },
+  },
+  methods: {
+    created() {
+      this.fieldModel = this.otpValue;
+    },
+    handleInput(event, index) {
+      if (event.target.value.length === 1) {
+        this.focusNext(index);
+      }
+      this.fieldModel = this.otp.join("");
+    },
+    handleKeydown(event, index) {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        if (this.otp[index] !== "") {
+          this.otp[index] = ""
+        } else {
+          this.focusPrevious(index);
+          this.otp[index - 1] = ""
+        }
+      }
+    },
+    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();
+      }
+    },
+    handleClick(event) {
+      event.target.select();
+    }
+  }
+};
+</script>
+<style scoped>
+.otp-input {
+  border: 1px solid #47495f;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  font-size: 24px;
+  margin: 8px;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.hint {
+  display: none;
+}
+
+input:focus~.hint,
+input:focus-visible~.hint {
+  display: block;
+  padding: 8px 16px;
+}
+</style>

package/components/fields/_select.vue

@@ -20,7 +20,7 @@ export default {
     spec: { type: Object, required: true },
     defaultValue: { type: String, default: null }
   },
-  data () {
+  data() {
     return {
       options: null,
       append: {},
@@ -28,7 +28,7 @@ export default {
     };
   },
   computed: {
-    values () {
+    values() {
       // Depends on whether the field is single or multiple
       if (this.$type.isArray(this.fieldModel)) {
         return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
@@ -38,18 +38,18 @@ export default {
       // return this.emptyValue;
     },
     // To avoid empty param error
-    emptyValue () {
+    emptyValue() {
       return [null];
     },
-    density () {
+    density() {
       return determineDensity(this.spec.styleClasses)
     }
   },
   methods: {
-    $ready () {
+    $ready() {
       this.updateData(false);
     },
-    normalizedOptions () {
+    normalizedOptions() {
       return this.spec.options.map(i => {
         switch (i.type) {
           case "label":
@@ -61,13 +61,13 @@ export default {
         }
       });
     },
-    classes () {
+    classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
-    onChange () {
+    onChange() {
       this.$executeOnChange();
     },
-    updateData (reinitValue) {
+    updateData(reinitValue) {
       this.options = this.normalizedOptions();
       this.append = this.spec.append || {};
       this.rules = this.$validation();
@@ -80,7 +80,7 @@ export default {
         this.fieldModel = this.defaultValue;
       }
     },
-    $registryEnabled () {
+    $registryEnabled() {
       return false;
     }
   }

package/components/fields/otpField.vue

@@ -1,119 +1,24 @@
 <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)" />
-    </div>
-    <div v-else>
-      <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)" />
-    </div>
-    <input type="hidden" :name="spec.name" :value="otpValue" />
-  </div>
+  <fields-otp :spec="spec" />
 </template>
 
 <script>
-import bus from '../../utils/eventBus'
+import OtpField from "./_otp.vue";
 
 export default {
+  components: {
+    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
+    "fields-otp": OtpField,
+  },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      digits: 0,
-      otp: []
+      value: null,
     };
   },
-
-  computed: {
-    otpValue() {
-      // concatenate the digits into a single string
-      return this.otp.join("");
-    }
-  },
-  methods: {
-    $ready() {
-      this.digits = this.spec.length;
-      this.otp = Array(this.spec.length).fill("");
-    },
-    handleInput(event, index) {
-      if (event.target.value.length === 1) {
-        this.focusNext(index);
-      }
-    },
-    handleKeydown(event, index) {
-      if (event.key === "Backspace") {
-        event.preventDefault();
-        if (this.otp[index] !== "") {
-          this.$set(this.otp, index, "");
-        } else {
-          this.focusPrevious(index);
-          this.$set(this.otp, index - 1, "");
-        }
-      }
-    },
-    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();
-      }
-    },
-    handleClick(event) {
-      event.target.select();
-    }
-  }
 };
 </script>
-<style scoped>
-.otp-input {
-  border: 1px solid #47495f;
-  text-align: center;
-  width: 50px;
-  height: 50px;
-  border-radius: 4px;
-  font-size: 24px;
-  margin: 8px;
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
 
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-</style>
+<style scoped></style>

package/components/mixins/inputVariant.js

@@ -1,16 +1,13 @@
 const variants = ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled']
 
 export default {
-    data: function () {
-        return {
-            variant: 'outlined'
-        }
-    },
-    methods: {
-        $ready() {
-            variants.forEach((value) => {
-                if (this.$classes().includes(value)) this.variant = value
+    computed: {
+        variant() {
+            let val = null
+            variants.forEach((vari) => {
+                if (this.$classes().includes(vari)) val = vari
             })
+            return val || 'outlined'
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {