aloha-vue 1.0.10 → 1.0.11

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.9",
+    "aloha-css": "1.0.10",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",
@@ -41,8 +41,8 @@
     "sass-loader": "12.6.0",
     "source-map-loader": "3.0.1",
     "style-loader": "3.3.1",
-    "vue-loader": "17.0.0",
     "vue-eslint-parser": "8.3.0",
+    "vue-loader": "17.0.0",
     "vue-pug-loader": "1.1.26",
     "webpack": "5.73.0",
     "webpack-cli": "4.10.0",

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

@@ -43,6 +43,11 @@ export default {
           name: "PageAccordion",
           label: "Accordion",
         },
+        {
+          id: "alert",
+          name: "PageAlert",
+          label: "Alert",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -54,6 +54,11 @@ const ROUTES = [
     name: "PageAccordion",
     component: () => import(/* webpackChunkName: "PageAccordionBootstrap" */ "../views/PageAccordion/PageAccordion.vue"),
   },
+  {
+    path: "/alert",
+    name: "PageAlert",
+    component: () => import(/* webpackChunkName: "PageAlert" */ "../views/PageAlert/PageAlert.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/PageAlert/PageAlert.js

@@ -0,0 +1,27 @@
+import AAlert from "../../../../src/AAlert/AAlert";
+
+export default {
+  name: "PageAlert",
+  components: {
+    AAlert,
+  },
+  data() {
+    return {
+      alerts: [
+        "primary",
+        "secondary",
+        "success",
+        "danger",
+        "warning",
+        "info",
+        "dark",
+      ],
+      isAlertsHidden: {},
+    };
+  },
+  methods: {
+    closeAlert(alert) {
+      this.isAlertsHidden[alert] = true;
+    },
+  },
+};

package/docs/src/views/PageAlert/PageAlert.pug

@@ -0,0 +1,10 @@
+div
+  a-alert(
+    v-for="alert in alerts"
+    :key="alert"
+    :type="alert"
+    :is-visible="!isAlertsHidden[alert]"
+    :is-dismissible="true"
+    @on-dismiss="closeAlert(alert)"
+  )
+    div Alert {{ alert }}

package/docs/src/views/PageAlert/PageAlert.vue

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.8",
+    "aloha-css": "1.0.10",
     "lodash-es": "^4.17.21",
     "vue": "3.2.37"
   }

package/src/AAlert/AAlert.js

@@ -0,0 +1,62 @@
+import {
+  h,
+} from "vue";
+
+export default {
+  name: "AAlert",
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: "danger",
+    },
+    isDismissible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    alertClass: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+  },
+  emits: [
+    "onDismiss",
+  ],
+  computed: {
+    alertClassLocal() {
+      let alertClass = `a_alert a_alert_${ this.type }`;
+      if (this.isDismissible) {
+        alertClass += " a_alert_dismissible";
+      }
+      return alertClass;
+    },
+  },
+  methods: {
+    onDismissLocal() {
+      this.$emit("onDismiss");
+    },
+  },
+  render() {
+    return h("div", {
+      role: "alert",
+    }, [
+      this.isVisible && h("div", {
+        class: [this.alertClass, this.alertClassLocal],
+      }, [
+        this.$slots.default && this.$slots.default(),
+        this.isDismissible && h("button", {
+          type: "button",
+          class: "a_btn_close",
+          ariaLabel: "Close",
+          onClick: this.onDismissLocal,
+        })
+      ]),
+    ]);
+  },
+};