vuetify 3.3.7 → 3.3.9

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","useProxiedModel","useDate","computed","ref","watch","genericComponent","propsFactory","useRender","makeVDatePickerProps","calendarIcon","type","String","default","keyboardIcon","cancelText","okText","inputText","header","hideActions","Boolean","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","transition","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 { 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 { useProxiedModel } from '@/composables/proxiedModel'\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  ...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      if (val[0] && oldVal[0]) {\n        isReversing.value = adapter.isBefore(val[0], oldVal[0])\n      }\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                <VFadeTransition hideOnLeave>\n                  { viewMode.value === 'month' ? (\n                    <VDatePickerMonth\n                      key=\"date-picker-month\"\n                      { ...datePickerMonthProps }\n                      v-model={ model.value }\n                      v-model:displayDate={ displayDate.value }\n                    />\n                  ) : (\n                    <VDatePickerYears\n                      key=\"date-picker-years\"\n                      { ...datePickerYearsProps }\n                      v-model:displayDate={ displayDate.value }\n                      v-model:viewMode={ viewMode.value }\n                    />\n                  )}\n                </VFadeTransition>\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":"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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","watch","genericComponent","propsFactory","useRender","makeVDatePickerProps","calendarIcon","type","String","default","keyboardIcon","cancelText","okText","inputText","header","hideActions","Boolean","title","VDatePicker","name","props","emits","click:cancel","click:save","setup","_ref","emit","slots","adapter","t","model","displayDate","viewMode","inputMode","isReversing","inputModel","value","length","format","headerIcon","headerTransition","isValid","date","val","oldVal","isBefore","onClickCancel","onClickSave","onClickAppend","headerSlotProps","appendIcon","transition","pickerProps","filterProps","datePickerControlsProps","datePickerMonthProps","datePickerYearsProps","_createVNode","_mergeProps","class","style","showWeek","_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 { 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, 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  ...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 } = createDatePicker(props)\n\n    const isReversing = ref(false)\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      if (val[0] && oldVal[0]) {\n        isReversing.value = adapter.isBefore(val[0], oldVal[0])\n      }\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          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                  v-model:displayDate={ displayDate.value }\n                  v-model:viewMode={ viewMode.value }\n                />\n\n                <VFadeTransition hideOnLeave>\n                  { viewMode.value === 'month' ? (\n                    <VDatePickerMonth\n                      key=\"date-picker-month\"\n                      { ...datePickerMonthProps }\n                      v-model={ model.value }\n                      v-model:displayDate={ displayDate.value }\n                    />\n                  ) : (\n                    <VDatePickerYears\n                      key=\"date-picker-years\"\n                      { ...datePickerYearsProps }\n                      v-model:displayDate={ displayDate.value }\n                      v-model:viewMode={ viewMode.value }\n                    />\n                  )}\n                </VFadeTransition>\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":"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"}

package/lib/labs/VDatePicker/VDatePickerControls.css

@@ -14,4 +14,11 @@
 
 .v-date-picker-controls__date {
   margin-right: 4px;
+}
+
+.v-date-picker-controls__month {
+  display: flex;
+}
+.v-date-picker-controls__month.v-locale--is-rtl, .v-locale--is-rtl .v-date-picker-controls__month {
+  flex-direction: row-reverse;
 }

package/lib/labs/VDatePicker/VDatePickerControls.mjs

@@ -71,6 +71,7 @@ export const VDatePickerControls = genericComponent()({
         "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", {
+        "class": "v-date-picker-controls__month",
         "key": "month-buttons"
       }, [prevBtn, nextBtn]), props.viewMode === 'month' && props.range === 'end' && nextBtn]);
     });

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

@@ -1 +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: [Boolean, String],\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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"}
+{"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: [Boolean, String],\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 class=\"v-date-picker-controls__month\" 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

@@ -1,3 +1,5 @@
+@use '../../styles/tools'
+
 .v-date-picker-controls
   display: flex
   align-items: center
@@ -13,3 +15,9 @@
 
 .v-date-picker-controls__date
   margin-right: 4px
+
+.v-date-picker-controls__month
+  display: flex
+
+  @include tools.rtl()
+    flex-direction: row-reverse

package/lib/labs/VDatePicker/composables.mjs

@@ -1,4 +1,5 @@
-// Utilities
+// Composables
+import { createDateInput } from "../VDateInput/composables.mjs"; // Utilities
 import { inject, provide, ref } from 'vue';
 
 // Types
@@ -17,12 +18,24 @@ export function createDatePicker(props) {
     dragHandle,
     hasScrolled
   });
+
+  // TODO: This composable should probably not live in DateInput
+  const {
+    model,
+    displayDate,
+    viewMode,
+    inputMode
+  } = createDateInput(props, !!props.multiple);
   return {
     hoverDate,
     hoverMonth,
     isDragging,
     dragHandle,
-    hasScrolled
+    hasScrolled,
+    model,
+    displayDate,
+    viewMode,
+    inputMode
   };
 }
 export function useDatePicker() {

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

@@ -1 +1 @@
-{"version":3,"file":"composables.mjs","names":["inject","provide","ref","DatePickerSymbol","Symbol","for","createDatePicker","props","hoverDate","hoverMonth","isDragging","dragHandle","hasScrolled","useDatePicker","datePicker","Error"],"sources":["../../../src/labs/VDatePicker/composables.ts"],"sourcesContent":["// Utilities\nimport { inject, provide, ref } from 'vue'\n\n// Types\nimport type { InjectionKey, Ref } from 'vue'\n\nexport type DatePickerProvide = {\n  hoverDate: Ref<any>\n  hoverMonth: Ref<any>\n  isDragging: Ref<boolean>\n  dragHandle: Ref<number | null>\n  hasScrolled: Ref<boolean>\n}\n\nexport const DatePickerSymbol: InjectionKey<DatePickerProvide> = Symbol.for('vuetify:date-picker')\n\ninterface DateProps {\n}\n\nexport function createDatePicker (props: DateProps) {\n  const hoverDate = ref()\n  const hoverMonth = ref()\n  const isDragging = ref(false)\n  const dragHandle = ref(null)\n  const hasScrolled = ref(false)\n\n  provide(DatePickerSymbol, {\n    hoverDate,\n    hoverMonth,\n    isDragging,\n    dragHandle,\n    hasScrolled,\n  })\n\n  return {\n    hoverDate,\n    hoverMonth,\n    isDragging,\n    dragHandle,\n    hasScrolled,\n  }\n}\n\nexport function useDatePicker () {\n  const datePicker = inject(DatePickerSymbol)\n\n  if (!datePicker) throw new Error('foo')\n\n  return datePicker\n}\n"],"mappings":"AAAA;AACA,SAASA,MAAM,EAAEC,OAAO,EAAEC,GAAG,QAAQ,KAAK;;AAE1C;;AAWA,OAAO,MAAMC,gBAAiD,GAAGC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAKlG,OAAO,SAASC,gBAAgBA,CAAEC,KAAgB,EAAE;EAClD,MAAMC,SAAS,GAAGN,GAAG,EAAE;EACvB,MAAMO,UAAU,GAAGP,GAAG,EAAE;EACxB,MAAMQ,UAAU,GAAGR,GAAG,CAAC,KAAK,CAAC;EAC7B,MAAMS,UAAU,GAAGT,GAAG,CAAC,IAAI,CAAC;EAC5B,MAAMU,WAAW,GAAGV,GAAG,CAAC,KAAK,CAAC;EAE9BD,OAAO,CAACE,gBAAgB,EAAE;IACxBK,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,UAAU;IACVC;EACF,CAAC,CAAC;EAEF,OAAO;IACLJ,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,UAAU;IACVC;EACF,CAAC;AACH;AAEA,OAAO,SAASC,aAAaA,CAAA,EAAI;EAC/B,MAAMC,UAAU,GAAGd,MAAM,CAACG,gBAAgB,CAAC;EAE3C,IAAI,CAACW,UAAU,EAAE,MAAM,IAAIC,KAAK,CAAC,KAAK,CAAC;EAEvC,OAAOD,UAAU;AACnB"}
+{"version":3,"file":"composables.mjs","names":["createDateInput","inject","provide","ref","DatePickerSymbol","Symbol","for","createDatePicker","props","hoverDate","hoverMonth","isDragging","dragHandle","hasScrolled","model","displayDate","viewMode","inputMode","multiple","useDatePicker","datePicker","Error"],"sources":["../../../src/labs/VDatePicker/composables.ts"],"sourcesContent":["// Composables\nimport { createDateInput } from '../VDateInput/composables'\n\n// Utilities\nimport { inject, provide, ref } from 'vue'\n\n// Types\nimport type { InjectionKey, Ref } from 'vue'\nimport type { DateInputProps } from '../VDateInput/composables'\n\nexport type DatePickerProvide = {\n  hoverDate: Ref<any>\n  hoverMonth: Ref<any>\n  isDragging: Ref<boolean>\n  dragHandle: Ref<number | null>\n  hasScrolled: Ref<boolean>\n}\n\nexport const DatePickerSymbol: InjectionKey<DatePickerProvide> = Symbol.for('vuetify:date-picker')\n\ntype DateProps = DateInputProps & { multiple?: boolean }\n\nexport function createDatePicker (props: DateProps) {\n  const hoverDate = ref()\n  const hoverMonth = ref()\n  const isDragging = ref(false)\n  const dragHandle = ref(null)\n  const hasScrolled = ref(false)\n\n  provide(DatePickerSymbol, {\n    hoverDate,\n    hoverMonth,\n    isDragging,\n    dragHandle,\n    hasScrolled,\n  })\n\n  // TODO: This composable should probably not live in DateInput\n  const { model, displayDate, viewMode, inputMode } = createDateInput(props, !!props.multiple)\n\n  return {\n    hoverDate,\n    hoverMonth,\n    isDragging,\n    dragHandle,\n    hasScrolled,\n    model,\n    displayDate,\n    viewMode,\n    inputMode,\n  }\n}\n\nexport function useDatePicker () {\n  const datePicker = inject(DatePickerSymbol)\n\n  if (!datePicker) throw new Error('foo')\n\n  return datePicker\n}\n"],"mappings":"AAAA;AAAA,SACSA,eAAe,yCAExB;AACA,SAASC,MAAM,EAAEC,OAAO,EAAEC,GAAG,QAAQ,KAAK;;AAE1C;;AAYA,OAAO,MAAMC,gBAAiD,GAAGC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAIlG,OAAO,SAASC,gBAAgBA,CAAEC,KAAgB,EAAE;EAClD,MAAMC,SAAS,GAAGN,GAAG,EAAE;EACvB,MAAMO,UAAU,GAAGP,GAAG,EAAE;EACxB,MAAMQ,UAAU,GAAGR,GAAG,CAAC,KAAK,CAAC;EAC7B,MAAMS,UAAU,GAAGT,GAAG,CAAC,IAAI,CAAC;EAC5B,MAAMU,WAAW,GAAGV,GAAG,CAAC,KAAK,CAAC;EAE9BD,OAAO,CAACE,gBAAgB,EAAE;IACxBK,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,UAAU;IACVC;EACF,CAAC,CAAC;;EAEF;EACA,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGjB,eAAe,CAACQ,KAAK,EAAE,CAAC,CAACA,KAAK,CAACU,QAAQ,CAAC;EAE5F,OAAO;IACLT,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,UAAU;IACVC,WAAW;IACXC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC;AACH;AAEA,OAAO,SAASE,aAAaA,CAAA,EAAI;EAC/B,MAAMC,UAAU,GAAGnB,MAAM,CAACG,gBAAgB,CAAC;EAE3C,IAAI,CAACgB,UAAU,EAAE,MAAM,IAAIC,KAAK,CAAC,KAAK,CAAC;EAEvC,OAAOD,UAAU;AACnB"}

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

@@ -2842,7 +2842,7 @@ declare const VDatePicker: {
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "v-slot:header"?: false | ((arg: {
                 header: string;
@@ -2874,7 +2874,7 @@ declare const VDatePicker: {
         }>;
         $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: ((event: "update:modelValue", date: any[]) => void) & ((event: "update:focused", focused: boolean) => void) & ((event: "update:inputMode", inputMode: "calendar" | "keyboard") => void) & ((event: "update:displayDate", date: any) => void) & ((event: "update:viewMode", viewMode: "month" | "year") => void) & ((event: "click:cancel") => void) & ((event: "click:save") => void);
+        $emit: ((event: "update:modelValue", date: readonly any[]) => void) & ((event: "update:focused", focused: boolean) => void) & ((event: "update:inputMode", inputMode: "calendar" | "keyboard") => void) & ((event: "update:displayDate", date: any) => void) & ((event: "update:viewMode", viewMode: "month" | "year") => void) & ((event: "click:cancel") => void) & ((event: "click:save") => void);
         $el: any;
         $options: vue.ComponentOptionsBase<{
             header: string;
@@ -2943,7 +2943,7 @@ declare const VDatePicker: {
                 'onClick:append': () => void;
             }) => vue.VNodeChild) | undefined;
         } & {
-            "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "onUpdate:displayDate"?: ((date: any) => any) | undefined;
             "onUpdate:inputMode"?: ((inputMode: "calendar" | "keyboard") => any) | undefined;
@@ -2951,7 +2951,7 @@ declare const VDatePicker: {
             "onClick:cancel"?: (() => any) | undefined;
             "onClick:save"?: (() => any) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-            'update:modelValue': (date: any[]) => boolean;
+            'update:modelValue': (date: readonly any[]) => boolean;
             'update:displayDate': (date: any) => boolean;
             'update:focused': (focused: boolean) => boolean;
             'update:inputMode': (inputMode: "calendar" | "keyboard") => boolean;
@@ -3078,7 +3078,7 @@ declare const VDatePicker: {
             'onClick:append': () => void;
         }) => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
         "onUpdate:displayDate"?: ((date: any) => any) | undefined;
         "onUpdate:inputMode"?: ((inputMode: "calendar" | "keyboard") => any) | undefined;
@@ -3156,7 +3156,7 @@ declare const VDatePicker: {
         'onClick:append': () => void;
     }) => vue.VNodeChild) | undefined;
 } & {
-    "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
     "onUpdate:displayDate"?: ((date: any) => any) | undefined;
     "onUpdate:inputMode"?: ((inputMode: "calendar" | "keyboard") => any) | undefined;
@@ -3164,7 +3164,7 @@ declare const VDatePicker: {
     "onClick:cancel"?: (() => any) | undefined;
     "onClick:save"?: (() => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (date: any[]) => boolean;
+    'update:modelValue': (date: readonly any[]) => boolean;
     'update:displayDate': (date: any) => boolean;
     'update:focused': (focused: boolean) => boolean;
     'update:inputMode': (inputMode: "calendar" | "keyboard") => boolean;
@@ -3633,7 +3633,7 @@ declare const VDatePickerControls: {
     format: StringConstructor;
     displayDate: {
         type: vue.PropType<any>;
-        default: Date;
+        default: null;
     };
     viewMode: {
         type: vue.PropType<"month" | "year">;
@@ -3664,7 +3664,7 @@ declare const VDatePickerControls: {
     format: StringConstructor;
     displayDate: {
         type: vue.PropType<any>;
-        default: Date;
+        default: null;
     };
     viewMode: {
         type: vue.PropType<"month" | "year">;
@@ -3975,7 +3975,7 @@ declare const VDatePickerMonth: {
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "onUpdate:displayDate"?: ((date: any) => any) | undefined;
             hoverDate?: any;
@@ -3994,7 +3994,7 @@ declare const VDatePickerMonth: {
         }>;
         $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: ((event: "update:modelValue", date: any[]) => void) & ((event: "update:focused", focused: boolean) => void) & ((event: "update:displayDate", date: any) => void) & ((event: "update:hoverDate", date: any) => void);
+        $emit: ((event: "update:modelValue", date: readonly any[]) => void) & ((event: "update:focused", focused: boolean) => void) & ((event: "update:displayDate", date: any) => void) & ((event: "update:hoverDate", date: any) => void);
         $el: any;
         $options: vue.ComponentOptionsBase<{
             color: string;
@@ -4018,13 +4018,13 @@ declare const VDatePickerMonth: {
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         } & {
-            "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "onUpdate:displayDate"?: ((date: any) => any) | undefined;
             "onUpdate:hoverDate"?: ((date: any) => any) | undefined;
         }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             'update:hoverDate': (date: any) => true;
-            'update:modelValue': (date: any[]) => boolean;
+            'update:modelValue': (date: readonly any[]) => boolean;
             'update:focused': (focused: boolean) => boolean;
             'update:displayDate': (date: any) => boolean;
         }, string, {
@@ -4081,7 +4081,7 @@ declare const VDatePickerMonth: {
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     } & {
-        "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
         "onUpdate:displayDate"?: ((date: any) => any) | undefined;
         "onUpdate:hoverDate"?: ((date: any) => any) | undefined;
@@ -4111,13 +4111,13 @@ declare const VDatePickerMonth: {
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 } & {
-    "onUpdate:modelValue"?: ((date: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((date: readonly any[]) => any) | undefined;
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
     "onUpdate:displayDate"?: ((date: any) => any) | undefined;
     "onUpdate:hoverDate"?: ((date: any) => any) | undefined;
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:hoverDate': (date: any) => true;
-    'update:modelValue': (date: any[]) => boolean;
+    'update:modelValue': (date: readonly any[]) => boolean;
     'update:focused': (focused: boolean) => boolean;
     'update:displayDate': (date: any) => boolean;
 }, string, {
@@ -4140,7 +4140,7 @@ declare const VDatePickerMonth: {
     };
     displayDate: {
         type: vue.PropType<any>;
-        default: Date;
+        default: null;
     };
     color: {
         type: vue.PropType<string>;
@@ -4162,7 +4162,7 @@ declare const VDatePickerMonth: {
     };
     displayDate: {
         type: vue.PropType<any>;
-        default: Date;
+        default: null;
     };
     color: {
         type: vue.PropType<string>;

package/lib/labs/VDateRangePicker/VDateRangePicker.mjs

@@ -14,11 +14,9 @@ import { ref, watch } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 import { makeVDateRangePickerHeaderProps, VDateRangePickerHeader } from "./VDateRangePickerHeader.mjs";
 import { makeVDateRangePickerMonthProps, VDateRangePickerMonth } from "./VDateRangePickerMonth.mjs";
+import { makeDateProps } from "../VDateInput/composables.mjs";
 export const makeVDateRangePickerProps = propsFactory({
-  viewMode: {
-    type: String,
-    default: 'month'
-  },
+  ...makeDateProps(),
   ...makeVPickerProps(),
   ...makeVDateRangePickerHeaderProps(),
   ...makeVDateRangePickerMonthProps(),

package/lib/labs/VDateRangePicker/VDateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDateRangePicker.mjs","names":["VBtn","VTextField","VPicker","createDatePicker","makeTransitionProps","useDate","makeVPickerProps","ref","watch","genericComponent","propsFactory","useRender","makeVDateRangePickerHeaderProps","VDateRangePickerHeader","makeVDateRangePickerMonthProps","VDateRangePickerMonth","makeVDateRangePickerProps","viewMode","type","String","default","transition","VDateRangePicker","name","props","emits","date","mode","input","save","cancel","setup","_ref","emit","adapter","selected","modelValue","inputModel","format","isValid","value","handleCancel","handleSave","pickerProps","filterProps","dateRangePickerHeaderProps","dateRangePickerMonthProps","_createVNode","_mergeProps","inputMode","header","displayDate","$event","actions","color","_createTextVNode","undefined"],"sources":["../../../src/labs/VDateRangePicker/VDateRangePicker.tsx"],"sourcesContent":["// Styles\nimport './VDateRangePicker.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VTextField } from '@/components/VTextField'\nimport { VPicker } from '@/labs/VPicker'\n\n// Composables\nimport { createDatePicker } from '../VDatePicker/composables'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useDate } from '@/labs/date'\nimport { makeVPickerProps } from '@/labs/VPicker/VPicker'\n\n// Utilities\nimport { ref, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport { makeVDateRangePickerHeaderProps, VDateRangePickerHeader } from './VDateRangePickerHeader'\nimport { makeVDateRangePickerMonthProps, VDateRangePickerMonth } from './VDateRangePickerMonth'\n\nexport const makeVDateRangePickerProps = propsFactory({\n  viewMode: {\n    type: String as PropType<'month' | 'years'>,\n    default: 'month',\n  },\n\n  ...makeVPickerProps(),\n  ...makeVDateRangePickerHeaderProps(),\n  ...makeVDateRangePickerMonthProps(),\n  ...makeTransitionProps({ transition: 'fade' }),\n}, 'VDateRangePicker')\n\nexport const VDateRangePicker = genericComponent()({\n  name: 'VDateRangePicker',\n\n  props: makeVDateRangePickerProps(),\n\n  emits: {\n    'update:modelValue': (date: any) => true,\n    'update:viewMode': (mode: 'month' | 'years') => true,\n    'update:inputMode': (input: string) => true,\n    'update:displayDate': (date: any) => true,\n    save: (date: any) => true,\n    cancel: () => true,\n  },\n\n  setup (props, { emit }) {\n    const adapter = useDate()\n    createDatePicker(props)\n\n    const selected = ref(props.modelValue)\n    const inputModel = ref(props.modelValue[0] ? adapter.format(props.modelValue[0], 'keyboardDate') : '')\n\n    // watch(() => props.modelValue, newValue => {\n    //   if (!newValue?.length) return\n\n    //   inputModel.value = adapter.format(newValue[0], 'keyboardDate')\n    // })\n\n    watch(inputModel, () => {\n      const { isValid, date } = adapter\n\n      selected.value = isValid(inputModel.value) ? [date(inputModel.value)] : []\n    })\n\n    // watch(selected, () => {\n    //   if (!props.showActions) {\n    //     emit('update:modelValue', selected.value)\n    //   }\n    // })\n\n    // function handleInput (value: any, index: number) {\n    //   if (value.length === 10 && adapter.isValid(value)) {\n    //     const modelValue = props.modelValue.slice()\n    //     modelValue.splice(index, value)\n    //     emit('update:modelValue', modelValue)\n    //   }\n    // }\n\n    const handleCancel = () => emit('cancel')\n    const handleSave = () => {\n      emit('update:modelValue', selected.value)\n      emit('save', selected.value)\n    }\n\n    useRender(() => {\n      const [pickerProps] = VPicker.filterProps(props)\n      const [dateRangePickerHeaderProps] = VDateRangePickerHeader.filterProps(props)\n      const [dateRangePickerMonthProps] = VDateRangePickerMonth.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          key={ props.inputMode }\n          class={[\n            'v-date-range-picker',\n            `v-date-range-picker--${props.inputMode}`,\n          ]}\n          width={ 328 }\n          v-slots={{\n            header: () => (\n              <VDateRangePickerHeader\n                { ...dateRangePickerHeaderProps }\n                modelValue={ selected.value }\n                onUpdate:displayDate={ displayDate => emit('update:displayDate', displayDate) }\n                onUpdate:inputMode={ inputMode => emit('update:inputMode', inputMode) }\n                onCancel={ handleCancel }\n                onSave={ handleSave }\n              />\n            ),\n            default: () => props.inputMode === 'calendar' ? (\n              <VDateRangePickerMonth\n                { ...dateRangePickerMonthProps }\n                v-model={ selected.value }\n              />\n            ) : (\n              <div class=\"v-date-range-picker__input\">\n                <VTextField\n                  label=\"From\"\n                  placeholder=\"yyyy/mm/dd\"\n                  v-model={ inputModel.value }\n                />\n                <VTextField\n                  label=\"To\"\n                  placeholder=\"yyyy/mm/dd\"\n                  v-model={ inputModel.value }\n                />\n              </div>\n            ),\n            actions: props.inputMode === 'keyboard' ? () => (\n              <div>\n                <VBtn variant=\"text\" color={ props.color } onClick={ handleCancel }>Cancel</VBtn>\n                <VBtn variant=\"text\" color={ props.color } onClick={ handleSave }>Ok</VBtn>\n              </div>\n            ) : undefined,\n          }}\n        />\n      )\n    })\n  },\n})\n\nexport type VDateRangePicker = InstanceType<typeof VDateRangePicker>\n"],"mappings":"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"}
+{"version":3,"file":"VDateRangePicker.mjs","names":["VBtn","VTextField","VPicker","createDatePicker","makeTransitionProps","useDate","makeVPickerProps","ref","watch","genericComponent","propsFactory","useRender","makeVDateRangePickerHeaderProps","VDateRangePickerHeader","makeVDateRangePickerMonthProps","VDateRangePickerMonth","makeDateProps","makeVDateRangePickerProps","transition","VDateRangePicker","name","props","emits","date","mode","input","save","cancel","setup","_ref","emit","adapter","selected","modelValue","inputModel","format","isValid","value","handleCancel","handleSave","pickerProps","filterProps","dateRangePickerHeaderProps","dateRangePickerMonthProps","_createVNode","_mergeProps","inputMode","header","displayDate","default","$event","actions","color","_createTextVNode","undefined"],"sources":["../../../src/labs/VDateRangePicker/VDateRangePicker.tsx"],"sourcesContent":["// Styles\nimport './VDateRangePicker.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VTextField } from '@/components/VTextField'\nimport { VPicker } from '@/labs/VPicker'\n\n// Composables\nimport { createDatePicker } from '../VDatePicker/composables'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useDate } from '@/labs/date'\nimport { makeVPickerProps } from '@/labs/VPicker/VPicker'\n\n// Utilities\nimport { ref, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport { makeVDateRangePickerHeaderProps, VDateRangePickerHeader } from './VDateRangePickerHeader'\nimport { makeVDateRangePickerMonthProps, VDateRangePickerMonth } from './VDateRangePickerMonth'\nimport { makeDateProps } from '../VDateInput/composables'\n\nexport const makeVDateRangePickerProps = propsFactory({\n  ...makeDateProps(),\n  ...makeVPickerProps(),\n  ...makeVDateRangePickerHeaderProps(),\n  ...makeVDateRangePickerMonthProps(),\n  ...makeTransitionProps({ transition: 'fade' }),\n}, 'VDateRangePicker')\n\nexport const VDateRangePicker = genericComponent()({\n  name: 'VDateRangePicker',\n\n  props: makeVDateRangePickerProps(),\n\n  emits: {\n    'update:modelValue': (date: any) => true,\n    'update:viewMode': (mode: 'month' | 'year') => true,\n    'update:inputMode': (input: string) => true,\n    'update:displayDate': (date: any) => true,\n    save: (date: any) => true,\n    cancel: () => true,\n  },\n\n  setup (props, { emit }) {\n    const adapter = useDate()\n    createDatePicker(props)\n\n    const selected = ref(props.modelValue)\n    const inputModel = ref(props.modelValue[0] ? adapter.format(props.modelValue[0], 'keyboardDate') : '')\n\n    // watch(() => props.modelValue, newValue => {\n    //   if (!newValue?.length) return\n\n    //   inputModel.value = adapter.format(newValue[0], 'keyboardDate')\n    // })\n\n    watch(inputModel, () => {\n      const { isValid, date } = adapter\n\n      selected.value = isValid(inputModel.value) ? [date(inputModel.value)] : []\n    })\n\n    // watch(selected, () => {\n    //   if (!props.showActions) {\n    //     emit('update:modelValue', selected.value)\n    //   }\n    // })\n\n    // function handleInput (value: any, index: number) {\n    //   if (value.length === 10 && adapter.isValid(value)) {\n    //     const modelValue = props.modelValue.slice()\n    //     modelValue.splice(index, value)\n    //     emit('update:modelValue', modelValue)\n    //   }\n    // }\n\n    const handleCancel = () => emit('cancel')\n    const handleSave = () => {\n      emit('update:modelValue', selected.value)\n      emit('save', selected.value)\n    }\n\n    useRender(() => {\n      const [pickerProps] = VPicker.filterProps(props)\n      const [dateRangePickerHeaderProps] = VDateRangePickerHeader.filterProps(props)\n      const [dateRangePickerMonthProps] = VDateRangePickerMonth.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          key={ props.inputMode }\n          class={[\n            'v-date-range-picker',\n            `v-date-range-picker--${props.inputMode}`,\n          ]}\n          width={ 328 }\n          v-slots={{\n            header: () => (\n              <VDateRangePickerHeader\n                { ...dateRangePickerHeaderProps }\n                modelValue={ selected.value }\n                onUpdate:displayDate={ displayDate => emit('update:displayDate', displayDate) }\n                onUpdate:inputMode={ inputMode => emit('update:inputMode', inputMode) }\n                onCancel={ handleCancel }\n                onSave={ handleSave }\n              />\n            ),\n            default: () => props.inputMode === 'calendar' ? (\n              <VDateRangePickerMonth\n                { ...dateRangePickerMonthProps }\n                v-model={ selected.value }\n              />\n            ) : (\n              <div class=\"v-date-range-picker__input\">\n                <VTextField\n                  label=\"From\"\n                  placeholder=\"yyyy/mm/dd\"\n                  v-model={ inputModel.value }\n                />\n                <VTextField\n                  label=\"To\"\n                  placeholder=\"yyyy/mm/dd\"\n                  v-model={ inputModel.value }\n                />\n              </div>\n            ),\n            actions: props.inputMode === 'keyboard' ? () => (\n              <div>\n                <VBtn variant=\"text\" color={ props.color } onClick={ handleCancel }>Cancel</VBtn>\n                <VBtn variant=\"text\" color={ props.color } onClick={ handleSave }>Ok</VBtn>\n              </div>\n            ) : undefined,\n          }}\n        />\n      )\n    })\n  },\n})\n\nexport type VDateRangePicker = InstanceType<typeof VDateRangePicker>\n"],"mappings":"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"}

package/lib/labs/VDateRangePicker/VDateRangePickerHeader.mjs

@@ -4,11 +4,12 @@ import "./VDateRangePickerHeader.css";
 
 // Components
 import { VBtn } from "../../components/VBtn/index.mjs"; // Composables
+import { makeDateProps } from "../VDateInput/composables.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useDate } from "../date/index.mjs"; // Utilities
 import { computed } from 'vue';
-import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs";
 export const makeVDateRangePickerHeaderProps = propsFactory({
   color: String,
   title: String,
@@ -26,10 +27,8 @@ export const makeVDateRangePickerHeaderProps = propsFactory({
     default: '$close'
   },
   showInputSwitch: Boolean,
-  inputMode: String,
-  modelValue: null,
-  displayDate: null,
-  range: null
+  range: null,
+  ...omit(makeDateProps(), ['viewMode', 'format'])
 }, 'VDateRangePickerHeader');
 export const VDateRangePickerHeader = genericComponent()({
   name: 'VDateRangePickerHeader',

package/lib/labs/VDateRangePicker/VDateRangePickerHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDateRangePickerHeader.mjs","names":["VBtn","useBackgroundColor","useLocale","useDate","computed","genericComponent","propsFactory","useRender","makeVDateRangePickerHeaderProps","color","String","title","header","keyboardIcon","type","default","calendarIcon","closeIcon","showInputSwitch","Boolean","inputMode","modelValue","displayDate","range","VDateRangePickerHeader","name","props","emits","cancel","save","input","date","setup","_ref","emit","t","adapter","backgroundColorClasses","backgroundColorStyles","headerText","length","format","map","join","titleText","handleHeaderClick","_createVNode","value","onClick","_createTextVNode"],"sources":["../../../src/labs/VDateRangePicker/VDateRangePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDateRangePickerHeader.sass'\n\n// Components\nimport { VBtn } from '../../components/VBtn'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVDateRangePickerHeaderProps = propsFactory({\n  color: String,\n  title: String,\n  header: String,\n  keyboardIcon: {\n    type: String,\n    default: '$edit',\n  },\n  calendarIcon: {\n    type: String,\n    default: '$calendar',\n  },\n  closeIcon: {\n    type: String,\n    default: '$close',\n  },\n  showInputSwitch: Boolean,\n  inputMode: String,\n  modelValue: null,\n  displayDate: null,\n  range: null,\n}, 'VDateRangePickerHeader')\n\nexport const VDateRangePickerHeader = genericComponent()({\n  name: 'VDateRangePickerHeader',\n\n  props: makeVDateRangePickerHeaderProps(),\n\n  emits: {\n    cancel: () => true,\n    save: () => true,\n    'update:inputMode': (input: string) => true,\n    'update:displayDate': (date: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const { t } = useLocale()\n    const adapter = useDate()\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const headerText = computed(() => {\n      if (props.header) return props.header\n\n      if (!props.modelValue.length) return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}header.placeholder`)\n\n      if (props.modelValue.length === 1) return adapter.format(props.modelValue[0], 'normalDateWithWeekday')\n\n      return props.modelValue.map((date: any) => adapter.format(date, 'shortDate')).join(' - ')\n    })\n\n    const titleText = computed(() => {\n      if (props.title) return props.title\n\n      if (!props.modelValue.length) return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}title.placeholder`)\n\n      return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}title.selected`)\n    })\n\n    function handleHeaderClick () {\n      if (!props.modelValue.length) return\n\n      const date = props.modelValue[0]\n\n      emit('update:displayDate', date)\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-date-range-picker-header',\n          backgroundColorClasses.value,\n          `v-date-range-picker-header--${props.inputMode}`,\n        ]}\n        style={ backgroundColorStyles.value }\n      >\n        { props.inputMode === 'calendar' && (\n          <div key=\"calendar-buttons\" class=\"v-date-range-picker-header__buttons\">\n            <VBtn\n              variant=\"text\"\n              icon={ props.closeIcon }\n              onClick={ () => emit('cancel') }\n            />\n            <VBtn\n              variant=\"text\"\n              onClick={ () => emit('save') }\n            >\n              Save\n            </VBtn>\n          </div>\n        )}\n        <div class=\"v-date-range-picker-header__wrapper\">\n          <div class=\"v-date-range-picker-header__title\">\n            { titleText.value }\n          </div>\n          <div class=\"v-date-range-picker-header__text\">\n            <div\n              class=\"v-date-range-picker-header__date\"\n              onClick={ handleHeaderClick }\n            >\n              { headerText.value }\n            </div>\n            <VBtn\n              variant=\"text\"\n              icon={ props.inputMode === 'keyboard' ? props.calendarIcon : props.keyboardIcon }\n              onClick={ () => emit('update:inputMode', props.inputMode === 'keyboard' ? 'calendar' : 'keyboard') }\n            />\n          </div>\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDateRangePickerHeader = InstanceType<typeof VDateRangePickerHeader>\n"],"mappings":"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"}
+{"version":3,"file":"VDateRangePickerHeader.mjs","names":["VBtn","makeDateProps","useBackgroundColor","useLocale","useDate","computed","genericComponent","omit","propsFactory","useRender","makeVDateRangePickerHeaderProps","color","String","title","header","keyboardIcon","type","default","calendarIcon","closeIcon","showInputSwitch","Boolean","range","VDateRangePickerHeader","name","props","emits","cancel","save","input","date","setup","_ref","emit","t","adapter","backgroundColorClasses","backgroundColorStyles","headerText","modelValue","length","format","map","join","titleText","handleHeaderClick","_createVNode","value","inputMode","onClick","_createTextVNode"],"sources":["../../../src/labs/VDateRangePicker/VDateRangePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDateRangePickerHeader.sass'\n\n// Components\nimport { VBtn } from '../../components/VBtn'\n\n// Composables\nimport { makeDateProps } from '../VDateInput/composables'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\nexport const makeVDateRangePickerHeaderProps = propsFactory({\n  color: String,\n  title: String,\n  header: String,\n  keyboardIcon: {\n    type: String,\n    default: '$edit',\n  },\n  calendarIcon: {\n    type: String,\n    default: '$calendar',\n  },\n  closeIcon: {\n    type: String,\n    default: '$close',\n  },\n  showInputSwitch: Boolean,\n  range: null,\n  ...omit(makeDateProps(), ['viewMode', 'format']),\n}, 'VDateRangePickerHeader')\n\nexport const VDateRangePickerHeader = genericComponent()({\n  name: 'VDateRangePickerHeader',\n\n  props: makeVDateRangePickerHeaderProps(),\n\n  emits: {\n    cancel: () => true,\n    save: () => true,\n    'update:inputMode': (input: string) => true,\n    'update:displayDate': (date: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const { t } = useLocale()\n    const adapter = useDate()\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const headerText = computed(() => {\n      if (props.header) return props.header\n\n      if (!props.modelValue.length) return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}header.placeholder`)\n\n      if (props.modelValue.length === 1) return adapter.format(props.modelValue[0], 'normalDateWithWeekday')\n\n      return props.modelValue.map((date: any) => adapter.format(date, 'shortDate')).join(' - ')\n    })\n\n    const titleText = computed(() => {\n      if (props.title) return props.title\n\n      if (!props.modelValue.length) return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}title.placeholder`)\n\n      return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}title.selected`)\n    })\n\n    function handleHeaderClick () {\n      if (!props.modelValue.length) return\n\n      const date = props.modelValue[0]\n\n      emit('update:displayDate', date)\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-date-range-picker-header',\n          backgroundColorClasses.value,\n          `v-date-range-picker-header--${props.inputMode}`,\n        ]}\n        style={ backgroundColorStyles.value }\n      >\n        { props.inputMode === 'calendar' && (\n          <div key=\"calendar-buttons\" class=\"v-date-range-picker-header__buttons\">\n            <VBtn\n              variant=\"text\"\n              icon={ props.closeIcon }\n              onClick={ () => emit('cancel') }\n            />\n            <VBtn\n              variant=\"text\"\n              onClick={ () => emit('save') }\n            >\n              Save\n            </VBtn>\n          </div>\n        )}\n        <div class=\"v-date-range-picker-header__wrapper\">\n          <div class=\"v-date-range-picker-header__title\">\n            { titleText.value }\n          </div>\n          <div class=\"v-date-range-picker-header__text\">\n            <div\n              class=\"v-date-range-picker-header__date\"\n              onClick={ handleHeaderClick }\n            >\n              { headerText.value }\n            </div>\n            <VBtn\n              variant=\"text\"\n              icon={ props.inputMode === 'keyboard' ? props.calendarIcon : props.keyboardIcon }\n              onClick={ () => emit('update:inputMode', props.inputMode === 'keyboard' ? 'calendar' : 'keyboard') }\n            />\n          </div>\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDateRangePickerHeader = InstanceType<typeof VDateRangePickerHeader>\n"],"mappings":"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"}