vuetify 3.3.2 → 3.3.4

package/lib/labs/VDatePicker/VDatePickerHeader.mjs

@@ -0,0 +1,75 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VDatePickerHeader.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs"; // Composables
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVDatePickerHeaderProps = propsFactory({
+  appendIcon: String,
+  color: String,
+  header: String,
+  transition: String
+}, 'VDatePickerHeader');
+export const VDatePickerHeader = genericComponent()({
+  name: 'VDatePickerHeader',
+  props: makeVDatePickerHeaderProps(),
+  emits: {
+    'click:append': () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(props, 'color');
+    function onClickAppend() {
+      emit('click:append');
+    }
+    useRender(() => {
+      const hasContent = !!(slots.default || props.header);
+      const hasAppend = !!(slots.append || props.appendIcon);
+      return _createVNode("div", {
+        "class": ['v-date-picker-header', backgroundColorClasses.value],
+        "style": backgroundColorStyles.value
+      }, [slots.prepend && _createVNode("div", {
+        "key": "prepend",
+        "class": "v-date-picker-header__prepend"
+      }, [slots.prepend()]), hasContent && _createVNode(MaybeTransition, {
+        "key": "content",
+        "name": props.transition
+      }, {
+        default: () => [_createVNode("div", {
+          "key": props.header,
+          "class": "v-date-picker-header__content"
+        }, [slots.default?.() ?? props.header])]
+      }), hasAppend && _createVNode("div", {
+        "class": "v-date-picker-header__append"
+      }, [!slots.append ? _createVNode(VBtn, {
+        "key": "append-btn",
+        "icon": props.appendIcon,
+        "variant": "text",
+        "onClick": onClickAppend
+      }, null) : _createVNode(VDefaultsProvider, {
+        "key": "append-defaults",
+        "disabled": !props.appendIcon,
+        "defaults": {
+          VBtn: {
+            icon: props.appendIcon,
+            variant: 'text'
+          }
+        }
+      }, {
+        default: () => [slots.append?.()]
+      })])]);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VDatePickerHeader.mjs.map

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

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

package/lib/labs/VDatePicker/VDatePickerHeader.sass

@@ -0,0 +1,51 @@
+@use '../../styles/settings'
+
+.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,
+.date-picker-header-reverse-transition
+  &-enter-active
+    transition-duration: 0.3s
+    transition-timing-function: settings.$standard-easing
+
+  &-leave-active
+    transition-duration: 0.3s
+    transition-timing-function: settings.$standard-easing
+
+.date-picker-header-transition
+  &-enter-from
+    transform: translate(0, 100%)
+
+  &-leave-to
+    opacity: 0
+    transform: translate(0, -100%)
+
+.date-picker-header-reverse-transition
+  &-enter-from
+    transform: translate(0, -100%)
+
+  &-leave-to
+    opacity: 0
+    transform: translate(0, 100%)

package/lib/labs/VDatePicker/VDatePickerInput.sass

@@ -0,0 +1,17 @@
+.v-date-picker-input
+  width: 300px
+  height: 350px
+  overflow: hidden
+
+  table
+    width: 100%
+
+.v-date-picker-input__header
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.v-date-picker-input__year
+  display: grid
+  grid-template-columns: 1fr 1fr 1fr 1fr
+  grid-gap: 4px

package/lib/labs/VDatePicker/VDatePickerMonth.css

@@ -0,0 +1,77 @@
+.v-date-picker-month {
+  display: flex;
+  justify-content: center;
+  height: 268px;
+  min-width: 328px;
+  --v-date-picker-month-day-diff: 4px;
+}
+
+.v-date-picker-month__weeks {
+  display: grid;
+  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content;
+  grid-row-gap: 4px;
+}
+
+.v-date-picker-month__weekday {
+  font-size: 0.875rem;
+}
+
+.v-date-picker-month__days {
+  display: grid;
+  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
+  grid-row-gap: 4px;
+  flex: 1 1;
+  justify-content: space-around;
+}
+
+.v-date-picker-month__day {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.v-date-picker-month__day--adjacent {
+  opacity: 0.5;
+}
+
+.v-date-picker-month__day--hide-adjacent {
+  opacity: 0;
+}
+
+.v-date-picker-month__day--range {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - var(--v-date-picker-month-day-diff) * 2);
+  opacity: 0.5;
+}
+
+.v-date-picker-month__day--hover {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - var(--v-date-picker-month-day-diff) * 2);
+  border-style: dashed;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-left: none;
+  border-right: none;
+}
+
+.v-date-picker-month__day--start .v-date-picker-month__day--range, .v-date-picker-month__day--week-start .v-date-picker-month__day--range {
+  border-bottom-left-radius: 50%;
+  border-top-left-radius: 50%;
+  left: var(--v-date-picker-month-day-diff);
+  width: calc(100% - var(--v-date-picker-month-day-diff));
+}
+
+.v-date-picker-month__day--end .v-date-picker-month__day--range, .v-date-picker-month__day--week-end .v-date-picker-month__day--range {
+  border-bottom-right-radius: 50%;
+  border-top-right-radius: 50%;
+  right: var(--v-date-picker-month-day-diff);
+  width: calc(100% - var(--v-date-picker-month-day-diff));
+}
+
+.v-date-picker-month__day--selected.v-date-picker-month__day--end.v-date-picker-month__day--week-start .v-date-picker-month__day--range,
+.v-date-picker-month__day--selected.v-date-picker-month__day--start.v-date-picker-month__day--week-end .v-date-picker-month__day--range {
+  display: none;
+}

package/lib/labs/VDatePicker/VDatePickerMonth.mjs

@@ -0,0 +1,286 @@
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+// Styles
+import "./VDatePickerMonth.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs"; // Composables
+import { useDatePicker } from "./composables.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+import { computed, ref } from 'vue';
+import { genericComponent, omit, propsFactory } from "../../util/index.mjs"; // Types
+import { getWeek, toIso } from "../date/date.mjs";
+import { dateEmits, makeDateProps } from "../VDateInput/composables.mjs";
+import { useDate } from "../date/index.mjs";
+export const makeVDatePickerMonthProps = propsFactory({
+  color: String,
+  showAdjacentMonths: Boolean,
+  hideWeekdays: Boolean,
+  showWeek: Boolean,
+  range: {
+    default: false,
+    type: [String, Boolean],
+    validator: v => typeof v === 'boolean' || ['start', 'end'].includes(v)
+  },
+  hoverDate: null,
+  multiple: Boolean,
+  side: {
+    type: String
+  },
+  ...omit(makeDateProps(), ['inputMode', 'viewMode'])
+}, 'VDatePickerMonth');
+export const VDatePickerMonth = genericComponent()({
+  name: 'VDatePickerMonth',
+  props: makeVDatePickerMonthProps({
+    color: 'surface-variant'
+  }),
+  emits: {
+    ...omit(dateEmits, ['update:inputMode', 'update:viewMode']),
+    'update:hoverDate': date => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const adapter = useDate();
+    const {
+      isDragging,
+      dragHandle,
+      hasScrolled
+    } = useDatePicker();
+    const month = computed(() => props.displayDate);
+    const findClosestDate = (date, dates) => {
+      const {
+        isSameDay,
+        getDiff
+      } = adapter;
+      const [startDate, endDate] = dates;
+      if (isSameDay(startDate, endDate)) {
+        return getDiff(date, startDate, 'days') > 0 ? endDate : startDate;
+      }
+      const distStart = Math.abs(getDiff(date, startDate));
+      const distEnd = Math.abs(getDiff(date, endDate));
+      return distStart < distEnd ? startDate : endDate;
+    };
+
+    // const hoverRange = computed<[any, any] | null>(() => {
+    //   if (!props.hoverDate) return null
+
+    //   const closestDate = findClosestDate(props.hoverDate, props.modelValue)
+
+    //   if (!closestDate) return null
+
+    //   return adapter.isAfter(props.hoverDate, closestDate) ? [closestDate, props.hoverDate] : [props.hoverDate, closestDate]
+    // })
+
+    const weeksInMonth = computed(() => {
+      const weeks = adapter.getWeekArray(month.value);
+      const days = weeks.flat();
+
+      // Make sure there's always 6 weeks in month (6 * 7 days)
+      // But only do it if we're not hiding adjacent months?
+      const daysInMonth = 6 * 7;
+      if (days.length < daysInMonth && props.showAdjacentMonths) {
+        const lastDay = days[days.length - 1];
+        let week = [];
+        for (let day = 1; day <= daysInMonth - days.length; day++) {
+          week.push(adapter.addDays(lastDay, day));
+          if (day % 7 === 0) {
+            weeks.push(week);
+            week = [];
+          }
+        }
+      }
+      return weeks;
+    });
+    const daysInMonth = computed(() => {
+      const validDates = props.modelValue.filter(v => !!v);
+      const isRange = validDates.length > 1;
+      const days = weeksInMonth.value.flat();
+      const today = adapter.date();
+      const startDate = validDates[0];
+      const endDate = validDates[1];
+      return days.map((date, index) => {
+        const isStart = startDate && adapter.isSameDay(date, startDate);
+        const isEnd = endDate && adapter.isSameDay(date, endDate);
+        const isAdjacent = !adapter.isSameMonth(date, month.value);
+        const isSame = validDates.length === 2 && adapter.isSameDay(startDate, endDate);
+        return {
+          date,
+          isoDate: toIso(adapter, date),
+          formatted: adapter.format(date, 'keyboardDate'),
+          year: adapter.getYear(date),
+          month: adapter.getMonth(date),
+          isWeekStart: index % 7 === 0,
+          isWeekEnd: index % 7 === 6,
+          isSelected: isStart || isEnd,
+          isStart,
+          isEnd,
+          isToday: adapter.isSameDay(date, today),
+          isAdjacent,
+          isHidden: isAdjacent && !props.showAdjacentMonths,
+          inRange: isRange && !isSame && (isStart || isEnd || validDates.length === 2 && adapter.isWithinRange(date, validDates)),
+          // isHovered: props.hoverDate === date,
+          // inHover: hoverRange.value && isWithinRange(date, hoverRange.value),
+          isHovered: false,
+          inHover: false,
+          localized: adapter.format(date, 'dayOfMonth')
+        };
+      });
+    });
+    const weeks = computed(() => {
+      return weeksInMonth.value.map(week => {
+        return getWeek(adapter, week[0]);
+      });
+    });
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(props, 'color');
+    function selectDate(date) {
+      let newModel = props.modelValue.slice();
+      if (props.multiple) {
+        if (isDragging.value && dragHandle.value != null) {
+          const otherIndex = (dragHandle.value + 1) % 2;
+          const fn = otherIndex === 0 ? 'isBefore' : 'isAfter';
+          if (adapter[fn](date, newModel[otherIndex])) {
+            newModel[dragHandle.value] = newModel[otherIndex];
+            newModel[otherIndex] = date;
+            dragHandle.value = otherIndex;
+          } else {
+            newModel[dragHandle.value] = date;
+          }
+        } else {
+          if (newModel.find(d => adapter.isSameDay(d, date))) {
+            newModel = newModel.filter(v => !adapter.isSameDay(v, date));
+          } else if (newModel.length === 2) {
+            let index;
+            if (!props.side || adapter.isSameMonth(newModel[0], newModel[1])) {
+              const closest = findClosestDate(date, newModel);
+              index = newModel.indexOf(closest);
+            } else {
+              index = props.side === 'start' ? 0 : props.side === 'end' ? 1 : undefined;
+            }
+            newModel = newModel.map((v, i) => i === index ? date : v);
+          } else {
+            if (newModel[0] && adapter.isBefore(newModel[0], date)) {
+              newModel = [newModel[0], date];
+            } else {
+              newModel = [date, newModel[0]];
+            }
+          }
+        }
+      } else {
+        newModel = [date];
+      }
+      emit('update:modelValue', newModel.filter(v => !!v));
+    }
+    const daysRef = ref();
+    function findElement(el) {
+      if (!el || el === daysRef.value) return null;
+      if ('vDate' in el.dataset) {
+        return adapter.date(el.dataset.vDate);
+      }
+      return findElement(el.parentElement);
+    }
+    function findDate(e) {
+      const x = 'changedTouches' in e ? e.changedTouches[0]?.clientX : e.clientX;
+      const y = 'changedTouches' in e ? e.changedTouches[0]?.clientY : e.clientY;
+      const el = document.elementFromPoint(x, y);
+      return findElement(el);
+    }
+    let canDrag = false;
+    function handleMousedown(e) {
+      hasScrolled.value = false;
+      const selected = findDate(e);
+      if (!selected) return;
+      const modelIndex = props.modelValue.findIndex(d => adapter.isEqual(d, selected));
+      if (modelIndex >= 0) {
+        canDrag = true;
+        dragHandle.value = modelIndex;
+        window.addEventListener('touchmove', handleTouchmove, {
+          passive: false
+        });
+        window.addEventListener('mousemove', handleTouchmove, {
+          passive: false
+        });
+        e.preventDefault();
+      }
+      window.addEventListener('touchend', handleTouchend, {
+        passive: false
+      });
+      window.addEventListener('mouseup', handleTouchend, {
+        passive: false
+      });
+    }
+    function handleTouchmove(e) {
+      if (!canDrag) return;
+      e.preventDefault();
+      isDragging.value = true;
+      const over = findDate(e);
+      if (!over) return;
+      selectDate(over);
+    }
+    function handleTouchend(e) {
+      if (e.cancelable) e.preventDefault();
+      window.removeEventListener('touchmove', handleTouchmove);
+      window.removeEventListener('mousemove', handleTouchmove);
+      window.removeEventListener('touchend', handleTouchend);
+      window.removeEventListener('mouseup', handleTouchend);
+      const end = findDate(e);
+      if (!end) return;
+      if (!hasScrolled.value) {
+        selectDate(end);
+      }
+      isDragging.value = false;
+      dragHandle.value = null;
+      canDrag = false;
+    }
+    return () => _createVNode("div", {
+      "class": "v-date-picker-month"
+    }, [props.showWeek && _createVNode("div", {
+      "key": "weeks",
+      "class": "v-date-picker-month__weeks"
+    }, [!props.hideWeekdays && _createVNode("div", {
+      "key": "hide-week-days",
+      "class": "v-date-picker-month__day"
+    }, [_createTextVNode("\xA0")]), weeks.value.map(week => _createVNode("div", {
+      "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
+    }, [week]))]), _createVNode("div", {
+      "ref": daysRef,
+      "class": "v-date-picker-month__days",
+      "onMousedown": handleMousedown,
+      "onTouchstart": handleMousedown
+    }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => _createVNode("div", {
+      "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
+    }, [weekDay.charAt(0)])), daysInMonth.value.map((item, index) => _createVNode("div", {
+      "class": ['v-date-picker-month__day', {
+        'v-date-picker-month__day--selected': item.isSelected,
+        'v-date-picker-month__day--start': item.isStart,
+        'v-date-picker-month__day--end': item.isEnd,
+        'v-date-picker-month__day--adjacent': item.isAdjacent,
+        'v-date-picker-month__day--hide-adjacent': item.isHidden,
+        'v-date-picker-month__day--week-start': item.isWeekStart,
+        'v-date-picker-month__day--week-end': item.isWeekEnd,
+        'v-date-picker-month__day--hovered': item.isHovered
+      }],
+      "data-v-date": !item.isHidden ? item.isoDate : undefined
+    }, [item.inRange && _createVNode("div", {
+      "key": "in-range",
+      "class": ['v-date-picker-month__day--range', backgroundColorClasses.value],
+      "style": backgroundColorStyles.value
+    }, null), item.inHover && !item.isStart && !item.isEnd && !item.isHovered && !item.inRange && _createVNode("div", {
+      "key": "in-hover",
+      "class": "v-date-picker-month__day--hover"
+    }, null), (props.showAdjacentMonths || !item.isAdjacent) && _createVNode(VBtn, {
+      "icon": true,
+      "ripple": false,
+      "variant": (item.isToday || item.isHovered) && !item.isSelected ? 'outlined' : 'flat',
+      "active": item.isSelected,
+      "color": item.isSelected || item.isToday ? props.color : item.isHovered ? undefined : 'transparent'
+    }, {
+      default: () => [item.localized]
+    })]))])]);
+  }
+});
+//# sourceMappingURL=VDatePickerMonth.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VDatePickerMonth.mjs","names":["VBtn","useDatePicker","useBackgroundColor","computed","ref","genericComponent","omit","propsFactory","getWeek","toIso","dateEmits","makeDateProps","useDate","makeVDatePickerMonthProps","color","String","showAdjacentMonths","Boolean","hideWeekdays","showWeek","range","default","type","validator","v","includes","hoverDate","multiple","side","VDatePickerMonth","name","props","emits","date","setup","_ref","emit","slots","adapter","isDragging","dragHandle","hasScrolled","month","displayDate","findClosestDate","dates","isSameDay","getDiff","startDate","endDate","distStart","Math","abs","distEnd","weeksInMonth","weeks","getWeekArray","value","days","flat","daysInMonth","length","lastDay","week","day","push","addDays","validDates","modelValue","filter","isRange","today","map","index","isStart","isEnd","isAdjacent","isSameMonth","isSame","isoDate","formatted","format","year","getYear","getMonth","isWeekStart","isWeekEnd","isSelected","isToday","isHidden","inRange","isWithinRange","isHovered","inHover","localized","backgroundColorClasses","backgroundColorStyles","selectDate","newModel","slice","otherIndex","fn","find","d","closest","indexOf","undefined","i","isBefore","daysRef","findElement","el","dataset","vDate","parentElement","findDate","e","x","changedTouches","clientX","y","clientY","document","elementFromPoint","canDrag","handleMousedown","selected","modelIndex","findIndex","isEqual","window","addEventListener","handleTouchmove","passive","preventDefault","handleTouchend","over","cancelable","removeEventListener","end","_createVNode","_createTextVNode","getWeekdays","weekDay","charAt","item"],"sources":["../../../src/labs/VDatePicker/VDatePickerMonth.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerMonth.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useDatePicker } from './composables'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, omit, propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport { getWeek, toIso } from '../date/date'\nimport { dateEmits, makeDateProps } from '../VDateInput/composables'\nimport { useDate } from '@/labs/date'\n\nexport const makeVDatePickerMonthProps = propsFactory({\n  color: String,\n  showAdjacentMonths: Boolean,\n  hideWeekdays: Boolean,\n  showWeek: Boolean,\n  range: {\n    default: false,\n    type: [String, Boolean] as PropType<'start' | 'end' | boolean>,\n    validator: (v: any) => typeof v === 'boolean' || ['start', 'end'].includes(v),\n  },\n  hoverDate: null,\n  multiple: Boolean,\n  side: {\n    type: String,\n  },\n\n  ...omit(makeDateProps(), ['inputMode', 'viewMode']),\n}, 'VDatePickerMonth')\n\nexport const VDatePickerMonth = genericComponent()({\n  name: 'VDatePickerMonth',\n\n  props: makeVDatePickerMonthProps({ color: 'surface-variant' }),\n\n  emits: {\n    ...omit(dateEmits, ['update:inputMode', 'update:viewMode']),\n    'update:hoverDate': (date: any) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const adapter = useDate()\n    const { isDragging, dragHandle, hasScrolled } = useDatePicker()\n\n    const month = computed(() => props.displayDate)\n\n    const findClosestDate = (date: any, dates: any[]) => {\n      const { isSameDay, getDiff } = adapter\n      const [startDate, endDate] = dates\n\n      if (isSameDay(startDate, endDate)) {\n        return getDiff(date, startDate, 'days') > 0 ? endDate : startDate\n      }\n\n      const distStart = Math.abs(getDiff(date, startDate))\n      const distEnd = Math.abs(getDiff(date, endDate))\n\n      return distStart < distEnd ? startDate : endDate\n    }\n\n    // const hoverRange = computed<[any, any] | null>(() => {\n    //   if (!props.hoverDate) return null\n\n    //   const closestDate = findClosestDate(props.hoverDate, props.modelValue)\n\n    //   if (!closestDate) return null\n\n    //   return adapter.isAfter(props.hoverDate, closestDate) ? [closestDate, props.hoverDate] : [props.hoverDate, closestDate]\n    // })\n\n    const weeksInMonth = computed(() => {\n      const weeks = adapter.getWeekArray(month.value)\n\n      const days = weeks.flat()\n\n      // Make sure there's always 6 weeks in month (6 * 7 days)\n      // But only do it if we're not hiding adjacent months?\n      const daysInMonth = 6 * 7\n      if (days.length < daysInMonth && props.showAdjacentMonths) {\n        const lastDay = days[days.length - 1]\n\n        let week = []\n        for (let day = 1; day <= daysInMonth - days.length; day++) {\n          week.push(adapter.addDays(lastDay, day))\n\n          if (day % 7 === 0) {\n            weeks.push(week)\n            week = []\n          }\n        }\n      }\n\n      return weeks\n    })\n\n    const daysInMonth = computed(() => {\n      const validDates = props.modelValue.filter(v => !!v)\n      const isRange = validDates.length > 1\n\n      const days = weeksInMonth.value.flat()\n      const today = adapter.date()\n\n      const startDate = validDates[0]\n      const endDate = validDates[1]\n\n      return days.map((date, index) => {\n        const isStart = startDate && adapter.isSameDay(date, startDate)\n        const isEnd = endDate && adapter.isSameDay(date, endDate)\n        const isAdjacent = !adapter.isSameMonth(date, month.value)\n        const isSame = validDates.length === 2 && adapter.isSameDay(startDate, endDate)\n\n        return {\n          date,\n          isoDate: toIso(adapter, date),\n          formatted: adapter.format(date, 'keyboardDate'),\n          year: adapter.getYear(date),\n          month: adapter.getMonth(date),\n          isWeekStart: index % 7 === 0,\n          isWeekEnd: index % 7 === 6,\n          isSelected: isStart || isEnd,\n          isStart,\n          isEnd,\n          isToday: adapter.isSameDay(date, today),\n          isAdjacent,\n          isHidden: isAdjacent && !props.showAdjacentMonths,\n          inRange: isRange &&\n            !isSame &&\n            (isStart || isEnd || (validDates.length === 2 && adapter.isWithinRange(date, validDates as [any, any]))),\n          // isHovered: props.hoverDate === date,\n          // inHover: hoverRange.value && isWithinRange(date, hoverRange.value),\n          isHovered: false,\n          inHover: false,\n          localized: adapter.format(date, 'dayOfMonth'),\n        }\n      })\n    })\n\n    const weeks = computed(() => {\n      return weeksInMonth.value.map(week => {\n        return getWeek(adapter, week[0])\n      })\n    })\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    function selectDate (date: any) {\n      let newModel = props.modelValue.slice()\n\n      if (props.multiple) {\n        if (isDragging.value && dragHandle.value != null) {\n          const otherIndex = (dragHandle.value + 1) % 2\n          const fn = otherIndex === 0 ? 'isBefore' : 'isAfter'\n          if (adapter[fn](date, newModel[otherIndex])) {\n            newModel[dragHandle.value] = newModel[otherIndex]\n            newModel[otherIndex] = date\n            dragHandle.value = otherIndex\n          } else {\n            newModel[dragHandle.value] = date\n          }\n        } else {\n          if (newModel.find(d => adapter.isSameDay(d, date))) {\n            newModel = newModel.filter(v => !adapter.isSameDay(v, date))\n          } else if (newModel.length === 2) {\n            let index: number | undefined\n            if (!props.side || adapter.isSameMonth(newModel[0], newModel[1])) {\n              const closest = findClosestDate(date, newModel)\n              index = newModel.indexOf(closest)\n            } else {\n              index = props.side === 'start' ? 0 : props.side === 'end' ? 1 : undefined\n            }\n\n            newModel = newModel.map((v, i) => i === index ? date : v)\n          } else {\n            if (newModel[0] && adapter.isBefore(newModel[0], date)) {\n              newModel = [newModel[0], date]\n            } else {\n              newModel = [date, newModel[0]]\n            }\n          }\n        }\n      } else {\n        newModel = [date]\n      }\n\n      emit('update:modelValue', newModel.filter(v => !!v))\n    }\n\n    const daysRef = ref()\n\n    function findElement (el: HTMLElement | null): any {\n      if (!el || el === daysRef.value) return null\n\n      if ('vDate' in el.dataset) {\n        return adapter.date(el.dataset.vDate)\n      }\n\n      return findElement(el.parentElement)\n    }\n\n    function findDate (e: MouseEvent | TouchEvent) {\n      const x = 'changedTouches' in e ? e.changedTouches[0]?.clientX : e.clientX\n      const y = 'changedTouches' in e ? e.changedTouches[0]?.clientY : e.clientY\n      const el = document.elementFromPoint(x, y) as HTMLElement\n\n      return findElement(el)\n    }\n\n    let canDrag = false\n    function handleMousedown (e: MouseEvent | TouchEvent) {\n      hasScrolled.value = false\n\n      const selected = findDate(e)\n\n      if (!selected) return\n\n      const modelIndex = props.modelValue.findIndex(d => adapter.isEqual(d, selected))\n\n      if (modelIndex >= 0) {\n        canDrag = true\n        dragHandle.value = modelIndex\n\n        window.addEventListener('touchmove', handleTouchmove, { passive: false })\n        window.addEventListener('mousemove', handleTouchmove, { passive: false })\n\n        e.preventDefault()\n      }\n\n      window.addEventListener('touchend', handleTouchend, { passive: false })\n      window.addEventListener('mouseup', handleTouchend, { passive: false })\n    }\n\n    function handleTouchmove (e: MouseEvent | TouchEvent) {\n      if (!canDrag) return\n\n      e.preventDefault()\n\n      isDragging.value = true\n\n      const over = findDate(e)\n\n      if (!over) return\n\n      selectDate(over)\n    }\n\n    function handleTouchend (e: MouseEvent | TouchEvent) {\n      if (e.cancelable) e.preventDefault()\n\n      window.removeEventListener('touchmove', handleTouchmove)\n      window.removeEventListener('mousemove', handleTouchmove)\n      window.removeEventListener('touchend', handleTouchend)\n      window.removeEventListener('mouseup', handleTouchend)\n\n      const end = findDate(e)\n\n      if (!end) return\n\n      if (!hasScrolled.value) {\n        selectDate(end)\n      }\n\n      isDragging.value = false\n      dragHandle.value = null\n      canDrag = false\n    }\n\n    return () => (\n      <div class=\"v-date-picker-month\">\n        { props.showWeek && (\n          <div key=\"weeks\" class=\"v-date-picker-month__weeks\">\n            { !props.hideWeekdays && (\n              <div key=\"hide-week-days\" class=\"v-date-picker-month__day\">&nbsp;</div>\n            )}\n            { weeks.value.map(week => (\n              <div\n                class={[\n                  'v-date-picker-month__day',\n                  'v-date-picker-month__day--adjacent',\n                ]}\n              >{ week }</div>\n            ))}\n          </div>\n        )}\n\n        <div\n          ref={ daysRef }\n          class=\"v-date-picker-month__days\"\n          onMousedown={ handleMousedown }\n          onTouchstart={ handleMousedown }\n        >\n          { !props.hideWeekdays && adapter.getWeekdays().map(weekDay => (\n            <div\n              class={[\n                'v-date-picker-month__day',\n                'v-date-picker-month__weekday',\n              ]}\n            >{ weekDay.charAt(0) }</div>\n          ))}\n\n          { daysInMonth.value.map((item, index) => (\n            <div\n              class={[\n                'v-date-picker-month__day',\n                {\n                  'v-date-picker-month__day--selected': item.isSelected,\n                  'v-date-picker-month__day--start': item.isStart,\n                  'v-date-picker-month__day--end': item.isEnd,\n                  'v-date-picker-month__day--adjacent': item.isAdjacent,\n                  'v-date-picker-month__day--hide-adjacent': item.isHidden,\n                  'v-date-picker-month__day--week-start': item.isWeekStart,\n                  'v-date-picker-month__day--week-end': item.isWeekEnd,\n                  'v-date-picker-month__day--hovered': item.isHovered,\n                },\n              ]}\n              data-v-date={ !item.isHidden ? item.isoDate : undefined }\n            >\n              { item.inRange && (\n                <div\n                  key=\"in-range\"\n                  class={[\n                    'v-date-picker-month__day--range',\n                    backgroundColorClasses.value,\n                  ]}\n                  style={ backgroundColorStyles.value }\n                />\n              )}\n\n              { item.inHover && !item.isStart && !item.isEnd && !item.isHovered && !item.inRange && (\n                <div\n                  key=\"in-hover\"\n                  class=\"v-date-picker-month__day--hover\"\n                />\n              )}\n\n              { (props.showAdjacentMonths || !item.isAdjacent) && (\n                <VBtn\n                  icon\n                  ripple={ false } /* ripple not working correctly since we preventDefault in touchend */\n                  variant={ (item.isToday || item.isHovered) && !item.isSelected ? 'outlined' : 'flat' }\n                  active={ item.isSelected }\n                  color={ item.isSelected || item.isToday ? props.color : item.isHovered ? undefined : 'transparent' }\n                >\n                  { item.localized }\n                </VBtn>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  },\n})\n\nexport type VDatePickerMonth = InstanceType<typeof VDatePickerMonth>\n"],"mappings":"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"}

package/lib/labs/VDatePicker/VDatePickerMonth.sass

@@ -0,0 +1,69 @@
+.v-date-picker-month
+  display: flex
+  justify-content: center
+  height: 268px
+  min-width: 328px
+
+  --v-date-picker-month-day-diff: 4px
+
+.v-date-picker-month__weeks
+  display: grid
+  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content
+  grid-row-gap: 4px
+
+.v-date-picker-month__weekday
+  font-size: .875rem
+
+.v-date-picker-month__days
+  display: grid
+  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content
+  grid-row-gap: 4px
+  flex: 1 1
+  justify-content: space-around
+
+.v-date-picker-month__day
+  position: relative
+  display: flex
+  align-items: center
+  justify-content: center
+
+.v-date-picker-month__day--adjacent
+  opacity: 0.5
+
+.v-date-picker-month__day--hide-adjacent
+  opacity: 0
+
+.v-date-picker-month__day--range
+  position: absolute
+  width: 100%
+  height: calc(100% - var(--v-date-picker-month-day-diff) * 2)
+  opacity: 0.5
+
+.v-date-picker-month__day--hover
+  position: absolute
+  width: 100%
+  height: calc(100% - var(--v-date-picker-month-day-diff) * 2)
+  border-style: dashed
+  border-top-width: 1px
+  border-bottom-width: 1px
+  border-left: none
+  border-right: none
+
+.v-date-picker-month__day--start, .v-date-picker-month__day--week-start
+  .v-date-picker-month__day--range
+    border-bottom-left-radius: 50%
+    border-top-left-radius: 50%
+    left: var(--v-date-picker-month-day-diff)
+    width: calc(100% - var(--v-date-picker-month-day-diff))
+
+.v-date-picker-month__day--end, .v-date-picker-month__day--week-end
+  .v-date-picker-month__day--range
+    border-bottom-right-radius: 50%
+    border-top-right-radius: 50%
+    right: var(--v-date-picker-month-day-diff)
+    width: calc(100% - var(--v-date-picker-month-day-diff))
+
+.v-date-picker-month__day--selected.v-date-picker-month__day--end.v-date-picker-month__day--week-start,
+.v-date-picker-month__day--selected.v-date-picker-month__day--start.v-date-picker-month__day--week-end
+  .v-date-picker-month__day--range
+    display: none

package/lib/{components → labs}/VDatePicker/VDatePickerTitle.mjs

@@ -4,7 +4,7 @@
 import "./VDatePickerTitle.css";
 
 // Components
-import VIcon from "../VIcon/index.mjs"; // Mixins
+import VIcon from "../../components/VIcon/index.mjs"; // Mixins
 import PickerButton from "../../mixins/picker-button.mjs"; // Utils
 import mixins from "../../util/mixins.mjs"; // Types
 export default mixins(PickerButton