vueless 0.0.3 → 0.0.4

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

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

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

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

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

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

@@ -1,69 +0,0 @@
-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"] },
-  ],
-};