glib-web 3.2.0 → 3.3.0

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/otpField.vue

@@ -1,130 +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)" />
-      <label class="hint">{{ spec.hint }}</label>
-    </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)" />
-      <label class="hint">{{ spec.hint }}</label>
-    </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 {
-      otp: (this.spec.value || '').toString().split("")
-    }
-  },
-  computed: {
-    otpValue() {
-      if (!this.otp) return ''
-
-      // concatenate the digits into a single string
-      return this.otp.join("");
-    },
-    digits() {
-      return this.spec.length
-    },
+      value: null,
+    };
   },
-  methods: {
-    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.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>
+<style scoped></style>

package/package.json

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