vueless 0.0.1

package/library.vue-tailwind-3/TDatepicker/components/t-datepicker-views-view-calendar-days-day.js

@@ -0,0 +1,289 @@
+import { h } from "vue";
+import {
+  dayIsPartOfTheConditions,
+  dateIsOutOfRange,
+  isSameDay,
+  addDays,
+} from "../../services/date.service";
+
+const TDatepickerViewsViewCalendarDaysDay = {
+  name: "TDatepickerViewsViewCalendarDaysDay",
+
+  emits: ["click"],
+
+  props: {
+    day: {
+      type: Date,
+      required: true,
+    },
+    value: {
+      type: [Date, Array],
+      default: null,
+    },
+    activeDate: {
+      type: Date,
+      required: true,
+    },
+    activeMonth: {
+      type: Date,
+      required: true,
+    },
+    getElementCssClass: {
+      type: Function,
+      required: true,
+    },
+    parse: {
+      type: Function,
+      required: true,
+    },
+    format: {
+      type: Function,
+      required: true,
+    },
+    formatNative: {
+      type: Function,
+      required: true,
+    },
+    dateFormat: {
+      type: String,
+      required: true,
+    },
+    userFormat: {
+      type: String,
+      required: true,
+    },
+    showDaysForOtherMonth: {
+      type: Boolean,
+      required: true,
+    },
+    showActiveDate: {
+      type: Boolean,
+      required: true,
+    },
+    disabledDates: {
+      type: [Date, Array, Function, String],
+      default: undefined,
+    },
+    highlightDates: {
+      type: [Date, Array, Function, String],
+      default: undefined,
+    },
+    maxDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    minDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    range: {
+      type: Boolean,
+      required: true,
+    },
+    dateWithoutTime: {
+      type: Date,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      localActiveDate: new Date(this.activeDate.valueOf()),
+      localActiveMonth: new Date(this.activeMonth.valueOf()),
+    };
+  },
+
+  computed: {
+    isSelected() {
+      const d1 = this.getDay();
+      const d2 = this.getSelectedDay();
+
+      if (d2 instanceof Date) {
+        return isSameDay(d1, d2);
+      }
+
+      if (Array.isArray(d2)) {
+        return d2.some((d) => isSameDay(d, d1));
+      }
+
+      return false;
+    },
+    isActive() {
+      const d1 = this.getDay();
+      const d2 = this.localActiveDate;
+
+      return isSameDay(d1, d2);
+    },
+    isToday() {
+      const d1 = this.getDay();
+      const d2 = new Date();
+
+      return isSameDay(d1, d2);
+    },
+    isDisabled() {
+      const day = this.getDay();
+      const disabledDates = this.disabledDates;
+      const dateParser = this.parse;
+
+      return (
+        dateIsOutOfRange(day, this.minDate, this.maxDate, dateParser, this.dateFormat) ||
+        dayIsPartOfTheConditions(day, disabledDates, dateParser, this.dateFormat)
+      );
+    },
+    isHighlighted() {
+      const day = this.getDay();
+      const highlightDates = this.highlightDates;
+      const dateParser = this.parse;
+
+      return dayIsPartOfTheConditions(day, highlightDates, dateParser, this.dateFormat);
+    },
+    isForAnotherMonth() {
+      const d1 = this.localActiveMonth;
+      const d2 = this.getDay();
+
+      return d1.getFullYear() !== d2.getFullYear() || d1.getMonth() !== d2.getMonth();
+    },
+    isInRange() {
+      if (!this.range || !Array.isArray(this.value)) {
+        return false;
+      }
+
+      const [from, to] = this.value;
+
+      if (from && to) {
+        return !dateIsOutOfRange(this.getDay(), addDays(from, 1), addDays(to, -1));
+      }
+
+      return false;
+    },
+    isFirstDayOfRange() {
+      if (!this.range || !Array.isArray(this.value)) {
+        return false;
+      }
+
+      const [from] = this.value;
+
+      return from && isSameDay(from, this.getDay());
+    },
+    isLastDayOfRange() {
+      if (!this.range || !Array.isArray(this.value)) {
+        return false;
+      }
+
+      const [, to] = this.value;
+
+      return to && isSameDay(to, this.getDay());
+    },
+    dayFormatted() {
+      return this.formatNative(this.getDay(), "j");
+    },
+    ariaLabel() {
+      return this.format(this.getDay(), this.userFormat);
+    },
+    dateFormatted() {
+      return this.format(this.getDay(), "Y-m-d");
+    },
+  },
+
+  watch: {
+    activeDate(activeDate) {
+      this.localActiveDate = new Date(activeDate.valueOf());
+    },
+    activeMonth(activeMonth) {
+      this.localActiveMonth = new Date(activeMonth.valueOf());
+    },
+  },
+
+  methods: {
+    getClass() {
+      if (this.isForAnotherMonth) {
+        return this.getElementCssClass("otherMonthDay");
+      }
+
+      if (this.isFirstDayOfRange) {
+        return this.getElementCssClass("inRangeFirstDay");
+      }
+
+      if (this.isLastDayOfRange) {
+        return this.getElementCssClass("inRangeLastDay");
+      }
+
+      if (this.isInRange) {
+        return this.getElementCssClass("inRangeDay");
+      }
+
+      if (this.isSelected) {
+        return this.getElementCssClass("selectedDay");
+      }
+
+      if (this.isActive && this.showActiveDate) {
+        return this.getElementCssClass("activeDay");
+      }
+
+      if (this.isHighlighted) {
+        return this.getElementCssClass("highlightedDay");
+      }
+
+      if (this.isToday) {
+        return this.getElementCssClass("today");
+      }
+
+      return this.getElementCssClass("day");
+    },
+    getDay() {
+      return this.day;
+    },
+    getSelectedDay() {
+      if (this.dateWithoutTime !== null) {
+        return this.dateWithoutTime;
+      }
+
+      return this.value;
+    },
+  },
+  render() {
+    if (this.isForAnotherMonth && !this.showDaysForOtherMonth) {
+      return h(
+        "span",
+        {
+          class: this.getElementCssClass("emptyDay"),
+        },
+        "",
+      );
+    }
+
+    const daySlot = this.$slots.day
+      ? this.$slots.day({
+          dayFormatted: this.dayFormatted,
+          isForAnotherMonth: this.isForAnotherMonth,
+          isFirstDayOfRange: this.isFirstDayOfRange,
+          isLastDayOfRange: this.isLastDayOfRange,
+          isInRange: this.isInRange,
+          isSelected: this.isSelected,
+          isActive: this.isActive,
+          isHighlighted: this.isHighlighted,
+          isToday: this.isToday,
+          day: this.getDay(),
+          activeDate: this.activeDate,
+          value: this.value,
+        })
+      : this.dayFormatted;
+
+    return h(
+      "button",
+      {
+        class: this.getClass(),
+        "aria-label": this.ariaLabel,
+        "aria-current": this.isToday ? "date" : undefined,
+        "data-date": this.dateFormatted,
+        type: "button",
+        tabindex: -1,
+        disabled: this.isDisabled ? true : undefined,
+        onClick: (e) => this.$emit("click", e),
+      },
+      daySlot,
+    );
+  },
+};
+
+export default TDatepickerViewsViewCalendarDaysDay;

package/library.vue-tailwind-3/TDatepicker/components/t-datepicker-views-view-calendar-days.js

@@ -0,0 +1,236 @@
+import { h } from "vue";
+import { lastDayOfMonth } from "../../services/date.service";
+import TDatepickerViewsViewCalendarDaysDay from "./t-datepicker-views-view-calendar-days-day";
+
+const TDatepickerViewsViewCalendarDays = {
+  name: "TDatepickerViewsViewCalendarDays",
+
+  emits: ["input-date", "input"],
+
+  props: {
+    value: {
+      type: [Date, Array],
+      default: null,
+    },
+    activeDate: {
+      type: Date,
+      required: true,
+    },
+    activeMonth: {
+      type: Date,
+      required: true,
+    },
+    weekStart: {
+      type: Number,
+      required: true,
+    },
+    getElementCssClass: {
+      type: Function,
+      required: true,
+    },
+    parse: {
+      type: Function,
+      required: true,
+    },
+    format: {
+      type: Function,
+      required: true,
+    },
+    formatNative: {
+      type: Function,
+      required: true,
+    },
+    userFormat: {
+      type: String,
+      required: true,
+    },
+    dateFormat: {
+      type: String,
+      required: true,
+    },
+    showDaysForOtherMonth: {
+      type: Boolean,
+      required: true,
+    },
+    showActiveDate: {
+      type: Boolean,
+      required: true,
+    },
+    disabledDates: {
+      type: [Date, Array, Function, String],
+      default: undefined,
+    },
+    highlightDates: {
+      type: [Date, Array, Function, String],
+      default: undefined,
+    },
+    maxDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    minDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    range: {
+      type: Boolean,
+      required: true,
+    },
+    timepicker: {
+      type: Boolean,
+      required: true,
+    },
+    dateWithoutTime: {
+      type: Date,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      localActiveDate: new Date(this.activeDate.valueOf()),
+      localActiveMonth: new Date(this.activeMonth.valueOf()),
+    };
+  },
+
+  computed: {
+    firstDayOfMonth() {
+      const localActiveDate = new Date(this.localActiveMonth.valueOf());
+
+      localActiveDate.setDate(1);
+
+      return localActiveDate;
+    },
+    lastDayOfMonth() {
+      return lastDayOfMonth(this.localActiveMonth);
+    },
+    firstDayOfPrevMonth() {
+      return new Date(this.localActiveMonth.getFullYear(), this.localActiveMonth.getMonth() - 1, 1);
+    },
+    lastDayOfPrevMonth() {
+      const localActiveDate = new Date(this.localActiveMonth.valueOf());
+
+      localActiveDate.setDate(0);
+
+      return localActiveDate;
+    },
+    firstDayOfNextMonth() {
+      const localActiveDate = new Date(this.localActiveMonth.valueOf());
+
+      localActiveDate.setDate(1);
+      localActiveDate.setMonth(this.localActiveMonth.getMonth() + 1);
+
+      return localActiveDate;
+    },
+    monthDays() {
+      return Array.from({ length: this.lastDayOfMonth.getDate() }, (_x, i) => i + 1).map((day) =>
+        this.getDay(this.localActiveMonth, day),
+      );
+    },
+    prevMonthDays() {
+      let prevMonthTotalDays = this.firstDayOfMonth.getDay() - this.weekStart;
+
+      if (prevMonthTotalDays < 0) {
+        prevMonthTotalDays = 7 + prevMonthTotalDays;
+      }
+
+      return Array.from(
+        { length: prevMonthTotalDays },
+        (_x, i) => this.lastDayOfPrevMonth.getDate() - i,
+      )
+        .reverse()
+        .map((day) => this.getDay(this.firstDayOfPrevMonth, day));
+    },
+    nextMonthDays() {
+      const nextMonthTotalDays = 7 - (this.monthDays.concat(this.prevMonthDays).length % 7);
+
+      if (nextMonthTotalDays === 7) {
+        return [];
+      }
+
+      return Array.from({ length: nextMonthTotalDays }, (_x, i) => i + 1).map((day) =>
+        this.getDay(this.firstDayOfNextMonth, day),
+      );
+    },
+    days() {
+      const { prevMonthDays } = this;
+      const { monthDays } = this;
+      const { nextMonthDays } = this;
+
+      return prevMonthDays.concat(monthDays, nextMonthDays);
+    },
+  },
+
+  watch: {
+    activeDate(activeDate) {
+      this.localActiveDate = new Date(activeDate.valueOf());
+    },
+    activeMonth(activeMonth) {
+      this.localActiveMonth = new Date(activeMonth.valueOf());
+    },
+  },
+
+  methods: {
+    getDay(date, dayNumber) {
+      const day = new Date(date.valueOf());
+
+      day.setDate(dayNumber);
+
+      return day;
+    },
+  },
+
+  render() {
+    return h(
+      "div",
+      {
+        class: this.getElementCssClass("calendarDaysWrapper"),
+      },
+      this.days.map((day) =>
+        h(
+          "span",
+          {
+            class: this.getElementCssClass("calendarDaysDayWrapper"),
+          },
+          [
+            h(
+              TDatepickerViewsViewCalendarDaysDay,
+              {
+                day,
+                value: this.value,
+                activeDate: this.localActiveDate,
+                activeMonth: this.localActiveMonth,
+                getElementCssClass: this.getElementCssClass,
+                parse: this.parse,
+                format: this.format,
+                formatNative: this.formatNative,
+                dateFormat: this.dateFormat,
+                userFormat: this.userFormat,
+                showDaysForOtherMonth: this.showDaysForOtherMonth,
+                showActiveDate: this.showActiveDate,
+                disabledDates: this.disabledDates,
+                highlightDates: this.highlightDates,
+                minDate: this.minDate,
+                maxDate: this.maxDate,
+                range: this.range,
+                dateWithoutTime: this.dateWithoutTime,
+                onClick: () => {
+                  if (this.timepicker) {
+                    this.$emit("input-date", day);
+                  } else {
+                    this.$emit("input", day);
+                  }
+                },
+              },
+              {
+                ...this.$slots,
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  },
+};
+
+export default TDatepickerViewsViewCalendarDays;

package/library.vue-tailwind-3/TDatepicker/components/t-datepicker-views-view-calendar-headers.js

@@ -0,0 +1,64 @@
+import { h } from "vue";
+
+const TDatepickerViewsViewCalendarHeaders = {
+  name: "TDatepickerViewsViewCalendarHeaders",
+
+  props: {
+    weekStart: {
+      type: Number,
+      required: true,
+    },
+    getElementCssClass: {
+      type: Function,
+      required: true,
+    },
+    formatNative: {
+      type: Function,
+      required: true,
+    },
+  },
+
+  computed: {
+    weekDays() {
+      return Array.from({ length: 7 }, (_x, i) => {
+        const weekDay = this.weekStart + i;
+
+        if (weekDay >= 7) {
+          return weekDay - 7;
+        }
+
+        return weekDay;
+      }).map(this.getWeekDayName);
+    },
+  },
+
+  methods: {
+    getWeekDayName(weekDay) {
+      const date = new Date();
+
+      date.setDate((date.getDate() + (7 + weekDay - date.getDay())) % 7);
+
+      return this.formatNative(date, "D");
+    },
+  },
+
+  render() {
+    return h(
+      "div",
+      {
+        class: this.getElementCssClass("calendarHeaderWrapper"),
+      },
+      this.weekDays.map((weekDayName) =>
+        h(
+          "span",
+          {
+            class: this.getElementCssClass("calendarHeaderWeekDay"),
+          },
+          weekDayName,
+        ),
+      ),
+    );
+  },
+};
+
+export default TDatepickerViewsViewCalendarHeaders;