vueless 0.0.483 → 0.0.484

package/ui.form-calendar/UCalendarDayView.vue

@@ -1,3 +1,214 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { formatDate, dateIsOutOfRange } from "./utilCalendar.ts";
+import {
+  isToday,
+  getDateWithoutTime,
+  getLastDayOfMonth,
+  isSameDay,
+  isAnotherMothDay,
+} from "./utilDate.ts";
+
+import useAttrs from "./useAttrs.ts";
+
+import { DAYS_IN_WEEK, START_WEEK } from "./constants.ts";
+
+import type { UCalendarViewProps, UCalendarProps } from "./types.ts";
+
+import UButton from "../ui.button/UButton.vue";
+
+const props = defineProps<UCalendarViewProps>();
+
+const emit = defineEmits(["input"]);
+
+const {
+  dayViewAttrs,
+  weekDaysAttrs,
+  weekDayAttrs,
+  daysAttrs,
+  dayAttrs,
+  currentDayAttrs,
+  dayInRangeAttrs,
+  currentDayInRangeAttrs,
+  anotherMonthDayAttrs,
+  firstDayInRangeAttrs,
+  anotherMonthFirstDayInRangeAttrs,
+  lastDayInRangeAttrs,
+  anotherMonthLastDayInRangeAttrs,
+  selectedDayAttrs,
+  activeDayAttrs,
+  currentLastDayInRangeAttrs,
+  currentFirstDayInRangeAttrs,
+} = useAttrs(props as unknown as UCalendarProps);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const activeMonthDate = computed(() => {
+  return props.activeMonth || localSelectedDate.value;
+});
+
+const firstDayOfMonth = computed(() => {
+  const date = new Date(activeMonthDate.value.valueOf());
+
+  date.setDate(1);
+
+  return date;
+});
+
+const lastDayOfMonth = computed(() => {
+  return getLastDayOfMonth(activeMonthDate.value);
+});
+
+const firstDayOfPrevMonth = computed(() => {
+  const prevMonth = activeMonthDate.value.getMonth() - 1;
+
+  return new Date(activeMonthDate.value.getFullYear(), prevMonth, 1);
+});
+
+const lastDayOfPrevMonth = computed(() => {
+  const date = new Date(activeMonthDate.value.valueOf());
+
+  date.setDate(0);
+
+  return date;
+});
+
+const firstDayOfNextMonth = computed(() => {
+  const date = new Date(activeMonthDate.value.valueOf());
+  const nextMonth = activeMonthDate.value.getMonth() + 1;
+
+  date.setDate(1);
+  date.setMonth(nextMonth);
+
+  return date;
+});
+
+const monthDays = computed(() => {
+  const dayNumber = lastDayOfMonth.value.getDate();
+
+  return Array.from({ length: dayNumber }, (_, index) => dayNumber - index)
+    .map((day) => getDay(activeMonthDate.value, day))
+    .reverse();
+});
+
+const prevMonthDays = computed(() => {
+  let prevMonthTotalDays = firstDayOfMonth.value.getDay() - START_WEEK;
+
+  if (prevMonthTotalDays < 0) {
+    prevMonthTotalDays = DAYS_IN_WEEK + prevMonthTotalDays;
+  }
+
+  return Array.from(
+    { length: prevMonthTotalDays },
+    (_, index) => lastDayOfPrevMonth.value.getDate() - index,
+  )
+    .map((day) => getDay(firstDayOfPrevMonth.value, day))
+    .reverse();
+});
+
+const nextMonthDays = computed(() => {
+  const nextMonthTotalDays =
+    DAYS_IN_WEEK - (monthDays.value.concat(prevMonthDays.value).length % DAYS_IN_WEEK);
+
+  if (nextMonthTotalDays === DAYS_IN_WEEK) {
+    return [];
+  }
+
+  return Array.from({ length: nextMonthTotalDays }, (_, index) => nextMonthTotalDays - index)
+    .map((day) => getDay(firstDayOfNextMonth.value, day))
+    .reverse();
+});
+
+const weekdays = computed(() =>
+  Array.from({ length: DAYS_IN_WEEK }, (_, index) => DAYS_IN_WEEK - index)
+    .map(getWeekDayName)
+    .reverse(),
+);
+
+const days = computed(() => {
+  return prevMonthDays.value.concat(monthDays.value, nextMonthDays.value);
+});
+
+function getWeekDayName(dayNumber: number) {
+  const date = new Date();
+
+  date.setDate((date.getDate() + (DAYS_IN_WEEK + dayNumber - date.getDay())) % DAYS_IN_WEEK);
+
+  return formatDate(date, "D", props.locale);
+}
+
+function getDay(date: Date, dayNumber: number) {
+  const day = new Date(date.valueOf());
+
+  day.setDate(dayNumber);
+
+  return day;
+}
+
+function getDayState(day: Date) {
+  const isDayInRange =
+    props.range &&
+    localSelectedDate.value &&
+    props.selectedDate &&
+    props.selectedDateTo &&
+    !dateIsOutOfRange(
+      day,
+      props.selectedDate,
+      props.selectedDateTo,
+      props.locale,
+      props.dateFormat,
+    );
+
+  const isSelectedDay = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
+  const isCurrentDay = isToday(day);
+  const isAnotherMonthDay = isAnotherMothDay(day, activeMonthDate.value);
+  const isCurrentDayInRange = isCurrentDay && isDayInRange;
+  const isFirstDayInRange = props.range && isSameDay(day, localSelectedDate.value);
+  const isLastDayInRange =
+    props.selectedDateTo && props.range && isSameDay(day, props.selectedDateTo);
+  const isCurrentFirstDayInRange = isFirstDayInRange && isCurrentDay;
+  const isCurrentLastDayInRange = isLastDayInRange && isCurrentDay;
+  const isAnotherMonthFirstDayInRange = isFirstDayInRange && isAnotherMonthDay;
+  const isAnotherMonthLastDayInRange = isLastDayInRange && isAnotherMonthDay;
+  const isActiveDay = props.activeDate && isSameDay(props.activeDate, day) && !props.range;
+
+  return {
+    isDayInRange,
+    isSelectedDay,
+    isCurrentDay,
+    isAnotherMonthDay,
+    isCurrentDayInRange,
+    isFirstDayInRange,
+    isLastDayInRange,
+    isCurrentFirstDayInRange,
+    isCurrentLastDayInRange,
+    isAnotherMonthFirstDayInRange,
+    isAnotherMonthLastDayInRange,
+    isActiveDay,
+  };
+}
+
+function onClickDay(day: Date) {
+  const isSameDate = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
+  const isSameDayInRange =
+    isSameDay(day, localSelectedDate.value) &&
+    props.selectedDate !== null &&
+    props.selectedDateTo &&
+    props.range;
+
+  if (isSameDate || isSameDayInRange) {
+    emit("input", null);
+
+    return;
+  }
+
+  emit("input", day);
+}
+</script>
+
 <template>
   <div v-bind="dayViewAttrs">
     <div v-bind="weekDaysAttrs">
@@ -196,260 +407,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from "vue";
-
-import { formatDate, dateIsOutOfRange } from "./utilCalendar.js";
-import {
-  isToday,
-  getDateWithoutTime,
-  getLastDayOfMonth,
-  isSameDay,
-  isAnotherMothDay,
-} from "./utilDate.js";
-
-import useAttrs from "./useAttrs.js";
-
-import { DAYS_IN_WEEK, START_WEEK } from "./constants.js";
-
-import UButton from "../ui.button/UButton.vue";
-
-const props = defineProps({
-  selectedDate: {
-    type: [Date, null],
-    required: true,
-  },
-
-  selectedDateTo: {
-    type: [Date, null],
-    default: undefined,
-  },
-
-  activeDate: {
-    type: [Date, null],
-    required: true,
-  },
-
-  activeMonth: {
-    type: [Date, null],
-    required: true,
-  },
-
-  locale: {
-    type: Object,
-    required: true,
-  },
-
-  dateFormat: {
-    type: String,
-    default: undefined,
-  },
-
-  range: {
-    type: Boolean,
-    default: false,
-  },
-
-  maxDate: {
-    type: [Date, String],
-    default: undefined,
-  },
-
-  minDate: {
-    type: [Date, String],
-    default: undefined,
-  },
-
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(["input"]);
-
-const {
-  dayViewAttrs,
-  weekDaysAttrs,
-  weekDayAttrs,
-  daysAttrs,
-  dayAttrs,
-  currentDayAttrs,
-  dayInRangeAttrs,
-  currentDayInRangeAttrs,
-  anotherMonthDayAttrs,
-  firstDayInRangeAttrs,
-  anotherMonthFirstDayInRangeAttrs,
-  lastDayInRangeAttrs,
-  anotherMonthLastDayInRangeAttrs,
-  selectedDayAttrs,
-  activeDayAttrs,
-  currentLastDayInRangeAttrs,
-  currentFirstDayInRangeAttrs,
-} = useAttrs(props);
-
-const localSelectedDate = computed(() => {
-  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
-});
-
-const activeMonthDate = computed(() => {
-  return props.activeMonth || localSelectedDate.value;
-});
-
-const firstDayOfMonth = computed(() => {
-  const date = new Date(activeMonthDate.value.valueOf());
-
-  date.setDate(1);
-
-  return date;
-});
-
-const lastDayOfMonth = computed(() => {
-  return getLastDayOfMonth(activeMonthDate.value);
-});
-
-const firstDayOfPrevMonth = computed(() => {
-  const prevMonth = activeMonthDate.value.getMonth() - 1;
-
-  return new Date(activeMonthDate.value.getFullYear(), prevMonth, 1);
-});
-
-const lastDayOfPrevMonth = computed(() => {
-  const date = new Date(activeMonthDate.value.valueOf());
-
-  date.setDate(0);
-
-  return date;
-});
-
-const firstDayOfNextMonth = computed(() => {
-  const date = new Date(activeMonthDate.value.valueOf());
-  const nextMonth = activeMonthDate.value.getMonth() + 1;
-
-  date.setDate(1);
-  date.setMonth(nextMonth);
-
-  return date;
-});
-
-const monthDays = computed(() => {
-  const dayNumber = lastDayOfMonth.value.getDate();
-
-  return Array.from({ length: dayNumber }, (_, index) => dayNumber - index)
-    .map((day) => getDay(activeMonthDate.value, day))
-    .reverse();
-});
-
-const prevMonthDays = computed(() => {
-  let prevMonthTotalDays = firstDayOfMonth.value.getDay() - START_WEEK;
-
-  if (prevMonthTotalDays < 0) {
-    prevMonthTotalDays = DAYS_IN_WEEK + prevMonthTotalDays;
-  }
-
-  return Array.from(
-    { length: prevMonthTotalDays },
-    (_, index) => lastDayOfPrevMonth.value.getDate() - index,
-  )
-    .map((day) => getDay(firstDayOfPrevMonth.value, day))
-    .reverse();
-});
-
-const nextMonthDays = computed(() => {
-  const nextMonthTotalDays =
-    DAYS_IN_WEEK - (monthDays.value.concat(prevMonthDays.value).length % DAYS_IN_WEEK);
-
-  if (nextMonthTotalDays === DAYS_IN_WEEK) {
-    return [];
-  }
-
-  return Array.from({ length: nextMonthTotalDays }, (_, index) => nextMonthTotalDays - index)
-    .map((day) => getDay(firstDayOfNextMonth.value, day))
-    .reverse();
-});
-
-const weekdays = computed(() =>
-  Array.from({ length: DAYS_IN_WEEK }, (_, index) => DAYS_IN_WEEK - index)
-    .map(getWeekDayName)
-    .reverse(),
-);
-
-const days = computed(() => {
-  return prevMonthDays.value.concat(monthDays.value, nextMonthDays.value);
-});
-
-function getWeekDayName(dayNumber) {
-  const date = new Date();
-
-  date.setDate((date.getDate() + (DAYS_IN_WEEK + dayNumber - date.getDay())) % DAYS_IN_WEEK);
-
-  return formatDate(date, "D", props.locale);
-}
-
-function getDay(date, dayNumber) {
-  const day = new Date(date.valueOf());
-
-  day.setDate(dayNumber);
-
-  return day;
-}
-
-function getDayState(day) {
-  const isDayInRange =
-    props.range &&
-    localSelectedDate.value &&
-    props.selectedDateTo &&
-    !dateIsOutOfRange(
-      day,
-      props.selectedDate,
-      props.selectedDateTo,
-      props.locale,
-      props.dateFormat,
-    );
-
-  const isSelectedDay = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
-  const isCurrentDay = isToday(day);
-  const isAnotherMonthDay = isAnotherMothDay(day, activeMonthDate.value);
-  const isCurrentDayInRange = isCurrentDay && isDayInRange;
-  const isFirstDayInRange = props.range && isSameDay(day, localSelectedDate.value);
-  const isLastDayInRange = props.range && isSameDay(day, props.selectedDateTo);
-  const isCurrentFirstDayInRange = isFirstDayInRange && isCurrentDay;
-  const isCurrentLastDayInRange = isLastDayInRange && isCurrentDay;
-  const isAnotherMonthFirstDayInRange = isFirstDayInRange && isAnotherMonthDay;
-  const isAnotherMonthLastDayInRange = isLastDayInRange && isAnotherMonthDay;
-  const isActiveDay = isSameDay(props.activeDate, day) && !props.range;
-
-  return {
-    isDayInRange,
-    isSelectedDay,
-    isCurrentDay,
-    isAnotherMonthDay,
-    isCurrentDayInRange,
-    isFirstDayInRange,
-    isLastDayInRange,
-    isCurrentFirstDayInRange,
-    isCurrentLastDayInRange,
-    isAnotherMonthFirstDayInRange,
-    isAnotherMonthLastDayInRange,
-    isActiveDay,
-  };
-}
-
-function onClickDay(day) {
-  const isSameDate = isSameDay(day, localSelectedDate.value) && props.selectedDate !== null;
-  const isSameDayInRange =
-    isSameDay(day, localSelectedDate.value) &&
-    props.selectedDate !== null &&
-    props.selectedDateTo &&
-    props.range;
-
-  if (isSameDate || isSameDayInRange) {
-    emit("input", null);
-
-    return;
-  }
-
-  emit("input", day);
-}
-</script>