[Feature Request] Support scrolling/touch interactions in VMonthPicker
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Problem to solve
In current version of VMonthPicker it uses a fixed width about ~300px, and i want to show a row of months.
If you set 12 cols for VMonthPicker months and set class="w-100", it displays a row of months, but is cutted when the parent width is too short, and is non scrollable.
See the following image.
Template vue
<v-month-picker
v-model="selectedMonths"
hide-header
hide-title
:months-columns="12"
multiple="range"
class="w-100"
@update:model-value="searchReservations">
</v-month-picker>
Proposed solution
Set width to 100% to the month picker root, to display the full row of months.
In months, set width to 100% and overflow x to auto.
In months, remove flex-grow-1 (optional).
Translated, this custom style works as solution, so I propose to add a property maybe called 'fill' or 'fluid' or other name to apply this config automatically. This is useful to display a month selector in top of the page. In my case to filter reservations from january to august for example.
Maybe there is a better solution, perhaps the month grid could adapt to the size of parent and wrap the months in multiple rows if the width is not enough instead of using scrollbars, so the user don't need to scroll.
<template>
<v-month-picker
v-model="selectedMonths"
hide-header
hide-title
:months-columns="12"
multiple="range"
class="month-picker-fill"
@update:model-value="searchReservations">
</v-month-picker>
</template>
<style>
.month-picker-fill.v-picker.v-month-picker {
width: 100%;
.v-month-picker__months {
overflow-x: auto;
width: 100%;
}
}
</style>
it still adapts to the cols system.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the VMonthPicker implementation and its existing styling and tests. Compare the proposed full-width, horizontal-overflow behavior with the alternative of wrapping month columns, then define the supported behavior and verify it at narrow and wide parent widths.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100