aloha-vue 1.0.13 → 1.0.14

package/docs/package.json

@@ -11,7 +11,7 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "aloha-css": "1.0.11",
+    "aloha-css": "1.0.13",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

package/docs/src/App/App.js

@@ -1,4 +1,5 @@
 import AModalConfirm from "../../../src/AModalConfirm/AModalConfirm";
+import ANotification from "../../../src/ANotification/ANotification";
 import TheMenu from "../components/TheMenu/TheMenu.vue";
 import TheNavbar from "../components/TheNavbar/TheNavbar.vue";
 
@@ -10,6 +11,7 @@ import {
 export default defineComponent({
   components: {
     AModalConfirm,
+    ANotification,
     TheMenu,
     TheNavbar,
   },

package/docs/src/App/App.pug

@@ -9,4 +9,5 @@ div
     )
       router-view
 
-  a-modal-confirm
+  a-modal-confirm
+  a-notification

package/docs/src/components/TheMenu/TheMenu.js

@@ -58,6 +58,11 @@ export default {
           name: "PageConfirm",
           label: "Confirm",
         },
+        {
+          id: "notification",
+          name: "PageNotification",
+          label: "Notification",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -69,6 +69,11 @@ const ROUTES = [
     name: "PageConfirm",
     component: () => import(/* webpackChunkName: "PageConfirm" */ "../views/PageConfirm/PageConfirm.vue"),
   },
+  {
+    path: "/notification",
+    name: "PageNotification",
+    component: () => import(/* webpackChunkName: "PageNotification" */ "../views/PageNotification/PageNotification.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

package/docs/src/views/PageConfirm/PageConfirm.js

@@ -14,7 +14,6 @@ export default {
     } = ConfirmAPI();
 
     const save = () => {
-      console.log("Aloha");
       closeConfirm();
     };
 

package/docs/src/views/PageNotification/PageNotification.js

@@ -0,0 +1,34 @@
+import ANotificationAPI from "../../../../src/compositionAPI/ANotificationAPI";
+
+export default {
+  name: "PageNotification",
+  setup() {
+    const {
+      addNotification,
+    } = ANotificationAPI();
+
+    const addNotificationLocal = type => {
+      addNotification({
+        text: type,
+        type,
+      });
+    };
+
+    return {
+      addNotificationLocal,
+    };
+  },
+  data() {
+    return {
+      types: [
+        "primary",
+        "secondary",
+        "success",
+        "danger",
+        "warning",
+        "info",
+        "dark",
+      ],
+    };
+  },
+};

package/docs/src/views/PageNotification/PageNotification.pug

@@ -0,0 +1,9 @@
+div
+  h1 ANotification
+  button.a_btn.a_mr_2(
+    v-for="type in types"
+    :key="type"
+    :class="'a_btn_' + type"
+    type="button"
+    @click="addNotificationLocal(type)"
+  ) Add Notification {{ type }}

package/docs/src/views/PageNotification/PageNotification.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageNotification.pug"></template>
+<script src="./PageNotification.js"></script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",

package/src/AModal/AModal.js

@@ -168,8 +168,19 @@ export default {
       return "";
     },
   },
+  watch: {
+    isModalHidden() {
+      if (this.isModalHidden) {
+        this.hideModal();
+      } else {
+        this.showModal();
+      }
+    },
+  },
   mounted() {
-    this.showModal();
+    if (!this.isModalHidden) {
+      this.showModal();
+    }
   },
   unmounted() {
     this.hideModal();
@@ -208,11 +219,7 @@ export default {
       if (this.withoutEscape) {
         return;
       }
-      if (this.confirmOptions && isFunction(this.confirmOptions.cancelCallback)) {
-        this.confirmOptions.cancelCallback();
-      } else {
-        this.onClose();
-      }
+      this.close();
     },
 
     trapFocus(EVENT) {
@@ -401,6 +408,9 @@ export default {
           ]),
         ]),
       ]),
+      !this.isModalHidden && h("div", {
+        class: "a_modal_backdrop a_modal_backdrop_show",
+      })
     ]);
   },
 };

package/src/ANotification/ANotification.js

@@ -0,0 +1,46 @@
+import {
+  h,
+  Teleport,
+} from "vue";
+
+import AAlert from "../AAlert/AAlert";
+
+import ANotificationAPI from "../compositionAPI/ANotificationAPI";
+
+// @vue/component
+export default {
+  name: "ANotification",
+  setup() {
+    const {
+      notifications,
+      removeNotification,
+    } = ANotificationAPI();
+
+    return {
+      notifications,
+      removeNotification,
+    };
+  },
+  render() {
+    return h(Teleport, {
+      to: "body",
+    }, [
+      h("div", {
+        class: "a_notification_parent",
+      }, this.notifications.map(notification => {
+        return h(AAlert, {
+          key: notification.index,
+          isVisible: true,
+          isDismissible: true,
+          type: notification.type,
+          alertClass: "a_notification",
+          onOnDismiss: () => this.removeNotification(notification.index),
+        }, () => [
+          h("div", {
+            innerHTML: notification.text,
+          }),
+        ]);
+      })),
+    ]);
+  },
+};

package/src/compositionAPI/ANotificationAPI.js

@@ -0,0 +1,51 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  values,
+} from "lodash-es";
+
+let notificationTimeout = 5000;
+const notificationsObj = ref({});
+const notifications = computed(() => {
+  return values(notificationsObj.value);
+});
+let notificationsCount = 0;
+
+export default function ANotificationAPI() {
+  const removeNotification = notificationIndex => {
+    if (notificationsObj.value[notificationIndex]) {
+      delete notificationsObj.value[notificationIndex];
+    }
+  };
+
+  const addNotification = ({ text, type = "success", timeout }) => {
+    const TIMEOUT_LOCAL = timeout || notificationTimeout;
+    const CURRENT_INDEX = notificationsCount;
+    notificationsObj.value[CURRENT_INDEX] = {
+      text,
+      type,
+      index: CURRENT_INDEX,
+    };
+    notificationsCount++;
+
+    if (TIMEOUT_LOCAL) {
+      setTimeout(() => {
+        removeNotification(CURRENT_INDEX);
+      }, TIMEOUT_LOCAL);
+    }
+  };
+
+  const setNotificationTimeout = timeout => {
+    notificationTimeout = timeout;
+  };
+
+  return {
+    addNotification,
+    removeNotification,
+    notifications,
+    setNotificationTimeout,
+  };
+}