feat(VDatePicker): align control variants with MD3

[J-Sek]

Description

• cleanup "classic" and "modern" leftover CSS
• introduce control-variant with docked and modal options
• introduce no-month-picker to merge left buttons into one (very common across other component frameworks, notably MUI)
• introduce controls slot so developers can override controls if they have more specific needs

Preview:

• current version
• single button for year-picker access (called "modal" variant in MD3)
• "docked" mode from MD3

Markup:

Kitchen sink

<template>
  <v-locale-provider locale="en">
    <v-container class="d-flex align-start ga-6 justify-center flex-wrap" width="1600">
      <v-date-picker v-model="value" :max="new Date()" :min="new Date(2000, 9, 15)" elevation="24" />
      <v-date-picker v-model="value" :max="new Date()" :min="new Date(2000, 9, 15)" elevation="24" no-month-picker />
      <v-date-picker v-model="value" :max="new Date()" :min="new Date(2000, 9, 15)" control-variant="docked" elevation="24" />
      <v-date-picker v-model="value" :max="new Date()" :min="new Date(2000, 9, 15)" elevation="24">
        <template #controls="{ nextMonth, prevMonth }">
          <v-btn
            class="px-4 ml-2"
            height="36"
            prepend-icon="$plus"
            text="Add event"
            variant="outlined"
            rounded
          >
            <template #prepend>
              <v-icon class="mx-n1" size="18" />
            </template>
          </v-btn>
          <v-spacer />
          <v-btn icon="$prev" @click="prevMonth " />
          <v-btn icon="$next" @click="nextMonth" />
        </template>
      </v-date-picker>
      <v-date-picker
        v-model="value"
        :max="new Date()"
        :min="new Date(2000, 9, 15)"
        class="weekdays-primary"
        elevation="24"
        weekday-format="short"
        hide-header
      >
        <template #controls="{ disabled, nextMonth, prevMonth, monthYearText }">
          <v-btn :disabled="disabled.includes('prev-month')" color="primary" icon="$prev" @click="prevMonth " />
          <v-spacer />
          <div class="text-center">
            <div class="text-caption my-n1 text-primary">{{ monthYearText.split(' ')[1] }}</div>
            <div class="text-body-1">{{ monthYearText.split(' ')[0] }}</div>
          </div>
          <v-spacer />
          <v-btn :disabled="disabled.includes('next-month')" color="primary" icon="$next" @click="nextMonth" />
        </template>
      </v-date-picker>
      <v-date-picker v-model="value" :max="new Date()" :min="new Date(2000, 9, 15)" elevation="24" hide-header>
        <template #controls="{ monthText, yearText, openMonths, openYears }">
          <v-sheet class="w-100 d-flex align-center rounded-lg pl-1 ga-1" color="rgba(var(--v-theme-on-surface), .2)">
            <v-btn :text="monthText" append-icon="$dropdown" class="bg-surface px-2" @click="openMonths" />
            <v-btn :text="yearText" append-icon="$dropdown" class="bg-surface px-2" @click="openYears" />
            <v-spacer />
            <v-btn icon="$close" />
          </v-sheet>
        </template>
      </v-date-picker>
    </v-container>
  </v-locale-provider>
  <!-- verify with RTL: <v-locale-provider locale="ar"> ... </v-locale-provider> -->
</template>

<script setup>
  import { shallowRef } from 'vue'
  const value = shallowRef(null)
</script>

<style>
.weekdays-primary {
  padding-top: 12px;
  .v-date-picker-month__weekday {
    color: rgb(var(--v-theme-primary));
  }

  .v-date-picker-month__days {
    position: relative;

    &:before,
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background-color: rgb(var(--v-theme-primary));
      top: 4px;
    }

    &:after {
      top: 36px;
    }
  }
}
</style>

[J-Sek]

Done. All buttons are rounded now.

Playground (in the description) is updated and includes more fun examples of #controls slot use cases.

I wonder if the documentation examples should include them all or just the first one.

BTW. It opens a way to deliver dual calendar picker with less hacks.. (my last attempt) although there is still a challenge to have single selection model.

[johnleider]

This looks great. The only changes missing completely would be updating the md1/2/3 blueprints so that the picker is inline with that version of md.

[J-Sek]

...updating the md1/2/3 blueprints...

• option 1: variant: 'docked' could land in md3.ts, other blueprint just pick up modal variant that is currently default
• option 2: we change default to docked and update md1 and md2 to revert them back to modal

@johnleider, is there anything except this simple change? (and a decision between those options)

[johnleider]

@johnleider, is there anything except this simple change? (and a decision between those options)

Not from me, that's all I had.