Merge branch 'master' into fix/4273-allow-parentheses-in-hyperlink

molgenis · Oct 25, 2024 · 6cce356 · 6cce356
2 parents 0188306 + 81252f2
commit 6cce356
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 65 deletions.
diff --git a/apps/molgenis-components/src/components/forms/InputEmail.vue b/apps/molgenis-components/src/components/forms/InputEmail.vue
@@ -13,8 +13,7 @@
         :name="name"
         :value="modelValue"
         @input="
-          //@ts-ignore
-          emit('update:modelValue', $event.target?.value)
+          $emit('update:modelValue', ($event.target as HTMLInputElement).value)
         "
         type="text"
         class="form-control"
@@ -27,49 +26,50 @@
   </FormGroup>
 </template>
 
-<script setup lang="ts">
-import { computed } from "vue";
+<script lang="ts">
 import constants from "../constants";
 import FormGroup from "./FormGroup.vue";
 import InputGroup from "./InputGroup.vue";
-import BaseInputProps from "./baseInputs/BaseInputProps";
+import BaseInput from "./baseInputs/BaseInput.vue";
 
-let props = defineProps({
-  ...BaseInputProps,
-  modelValue: {
-    type: String,
-    default: null,
+export default {
+  name: "InputEmail",
+  components: { FormGroup, InputGroup },
+  extends: BaseInput,
+  props: {
+    stringLength: {
+      type: Number,
+      default: 255,
+    },
+    additionalValidValidationStrings: {
+      type: Array,
+      default: [],
+    },
   },
-  stringLength: {
-    type: Number,
-    default: 255,
+  computed: {
+    stringError() {
+      if (typeof this.modelValue === "string") {
+        if (this.modelValue.length > this.stringLength) {
+          return `Please limit to ${this.stringLength} characters.`;
+        } else if (!this.validateEmail(this.modelValue)) {
+          return `Please enter a valid email address`;
+        } else {
+          return this.errorMessage;
+        }
+      } else {
+        return this.errorMessage;
+      }
+    },
   },
-  additionalValidValidationStrings: {
-    type: Array,
-    default: [],
+  methods: {
+    validateEmail(email: string) {
+      return (
+        this.additionalValidValidationStrings.includes(email) ||
+        email?.match(constants.EMAIL_REGEX)
+      );
+    },
   },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-function validateEmail(email: string) {
-  return (
-    props.additionalValidValidationStrings.includes(email) ||
-    email?.match(constants.EMAIL_REGEX)
-  );
-}
-
-const stringError = computed(() => {
-  if (typeof props.modelValue === "string") {
-    if (props.modelValue.length > props.stringLength) {
-      return `Please limit to ${props.stringLength} characters.`;
-    } else if (!validateEmail(props.modelValue)) {
-      return `Please enter a valid email address`;
-    } else {
-      return props.errorMessage;
-    }
-  }
-});
+};
 </script>
 
 <style scoped>
@@ -111,7 +111,7 @@ span:hover .hoverIcon {
       id="input-email5"
       v-model="value"
       :stringLength="8"
-      label="maximum stringLength (4)"
+      label="maximum stringLength (8)"
     />
   </div>
 </template>

diff --git a/apps/molgenis-components/src/components/forms/InputHyperlink.vue b/apps/molgenis-components/src/components/forms/InputHyperlink.vue
@@ -14,7 +14,7 @@
         :value="modelValue"
         @input="
           //@ts-ignore
-          emit('update:modelValue', $event.target?.value)
+          $emit('update:modelValue', $event.target?.value)
         "
         type="text"
         class="form-control"
@@ -27,36 +27,35 @@
   </FormGroup>
 </template>
 
-<script setup lang="ts">
-import { computed } from "vue";
+<script lang="ts">
+import BaseInput from "./baseInputs/BaseInput.vue";
 import FormGroup from "./FormGroup.vue";
 import InputGroup from "./InputGroup.vue";
-import BaseInputProps from "./baseInputs/BaseInputProps";
 import constants from "../constants";
 
-let props = defineProps({
-  ...BaseInputProps,
-  modelValue: {
-    type: String,
-    default: null,
+export default {
+  name: "InputHyperlink",
+  components: { FormGroup, InputGroup },
+  extends: BaseInput,
+  computed: {
+    stringError() {
+      if (typeof this.modelValue === "string") {
+        if (!this.validateHyperlink(this.modelValue)) {
+          return `Please enter a valid hyperlink`;
+        } else {
+          return this.errorMessage;
+        }
+      } else {
+        return this.errorMessage;
+      }
+    },
   },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const stringError = computed(() => {
-  if (typeof props.modelValue === "string") {
-    if (!validateHyperlink(props.modelValue)) {
-      return `Please enter a valid hyperlink`;
-    } else {
-      return props.errorMessage;
-    }
-  }
-});
-
-function validateHyperlink(hyperlink: string) {
-  return hyperlink?.match(constants.HYPERLINK_REGEX);
-}
+  methods: {
+    validateHyperlink(hyperlink: string) {
+      return hyperlink?.match(constants.HYPERLINK_REGEX);
+    },
+  },
+};
 </script>
 
 <style scoped>