vueless 0.0.3 → 0.0.5

package/{ui.navigation-stepper → src/ui.navigation-stepper}/index.vue

@@ -46,9 +46,9 @@ import { computed } from "vue";
 import colors from "tailwindcss/colors";
 import { grayColors } from "../service.tailwind";
 
-import UHeader from "vueless/ui.text-header";
+import UHeader from "../ui.text-header";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UStepper } from "./constants/index";
 import defaultConfig from "./configs/default.config";

package/{ui.navigation-tab → src/ui.navigation-tab}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.navigation-tab → src/ui.navigation-tab}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UTab from "vueless/ui.navigation-tab";
-import UIcon from "vueless/ui.image-icon";
+import UTab from "../ui.navigation-tab";
+import UIcon from "../ui.image-icon";
 
 export default {
   id: "8010",

package/{ui.navigation-tab → src/ui.navigation-tab}/index.vue

@@ -10,7 +10,7 @@
 <script setup>
 import { computed, inject } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UTab } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.navigation-tabs → src/ui.navigation-tabs}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.navigation-tabs → src/ui.navigation-tabs}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UTabs from "vueless/ui.navigation-tabs";
+import UTabs from "../ui.navigation-tabs";
 
 export default {
   id: "8020",

package/{ui.navigation-tabs → src/ui.navigation-tabs}/index.vue

@@ -17,8 +17,8 @@
 <script setup>
 import { computed, provide } from "vue";
 
-import UIService from "vueless/service.ui";
-import UTab from "vueless/ui.navigation-tab";
+import UIService from "../service.ui";
+import UTab from "../ui.navigation-tab";
 
 import { UTabs } from "./constants";
 import defaultConfig from "./configs/default.config";

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

@@ -0,0 +1,102 @@
+import NotifyServiceDefault from "../ui.notify/services";
+
+import UNotify from "../ui.notify";
+import UButton from "../ui.button";
+
+import { getArgTypes } from "../service.storybook";
+
+const NotifyService = new NotifyServiceDefault();
+
+export default {
+  title: "Other / Notify",
+  component: UNotify,
+  args: {
+    type: "success",
+    code: "code",
+    title: "",
+    text: "",
+    duration: "short",
+    ignoreDuplicates: false,
+  },
+  argTypes: {
+    ...getArgTypes(UNotify.name),
+    type: {
+      description: "The type of notify.",
+      defaultValue: { summary: "success" },
+      options: ["success", "warning", "error"],
+      control: {
+        type: "radio",
+      },
+    },
+    code: {
+      description:
+        "Unique translation code, for ex. `categoryCreated`, " +
+        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
+      defaultValue: { summary: "" },
+      control: {
+        type: "text",
+      },
+    },
+    title: {
+      description: "Notify title.",
+      defaultValue: { summary: "" },
+      control: {
+        type: "text",
+      },
+    },
+    text: {
+      description: "Notify text (description).",
+      defaultValue: { summary: "" },
+      control: {
+        type: "text",
+      },
+    },
+    duration: {
+      description: "The notify visibility duration.",
+      defaultValue: { summary: "short" },
+      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
+      control: {
+        type: "radio",
+      },
+    },
+    ignoreDuplicates: {
+      description: "Show only 1 notify at once.",
+      defaultValue: { summary: false },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UNotify, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div>
+      <UNotify v-bind="args"/>
+
+      <UButton label="show notify" @click="onClick"/>
+    </div>
+ `,
+
+  methods: {
+    onClick() {
+      const settings = {
+        type: args.type,
+        code: args.code,
+        title: args.title,
+        text: args.text,
+        duration: args.duration,
+        ignoreDuplicates: args.ignoreDuplicates,
+      };
+
+      NotifyService.notify(settings);
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};

package/src/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/src/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 → src/ui.other-dot}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.other-dot → src/ui.other-dot}/index.stories.js

@@ -1,7 +1,7 @@
-import UDot from "vueless/ui.other-dot";
-import URow from "vueless/ui.container-row";
+import UDot from "../ui.other-dot";
+import URow from "../ui.container-row";
 
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
 export default {
   id: "9010",

package/{ui.other-dot → src/ui.other-dot}/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UDot } from "./constants";
 import defaultConfig from "./configs/default.config";

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

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.other-loader → src/ui.other-loader}/index.stories.js

@@ -1,7 +1,7 @@
-import ULoader from "vueless/ui.other-loader";
-import URow from "vueless/ui.container-row";
+import ULoader from "../ui.other-loader";
+import URow from "../ui.container-row";
 
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
 export default {
   id: "9020",

package/{ui.other-loader → src/ui.other-loader}/index.vue

@@ -6,7 +6,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { ULoader } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.text-alert → src/ui.text-alert}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.text-alert → src/ui.text-alert}/configs/default.config.js

@@ -9,7 +9,7 @@ export default /*tw*/ {
         true: "border border-{color}-100",
       },
     },
-    compoundVariants: [{ color: "grayscale", bordered: true, class: "border-{color}-200" }],
+    compoundVariants: [{ color: "grayscale", bordered: true, class: "border-gray-200" }],
   },
   body: {
     base: `

package/{ui.text-alert → src/ui.text-alert}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UAlert from "vueless/ui.text-alert";
-import URow from "vueless/ui.container-row";
+import UAlert from "../ui.text-alert";
+import URow from "../ui.container-row";
 export default {
   id: "4030",
   title: "Text & Content / Alert",

package/{ui.text-alert → src/ui.text-alert}/index.vue

@@ -24,8 +24,8 @@
 <script setup>
 import { onMounted, ref, useSlots } from "vue";
 
-import UIcon from "vueless/ui.image-icon/index.vue";
-import UIService from "vueless/service.ui";
+import UIcon from "../ui.image-icon/index.vue";
+import UIService from "../service.ui";
 
 import { UAlert } from "./constatns";
 import defaultConfig from "./configs/default.config";

package/src/ui.text-badge/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../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.text-badge → src/ui.text-badge}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.text-badge → src/ui.text-badge}/index.stories.js

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UBadge from "vueless/ui.text-badge";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/ui.container-group";
+import UBadge from "../ui.text-badge";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "4090",

package/{ui.text-badge → src/ui.text-badge}/index.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UBadge } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";

package/{ui.text-block → src/ui.text-block}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";