@firstnoodle-ui/bui 0.0.28 → 0.0.29

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

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

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

@@ -1,72 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-<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

@@ -1,138 +0,0 @@
-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

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

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

@@ -1,31 +0,0 @@
-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

@@ -1,240 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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}`;
-};