Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.51k stars 152 forks source link

Expose the `AllProps` and `PickerBaseProps` objects #1032

Open DenisLantero opened 2 weeks ago

DenisLantero commented 2 weeks ago

Describe the problem that you have I am trying to create a rapper to VueDatePicker, the issue that I'm having is that as soon as I use Vue's withDefaults and defineProps, and v-bind the props objects to VueDatePicker, I rightfully lose the default values of the props, like this:

<template>
  <VueDatePicker
    v-bind="props"
    v-model="date"
  />
</template>

<script setup lang="ts">
import type { ModelValue as DatePickerModelValue, VueDatePickerProps } from '@vuepic/vue-datepicker'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

const props = withDefaults(defineProps<VueDatePickerProps>(), {
})

const date = defineModel<DatePickerModelValue>('')
</script>

It would be nice to have them available somewhere, either via exports or via the VueDatePicker exposes.

Describe the solution you'd like I noticed that there are already 2 objects defined in your source code that define the defaults for the component, AllProps and PickerBaseProps. The problem is that you don't export them in entry.esm.ts, and, when we install the package, the source code isn't included, therefore I don't have a real way to access these objects.

You could either export those and any other useful constants/objects in the entry.esm.ts file, include the source code in the npm registry, or expose them using Vue's defineExpose in VueDatePicker, as you are already doing for the following methods:

    defineExpose({
        closeMenu,
        selectDate,
        clearValue,
        openMenu,
        onScroll,
        formatInputValue, // exposed for testing purposes
        updateInternalModelValue, // modify internal modelValue
        setMonthYear,
        parseModel,
        switchView,
        toggleMenu,
        handleFlow,
        dpWrapMenuRef,
    });

Describe alternatives you've considered I already tried the following, but nothing worked:

1:

const props = withDefaults(defineProps<VueDatePickerProps>(), {
  ...VueDatePicker.props
})
TypeError: parent.insertBefore is not a function

2:

const props = withDefaults(defineProps<VueDatePickerProps>(), {
  ...new VueDatePicker().$options.props,
})
 VueDatePicker is not a constructor

Are there any other ways to do this, without changing the library that might work? Please let me know, thanks

DenisLantero commented 2 weeks ago

For anyone wondering, the workaround is this:

const props = withDefaults(defineProps<BsdkNewDatePickerProps>(), {
  ...Object.entries(VueDatePicker.props).reduce((acc, [key, prop]: any[]) => {
    acc[key] = prop.default
    return acc
  }, {} as Record<string, any>),

  // Redifine all the props' defaults here
  enableTimePicker: false,
})

Still, it would be nice to have access to those interfaces, or to the source code directly