From 28605221432badf3aad48d131ecb5455935afce5 Mon Sep 17 00:00:00 2001 From: sgfost <46429375+sgfost@users.noreply.github.com> Date: Wed, 3 May 2023 19:58:24 -0700 Subject: [PATCH] fix: revert prop type sharing using imported types with defineProps is currently unsupported but has been fixed awaiting a release in https://github.com/vuejs/core/pull/8083 --- .../__tests__/CodebaseSearch.test.ts | 22 +++++++++---------- .../src/components/form/CheckboxField.vue | 12 ++++++++-- .../src/components/form/DatepickerField.vue | 9 ++++++-- .../src/components/form/MarkdownField.vue | 9 ++++++-- .../src/components/form/ResearchOrgField.vue | 9 ++++++-- .../components/form/ResearchOrgListField.vue | 12 ++++++++-- .../src/components/form/SelectField.vue | 9 ++++++-- .../src/components/form/TaggerField.vue | 9 ++++++-- .../src/components/form/TextField.vue | 9 ++++++-- .../src/components/form/TextListField.vue | 12 ++++++++-- .../src/components/form/TextareaField.vue | 9 ++++++-- 11 files changed, 90 insertions(+), 31 deletions(-) diff --git a/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts b/frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts index 22527a802..ae9fd1b9f 100644 --- 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 index ee266d58c..b7b7f056d 100644 --- 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(), { +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(), { help: "", }); diff --git a/frontend-vue3/src/components/form/DatepickerField.vue b/frontend-vue3/src/components/form/DatepickerField.vue index 6bed3508b..658a58f69 100644 --- 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 index 7396a7504..3d496c832 100644 --- 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 index facb17754..09c654ead 100644 --- 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 index c41228a20..9148b8cd0 100644 --- 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(); +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(); onMounted(() => { if (!value.value) { diff --git a/frontend-vue3/src/components/form/SelectField.vue b/frontend-vue3/src/components/form/SelectField.vue index af13b453b..6411ea606 100644 --- 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 index 23ad8d4a5..23fdffea9 100644 --- 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 index 2bb5ffd36..0f2b416cc 100644 --- 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 index d0c144a77..717f4cdb6 100644 --- 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(); +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(); onMounted(() => { if (!value.value) { diff --git a/frontend-vue3/src/components/form/TextareaField.vue b/frontend-vue3/src/components/form/TextareaField.vue index ba25397d0..52d402c79 100644 --- 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; }