vuetify 3.3.16 → 3.3.18

package/lib/labs/VDataTable/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/labs/VDataTable/types.ts"],"sourcesContent":["// Types\nimport type { GroupableItem } from './composables/group'\nimport type { SelectableItem } from './composables/select'\nimport type { InternalItem } from '@/composables/filter'\nimport type { SelectItemKey } from '@/util'\n\nexport type DataTableCompareFunction<T = any> = (a: T, b: T) => number\n\nexport type DataTableHeader = {\n  key: string\n  value?: SelectItemKey\n  title: string\n\n  colspan?: number\n  rowspan?: number\n\n  fixed?: boolean\n  align?: 'start' | 'end' | 'center'\n\n  width?: number | string\n  minWidth?: string\n  maxWidth?: string\n\n  sortable?: boolean\n  sort?: DataTableCompareFunction\n}\n\nexport type InternalDataTableHeader = DataTableHeader & {\n  sortable: boolean\n  fixedOffset?: number\n  lastFixed?: boolean\n}\n\nexport interface DataTableItem<T = any> extends InternalItem<T>, GroupableItem<T>, SelectableItem {\n  key: any\n  index: number\n  columns: {\n    [key: string]: any\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/labs/VDataTable/types.ts"],"sourcesContent":["// Types\nimport type { provideExpanded } from './composables/expand'\nimport type { Group, GroupableItem, provideGroupBy } from './composables/group'\nimport type { provideSelection, SelectableItem } from './composables/select'\nimport type { InternalItem } from '@/composables/filter'\nimport type { SelectItemKey } from '@/util'\n\nexport type DataTableCompareFunction<T = any> = (a: T, b: T) => number\n\nexport type DataTableHeader = {\n  key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {})\n  value?: SelectItemKey\n  title: string\n\n  colspan?: number\n  rowspan?: number\n\n  fixed?: boolean\n  align?: 'start' | 'end' | 'center'\n\n  width?: number | string\n  minWidth?: string\n  maxWidth?: string\n\n  sortable?: boolean\n  sort?: DataTableCompareFunction\n}\n\nexport type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value'> & {\n  key: string | null\n  value: SelectItemKey | null\n  sortable: boolean\n  fixedOffset?: number\n  lastFixed?: boolean\n}\n\nexport interface DataTableItem<T = any> extends InternalItem<T>, GroupableItem<T>, SelectableItem {\n  key: any\n  index: number\n  columns: {\n    [key: string]: any\n  }\n}\n\nexport type GroupHeaderSlot = {\n  index: number\n  item: Group\n  columns: InternalDataTableHeader[]\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']\n}\n\ntype ItemSlotBase<T = any> = {\n  index: number\n  item: T\n  internalItem: DataTableItem<T>\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n}\n\nexport type ItemSlot<T = any> = ItemSlotBase<T> & {\n  columns: InternalDataTableHeader[]\n}\n\nexport type ItemKeySlot<T = any> = ItemSlotBase<T> & {\n  value: any\n  column: InternalDataTableHeader\n}\n"],"mappings":""}

package/lib/labs/VDateInput/index.d.mts

@@ -207,7 +207,7 @@ declare const VDateInput: {
             "v-slot:prepend-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:append-inner"?: false | ((arg: DefaultInputSlot) => vue.VNodeChild) | undefined;
             suffix?: string | undefined;
-            counterValue?: ((value: any) => number) | undefined;
+            counterValue?: number | ((value: any) => number) | undefined;
             modelModifiers?: Record<string, boolean> | undefined;
             "v-slot:counter"?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
             "onUpdate:displayDate"?: ((date: any) => any) | undefined;
@@ -325,7 +325,7 @@ declare const VDateInput: {
             hideDetails?: boolean | "auto" | undefined;
             baseColor?: string | undefined;
             suffix?: string | undefined;
-            counterValue?: ((value: any) => number) | undefined;
+            counterValue?: number | ((value: any) => number) | undefined;
             modelModifiers?: Record<string, boolean> | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -541,7 +541,7 @@ declare const VDateInput: {
         hideDetails?: boolean | "auto" | undefined;
         baseColor?: string | undefined;
         suffix?: string | undefined;
-        counterValue?: ((value: any) => number) | undefined;
+        counterValue?: number | ((value: any) => number) | undefined;
         modelModifiers?: Record<string, boolean> | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -664,7 +664,7 @@ declare const VDateInput: {
     hideDetails?: boolean | "auto" | undefined;
     baseColor?: string | undefined;
     suffix?: string | undefined;
-    counterValue?: ((value: any) => number) | undefined;
+    counterValue?: number | ((value: any) => number) | undefined;
     modelModifiers?: Record<string, boolean> | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -895,7 +895,7 @@ declare const VDateInput: {
     'onClick:append': vue.PropType<EventProp<[MouseEvent], (args_0: MouseEvent) => any>>;
     autofocus: BooleanConstructor;
     counter: vue.PropType<string | number | true>;
-    counterValue: vue.PropType<(value: any) => number>;
+    counterValue: vue.PropType<number | ((value: any) => number)>;
     prefix: StringConstructor;
     placeholder: {
         type: vue.PropType<string>;
@@ -1022,7 +1022,7 @@ declare const VDateInput: {
     'onClick:append': vue.PropType<EventProp<[MouseEvent], (args_0: MouseEvent) => any>>;
     autofocus: BooleanConstructor;
     counter: vue.PropType<string | number | true>;
-    counterValue: vue.PropType<(value: any) => number>;
+    counterValue: vue.PropType<number | ((value: any) => number)>;
     prefix: StringConstructor;
     placeholder: {
         type: vue.PropType<string>;

package/lib/labs/VDatePicker/VDatePicker.mjs

@@ -1,4 +1,4 @@
-import { resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { resolveDirective as _resolveDirective, Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VDatePicker.css";
 
@@ -82,7 +82,9 @@ export const VDatePicker = genericComponent()({
     const isReversing = shallowRef(false);
     const inputModel = ref(model.value.map(date => adapter.format(date, 'keyboardDate')));
     const temporaryModel = ref(model.value);
-    const title = computed(() => t(props.title));
+    const title = computed(() => {
+      return props.variant === 'modern' ? t(props.title) : adapter.format(displayDate.value, 'shortDate');
+    });
     const header = computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
     const headerIcon = computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon);
     const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
@@ -154,6 +156,9 @@ export const VDatePicker = genericComponent()({
     function onClickMode() {
       viewMode.value = viewMode.value === 'month' ? 'year' : 'month';
     }
+    function onClickHeader() {
+      viewMode.value = 'month';
+    }
     const headerSlotProps = computed(() => ({
       header: header.value,
       appendIcon: headerIcon.value,
@@ -166,15 +171,20 @@ export const VDatePicker = genericComponent()({
       const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
       const [datePickerYearsProps] = VDatePickerYears.filterProps(props);
       return _createVNode(VPicker, _mergeProps(pickerProps, {
-        "class": ['v-date-picker', props.class],
+        "class": ['v-date-picker', `v-date-picker--${viewMode.value}`, props.class],
         "style": props.style,
-        "title": title.value,
         "width": props.showWeek ? 408 : 360
       }), {
+        title: () => slots.title?.() ?? _createVNode("div", {
+          "class": "v-date-picker__title",
+          "onClick": props.variant === 'classic' ? onClickMode : undefined
+        }, [title.value]),
         header: () => slots.header?.(headerSlotProps.value) ?? _createVNode(VDatePickerHeader, _mergeProps({
           "key": "header"
-        }, headerSlotProps.value), null),
-        default: () => inputMode.value === 'calendar' ? _createVNode(_Fragment, null, [_createVNode(VDatePickerControls, _mergeProps(datePickerControlsProps, {
+        }, headerSlotProps.value, {
+          "onClick": viewMode.value === 'year' ? onClickHeader : undefined
+        }), null),
+        default: () => inputMode.value === 'calendar' ? _createVNode(_Fragment, null, [(props.variant !== 'classic' || viewMode.value !== 'year') && _createVNode(VDatePickerControls, _mergeProps(datePickerControlsProps, {
           "disabled": disabled.value,
           "displayDate": adapter.format(displayDate.value, 'monthAndYear'),
           "onClick:next": onClickNext,
@@ -208,7 +218,7 @@ export const VDatePicker = genericComponent()({
           "label": t(props.inputText),
           "placeholder": props.inputPlaceholder
         }, null)]),
-        actions: () => !props.hideActions ? _createVNode("div", null, [_createVNode(VBtn, {
+        actions: () => !props.hideActions ? slots.actions?.() ?? _createVNode("div", null, [_createVNode(VBtn, {
           "variant": "text",
           "color": props.color,
           "onClick": onClickCancel,

package/lib/labs/VDatePicker/VDatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePicker.mjs","names":["makeVDatePickerControlsProps","VDatePickerControls","VDatePickerHeader","makeVDatePickerMonthProps","VDatePickerMonth","makeVDatePickerYearsProps","VDatePickerYears","VFadeTransition","VBtn","VTextField","dateEmits","makeDateProps","makeVPickerProps","VPicker","createDatePicker","useLocale","useDate","computed","ref","shallowRef","watch","genericComponent","propsFactory","useRender","makeVDatePickerProps","calendarIcon","type","String","default","keyboardIcon","cancelText","okText","inputText","inputPlaceholder","header","hideActions","Boolean","title","VDatePicker","name","props","emits","click:cancel","click:save","setup","_ref","emit","slots","adapter","t","model","displayDate","viewMode","inputMode","isEqual","isReversing","inputModel","value","map","date","format","temporaryModel","length","headerIcon","headerTransition","minDate","min","isValid","maxDate","max","disabled","targets","addDays","startOfMonth","isAfter","push","endOfMonth","getFullYear","val","oldVal","isBefore","updateFromInput","input","index","inputDate","newModel","slice","onClickCancel","onClickSave","onClickAppend","onClickNext","addMonths","onClickPrev","onClickMode","headerSlotProps","appendIcon","transition","pickerProps","filterProps","datePickerControlsProps","datePickerMonthProps","datePickerYearsProps","_createVNode","_mergeProps","class","style","showWeek","_Fragment","$event","v","actions","color","undefined"],"sources":["../../../src/labs/VDatePicker/VDatePicker.tsx"],"sourcesContent":["// Styles\nimport './VDatePicker.sass'\n\n// Components\nimport { makeVDatePickerControlsProps, VDatePickerControls } from './VDatePickerControls'\nimport { VDatePickerHeader } from './VDatePickerHeader'\nimport { makeVDatePickerMonthProps, VDatePickerMonth } from './VDatePickerMonth'\nimport { makeVDatePickerYearsProps, VDatePickerYears } from './VDatePickerYears'\nimport { VFadeTransition } from '@/components/transitions'\nimport { VBtn } from '@/components/VBtn'\nimport { VTextField } from '@/components/VTextField'\nimport { dateEmits, makeDateProps } from '@/labs/VDateInput/composables'\nimport { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'\n\n// Composables\nimport { createDatePicker } from './composables'\nimport { useLocale } from '@/composables/locale'\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VDatePickerSlots = {\n  header: {\n    header: string\n    appendIcon: string\n    'onClick:append': () => void\n  }\n}\n\nexport const makeVDatePickerProps = propsFactory({\n  calendarIcon: {\n    type: String,\n    default: '$calendar',\n  },\n  keyboardIcon: {\n    type: String,\n    default: '$edit',\n  },\n  cancelText: {\n    type: String,\n    default: '$vuetify.datePicker.cancel',\n  },\n  okText: {\n    type: String,\n    default: '$vuetify.datePicker.ok',\n  },\n  inputText: {\n    type: String,\n    default: '$vuetify.datePicker.input.placeholder',\n  },\n  inputPlaceholder: {\n    type: String,\n    default: 'dd/mm/yyyy',\n  },\n  header: {\n    type: String,\n    default: '$vuetify.datePicker.header',\n  },\n  hideActions: Boolean,\n\n  ...makeDateProps(),\n  ...makeVDatePickerControlsProps(),\n  ...makeVDatePickerMonthProps(),\n  ...makeVDatePickerYearsProps(),\n  ...makeVPickerProps({ title: '$vuetify.datePicker.title' }),\n}, 'VDatePicker')\n\nexport const VDatePicker = genericComponent<VDatePickerSlots>()({\n  name: 'VDatePicker',\n\n  props: makeVDatePickerProps(),\n\n  emits: {\n    'click:cancel': () => true,\n    'click:save': () => true,\n    ...dateEmits,\n  },\n\n  setup (props, { emit, slots }) {\n    const adapter = useDate()\n    const { t } = useLocale()\n\n    const { model, displayDate, viewMode, inputMode, isEqual } = createDatePicker(props)\n\n    const isReversing = shallowRef(false)\n\n    const inputModel = ref(model.value.map(date => adapter.format(date, 'keyboardDate')))\n    const temporaryModel = ref(model.value)\n    const title = computed(() => t(props.title))\n    const header = computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header))\n    const headerIcon = computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon)\n    const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`)\n    const minDate = computed(() => props.min && adapter.isValid(props.min) ? adapter.date(props.min) : null)\n    const maxDate = computed(() => props.max && adapter.isValid(props.max) ? adapter.date(props.max) : null)\n\n    const disabled = computed(() => {\n      if (!minDate.value && !maxDate.value) return false\n\n      const targets = []\n\n      if (minDate.value) {\n        const date = adapter.addDays(adapter.startOfMonth(displayDate.value), -1)\n\n        adapter.isAfter(minDate.value, date) && targets.push('prev')\n      }\n\n      if (maxDate.value) {\n        const date = adapter.addDays(adapter.endOfMonth(displayDate.value), 1)\n\n        adapter.isAfter(date, maxDate.value) && targets.push('next')\n      }\n\n      if (minDate.value?.getFullYear() === maxDate.value?.getFullYear()) {\n        targets.push('mode')\n      }\n\n      return targets\n    })\n\n    watch(model, val => {\n      if (!isEqual(val, temporaryModel.value)) {\n        temporaryModel.value = val\n      }\n\n      inputModel.value = val.map(date => adapter.format(date, 'keyboardDate'))\n    })\n\n    watch(temporaryModel, (val, oldVal) => {\n      if (props.hideActions && !isEqual(val, model.value)) {\n        model.value = val\n      }\n\n      if (val[0] && oldVal[0]) {\n        isReversing.value = adapter.isBefore(val[0], oldVal[0])\n      }\n    })\n\n    function updateFromInput (input: string, index: number) {\n      const { isValid, date, isAfter } = adapter\n      const inputDate = date(input)\n\n      if (\n        isValid(input) &&\n        (!minDate.value || !isAfter(minDate.value, inputDate)) &&\n        (!maxDate.value || !isAfter(inputDate, maxDate.value))\n      ) {\n        const newModel = model.value.slice()\n        newModel[index] = date(input)\n\n        if (props.hideActions) {\n          model.value = newModel\n        } else {\n          temporaryModel.value = newModel\n        }\n      }\n    }\n\n    function onClickCancel () {\n      emit('click:cancel')\n    }\n\n    function onClickSave () {\n      emit('click:save')\n\n      model.value = temporaryModel.value\n    }\n\n    function onClickAppend () {\n      inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar'\n    }\n\n    function onClickNext () {\n      displayDate.value = adapter.addMonths(displayDate.value, 1)\n    }\n\n    function onClickPrev () {\n      displayDate.value = adapter.addMonths(displayDate.value, -1)\n    }\n\n    function onClickMode () {\n      viewMode.value = viewMode.value === 'month' ? 'year' : 'month'\n    }\n\n    const headerSlotProps = computed(() => ({\n      header: header.value,\n      appendIcon: headerIcon.value,\n      transition: headerTransition.value,\n      'onClick:append': onClickAppend,\n    }))\n\n    useRender(() => {\n      const [pickerProps] = VPicker.filterProps(props)\n      const [datePickerControlsProps] = VDatePickerControls.filterProps(props)\n      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props)\n      const [datePickerYearsProps] = VDatePickerYears.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          class={[\n            'v-date-picker',\n            props.class,\n          ]}\n          style={ props.style }\n          title={ title.value }\n          width={ props.showWeek ? 408 : 360 }\n          v-slots={{\n            header: () => slots.header?.(headerSlotProps.value) ?? (\n              <VDatePickerHeader\n                key=\"header\"\n                { ...headerSlotProps.value }\n              />\n            ),\n            default: () => inputMode.value === 'calendar' ? (\n              <>\n                <VDatePickerControls\n                  { ...datePickerControlsProps }\n                  disabled={ disabled.value }\n                  displayDate={ adapter.format(displayDate.value, 'monthAndYear') }\n                  onClick:next={ onClickNext }\n                  onClick:prev={ onClickPrev }\n                  onClick:mode={ onClickMode }\n                />\n\n                <VFadeTransition hideOnLeave>\n                  { viewMode.value === 'month' ? (\n                    <VDatePickerMonth\n                      key=\"date-picker-month\"\n                      { ...datePickerMonthProps }\n                      v-model={ temporaryModel.value }\n                      displayDate={ displayDate.value }\n                      min={ minDate.value }\n                      max={ maxDate.value }\n                    />\n                  ) : (\n                    <VDatePickerYears\n                      key=\"date-picker-years\"\n                      { ...datePickerYearsProps }\n                      v-model:displayDate={ displayDate.value }\n                      min={ minDate.value }\n                      max={ maxDate.value }\n                      onClick:mode={ onClickMode }\n                    />\n                  )}\n                </VFadeTransition>\n              </>\n            ) : (\n              <div class=\"v-date-picker__input\">\n                <VTextField\n                  modelValue={ inputModel.value[0] }\n                  onUpdate:modelValue={ v => updateFromInput(v, 0) }\n                  label={ t(props.inputText) }\n                  placeholder={ props.inputPlaceholder }\n                />\n              </div>\n            ),\n            actions: () => !props.hideActions ? (\n              <div>\n                <VBtn\n                  variant=\"text\"\n                  color={ props.color }\n                  onClick={ onClickCancel }\n                  text={ t(props.cancelText) }\n                />\n\n                <VBtn\n                  variant=\"text\"\n                  color={ props.color }\n                  onClick={ onClickSave }\n                  text={ t(props.okText) }\n                />\n              </div>\n            ) : undefined,\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePicker = InstanceType<typeof VDatePicker>\n"],"mappings":"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"}
+{"version":3,"file":"VDatePicker.mjs","names":["makeVDatePickerControlsProps","VDatePickerControls","VDatePickerHeader","makeVDatePickerMonthProps","VDatePickerMonth","makeVDatePickerYearsProps","VDatePickerYears","VFadeTransition","VBtn","VTextField","dateEmits","makeDateProps","makeVPickerProps","VPicker","createDatePicker","useLocale","useDate","computed","ref","shallowRef","watch","genericComponent","propsFactory","useRender","makeVDatePickerProps","calendarIcon","type","String","default","keyboardIcon","cancelText","okText","inputText","inputPlaceholder","header","hideActions","Boolean","title","VDatePicker","name","props","emits","click:cancel","click:save","setup","_ref","emit","slots","adapter","t","model","displayDate","viewMode","inputMode","isEqual","isReversing","inputModel","value","map","date","format","temporaryModel","variant","length","headerIcon","headerTransition","minDate","min","isValid","maxDate","max","disabled","targets","addDays","startOfMonth","isAfter","push","endOfMonth","getFullYear","val","oldVal","isBefore","updateFromInput","input","index","inputDate","newModel","slice","onClickCancel","onClickSave","onClickAppend","onClickNext","addMonths","onClickPrev","onClickMode","onClickHeader","headerSlotProps","appendIcon","transition","pickerProps","filterProps","datePickerControlsProps","datePickerMonthProps","datePickerYearsProps","_createVNode","_mergeProps","class","style","showWeek","undefined","_Fragment","$event","v","actions","color"],"sources":["../../../src/labs/VDatePicker/VDatePicker.tsx"],"sourcesContent":["// Styles\nimport './VDatePicker.sass'\n\n// Components\nimport { makeVDatePickerControlsProps, VDatePickerControls } from './VDatePickerControls'\nimport { VDatePickerHeader } from './VDatePickerHeader'\nimport { makeVDatePickerMonthProps, VDatePickerMonth } from './VDatePickerMonth'\nimport { makeVDatePickerYearsProps, VDatePickerYears } from './VDatePickerYears'\nimport { VFadeTransition } from '@/components/transitions'\nimport { VBtn } from '@/components/VBtn'\nimport { VTextField } from '@/components/VTextField'\nimport { dateEmits, makeDateProps } from '@/labs/VDateInput/composables'\nimport { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'\n\n// Composables\nimport { createDatePicker } from './composables'\nimport { useLocale } from '@/composables/locale'\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VPickerSlots } from '@/labs/VPicker/VPicker'\n\n// Types\nexport type VDatePickerSlots = Omit<VPickerSlots, 'header'> & {\n  header: {\n    header: string\n    appendIcon: string\n    'onClick:append': () => void\n  }\n}\n\nexport const makeVDatePickerProps = propsFactory({\n  calendarIcon: {\n    type: String,\n    default: '$calendar',\n  },\n  keyboardIcon: {\n    type: String,\n    default: '$edit',\n  },\n  cancelText: {\n    type: String,\n    default: '$vuetify.datePicker.cancel',\n  },\n  okText: {\n    type: String,\n    default: '$vuetify.datePicker.ok',\n  },\n  inputText: {\n    type: String,\n    default: '$vuetify.datePicker.input.placeholder',\n  },\n  inputPlaceholder: {\n    type: String,\n    default: 'dd/mm/yyyy',\n  },\n  header: {\n    type: String,\n    default: '$vuetify.datePicker.header',\n  },\n  hideActions: Boolean,\n\n  ...makeDateProps(),\n  ...makeVDatePickerControlsProps(),\n  ...makeVDatePickerMonthProps(),\n  ...makeVDatePickerYearsProps(),\n  ...makeVPickerProps({ title: '$vuetify.datePicker.title' }),\n}, 'VDatePicker')\n\nexport const VDatePicker = genericComponent<VDatePickerSlots>()({\n  name: 'VDatePicker',\n\n  props: makeVDatePickerProps(),\n\n  emits: {\n    'click:cancel': () => true,\n    'click:save': () => true,\n    ...dateEmits,\n  },\n\n  setup (props, { emit, slots }) {\n    const adapter = useDate()\n    const { t } = useLocale()\n\n    const { model, displayDate, viewMode, inputMode, isEqual } = createDatePicker(props)\n\n    const isReversing = shallowRef(false)\n\n    const inputModel = ref(model.value.map(date => adapter.format(date, 'keyboardDate')))\n    const temporaryModel = ref(model.value)\n    const title = computed(() => {\n      return props.variant === 'modern'\n        ? t(props.title)\n        : adapter.format(displayDate.value, 'shortDate')\n    })\n    const header = computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header))\n    const headerIcon = computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon)\n    const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`)\n    const minDate = computed(() => props.min && adapter.isValid(props.min) ? adapter.date(props.min) : null)\n    const maxDate = computed(() => props.max && adapter.isValid(props.max) ? adapter.date(props.max) : null)\n\n    const disabled = computed(() => {\n      if (!minDate.value && !maxDate.value) return false\n\n      const targets = []\n\n      if (minDate.value) {\n        const date = adapter.addDays(adapter.startOfMonth(displayDate.value), -1)\n\n        adapter.isAfter(minDate.value, date) && targets.push('prev')\n      }\n\n      if (maxDate.value) {\n        const date = adapter.addDays(adapter.endOfMonth(displayDate.value), 1)\n\n        adapter.isAfter(date, maxDate.value) && targets.push('next')\n      }\n\n      if (minDate.value?.getFullYear() === maxDate.value?.getFullYear()) {\n        targets.push('mode')\n      }\n\n      return targets\n    })\n\n    watch(model, val => {\n      if (!isEqual(val, temporaryModel.value)) {\n        temporaryModel.value = val\n      }\n\n      inputModel.value = val.map(date => adapter.format(date, 'keyboardDate'))\n    })\n\n    watch(temporaryModel, (val, oldVal) => {\n      if (props.hideActions && !isEqual(val, model.value)) {\n        model.value = val\n      }\n\n      if (val[0] && oldVal[0]) {\n        isReversing.value = adapter.isBefore(val[0], oldVal[0])\n      }\n    })\n\n    function updateFromInput (input: string, index: number) {\n      const { isValid, date, isAfter } = adapter\n      const inputDate = date(input)\n\n      if (\n        isValid(input) &&\n        (!minDate.value || !isAfter(minDate.value, inputDate)) &&\n        (!maxDate.value || !isAfter(inputDate, maxDate.value))\n      ) {\n        const newModel = model.value.slice()\n        newModel[index] = date(input)\n\n        if (props.hideActions) {\n          model.value = newModel\n        } else {\n          temporaryModel.value = newModel\n        }\n      }\n    }\n\n    function onClickCancel () {\n      emit('click:cancel')\n    }\n\n    function onClickSave () {\n      emit('click:save')\n\n      model.value = temporaryModel.value\n    }\n\n    function onClickAppend () {\n      inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar'\n    }\n\n    function onClickNext () {\n      displayDate.value = adapter.addMonths(displayDate.value, 1)\n    }\n\n    function onClickPrev () {\n      displayDate.value = adapter.addMonths(displayDate.value, -1)\n    }\n\n    function onClickMode () {\n      viewMode.value = viewMode.value === 'month' ? 'year' : 'month'\n    }\n\n    function onClickHeader () {\n      viewMode.value = 'month'\n    }\n\n    const headerSlotProps = computed(() => ({\n      header: header.value,\n      appendIcon: headerIcon.value,\n      transition: headerTransition.value,\n      'onClick:append': onClickAppend,\n    }))\n\n    useRender(() => {\n      const [pickerProps] = VPicker.filterProps(props)\n      const [datePickerControlsProps] = VDatePickerControls.filterProps(props)\n      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props)\n      const [datePickerYearsProps] = VDatePickerYears.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          class={[\n            'v-date-picker',\n            `v-date-picker--${viewMode.value}`,\n            props.class,\n          ]}\n          style={ props.style }\n          width={ props.showWeek ? 408 : 360 }\n          v-slots={{\n            title: () => slots.title?.() ?? (\n              <div\n                class=\"v-date-picker__title\"\n                onClick={ props.variant === 'classic' ? onClickMode : undefined }\n              >\n                { title.value }\n              </div>\n            ),\n            header: () => slots.header?.(headerSlotProps.value) ?? (\n              <VDatePickerHeader\n                key=\"header\"\n                { ...headerSlotProps.value }\n                onClick={ viewMode.value === 'year' ? onClickHeader : undefined }\n              />\n            ),\n            default: () => inputMode.value === 'calendar' ? (\n              <>\n                { (props.variant !== 'classic' || viewMode.value !== 'year') && (\n                  <VDatePickerControls\n                    { ...datePickerControlsProps }\n                    disabled={ disabled.value }\n                    displayDate={ adapter.format(displayDate.value, 'monthAndYear') }\n                    onClick:next={ onClickNext }\n                    onClick:prev={ onClickPrev }\n                    onClick:mode={ onClickMode }\n                  />\n                )}\n\n                <VFadeTransition hideOnLeave>\n                  { viewMode.value === 'month' ? (\n                    <VDatePickerMonth\n                      key=\"date-picker-month\"\n                      { ...datePickerMonthProps }\n                      v-model={ temporaryModel.value }\n                      displayDate={ displayDate.value }\n                      min={ minDate.value }\n                      max={ maxDate.value }\n                    />\n                  ) : (\n                    <VDatePickerYears\n                      key=\"date-picker-years\"\n                      { ...datePickerYearsProps }\n                      v-model:displayDate={ displayDate.value }\n                      min={ minDate.value }\n                      max={ maxDate.value }\n                      onClick:mode={ onClickMode }\n                    />\n                  )}\n                </VFadeTransition>\n              </>\n            ) : (\n              <div class=\"v-date-picker__input\">\n                <VTextField\n                  modelValue={ inputModel.value[0] }\n                  onUpdate:modelValue={ v => updateFromInput(v, 0) }\n                  label={ t(props.inputText) }\n                  placeholder={ props.inputPlaceholder }\n                />\n              </div>\n            ),\n            actions: () => !props.hideActions ? (\n              slots.actions?.() ?? (\n                <div>\n                  <VBtn\n                    variant=\"text\"\n                    color={ props.color }\n                    onClick={ onClickCancel }\n                    text={ t(props.cancelText) }\n                  />\n\n                  <VBtn\n                    variant=\"text\"\n                    color={ props.color }\n                    onClick={ onClickSave }\n                    text={ t(props.okText) }\n                  />\n                </div>\n              )\n            ) : undefined,\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePicker = InstanceType<typeof VDatePicker>\n"],"mappings":"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"}

package/lib/labs/VDatePicker/VDatePickerControls.css

@@ -8,12 +8,31 @@
   padding-bottom: 4px;
   padding-inline-end: 12px;
 }
+.v-date-picker-controls--variant-classic {
+  padding-inline-start: 12px;
+}
+.v-date-picker-controls--variant-modern .v-date-picker__title:not(:hover) {
+  opacity: 0.7;
+}
+.v-date-picker--month .v-date-picker-controls--variant-modern .v-date-picker__title {
+  cursor: pointer;
+}
+.v-date-picker--year .v-date-picker-controls--variant-modern .v-date-picker__title {
+  opacity: 1;
+}
 .v-date-picker-controls .v-btn:last-child {
-  margin-left: 4px;
+  margin-inline-start: 4px;
+}
+.v-date-picker--year .v-date-picker-controls > .v-btn {
+  transform: rotate(180deg);
 }
 
 .v-date-picker-controls__date {
-  margin-right: 4px;
+  margin-inline-end: 4px;
+}
+.v-date-picker-controls--variant-classic .v-date-picker-controls__date {
+  margin: auto;
+  text-align: center;
 }
 
 .v-date-picker-controls__month {
@@ -21,4 +40,12 @@
 }
 .v-locale--is-rtl.v-date-picker-controls__month, .v-locale--is-rtl .v-date-picker-controls__month {
   flex-direction: row-reverse;
+}
+
+.v-date-picker-controls--variant-classic .v-date-picker-controls__month {
+  flex: 1 0 auto;
+}
+
+.v-date-picker__title {
+  display: inline-block;
 }

package/lib/labs/VDatePicker/VDatePickerControls.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Styles
 import "./VDatePickerControls.css";
 
@@ -21,13 +21,13 @@ export const makeVDatePickerControlsProps = propsFactory({
     type: [String],
     default: '$prev'
   },
-  expandIcon: {
+  modeIcon: {
     type: [String],
-    default: '$expand'
+    default: '$subgroup'
   },
-  collapseIcon: {
-    type: [String],
-    default: '$collapse'
+  variant: {
+    type: String,
+    default: 'modern'
   },
   viewMode: {
     type: String,
@@ -46,9 +46,6 @@ export const VDatePickerControls = genericComponent()({
     let {
       emit
     } = _ref;
-    const modeIcon = computed(() => {
-      return props.viewMode === 'month' ? props.expandIcon : props.collapseIcon;
-    });
     const disableMode = computed(() => {
       return Array.isArray(props.disabled) ? props.disabled.includes('mode') : !!props.disabled;
     });
@@ -68,17 +65,21 @@ export const VDatePickerControls = genericComponent()({
       emit('click:mode');
     }
     useRender(() => {
-      return _createVNode("div", {
-        "class": "v-date-picker-controls"
-      }, [_createVNode("div", {
+      const displayDate = _createVNode("div", {
         "class": "v-date-picker-controls__date"
-      }, [props.displayDate]), _createVNode(VBtn, {
+      }, [props.displayDate]);
+      return _createVNode("div", {
+        "class": ['v-date-picker-controls', `v-date-picker-controls--variant-${props.variant}`]
+      }, [props.variant === 'modern' && _createVNode(_Fragment, null, [displayDate, _createVNode(VBtn, {
+        "key": "mode-btn",
         "disabled": disableMode.value,
-        "key": "expand-btn",
-        "icon": modeIcon.value,
+        "density": "comfortable",
+        "icon": props.modeIcon,
         "variant": "text",
         "onClick": onClickMode
-      }, null), _createVNode(VSpacer, null, null), _createVNode("div", {
+      }, null), _createVNode(VSpacer, {
+        "key": "mode-spacer"
+      }, null)]), _createVNode("div", {
         "key": "month-buttons",
         "class": "v-date-picker-controls__month"
       }, [_createVNode(VBtn, {
@@ -86,7 +87,7 @@ export const VDatePickerControls = genericComponent()({
         "icon": props.prevIcon,
         "variant": "text",
         "onClick": onClickPrev
-      }, null), _createVNode(VBtn, {
+      }, null), props.variant === 'classic' && displayDate, _createVNode(VBtn, {
         "disabled": disableNext.value,
         "icon": props.nextIcon,
         "variant": "text",

package/lib/labs/VDatePicker/VDatePickerControls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePickerControls.mjs","names":["VBtn","VSpacer","computed","genericComponent","propsFactory","useRender","makeVDatePickerControlsProps","displayDate","String","disabled","type","Boolean","Array","default","nextIcon","prevIcon","expandIcon","collapseIcon","viewMode","VDatePickerControls","name","props","emits","click:mode","click:prev","click:next","setup","_ref","emit","modeIcon","disableMode","isArray","includes","disablePrev","disableNext","onClickPrev","onClickNext","onClickMode","_createVNode","value"],"sources":["../../../src/labs/VDatePicker/VDatePickerControls.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerControls.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSpacer } from '@/components/VGrid'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVDatePickerControlsProps = propsFactory({\n  displayDate: String,\n  disabled: {\n    type: [Boolean, String, Array] as PropType<boolean | string | string[]>,\n    default: false,\n  },\n  nextIcon: {\n    type: [String],\n    default: '$next',\n  },\n  prevIcon: {\n    type: [String],\n    default: '$prev',\n  },\n  expandIcon: {\n    type: [String],\n    default: '$expand',\n  },\n  collapseIcon: {\n    type: [String],\n    default: '$collapse',\n  },\n  viewMode: {\n    type: String as PropType<'month' | 'year'>,\n    default: 'month',\n  },\n}, 'VDatePickerControls')\n\nexport const VDatePickerControls = genericComponent()({\n  name: 'VDatePickerControls',\n\n  props: makeVDatePickerControlsProps(),\n\n  emits: {\n    'click:mode': () => true,\n    'click:prev': () => true,\n    'click:next': () => true,\n  },\n\n  setup (props, { emit }) {\n    const modeIcon = computed(() => {\n      return props.viewMode === 'month' ? props.expandIcon : props.collapseIcon\n    })\n    const disableMode = computed(() => {\n      return Array.isArray(props.disabled)\n        ? props.disabled.includes('mode')\n        : !!props.disabled\n    })\n    const disablePrev = computed(() => {\n      return Array.isArray(props.disabled)\n        ? props.disabled.includes('prev')\n        : !!props.disabled\n    })\n    const disableNext = computed(() => {\n      return Array.isArray(props.disabled)\n        ? props.disabled.includes('next')\n        : !!props.disabled\n    })\n\n    function onClickPrev () {\n      emit('click:prev')\n    }\n\n    function onClickNext () {\n      emit('click:next')\n    }\n\n    function onClickMode () {\n      emit('click:mode')\n    }\n\n    useRender(() => {\n      return (\n        <div class=\"v-date-picker-controls\">\n          <div class=\"v-date-picker-controls__date\">{ props.displayDate }</div>\n\n          <VBtn\n            disabled={ disableMode.value }\n            key=\"expand-btn\"\n            icon={ modeIcon.value }\n            variant=\"text\"\n            onClick={ onClickMode }\n          />\n\n          <VSpacer />\n\n          <div\n            key=\"month-buttons\"\n            class=\"v-date-picker-controls__month\"\n          >\n            <VBtn\n              disabled={ disablePrev.value }\n              icon={ props.prevIcon }\n              variant=\"text\"\n              onClick={ onClickPrev }\n            />\n\n            <VBtn\n              disabled={ disableNext.value }\n              icon={ props.nextIcon }\n              variant=\"text\"\n              onClick={ onClickNext }\n            />\n          </div>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePickerControls = InstanceType<typeof VDatePickerControls>\n"],"mappings":"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"}
+{"version":3,"file":"VDatePickerControls.mjs","names":["VBtn","VSpacer","computed","genericComponent","propsFactory","useRender","makeVDatePickerControlsProps","displayDate","String","disabled","type","Boolean","Array","default","nextIcon","prevIcon","modeIcon","variant","viewMode","VDatePickerControls","name","props","emits","click:mode","click:prev","click:next","setup","_ref","emit","disableMode","isArray","includes","disablePrev","disableNext","onClickPrev","onClickNext","onClickMode","_createVNode","_Fragment","value"],"sources":["../../../src/labs/VDatePicker/VDatePickerControls.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerControls.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSpacer } from '@/components/VGrid'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVDatePickerControlsProps = propsFactory({\n  displayDate: String,\n  disabled: {\n    type: [Boolean, String, Array] as PropType<boolean | string | string[]>,\n    default: false,\n  },\n  nextIcon: {\n    type: [String],\n    default: '$next',\n  },\n  prevIcon: {\n    type: [String],\n    default: '$prev',\n  },\n  modeIcon: {\n    type: [String],\n    default: '$subgroup',\n  },\n  variant: {\n    type: String,\n    default: 'modern',\n  },\n  viewMode: {\n    type: String as PropType<'month' | 'year'>,\n    default: 'month',\n  },\n}, 'VDatePickerControls')\n\nexport const VDatePickerControls = genericComponent()({\n  name: 'VDatePickerControls',\n\n  props: makeVDatePickerControlsProps(),\n\n  emits: {\n    'click:mode': () => true,\n    'click:prev': () => true,\n    'click:next': () => true,\n  },\n\n  setup (props, { emit }) {\n    const disableMode = computed(() => {\n      return Array.isArray(props.disabled)\n        ? props.disabled.includes('mode')\n        : !!props.disabled\n    })\n    const disablePrev = computed(() => {\n      return Array.isArray(props.disabled)\n        ? props.disabled.includes('prev')\n        : !!props.disabled\n    })\n    const disableNext = computed(() => {\n      return Array.isArray(props.disabled)\n        ? props.disabled.includes('next')\n        : !!props.disabled\n    })\n\n    function onClickPrev () {\n      emit('click:prev')\n    }\n\n    function onClickNext () {\n      emit('click:next')\n    }\n\n    function onClickMode () {\n      emit('click:mode')\n    }\n\n    useRender(() => {\n      const displayDate = (\n        <div class=\"v-date-picker-controls__date\">{ props.displayDate }</div>\n      )\n\n      return (\n        <div\n          class={[\n            'v-date-picker-controls',\n            `v-date-picker-controls--variant-${props.variant}`,\n          ]}\n        >\n          { props.variant === 'modern' && (\n            <>\n              { displayDate }\n\n              <VBtn\n                key=\"mode-btn\"\n                disabled={ disableMode.value }\n                density=\"comfortable\"\n                icon={ props.modeIcon }\n                variant=\"text\"\n                onClick={ onClickMode }\n              />\n\n              <VSpacer key=\"mode-spacer\" />\n            </>\n          )}\n\n          <div\n            key=\"month-buttons\"\n            class=\"v-date-picker-controls__month\"\n          >\n            <VBtn\n              disabled={ disablePrev.value }\n              icon={ props.prevIcon }\n              variant=\"text\"\n              onClick={ onClickPrev }\n            />\n\n            { props.variant === 'classic' && displayDate }\n\n            <VBtn\n              disabled={ disableNext.value }\n              icon={ props.nextIcon }\n              variant=\"text\"\n              onClick={ onClickNext }\n            />\n          </div>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePickerControls = InstanceType<typeof VDatePickerControls>\n"],"mappings":"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"}

package/lib/labs/VDatePicker/VDatePickerControls.sass

@@ -10,14 +10,42 @@
   padding-bottom: 4px
   padding-inline-end: 12px
 
+  &--variant-classic
+    padding-inline-start: 12px
+
+  &--variant-modern
+    .v-date-picker__title
+        &:not(:hover)
+          opacity: .7
+
+        .v-date-picker--month &
+          cursor: pointer
+
+        .v-date-picker--year &
+          opacity: 1
+
   .v-btn:last-child
-    margin-left: 4px
+    margin-inline-start: 4px
+
+  .v-date-picker--year &
+    > .v-btn
+      transform: rotate(180deg)
 
 .v-date-picker-controls__date
-  margin-right: 4px
+  margin-inline-end: 4px
+
+  .v-date-picker-controls--variant-classic &
+    margin: auto
+    text-align: center
 
 .v-date-picker-controls__month
   display: flex
 
   @include tools.rtl()
     flex-direction: row-reverse
+
+  .v-date-picker-controls--variant-classic &
+    flex: 1 0 auto
+
+.v-date-picker__title
+  display: inline-block

package/lib/labs/VDatePicker/VDatePickerHeader.css

@@ -19,12 +19,21 @@
 
 .v-date-picker-header__content {
   align-items: center;
-  display: flex;
+  display: inline-flex;
   font-size: 32px;
   line-height: 40px;
   grid-area: content;
   justify-content: space-between;
 }
+.v-date-picker-header--clickable .v-date-picker-header__content:not(:hover) {
+  opacity: 0.7;
+}
+.v-date-picker--month .v-date-picker-header__content {
+  opacity: 1;
+}
+.v-date-picker--year .v-date-picker-header__content {
+  cursor: pointer;
+}
 
 .date-picker-header-transition-enter-active,
 .date-picker-header-reverse-transition-enter-active {

package/lib/labs/VDatePicker/VDatePickerHeader.mjs

@@ -7,17 +7,19 @@ import { VBtn } from "../../components/VBtn/index.mjs";
 import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs"; // Composables
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
-import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { EventProp, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVDatePickerHeaderProps = propsFactory({
   appendIcon: String,
   color: String,
   header: String,
-  transition: String
+  transition: String,
+  onClick: EventProp()
 }, 'VDatePickerHeader');
 export const VDatePickerHeader = genericComponent()({
   name: 'VDatePickerHeader',
   props: makeVDatePickerHeaderProps(),
   emits: {
+    click: () => true,
     'click:append': () => true
   },
   setup(props, _ref) {
@@ -29,6 +31,9 @@ export const VDatePickerHeader = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    function onClick() {
+      emit('click');
+    }
     function onClickAppend() {
       emit('click:append');
     }
@@ -36,8 +41,11 @@ export const VDatePickerHeader = genericComponent()({
       const hasContent = !!(slots.default || props.header);
       const hasAppend = !!(slots.append || props.appendIcon);
       return _createVNode("div", {
-        "class": ['v-date-picker-header', backgroundColorClasses.value],
-        "style": backgroundColorStyles.value
+        "class": ['v-date-picker-header', {
+          'v-date-picker-header--clickable': !!props.onClick
+        }, backgroundColorClasses.value],
+        "style": backgroundColorStyles.value,
+        "onClick": onClick
       }, [slots.prepend && _createVNode("div", {
         "key": "prepend",
         "class": "v-date-picker-header__prepend"

package/lib/labs/VDatePicker/VDatePickerHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePickerHeader.mjs","names":["VBtn","VDefaultsProvider","useBackgroundColor","MaybeTransition","genericComponent","propsFactory","useRender","makeVDatePickerHeaderProps","appendIcon","String","color","header","transition","VDatePickerHeader","name","props","emits","click:append","setup","_ref","emit","slots","backgroundColorClasses","backgroundColorStyles","onClickAppend","hasContent","default","hasAppend","append","_createVNode","value","prepend","icon","variant"],"sources":["../../../src/labs/VDatePicker/VDatePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerHeader.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VDatePickerHeaderSlots = {\n  prepend: never\n  default: never\n  append: never\n}\n\nexport const makeVDatePickerHeaderProps = propsFactory({\n  appendIcon: String,\n  color: String,\n  header: String,\n  transition: String,\n}, 'VDatePickerHeader')\n\nexport const VDatePickerHeader = genericComponent<VDatePickerHeaderSlots>()({\n  name: 'VDatePickerHeader',\n\n  props: makeVDatePickerHeaderProps(),\n\n  emits: {\n    'click:append': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    function onClickAppend () {\n      emit('click:append')\n    }\n\n    useRender(() => {\n      const hasContent = !!(slots.default || props.header)\n      const hasAppend = !!(slots.append || props.appendIcon)\n\n      return (\n        <div\n          class={[\n            'v-date-picker-header',\n            backgroundColorClasses.value,\n          ]}\n          style={ backgroundColorStyles.value }\n        >\n          { slots.prepend && (\n            <div key=\"prepend\" class=\"v-date-picker-header__prepend\">\n              { slots.prepend() }\n            </div>\n          )}\n\n          { hasContent && (\n            <MaybeTransition key=\"content\" name={ props.transition }>\n              <div key={ props.header } class=\"v-date-picker-header__content\">\n                { slots.default?.() ?? props.header }\n              </div>\n            </MaybeTransition>\n          )}\n\n          { hasAppend && (\n            <div class=\"v-date-picker-header__append\">\n              { !slots.append ? (\n                <VBtn\n                  key=\"append-btn\"\n                  icon={ props.appendIcon }\n                  variant=\"text\"\n                  onClick={ onClickAppend }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !props.appendIcon }\n                  defaults={{\n                    VBtn: {\n                      icon: props.appendIcon,\n                      variant: 'text',\n                    },\n                  }}\n                >\n                  { slots.append?.() }\n                </VDefaultsProvider>\n              )}\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePickerHeader = InstanceType<typeof VDatePickerHeader>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,iBAAiB,wDAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,eAAe,4CAExB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAOA,OAAO,MAAMC,0BAA0B,GAAGF,YAAY,CAAC;EACrDG,UAAU,EAAEC,MAAM;EAClBC,KAAK,EAAED,MAAM;EACbE,MAAM,EAAEF,MAAM;EACdG,UAAU,EAAEH;AACd,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMI,iBAAiB,GAAGT,gBAAgB,EAA0B,CAAC;EAC1EU,IAAI,EAAE,mBAAmB;EAEzBC,KAAK,EAAER,0BAA0B,EAAE;EAEnCS,KAAK,EAAE;IACL,cAAc,EAAEC,CAAA,KAAM;EACxB,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,sBAAsB;MAAEC;IAAsB,CAAC,GAAGrB,kBAAkB,CAACa,KAAK,EAAE,OAAO,CAAC;IAE5F,SAASS,aAAaA,CAAA,EAAI;MACxBJ,IAAI,CAAC,cAAc,CAAC;IACtB;IAEAd,SAAS,CAAC,MAAM;MACd,MAAMmB,UAAU,GAAG,CAAC,EAAEJ,KAAK,CAACK,OAAO,IAAIX,KAAK,CAACJ,MAAM,CAAC;MACpD,MAAMgB,SAAS,GAAG,CAAC,EAAEN,KAAK,CAACO,MAAM,IAAIb,KAAK,CAACP,UAAU,CAAC;MAEtD,OAAAqB,YAAA;QAAA,SAEW,CACL,sBAAsB,EACtBP,sBAAsB,CAACQ,KAAK,CAC7B;QAAA,SACOP,qBAAqB,CAACO;MAAK,IAEjCT,KAAK,CAACU,OAAO,IAAAF,YAAA;QAAA,OACJ,SAAS;QAAA,SAAO;MAA+B,IACpDR,KAAK,CAACU,OAAO,EAAE,EAEpB,EAECN,UAAU,IAAAI,YAAA,CAAA1B,eAAA;QAAA,OACW,SAAS;QAAA,QAAQY,KAAK,CAACH;MAAU;QAAAc,OAAA,EAAAA,CAAA,MAAAG,YAAA;UAAA,OACzCd,KAAK,CAACJ,MAAM;UAAA,SAAS;QAA+B,IAC3DU,KAAK,CAACK,OAAO,IAAI,IAAIX,KAAK,CAACJ,MAAM;MAAA,EAGxC,EAECgB,SAAS,IAAAE,YAAA;QAAA,SACE;MAA8B,IACrC,CAACR,KAAK,CAACO,MAAM,GAAAC,YAAA,CAAA7B,IAAA;QAAA,OAEP,YAAY;QAAA,QACTe,KAAK,CAACP,UAAU;QAAA,WACf,MAAM;QAAA,WACJgB;MAAa,WAAAK,YAAA,CAAA5B,iBAAA;QAAA,OAInB,iBAAiB;QAAA,YACV,CAACc,KAAK,CAACP,UAAU;QAAA,YAClB;UACRR,IAAI,EAAE;YACJgC,IAAI,EAAEjB,KAAK,CAACP,UAAU;YACtByB,OAAO,EAAE;UACX;QACF;MAAC;QAAAP,OAAA,EAAAA,CAAA,MAECL,KAAK,CAACO,MAAM,IAAI;MAAA,EAErB,EAEJ;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VDatePickerHeader.mjs","names":["VBtn","VDefaultsProvider","useBackgroundColor","MaybeTransition","EventProp","genericComponent","propsFactory","useRender","makeVDatePickerHeaderProps","appendIcon","String","color","header","transition","onClick","VDatePickerHeader","name","props","emits","click","click:append","setup","_ref","emit","slots","backgroundColorClasses","backgroundColorStyles","onClickAppend","hasContent","default","hasAppend","append","_createVNode","value","prepend","icon","variant"],"sources":["../../../src/labs/VDatePicker/VDatePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerHeader.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { EventProp, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nexport type VDatePickerHeaderSlots = {\n  prepend: never\n  default: never\n  append: never\n}\n\nexport const makeVDatePickerHeaderProps = propsFactory({\n  appendIcon: String,\n  color: String,\n  header: String,\n  transition: String,\n  onClick: EventProp<[MouseEvent]>(),\n}, 'VDatePickerHeader')\n\nexport const VDatePickerHeader = genericComponent<VDatePickerHeaderSlots>()({\n  name: 'VDatePickerHeader',\n\n  props: makeVDatePickerHeaderProps(),\n\n  emits: {\n    click: () => true,\n    'click:append': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    function onClick () {\n      emit('click')\n    }\n\n    function onClickAppend () {\n      emit('click:append')\n    }\n\n    useRender(() => {\n      const hasContent = !!(slots.default || props.header)\n      const hasAppend = !!(slots.append || props.appendIcon)\n\n      return (\n        <div\n          class={[\n            'v-date-picker-header',\n            {\n              'v-date-picker-header--clickable': !!props.onClick,\n            },\n            backgroundColorClasses.value,\n          ]}\n          style={ backgroundColorStyles.value }\n          onClick={ onClick }\n        >\n          { slots.prepend && (\n            <div key=\"prepend\" class=\"v-date-picker-header__prepend\">\n              { slots.prepend() }\n            </div>\n          )}\n\n          { hasContent && (\n            <MaybeTransition key=\"content\" name={ props.transition }>\n              <div key={ props.header } class=\"v-date-picker-header__content\">\n                { slots.default?.() ?? props.header }\n              </div>\n            </MaybeTransition>\n          )}\n\n          { hasAppend && (\n            <div class=\"v-date-picker-header__append\">\n              { !slots.append ? (\n                <VBtn\n                  key=\"append-btn\"\n                  icon={ props.appendIcon }\n                  variant=\"text\"\n                  onClick={ onClickAppend }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !props.appendIcon }\n                  defaults={{\n                    VBtn: {\n                      icon: props.appendIcon,\n                      variant: 'text',\n                    },\n                  }}\n                >\n                  { slots.append?.() }\n                </VDefaultsProvider>\n              )}\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDatePickerHeader = InstanceType<typeof VDatePickerHeader>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,iBAAiB,wDAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,eAAe,4CAExB;AAAA,SACSC,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAE7D;AAOA,OAAO,MAAMC,0BAA0B,GAAGF,YAAY,CAAC;EACrDG,UAAU,EAAEC,MAAM;EAClBC,KAAK,EAAED,MAAM;EACbE,MAAM,EAAEF,MAAM;EACdG,UAAU,EAAEH,MAAM;EAClBI,OAAO,EAAEV,SAAS;AACpB,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMW,iBAAiB,GAAGV,gBAAgB,EAA0B,CAAC;EAC1EW,IAAI,EAAE,mBAAmB;EAEzBC,KAAK,EAAET,0BAA0B,EAAE;EAEnCU,KAAK,EAAE;IACLC,KAAK,EAAEA,CAAA,KAAM,IAAI;IACjB,cAAc,EAAEC,CAAA,KAAM;EACxB,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,sBAAsB;MAAEC;IAAsB,CAAC,GAAGxB,kBAAkB,CAACe,KAAK,EAAE,OAAO,CAAC;IAE5F,SAASH,OAAOA,CAAA,EAAI;MAClBS,IAAI,CAAC,OAAO,CAAC;IACf;IAEA,SAASI,aAAaA,CAAA,EAAI;MACxBJ,IAAI,CAAC,cAAc,CAAC;IACtB;IAEAhB,SAAS,CAAC,MAAM;MACd,MAAMqB,UAAU,GAAG,CAAC,EAAEJ,KAAK,CAACK,OAAO,IAAIZ,KAAK,CAACL,MAAM,CAAC;MACpD,MAAMkB,SAAS,GAAG,CAAC,EAAEN,KAAK,CAACO,MAAM,IAAId,KAAK,CAACR,UAAU,CAAC;MAEtD,OAAAuB,YAAA;QAAA,SAEW,CACL,sBAAsB,EACtB;UACE,iCAAiC,EAAE,CAAC,CAACf,KAAK,CAACH;QAC7C,CAAC,EACDW,sBAAsB,CAACQ,KAAK,CAC7B;QAAA,SACOP,qBAAqB,CAACO,KAAK;QAAA,WACzBnB;MAAO,IAEfU,KAAK,CAACU,OAAO,IAAAF,YAAA;QAAA,OACJ,SAAS;QAAA,SAAO;MAA+B,IACpDR,KAAK,CAACU,OAAO,EAAE,EAEpB,EAECN,UAAU,IAAAI,YAAA,CAAA7B,eAAA;QAAA,OACW,SAAS;QAAA,QAAQc,KAAK,CAACJ;MAAU;QAAAgB,OAAA,EAAAA,CAAA,MAAAG,YAAA;UAAA,OACzCf,KAAK,CAACL,MAAM;UAAA,SAAS;QAA+B,IAC3DY,KAAK,CAACK,OAAO,IAAI,IAAIZ,KAAK,CAACL,MAAM;MAAA,EAGxC,EAECkB,SAAS,IAAAE,YAAA;QAAA,SACE;MAA8B,IACrC,CAACR,KAAK,CAACO,MAAM,GAAAC,YAAA,CAAAhC,IAAA;QAAA,OAEP,YAAY;QAAA,QACTiB,KAAK,CAACR,UAAU;QAAA,WACf,MAAM;QAAA,WACJkB;MAAa,WAAAK,YAAA,CAAA/B,iBAAA;QAAA,OAInB,iBAAiB;QAAA,YACV,CAACgB,KAAK,CAACR,UAAU;QAAA,YAClB;UACRT,IAAI,EAAE;YACJmC,IAAI,EAAElB,KAAK,CAACR,UAAU;YACtB2B,OAAO,EAAE;UACX;QACF;MAAC;QAAAP,OAAA,EAAAA,CAAA,MAECL,KAAK,CAACO,MAAM,IAAI;MAAA,EAErB,EAEJ;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/labs/VDatePicker/VDatePickerHeader.sass

@@ -18,12 +18,22 @@
 
 .v-date-picker-header__content
   align-items: center
-  display: flex
+  display: inline-flex
   font-size: 32px
   line-height: 40px
   grid-area: content
   justify-content: space-between
 
+  .v-date-picker-header--clickable &
+    &:not(:hover)
+      opacity: .7
+
+  .v-date-picker--month &
+    opacity: 1
+
+  .v-date-picker--year &
+    cursor: pointer
+
 .date-picker-header-transition,
 .date-picker-header-reverse-transition
   &-enter-active

package/lib/labs/VDatePicker/VDatePickerMonth.mjs

@@ -275,8 +275,7 @@ export const VDatePickerMonth = genericComponent()({
         "key": "in-hover",
         "class": "v-date-picker-month__day--hover"
       }, null), (props.showAdjacentMonths || !item.isAdjacent) && _createVNode(VBtn, {
-        "active": item.isSelected,
-        "color": color,
+        "color": !item.isToday || item.isSelected ? color : undefined,
         "disabled": item.isDisabled,
         "icon": true,
         "ripple": false,