aloha-vue 1.0.335 → 1.0.337

package/README.md

@@ -1,2 +1,36 @@
-# aloha-vue
-aloha
+
+![Aloha Framework logo](./static/aloha_logo.png)
+# aloha-vue 
+v1.0.337
+
+---
+
+Aloha is a Vue.js-based, highly customizable, internationalized framework for helping developers write code faster and more efficient, with an especial focus on accessibility.
+
+
+## Installation
+``` bash
+$ npm install aloha-vue
+```
+## Usage
+
+## Developement
+
+### Documentation
+
+``` bash
+# at aloha/docs
+# serve with hot reloading at localhost:9000
+$ npm run serve
+```
+
+
+## Documentation
+
+The documentation can be found in the docs/ directory. Each component has a dedicated demo page outlining both basic and advanced usage, along with an overview table.
+
+Aloha documentation is available in English, German, Spanish, French, Arabic, Italian, Russian and Croatian.
+
+
+## License
+aloha-vue is released under [MIT](https://github.com/ilia-brykin/aloha/blob/master/LICENSE) license.

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

@@ -85,6 +85,20 @@ export default {
           },
           icon: "CheckLg",
         },
+        {
+          id: "directives",
+          label: "Directives",
+          icon: "CodeSquare",
+          children: [
+            {
+              id: "OnHooks",
+              label: "OnHooks",
+              to: {
+                name: "PageOnHooks",
+              }
+            },
+          ],
+        },
         {
           id: "dropdown",
           label: "Dropdown",

package/docs/src/mainIcons.js

@@ -5,6 +5,7 @@ import CheckLg from "../../src/AIcon/Icons/bootstrap-1-9-1/CheckLg";
 import ChevronDown from "../../src/AIcon/Icons/bootstrap-1-9-1/ChevronDown";
 import ChevronExpand from "../../src/AIcon/Icons/bootstrap-1-9-1/ChevronExpand";
 import ChevronRight from "../../src/AIcon/Icons/bootstrap3/ChevronRight";
+import CodeSquare from "../../src/AIcon/Icons/bootstrap-1-9-1/CodeSquare";
 import Duplicate from "../../src/AIcon/Icons/bootstrap3/Duplicate";
 import EjectFill from "../../src/AIcon/Icons/bootstrap-1-9-1/EjectFill";
 import Envelope from "../../src/AIcon/Icons/bootstrap3/Envelope";
@@ -33,6 +34,7 @@ export default {
   ChevronDown,
   ChevronExpand,
   ChevronRight,
+  CodeSquare,
   Duplicate,
   EjectFill,
   Envelope,

package/docs/src/mainTranslation.js

@@ -1,11 +1,4 @@
-import arGlobal from "../../src/i18n/ar.json";
-import deGlobal from "../../src/i18n/de.json";
-import enGlobal from "../../src/i18n/en.json";
-import esGlobal from "../../src/i18n/es.json";
-import frGlobal from "../../src/i18n/fr.json";
-import hrGlobal from "../../src/i18n/hr.json";
-import itGlobal from "../../src/i18n/it.json";
-import ruGlobal from "../../src/i18n/ru.json";
+import allLanguages from "../../src/i18n/allLanguages";
 
 import ar from "./i18n/ar.json";
 import de from "./i18n/de.json";
@@ -25,10 +18,11 @@ import PageTableI18n from "./views/PageTable/i18n/PageTableI18n";
 import PageTableSimpleI18n from "./views/PageTable/PageTableSimple/i18n/PageTableSimpleI18n";
 import PageTablePaginationI18n from "./views/PageTable/PageTablePagination/i18n/PageTablePaginationI18n";
 import PageTableSortI18n from "./views/PageTable/PageTableSort/i18n/PageTableSortI18n";
+import PageAOnHooksI18n from "./views/PageDirectives/PageOnHooks/i18n/PageAOnHooksI18n";
 
 export const mainTranslation = {
   ar: {
-    ...arGlobal,
+    ...allLanguages.ar,
     ...ar,
     ...PageAAlertI18n.ar,
     ...PageShowMoreI18n.ar,
@@ -39,9 +33,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.ar,
     ...PageTablePaginationI18n.ar,
     ...PageTableSortI18n.ar,
+    ...PageAOnHooksI18n.ar,
   },
   de: {
-    ...deGlobal,
+    ...allLanguages.de,
     ...de,
     ...PageAAlertI18n.de,
     ...PageShowMoreI18n.de,
@@ -52,9 +47,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.de,
     ...PageTablePaginationI18n.de,
     ...PageTableSortI18n.de,
+    ...PageAOnHooksI18n.de,
   },
   en: {
-    ...enGlobal,
+    ...allLanguages.en,
     ...en,
     ...PageAAlertI18n.en,
     ...PageShowMoreI18n.en,
@@ -65,9 +61,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.en,
     ...PageTablePaginationI18n.en,
     ...PageTableSortI18n.en,
+    ...PageAOnHooksI18n.en,
   },
   es: {
-    ...esGlobal,
+    ...allLanguages.es,
     ...es,
     ...PageAAlertI18n.es,
     ...PageShowMoreI18n.es,
@@ -78,9 +75,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.es,
     ...PageTablePaginationI18n.es,
     ...PageTableSortI18n.es,
+    ...PageAOnHooksI18n.es,
   },
   fr: {
-    ...frGlobal,
+    ...allLanguages.fr,
     ...fr,
     ...PageAAlertI18n.fr,
     ...PageShowMoreI18n.fr,
@@ -91,9 +89,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.fr,
     ...PageTablePaginationI18n.fr,
     ...PageTableSortI18n.fr,
+    ...PageAOnHooksI18n.fr,
   },
   hr: {
-    ...hrGlobal,
+    ...allLanguages.hr,
     ...hr,
     ...PageAAlertI18n.hr,
     ...PageShowMoreI18n.hr,
@@ -104,9 +103,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.hr,
     ...PageTablePaginationI18n.hr,
     ...PageTableSortI18n.hr,
+    ...PageAOnHooksI18n.hr,
   },
   it: {
-    ...itGlobal,
+    ...allLanguages.it,
     ...it,
     ...PageAAlertI18n.it,
     ...PageShowMoreI18n.it,
@@ -117,9 +117,10 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.it,
     ...PageTablePaginationI18n.it,
     ...PageTableSortI18n.it,
+    ...PageAOnHooksI18n.it,
   },
   ru: {
-    ...ruGlobal,
+    ...allLanguages.ru,
     ...ru,
     ...PageAAlertI18n.ru,
     ...PageShowMoreI18n.ru,
@@ -130,5 +131,6 @@ export const mainTranslation = {
     ...PageTableSimpleI18n.ru,
     ...PageTablePaginationI18n.ru,
     ...PageTableSortI18n.ru,
+    ...PageAOnHooksI18n.ru,
   },
 };

package/docs/src/router/index.js

@@ -199,6 +199,11 @@ const ROUTES = [
     name: "PageLink",
     component: () => import(/* webpackChunkName: "PageLink" */ "../views/PageLink/PageLink.vue"),
   },
+  {
+    path: "/on-hooks",
+    name: "PageOnHooks",
+    component: () => import(/* webpackChunkName: "PageOnHooks" */ "../views/PageDirectives/PageOnHooks/PageOnHooks.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/i18n/de.json

@@ -4,23 +4,29 @@
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Auslösen, wenn die Warnung geschlossen ist",
   "_A_ALERT_EXPOSES_CLOSE_DESCRIPTION_": "Funktion: Warnung schließen",
   "_A_ALERT_EXPOSES_IS_HIDDEN_DESCRIPTION_": "Ist die Warnung geschlossen?",
-  "_A_ALERT_GROUP_CLOSABLE_DESCRIPTION_": "<p>Parameter: <strong>:closable=\"true\"</strong> fügt eine Schließfunktion für die Komponente hinzu</p>",
-  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "[ALOHA]",
+  "_A_ALERT_GROUP_CLOSABLE_DESCRIPTION_": "<p>Parameter: <strong>:closable=\"true\"</strong> fügt eine Schließfunktion für die Komponente hinzu.</p>",
+  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "Anstelle der Schließfunktion kann die Komponente mit dem Parameter <strong>:remove-alert-on-close=\"true\"</strong> dauerhaft geschlossen werden.",
   "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_HEADER_": "Komponente dauerhaft schließen",
   "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_SHOW_ALERT_": "Komponente anzeigen",
   "_A_ALERT_GROUP_CLOSABLE_HEADER_": "Schließbar",
-  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>Man kann die Darstellung einzelner Elemente in der Komponente ändern</p>",
+  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>Man kann die Darstellung einzelner Elemente in der Komponente ändern.</p>",
   "_A_ALERT_GROUP_CSS_HEADER_": "Zusätzliche CSS-Klassen",
+  "_A_ALERT_GROUP_EXPOSES_BTN_CLOSE_": "Komponente schließen",
+  "_A_ALERT_GROUP_EXPOSES_BTN_SHOW_": "Komponente anzeigen",
   "_A_ALERT_GROUP_EXPOSES_HEADER_": "Exposes: Öffentliche Eigenschaften",
-  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "Mit dem Parameter <strong>html</strong> können Sie HTML anzeigen",
+  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "<p>Mit dem Parameter <strong>html</strong> können Sie HTML anzeigen. Dieser Inhalt wird bereinigt.</p>",
   "_A_ALERT_GROUP_HTML_HEADER_": "HTML",
-  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>Mit dem Parameter <strong>icon</strong> können Sie ein beliebiges Icon anzeigen</p>",
+  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>Mit dem Parameter <strong>icon</strong> können Sie ein beliebiges Icon anzeigen.</p>",
   "_A_ALERT_GROUP_ICONS_CUSTOM_HEADER_": "Mit benutzerdefiniertem Icon",
   "_A_ALERT_GROUP_ICONS_DEFAULT_DESCRIPTION_": "Das Anzeigen eines Symbols verbessert die Lesbarkeit.",
   "_A_ALERT_GROUP_ICONS_DEFAULT_HEADER_": "Mit Icon",
-  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "Anstatt eines Parameters <strong>html</strong> können Sie einen Slot <strong>default</strong> verwenden",
+  "_A_ALERT_GROUP_SAFE_HTML_DESCRIPTION_": "<p>Der Inhalt der Komponente kann mit dem Parameter <strong>safe-html</strong> im HTML Format angegeben werden. Dieser Inhalt gilt als sicher und wird nicht bereinigt.</p>",
+  "_A_ALERT_GROUP_SAFE_HTML_HEADER_": "Sicheres HTML",
+  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "Anstatt eines Parameters <strong>html</strong> können Sie einen Slot <strong>default</strong> verwenden.",
   "_A_ALERT_GROUP_SLOT_HEADER_": "Slot",
-  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Zeigt die Komponente in einem anderen Farbschema an</p>",
+  "_A_ALERT_GROUP_TEXT_DESCRIPTION_": "<p>Der Inhalt der Komponente kann mit dem Parameter <strong>text</strong> im Plain Text Format angegeben werden.</p>",
+  "_A_ALERT_GROUP_TEXT_HEADER_": "Text",
+  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Zeigt die Komponente in einem anderen Farbschema an.</p>",
   "_A_ALERT_GROUP_TYPES_HEADER_": "Typen",
   "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_": "Zusätzliche CSS-Klasse",
   "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_": "Zusätzliche CSS-Klasse für Inhalt",
@@ -31,7 +37,9 @@
   "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_": "Zusätzliche CSS-Klasse für das Icon",
   "_A_ALERT_PROPS_ICON_DESCRIPTION_": "Icon. Jedes für die <strong>AIcon</strong>-Komponente verfügbare Icon kann verwendet werden",
   "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_": "Ob die Komponente angezeigt wird",
+  "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_": "Sicheres HTML, das innerhalb der Komponente angezeigt werden soll",
   "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_": "Der Text für die Schließen-Schaltfläche, der vom Screenreader vorgelesen werden soll",
+  "_A_ALERT_PROPS_TEXT_DESCRIPTION_": "Plain Text, der innerhalb der Komponente angezeigt werden soll",
   "_A_ALERT_PROPS_TYPE_DESCRIPTION_": "Warnung-Typ",
   "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_": "Inhalt der Warnung"
 }

package/docs/src/views/PageAlert/i18n/en.json

@@ -4,34 +4,42 @@
   "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Trigger when alert is closed",
   "_A_ALERT_EXPOSES_CLOSE_DESCRIPTION_": "Function: close alert",
   "_A_ALERT_EXPOSES_IS_HIDDEN_DESCRIPTION_": "Is the alert closed?",
-  "_A_ALERT_GROUP_CLOSABLE_DESCRIPTION_": "<p>Parameter: <strong>:closable=\"true\"</strong> adds a close function for the component</p>",
-  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "The parameter <strong>:closable-from-outside=\"true\"</strong> allows you to control the closing of the component from the outside",
+  "_A_ALERT_GROUP_CLOSABLE_DESCRIPTION_": "<p>The parameter <strong>:closable=\"true\"</strong> adds a close function for the component.</p>",
+  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "The parameter <strong>:closable-from-outside=\"true\"</strong> allows you to control the closing of the component from the outside.",
   "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_HEADER_": "Closing component with external control",
   "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_SHOW_ALERT_": "Show component",
   "_A_ALERT_GROUP_CLOSABLE_HEADER_": "Closable",
-  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>You can change the appearance of individual elements in the component</p>",
+  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>You can change the appearance of individual elements in the component.</p>",
   "_A_ALERT_GROUP_CSS_HEADER_": "Additional CSS classes",
+  "_A_ALERT_GROUP_EXPOSES_BTN_CLOSE_": "Close component",
+  "_A_ALERT_GROUP_EXPOSES_BTN_SHOW_": "Show component",
   "_A_ALERT_GROUP_EXPOSES_HEADER_": "Exposes: Public Properties",
-  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "Parameter: <strong>html</strong> allows you to display HTML",
+  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "<p>The parameter <strong>html</strong> allows you to display HTML. The content will be sanitized.</p>",
   "_A_ALERT_GROUP_HTML_HEADER_": "HTML",
-  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>Parameter: <strong>icon</strong> allows you to display any icon</p>",
+  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>The parameter <strong>icon</strong> allows you to display any icon.</p>",
   "_A_ALERT_GROUP_ICONS_CUSTOM_HEADER_": "With custom icon",
-  "_A_ALERT_GROUP_ICONS_DEFAULT_DESCRIPTION_": "Displaying an icon improves readability",
+  "_A_ALERT_GROUP_ICONS_DEFAULT_DESCRIPTION_": "Displaying an icon improves readability.",
   "_A_ALERT_GROUP_ICONS_DEFAULT_HEADER_": "With Icon",
-  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "Instead of an html parameter <strong>html</strong>, you can use a slot <strong>default</strong>",
+  "_A_ALERT_GROUP_SAFE_HTML_DESCRIPTION_": "<p>The content of the component can be specified in HTML format using the <strong>safe-html</strong> parameter. This content is considered safe and will not be sanitized.</p>",
+  "_A_ALERT_GROUP_SAFE_HTML_HEADER_": "Safe HTML",
+  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "<p>Instead of an html parameter <strong>html</strong>, you can use a slot <strong>default</strong>.</p>",
   "_A_ALERT_GROUP_SLOT_HEADER_": "Slot",
-  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Parameter: <strong>type</strong></p><p>Displays the component in a different color scheme</p>",
+  "_A_ALERT_GROUP_TEXT_DESCRIPTION_": "<p>The content of the component can be specified in Plain Text format using the <strong>text</strong> parameter.</p>",
+  "_A_ALERT_GROUP_TEXT_HEADER_": "Text",
+  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Displays the component in a different color scheme.</p>",
   "_A_ALERT_GROUP_TYPES_HEADER_": "Types",
   "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_": "Additional CSS class",
   "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_": "Additional CSS class for content",
   "_A_ALERT_PROPS_CLOSABLE_DESCRIPTION_": "Whether alert can be dismissed",
-  "_A_ALERT_PROPS_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "Controlling the closure of an alert from outside a component",
+  "_A_ALERT_PROPS_REMOVE_ALERT_ON_CLOSE_DESCRIPTION_": "Controlling the closure of an alert from outside a component",
   "_A_ALERT_PROPS_HAS_ICON_DESCRIPTION_": "Whether a type icon is displayed",
   "_A_ALERT_PROPS_HTML_DESCRIPTION_": "HTML to be shown inside the component",
   "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_": "Additional CSS class for the icon",
   "_A_ALERT_PROPS_ICON_DESCRIPTION_": "Icon. Any icon available for the <strong>AIcon</strong> component can be used",
   "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_": "Whether the component is shown",
+  "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_": "Safe HTML to be shown inside the component",
   "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_": "The text for the close button to be read by the screen reader",
+  "_A_ALERT_PROPS_TEXT_DESCRIPTION_": "Plain Text to be shown inside the component",
   "_A_ALERT_PROPS_TYPE_DESCRIPTION_": "Alert type",
   "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_": "Content of the alert"
 }

package/docs/src/views/PageAlert/i18n/hr.json

@@ -9,29 +9,37 @@
   "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_HEADER_": "Zatvaranje upozorenja vanjskim upravljanjem",
   "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_SHOW_ALERT_": "Prikaži upozorenje",
   "_A_ALERT_GROUP_CLOSABLE_HEADER_": "Zatvaranje upozorenja",
-  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>Parameteri: <strong>alert-class</strong>, <strong>alert-content-class</strong>, <strong>icon-class</strong></p><p>Mjenjaju prikaz pojedinačnih elemenata komponente.</p>",
+  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>Ovi parameteri mjenjaju prikaz pojedinačnih elemenata komponente.</p>",
   "_A_ALERT_GROUP_CSS_HEADER_": "Dodatni CSS parametri",
+  "_A_ALERT_GROUP_EXPOSES_BTN_CLOSE_": "Zatvori komponentu",
+  "_A_ALERT_GROUP_EXPOSES_BTN_SHOW_": "Prikaži komponentu",
   "_A_ALERT_GROUP_EXPOSES_HEADER_": "Prikaz javnih property-ja i metoda korištenjem funkcije <strong>expose</strong>",
-  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "<p>Parametar: <strong>html</strong> omogućuje prikaz HTML-a unutar upozorenja.</p>",
+  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "<p>Parametar <strong>html</strong> omogućuje prikaz HTML-a unutar upozorenja. Na ovaj sadržaj se primjenjuje sanitizacija.</p>",
   "_A_ALERT_GROUP_HTML_HEADER_": "HTML",
-  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>Parametri: <strong>:has-icon=\"true\"</strong>, <strong>icon</strong></p><p>Uporabom parametra <strong>icon</strong> moguće je, umjesto standardne, dodavanje ikone po želji.</p>",
+  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>Uporabom parametra <strong>icon</strong> moguće je, umjesto standardne, dodavanje ikone po želji.</p>",
   "_A_ALERT_GROUP_ICONS_CUSTOM_HEADER_": "Prikaz s korisnički prilagođenom ikonom",
-  "_A_ALERT_GROUP_ICONS_DEFAULT_DESCRIPTION_": "<p>Parametar: <strong>has-icon</strong></p><p>Dodavanjem ikone poboljšava se čitljivost upozorenja.</p>",
+  "_A_ALERT_GROUP_ICONS_DEFAULT_DESCRIPTION_": "<p>Dodavanjem ikone poboljšava se čitljivost upozorenja.</p>",
   "_A_ALERT_GROUP_ICONS_DEFAULT_HEADER_": "Prikaz sa standardnom ikonom",
-  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "<p>Za prikaz sadržaj upozorenja može se, osim parametra html, koristiti i <strong>default</strong> slot.</p>",
+  "_A_ALERT_GROUP_SAFE_HTML_DESCRIPTION_": "<p>Sadržaj komponente može se dati u HTML formatu i pomoću parametra <strong>safe-html</strong>. Ovaj se sadržaj smatra sigurnim i na njega se ne primjenjuje sanitizacija.</p>",
+  "_A_ALERT_GROUP_SAFE_HTML_HEADER_": "Sigurni HTML",
+  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "<p>Za prikaz sadržaj upozorenja može se, osim parametara text, html te safe-html, koristiti i <strong>default</strong> slot.</p>",
   "_A_ALERT_GROUP_SLOT_HEADER_": "Slot",
-  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Parametar: <strong>type</strong></p><p>Prikazuje komponentu u različitim shemama boja.</p>",
+  "_A_ALERT_GROUP_TEXT_DESCRIPTION_": "<p>Sadržaj komponente može se zadati u formatu običnog teksta pomoću parametra <strong>text</strong>.</p>",
+  "_A_ALERT_GROUP_TEXT_HEADER_": "Tekst",
+  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Prikazuje komponentu u različitim shemama boja.</p>",
   "_A_ALERT_GROUP_TYPES_HEADER_": "Tip upozorenja",
   "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_": "Dodatna CSS klasa za upozorenje.",
   "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_": "Dodatna CSS klasa za sadržaj upozorenja.",
   "_A_ALERT_PROPS_CLOSABLE_DESCRIPTION_": "Zatvaranje upozorenja moguće ili ne.",
-  "_A_ALERT_PROPS_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "[ALOHA]",
+  "_A_ALERT_PROPS_REMOVE_ALERT_ON_CLOSE_DESCRIPTION_": "Upravljanje zatvaranjem upozorenja izvan komponente.",
   "_A_ALERT_PROPS_HAS_ICON_DESCRIPTION_": "Prikazivanje ikone uz sadržaj upozorenja.",
   "_A_ALERT_PROPS_HTML_DESCRIPTION_": "HTML za prikazivanje unutar upozorenja.",
   "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_": "Dodatna CSS klasa za ikonu upozorenja.",
   "_A_ALERT_PROPS_ICON_DESCRIPTION_": "Ikona. Bilo koja ikona dostupna za <strong>AIcon</strong> može biti korištena i za upozorenje.",
   "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_": "Vidljivost komponente.",
+   "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_": "Sigurni HTML za prikazivanje unutar upozorenja.",
   "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_": "Tekst dugmeta za zatvaranje upozorenja kojeg će pročitati čitač zaslona.",
+  "_A_ALERT_PROPS_TEXT_DESCRIPTION_": "Običan tekst za prikazivanje unutar upozorenja.",
   "_A_ALERT_PROPS_TYPE_DESCRIPTION_": "Tip upozorenja.",
   "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_": "Proslijeđeni sadržaj upozorenja."
 }

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooks.js

@@ -0,0 +1,23 @@
+import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import PageOnHooksExample from "./PageOnHooksExample/PageOnHooksExample.vue";
+
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+
+export default {
+  name: "PageOnHooks",
+  components: {
+    AlohaPage,
+    ATranslation,
+    PageOnHooksExample,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    return {
+      pageTitle,
+    };
+  },
+};

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooks.pug

@@ -0,0 +1,12 @@
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
+  )
+    a-translation(
+      tag="p"
+      html="_A_ON_HOOKS_DIRECTIVE_DESCRIPTION_"
+    )
+
+    page-on-hooks-example

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooks.vue

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

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooksExample/PageOnHooksExample.js

@@ -0,0 +1,55 @@
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import AOnHooks from "../../../../../../src/directives/AOnHooks";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageOnHooksExample",
+  components: {
+    AlohaExample,
+  },
+  directives: {
+    AOnHooks,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const onCreated = (el, binding) => {
+      console.log("created", el, binding);
+    };
+
+    const onBeforeMount = (el, binding) => {
+      console.log("beforeMount", el, binding);
+    };
+
+    const onMounted = (el, binding) => {
+      console.log("mounted", el, binding);
+    };
+
+    const onBeforeUnmount = (el, binding) => {
+      console.log("beforeUnmount", el, binding);
+    };
+
+    const onUnmounted = (el, binding) => {
+      console.log("unmounted", el, binding);
+    };
+
+    return {
+      codeHtml,
+      codeJs,
+      onBeforeMount,
+      onBeforeUnmount,
+      onCreated,
+      onMounted,
+      onUnmounted,
+    };
+  },
+};

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooksExample/PageOnHooksExample.pug

@@ -0,0 +1,8 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BASIC_USAGE_"
+)
+  div(
+    v-a-on-hooks="{ created: onCreated, beforeMount: onBeforeMount, mounted: onMounted, beforeUnmount: onBeforeUnmount, unmounted: onUnmounted }"
+  ) Lorem ipsum dolor sit amet, consectetur adipiscing elit.

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooksExample/PageOnHooksExample.vue

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

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooksExample/compositionAPI/HtmlAPI.js

@@ -0,0 +1,9 @@
+export default function HtmlAPI() {
+  const codeHtml = `<div
+  v-a-on-hooks="{ created: onCreated, beforeMount: onBeforeMount, mounted: onMounted, beforeUnmount: onBeforeUnmount, unmounted: onUnmounted }"
+>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageDirectives/PageOnHooks/PageOnHooksExample/compositionAPI/JsAPI.js

@@ -0,0 +1,43 @@
+export default function JsAPI() {
+  const codeJs = `import AOnHooks from "aloha-vue/src/directives/AOnHooks";
+    
+export default {
+  name: "PageOnHooksExample",
+  directives: {
+    AOnHooks,
+  },
+  setup() {
+    const onCreated = (el, binding) => {
+      console.log("created", el, binding);
+    };
+    
+    const onBeforeMount = (el, binding) => {
+      console.log("beforeMount", el, binding);
+    };
+    
+    const onMounted = (el, binding) => {
+      console.log("mounted", el, binding);
+    };
+    
+    const onBeforeUnmount = (el, binding) => {
+      console.log("beforeUnmount", el, binding);
+    }; 
+    
+    const onUnmounted = (el, binding) => {
+      console.log("unmounted", el, binding);
+    };
+
+    return {
+      onBeforeMount,
+      onBeforeUnmount,
+      onCreated,
+      onMounted,
+      onUnmounted,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageDirectives/PageOnHooks/compositionAPI/PageTitleAPI.js

@@ -0,0 +1,24 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  getTranslatedText,
+} from "../../../../../../src/ATranslation/compositionAPI/UtilsAPI";
+
+
+export default function PageTitleAPI() {
+  const componentNameTranslated = computed(() => {
+    return getTranslatedText({
+      placeholder: "_A_ON_HOOKS_DIRECTIVE_NAME_",
+    });
+  });
+
+  const pageTitle = computed(() => {
+    return `AOnHooks${ componentNameTranslated.value ? ` (${ componentNameTranslated.value })` : "" }`;
+  });
+
+  return {
+    pageTitle,
+  };
+}

package/docs/src/views/PageDirectives/PageOnHooks/i18n/PageAOnHooksI18n.js

@@ -0,0 +1,19 @@
+import ar from "./ar.json";
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fr from "./fr.json";
+import hr from "./hr.json";
+import it from "./it.json";
+import ru from "./ru.json";
+
+export default {
+  ar,
+  de,
+  en,
+  es,
+  fr,
+  hr,
+  it,
+  ru,
+};

package/docs/src/views/PageDirectives/PageOnHooks/i18n/ar.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageDirectives/PageOnHooks/i18n/de.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageDirectives/PageOnHooks/i18n/en.json

@@ -0,0 +1,45 @@
+{
+  "_A_ALERT_COMPONENT_DESCRIPTION_": "Displays important alert messages.",
+  "_A_ALERT_COMPONENT_NAME_": "warning",
+  "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_": "Trigger when alert is closed",
+  "_A_ALERT_EXPOSES_CLOSE_DESCRIPTION_": "Function: close alert",
+  "_A_ALERT_EXPOSES_IS_HIDDEN_DESCRIPTION_": "Is the alert closed?",
+  "_A_ALERT_GROUP_CLOSABLE_DESCRIPTION_": "<p>The parameter <strong>:closable=\"true\"</strong> adds a close function for the component.</p>",
+  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_DESCRIPTION_": "The parameter <strong>:closable-from-outside=\"true\"</strong> allows you to control the closing of the component from the outside.",
+  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_HEADER_": "Closing component with external control",
+  "_A_ALERT_GROUP_CLOSABLE_FROM_OUTSIDE_SHOW_ALERT_": "Show component",
+  "_A_ALERT_GROUP_CLOSABLE_HEADER_": "Closable",
+  "_A_ALERT_GROUP_CSS_DESCRIPTION_": "<p>You can change the appearance of individual elements in the component.</p>",
+  "_A_ALERT_GROUP_CSS_HEADER_": "Additional CSS classes",
+  "_A_ALERT_GROUP_EXPOSES_BTN_CLOSE_": "Close component",
+  "_A_ALERT_GROUP_EXPOSES_BTN_SHOW_": "Show component",
+  "_A_ALERT_GROUP_EXPOSES_HEADER_": "Exposes: Public Properties",
+  "_A_ALERT_GROUP_HTML_DESCRIPTION_": "<p>The parameter <strong>html</strong> allows you to display HTML. The content will be sanitized.</p>",
+  "_A_ALERT_GROUP_HTML_HEADER_": "HTML",
+  "_A_ALERT_GROUP_ICONS_CUSTOM_DESCRIPTION_": "<p>The parameter <strong>icon</strong> allows you to display any icon.</p>",
+  "_A_ALERT_GROUP_ICONS_CUSTOM_HEADER_": "With custom icon",
+  "_A_ALERT_GROUP_ICONS_DEFAULT_DESCRIPTION_": "Displaying an icon improves readability.",
+  "_A_ALERT_GROUP_ICONS_DEFAULT_HEADER_": "With Icon",
+  "_A_ALERT_GROUP_SAFE_HTML_DESCRIPTION_": "<p>The content of the component can be specified in HTML format using the <strong>safe-html</strong> parameter. This content is considered safe and will not be sanitized.</p>",
+  "_A_ALERT_GROUP_SAFE_HTML_HEADER_": "Safe HTML",
+  "_A_ALERT_GROUP_SLOT_DESCRIPTION_": "<p>Instead of an html parameter <strong>html</strong>, you can use a slot <strong>default</strong>.</p>",
+  "_A_ALERT_GROUP_SLOT_HEADER_": "Slot",
+  "_A_ALERT_GROUP_TEXT_DESCRIPTION_": "<p>The content of the component can be specified in Plain Text format using the <strong>text</strong> parameter.</p>",
+  "_A_ALERT_GROUP_TEXT_HEADER_": "Text",
+  "_A_ALERT_GROUP_TYPES_DESCRIPTION_": "<p>Displays the component in a different color scheme.</p>",
+  "_A_ALERT_GROUP_TYPES_HEADER_": "Types",
+  "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_": "Additional CSS class",
+  "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_": "Additional CSS class for content",
+  "_A_ALERT_PROPS_CLOSABLE_DESCRIPTION_": "Whether alert can be dismissed",
+  "_A_ALERT_PROPS_REMOVE_ALERT_ON_CLOSE_DESCRIPTION_": "Controlling the closure of an alert from outside a component",
+  "_A_ALERT_PROPS_HAS_ICON_DESCRIPTION_": "Whether a type icon is displayed",
+  "_A_ALERT_PROPS_HTML_DESCRIPTION_": "HTML to be shown inside the component",
+  "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_": "Additional CSS class for the icon",
+  "_A_ALERT_PROPS_ICON_DESCRIPTION_": "Icon. Any icon available for the <strong>AIcon</strong> component can be used",
+  "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_": "Whether the component is shown",
+  "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_": "Safe HTML to be shown inside the component",
+  "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_": "The text for the close button to be read by the screen reader",
+  "_A_ALERT_PROPS_TEXT_DESCRIPTION_": "Plain Text to be shown inside the component",
+  "_A_ALERT_PROPS_TYPE_DESCRIPTION_": "Alert type",
+  "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_": "Content of the alert"
+}

package/docs/src/views/PageDirectives/PageOnHooks/i18n/es.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageDirectives/PageOnHooks/i18n/fr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageDirectives/PageOnHooks/i18n/hr.json

@@ -0,0 +1,3 @@
+{
+
+}