vueless 0.0.2 → 0.0.3

package/ui.form-calendar/components/DayView.vue

@@ -0,0 +1,230 @@
+<template>
+  <div v-bind="dayViewWrapperAttrs">
+    <div v-bind="weekDaysWrapperAttrs">
+      <span v-for="weekDay in weekdays" :key="weekDay" v-bind="weekDayAttrs" v-text="weekDay" />
+    </div>
+    <div v-bind="daysWrapperAttrs">
+      <button
+        v-for="day in days"
+        :key="day"
+        tabindex="-1"
+        :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+        v-bind="dayAttrs(getDayClasses(day))"
+        @mousedown.prevent.capture
+        @click="onClickDay(day)"
+        v-text="formatDate(day, 'j', locale)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
+import {
+  isToday,
+  getDateWithoutTime,
+  getLastDayOfMonth,
+  isSameDay,
+  isAnotherMothDay,
+} from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { DAYS_IN_WEEK, START_WEEK } from "../constants";
+
+const props = defineProps({
+  selectedDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeMonth: {
+    type: [Date, null],
+    required: true,
+  },
+
+  locale: {
+    type: Object,
+    required: true,
+  },
+
+  dateFormat: {
+    type: String,
+    required: true,
+  },
+
+  maxDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  minDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+const {
+  dayViewWrapperAttrs,
+  weekDaysWrapperAttrs,
+  weekDayAttrs,
+  daysWrapperAttrs,
+  activeDayAttrs,
+  selectedDayAttrs,
+  currentDayAttrs,
+  anotherMonthDayAttrs,
+  dayAttrs,
+} = 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 getDayClasses(day) {
+  if (isToday(day) && props.selectedDate === null) {
+    return [currentDayAttrs.value.class];
+  }
+
+  if (isSelectedDay(day)) {
+    return [selectedDayAttrs.value.class];
+  }
+
+  if (isSameDay(props.activeDate, day)) {
+    return [activeDayAttrs.value.class];
+  }
+
+  if (isAnotherMothDay(day, activeMonthDate.value)) {
+    return [anotherMonthDayAttrs.value.class];
+  }
+}
+
+function isSelectedDay(day) {
+  return isSameDay(day, localSelectedDate.value);
+}
+
+function onClickDay(day) {
+  if (isSelectedDay(day) && props.selectedDate !== null) {
+    emit("input", null);
+
+    return;
+  }
+
+  emit("input", day);
+}
+</script>

package/ui.form-calendar/components/MonthView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div v-bind="monthViewWrapperAttrs">
+    <button
+      v-for="month in months"
+      :key="month"
+      :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
+      v-bind="monthAttrs(getMonthClasses(month))"
+      @click="onClickMonth(month)"
+      @mousedown.prevent.capture
+      v-text="formatDate(month, 'M', props.locale)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
+import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { MONTHS_PER_VIEW } from "../constants";
+
+const props = defineProps({
+  selectedDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeMonth: {
+    type: [Date, null],
+    required: true,
+  },
+
+  locale: {
+    type: Object,
+    required: true,
+  },
+
+  dateFormat: {
+    type: String,
+    required: true,
+  },
+
+  maxDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  minDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+const { monthViewWrapperAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = 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 getMonthClasses(day) {
+  if (isSelectedMonth(day)) {
+    return [selectedMonthAttrs.value.class];
+  }
+
+  if (isSameMonth(props.activeMonth, day)) {
+    return [activeMonthAttrs.value.class];
+  }
+}
+
+function isSelectedMonth(month) {
+  return isSameMonth(month, localSelectedDate.value);
+}
+
+function onClickMonth(month) {
+  emit("input", month);
+}
+</script>

package/ui.form-calendar/components/YearView.vue

@@ -0,0 +1,118 @@
+<template>
+  <div v-bind="yearViewWrapperAttrs">
+    <button
+      v-for="year in years"
+      :key="year"
+      :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
+      v-bind="yearAttrs(getYearClasses(year))"
+      @mousedown.prevent.capture
+      @click="onClickMonth(year)"
+      v-text="formatDate(year, 'Y', props.locale)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
+import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+
+import useAttrs from "../composables/attrs.composable";
+
+import { YEARS_PER_VIEW } from "../constants";
+
+const props = defineProps({
+  selectedDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeDate: {
+    type: [Date, null],
+    required: true,
+  },
+
+  activeMonth: {
+    type: [Date, null],
+    required: true,
+  },
+
+  locale: {
+    type: Object,
+    required: true,
+  },
+
+  dateFormat: {
+    type: String,
+    required: true,
+  },
+
+  maxDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  minDate: {
+    type: [Date, String],
+    default: undefined,
+  },
+
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["input"]);
+
+const { yearViewWrapperAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = 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 getYearClasses(day) {
+  if (isSelectedMonth(day)) {
+    return [selectedYearAttrs.value.class];
+  }
+
+  if (isSameMonth(props.activeMonth, day)) {
+    return [activeYearAttrs.value.class];
+  }
+}
+
+function isSelectedMonth(month) {
+  return isSameMonth(month, localSelectedDate.value);
+}
+
+function onClickMonth(month) {
+  emit("input", month);
+}
+</script>

package/ui.form-calendar/composables/attrs.composable.js

@@ -0,0 +1,87 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export default function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const navigationAttrs = getAttrs("navigation");
+  const navigationSwitchViewButtonAttrs = getAttrs("navigationSwitchViewButton");
+  const dayViewSwitchLabelAttrs = getAttrs("dayViewSwitchLabel");
+  const dayViewSwitchLabelMonthAttrs = getAttrs("dayViewSwitchLabelMonth");
+  const dayViewSwitchLabelIconAttrs = getAttrs("dayViewSwitchLabelIcon");
+  const nextPrevButtonAttrs = getAttrs("nextPrevButton");
+  const nextIconAttrs = getAttrs("nextIcon");
+  const prevIconAttrs = getAttrs("prevIcon");
+  const dayViewWrapperAttrs = getAttrs("dayViewWrapper");
+  const weekDaysWrapperAttrs = getAttrs("weekDaysWrapper");
+  const weekDayAttrs = getAttrs("weekDay");
+  const daysWrapperAttrs = getAttrs("daysWrapper");
+  const activeDayAttrs = getAttrs("activeDay");
+  const selectedDayAttrs = getAttrs("selectedDay");
+  const currentDayAttrs = getAttrs("currentDay");
+  const anotherMonthDayAttrs = getAttrs("anotherMonthDay");
+  const monthViewWrapperAttrs = getAttrs("monthViewWrapper");
+  const selectedMonthAttrs = getAttrs("selectedMonth");
+  const activeMonthAttrs = getAttrs("activeMonth");
+  const yearViewWrapperAttrs = getAttrs("yearViewWrapper");
+  const selectedYearAttrs = getAttrs("selectedYear");
+  const activeYearAttrs = getAttrs("activeYear");
+  const timepickerWrapperAttrs = getAttrs("timepickerWrapper");
+  const timepickerLabelAttrs = getAttrs("timepickerLabel");
+  const timepickerInputWrapperAttrs = getAttrs("timepickerInputWrapper");
+  const timepickerLeftInputAttrs = getAttrs("timepickerLeftInput");
+  const timepickerRightInputAttrs = getAttrs("timepickerRightInput");
+  const submitButtonAttrs = getAttrs("submitButton");
+  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper");
+
+  const dayAttrs = (classes = []) => {
+    return getAttrs("day", { classes }).value;
+  };
+
+  const monthAttrs = (classes = []) => {
+    return getAttrs("month", { classes }).value;
+  };
+
+  const yearAttrs = (classes = []) => {
+    return getAttrs("year", { classes }).value;
+  };
+
+  return {
+    config,
+    wrapperAttrs,
+    navigationAttrs,
+    navigationSwitchViewButtonAttrs,
+    dayViewSwitchLabelAttrs,
+    dayViewSwitchLabelMonthAttrs,
+    dayViewSwitchLabelIconAttrs,
+    nextIconAttrs,
+    nextPrevButtonAttrs,
+    prevIconAttrs,
+    dayViewWrapperAttrs,
+    weekDaysWrapperAttrs,
+    weekDayAttrs,
+    daysWrapperAttrs,
+    activeDayAttrs,
+    selectedDayAttrs,
+    currentDayAttrs,
+    anotherMonthDayAttrs,
+    dayAttrs,
+    monthViewWrapperAttrs,
+    selectedMonthAttrs,
+    activeMonthAttrs,
+    monthAttrs,
+    yearViewWrapperAttrs,
+    selectedYearAttrs,
+    activeYearAttrs,
+    yearAttrs,
+    timepickerWrapperAttrs,
+    timepickerLabelAttrs,
+    timepickerInputWrapperAttrs,
+    timepickerLeftInputAttrs,
+    timepickerRightInputAttrs,
+    submitButtonAttrs,
+    nextPrevWrapperAttrs,
+  };
+}

package/ui.form-calendar/configs/default.config.js

@@ -0,0 +1,115 @@
+export default /*tw*/ {
+  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-gray-300 bg-white px-1 pb-4 shadow",
+  navigation: "flex items-center justify-between px-3 pt-2",
+  navigationSwitchViewButton: "",
+  dayViewSwitchLabel: "flex gap-1",
+  dayViewSwitchLabelMonth: "text-gray-900",
+  dayViewSwitchLabelIcon: "",
+  dayViewSwitchLabelIconName: "keyboard_arrow_right",
+  nextPrevWrapper: "flex",
+  nextPrevButton: "",
+  nextIcon: "",
+  nextIconName: "keyboard_arrow_right",
+  prevIcon: "",
+  prevIconName: "keyboard_arrow_left",
+  dayViewWrapper: "w-64 px-3 pt-2",
+  weekDaysWrapper: "grid grid-cols-7",
+  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
+  daysWrapper: "grid grid-cols-7",
+  day: "mx-auto size-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  activeDay: "bg-gray-100 hover:bg-gray-100",
+  selectedDay: "bg-gray-900 text-white hover:bg-gray-900",
+  currentDay: "hover:bg-gray-100 border-2 border-gray-900",
+  anotherMonthDay: "hover:bg-gray-100 text-gray-400",
+  monthViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
+  month: `
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `,
+  selectedMonth: "bg-gray-900 hover:bg-gray-900 text-white",
+  activeMonth: "bg-gray-100",
+  yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
+  year: `
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100 
+    disabled:opacity-50 disabled:cursor-not-allowed
+  `,
+  selectedYear: "bg-gray-900 hover:bg-gray-900 text-white",
+  activeYear: "bg-gray-100",
+  timepickerWrapper: `
+  mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-gray-200 pl-2 pr-1 pt-3 text-sm
+  `,
+  timepickerLabel: "w-full",
+  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-gray-300",
+  timepickerLeftInput: `
+    w-11 rounded-l-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
+  `,
+  timepickerRightInput: `
+    w-11 rounded-r-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
+  `,
+  submitButton: `
+    rounded-lg border-none bg-gray-900/10 px-2.5 py-1.5 text-sm font-normal text-gray-900 outline-none
+    focus:ring-0 hover:bg-gray-900/10
+  `,
+  i18n: {
+    weekdays: {
+      shorthand: {
+        sunday: "Sun",
+        monday: "Mon",
+        tuesday: "Tue",
+        wednesday: "Wed",
+        thursday: "Thu",
+        friday: "Fri",
+        saturday: "Sat",
+      },
+      longhand: {
+        sunday: "Sunday",
+        monday: "Monday",
+        tuesday: "Tuesday",
+        wednesday: "Wednesday",
+        thursday: "Thursday",
+        friday: "Friday",
+        saturday: "Saturday",
+      },
+    },
+    months: {
+      shorthand: {
+        january: "Jan",
+        february: "Feb",
+        march: "Mar",
+        april: "Apr",
+        may: "May",
+        june: "Jun",
+        july: "Jul",
+        august: "Aug",
+        september: "Sep",
+        october: "Oct",
+        november: "Nov",
+        december: "Dec",
+      },
+      longhand: {
+        january: "January",
+        february: "February",
+        march: "March",
+        april: "April",
+        may: "May",
+        june: "June",
+        july: "July",
+        august: "August",
+        september: "September",
+        october: "October",
+        november: "November",
+        december: "December",
+      },
+    },
+    timeLabel: "Time",
+    okLabel: "Ok",
+  },
+  defaultVariants: {
+    dateFormat: "Y-m-d",
+    userFormat: "F j, Y",
+    range: false,
+    timepicker: false,
+    maxDate: undefined,
+    minDate: undefined,
+  },
+};