vueless 0.0.51 → 0.0.52

package/ui.notify/composables/attrs.composable.js

@@ -0,0 +1,30 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const bodyAttrs = getAttrs("body");
+  const contentAttrs = getAttrs("content");
+  const labelAttrs = getAttrs("label");
+  const descriptionAttrs = getAttrs("description");
+  const iconSuccessAttrs = getAttrs("iconSuccess");
+  const iconWarningAttrs = getAttrs("iconWarning");
+  const iconErrorAttrs = getAttrs("iconError");
+  const iconCloseAttrs = getAttrs("iconClose");
+
+  return {
+    config,
+    wrapperAttrs,
+    bodyAttrs,
+    contentAttrs,
+    labelAttrs,
+    descriptionAttrs,
+    iconSuccessAttrs,
+    iconWarningAttrs,
+    iconCloseAttrs,
+    iconErrorAttrs,
+  };
+}

package/ui.notify/configs/default.config.js

@@ -0,0 +1,47 @@
+export default /*tw*/ {
+  wrapper: "absolute overflow-visible md:w-[22rem]",
+  body: `
+    mb-3 flex w-fit items-center justify-center gap-3 rounded-2xl bg-gray-900/90 
+    p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
+  `,
+  bodySuccess: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",
+  bodyWarning: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,146,60,0.2)_2.17%,transparent)]",
+  bodyError: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,113,133,0.2)_2.17%,transparent)]",
+  content: "w-full flex flex-col max-w-full px-3 text-sm text-gray-200",
+  label: "mb-1 font-medium",
+  description: "break-words font-normal leading-5",
+  iconSuccess: "",
+  iconSuccessName: "check_circle",
+  iconWarning: "",
+  iconWarningName: "warning",
+  iconError: "",
+  iconErrorName: "error",
+  iconClose: "",
+  iconCloseName: "close",
+  transitionGroup: {
+    moveClass: "transition-all duration-500",
+    enterActiveClass: "transition-all duration-500",
+    leaveActiveClass: "transition-all duration-500 absolute",
+    enterFromClass: "opacity-0",
+    leaveToClass: "opacity-0",
+  },
+  duration: {
+    short: 4000,
+    medium: 8000,
+    long: 12000,
+  },
+  i18n: {
+    success: "Operation successful.",
+    warning: "Operation warning.",
+    error: "Operation error.",
+  },
+  positionClasses: {
+    page: "UNotifyPage",
+    aside: "UNotifyAside",
+  },
+  defaultVariants: {
+    xPosition: "center",
+    yPosition: "top",
+    vHtml: false,
+  },
+};

package/ui.notify/constants/index.js

@@ -0,0 +1,19 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UNotify = "UNotify";
+
+export const NOTIFY_TYPE = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+};
+
+export const POSITION = {
+  left: "left",
+  right: "right",
+  top: "top",
+  bottom: "bottom",
+  center: "center",
+};

package/ui.notify/index.stories.js

@@ -0,0 +1,77 @@
+import { notify } from "../ui.notify/services";
+
+import UNotify from "../ui.notify";
+import UButton from "../ui.button";
+
+import { getArgTypes } from "../service.storybook";
+
+export default {
+  title: "Other / Notify",
+  component: UNotify,
+  args: {
+    type: "success",
+    label: "",
+    text: "",
+  },
+  argTypes: {
+    ...getArgTypes(UNotify.name),
+  },
+};
+
+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: "success",
+        label: "Some label",
+      };
+
+      notify(settings);
+    },
+  },
+});
+
+const TypesTemplate = (args) => ({
+  components: { UNotify, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="flex gap-4">
+      <UNotify />
+
+      <UButton label="Success" @click="onClick('success')"/>
+      <UButton label="Warning" @click="onClick('warning')"/>
+      <UButton label="Error" @click="onClick('error')"/>
+    </div>
+ `,
+
+  methods: {
+    onClick(type) {
+      const settings = { type };
+
+      notify(settings);
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const position = DefaultTemplate.bind({});
+position.args = { xPosition: "right", yPosition: "bottom" };
+
+export const types = TypesTemplate.bind({});
+types.args = {};

package/ui.notify/index.vue

@@ -1,248 +1,230 @@
 <template>
-  <notifications
-    group="notify"
-    class="vueless-notify mt-safe-top !top-3 !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
-    :position="position"
+  <TransitionGroup
+    ref="notificationsWrapperRef"
+    :style="notifyPositionStyles"
+    tag="div"
+    v-bind="{ ...config.transitionGroup, ...wrapperAttrs }"
   >
-    <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
+      v-for="notification in notifications"
+      :key="notification.id"
+      v-bind="bodyAttrs"
+      :class="getNotificationClasses(notification)"
+    >
+      <UIcon
+        v-if="notification.type === NOTIFY_TYPE.success"
+        data-cy="type-notify"
+        color="green"
+        variant="light"
+        size="md"
+        :name="config.iconSuccessName"
+        v-bind="iconSuccessAttrs"
+      />
+
+      <UIcon
+        v-else-if="notification.type === NOTIFY_TYPE.warning"
+        data-cy="type-notify"
+        color="orange"
+        variant="light"
+        size="md"
+        :name="config.iconWarningName"
+        v-bind="iconWarningAttrs"
+      />
+
+      <UIcon
+        v-else-if="notification.type === NOTIFY_TYPE.error"
+        data-cy="type-notify"
+        color="red"
+        variant="light"
+        size="md"
+        :name="config.iconErrorName"
+        v-bind="iconErrorAttrs"
+      />
+
+      <div v-bind="contentAttrs">
+        <template v-if="vHtml">
+          <span v-bind="labelAttrs" v-html="notification.label" />
+          <span v-bind="descriptionAttrs" v-html="getText(notification.text, notification.type)" />
+        </template>
+        <template v-else>
+          <span v-bind="labelAttrs" v-text="notification.label" />
+          <span v-bind="descriptionAttrs" v-text="getText(notification.text, notification.type)" />
+        </template>
       </div>
-    </template>
-  </notifications>
+
+      <UIcon
+        color="gray"
+        variant="light"
+        size="xs"
+        interactive
+        :name="config.iconCloseName"
+        v-bind="iconCloseAttrs"
+        @click="onClickClose(notification)"
+      />
+    </div>
+  </TransitionGroup>
 </template>
 
-<script>
-import { globalComponentConfig } from "../service.ui";
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
+import UIService, { globalComponentConfig, cx } from "../service.ui";
 
-const NOTIFY_TYPE = {
-  success: "success",
-  warning: "warning",
-  error: "error",
-};
+import { useLocale } from "../composable.locale";
+import { useAttrs } from "./composables/attrs.composable";
 
-export default {
-  name: "UNotify",
-  components: {
-    UIcon,
-  },
+import defaultConfig from "./configs/default.config";
+import { UNotify, NOTIFY_TYPE, POSITION } from "./constants";
 
-  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",
-    },
-  },
+import UIcon from "../ui.image-icon";
 
-  data() {
-    return {
-      type: null,
-    };
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UNotify", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * A position on the x-axis.
+   * @values left, center, right
+   */
+  xPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UNotify).default.xPosition,
   },
 
-  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];
-    },
+  /**
+   * A position on the y-axis.
+   * @values top, bottom
+   */
+  yPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UNotify).default.yPosition,
   },
 
-  created() {
-    window.addEventListener("resize", this.setPosition, { passive: true });
+  /**
+   * Use v-html to render notification label and description content.
+   */
+  vHtml: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UNotify).default.vHtml,
   },
 
-  beforeUnmount() {
-    window.removeEventListener("resize", this.setPosition);
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
   },
+});
+
+const {
+  config,
+  wrapperAttrs,
+  bodyAttrs,
+  contentAttrs,
+  labelAttrs,
+  descriptionAttrs,
+  iconSuccessAttrs,
+  iconWarningAttrs,
+  iconErrorAttrs,
+  iconCloseAttrs,
+} = useAttrs(props);
+
+const { tm } = useLocale();
+
+const notifications = ref([]);
+const notifyPositionStyles = ref({});
+
+const notificationsWrapperRef = ref(null);
+
+const currentLocale = computed(() => merge(tm("UNotify"), props.config.i18n));
+
+onMounted(() => {
+  window.addEventListener("resize", setPosition, { passive: true });
+  window.addEventListener("notifyStart", onNotifyStart);
+  window.addEventListener("notifyEnd", onNotifyEnd);
+  window.addEventListener("notifyClearAll", onClearAll);
+
+  setPosition();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", setPosition);
+  window.removeEventListener("notifyStart", onNotifyStart);
+  window.removeEventListener("notifyEnd", onNotifyEnd);
+  window.removeEventListener("notifyClearAll", onClearAll);
+});
+
+function onNotifyStart(event) {
+  notifications.value.push({ ...event.detail });
+}
 
-  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 || "UNotifyPage");
-      const asideWidth = getOffsetWidth(classes.aside || "UNotifyAside");
-      const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
+function onNotifyEnd(event) {
+  notifications.value = notifications.value.filter(
+    (notification) => notification.id !== event.detail.id,
+  );
+}
 
-      if (!pageWidth) return;
+function onClearAll() {
+  notifications.value = [];
+}
 
-      const leftShift = asideWidth + pageWidth / 2 - notifyWidth / 2;
+function onClickClose(targetNotification) {
+  notifications.value = notifications.value.filter(
+    (notification) => notification.id !== targetNotification.id,
+  );
+}
 
-      document.querySelector(`.${NOTIFY_CLASS}`).style.setProperty("left", `${leftShift}px`);
-    },
-  },
-};
-</script>
+function getOffsetWidth(selector) {
+  return document.querySelector(selector)?.offsetWidth || 0;
+}
 
-<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;
+function setPosition() {
+  const positionClasses = globalComponentConfig.UNotify?.positionClasses;
+  const pageClass = positionClasses?.page || config.value.positionClasses.page;
+  const asideClass = positionClasses?.aside || config.value.positionClasses.aside;
+  const pageWidth = getOffsetWidth(`${pageClass}`);
+  const asideWidth = getOffsetWidth(`${asideClass}`);
+  const notifyWidth = notificationsWrapperRef.value.$el?.offsetWidth || 0;
+
+  const styles = {
+    left: "auto",
+    top: "auto",
+    right: "auto",
+    bottom: "auto",
+  };
+
+  styles[props.yPosition] = "0px";
+
+  if (props.xPosition === POSITION.center) {
+    styles.left = `calc(50% - ${notifyWidth / 2}px)`;
+  } else {
+    styles[props.xPosition] = "0px";
   }
 
-  :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;
-      }
-    }
+  if (pageWidth && props.xPosition !== POSITION.right) {
+    styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
   }
 
-  :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;
-    }
-  }
+  notifyPositionStyles.value = styles;
+}
 
-  :deep(.success) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(74, 222, 128, 0.1) 2.17%,
-      transparent
-    );
+function getText(notificationText, type) {
+  return notificationText || currentLocale.value[type];
+}
 
-    .type-icon path {
-      @apply fill-current text-green-400;
-    }
+function getNotificationClasses(notification) {
+  if (notification.type === NOTIFY_TYPE.success) {
+    return cx([bodyAttrs.value.class, config.value.bodySuccess]);
   }
 
-  :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;
-    }
+  if (notification.type === NOTIFY_TYPE.warning) {
+    return cx([bodyAttrs.value.class, config.value.bodyWarning]);
   }
 
-  /*
-    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;
+  if (notification.type === NOTIFY_TYPE.error) {
+    return cx([bodyAttrs.value.class, config.value.bodyError]);
   }
 }
-</style>
+</script>