Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VueDatePickerProps textInput doesn't use the TextInputOptions interface #1029

Closed
DenisLantero opened this issue Nov 5, 2024 · 2 comments
Closed
Labels
wontfix This will not be worked on

Comments

@DenisLantero
Copy link

I am writing a wrapper component to VueDatePicker, in expanding the props I have a TypeScript problem with the textInput prop, I noticed that you didn't use the TextInputOptions interface in the type declaration of VueDatePickerProps but you redefined the interface. For some reason, TypeScript isn't able to compute that correctly, and therefore when I try to redefine the props' defaults, it gives me the following:

export type BsdkNewDatePickerProps = Omit<VueDatePickerProps, 'uid'> & {
  id?: string
}

const _props = withDefaults(defineProps<BsdkNewDatePickerProps>(), {
  enableTimePicker: false,
  textInput: {
    enterSubmit: true,
    tabSubmit: true,
    openMenu: 'open',
    rangeSeparator: '-',
  },
})
Object literal may only specify known properties, and 'enterSubmit' does not exist in type '(props: LooseRequired<BsdkNewDatePickerProps>) => boolean | { enterSubmit?: boolean | undefined; tabSubmit?: boolean | undefined; openMenu?: boolean | ... 2 more ... | undefined; rangeSeparator?: string | undefined; selectOnFocus?: boolean | undefined; format?: string | ... 2 more ... | undefined; }'.ts-plugin(2353)

index.d.ts(191, 5): The expected type comes from property 'textInput' which is declared here on type 'InferDefaults<LooseRequired<BsdkNewDatePickerProps>>'

I believe this can be fixed by setting the type in textInput prop to

boolean | TextInputOptions

instead of

textInput?:
        | boolean
        | {
              enterSubmit?: boolean;
              tabSubmit?: boolean;
              openMenu?: 'open' | 'toggle' | boolean;
              rangeSeparator?: string;
              selectOnFocus?: boolean;
              format?: string | string[] | ((value: string) => Date | null);
          };

let me know if this is the solution or if I am overseeing anything, thank you.

Desktop & mobile (please complete the following information):

  • Library version - 10.0.0
@DenisLantero DenisLantero added awaiting triage The issue is not reviewed by the maintainers bug Something isn't working labels Nov 5, 2024
@DenisLantero
Copy link
Author

DenisLantero commented Nov 5, 2024

I found the problem, I forgot to wrap the textInput object in an anonymus function, now it works if I do this:

const _props = withDefaults(defineProps<BsdkNewDatePickerProps>(), {
  enableTimePicker: false,
  textInput: () => ({
    enterSubmit: true,
    tabSubmit: true,
    openMenu: 'open',
    rangeSeparator: '-',
  }),
})

But still, I think that it would be better if VueDatePickerProps uses the exposed interfaces instead of redifining them, to avoid possible errors in the next versions, not only for the textInput prop, but for the following as well: filters, transitions, presetDates, ariaLabels, highlight and disabledTimes (if there are any other interfaces that are getting exposed)

@Jasenkoo Jasenkoo removed the awaiting triage The issue is not reviewed by the maintainers label Dec 25, 2024
@Jasenkoo
Copy link
Contributor

Jasenkoo commented Jan 4, 2025

That is ok, redefined types are intentional.

@Jasenkoo Jasenkoo closed this as completed Jan 4, 2025
@Jasenkoo Jasenkoo added wontfix This will not be worked on and removed bug Something isn't working labels Jan 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

2 participants