vueless 0.0.3 → 0.0.4

package/src/ui.data-table-cell/composables/attrs.composable.js

@@ -0,0 +1,24 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { tableCell } = config.value;
+
+  const cvaTableCell = cva({
+    base: tableCell.base,
+    variants: tableCell.variants,
+    compoundVariants: tableCell.compoundVariants,
+  });
+
+  const tableCellClasses = computed(() => cvaTableCell({ compact: props.compact }));
+
+  const tableCellAttrs = getAttrs("tableCell", { classes: tableCellClasses });
+
+  return {
+    tableCellAttrs,
+  };
+}

package/src/ui.data-table-cell/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <td :data-cy="dataCy" v-bind="tableCellAttrs">
+    <slot />
+  </td>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UTableCell } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UTableCell", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Makes the cell more narrow.
+   */
+  compact: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTableCell).default.compact,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { tableCellAttrs } = useAttrs(props);
+</script>

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

@@ -0,0 +1,106 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import { computed } from "vue";
+
+import defaultConfig from "../configs/default.config";
+
+export default function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { nextPrevWrapper } = config.value;
+
+  const cvaNextPrevWrapper = cva({
+    base: nextPrevWrapper.base,
+    variants: nextPrevWrapper.variants,
+    compoundVariants: nextPrevWrapper.compoundVariants,
+  });
+
+  const optionClasses = computed(() => cvaNextPrevWrapper({ range: props.range }));
+
+  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 inRangeDayAttrs = getAttrs("inRangeDay");
+  const inRangeFirstDayAttrs = getAttrs("inRangeFirstDay");
+  const inRangeLastDayAttrs = getAttrs("inRangeLastDay");
+  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", { classes: optionClasses.value });
+
+  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,
+    inRangeDayAttrs,
+    inRangeFirstDayAttrs,
+    inRangeLastDayAttrs,
+    monthViewWrapperAttrs,
+    selectedMonthAttrs,
+    activeMonthAttrs,
+    monthAttrs,
+    yearViewWrapperAttrs,
+    selectedYearAttrs,
+    activeYearAttrs,
+    yearAttrs,
+    timepickerWrapperAttrs,
+    timepickerLabelAttrs,
+    timepickerInputWrapperAttrs,
+    timepickerLeftInputAttrs,
+    timepickerRightInputAttrs,
+    submitButtonAttrs,
+    nextPrevWrapperAttrs,
+  };
+}

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

@@ -0,0 +1,125 @@
+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: {
+    base: "flex",
+    variants: {
+      range: {
+        true: "justify-between items-center w-full",
+      },
+    },
+  },
+  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 w-full h-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  activeDay: "bg-gray-100 hover:bg-gray-100",
+  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900",
+  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900",
+  inRangeDay: "bg-gray-100 text-gray-900 hover:bg-gray-100 rounded-none",
+  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,
+  },
+};

package/src/ui.form-calendar/services/date.service.js

@@ -0,0 +1,282 @@
+import {
+  LOCALE_TYPE,
+  DAYS_IN_WEEK,
+  SECONDS_IN_MINUTES,
+  MILLISECONDS_IN_MINUTE,
+} from "../constants";
+
+const daysMap = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+const monthsMap = [
+  "january",
+  "february",
+  "march",
+  "april",
+  "may",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december",
+];
+
+export function minutesToSeconds(minutes) {
+  return Math.trunc(minutes * SECONDS_IN_MINUTES);
+}
+
+export function utcToGMT(date) {
+  return new Date(date.getTime() + date.getTimezoneOffset() * MILLISECONDS_IN_MINUTE);
+}
+
+export function getDaysInMonth(date) {
+  return new Date(new Date(date.valueOf()).setDate(0)).getDate();
+}
+
+export function getWeeksInMonth(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+
+  const monthIndex = date.getMonth() - 1;
+  const firstOfMonth = new Date(date.getFullYear(), monthIndex, 1);
+  const daysInMonth = getDaysInMonth(date);
+  const firstWeekDay = (firstOfMonth.getDay() - weekStartsOn + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+
+  return Math.ceil((firstWeekDay + daysInMonth) / DAYS_IN_WEEK);
+}
+
+export function getEndOfYear(date) {
+  const localDate = new Date(date.valueOf());
+  const year = localDate.getFullYear() + 1;
+
+  localDate.setFullYear(year, 0, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfYear(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setFullYear(localDate.getFullYear(), 0, 1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfQuarter(date) {
+  const localDate = new Date(date.valueOf());
+
+  const currentMonth = localDate.getMonth();
+  const month = currentMonth - (currentMonth % 3) + 3;
+
+  localDate.setMonth(month, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfQuarter(date) {
+  const localDate = new Date(date.valueOf());
+
+  const currentMonth = localDate.getMonth();
+  const month = currentMonth - (currentMonth % 3);
+
+  localDate.setMonth(month, 1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getStartOfMonth(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setDate(1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfMonth(date) {
+  const localDate = new Date(date.valueOf());
+  const month = localDate.getMonth() + 1;
+
+  localDate.setFullYear(localDate.getFullYear(), month, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getEndOfWeek(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+  const localDate = new Date(date.valueOf());
+
+  const day = localDate.getDay();
+  const oneDay = 1;
+
+  const diff =
+    (day < weekStartsOn ? DAYS_IN_WEEK * -1 : 0) + DAYS_IN_WEEK - oneDay - (day - weekStartsOn);
+
+  localDate.setDate(localDate.getDate() + diff);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfWeek(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+  const localDate = new Date(date.valueOf());
+
+  const day = localDate.getDay();
+
+  const diff = (day < weekStartsOn ? DAYS_IN_WEEK : 0) + day - weekStartsOn;
+
+  localDate.setDate(localDate.getDate() - diff);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfDay(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfDay(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function gmtToUTC(date) {
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate(),
+      date.getUTCHours(),
+      date.getUTCMinutes(),
+      date.getUTCSeconds(),
+    ),
+  );
+}
+
+export function getSortedLocale(locale, type) {
+  const targetMap = type === LOCALE_TYPE.month ? monthsMap : daysMap;
+
+  const sortedDays = Object.entries(locale)
+    .map((entry) => {
+      entry[0] = targetMap.indexOf(entry[0]);
+
+      return entry;
+    })
+    .sort((entryA, entryB) => entryA[0] - entryB[0]);
+
+  return sortedDays.map((entry) => entry[1]);
+}
+
+export function getDateFromUnixTimestamp(timestamp) {
+  return new Date(timestamp * 1000);
+}
+
+export function getUnixTimestampFromDate(date) {
+  return date.getTime() / 1000;
+}
+
+export function getDatesDifference(dateOne, dateTwo, timeless = true) {
+  if (timeless !== false) {
+    return (
+      new Date(dateOne.getTime()).setHours(0, 0, 0, 0) -
+      new Date(dateTwo.getTime()).setHours(0, 0, 0, 0)
+    );
+  }
+
+  return dateOne.getTime() - dateTwo.getTime();
+}
+
+export function getDateWithoutTime(date = new Date()) {
+  date.setHours(0, 0, 0, 0);
+
+  return date;
+}
+
+export function isSameMonth(dateOne, dateTwo) {
+  return (
+    Boolean(dateOne) &&
+    Boolean(dateTwo) &&
+    dateOne.getFullYear() === dateTwo.getFullYear() &&
+    dateOne.getMonth() === dateTwo.getMonth()
+  );
+}
+
+export function isSameDay(dateOne, dateTwo) {
+  return isSameMonth(dateOne, dateTwo) && dateOne?.getDate() === dateTwo?.getDate();
+}
+
+export function isAnotherMothDay(day, activeMonth) {
+  return (
+    activeMonth.getFullYear() !== day.getFullYear() || activeMonth.getMonth() !== day.getMonth()
+  );
+}
+
+export function addDays(date, amount = 1) {
+  const result = new Date(date);
+
+  result.setDate(result.getDate() + amount);
+
+  return result;
+}
+
+export function addWeeks(date, amount = 1) {
+  const days = amount * DAYS_IN_WEEK;
+
+  return addDays(date, days);
+}
+
+export function addQuarters(date, amount = 1) {
+  const months = amount * 3;
+
+  return addMonths(date, months);
+}
+
+export function addMonths(date, amount = 1) {
+  let newDate = new Date(date.valueOf());
+
+  newDate.setMonth(date.getMonth() + amount);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== date.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+export function addYears(date, amount = 1) {
+  let newDate = new Date(date.valueOf());
+
+  newDate.setFullYear(date.getFullYear() + amount);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== date.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+export function isToday(date) {
+  return isSameDay(date, new Date());
+}
+
+export function getLastDayOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}