@firstnoodle-ui/bui 0.0.27 → 0.0.28

package/src/components/calendar-view/components/MonthView.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { CalendarGridItem } from "../utils/types";
+import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter";
+import { BButton } from "../../button";
+import { TimeUnit } from "../utils/utils/time";
+import DateButton from "./DateButton.vue";
+
+defineProps<{
+  viewData: CalendarGridItem[];
+  currentMonth: string;
+  currentYear: number;
+  weekdays: string[];
+}>();
+
+const emit = defineEmits(["move", "change-view", "select"]);
+</script>
+
+<template>
+  <div>
+    <nav class="w-56 grid grid-cols-7">
+      <BButton
+        variant="textSubtle"
+        icon="chevron-left-double"
+        @click="emit('move', { amount: -1, unit: TimeUnit.YEAR })"
+      />
+      <BButton
+        variant="textSubtle"
+        icon="chevron-left"
+        @click="emit('move', { amount: -1, unit: TimeUnit.MONTH })"
+      />
+      <div class="col-span-3 h-8 flex items-center justify-center">
+        <BButton
+          variant="textSubtle"
+          :label="capitalizeFirstLetter(currentMonth.slice(0, 3))"
+          @click="emit('change-view', TimeUnit.YEAR)"
+        />
+        <BButton
+          variant="textSubtle"
+          :label="currentYear.toString()"
+          @click="emit('change-view', TimeUnit.DECADE)"
+        />
+      </div>
+      <BButton
+        variant="textSubtle"
+        icon="chevron-right"
+        @click="emit('move', { amount: 1, unit: TimeUnit.MONTH })"
+      />
+      <BButton
+        variant="textSubtle"
+        icon="chevron-right-double"
+        @click="emit('move', { amount: 1, unit: TimeUnit.YEAR })"
+      />
+    </nav>
+    <header class="w-56 grid grid-cols-7 bg-bg-medium rounded my-2">
+      <div
+        v-for="day in weekdays"
+        :key="day"
+        class="flex items-center justify-center w-8 h-6 text-muted text-xs select-none"
+      >
+        {{ day.slice(0, 1).toUpperCase() }}
+      </div>
+    </header>
+    <main class="w-56 grid grid-cols-7">
+      <DateButton
+        v-for="dateItem in viewData"
+        :key="dateItem.date"
+        :date="dateItem"
+        @click="emit('select', dateItem)"
+      />
+    </main>
+  </div>
+</template>

package/src/components/calendar-view/components/NavButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { TIcon } from "../../types";
+import { BButton } from "../../button";
+
+defineProps<{ icon: TIcon }>();
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <BButton
+    :icon="icon"
+    variant="textSubtle"
+    @click="emit('click')"
+  />
+</template>

package/src/components/calendar-view/components/YearView.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { CalendarGridItem } from "../utils/types";
+import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter";
+import { BButton } from "../../button";
+import { TimeUnit } from "../utils/utils/time";
+
+defineProps<{
+  viewData: CalendarGridItem[];
+  currentYear: number;
+}>();
+const emit = defineEmits(["move", "select"]);
+</script>
+
+<template>
+  <div>
+    <nav class="w-56 grid grid-cols-7">
+      <BButton
+        icon="chevron-left"
+        variant="textSubtle"
+        @click="emit('move', { amount: -1, unit: 'YEAR' })"
+      />
+      <div
+        class="col-span-5 text-sm flex justify-center items-center"
+      >
+        {{ currentYear }}
+      </div>
+      <BButton
+        icon="chevron-right"
+        variant="textSubtle"
+        @click="emit('move', { amount: 1, unit: 'YEAR' })"
+      />
+    </nav>
+    <main class="w-56 grid grid-cols-2 py-4">
+      <BButton
+        v-for="(month, monthIndex) in viewData"
+        :key="month.label"
+        :variant="month.selected ? 'fill' : (month.current ? 'text' : 'textSubtle')"
+        :label="capitalizeFirstLetter(month.label.toString())"
+        @click="
+          emit(
+            'select',
+            {
+              value: monthIndex,
+              unit: TimeUnit.MONTH,
+              view: TimeUnit.MONTH,
+            },
+          )
+        "
+      />
+    </main>
+  </div>
+</template>

package/src/components/calendar-view/composables/useCalendar.ts

@@ -0,0 +1,138 @@
+import type { Direction } from "../utils/enums";
+import type { CalendarGridItem, CalendarOptions } from "../utils/types";
+import { onBeforeMount, ref } from "vue";
+import { Calendar } from "../utils";
+import { TimeUnit } from "../utils/utils/time";
+
+export enum ViewType {
+  DATE = TimeUnit.DAY,
+  WEEK = TimeUnit.WEEK,
+  MONTH = TimeUnit.MONTH,
+  YEAR = TimeUnit.YEAR,
+  DECADE = TimeUnit.DECADE,
+}
+
+export const useCalendar = (value: string | Date | null = null, options: CalendarOptions) => {
+
+  const calendar = new Calendar(options, value);
+  const viewData = ref<CalendarGridItem[] | []>([]);
+  const viewType = ref<ViewType>(ViewType.MONTH);
+  const viewMonth = ref<string>("");
+  const viewYear = ref<number>(0);
+
+  const changeView = (type: ViewType): void => {
+    if (!Object.keys(ViewType).includes(type)) {
+      console.warn(`[changeView] wrong view type: ${type}`);
+      return;
+    }
+
+    viewType.value = type;
+
+    switch (type) {
+      case ViewType.DATE:
+        // TODO
+        break;
+      case ViewType.WEEK:
+        viewData.value = calendar.getDatesInCurrentWeek();
+        break;
+      case ViewType.MONTH:
+        viewData.value = calendar.getDatesInCurrentMonth();
+        break;
+      case ViewType.YEAR:
+        viewData.value = calendar.getMonthsInCurrentYear();
+        break;
+      case ViewType.DECADE:
+        viewData.value = calendar.getYearsInCurrentDecade();
+        break;
+    }
+  };
+
+  const updateView = () => {
+    changeView(viewType.value);
+    viewMonth.value = calendar.getDateCursorMonthName();
+    viewYear.value = calendar.dateCursor!.getUTCFullYear();
+  };
+
+  const setSelectedDate = (date: string | Date | null): void => {
+    calendar.setSelectedDate(date);
+    updateView();
+  };
+
+  onBeforeMount(() => {
+    setSelectedDate(value);
+    changeView(viewType.value);
+  });
+
+  const moveRequest = (direction: Direction, keepCurrentView: boolean = false) => {
+    // TODO: create eventListener for calendar
+    calendar.moveSelectedDate(direction);
+
+    // change back to DateView (if on month or year)
+    if (!keepCurrentView && viewType.value !== ViewType.MONTH) {
+      changeView(ViewType.DATE);
+    }
+    else {
+      updateView();
+    }
+  };
+
+  /**
+   * Move viewDate (or parts of viewDate: date, month, year) by specified amount
+   */
+  const moveViewDate = ({ amount, unit }: { amount: number; unit: TimeUnit }): void => {
+    switch (unit) {
+      case TimeUnit.DAY:
+        calendar.addDaysToDateCursor(amount);
+        break;
+      case TimeUnit.WEEK:
+        calendar.addWeeksToDateCursor(amount);
+        break;
+      case TimeUnit.MONTH:
+        calendar.addMonthsToDateCursor(amount);
+        break;
+      case TimeUnit.YEAR:
+        calendar.addYearsToDateCursor(amount);
+        break;
+      default:
+        throw new Error(`[moveViewDate] unknown unit: ${unit}`);
+    }
+    updateView();
+  };
+
+  const setViewDate = (value: number, unit: TimeUnit): void => {
+    switch (unit) {
+      case TimeUnit.DAY:
+        calendar.setDateCursorDate(value);
+        break;
+      case TimeUnit.MONTH:
+        calendar.setDateCursorMonth(value);
+        break;
+      case TimeUnit.YEAR:
+        calendar.setDateCursorYear(value);
+        break;
+      default:
+        console.error(`[setViewDate] unknown unit: ${unit}`);
+        return;
+    }
+    updateView();
+  };
+
+  const setViewDateAndChangeView = ({ value, unit, view }: { value: number; unit: TimeUnit; view: ViewType }): void => {
+    setViewDate(value, unit);
+    changeView(view);
+  };
+
+  return {
+    selectedDate: calendar.selectedDate,
+    viewData,
+    viewType,
+    viewMonth,
+    viewYear,
+    changeView,
+    moveRequest,
+    moveViewDate,
+    setSelectedDate,
+    setViewDate,
+    setViewDateAndChangeView,
+  };
+};

package/src/components/calendar-view/index.ts

@@ -0,0 +1 @@
+export { default as BCalendarView } from "./CalendarView.vue";

package/src/components/calendar-view/utils/enums.ts

@@ -0,0 +1,31 @@
+export enum Month {
+  JANUARY = "january",
+  FEBRUARY = "february",
+  MARCH = "march",
+  APRIL = "april",
+  MAY = "may",
+  JUNE = "june",
+  JULY = "july",
+  AUGUST = "august",
+  SEPTEMBER = "september",
+  OCTOBER = "october",
+  NOVEMBER = "november",
+  DECEMBER = "december",
+};
+
+export enum Weekday {
+  SUNDAY = "sunday",
+  MONDAY = "monday",
+  TUESDAY = "tuesday",
+  WEDNESDAY = "wednesday",
+  THURSDAY = "thursday",
+  FRIDAY = "friday",
+  SATURDAY = "saturday",
+};
+
+export enum Direction {
+  UP = "up",
+  DOWN = "down",
+  LEFT = "left",
+  RIGHT = "right",
+};

package/src/components/calendar-view/utils/index.ts

@@ -0,0 +1,240 @@
+import type { CalendarGridItem, CalendarOptions } from "./types.ts";
+import { loopRange } from "../../../utils/array.ts";
+import { Direction, Month, Weekday } from "./enums.ts";
+import { datesAreEqual, getDecade, moveDate, parseDate } from "./utils/date";
+import { TimeUnit } from "./utils/time";
+
+const COLUMN_COUNT: number = 7;
+const ROW_COUNT: number = 6;
+const CELL_COUNT: number = COLUMN_COUNT * ROW_COUNT;
+
+export class Calendar {
+  options: CalendarOptions;
+  today: Date;
+  selectedDate: Date | null;
+  dateCursor: Date | null;
+
+  constructor(options: CalendarOptions, date: string | Date | null = null) {
+    this.options = options;
+    if (!("weekstart" in options)) {
+      this.options.weekStart = Object.values(Weekday).indexOf(Weekday.MONDAY);
+    }
+
+    const d = new Date();
+    this.today = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()));
+    this.selectedDate = null;
+    this.dateCursor = null;
+    // this.dateCursor = this.today
+
+    if (date) {
+      try {
+        const parsedDate = parseDate(date);
+        this.setSelectedDate(parsedDate);
+      }
+      catch (error) {
+        console.error(error);
+      }
+    }
+    else {
+      this.setSelectedDate(this.today);
+    }
+  }
+
+  addDaysToDateCursor(days: number): void {
+    this.dateCursor!.setUTCDate(this.dateCursor!.getUTCDate() + days);
+  }
+
+  addWeeksToDateCursor(weeks: number): void {
+    this.addDaysToDateCursor(weeks * 7);
+  }
+
+  addMonthsToDateCursor(months: number): void {
+    const currentMonth = this.dateCursor!.getUTCMonth();
+    const requestedMonth = loopRange(currentMonth + months, Object.values(Month).length);
+
+    // TODO: revisit this - it doesn't seem to be the right solution..
+    // change year ?
+    const deltaMonths = currentMonth - requestedMonth;
+    if (Math.abs(deltaMonths) > 1) {
+      if (deltaMonths >= 0) {
+        this.addYearsToDateCursor(1);
+      }
+      else {
+        this.addYearsToDateCursor(-1);
+      }
+    }
+    this.dateCursor!.setUTCMonth(requestedMonth);
+  }
+
+  addYearsToDateCursor(years: number): void {
+    this.dateCursor!.setFullYear(this.dateCursor!.getUTCFullYear() + years);
+  }
+
+  getDatesInCurrentMonth(): CalendarGridItem[] {
+    const cursor = new Date(
+      Date.UTC(
+        this.dateCursor!.getUTCFullYear(),
+        this.dateCursor!.getUTCMonth(),
+        1,
+      ),
+    );
+
+    // find and set calendar grid start date
+    const startDate = !(cursor.getUTCDay() - this.options.weekStart!)
+      ? 7
+      : loopRange(
+          cursor.getUTCDay() - this.options.weekStart!,
+          Object.values(Weekday).length,
+        );
+
+    cursor.setUTCDate(cursor.getUTCDate() - startDate);
+
+    const dates: CalendarGridItem[] = [];
+
+    for (let row = 0; row < CELL_COUNT; row++) {
+      dates.push({
+        label: cursor.getUTCDate(),
+        date: cursor.toUTCString(),
+        disabled: this.options.disabledDates
+          ? this.options.disabledDates.some(fn => fn(cursor))
+          : false,
+        inactive: cursor.getUTCMonth() !== this.dateCursor!.getUTCMonth(),
+        selected: Boolean(this.selectedDate) && datesAreEqual(cursor, this.selectedDate as Date),
+        current: datesAreEqual(cursor, this.today),
+      });
+      cursor.setUTCDate(cursor.getUTCDate() + 1);
+    }
+    return dates;
+  }
+
+  getDatesInCurrentWeek(): CalendarGridItem[] {
+    // TODO
+    let cursor = new Date(
+      Date.UTC(
+        this.dateCursor!.getUTCFullYear(),
+        this.dateCursor!.getUTCMonth(),
+        this.dateCursor!.getUTCDate(),
+      ),
+    );
+    const offset = loopRange(
+      cursor.getUTCDay() - this.options.weekStart!,
+      Object.values(Weekday).length,
+    );
+    cursor = moveDate(cursor, -offset, TimeUnit.DAY);
+
+    const dates: CalendarGridItem[] = [];
+    // populate grid
+    for (let i = 0; i < 7; i++) {
+      dates.push({
+        label: cursor.getUTCDate(),
+        date: cursor.toUTCString(),
+        disabled: this.options.disabledDates
+          ? this.options.disabledDates.some(fn => fn(cursor))
+          : false,
+        inactive:
+                    cursor.getUTCMonth() !== this.dateCursor!.getUTCMonth(),
+        selected: Boolean(this.selectedDate) && datesAreEqual(cursor, this.selectedDate as Date),
+        current: datesAreEqual(cursor, this.today),
+      });
+      cursor.setUTCDate(cursor.getUTCDate() + 1);
+    }
+    return dates;
+  }
+
+  getMonthsInCurrentYear(): CalendarGridItem[] {
+    const monthList: CalendarGridItem[] = [];
+
+    for (const [index, month] of Object.values(Month).entries()) {
+      monthList.push({
+        label: month,
+        current:
+                    index === this.today.getUTCMonth()
+                    && this.dateCursor!.getUTCFullYear()
+                    === this.today.getUTCFullYear(),
+      });
+    }
+    return monthList;
+  }
+
+  getDateCursorMonthName(): string {
+    return Object.values(Month)[this.dateCursor!.getUTCMonth()];
+  }
+
+  getYearsInCurrentDecade(): CalendarGridItem[] {
+    const yearGrid: CalendarGridItem[] = [];
+
+    const decade = getDecade(this.dateCursor as Date);
+
+    // TODO: use array range
+    for (const digit of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
+      const year = decade + digit;
+      yearGrid.push({
+        label: year,
+        current: this.today.getUTCFullYear() === year,
+      });
+    }
+    return yearGrid;
+  }
+
+  moveSelectedDate(direction: Direction): void {
+    let tempDate = new Date(
+      Date.UTC(
+        this.selectedDate!.getUTCFullYear(),
+        this.selectedDate!.getUTCMonth(),
+        this.selectedDate!.getUTCDate(),
+      ),
+    );
+    switch (direction) {
+      case Direction.UP:
+        tempDate = moveDate(tempDate, -7, TimeUnit.DAY);
+        break;
+      case Direction.DOWN:
+        tempDate = moveDate(tempDate, 7, TimeUnit.DAY);
+        break;
+      case Direction.LEFT:
+        tempDate = moveDate(tempDate, -1, TimeUnit.DAY);
+        break;
+      case Direction.RIGHT:
+        tempDate = moveDate(tempDate, 1, TimeUnit.DAY);
+        break;
+      default:
+        throw new Error(`Direction [${direction}] not accepted`);
+    }
+
+    if (this.options.disabledDates && this.options.disabledDates.some(fn => fn(tempDate))) {
+      return;
+    }
+
+    this.setSelectedDate(tempDate);
+  }
+
+  setSelectedDate(date: string | Date | null): void {
+    if (date) {
+      this.selectedDate = parseDate(date);
+      this.dateCursor = new Date(
+        Date.UTC(
+          this.selectedDate!.getUTCFullYear(),
+          this.selectedDate!.getUTCMonth(),
+          this.selectedDate!.getUTCDate(),
+        ),
+      );
+    }
+    else {
+      this.selectedDate = null;
+      this.dateCursor = new Date();
+    }
+
+  }
+
+  setDateCursorDate(date: number): void {
+    this.dateCursor!.setUTCDate(date);
+  }
+
+  setDateCursorMonth(month: number): void {
+    this.dateCursor!.setUTCMonth(month);
+  }
+
+  setDateCursorYear(year: number): void {
+    this.dateCursor!.setFullYear(year);
+  }
+}

package/src/components/calendar-view/utils/types.ts

@@ -0,0 +1,13 @@
+export type CalendarOptions = {
+  weekStart?: number;
+  disabledDates?: ((date: Date) => boolean)[] | any[];
+};
+
+export type CalendarGridItem = {
+  label: number | string;
+  current: boolean;
+  date?: string;
+  disabled?: boolean;
+  inactive?: boolean;
+  selected?: boolean;
+};

package/src/components/calendar-view/utils/utils/calendar.ts

@@ -0,0 +1,70 @@
+import { range } from "../../../../utils/array";
+import { Weekday } from "../enums";
+import { parseDate } from "./date";
+
+/**
+ * Premade disable-function to disable weekend (saturday and sunday)
+ */
+export const isWeekend = (date: string | Date): boolean | null => {
+  const parsedDate = parseDate(date);
+  if (!parsedDate) return null;
+  const dayIndex: number = parsedDate.getUTCDay();
+  return dayIndex === 0 || dayIndex === 6;
+};
+
+/**
+ * Premade disable-function to disable workdays (monday - friday)
+ */
+export const disableWorkDays = (date: string | Date): boolean | null => {
+  const parsedDate = parseDate(date);
+
+  if (!parsedDate) return null;
+
+  const dayIndex = parsedDate.getUTCDay();
+  const weekDays: number[] = range(1, 5);
+  return weekDays.includes(dayIndex);
+};
+
+/**
+ * Get index of weekday - fx 3 for 'wednesday'
+ */
+export const getWeekdayIndex = (weekDayString: string): number => {
+  const weekdays = Object.values(Weekday) as string[];
+
+  if (!weekdays.includes(weekDayString.toLowerCase())) {
+    throw new Error(`Invalid weekday [${weekDayString}]`);
+  }
+
+  return weekdays.indexOf(weekDayString);
+};
+
+/**
+ * Premade disable-function to disable specific weekDay
+ * Accepts both an integer 0-6 or a string fx 'monday'
+ */
+export const disableWeekday = (weekDay: number | string): (date: string | Date) => boolean | null => {
+  let dayIndex: number | null;
+
+  if (typeof weekDay === "string") {
+    dayIndex = getWeekdayIndex(weekDay);
+  }
+  else {
+    dayIndex = weekDay;
+  }
+
+  return (date: string | Date): boolean | null => {
+    const parsedDate = parseDate(date);
+    if (!parsedDate) return null;
+    return parsedDate.getUTCDay() === dayIndex;
+  };
+};
+
+/**
+ * Return the weekday from a date string or object
+ * Monday
+ */
+export const getWeekday = (value: string | Date): string => {
+  const d = new Date(value);
+  const day = new Intl.DateTimeFormat("en-001", { weekday: "long" }).format(d);
+  return `${day}`;
+};