vueless 0.0.482 → 0.0.484

package/ui.form-calendar/UCalendarMonthView.vue

@@ -1,3 +1,123 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { formatDate, dateIsOutOfRange } from "./utilCalendar.ts";
+import { isSameMonth, getDateWithoutTime, isCurrentMonth } from "./utilDate.ts";
+
+import useAttrs from "./useAttrs.ts";
+
+import { MONTHS_PER_VIEW } 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 {
+  monthViewAttrs,
+  monthAttrs,
+  currentMonthAttrs,
+  currentMonthInRangeAttrs,
+  lastMonthInRangeAttrs,
+  firstMonthInRangeAttrs,
+  singleMonthInRangeAttrs,
+  monthInRangeAttrs,
+  selectedMonthAttrs,
+  activeMonthAttrs,
+  currentLastMonthInRangeAttrs,
+  currentFirstMonthInRangeAttrs,
+  singleCurrentMonthInRangeAttrs,
+} = useAttrs(props as unknown as UCalendarProps);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const localActiveMonth = computed(
+  () => props.activeMonth || props.activeDate || localSelectedDate.value,
+);
+
+const months = computed(() =>
+  Array.from({ length: MONTHS_PER_VIEW }, (_, i) => i).map((monthNumber) => getMonth(monthNumber)),
+);
+
+function getMonth(monthNumber: number) {
+  let newDate = new Date(localActiveMonth.value.valueOf());
+
+  newDate.setMonth(monthNumber);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+function getMonthState(month: Date, index: number) {
+  const startRangeIndex = months.value.findIndex((month) => {
+    return isSameMonth(month, localSelectedDate.value);
+  });
+
+  const endRangeIndex = months.value.findIndex((month) => {
+    return props.selectedDateTo && isSameMonth(month, props.selectedDateTo);
+  });
+
+  const isMonthInRange =
+    (index >= startRangeIndex && index <= endRangeIndex) ||
+    (index >= startRangeIndex && endRangeIndex === -1);
+  const isSelectedMonth =
+    isSameMonth(month, localSelectedDate.value) && props.selectedDate !== null;
+  const isPresentMonth = isCurrentMonth(month);
+  const isMoreThanOneMonthRange =
+    props.range &&
+    props.selectedDateTo &&
+    props.selectedDate &&
+    isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
+  const isActiveMonth = props.activeMonth && isSameMonth(props.activeMonth, month) && !props.range;
+  const isCurrentMonthInRange = isMonthInRange && isPresentMonth;
+  const isLastMonthInRange =
+    props.selectedDateTo &&
+    props.range &&
+    isSameMonth(month, props.selectedDateTo) &&
+    isMoreThanOneMonthRange;
+  const isFirstMonthInRange =
+    props.range && isSameMonth(month, localSelectedDate.value) && isMoreThanOneMonthRange;
+  const isCurrentFirstMonthInRange = props.range && isFirstMonthInRange && isPresentMonth;
+  const isCurrentLastMonthInRange = props.range && isLastMonthInRange && isPresentMonth;
+
+  return {
+    isSelectedMonth,
+    isCurrentMonth: isPresentMonth,
+    isMoreThanOneMonthRange,
+    isActiveMonth,
+    isCurrentMonthInRange,
+    isLastMonthInRange,
+    isFirstMonthInRange,
+    isCurrentFirstMonthInRange,
+    isCurrentLastMonthInRange,
+    isMonthInRange,
+  };
+}
+
+function isMoreThanOneMonthDiff(date: Date, dateTo: Date) {
+  const yearDiff = Math.abs(dateTo.getFullYear() - date.getFullYear());
+  const monthDiff = Math.abs(dateTo.getMonth() - date.getMonth());
+  const dayDiff = Math.abs(dateTo.getDate() - date.getDate());
+
+  return yearDiff > 0 || monthDiff > 1 || (monthDiff === 1 && dayDiff > 0);
+}
+
+function onClickMonth(month: Date) {
+  emit("input", month);
+}
+</script>
+
 <template>
   <div v-bind="monthViewAttrs">
     <template v-for="(month, idx) in months" :key="month">
@@ -162,167 +282,3 @@
     </template>
   </div>
 </template>
-
-<script setup>
-import { computed } from "vue";
-
-import { formatDate, dateIsOutOfRange } from "./utilCalendar.js";
-import { isSameMonth, getDateWithoutTime, isCurrentMonth } from "./utilDate.js";
-
-import useAttrs from "./useAttrs.js";
-
-import { MONTHS_PER_VIEW } 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 {
-  monthViewAttrs,
-  monthAttrs,
-  currentMonthAttrs,
-  currentMonthInRangeAttrs,
-  lastMonthInRangeAttrs,
-  firstMonthInRangeAttrs,
-  singleMonthInRangeAttrs,
-  monthInRangeAttrs,
-  selectedMonthAttrs,
-  activeMonthAttrs,
-  currentLastMonthInRangeAttrs,
-  currentFirstMonthInRangeAttrs,
-  singleCurrentMonthInRangeAttrs,
-} = useAttrs(props);
-
-const localSelectedDate = computed(() => {
-  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
-});
-
-const localActiveMonth = computed(
-  () => props.activeMonth || props.activeDate || localSelectedDate.value,
-);
-
-const months = computed(() =>
-  Array.from({ length: MONTHS_PER_VIEW }, (_, i) => i).map((monthNumber) => getMonth(monthNumber)),
-);
-
-function getMonth(monthNumber) {
-  let newDate = new Date(localActiveMonth.value.valueOf());
-
-  newDate.setMonth(monthNumber);
-
-  // Means the current day has less days so the extra month is
-  // in the following month
-  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
-    // Assign the last day of previous month
-    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
-  }
-
-  return newDate;
-}
-
-function getMonthState(month, index) {
-  const startRangeIndex = months.value.findIndex((month) => {
-    return isSameMonth(month, localSelectedDate.value);
-  });
-
-  const endRangeIndex = months.value.findIndex((month) => {
-    return isSameMonth(month, props.selectedDateTo);
-  });
-
-  const isMonthInRange =
-    (index >= startRangeIndex && index <= endRangeIndex) ||
-    (index >= startRangeIndex && endRangeIndex === -1);
-  const isSelectedMonth =
-    isSameMonth(month, localSelectedDate.value) && props.selectedDate !== null;
-  const isPresentMonth = isCurrentMonth(month);
-  const isMoreThanOneMonthRange =
-    props.range &&
-    props.selectedDateTo &&
-    isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
-  const isActiveMonth = isSameMonth(props.activeMonth, month) && !props.range;
-  const isCurrentMonthInRange = isMonthInRange && isPresentMonth;
-  const isLastMonthInRange =
-    props.range && isSameMonth(month, props.selectedDateTo) && isMoreThanOneMonthRange;
-  const isFirstMonthInRange =
-    props.range && isSameMonth(month, localSelectedDate.value) && isMoreThanOneMonthRange;
-  const isCurrentFirstMonthInRange = props.range && isFirstMonthInRange && isPresentMonth;
-  const isCurrentLastMonthInRange = props.range && isLastMonthInRange && isPresentMonth;
-
-  return {
-    isSelectedMonth,
-    isCurrentMonth: isPresentMonth,
-    isMoreThanOneMonthRange,
-    isActiveMonth,
-    isCurrentMonthInRange,
-    isLastMonthInRange,
-    isFirstMonthInRange,
-    isCurrentFirstMonthInRange,
-    isCurrentLastMonthInRange,
-    isMonthInRange,
-  };
-}
-
-function isMoreThanOneMonthDiff(date, dateTo) {
-  const yearDiff = Math.abs(dateTo.getFullYear() - date.getFullYear());
-  const monthDiff = Math.abs(dateTo.getMonth() - date.getMonth());
-  const dayDiff = Math.abs(dateTo.getDate() - date.getDate());
-
-  return yearDiff > 0 || monthDiff > 1 || (monthDiff === 1 && dayDiff > 0);
-}
-
-function onClickMonth(month) {
-  emit("input", month);
-}
-</script>

package/ui.form-calendar/UCalendarYearView.vue

@@ -1,3 +1,121 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { formatDate, getYearsRange, dateIsOutOfRange } from "./utilCalendar.ts";
+import { isSameMonth, getDateWithoutTime, isCurrentYear } from "./utilDate.ts";
+
+import useAttrs from "./useAttrs.ts";
+
+import { YEARS_PER_VIEW } from "./constants.ts";
+
+import type { UCalendarProps, UCalendarViewProps } from "./types.ts";
+
+import UButton from "../ui.button/UButton.vue";
+
+const props = defineProps<UCalendarViewProps>();
+
+const emit = defineEmits(["input"]);
+
+const {
+  yearViewAttrs,
+  yearAttrs,
+  currentYearAttrs,
+  currentYearInRangeAttrs,
+  firstYearInRangeAttrs,
+  lastYearInRangeAttrs,
+  yearInRangeAttrs,
+  singleYearInRangeAttrs,
+  selectedYearAttrs,
+  activeYearAttrs,
+  singleCurrentYearInRangeAttrs,
+  currentLastYearInRangeAttrs,
+  currentFirstYearInRangeAttrs,
+} = useAttrs(props as unknown as UCalendarProps);
+
+const localSelectedDate = computed(() => {
+  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
+});
+
+const localActiveMonth = computed(
+  () => props.activeMonth || props.activeDate || localSelectedDate.value,
+);
+
+const years = computed(() => {
+  const [initialYear] = getYearsRange(localActiveMonth.value);
+
+  return Array.from({ length: YEARS_PER_VIEW }, (_, i) => i).map((year) =>
+    getYear(initialYear + year),
+  );
+});
+
+function getYear(year: number) {
+  let newDate = new Date(localActiveMonth.value.valueOf());
+
+  newDate.setFullYear(year);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+function getYearState(year: Date, index: number) {
+  const startRangeIndex = years.value.findIndex((year) => {
+    return year.getFullYear() === localSelectedDate.value?.getFullYear();
+  });
+
+  const endRangeIndex = years.value.findIndex((year) => {
+    return year.getFullYear() === props.selectedDateTo?.getFullYear();
+  });
+
+  const isYearInRange =
+    (index >= startRangeIndex && index <= endRangeIndex) ||
+    (index >= startRangeIndex && endRangeIndex === -1);
+  const isSelectedYear = isSameMonth(year, localSelectedDate.value) && props.selectedDate !== null;
+  const isPresentYear = isCurrentYear(year);
+  const isMoreThanOneYearRange =
+    props.selectedDateTo &&
+    props.selectedDate &&
+    props.selectedDateTo.getFullYear() - props.selectedDate.getFullYear() >= 1;
+  const isActiveYear = props.activeMonth && isSameMonth(props.activeMonth, year) && !props.range;
+  const isCurrentYearInRange = isYearInRange && isPresentYear;
+
+  const isLastYearInRange =
+    props.range &&
+    year.getFullYear() === props.selectedDateTo?.getFullYear() &&
+    isMoreThanOneYearRange;
+
+  const isFirstYearInRange =
+    props.range &&
+    year.getFullYear() === localSelectedDate.value?.getFullYear() &&
+    isMoreThanOneYearRange;
+
+  const isCurrentFirstYearInRange = props.range && isFirstYearInRange && isPresentYear;
+  const isCurrentLastYearInRange = props.range && isLastYearInRange && isPresentYear;
+
+  return {
+    isSelectedYear,
+    isCurrentYear: isPresentYear,
+    isMoreThanOneYearRange,
+    isActiveYear,
+    isCurrentYearInRange,
+    isLastYearInRange,
+    isFirstYearInRange,
+    isCurrentFirstYearInRange,
+    isCurrentLastYearInRange,
+    isYearInRange,
+  };
+}
+
+function onClickYear(year: Date) {
+  emit("input", year);
+}
+</script>
+
 <template>
   <div v-bind="yearViewAttrs">
     <template v-for="(year, idx) in years" :key="year">
@@ -158,167 +276,3 @@
     </template>
   </div>
 </template>
-
-<script setup>
-import { computed } from "vue";
-
-import { formatDate, getYearsRange, dateIsOutOfRange } from "./utilCalendar.js";
-import { isSameMonth, getDateWithoutTime, isCurrentYear } from "./utilDate.js";
-
-import useAttrs from "./useAttrs.js";
-
-import { YEARS_PER_VIEW } 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 {
-  yearViewAttrs,
-  yearAttrs,
-  currentYearAttrs,
-  currentYearInRangeAttrs,
-  firstYearInRangeAttrs,
-  lastYearInRangeAttrs,
-  yearInRangeAttrs,
-  singleYearInRangeAttrs,
-  selectedYearAttrs,
-  activeYearAttrs,
-  singleCurrentYearInRangeAttrs,
-  currentLastYearInRangeAttrs,
-  currentFirstYearInRangeAttrs,
-} = useAttrs(props);
-
-const localSelectedDate = computed(() => {
-  return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
-});
-
-const localActiveMonth = computed(
-  () => props.activeMonth || props.activeDate || localSelectedDate.value,
-);
-
-const years = computed(() => {
-  const [initialYear] = getYearsRange(localActiveMonth.value, YEARS_PER_VIEW);
-
-  return Array.from({ length: YEARS_PER_VIEW }, (_, i) => i).map((year) =>
-    getYear(initialYear + year),
-  );
-});
-
-function getYear(year) {
-  let newDate = new Date(localActiveMonth.value.valueOf());
-
-  newDate.setFullYear(year);
-
-  // Means the current day has less days so the extra month is
-  // in the following month
-  if (newDate.getDate() !== localActiveMonth.value.getDate()) {
-    // Assign the last day of previous month
-    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
-  }
-
-  return newDate;
-}
-
-function getYearState(year, index) {
-  const startRangeIndex = years.value.findIndex((year) => {
-    return year.getFullYear() === localSelectedDate.value?.getFullYear();
-  });
-
-  const endRangeIndex = years.value.findIndex((year) => {
-    return year.getFullYear() === props.selectedDateTo?.getFullYear();
-  });
-
-  const isYearInRange =
-    (index >= startRangeIndex && index <= endRangeIndex) ||
-    (index >= startRangeIndex && endRangeIndex === -1);
-  const isSelectedYear = isSameMonth(year, localSelectedDate.value) && props.selectedDate !== null;
-  const isPresentYear = isCurrentYear(year);
-  const isMoreThanOneYearRange =
-    props.selectedDateTo?.getFullYear() - props.selectedDate?.getFullYear() >= 1;
-  const isActiveYear = isSameMonth(props.activeMonth, year) && !props.range;
-  const isCurrentYearInRange = isYearInRange && isPresentYear;
-
-  const isLastYearInRange =
-    props.range &&
-    year.getFullYear() === props.selectedDateTo?.getFullYear() &&
-    isMoreThanOneYearRange;
-
-  const isFirstYearInRange =
-    props.range &&
-    year.getFullYear() === localSelectedDate.value?.getFullYear() &&
-    isMoreThanOneYearRange;
-
-  const isCurrentFirstYearInRange = props.range && isFirstYearInRange && isPresentYear;
-  const isCurrentLastYearInRange = props.range && isLastYearInRange && isPresentYear;
-
-  return {
-    isSelectedYear,
-    isCurrentYear: isPresentYear,
-    isMoreThanOneYearRange,
-    isActiveYear,
-    isCurrentYearInRange,
-    isLastYearInRange,
-    isFirstYearInRange,
-    isCurrentFirstYearInRange,
-    isCurrentLastYearInRange,
-    isYearInRange,
-  };
-}
-
-function onClickYear(year) {
-  emit("input", year);
-}
-</script>

package/ui.form-calendar/{config.js → config.ts}

@@ -153,8 +153,6 @@ export default /*tw*/ {
     timepicker: false,
     dateFormat: undefined,
     dateTimeFormat: undefined,
-    maxDate: undefined,
-    minDate: undefined,
     /* icons */
     viewSwitchIcon: "keyboard_arrow_down",
     nextIcon: "keyboard_arrow_right",

package/ui.form-calendar/{constants.js → constants.ts}

@@ -21,6 +21,35 @@ export const MAX_SECONDS = 59;
 export const MIN_SECONDS = 0;
 export const SEPARATOR = "—";
 
+export enum LocaleType {
+  Day = "day",
+  Month = "month",
+}
+
+export enum KeyCode {
+  ArrowLeft = "ArrowLeft",
+  ArrowUp = "ArrowUp",
+  ArrowRight = "ArrowRight",
+  ArrowDown = "ArrowDown",
+  Enter = "Enter",
+  Escape = "Escape",
+  Space = " Space",
+  Backspace = "Backspace",
+}
+
+export enum View {
+  Day = "day",
+  Month = "month",
+  Year = "year",
+}
+
+export enum InputType {
+  Hours,
+  Minutes,
+  Seconds,
+}
+
+// TODO: Remove redundant arrays when other components migrated to ts;
 export const LOCALE_TYPE = {
   day: "day",
   month: "month",
@@ -32,22 +61,12 @@ export const VIEW = {
   year: "year",
 };
 
-export const INPUT_TYPE = {
-  hours: "hours",
-  minutes: "minutes",
-  seconds: "seconds",
-};
-
-export const KEY_CODE = {
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  enter: 13,
-  esc: 27,
-  space: 32,
-  backspace: 8,
-};
+export const ARROW_KEYS: string[] = [
+  KeyCode.ArrowLeft,
+  KeyCode.ArrowUp,
+  KeyCode.ArrowRight,
+  KeyCode.ArrowDown,
+];
 
 export const TOKEN_REG_EXP = {
   D: "(\\w+)",

package/ui.form-calendar/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />
@@ -26,7 +26,6 @@ Each character in the table below can be used in `dateFormat` and `userFormat` o
 | D     | A textual representation of a day                         | Mon through Sun                                               |
 | l     | A full textual representation of the day of the week      | Sunday through Saturday                                       |
 | j     | Day of the month without leading zeros                    | 1 to 31                                                       |
-| J     | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st                                             |
 | w     | Numeric representation of the day of the week             | 0 (for Sunday) through 6 (for Saturday)                       |
 | W     | Numeric representation of the week                        | 0 (first week of the year) through 52 (last week of the year) |
 | F     | A full textual representation of a month                  | January through December                                      |