Overriding slots like `action-preview` requires fully reimplementing internal logic

[stevelacey]

Right now, overriding slots such as action-preview is difficult because the slot does not receive the internal helpers it depends on. This forces users to replicate all of the component’s internal logic, which can get quite complex.

A good example is the action preview, which handles multiple scenarios internally:

vue-datepicker/src/VueDatePicker/components/ActionRow.vue

Lines 21 to 24 in b077874

	<slot v-if="$slots['action-preview'] && showPreview" name="action-preview" :value="modelValue" />
	<template v-if="!$slots['action-preview'] && showPreview">
	{{ formatValue }}
	</template>

Since the slot doesn’t expose formatValue, customizing the preview requires copying everything the component already does.

Request: Pass formatValue into the action-preview slot

If formatValue were passed to the slot scope, users could easily extend or tweak the displayed preview without reimplementing the whole component. For example:

<template #action-preview="{ formatValue }">
  {{ formatValue.replace('-', ' – ') }} + more
</template>

Tangential note: It might also be worth considering a global/config-level prop for the date separator. I currently override it in the one supported place (text-input), but I’m finding other areas where it needs replacing as well. There also seem to be some inconsistencies in how range values render in the text input (spaces appearing and disappearing), which a centralized separator config could help avoid.

[stevelacey]

@Jasenkoo nice, thanks! 🙏

Just a heads up, there’s a small typo (ormat) in the docs.

Also, you might want to pass selectDate through to action-buttons as well, so users don’t have to rely on the expose.