vueless 0.0.2 → 0.0.3

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

@@ -0,0 +1,201 @@
+import { revFormat, formats } from "./formatting.service";
+import { isSameDay, getDateFromUnixTimestamp } from "./date.service";
+
+import { TOKEN_REG_EXP, YEARS_PER_VIEW } from "../constants";
+
+export function getInitialActiveDate(localValue) {
+  if (Array.isArray(localValue) && localValue.length) {
+    return localValue[localValue.length - 1];
+  }
+
+  if (localValue instanceof Date) {
+    return localValue;
+  }
+
+  return new Date();
+}
+
+export function formatDate(dateObj, format, locale) {
+  if (dateObj === null) {
+    return "";
+  }
+
+  return format
+    .split("")
+    .map((char, i, arr) => {
+      if (formats[char] && arr[i - 1] !== "\\") {
+        return formats[char](dateObj, locale);
+      }
+
+      if (char !== "\\") {
+        return char;
+      }
+
+      return "";
+    })
+    .join("");
+}
+
+export function isNumeric(char) {
+  return /^\d+$/.test(String(char));
+}
+
+export function parseDate(date, format = "Y-m-d H:i:S", locale) {
+  if (date === null) {
+    return null;
+  }
+
+  const localeTokenRegex = { ...TOKEN_REG_EXP };
+
+  let timeless = false;
+  let parsedDate = null;
+  const originalDate = date;
+
+  const isDateObject = date instanceof Date;
+  const isTimestamp = typeof date !== "string" && date.toFixed !== undefined;
+  const isString = typeof date === "string";
+
+  if (isDateObject) {
+    parsedDate = new Date(date.getTime());
+  }
+
+  if (isTimestamp) {
+    parsedDate = getDateFromUnixTimestamp(date);
+  }
+
+  if (isString) {
+    const dateString = String(date).trim();
+
+    if (dateString === "today") {
+      parsedDate = new Date();
+      timeless = true;
+    } else {
+      parsedDate = parseStringDate(date, format, localeTokenRegex, locale);
+    }
+  }
+
+  if (!(parsedDate instanceof Date && !isNaN(parsedDate.getTime()))) {
+    throw new Error(`Invalid date provided: ${originalDate}`);
+  }
+
+  if (timeless === true) {
+    parsedDate.setHours(0, 0, 0, 0);
+  }
+
+  return parsedDate;
+}
+
+export function parseStringDate(dateString, format, localeTokenRegex, locale) {
+  const isWithinTimezone = /Z$/.test(dateString) || /GMT$/.test(dateString);
+
+  if (isWithinTimezone) {
+    return new Date(dateString);
+  } else {
+    let parsedDate = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0);
+
+    let matched;
+    const ops = [];
+
+    for (let i = 0, matchIndex = 0, regexStr = ""; i < format.length; i += 1) {
+      const token2 = format[i];
+      const isBackSlash = token2 === "\\";
+      const escaped = format[i - 1] === "\\" || isBackSlash;
+
+      if (localeTokenRegex[token2] && !escaped) {
+        regexStr += localeTokenRegex[token2];
+        const match = new RegExp(regexStr).exec(dateString);
+
+        if (match) {
+          matched = true;
+          ops[token2 !== "Y" ? "push" : "unshift"]({
+            fn: revFormat[token2],
+            val: match[(matchIndex += 1)],
+          });
+        }
+      } else if (!isBackSlash) {
+        regexStr += ".";
+      }
+
+      ops.forEach((op) => {
+        const { fn } = op;
+        const { val } = op;
+
+        parsedDate = fn(parsedDate, String(val), locale) || parsedDate;
+      });
+    }
+
+    return matched ? parsedDate : undefined;
+  }
+}
+
+export function dayIsPartOfTheConditions(day, condition, dateParser, dateFormat) {
+  if (!day) {
+    return false;
+  }
+
+  if (typeof condition === "function") {
+    return condition(day);
+  }
+
+  if (typeof condition === "string" || condition instanceof String) {
+    const disabledDate = dateParser(condition, dateFormat);
+
+    return isSameDay(disabledDate, day);
+  }
+
+  if (condition instanceof Date) {
+    return isSameDay(condition, day);
+  }
+
+  if (Array.isArray(condition)) {
+    return condition.some((c) => dayIsPartOfTheConditions(day, c, dateParser, dateFormat));
+  }
+
+  return false;
+}
+
+export function dateIsOutOfRange(date, min, max, locale, dateFormat = null) {
+  if (!dateFormat) {
+    throw new Error("strings needs a date format");
+  }
+
+  let minDate;
+
+  if (typeof min === "string" || min instanceof String) {
+    minDate = parseDate(min, dateFormat, locale);
+  } else {
+    minDate = min;
+  }
+
+  let maxDate;
+
+  if (typeof max === "string" || max instanceof String) {
+    maxDate = parseDate(max, dateFormat, locale);
+  } else {
+    maxDate = max;
+  }
+
+  const time = date.getTime();
+
+  if (minDate && maxDate) {
+    return time < minDate.getTime() || time > maxDate.getTime();
+  }
+
+  if (minDate) {
+    return time < minDate.getTime();
+  }
+
+  if (maxDate) {
+    return time > maxDate.getTime();
+  }
+
+  return false;
+}
+
+export function getYearsRange(date) {
+  const currentYear = date.getFullYear();
+  const from = currentYear - Math.floor(currentYear % YEARS_PER_VIEW);
+  const to = from + YEARS_PER_VIEW - 1;
+
+  return [from, to];
+}

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

@@ -0,0 +1,121 @@
+import { LOCALE_TYPE } 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 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 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);
+}

package/ui.form-calendar/services/formatting.service.js

@@ -0,0 +1,180 @@
+const pad = (number, length = 2) => `000${number}`.slice(length * -1);
+const int = (bool) => (bool === true ? 1 : 0);
+
+const doNothing = () => undefined;
+
+export const monthToStr = (monthNumber, shorthand, locale) => {
+  return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber];
+};
+
+export const revFormat = {
+  D: doNothing,
+  F(dateObj, monthName, locale) {
+    dateObj.setMonth(locale.months.longhand.indexOf(monthName));
+  },
+  G: (dateObj, hour) => {
+    dateObj.setHours(parseFloat(hour));
+  },
+  H: (dateObj, hour) => {
+    dateObj.setHours(parseFloat(hour));
+  },
+  J: (dateObj, day) => {
+    dateObj.setDate(parseFloat(day));
+  },
+  K: (dateObj, amPM, locale) => {
+    dateObj.setHours(
+      (dateObj.getHours() % 12) + 12 * int(new RegExp(locale.amPM[1], "i").test(amPM)),
+    );
+  },
+  M(dateObj, shortMonth, locale) {
+    dateObj.setMonth(locale.months.shorthand.indexOf(shortMonth));
+  },
+  S: (dateObj, seconds) => {
+    dateObj.setSeconds(parseFloat(seconds));
+  },
+  U: (_, unixSeconds) => new Date(parseFloat(unixSeconds) * 1000),
+
+  W(dateObj, weekNum, locale) {
+    const weekNumber = parseInt(weekNum, 10);
+    const date = new Date(dateObj.getFullYear(), 0, 2 + (weekNumber - 1) * 7, 0, 0, 0, 0);
+
+    date.setDate(date.getDate() - date.getDay() + locale.firstDayOfWeek);
+
+    return date;
+  },
+  Y: (dateObj, year) => {
+    dateObj.setFullYear(parseFloat(year));
+  },
+  Z: (_, ISODate) => new Date(ISODate),
+
+  d: (dateObj, day) => {
+    dateObj.setDate(parseFloat(day));
+  },
+  h: (dateObj, hour) => {
+    dateObj.setHours(parseFloat(hour));
+  },
+  i: (dateObj, minutes) => {
+    dateObj.setMinutes(parseFloat(minutes));
+  },
+  j: (dateObj, day) => {
+    dateObj.setDate(parseFloat(day));
+  },
+  l: doNothing,
+  m: (dateObj, month) => {
+    dateObj.setMonth(parseFloat(month) - 1);
+  },
+  n: (dateObj, month) => {
+    dateObj.setMonth(parseFloat(month) - 1);
+  },
+  s: (dateObj, seconds) => {
+    dateObj.setSeconds(parseFloat(seconds));
+  },
+  u: (_, unixMillSeconds) => new Date(parseFloat(unixMillSeconds)),
+  w: doNothing,
+  y: (dateObj, year) => {
+    dateObj.setFullYear(2000 + parseFloat(year));
+  },
+};
+
+export const formats = {
+  // get the date in UTC
+  Z: (date) => date.toISOString(),
+
+  // weekday name, short, e.g. Thu
+  D(date, locale) {
+    return locale.weekdays.shorthand[formats.w(date, locale)];
+  },
+
+  // full month name e.g. January
+  F(date, locale) {
+    return monthToStr(formats.n(date, locale) - 1, false, locale);
+  },
+
+  // padded hour 1-12
+  G(date, locale) {
+    return pad(formats.h(date, locale));
+  },
+
+  // hours with leading zero e.g. 03
+  H: (date) => pad(date.getHours()),
+
+  // day (1-30) with ordinal suffix e.g. 1st, 2nd
+  J(date, locale) {
+    return locale.ordinal !== undefined
+      ? date.getDate() + locale.ordinal(date.getDate())
+      : undefined;
+  },
+
+  // AM/PM
+  K: (date, locale) => locale.amPM[int(date.getHours() > 11)],
+
+  // shorthand month e.g. Jan, Sep, Oct, etc
+  M(date, locale) {
+    return monthToStr(date.getMonth(), true, locale);
+  },
+
+  // seconds 00-59
+  S: (date) => pad(date.getSeconds()),
+
+  // unix timestamp
+  U: (date) => date.getTime() / 1000,
+
+  W(givenDate) {
+    // return options.getWeek(date);
+    const date = new Date(givenDate.getTime());
+
+    date.setHours(0, 0, 0, 0);
+
+    // Thursday in current week decides the year.
+    date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));
+
+    // January 4 is always in week 1.
+    const week1 = new Date(date.getFullYear(), 0, 4);
+
+    // Adjust to Thursday in week 1 and count number of weeks from date to week1.
+    return (
+      1 +
+      Math.round(
+        ((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7,
+      )
+    );
+  },
+
+  // full year e.g. 2016, padded (0001-9999)
+  Y: (date) => pad(date.getFullYear(), 4),
+
+  // day in month, padded (01-30)
+  d: (date) => pad(date.getDate()),
+
+  // hour from 1-12 (am/pm)
+  h: (date) => (date.getHours() % 12 ? date.getHours() % 12 : 12),
+
+  // minutes, padded with leading zero e.g. 09
+  i: (date) => pad(date.getMinutes()),
+
+  // day in month (1-30)
+  j: (date) => date.getDate(),
+
+  // weekday name, full, e.g. Thursday
+  l(date, locale) {
+    return locale.weekdays.longhand[date.getDay()];
+  },
+
+  // padded month number (01-12)
+  m: (date) => pad(date.getMonth() + 1),
+
+  // the month number (1-12)
+  n: (date) => date.getMonth() + 1,
+
+  // seconds 0-59
+  s: (date) => date.getSeconds(),
+
+  // Unix Milliseconds
+  u: (date) => date.getTime(),
+
+  // number of the day of the week
+  w: (date) => date.getDay(),
+
+  // last two digits of year e.g. 16 for 2016
+  y: (date) => String(date.getFullYear()).substring(2),
+};

package/ui.form-checkbox/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -0,0 +1,57 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { checkbox, iconWrapper } = config.value;
+
+  const cvaCheckbox = cva({
+    base: checkbox.base,
+    variants: checkbox.variants,
+    compoundVariants: checkbox.compoundVariants,
+  });
+
+  const cvaIconWrapper = cva({
+    base: iconWrapper.base,
+    variants: iconWrapper.variants,
+    compoundVariants: iconWrapper.compoundVariants,
+  });
+
+  const checkboxClasses = computed(() =>
+    setColor(
+      cvaCheckbox({
+        size: props.size,
+        label: Boolean(props.label),
+        color: props.color,
+        disabled: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconWrapperClasses = computed(() =>
+    setColor(
+      cvaIconWrapper({
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const iconWrapperCellAttrs = getAttrs("iconWrapper", { classes: iconWrapperClasses });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const checkboxAttrs = getAttrs("checkbox", { classes: checkboxClasses });
+
+  return {
+    config,
+    checkboxAttrs,
+    iconWrapperCellAttrs,
+    labelAttrs,
+    iconAttrs,
+  };
+}

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

@@ -0,0 +1,69 @@
+export default /*tw*/ {
+  label: "w-auto max-w-max relative",
+  partialIconName: "remove",
+  selectedIconName: "check",
+  iconWrapper: {
+    base: "flex items-center justify-center absolute rounded bg-{color}-500",
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+      },
+      color: {
+        grayscale: "border-gray-900 bg-gray-900",
+      },
+    },
+  },
+  icon: "",
+  checkbox: {
+    base: `
+      border border-solid border-{color}-300 rounded bg-white
+      hover:border-{color}-400
+      focus:border-{color}-500 focus:ring-4 focus:ring-{color}-200 focus:ring-offset-0
+      active:border-{color}-500 active:bg-{color}-500
+      checked:border-{color}-500 checked:bg-{color}-500 checked:hover:bg-{color}-500
+      checked:text-{color}-500 checked:bg-none
+      checked:focus:text-{color}-500 checked:active:text-{color}-500
+    `,
+    variants: {
+      size: {
+        sm: "size-5 text-sm",
+        md: "size-6",
+        lg: "size-7 text-lg",
+      },
+      color: {
+        grayscale: `
+          border-gray-300
+          hover:border-gray-400
+          focus:border-gray-500 focus:ring-gray-200
+          checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
+          active:border-gray-900 active:bg-gray-900
+        `,
+      },
+      disabled: {
+        true: `
+          border-gray-100 bg-gray-100 opacity-50
+          hover:border-gray-100 hover:bg-gray-100 hover:opacity-50
+          active:border-gray-100 active:bg-gray-100 active:opacity-50
+        `,
+      },
+    },
+  },
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    labelAlign: "left",
+    partial: false,
+    disabled: false,
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-900` /* , variants: ["checked:hover", "checked", "active"] */ },
+    { pattern: `border-(${colors})-300` },
+    { pattern: `border-(${colors})-400`, variants: ["hover"] },
+    { pattern: `border-(${colors})-500`, variants: ["focus"] },
+    { pattern: `border-(${colors})-500`, variants: ["active", "checked"] },
+    { pattern: `text-(${colors})-500`, variants: ["checked:focus", "checked", "checked:active"] },
+    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
+  ],
+};

package/ui.form-checkbox/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UCheckbox = "UCheckbox";