vueless 0.0.2 → 0.0.3

package/service.idb-keyval/index.js

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

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

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

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

@@ -1,20 +0,0 @@
-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.validation/index.js

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

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

package/ui.button-expand/index.stories.js

@@ -1,44 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UButtonExpand from "vueless/ui.button-expand";
-import UButtonExpandItem from "vueless/ui.button-expand-item";
-
-export default {
-  title: "Buttons & Links / Button Expand",
-  component: UButtonExpand,
-  argTypes: {
-    ...getArgTypes(UButtonExpand.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButtonExpand, UButtonExpandItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButtonExpand v-bind="args">
-      ${args.slotTemplate}
-    </UButtonExpand>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <template #default>
-      <UButtonExpandItem
-        text="Expand item 1"
-        icon-name="star"
-      />
-      <UButtonExpandItem
-        text="Expand item 2"
-        icon-name="star-fill"
-      />
-      <UButtonExpandItem
-        text="Expand item 3"
-        icon-name="star-fill"
-      />
-    </template>
-  `,
-};

package/ui.button-expand/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="empty:hidden" :data-cy="dataCy">
-    <!-- @slot Use it to add button expand item. -->
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "UButtonExpand",
-
-  props: {
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>

package/ui.button-expand-item/index.stories.js

@@ -1,69 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UButtonExpandItem from "vueless/ui.button-expand-item";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Buttons & Links / Button Expand Item",
-  component: UButtonExpandItem,
-  args: {
-    text: "Button Expand Item",
-    iconName: "star-fill",
-  },
-  argTypes: {
-    ...getArgTypes(UButtonExpandItem.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UButtonExpandItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButtonExpandItem v-bind="args" />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UButtonExpandItem, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButtonExpandItem
-        v-for="(size, index) in sizes"
-        :size="size"
-        :text="size"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const Icon = DefaultTemplate.bind({});
-Icon.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="star"
-        color="gray"
-        size="md"
-       />
-    </template>
-  `,
-};

package/ui.button-expand-item/index.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="mono-expand-button-item">
-    <t-button
-      class="mono-expand-button-item-button"
-      :disabled="disabled"
-      :class="sizeClass"
-      :data-cy="dataCy"
-      @click="onClick"
-    >
-      <UIcon :name="iconName" class="icon" color="gray" />
-
-      <slot>
-        <span class="mono-expand-button-item-button-text">{{ text }}</span>
-      </slot>
-    </t-button>
-
-    <div class="mono-expand-button-item-line" />
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-import TButton from "vueless/library.vue-tailwind-3/t-button";
-
-export default {
-  name: "UButtonExpandItem",
-
-  components: {
-    UIcon,
-    TButton,
-  },
-
-  props: {
-    /**
-     * The size of the button.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set button text.
-     */
-    text: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make button inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Icon SVG data source path.
-     */
-    iconName: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  computed: {
-    sizeClass() {
-      return `size-${this.size}`;
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-expand-button-item {
-  &:last-child {
-    .mono-expand-button-item-line {
-      @apply hidden;
-    }
-  }
-
-  .mono-expand-button-item-button {
-    @apply flex items-center;
-    @apply font-normal text-gray-900;
-    @apply w-full text-left;
-    @apply rounded-lg shadow-none outline-none;
-    @apply border bg-transparent;
-
-    &-text {
-      @apply border-b border-transparent;
-    }
-
-    .icon {
-      @apply mr-3;
-    }
-
-    &:hover {
-      .mono-expand-button-item-button-text {
-        @apply transition duration-100 ease-in-out;
-        @apply border-b border-dashed border-gray-900;
-      }
-    }
-
-    &:focus {
-      @apply border-transparent;
-      @apply ring-0;
-    }
-
-    &:disabled {
-      @apply text-gray-400;
-    }
-  }
-
-  .mono-expand-button-item-line {
-    @apply border border-l-0 border-r-0 border-t-0 border-gray-200;
-    @apply my-2;
-  }
-}
-
-.size {
-  &-sm {
-    @apply text-sm;
-    @apply px-3;
-  }
-
-  &-md {
-    @apply text-base;
-    @apply px-4;
-  }
-
-  &-lg {
-    @apply text-lg;
-    @apply px-5;
-  }
-}
-</style>