fix: revert prop type sharing

using imported types with defineProps is currently unsupported but has been fixed awaiting a release in vuejs/core#8083
sgfost · May 4, 2023 · 2860522 · 2860522
1 parent db8c099
commit 2860522
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 31 deletions.
diff --git a/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts b/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts
@@ -13,27 +13,27 @@ describe("CodebaseListSidebar.vue", () => {
     const baseSearch = wrapper.findComponent(ListSidebar);
     expect(baseSearch.exists()).toBe(true);
 
-    const TextField = wrapper.findComponent(TextField);
-    expect(TextField.exists()).toBe(true);
+    const textField = wrapper.findComponent(TextField);
+    expect(textField.exists()).toBe(true);
 
     const anyDatePicker = wrapper.findComponent(DatepickerField);
     expect(anyDatePicker.exists()).toBe(true);
 
-    const TaggerField = wrapper.findComponent(TaggerField);
-    expect(TaggerField.exists()).toBe(true);
+    const taggerField = wrapper.findComponent(TaggerField);
+    expect(taggerField.exists()).toBe(true);
 
-    const SelectField = wrapper.findComponent(SelectField);
-    expect(SelectField.exists()).toBe(true);
-    expect(SelectField.props("options").length).toEqual(3);
+    const selectField = wrapper.findComponent(SelectField);
+    expect(selectField.exists()).toBe(true);
+    expect(selectField.props("options").length).toEqual(3);
   });
 
   it("updates the query computed value based on form inputs", async () => {
     const wrapper = mount(CodebaseListSidebar);
 
-    const TextField = wrapper.findComponent(TextField);
-    const TextFieldElement = TextField.find("input");
-    TextFieldElement.element.value = "test keyword";
-    await TextFieldElement.trigger("input");
+    const textField = wrapper.findComponent(TextField);
+    const textFieldElement = textField.find("input");
+    textFieldElement.element.value = "test keyword";
+    await textFieldElement.trigger("input");
     await wrapper.vm.$nextTick();
     const baseSearch = wrapper.findComponent(ListSidebar);
     const searchUrl = baseSearch.props("searchUrl");

diff --git a/frontend-vue3/src/components/form/CheckboxField.vue b/frontend-vue3/src/components/form/CheckboxField.vue
@@ -24,9 +24,17 @@ import { useField } from "@/composables/form";
 import FieldLabel from "@/components/form/FieldLabel.vue";
 import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
-import type { BaseFieldProps } from "@/types";
 
-const props = withDefaults(defineProps<BaseFieldProps>(), {
+export interface CheckBoxFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+const props = withDefaults(defineProps<CheckBoxFieldProps>(), {
   help: "",
 });
 

diff --git a/frontend-vue3/src/components/form/DatepickerField.vue b/frontend-vue3/src/components/form/DatepickerField.vue
@@ -37,9 +37,14 @@ import FieldLabel from "@/components/form/FieldLabel.vue";
 import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
-import type { BaseFieldProps } from "@/types";
 
-interface DatepickerFieldProps extends BaseFieldProps {
+export interface DatepickerFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   minDate?: Date;
   maxDate?: Date;
 }

diff --git a/frontend-vue3/src/components/form/MarkdownField.vue b/frontend-vue3/src/components/form/MarkdownField.vue
@@ -35,9 +35,14 @@ import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import { inject } from "vue";
-import type { BaseFieldProps } from "@/types";
 
-interface MarkdownFieldProps extends BaseFieldProps {
+interface MarkdownFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   rows?: number;
 }
 

diff --git a/frontend-vue3/src/components/form/ResearchOrgField.vue b/frontend-vue3/src/components/form/ResearchOrgField.vue
@@ -73,9 +73,14 @@ import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import type { Organization } from "@/types";
-import type { BaseFieldProps } from "@/types";
 
-interface ResearchOrgFieldProps extends BaseFieldProps {
+interface ResearchOrgFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   disabled?: boolean;
   clearOnSelect: boolean;
 }

diff --git a/frontend-vue3/src/components/form/ResearchOrgListField.vue b/frontend-vue3/src/components/form/ResearchOrgListField.vue
@@ -101,9 +101,17 @@ import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import type { Organization } from "@/types";
-import type { BaseFieldProps } from "@/types";
 
-const props = defineProps<BaseFieldProps>();
+export interface ResearchOrgListFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+const props = defineProps<ResearchOrgListFieldProps>();
 
 onMounted(() => {
   if (!value.value) {

diff --git a/frontend-vue3/src/components/form/SelectField.vue b/frontend-vue3/src/components/form/SelectField.vue
@@ -36,9 +36,14 @@ import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import { inject } from "vue";
-import type { BaseFieldProps } from "@/types";
 
-interface SelectFieldProps extends BaseFieldProps {
+interface SelectFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   options: { value: any; label: string }[];
 }
 

diff --git a/frontend-vue3/src/components/form/TaggerField.vue b/frontend-vue3/src/components/form/TaggerField.vue
@@ -57,9 +57,14 @@ import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
 import { useTagsAPI } from "@/composables/api/tags";
 import type { Tags, TagType } from "@/types";
-import type { BaseFieldProps } from "@/types";
 
-interface TaggerFieldProps extends BaseFieldProps {
+interface TaggerFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   type?: TagType;
 }
 

diff --git a/frontend-vue3/src/components/form/TextField.vue b/frontend-vue3/src/components/form/TextField.vue
@@ -28,9 +28,14 @@ import FieldLabel from "@/components/form/FieldLabel.vue";
 import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
-import type { BaseFieldProps } from "@/types";
 
-interface TextFieldProps extends BaseFieldProps {
+export interface TextFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   // generally it is better to leave type="text" for url/email/etc. inputs so that the browser
   // does not perform any validation before the form/yup does leading to visual inconsistency
   type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";

diff --git a/frontend-vue3/src/components/form/TextListField.vue b/frontend-vue3/src/components/form/TextListField.vue
@@ -54,9 +54,17 @@ import FieldLabel from "@/components/form/FieldLabel.vue";
 import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
-import type { BaseFieldProps } from "@/types";
 
-const props = defineProps<BaseFieldProps>();
+export interface TextListFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+const props = defineProps<TextListFieldProps>();
 
 onMounted(() => {
   if (!value.value) {

diff --git a/frontend-vue3/src/components/form/TextareaField.vue b/frontend-vue3/src/components/form/TextareaField.vue
@@ -28,9 +28,14 @@ import FieldLabel from "@/components/form/FieldLabel.vue";
 import FieldHelp from "@/components/form/FieldHelp.vue";
 import FieldError from "@/components/form/FieldError.vue";
 import FormPlaceholder from "@/components/form/FormPlaceholder.vue";
-import type { BaseFieldProps } from "@/types";
 
-interface TextareaFieldProps extends BaseFieldProps {
+interface TextareaFieldProps {
+  // FIXME: extend from types/BaseFieldProps when vuejs/core#8083 makes it into a release
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
   rows?: number;
 }