vueless 0.0.8 → 0.0.10

package/src/ui.notify/index.vue

@@ -1,248 +0,0 @@
-<template>
-  <notifications
-    group="notify"
-    class="vueless-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
-    :position="position"
-  >
-    <template #body="{ item, close: onClickClose }">
-      <div :data-cy="`${item.type}-notify`" class="notify-body" :class="[item.type]">
-        <UIcon
-          v-if="isSuccessType"
-          data-cy="type-notify"
-          class="type-icon"
-          name="check_circle"
-          size="md"
-        />
-
-        <UIcon
-          v-else-if="isWarningType"
-          data-cy="type-notify"
-          class="type-icon"
-          name="warning"
-          size="md"
-        />
-
-        <UIcon
-          v-else-if="isErrorType"
-          data-cy="type-notify"
-          class="type-icon"
-          name="error"
-          size="md"
-        />
-
-        <div class="color-white w-full max-w-full px-3 text-sm text-gray-200">
-          <div v-if="item.title" class="mb-1 font-medium" v-text="$t(item.title)" />
-          <div
-            class="break-words font-normal leading-5"
-            v-html="prepareMessage(item.data.code, item.type, item.text)"
-          />
-        </div>
-
-        <UIcon
-          data-cy="close-notify"
-          class="icon icon-close"
-          name="close"
-          size="xs"
-          interactive
-          @click="onClickClose"
-        />
-      </div>
-    </template>
-  </notifications>
-</template>
-
-<script>
-import { globalComponentConfig } from "../service.ui";
-
-import UIcon from "../ui.image-icon";
-
-const NOTIFY_TYPE = {
-  success: "success",
-  warning: "warning",
-  error: "error",
-};
-
-export default {
-  name: "UNotify",
-  components: {
-    UIcon,
-  },
-
-  props: {
-    /**
-     * A position on the x-axis.
-     * @values left, center, right
-     */
-    xPosition: {
-      type: String,
-      default: "center",
-    },
-
-    /**
-     * A position on the y-axis.
-     * @values top, bottom
-     */
-    yPosition: {
-      type: String,
-      default: "top",
-    },
-  },
-
-  data() {
-    return {
-      type: null,
-    };
-  },
-
-  computed: {
-    isSuccessType() {
-      return this.type === NOTIFY_TYPE.success;
-    },
-
-    isWarningType() {
-      return this.type === NOTIFY_TYPE.warning;
-    },
-
-    isErrorType() {
-      return this.type === NOTIFY_TYPE.error;
-    },
-
-    i18n() {
-      return {
-        message: `${this.type}.default`,
-      };
-    },
-
-    position() {
-      return [this.yPosition, this.xPosition];
-    },
-  },
-
-  created() {
-    window.addEventListener("resize", this.setPosition, { passive: true });
-  },
-
-  beforeUnmount() {
-    window.removeEventListener("resize", this.setPosition);
-  },
-
-  methods: {
-    prepareMessage(code, type, text) {
-      this.setPosition();
-
-      this.type = type;
-
-      if (text) {
-        return text;
-      }
-
-      return this.i18n.message;
-    },
-
-    setPosition() {
-      const getOffsetWidth = (className) =>
-        className ? document.querySelector(`.${className}`)?.offsetWidth : 0;
-
-      const NOTIFY_CLASS = "vueless-notify";
-      const classes = globalComponentConfig.UNotify?.positionClasses;
-      const pageWidth = getOffsetWidth(classes.page);
-      const asideWidth = getOffsetWidth(classes.aside);
-      const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
-
-      if (!pageWidth) return;
-
-      const leftShift = asideWidth + pageWidth / 2 - notifyWidth / 2;
-
-      document.querySelector(`.${NOTIFY_CLASS}`).style.setProperty("left", `${leftShift}px`);
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  success:
-    default: "Operation successful."
-  error:
-    default: "Operation error."
-  warning:
-    default: "Operation warning."
-ru:
-  success:
-    default: "Произошла ошибка."
-  error:
-    default: "Операция успешна."
-  warning:
-    default: "Предупреждение."
-ua:
-  success:
-    default: "Операція успішна."
-  error:
-    default: "Сталася помилка."
-  warning:
-    default: "Попередження."
-</i18n>
-
-<style lang="postcss" scoped>
-.vueless-notify {
-  :deep(.vue-notification-wrapper) {
-    @apply overflow-visible;
-  }
-
-  :deep(.notify-body) {
-    @apply rounded-2xl backdrop-blur-md;
-    @apply flex items-center;
-    @apply mb-3 p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] md:shadow-[0_0px_12px_rgba(0,0,0,0.25)];
-
-    .icon-close {
-      path {
-        @apply fill-current text-gray-400;
-      }
-    }
-  }
-
-  :deep(.warning) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(251, 146, 60, 0.2) 2.17%,
-      transparent
-    );
-
-    .type-icon path {
-      @apply fill-current text-orange-400;
-    }
-  }
-
-  :deep(.success) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(74, 222, 128, 0.1) 2.17%,
-      transparent
-    );
-
-    .type-icon path {
-      @apply fill-current text-green-400;
-    }
-  }
-
-  :deep(.error) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(251, 113, 133, 0.2) 2.17%,
-      transparent
-    );
-
-    .type-icon path {
-      @apply fill-current text-red-400;
-    }
-  }
-
-  /*
-    NOTE! This expression should be declared after all subclasses,
-    otherwise we will get gradient with white background
-  */
-  :deep(.notify-body) {
-    @apply bg-gray-900 bg-opacity-90;
-  }
-}
-</style>

package/src/ui.notify/services/index.js

@@ -1,87 +0,0 @@
-import Vue3Notify, { notify as VueNotify } from "@kyvg/vue3-notification";
-import { globalComponentConfig } from "../../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/src/ui.other-dot/composables/attrs.composable.js

@@ -1,32 +0,0 @@
-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, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        size: props.size,
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
-
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-
-  return {
-    wrapperAttrs,
-  };
-}

package/src/ui.other-dot/configs/default.config.js

@@ -1,21 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "rounded-full bg-{color}-500 mr-1",
-    variants: {
-      color: {
-        white: "bg-white",
-        grayscale: "bg-gray-900",
-      },
-      size: {
-        sm: "size-1",
-        md: "size-1.5",
-        lg: "size-2",
-      },
-    },
-  },
-  defaultVariants: {
-    color: "brand",
-    size: "md",
-  },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
-};

package/src/ui.other-dot/constants/index.js

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

package/src/ui.other-dot/index.stories.js

@@ -1,77 +0,0 @@
-import UDot from "../ui.other-dot";
-import URow from "../ui.container-row";
-
-import { getArgTypes } from "../service.storybook";
-
-export default {
-  id: "9010",
-  title: "Other / Dot",
-  component: UDot,
-  argTypes: {
-    ...getArgTypes(UDot.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UDot },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDot v-bind="args" />
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDot
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};

package/src/ui.other-dot/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" />
-</template>
-
-<script setup>
-import UIService from "../service.ui";
-
-import { UDot } 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: "UDot", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Dot color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UDot).default.color,
-  },
-
-  /**
-   * Dot size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, UDot).default.size,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs } = useAttrs(props);
-</script>

package/src/ui.other-loader/composables/attrs.composable.js

@@ -1,51 +0,0 @@
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../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 { loader, ellipse } = config.value;
-
-  const cvaLoader = cva({
-    base: loader.base,
-    variants: loader.variants,
-    compoundVariants: loader.compoundVariants,
-  });
-
-  const cvaEllipse = cva({
-    base: ellipse.base,
-    variants: ellipse.variants,
-    compoundVariants: ellipse.compoundVariants,
-  });
-
-  const loaderClasses = computed(() =>
-    cvaLoader({
-      size: props.size,
-    }),
-  );
-
-  const ellipseClasses = computed(() =>
-    setColor(
-      cvaEllipse({
-        size: props.size,
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
-
-  const loaderAttrs = getAttrs("loader", { classes: loaderClasses });
-  const ellipseRaw = getAttrs("ellipse", { classes: ellipseClasses });
-
-  const ellipseAttrs = computed(() => (classes) => ({
-    ...ellipseRaw.value,
-    class: cx([ellipseRaw.value.class, classes]),
-  }));
-
-  return {
-    loaderAttrs,
-    ellipseAttrs,
-  };
-}

package/src/ui.other-loader/configs/default.config.js

@@ -1,47 +0,0 @@
-export default /*tw*/ {
-  loader: {
-    base: "relative mx-1 flex h-4 items-center",
-    variants: {
-      size: {
-        sm: "w-9",
-        md: "w-[3.625rem]",
-        lg: "w-20",
-      },
-    },
-  },
-  ellipse: {
-    base: `absolute rounded-full bg-{color}-500 ease-[cubic-bezier(0,1,1,0)]`,
-    variants: {
-      color: {
-        white: "bg-white",
-        grayscale: "bg-gray-900",
-      },
-      size: {
-        sm: `
-            h-1.5 w-1.5
-            [&:nth-child(1)]:left-1
-            [&:nth-child(4)]:left-7
-          `,
-        md: `
-            h-2.5 w-2.5
-            [&:nth-child(1)]:left-1.5
-            [&:nth-child(2)]:left-1.5
-            [&:nth-child(3)]:left-6
-            [&:nth-child(4)]:left-[2.625rem]
-          `,
-        lg: `
-            h-4 w-4
-            [&:nth-child(1)]:left-2
-            [&:nth-child(2)]:left-2
-            [&:nth-child(3)]:left-8
-            [&:nth-child(4)]:left-14
-          `,
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    color: "brand",
-  },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
-};

package/src/ui.other-loader/constants/index.js

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

package/src/ui.other-loader/index.stories.js

@@ -1,78 +0,0 @@
-import ULoader from "../ui.other-loader";
-import URow from "../ui.container-row";
-
-import { getArgTypes } from "../service.storybook";
-
-export default {
-  id: "9020",
-  title: "Other / Loader",
-  component: ULoader,
-  argTypes: {
-    ...getArgTypes(ULoader.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { ULoader },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULoader v-bind="args" />
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoader, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULoader
-        v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoader, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULoader
-        v-for="(size, index) in sizes"
-        :size="size"
-        :label="getText(size)"
-        v-bind="args"
-        :key="index"
-      />
-    </URow>
-  `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};
-
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
-
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};