vueless 0.0.1

package/service.idb-keyval/index.js

@@ -0,0 +1,37 @@
+import { get as idbGet, set as idbSet, clear as idbClear, createStore } from "idb-keyval";
+import DataServiceDefault from "vueless/service.data";
+
+const mainIDBStore = createStore("main", "store");
+const instanceIDBStore = createStore("instance", "store");
+
+const { getRawValue } = new DataServiceDefault();
+
+const idbMain = {
+  async get(key) {
+    return await idbGet(key, mainIDBStore);
+  },
+
+  async set(key, value) {
+    await idbSet(key, getRawValue(value), mainIDBStore);
+  },
+
+  async clear() {
+    await idbClear(mainIDBStore);
+  },
+};
+
+const idbInstance = {
+  async get(key) {
+    return await idbGet(key, instanceIDBStore);
+  },
+
+  async set(key, value) {
+    await idbSet(key, getRawValue(value), instanceIDBStore);
+  },
+
+  async clear() {
+    await idbClear(instanceIDBStore);
+  },
+};
+
+export { idbMain, idbInstance };

package/service.jwt/index.js

@@ -0,0 +1,27 @@
+export default class JwtServiceDefault {
+  #AUTH_TOKEN = "token";
+  #AUTH_TOKEN_EXPIRES = "token-expires";
+  #VERSION_HASH = "version-hash";
+
+  getAuthToken() {
+    return window.localStorage.getItem(this.#AUTH_TOKEN);
+  }
+
+  getAuthTokenExpiresTime() {
+    return window.localStorage.getItem(this.#AUTH_TOKEN_EXPIRES);
+  }
+
+  saveAuthToken(token, expires) {
+    window.localStorage.setItem(this.#AUTH_TOKEN, token);
+    window.localStorage.setItem(this.#AUTH_TOKEN_EXPIRES, expires);
+  }
+
+  destroyAuthToken() {
+    window.localStorage.removeItem(this.#AUTH_TOKEN);
+    window.localStorage.removeItem(this.#AUTH_TOKEN_EXPIRES);
+  }
+
+  getVersionHash() {
+    return window.localStorage.getItem(this.#VERSION_HASH);
+  }
+}

package/service.money/index.js

@@ -0,0 +1,86 @@
+export default class MoneyServiceDefault {
+  SYMBOL_MINUS = "–";
+  SYMBOL_PLUS = "+";
+  SINGLE_ZERO = "0";
+  DOUBLE_ZERO = "00";
+  DEBIT_OBLIGATION = "debit";
+  CREDIT_OBLIGATION = "credit";
+  ADD_SPACE_IN_CARD_REG_EX = /(.{4})/g;
+  ADD_SPACE_IN_DINNER_CLUB_CARD_REG_EX = /(.{4})(.{6})(.{4})/g;
+  ADD_SPACE_IN_AMERICAN_EXPRESS_CARD_REG_EX = /(.{4})(.{6})(.{5})/g;
+  ADD_SPACE_IN_IBAN_REG_EX = /(.{2})(.{2})(.{6})(.{5})(.*)/g;
+  ADD_SPACE_IN_MONEY_REG_EX = /(\d)(?=(\d{3})+(\D|$))/g;
+  AMERICAN_EXPRESS_CARD_LENGTH = 15;
+  DINER_CLUB_CARD_LENGTH = 14;
+
+  MONEY_SIGN_TYPE = {
+    default: "default",
+    positive: "positive",
+    negative: "negative",
+  };
+
+  MONEY_COLORS = {
+    negative: "red",
+    positive: "green",
+    zero: "gray",
+  };
+
+  separatedMoney = (money, decimalPlaces = 2, delimiter = ",") => {
+    const roundedMoney = money ? money.toFixed(decimalPlaces) : 0;
+
+    let [integer, penny] = String(roundedMoney).split(".");
+
+    integer = integer.replace(this.ADD_SPACE_IN_MONEY_REG_EX, "$1 ");
+
+    if (roundedMoney === 0) {
+      integer = this.SINGLE_ZERO;
+      penny = this.DOUBLE_ZERO;
+    }
+
+    return { integer, penny, delimiter };
+  };
+
+  formatCardNumber = (card) => {
+    if (
+      card.length !== this.AMERICAN_EXPRESS_CARD_LENGTH &&
+      card.length !== this.DINER_CLUB_CARD_LENGTH
+    ) {
+      return MoneyServiceDefault.#formatCommonCardNumber(card);
+    }
+
+    if (card.length === this.AMERICAN_EXPRESS_CARD_LENGTH) {
+      return MoneyServiceDefault.#formatAmericanExpressCardNumber(card);
+    }
+
+    if (card.length === this.DINER_CLUB_CARD_LENGTH) {
+      return MoneyServiceDefault.#formatDinerClubCardNumber(card);
+    }
+  };
+
+  formatIban = (iban) => {
+    return iban.replace(this.ADD_SPACE_IN_IBAN_REG_EX, "$1 $2 $3 $4 $5 ");
+  };
+
+  static #formatAmericanExpressCardNumber(card) {
+    return card.replace(this.ADD_SPACE_IN_AMERICAN_EXPRESS_CARD_REG_EX, "$1 $2 $3 ");
+  }
+
+  static #formatDinerClubCardNumber(card) {
+    return card.replace(this.ADD_SPACE_IN_DINNER_CLUB_CARD_REG_EX, "$1 $2 $3 ");
+  }
+
+  static #formatCommonCardNumber(card) {
+    return card.replace(this.ADD_SPACE_IN_CARD_REG_EX, "$1 ");
+  }
+}
+
+export const {
+  SYMBOL_MINUS,
+  SINGLE_ZERO,
+  SYMBOL_PLUS,
+  MONEY_COLORS,
+  DOUBLE_ZERO,
+  DEBIT_OBLIGATION,
+  CREDIT_OBLIGATION,
+  MONEY_SIGN_TYPE,
+} = new MoneyServiceDefault();

package/service.notify/index.js

@@ -0,0 +1,87 @@
+import Vue3Notify, { notify as VueNotify } from "@kyvg/vue3-notification";
+import { globalComponentConfig } from "vueless/service.ui";
+
+const defaultDuration = {
+  short: 4000,
+  medium: 8000,
+  long: 12000,
+  permanent: 300000,
+};
+
+export default class NotifyServiceDefault {
+  notifyInstance = Vue3Notify;
+
+  #lastMessageTime = 0;
+  #lastMessageCode = "";
+
+  notify(settings) {
+    const { type, title, text, code, duration, ignoreDuplicates, closeOnClick, data } = settings;
+    const isSameMessage =
+      this.#lastMessageCode === code && new Date() - this.#lastMessageTime < 1000;
+
+    if (isSameMessage || !code) return;
+
+    this.#lastMessageTime = new Date();
+    this.#lastMessageCode = code;
+
+    VueNotify({
+      group: "notify",
+      type,
+      title: title || "",
+      text: text || "",
+      duration: duration || globalComponentConfig.UNotify?.duration?.short || defaultDuration.short,
+      ignoreDuplicates: ignoreDuplicates || false,
+      closeOnClick: closeOnClick || false,
+      data: { ...data, code },
+    });
+  }
+
+  success(code, duration = globalComponentConfig.UNotify?.duration?.short) {
+    this.notify({
+      type: "success",
+      code: code,
+      duration: duration,
+    });
+  }
+
+  warning(code, duration = globalComponentConfig.UNotify?.duration?.medium) {
+    this.notify({
+      type: "warning",
+      code: code,
+      duration: duration,
+    });
+  }
+
+  error(code, duration = globalComponentConfig.UNotify?.duration?.long) {
+    this.notify({
+      type: "error",
+      code: code,
+      duration: duration,
+    });
+  }
+
+  clearAll() {
+    VueNotify({
+      group: "notify",
+      clean: true,
+    });
+  }
+
+  setDelayed(type, message) {
+    localStorage.setItem("notify", JSON.stringify({ type, message }));
+  }
+
+  getDelayed() {
+    const notifyData = JSON.parse(localStorage.getItem("notify"));
+
+    this.clearAll();
+
+    if (notifyData) {
+      const { type, message } = notifyData;
+
+      this[type](message);
+
+      localStorage.removeItem("notify");
+    }
+  }
+}

package/service.redirect/index.js

@@ -0,0 +1,20 @@
+import I18nServiceDefault from "vueless/service.i18n";
+
+export default class RedirectServiceDefault {
+  static currentLocale = new I18nServiceDefault().getActiveLanguage();
+
+  static getFallbackLocale(redirectLinks, fallBackLocale) {
+    const localeKeys = Object.keys(redirectLinks);
+
+    return localeKeys.includes(fallBackLocale) ? fallBackLocale : localeKeys.at(0);
+  }
+
+  static redirect(redirectLinks, fallBackLocale) {
+    let href =
+      redirectLinks[this.currentLocale] ||
+      redirectLinks[this.getFallbackLocale(redirectLinks, fallBackLocale)] ||
+      redirectLinks[I18nServiceDefault.FALLBACK_LOCALE];
+
+    if (href) window.location = href;
+  }
+}

package/service.storybook/index.js

@@ -0,0 +1,118 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { decode } from "html-entities";
+import prettier2 from "prettier2";
+import HTMLParser from "prettier2/parser-html";
+
+const getComponentData = (componentName) => {
+  return require("/web-types.json").default.contributions.html.tags.find(
+    (item) => item.name === componentName,
+  );
+};
+
+export const getSlotNames = (componentName) => {
+  return getComponentData(componentName)?.slots?.map((item) => item.name);
+};
+
+export const getArgTypes = (componentName) => {
+  const component = getComponentData(componentName);
+
+  if (!component) return;
+
+  const types = {};
+
+  getSlotNames(componentName)?.forEach((slotName) => {
+    types[slotName] = { control: "text" };
+  });
+
+  component.attributes?.forEach((attribute) => {
+    const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
+
+    if (options.length > 1) {
+      types[attribute.name] = {
+        options,
+        control: "select",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+  });
+
+  if (import.meta.env.VITE_STORYBOOK_FULL) {
+    component.events?.forEach((event) => {
+      const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
+
+      types[eventName] = {
+        action: event.name,
+        table: { category: "Storybook Events" },
+      };
+    });
+  }
+
+  return types;
+};
+
+export const renderToHTML = (templateSource, { args, argTypes }) => {
+  const componentArgs = {};
+
+  for (const [key, val] of Object.entries(argTypes)) {
+    const value = args[key];
+
+    if (
+      typeof val !== "undefined" &&
+      val.table &&
+      val.table.category === "props" &&
+      value !== val.defaultValue
+    ) {
+      componentArgs[key] = val;
+    }
+  }
+
+  const slotTemplateCode =
+    // eslint-disable-next-line vue/max-len
+    '<template v-for="(slot, index) of slots" :key="index" v-slot:[slot]><template v-if="args[slot]">{{args[slot]}}</template></template>';
+  const templateWrapperRegEx = /<template>([\s\S]*)<\/template>/i;
+  const vBindRegEx = /v-bind="\{([\s\S]*?)}"/g;
+
+  const propsString = Object.keys(componentArgs)
+    .map((key) => " " + propToSource(kebabCase(key), args[key]))
+    .join("");
+
+  const source = templateSource
+    .replace(slotTemplateCode, "")
+    .replace(templateWrapperRegEx, "$1")
+    .replace(vBindRegEx, propsString);
+
+  const markup = renderToStaticMarkup(source);
+
+  return prettier2.format(decode(markup), {
+    parser: "html",
+    plugins: [HTMLParser],
+    htmlWhitespaceSensitivity: "ignore",
+    tabWidth: 2,
+  });
+
+  function propToSource(key, val) {
+    const type = typeof val;
+
+    switch (type) {
+      case "boolean":
+        return val ? key : "";
+      case "string":
+        return `${key}="${val}"`;
+      default:
+        return `:${key}="${val}"`;
+    }
+  }
+
+  function kebabCase(str) {
+    return str
+      .split("")
+      .map((letter, idx) => {
+        return letter.toUpperCase() === letter
+          ? `${idx !== 0 ? "-" : ""}${letter.toLowerCase()}`
+          : letter;
+      })
+      .join("");
+  }
+};

package/service.ui/index.js

@@ -0,0 +1,174 @@
+import merge from "lodash.merge";
+import { defineConfig } from "cva";
+import { twMerge } from "tailwind-merge";
+
+/*
+  Export cva (class variance authority) methods extended with tailwind-merge.
+  It helps to make class variation switchers and removes class duplications.
+  https://beta.cva.style
+*/
+export const { cva, cx, compose } = defineConfig({
+  hooks: { onComplete: (className) => twMerge(className) },
+});
+
+/*
+  Export TailwindCSS config.
+  https://tailwindcss.com
+*/
+export const { default: tailwindConfig } = require("/tailwind.config");
+
+/*
+  Export global config settings for the current library.
+  Did as a separate variables for more comfortable usage.
+*/
+export const {
+  default: {
+    fallbackLocale,
+    backgroundsPath,
+    layout,
+    strategyOverwrite,
+    component: globalComponentConfig,
+  },
+} = require("/Users/ivan.hridniev/PhpstormProjects/vuelessjs/vueless/vueless.config");
+
+export default class UIServiceDefault {
+  isMac = false;
+  isPWA = false;
+  isIOS = false;
+  isAndroid = false;
+  isMobileApp = false;
+  PX_IN_REM = 16;
+
+  constructor() {
+    this.isMac = this.checkIsMac();
+
+    this.isPWA = this.checkIsPWA();
+    this.isIOS = this.checkIsIOS();
+    this.isAndroid = this.checkIsAndroid();
+
+    this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
+  }
+
+  checkIsPWA() {
+    return !!navigator.standalone;
+  }
+
+  checkIsMac() {
+    return this.getPlatform().toUpperCase().indexOf("MAC") >= 0;
+  }
+
+  checkIsIOS() {
+    const iOSDevices = [
+      "iPad Simulator",
+      "iPhone Simulator",
+      "iPod Simulator",
+      "iPad",
+      "iPhone",
+      "iPod",
+    ];
+    const platform = this.getPlatform();
+    const isIpodIOS13 = platform.includes("Mac") && "ontouchend" in document;
+
+    return iOSDevices.includes(platform) || isIpodIOS13;
+  }
+
+  checkIsAndroid() {
+    return this.getPlatform().toUpperCase().indexOf("ANDROID") >= 0;
+  }
+
+  getPlatform() {
+    return navigator.userAgentData?.platform || navigator.platform || "unknown";
+  }
+
+  getBasePath() {
+    const basePath = import.meta.env.VITE_BASE_PATH;
+
+    return !basePath || basePath === "/" ? "/" : `/${basePath}`;
+  }
+
+  convertHexInRgb(hex) {
+    const color = hex.replace(/#/g, "");
+
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+
+    return `${r}, ${g}, ${b}`;
+  }
+
+  getRandomId(idLength = 15) {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+    const charactersLength = characters.length;
+    let id = "";
+
+    while (id.length < idLength) {
+      id += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+
+    return id;
+  }
+
+  removeOutlineFocus() {
+    const styleTag = document.createElement("style");
+    let focusRing = true;
+
+    document.head.appendChild(styleTag).innerHTML = `
+      "body.hide-focus-ring *:focus {
+        outline: none !important;
+      }`;
+
+    document.addEventListener("mousedown", () => {
+      if (focusRing) document.body.classList.add("hide-focus-ring");
+
+      focusRing = false;
+    });
+
+    document.addEventListener("keydown", () => {
+      if (!focusRing) document.body.classList.remove("hide-focus-ring");
+
+      focusRing = true;
+    });
+  }
+
+  static setTitle({ title, separator = " / ", suffix = "" }) {
+    document.title = title ? title + separator + suffix : suffix;
+  }
+
+  static setFavicon(faviconPath) {
+    if (!faviconPath) return;
+
+    const head = document.querySelector("head");
+    const faviconTag = document.createElement("link");
+
+    faviconTag.setAttribute("rel", "shortcut icon");
+    faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
+    head.appendChild(faviconTag);
+  }
+
+  /**
+    Get default component props value related on default and global config.
+    @param { Object } defaultConfig
+    @param { String } name
+    @returns string
+  */
+  static get(defaultConfig, name) {
+    return {
+      default: merge(defaultConfig.defaultVariants, globalComponentConfig[name]?.defaultVariants),
+    };
+  }
+}
+
+export const {
+  getBasePath,
+  getRandomId,
+  removeOutlineFocus,
+  convertHexInRgb,
+  setTitle,
+  setFavicon,
+  isMac,
+  isPWA,
+  isIOS,
+  isAndroid,
+  isMobileApp,
+  PX_IN_REM,
+} = new UIServiceDefault();

package/service.validation/index.js

@@ -0,0 +1,55 @@
+import { getDaysInMonth } from "date-fns";
+
+export default class ValidationServiceDefault {
+  PHONE_MIN_LENGTH = 10;
+  PHONE_MAX_LENGTH = 13;
+  PASSWORD_MIN_LENGTH = 8;
+  LETTERS_REG_EXP = /[a-zA-Z]+/g;
+  LETTERS_AND_SYMBOLS_REG_EXP = /\D/g; // Use "g" flag in RegExp,if want to use in UInput
+  LETTERS_AND_NUMBERS_REG_EXP = /[a-zA-Z0-9]+/g;
+  NUMBER_REG_EXP = /\d*\.?\d*/g;
+  INTEGER_REG_EXP = /\d*/g;
+  PLUS_AND_SPACE_REG_EXP = /[\s+]/g;
+  DATE_WITH_DOT_FORMAT_REG_EXP = /^\d{2}([./-])\d{2}\1\d{4}$/;
+
+  phoneMinLength = (value) => {
+    const replacePhoneValue = this.clearPhone(value);
+
+    return !replacePhoneValue.length || replacePhoneValue.length >= this.PHONE_MIN_LENGTH;
+  };
+
+  phoneMaxLength = (value) => {
+    const replacePhoneValue = this.clearPhone(value);
+
+    return replacePhoneValue.length <= this.PHONE_MAX_LENGTH;
+  };
+
+  phoneIsNumber = (value) => {
+    const preparedPhone = this.clearPhone(value);
+
+    return preparedPhone && !preparedPhone.match(this.LETTERS_AND_SYMBOLS_REG_EXP);
+  };
+
+  clearPhone = (value) => {
+    return value.replace(this.PLUS_AND_SPACE_REG_EXP, "");
+  };
+
+  dateFormat = (value) => {
+    return !!value.match(this.DATE_WITH_DOT_FORMAT_REG_EXP);
+  };
+
+  wrongMonthNumber = (value) => {
+    const splitDate = value.split(".");
+    const month = splitDate[1];
+
+    return Number(month) >= 1 && Number(month) <= 12;
+  };
+
+  wrongDayNumber = (value) => {
+    const [day, month, year] = value.split(".");
+
+    const daysInMonth = getDaysInMonth(new Date(year, month - 1));
+
+    return Number(day) >= 1 && Number(day) <= Number(daysInMonth);
+  };
+}

package/service.worker/index.js

@@ -0,0 +1,26 @@
+import { registerSW } from "virtual:pwa-register";
+
+export default class WorkerServiceDefault {
+  #intervalInMilliseconds = 60 * 60 * 1000;
+
+  init = () => {
+    if (import.meta.env.DEV || window.Cypress) return;
+
+    registerSW({
+      onRegistered: this.onRegistered,
+      onOfflineReady: this.onOfflineReady,
+    });
+  };
+
+  onRegistered = (worker) => {
+    if (!worker) return;
+
+    setInterval(() => {
+      worker.update();
+    }, this.#intervalInMilliseconds);
+  };
+
+  onOfflineReady = () => {
+    // console.log("Offline is Ready");
+  };
+}