vueless 0.0.10 → 0.0.11

package/ui.notify/index.vue

@@ -0,0 +1,248 @@
+<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/ui.notify/services/index.js

@@ -0,0 +1,87 @@
+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/ui.other-dot/composables/attrs.composable.js

@@ -0,0 +1,32 @@
+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/ui.other-dot/configs/default.config.js

@@ -0,0 +1,21 @@
+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/ui.other-dot/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 UDot = "UDot";

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

@@ -0,0 +1,77 @@
+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/ui.other-dot/index.vue

@@ -0,0 +1,52 @@
+<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/ui.other-loader/composables/attrs.composable.js

@@ -0,0 +1,51 @@
+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/ui.other-loader/configs/default.config.js

@@ -0,0 +1,47 @@
+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/ui.other-loader/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 ULoader = "ULoader";

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

@@ -0,0 +1,78 @@
+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 = {};