vuetify 3.3.2 → 3.3.4

package/lib/labs/VDateInput/index.mjs

@@ -0,0 +1,3 @@
+export { VDateInput } from "./VDateInput.mjs";
+export { VDateRangeInput } from "./VDateRangeInput.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/labs/VDateInput/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["VDateInput","VDateRangeInput"],"sources":["../../../src/labs/VDateInput/index.ts"],"sourcesContent":["export { VDateInput } from './VDateInput'\nexport { VDateRangeInput } from './VDateRangeInput'\n"],"mappings":"SAASA,UAAU;AAAA,SACVC,eAAe"}

package/lib/labs/VDatePicker/VDateCard.css

@@ -0,0 +1,33 @@
+.v-date-card {
+  padding-bottom: 8px;
+}
+.v-date-card .v-card-actions {
+  justify-content: flex-end;
+}
+
+.v-date-card .v-date-picker-month {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.v-date-card .v-date-picker-month .v-date-picker-month__day {
+  height: 32px;
+  width: 32px;
+}
+.v-date-card .v-date-picker-month .v-date-picker-month__day .v-btn {
+  --v-btn-height: 16px;
+  --v-btn-size: 0.75rem;
+}
+.v-date-card .v-date-picker-years {
+  height: 248px;
+}
+.v-date-card .v-date-picker-years .v-date-picker-years__content {
+  grid-template-columns: repeat(4, 56px);
+  grid-gap: 0px;
+  grid-row-gap: 2px;
+  padding-right: 3px;
+}
+.v-date-card .v-date-picker-years .v-date-picker-years__content .v-btn {
+  --v-btn-height: 28px;
+  --v-btn-size: 0.75rem;
+  min-width: unset;
+}

package/lib/labs/VDatePicker/VDateCard.mjs

@@ -0,0 +1,112 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
+// Styles
+import "./VDateCard.css";
+
+// Components
+import { makeVDatePickerControlsProps, VDatePickerControls } from "./VDatePickerControls.mjs";
+import { makeVDatePickerMonthProps, VDatePickerMonth } from "./VDatePickerMonth.mjs";
+import { makeVDatePickerYearsProps, VDatePickerYears } from "./VDatePickerYears.mjs";
+import { VFadeTransition } from "../../components/transitions/index.mjs";
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VCard } from "../../components/VCard/VCard.mjs"; // Composables
+import { createDatePicker } from "./composables.mjs";
+import { useLocale } from "../../composables/locale.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVDateCardProps = propsFactory({
+  cancelText: {
+    type: String,
+    default: '$vuetify.datePicker.cancel'
+  },
+  okText: {
+    type: String,
+    default: '$vuetify.datePicker.ok'
+  },
+  inputMode: {
+    type: String,
+    default: 'calendar'
+  },
+  hideActions: Boolean,
+  ...makeVDatePickerControlsProps(),
+  ...makeVDatePickerMonthProps(),
+  ...makeVDatePickerYearsProps(),
+  ...makeTransitionProps({
+    transition: {
+      component: VFadeTransition,
+      leaveAbsolute: true
+    }
+  })
+}, 'VDateCard');
+export const VDateCard = genericComponent()({
+  name: 'VDateCard',
+  props: makeVDateCardProps(),
+  emits: {
+    save: () => true,
+    cancel: () => true,
+    'update:displayDate': value => true,
+    'update:inputMode': value => true,
+    'update:modelValue': value => true,
+    'update:viewMode': mode => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
+    const {
+      t
+    } = useLocale();
+    createDatePicker(props);
+    function onDisplayUpdate(val) {
+      emit('update:displayDate', val);
+    }
+    function onViewModeUpdate(val) {
+      emit('update:viewMode', val);
+    }
+    function onSave() {
+      emit('update:modelValue', model.value);
+      emit('save');
+    }
+    function onCancel() {
+      emit('cancel');
+    }
+    useRender(() => {
+      const [cardProps] = VCard.filterProps(props);
+      const [datePickerControlsProps] = VDatePickerControls.filterProps(props);
+      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
+      const [datePickerYearsProps] = VDatePickerYears.filterProps(props);
+      const hasActions = !props.hideActions || !!slots.actions;
+      return _createVNode(VCard, _mergeProps(cardProps, {
+        "class": "v-date-card"
+      }), {
+        ...slots,
+        default: () => _createVNode(_Fragment, null, [_createVNode(VDatePickerControls, _mergeProps(datePickerControlsProps, {
+          "onUpdate:displayDate": onDisplayUpdate,
+          "onUpdate:viewMode": onViewModeUpdate
+        }), null), _createVNode(MaybeTransition, {
+          "transition": props.transition
+        }, {
+          default: () => [props.viewMode === 'month' ? _createVNode(VDatePickerMonth, _mergeProps(datePickerMonthProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "onUpdate:displayDate": onDisplayUpdate
+          }), null) : _createVNode(VDatePickerYears, _mergeProps(datePickerYearsProps, {
+            "onUpdate:displayDate": onDisplayUpdate,
+            "onUpdate:viewMode": onViewModeUpdate
+          }), null)]
+        })]),
+        actions: !hasActions ? undefined : () => _createVNode(_Fragment, null, [slots.actions?.() ?? _createVNode(_Fragment, null, [_createVNode(VBtn, {
+          "onClick": onCancel,
+          "text": t(props.cancelText)
+        }, null), _createVNode(VBtn, {
+          "onClick": onSave,
+          "text": t(props.okText)
+        }, null)])])
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VDateCard.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VDateCard.mjs","names":["makeVDatePickerControlsProps","VDatePickerControls","makeVDatePickerMonthProps","VDatePickerMonth","makeVDatePickerYearsProps","VDatePickerYears","VFadeTransition","VBtn","VCard","createDatePicker","useLocale","useProxiedModel","makeTransitionProps","MaybeTransition","genericComponent","propsFactory","useRender","makeVDateCardProps","cancelText","type","String","default","okText","inputMode","hideActions","Boolean","transition","component","leaveAbsolute","VDateCard","name","props","emits","save","cancel","value","mode","setup","_ref","emit","slots","model","t","onDisplayUpdate","val","onViewModeUpdate","onSave","onCancel","cardProps","filterProps","datePickerControlsProps","datePickerMonthProps","datePickerYearsProps","hasActions","actions","_createVNode","_mergeProps","_Fragment","viewMode","$event","undefined"],"sources":["../../../src/labs/VDatePicker/VDateCard.tsx"],"sourcesContent":["// Styles\nimport './VDateCard.sass'\n\n// Components\nimport { makeVDatePickerControlsProps, VDatePickerControls } from './VDatePickerControls'\nimport { makeVDatePickerMonthProps, VDatePickerMonth } from './VDatePickerMonth'\nimport { makeVDatePickerYearsProps, VDatePickerYears } from './VDatePickerYears'\nimport { VFadeTransition } from '@/components/transitions'\nimport { VBtn } from '@/components/VBtn'\nimport { VCard } from '@/components/VCard/VCard'\n\n// Composables\nimport { createDatePicker } from './composables'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VCardSlots } from '@/components/VCard/VCard'\n\nexport const makeVDateCardProps = propsFactory({\n  cancelText: {\n    type: String,\n    default: '$vuetify.datePicker.cancel',\n  },\n  okText: {\n    type: String,\n    default: '$vuetify.datePicker.ok',\n  },\n  inputMode: {\n    type: String as PropType<'keyboard' | 'calendar'>,\n    default: 'calendar',\n  },\n  hideActions: Boolean,\n\n  ...makeVDatePickerControlsProps(),\n  ...makeVDatePickerMonthProps(),\n  ...makeVDatePickerYearsProps(),\n  ...makeTransitionProps({ transition: { component: VFadeTransition, leaveAbsolute: true } }),\n}, 'VDateCard')\n\nexport const VDateCard = genericComponent<VCardSlots>()({\n  name: 'VDateCard',\n\n  props: makeVDateCardProps(),\n\n  emits: {\n    save: () => true,\n    cancel: () => true,\n    'update:displayDate': (value: any) => true,\n    'update:inputMode': (value: any) => true,\n    'update:modelValue': (value: any) => true,\n    'update:viewMode': (mode: 'month' | 'year') => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const { t } = useLocale()\n\n    createDatePicker(props)\n\n    function onDisplayUpdate (val: any) {\n      emit('update:displayDate', val)\n    }\n\n    function onViewModeUpdate (val: any) {\n      emit('update:viewMode', val)\n    }\n\n    function onSave () {\n      emit('update:modelValue', model.value)\n      emit('save')\n    }\n\n    function onCancel () {\n      emit('cancel')\n    }\n\n    useRender(() => {\n      const [cardProps] = VCard.filterProps(props)\n      const [datePickerControlsProps] = VDatePickerControls.filterProps(props)\n      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props)\n      const [datePickerYearsProps] = VDatePickerYears.filterProps(props)\n      const hasActions = !props.hideActions || !!slots.actions\n\n      return (\n        <VCard\n          { ...cardProps }\n          class=\"v-date-card\"\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                <VDatePickerControls\n                  { ...datePickerControlsProps }\n                  onUpdate:displayDate={ onDisplayUpdate }\n                  onUpdate:viewMode={ onViewModeUpdate }\n                />\n\n                <MaybeTransition transition={ props.transition }>\n                  { props.viewMode === 'month' ? (\n                    <VDatePickerMonth\n                      { ...datePickerMonthProps }\n                      v-model={ model.value }\n                      onUpdate:displayDate={ onDisplayUpdate }\n                    />\n                  ) : (\n                    <VDatePickerYears\n                      { ...datePickerYearsProps }\n                      onUpdate:displayDate={ onDisplayUpdate }\n                      onUpdate:viewMode={ onViewModeUpdate }\n                    />\n                  )}\n                </MaybeTransition>\n              </>\n            ),\n            actions: !hasActions ? undefined : () => (\n              <>\n                { slots.actions?.() ?? (\n                  <>\n                    <VBtn onClick={ onCancel } text={ t(props.cancelText) } />\n                    <VBtn onClick={ onSave } text={ t(props.okText) } />\n                  </>\n                )}\n              </>\n            ),\n          }}\n        </VCard>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDateCard = InstanceType<typeof VDateCard>\n"],"mappings":"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"}

package/lib/labs/VDatePicker/VDateCard.sass

@@ -0,0 +1,32 @@
+.v-date-card
+  padding-bottom: 8px
+
+  .v-card-actions
+    justify-content: flex-end
+
+.v-date-card
+  .v-date-picker-month
+    padding-left: 12px
+    padding-right: 12px
+
+    .v-date-picker-month__day
+      height: 32px
+      width: 32px
+
+      .v-btn
+        --v-btn-height: 16px
+        --v-btn-size: 0.75rem
+
+  .v-date-picker-years
+    height: 248px
+
+    .v-date-picker-years__content
+      grid-template-columns: repeat(4, 56px)
+      grid-gap: 0px
+      grid-row-gap: 2px
+      padding-right: 3px
+
+      .v-btn
+        --v-btn-height: 28px
+        --v-btn-size: 0.75rem
+        min-width: unset

package/lib/labs/VDatePicker/VDatePicker.css

@@ -0,0 +1,23 @@
+.v-date-picker__input {
+  padding-top: 16px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.v-date-picker {
+  overflow: hidden;
+  width: 358px;
+}
+.v-date-picker .v-date-picker-month {
+  padding-bottom: 8px;
+  padding-inline-start: 12px;
+  padding-inline-end: 12px;
+}
+.v-date-picker .v-date-picker-month .v-date-picker-month__day {
+  height: 40px;
+  width: 40px;
+}
+.v-date-picker .v-date-picker-month .v-date-picker-month__day .v-btn {
+  --v-btn-height: 24px;
+  --v-btn-size: 0.85rem;
+}

package/lib/labs/VDatePicker/VDatePicker.mjs

@@ -0,0 +1,172 @@
+import { resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+// Styles
+import "./VDatePicker.css";
+
+// Components
+import { makeVDatePickerControlsProps, VDatePickerControls } from "./VDatePickerControls.mjs";
+import { VDatePickerHeader } from "./VDatePickerHeader.mjs";
+import { makeVDatePickerMonthProps, VDatePickerMonth } from "./VDatePickerMonth.mjs";
+import { makeVDatePickerYearsProps, VDatePickerYears } from "./VDatePickerYears.mjs";
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VTextField } from "../../components/VTextField/index.mjs";
+import { dateEmits, makeDateProps } from "../VDateInput/composables.mjs";
+import { makeVPickerProps, VPicker } from "../VPicker/VPicker.mjs"; // Composables
+import { createDatePicker } from "./composables.mjs";
+import { useLocale } from "../../composables/locale.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
+import { useDate } from "../date/index.mjs"; // Utilities
+import { computed, ref, watch } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVDatePickerProps = propsFactory({
+  calendarIcon: {
+    type: String,
+    default: '$calendar'
+  },
+  keyboardIcon: {
+    type: String,
+    default: '$edit'
+  },
+  cancelText: {
+    type: String,
+    default: '$vuetify.datePicker.cancel'
+  },
+  okText: {
+    type: String,
+    default: '$vuetify.datePicker.ok'
+  },
+  inputText: {
+    type: String,
+    default: '$vuetify.datePicker.input.placeholder'
+  },
+  header: {
+    type: String,
+    default: '$vuetify.datePicker.header'
+  },
+  hideActions: Boolean,
+  ...makeDateProps(),
+  ...makeTransitionProps({
+    transition: 'fade'
+  }),
+  ...makeVDatePickerControlsProps(),
+  ...makeVDatePickerMonthProps(),
+  ...makeVDatePickerYearsProps(),
+  ...makeVPickerProps({
+    title: '$vuetify.datePicker.title'
+  })
+}, 'VDatePicker');
+export const VDatePicker = genericComponent()({
+  name: 'VDatePicker',
+  props: makeVDatePickerProps(),
+  emits: {
+    'click:cancel': () => true,
+    'click:save': () => true,
+    ...dateEmits
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const adapter = useDate();
+    const {
+      t
+    } = useLocale();
+    createDatePicker(props);
+    const model = ref(props.modelValue ?? []);
+    const isReversing = ref(false);
+    const displayDate = useProxiedModel(props, 'displayDate', props.displayDate);
+    const inputMode = useProxiedModel(props, 'inputMode', props.inputMode);
+    const viewMode = useProxiedModel(props, 'viewMode', props.viewMode);
+    const inputModel = computed(() => model.value.length ? adapter.format(model.value[0], 'keyboardDate') : '');
+    const title = computed(() => t(props.title));
+    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`);
+    watch(inputModel, () => {
+      const {
+        isValid,
+        date
+      } = adapter;
+      model.value = isValid(inputModel.value) ? [date(inputModel.value)] : [];
+    });
+    watch(model, (val, oldVal) => {
+      if (props.hideActions) {
+        emit('update:modelValue', val);
+      }
+      isReversing.value = adapter.isBefore(val[0], oldVal[0]);
+    });
+    function onClickCancel() {
+      emit('click:cancel');
+    }
+    function onClickSave() {
+      emit('click:save');
+      emit('update:modelValue', model.value);
+    }
+    function onClickAppend() {
+      inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar';
+    }
+    const headerSlotProps = computed(() => ({
+      header: header.value,
+      appendIcon: headerIcon.value,
+      transition: headerTransition.value,
+      'onClick:append': onClickAppend
+    }));
+    useRender(() => {
+      const [pickerProps] = VPicker.filterProps(props);
+      const [datePickerControlsProps] = VDatePickerControls.filterProps(props);
+      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
+      const [datePickerYearsProps] = VDatePickerYears.filterProps(props);
+      return _createVNode(VPicker, _mergeProps(pickerProps, {
+        "class": ['v-date-picker', props.class],
+        "style": props.style,
+        "title": 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, {
+          "displayDate": displayDate.value,
+          "onUpdate:displayDate": $event => displayDate.value = $event,
+          "viewMode": viewMode.value,
+          "onUpdate:viewMode": $event => viewMode.value = $event
+        }), null), _createVNode(MaybeTransition, {
+          "transition": props.transition,
+          "mode": "out-in"
+        }, {
+          default: () => [viewMode.value === 'month' ? _createVNode(VDatePickerMonth, _mergeProps(datePickerMonthProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "displayDate": displayDate.value,
+            "onUpdate:displayDate": $event => displayDate.value = $event
+          }), null) : _createVNode(VDatePickerYears, _mergeProps(datePickerYearsProps, {
+            "displayDate": displayDate.value,
+            "onUpdate:displayDate": $event => displayDate.value = $event,
+            "viewMode": viewMode.value,
+            "onUpdate:viewMode": $event => viewMode.value = $event
+          }), null)]
+        })]) : _createVNode("div", {
+          "class": "v-date-picker__input"
+        }, [_createVNode(VTextField, {
+          "modelValue": inputModel.value,
+          "onUpdate:modelValue": $event => inputModel.value = $event,
+          "label": t(props.inputText),
+          "placeholder": "dd/mm/yyyy"
+        }, null)]),
+        actions: !props.hideActions ? () => _createVNode("div", null, [_createVNode(VBtn, {
+          "variant": "text",
+          "color": props.color,
+          "onClick": onClickCancel,
+          "text": t(props.cancelText)
+        }, null), _createVNode(VBtn, {
+          "variant": "text",
+          "color": props.color,
+          "onClick": onClickSave,
+          "text": t(props.okText)
+        }, null)]) : undefined
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VDatePicker.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VDatePicker.mjs","names":["makeVDatePickerControlsProps","VDatePickerControls","VDatePickerHeader","makeVDatePickerMonthProps","VDatePickerMonth","makeVDatePickerYearsProps","VDatePickerYears","VBtn","VTextField","dateEmits","makeDateProps","makeVPickerProps","VPicker","createDatePicker","useLocale","useProxiedModel","makeTransitionProps","MaybeTransition","useDate","computed","ref","watch","genericComponent","propsFactory","useRender","makeVDatePickerProps","calendarIcon","type","String","default","keyboardIcon","cancelText","okText","inputText","header","hideActions","Boolean","transition","title","VDatePicker","name","props","emits","click:cancel","click:save","setup","_ref","emit","slots","adapter","t","model","modelValue","isReversing","displayDate","inputMode","viewMode","inputModel","value","length","format","headerIcon","headerTransition","isValid","date","val","oldVal","isBefore","onClickCancel","onClickSave","onClickAppend","headerSlotProps","appendIcon","pickerProps","filterProps","datePickerControlsProps","datePickerMonthProps","datePickerYearsProps","_createVNode","_mergeProps","class","style","_Fragment","$event","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 { 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 { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed, ref, 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  header: {\n    type: String,\n    default: '$vuetify.datePicker.header',\n  },\n  hideActions: Boolean,\n\n  ...makeDateProps(),\n  ...makeTransitionProps({ transition: 'fade' }),\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    createDatePicker(props)\n\n    const model = ref<any[]>(props.modelValue ?? [])\n    const isReversing = ref(false)\n\n    const displayDate = useProxiedModel(props, 'displayDate', props.displayDate)\n    const inputMode = useProxiedModel(props, 'inputMode', props.inputMode)\n    const viewMode = useProxiedModel(props, 'viewMode', props.viewMode)\n\n    const inputModel = computed(() => model.value.length ? adapter.format(model.value[0], 'keyboardDate') : '')\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\n    watch(inputModel, () => {\n      const { isValid, date } = adapter\n\n      model.value = isValid(inputModel.value) ? [date(inputModel.value)] : []\n    })\n\n    watch(model, (val, oldVal) => {\n      if (props.hideActions) {\n        emit('update:modelValue', val)\n      }\n\n      isReversing.value = adapter.isBefore(val[0], oldVal[0])\n    })\n\n    function onClickCancel () {\n      emit('click:cancel')\n    }\n    function onClickSave () {\n      emit('click:save')\n      emit('update:modelValue', model.value)\n    }\n    function onClickAppend () {\n      inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar'\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          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                  v-model:displayDate={ displayDate.value }\n                  v-model:viewMode={ viewMode.value }\n                />\n\n                <MaybeTransition transition={ props.transition } mode=\"out-in\">\n                  { viewMode.value === 'month' ? (\n                    <VDatePickerMonth\n                      { ...datePickerMonthProps }\n                      v-model={ model.value }\n                      v-model:displayDate={ displayDate.value }\n                    />\n                  ) : (\n                    <VDatePickerYears\n                      { ...datePickerYearsProps }\n                      v-model:displayDate={ displayDate.value }\n                      v-model:viewMode={ viewMode.value }\n                    />\n                  )}\n                </MaybeTransition>\n              </>\n            ) : (\n              <div class=\"v-date-picker__input\">\n                <VTextField\n                  v-model={ inputModel.value }\n                  label={ t(props.inputText) }\n                  placeholder=\"dd/mm/yyyy\"\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":";AAAA;AACA;;AAEA;AAAA,SACSA,4BAA4B,EAAEC,mBAAmB;AAAA,SACjDC,iBAAiB;AAAA,SACjBC,yBAAyB,EAAEC,gBAAgB;AAAA,SAC3CC,yBAAyB,EAAEC,gBAAgB;AAAA,SAC3CC,IAAI;AAAA,SACJC,UAAU;AAAA,SACVC,SAAS,EAAEC,aAAa;AAAA,SACxBC,gBAAgB,EAAEC,OAAO,kCAElC;AAAA,SACSC,gBAAgB;AAAA,SAChBC,SAAS;AAAA,SACTC,eAAe;AAAA,SACfC,mBAAmB,EAAEC,eAAe;AAAA,SACpCC,OAAO,6BAEhB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AASA,OAAO,MAAMC,oBAAoB,GAAGF,YAAY,CAAC;EAC/CG,YAAY,EAAE;IACZC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDC,YAAY,EAAE;IACZH,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDE,UAAU,EAAE;IACVJ,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDG,MAAM,EAAE;IACNL,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDI,SAAS,EAAE;IACTN,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDK,MAAM,EAAE;IACNP,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDM,WAAW,EAAEC,OAAO;EAEpB,GAAG1B,aAAa,EAAE;EAClB,GAAGM,mBAAmB,CAAC;IAAEqB,UAAU,EAAE;EAAO,CAAC,CAAC;EAC9C,GAAGrC,4BAA4B,EAAE;EACjC,GAAGG,yBAAyB,EAAE;EAC9B,GAAGE,yBAAyB,EAAE;EAC9B,GAAGM,gBAAgB,CAAC;IAAE2B,KAAK,EAAE;EAA4B,CAAC;AAC5D,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMC,WAAW,GAAGjB,gBAAgB,EAAoB,CAAC;EAC9DkB,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEhB,oBAAoB,EAAE;EAE7BiB,KAAK,EAAE;IACL,cAAc,EAAEC,CAAA,KAAM,IAAI;IAC1B,YAAY,EAAEC,CAAA,KAAM,IAAI;IACxB,GAAGnC;EACL,CAAC;EAEDoC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAMG,OAAO,GAAG/B,OAAO,EAAE;IACzB,MAAM;MAAEgC;IAAE,CAAC,GAAGpC,SAAS,EAAE;IAEzBD,gBAAgB,CAAC4B,KAAK,CAAC;IAEvB,MAAMU,KAAK,GAAG/B,GAAG,CAAQqB,KAAK,CAACW,UAAU,IAAI,EAAE,CAAC;IAChD,MAAMC,WAAW,GAAGjC,GAAG,CAAC,KAAK,CAAC;IAE9B,MAAMkC,WAAW,GAAGvC,eAAe,CAAC0B,KAAK,EAAE,aAAa,EAAEA,KAAK,CAACa,WAAW,CAAC;IAC5E,MAAMC,SAAS,GAAGxC,eAAe,CAAC0B,KAAK,EAAE,WAAW,EAAEA,KAAK,CAACc,SAAS,CAAC;IACtE,MAAMC,QAAQ,GAAGzC,eAAe,CAAC0B,KAAK,EAAE,UAAU,EAAEA,KAAK,CAACe,QAAQ,CAAC;IAEnE,MAAMC,UAAU,GAAGtC,QAAQ,CAAC,MAAMgC,KAAK,CAACO,KAAK,CAACC,MAAM,GAAGV,OAAO,CAACW,MAAM,CAACT,KAAK,CAACO,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,EAAE,CAAC;IAC3G,MAAMpB,KAAK,GAAGnB,QAAQ,CAAC,MAAM+B,CAAC,CAACT,KAAK,CAACH,KAAK,CAAC,CAAC;IAC5C,MAAMJ,MAAM,GAAGf,QAAQ,CAAC,MAAMgC,KAAK,CAACO,KAAK,CAACC,MAAM,GAAGV,OAAO,CAACW,MAAM,CAACT,KAAK,CAACO,KAAK,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAGR,CAAC,CAACT,KAAK,CAACP,MAAM,CAAC,CAAC;IAC7H,MAAM2B,UAAU,GAAG1C,QAAQ,CAAC,MAAMoC,SAAS,CAACG,KAAK,KAAK,UAAU,GAAGjB,KAAK,CAACX,YAAY,GAAGW,KAAK,CAACf,YAAY,CAAC;IAC3G,MAAMoC,gBAAgB,GAAG3C,QAAQ,CAAC,MAAO,qBAAoBkC,WAAW,CAACK,KAAK,GAAG,UAAU,GAAG,EAAG,aAAY,CAAC;IAE9GrC,KAAK,CAACoC,UAAU,EAAE,MAAM;MACtB,MAAM;QAAEM,OAAO;QAAEC;MAAK,CAAC,GAAGf,OAAO;MAEjCE,KAAK,CAACO,KAAK,GAAGK,OAAO,CAACN,UAAU,CAACC,KAAK,CAAC,GAAG,CAACM,IAAI,CAACP,UAAU,CAACC,KAAK,CAAC,CAAC,GAAG,EAAE;IACzE,CAAC,CAAC;IAEFrC,KAAK,CAAC8B,KAAK,EAAE,CAACc,GAAG,EAAEC,MAAM,KAAK;MAC5B,IAAIzB,KAAK,CAACN,WAAW,EAAE;QACrBY,IAAI,CAAC,mBAAmB,EAAEkB,GAAG,CAAC;MAChC;MAEAZ,WAAW,CAACK,KAAK,GAAGT,OAAO,CAACkB,QAAQ,CAACF,GAAG,CAAC,CAAC,CAAC,EAAEC,MAAM,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,SAASE,aAAaA,CAAA,EAAI;MACxBrB,IAAI,CAAC,cAAc,CAAC;IACtB;IACA,SAASsB,WAAWA,CAAA,EAAI;MACtBtB,IAAI,CAAC,YAAY,CAAC;MAClBA,IAAI,CAAC,mBAAmB,EAAEI,KAAK,CAACO,KAAK,CAAC;IACxC;IACA,SAASY,aAAaA,CAAA,EAAI;MACxBf,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACG,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU;IAC5E;IAEA,MAAMa,eAAe,GAAGpD,QAAQ,CAAC,OAAO;MACtCe,MAAM,EAAEA,MAAM,CAACwB,KAAK;MACpBc,UAAU,EAAEX,UAAU,CAACH,KAAK;MAC5BrB,UAAU,EAAEyB,gBAAgB,CAACJ,KAAK;MAClC,gBAAgB,EAAEY;IACpB,CAAC,CAAC,CAAC;IAEH9C,SAAS,CAAC,MAAM;MACd,MAAM,CAACiD,WAAW,CAAC,GAAG7D,OAAO,CAAC8D,WAAW,CAACjC,KAAK,CAAC;MAChD,MAAM,CAACkC,uBAAuB,CAAC,GAAG1E,mBAAmB,CAACyE,WAAW,CAACjC,KAAK,CAAC;MACxE,MAAM,CAACmC,oBAAoB,CAAC,GAAGxE,gBAAgB,CAACsE,WAAW,CAACjC,KAAK,CAAC;MAClE,MAAM,CAACoC,oBAAoB,CAAC,GAAGvE,gBAAgB,CAACoE,WAAW,CAACjC,KAAK,CAAC;MAElE,OAAAqC,YAAA,CAAAlE,OAAA,EAAAmE,WAAA,CAESN,WAAW;QAAA,SACT,CACL,eAAe,EACfhC,KAAK,CAACuC,KAAK,CACZ;QAAA,SACOvC,KAAK,CAACwC,KAAK;QAAA,SACX3C,KAAK,CAACoB;MAAK,IACV;QACPxB,MAAM,EAAEA,CAAA,KAAMc,KAAK,CAACd,MAAM,GAAGqC,eAAe,CAACb,KAAK,CAAC,IAAAoB,YAAA,CAAA5E,iBAAA,EAAA6E,WAAA;UAAA,OAE3C;QAAQ,GACPR,eAAe,CAACb,KAAK,QAE7B;QACD7B,OAAO,EAAEA,CAAA,KAAM0B,SAAS,CAACG,KAAK,KAAK,UAAU,GAAAoB,YAAA,CAAAI,SAAA,SAAAJ,YAAA,CAAA7E,mBAAA,EAAA8E,WAAA,CAGlCJ,uBAAuB;UAAA,eACNrB,WAAW,CAACI,KAAK;UAAA,wBAAAyB,MAAA,IAAjB7B,WAAW,CAACI,KAAK,GAAAyB,MAAA;UAAA,YACpB3B,QAAQ,CAACE,KAAK;UAAA,qBAAAyB,MAAA,IAAd3B,QAAQ,CAACE,KAAK,GAAAyB;QAAA,WAAAL,YAAA,CAAA7D,eAAA;UAAA,cAGLwB,KAAK,CAACJ,UAAU;UAAA,QAAQ;QAAQ;UAAAR,OAAA,EAAAA,CAAA,MAC1D2B,QAAQ,CAACE,KAAK,KAAK,OAAO,GAAAoB,YAAA,CAAA1E,gBAAA,EAAA2E,WAAA,CAEnBH,oBAAoB;YAAA,cACfzB,KAAK,CAACO,KAAK;YAAA,uBAAAyB,MAAA,IAAXhC,KAAK,CAACO,KAAK,GAAAyB,MAAA;YAAA,eACC7B,WAAW,CAACI,KAAK;YAAA,wBAAAyB,MAAA,IAAjB7B,WAAW,CAACI,KAAK,GAAAyB;UAAA,YAAAL,YAAA,CAAAxE,gBAAA,EAAAyE,WAAA,CAIlCF,oBAAoB;YAAA,eACHvB,WAAW,CAACI,KAAK;YAAA,wBAAAyB,MAAA,IAAjB7B,WAAW,CAACI,KAAK,GAAAyB,MAAA;YAAA,YACpB3B,QAAQ,CAACE,KAAK;YAAA,qBAAAyB,MAAA,IAAd3B,QAAQ,CAACE,KAAK,GAAAyB;UAAA,SAEpC;QAAA,OAAAL,YAAA;UAAA,SAIM;QAAsB,IAAAA,YAAA,CAAAtE,UAAA;UAAA,cAEnBiD,UAAU,CAACC,KAAK;UAAA,uBAAAyB,MAAA,IAAhB1B,UAAU,CAACC,KAAK,GAAAyB,MAAA;UAAA,SAClBjC,CAAC,CAACT,KAAK,CAACR,SAAS,CAAC;UAAA,eACd;QAAY,UAG7B;QACDmD,OAAO,EAAE,CAAC3C,KAAK,CAACN,WAAW,GAAG,MAAA2C,YAAA,eAAAA,YAAA,CAAAvE,IAAA;UAAA,WAGhB,MAAM;UAAA,SACNkC,KAAK,CAAC4C,KAAK;UAAA,WACTjB,aAAa;UAAA,QAChBlB,CAAC,CAACT,KAAK,CAACV,UAAU;QAAC,UAAA+C,YAAA,CAAAvE,IAAA;UAAA,WAIlB,MAAM;UAAA,SACNkC,KAAK,CAAC4C,KAAK;UAAA,WACThB,WAAW;UAAA,QACdnB,CAAC,CAACT,KAAK,CAACT,MAAM;QAAC,UAG3B,GAAGsD;MACN,CAAC;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/labs/VDatePicker/VDatePicker.sass

@@ -0,0 +1,23 @@
+@use '../../styles/tools'
+
+.v-date-picker__input
+  padding-top: 16px
+  padding-left: 24px
+  padding-right: 24px
+
+.v-date-picker
+  overflow: hidden
+  width: 358px
+
+  .v-date-picker-month
+    padding-bottom: 8px
+    padding-inline-start: 12px
+    padding-inline-end: 12px
+
+    .v-date-picker-month__day
+      height: 40px
+      width: 40px
+
+      .v-btn
+        --v-btn-height: 24px
+        --v-btn-size: 0.85rem

package/lib/labs/VDatePicker/VDatePickerControls.css

@@ -0,0 +1,15 @@
+.v-date-picker-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  padding-inline-start: 24px;
+  padding-inline-end: 12px;
+}
+.v-date-picker-controls .v-btn:last-child {
+  margin-left: 24px;
+}
+
+.v-date-picker-controls__date {
+  margin-right: 4px;
+}

package/lib/labs/VDatePicker/VDatePickerControls.mjs

@@ -0,0 +1,80 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VDatePickerControls.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VSpacer } from "../../components/VGrid/index.mjs"; // Composables
+import { useDate } from "../date/index.mjs"; // Utilities
+import { computed } from 'vue';
+import { dateEmits, makeDateProps } from "../VDateInput/composables.mjs";
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs";
+export const makeVDatePickerControlsProps = propsFactory({
+  nextIcon: {
+    type: [String],
+    default: '$next'
+  },
+  prevIcon: {
+    type: [String],
+    default: '$prev'
+  },
+  expandIcon: {
+    type: [String],
+    default: '$expand'
+  },
+  collapseIcon: {
+    type: [String],
+    default: '$collapse'
+  },
+  range: {
+    default: false,
+    type: [String, Boolean],
+    validator: v => v === false || ['start', 'end'].includes(v)
+  },
+  ...omit(makeDateProps(), ['modelValue', 'inputMode'])
+}, 'VDatePickerControls');
+export const VDatePickerControls = genericComponent()({
+  name: 'VDatePickerControls',
+  props: makeVDatePickerControlsProps(),
+  emits: {
+    ...omit(dateEmits, ['update:modelValue', 'update:inputMode'])
+  },
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const adapter = useDate();
+    const monthAndYear = computed(() => {
+      const month = props.range === 'end' ? adapter.addMonths(props.displayDate, 1) : props.displayDate;
+      return adapter.format(month, 'monthAndYear');
+    });
+    useRender(() => {
+      const prevBtn = _createVNode(VBtn, {
+        "variant": "text",
+        "icon": props.prevIcon,
+        "onClick": () => emit('update:displayDate', adapter.addMonths(props.displayDate, -1))
+      }, null);
+      const nextBtn = _createVNode(VBtn, {
+        "variant": "text",
+        "icon": props.nextIcon,
+        "onClick": () => emit('update:displayDate', adapter.addMonths(props.displayDate, 1))
+      }, null);
+      return _createVNode("div", {
+        "class": "v-date-picker-controls"
+      }, [props.viewMode === 'month' && props.range === 'start' && prevBtn, !!props.range && _createVNode(VSpacer, {
+        "key": "range-spacer"
+      }, null), _createVNode("div", {
+        "class": "v-date-picker-controls__date"
+      }, [monthAndYear.value]), _createVNode(VBtn, {
+        "key": "expand-btn",
+        "variant": "text",
+        "icon": props.viewMode === 'month' ? props.expandIcon : props.collapseIcon,
+        "onClick": () => emit('update:viewMode', props.viewMode === 'month' ? 'year' : 'month')
+      }, null), _createVNode(VSpacer, null, null), props.viewMode === 'month' && !props.range && _createVNode("div", {
+        "key": "month-buttons"
+      }, [prevBtn, nextBtn]), props.viewMode === 'month' && props.range === 'end' && nextBtn]);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VDatePickerControls.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VDatePickerControls.mjs","names":["VBtn","VSpacer","useDate","computed","dateEmits","makeDateProps","genericComponent","omit","propsFactory","useRender","makeVDatePickerControlsProps","nextIcon","type","String","default","prevIcon","expandIcon","collapseIcon","range","Boolean","validator","v","includes","VDatePickerControls","name","props","emits","setup","_ref","emit","adapter","monthAndYear","month","addMonths","displayDate","format","prevBtn","_createVNode","onClick","nextBtn","viewMode","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// Composables\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed } from 'vue'\nimport { dateEmits, makeDateProps } from '../VDateInput/composables'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\nexport const makeVDatePickerControlsProps = propsFactory({\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  range: {\n    default: false,\n    type: [String, Boolean],\n    validator: (v: any) => v === false || ['start', 'end'].includes(v),\n  },\n  ...omit(makeDateProps(), ['modelValue', 'inputMode']),\n}, 'VDatePickerControls')\n\nexport const VDatePickerControls = genericComponent()({\n  name: 'VDatePickerControls',\n\n  props: makeVDatePickerControlsProps(),\n\n  emits: {\n    ...omit(dateEmits, ['update:modelValue', 'update:inputMode']),\n  },\n\n  setup (props, { emit }) {\n    const adapter = useDate()\n    const monthAndYear = computed(() => {\n      const month = props.range === 'end' ? adapter.addMonths(props.displayDate, 1) : props.displayDate\n      return adapter.format(month, 'monthAndYear')\n    })\n\n    useRender(() => {\n      const prevBtn = (\n        <VBtn\n          variant=\"text\"\n          icon={ props.prevIcon }\n          onClick={ () => emit('update:displayDate', adapter.addMonths(props.displayDate, -1)) }\n        />\n      )\n\n      const nextBtn = (\n        <VBtn\n          variant=\"text\"\n          icon={ props.nextIcon }\n          onClick={ () => emit('update:displayDate', adapter.addMonths(props.displayDate, 1)) }\n        />\n      )\n\n      return (\n        <div class=\"v-date-picker-controls\">\n          { props.viewMode === 'month' && props.range === 'start' && prevBtn }\n          { !!props.range && <VSpacer key=\"range-spacer\" /> }\n          <div class=\"v-date-picker-controls__date\">{ monthAndYear.value }</div>\n          <VBtn\n            key=\"expand-btn\"\n            variant=\"text\"\n            icon={ props.viewMode === 'month' ? props.expandIcon : props.collapseIcon }\n            onClick={ () => emit('update:viewMode', props.viewMode === 'month' ? 'year' : 'month') }\n          />\n          <VSpacer />\n          { (props.viewMode === 'month' && !props.range) && (\n            <div key=\"month-buttons\">\n              { prevBtn }\n              { nextBtn }\n            </div>\n          )}\n          { props.viewMode === 'month' && props.range === 'end' && nextBtn }\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

@@ -0,0 +1,15 @@
+.v-date-picker-controls
+  display: flex
+  align-items: center
+  justify-content: space-between
+  font-size: .875rem
+  padding-inline-start: 24px
+  // padding-top: 4px
+  // padding-bottom: 4px
+  padding-inline-end: 12px
+
+  .v-btn:last-child
+    margin-left: 24px
+
+.v-date-picker-controls__date
+  margin-right: 4px

package/lib/labs/VDatePicker/VDatePickerHeader.css

@@ -0,0 +1,54 @@
+.v-date-picker-header {
+  display: grid;
+  grid-template-areas: "prepend content append";
+  grid-template-columns: min-content minmax(0, 1fr) min-content;
+  overflow: hidden;
+  padding-inline-start: 24px;
+  padding-inline-end: 12px;
+  padding-bottom: 12px;
+}
+
+.v-date-picker-header__append {
+  grid-area: append;
+}
+
+.v-date-picker-header__prepend {
+  grid-area: prepend;
+  padding-inline-start: 8px;
+}
+
+.v-date-picker-header__content {
+  align-items: center;
+  display: flex;
+  font-size: 32px;
+  line-height: 40px;
+  grid-area: content;
+  justify-content: space-between;
+}
+
+.date-picker-header-transition-enter-active,
+.date-picker-header-reverse-transition-enter-active {
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.date-picker-header-transition-leave-active,
+.date-picker-header-reverse-transition-leave-active {
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.date-picker-header-transition-enter-from {
+  transform: translate(0, 100%);
+}
+.date-picker-header-transition-leave-to {
+  opacity: 0;
+  transform: translate(0, -100%);
+}
+
+.date-picker-header-reverse-transition-enter-from {
+  transform: translate(0, -100%);
+}
+.date-picker-header-reverse-transition-leave-to {
+  opacity: 0;
+  transform: translate(0, 100%);
+}