aloha-vue 1.2.105 → 1.2.107

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

@@ -26,6 +26,14 @@ export default function MenuItemsAPI() {
   } = RestItemsAPI();
 
   const menuItems = [
+    {
+      id: "PageStart",
+      label: "Start",
+      to: {
+        name: "PageStart",
+      },
+      icon: "Aloha",
+    },
     componentItems,
     cssItems,
     directiveItems,

package/docs/src/components/TheNavbar/TheNavbar.pug

@@ -2,9 +2,6 @@ nav.a_d_flex.a_justify_content_between.a_align_items_center.a_px_2(
   style="height: 80px;"
 )
   div
-    a-menu-button-toggle(
-      menu-id="a_menu"
-    )
     a-link.a_btn.a_btn_link(
       to="/"
       icon-left="Aloha"
@@ -26,3 +23,6 @@ nav.a_d_flex.a_justify_content_between.a_align_items_center.a_px_2(
       :change="changeLanguage"
       :deselectable="false"
     )
+    a-menu-button-toggle.a_btn.a_btn_secondary.a_ml_2(
+      menu-id="a_menu"
+    )

package/docs/src/views/PageList/PageList.js

@@ -10,6 +10,7 @@ import PageListKeyChildren from "./PageListKeyChildren/PageListKeyChildren.vue";
 import PageListKeyId from "./PageListKeyId/PageListKeyId.vue";
 import PageListKeyLabelCallback from "./PageListKeyLabelCallback/PageListKeyLabelCallback.vue";
 import PageListSeparator from "./PageListSeparator/PageListSeparator.vue";
+import PageListSeparatorHtml from "./PageListSeparatorHtml/PageListSeparatorHtml.vue";
 import PageListTag from "./PageListTag/PageListTag.vue";
 import PageListWithSlot from "./PageListWithSlot/PageListWithSlot.vue";
 
@@ -32,6 +33,7 @@ export default {
     PageListKeyId,
     PageListKeyLabelCallback,
     PageListSeparator,
+    PageListSeparatorHtml,
     PageListTag,
     PageListWithSlot,
   },

package/docs/src/views/PageList/PageList.pug

@@ -21,6 +21,8 @@ aloha-page(
 
     page-list-separator
 
+    page-list-separator-html
+
     page-list-class-group
 
     page-list-key-label-callback

package/docs/src/views/PageList/PageListSeparator/PageListSeparator.pug

@@ -3,7 +3,7 @@ aloha-example(
   :code-js="codeJs"
   header="_A_LIST_GROUP_SEPARATOR_HEADER_"
   description="_A_LIST_GROUP_SEPARATOR_DESCRIPTION_"
-  :props="['separator', 'is-html=\"false\"']"
+  :props="['separator']"
 )
   .a_columns.a_columns_count_12
     .a_column.a_column_4.a_column_12_tablet
@@ -11,7 +11,7 @@ aloha-example(
         :data="items"
         :is-data-simple-array="true"
         :is-html="false"
-        separator="; "
+        separator=", "
       )
       .a_mt_4
       a-list(
@@ -20,3 +20,17 @@ aloha-example(
         :is-html="false"
         separator=" + "
       )
+      .a_mt_5
+      a-list(
+        :data="items"
+        :is-data-simple-array="true"
+        :is-html="true"
+        separator=","
+      )
+      .a_mt_4
+      a-list(
+        :data="items"
+        :is-data-simple-array="true"
+        :is-html="true"
+        separator=";"
+      )

package/docs/src/views/PageList/PageListSeparator/compositionAPI/HtmlAPI.js

@@ -3,7 +3,7 @@ export default function HtmlAPI() {
   :data="items"
   :is-data-simple-array="true"
   :is-html="false"
-  separator="; "
+  separator=", "
 ></a-list>
 <div class="a_mt_4"></div>
 <a-list
@@ -11,6 +11,20 @@ export default function HtmlAPI() {
   :is-data-simple-array="true"
   :is-html="false"
   separator=" + "
+></a-list>
+<div class="a_mt_5"></div>
+<a-list
+  :data="items"
+  :is-data-simple-array="true"
+  :is-html="true"
+  separator=","
+></a-list>
+<div class="a_mt_4"></div>
+<a-list
+  :data="items"
+  :is-data-simple-array="true"
+  :is-html="true"
+  separator=";"
 ></a-list>`;
 
   return {

package/docs/src/views/PageList/PageListSeparatorHtml/PageListSeparatorHtml.js

@@ -0,0 +1,35 @@
+import AList from "../../../../../src/AList/AList";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageListSeparatorHtml",
+  components: {
+    AList,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const items = [
+      "label 1",
+      "label 2",
+      "label 3",
+      "label 4",
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      items,
+    };
+  },
+};

package/docs/src/views/PageList/PageListSeparatorHtml/PageListSeparatorHtml.pug

@@ -0,0 +1,23 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_LIST_GROUP_SEPARATOR_HTML_HEADER_"
+  description="_A_LIST_GROUP_SEPARATOR_HTML_DESCRIPTION_"
+  :props="['separator-html']"
+)
+  .a_columns.a_columns_count_12
+    .a_column.a_column_4.a_column_12_tablet
+      a-list(
+        :data="items"
+        :is-data-simple-array="true"
+        :is-html="true"
+        separator-html="<div aria-hidden='true'>-------------</div>"
+      )
+      .a_mt_4
+      a-list(
+        :data="items"
+        :is-data-simple-array="true"
+        :is-html="true"
+        separator-html="<hr>"
+      )
+

package/docs/src/views/PageList/PageListSeparatorHtml/PageListSeparatorHtml.vue

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

package/docs/src/views/PageList/PageListSeparatorHtml/compositionAPI/HtmlAPI.js

@@ -0,0 +1,19 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-list
+  :data="items"
+  :is-data-simple-array="true"
+  :is-html="true"
+  separator-html="<div aria-hidden='true'>-------------</div>"
+></a-list>
+<div class="a_mt_4"></div>
+<a-list
+  :data="items"
+  :is-data-simple-array="true"
+  :is-html="true"
+  separator-html="<hr>"
+></a-list>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageList/PageListSeparatorHtml/compositionAPI/JsAPI.js

@@ -0,0 +1,26 @@
+export default function JsAPI() {
+  const codeJs = `import AList from "aloha-vue/src/AList/AList";
+    
+export default {
+  name: "PageListSeparatorHtml",
+  components: {
+    AList,
+  },
+  setup() {
+    const items = [
+      "label 1",
+      "label 2",
+      "label 3",
+      "label 4",
+    ];
+
+    return {
+      items,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageList/compositionAPI/PropsAPI.js

@@ -81,7 +81,14 @@ export default function PropsAPI() {
       name: "separator",
       description: "_A_LIST_SEPARATOR_PROP_DESCRIPTION_",
       type: "String",
-      default: ", ",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "separator-html",
+      description: "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
+      type: "String",
+      default: undefined,
       required: false,
     },
     {

package/docs/src/views/PageList/i18n/ar.json

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "الاستخدام مع مصفوفات بسيطة وهياكل متداخلة",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "هذا المثال يعرض استخدام خاصية <strong>is-html</strong> في المكونة بالتزامن مع مكونة <strong>a-switch</strong> للتحكم بشكل ديناميكي في عرض القائمة بين تنسيق النص وHTML.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "عرض القوائم بتنسيق النص أو HTML",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "هذا المثال يعرض استخدام خاصية <strong>separator</strong> في المكونة لتحديد فواصل مخصصة بين العناصر (يعمل فقط عندما تكون <strong>is-html</strong> مضبوطة على <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "هذا المثال يعرض استخدام خاصية <strong>separator</strong> في المكونة لتحديد فواصل مخصصة بين العناصر.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "فواصل مخصصة بين العناصر",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "استخدام المكونة للتعديل الديناميكي بين القوائم المرتبة (<strong>ol</strong>) وغير المرتبة (<strong>ul</strong>) من خلال خاصية <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "التعديل الديناميكي لوسم HTML",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "مفتاح للتسمية المراد عرضها، إذا كانت data عبارة عن مصفوفة من الكائنات",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "وسم HTML للتسميات",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "وسم HTML للعناصر في القائمة",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "فاصل بين العناصر (نشط فقط عندما تكون <strong>is-html</strong> مضبوطة على <strong>false</strong>)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "فاصل بين العناصر",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
   "_A_LIST_SLOT_DESCRIPTION_": "محتوى مخصص لكل عنصر في القائمة",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "وسم HTML للقائمة بأكملها",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "قائمة بمحتوى مخصص في العناصر عبر الشق.",

package/docs/src/views/PageList/i18n/de.json

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Verwendung mit einfachen Arrays und verschachtelten Hierarchien",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "Dieses Beispiel zeigt die Verwendung der <strong>is-html</strong>-Prop in der Komponente in Kombination mit der <strong>a-switch</strong>-Komponente, um die Listenanzeige zwischen Text- und HTML-Format dynamisch zu steuern.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Anzeige von Listen im Text- oder HTML-Format",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Dieses Beispiel zeigt die Verwendung der <strong>separator</strong>-Prop in der Komponente, um benutzerdefinierte Trennzeichen zwischen den Elementen festzulegen (funktioniert nur, wenn <strong>is-html</strong> auf <strong>false</strong> gesetzt ist).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Dieses Beispiel zeigt die Verwendung der <strong>separator</strong>-Prop in der Komponente, um benutzerdefinierte Trennzeichen zwischen den Elementen festzulegen.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Benutzerdefinierte Trennzeichen zwischen den Elementen",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Die Verwendung der Komponente zur dynamischen Anpassung zwischen geordneten (<strong>ol</strong>) und ungeordneten (<strong>ul</strong>) Listen durch die Prop <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "Dynamische Anpassung des HTML-Tags",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Schlüssel für das anzuzeigende Label, wenn data ein Array von Objekten ist",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "HTML-Tag für die Labels",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "HTML-Tag für die Elemente in der Liste",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separator zwischen Elementen (nur aktiv, wenn <strong>is-html</strong> auf <strong>false</strong> gesetzt ist)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separator zwischen Elementen",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "Separator-HTML zwischen Elementen (nur aktiv, wenn <strong>is-html</strong> auf <strong>false</strong> gesetzt ist)",
   "_A_LIST_SLOT_DESCRIPTION_": "Benutzerdefinierter Inhalt für jedes Listenelement",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "HTML-Tag für die gesamte Liste",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "Eine Liste mit benutzerdefiniertem Inhalt in den Elementen über den Slot.",

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

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Usage with Simple Arrays and Nested Hierarchies",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "This example shows the use of the <strong>is-html</strong> property in the component in conjunction with the <strong>a-switch</strong> component to dynamically control the list display between text and HTML format.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Display of Lists in Text or HTML Format",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "This example shows the use of the <strong>separator</strong> property in the component to set custom separators between items (works only when <strong>is-html</strong> is set to <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "This example shows the use of the <strong>separator</strong> property in the component to set custom separators between items.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Custom Separators Between Items",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Using the component to dynamically switch between ordered (<strong>ol</strong>) and unordered (<strong>ul</strong>) lists via the <strong>tag</strong> property.",
   "_A_LIST_GROUP_TAG_HEADER_": "Dynamic Adjustment of HTML Tag",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Key for the label to be displayed, if data is an array of objects",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "HTML tag for the labels",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "HTML tag for the items in the list",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separator between items (only active when <strong>is-html</strong> is set to <strong>false</strong>)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separator between items",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
   "_A_LIST_SLOT_DESCRIPTION_": "Custom content for each item in the list",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "HTML tag for the entire list",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "A list with custom content in the items through the slot.",

package/docs/src/views/PageList/i18n/es.json

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Uso con Arrays Simples y Jerarquías Anidadas",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "Este ejemplo muestra el uso de la propiedad <strong>is-html</strong> en el componente en conjunto con el componente <strong>a-switch</strong> para controlar dinámicamente la visualización de la lista entre formato de texto y HTML.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Visualización de Listas en Formato de Texto o HTML",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Este ejemplo muestra el uso de la propiedad <strong>separator</strong> en el componente para establecer separadores personalizados entre elementos (funciona solo cuando <strong>is-html</strong> está configurado en <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Este ejemplo muestra el uso de la propiedad <strong>separator</strong> en el componente para establecer separadores personalizados entre elementos.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Separadores Personalizados Entre Elementos",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Uso del componente para cambiar dinámicamente entre listas ordenadas (<strong>ol</strong>) y desordenadas (<strong>ul</strong>) mediante la propiedad <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "Ajuste Dinámico de la Etiqueta HTML",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Clave para la etiqueta que se mostrará, si los datos son un array de objetos",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "Etiqueta HTML para las etiquetas",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "Etiqueta HTML para los elementos en la lista",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separador entre elementos (solo activo cuando <strong>is-html</strong> está configurado en <strong>false</strong>)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separador entre elementos",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
   "_A_LIST_SLOT_DESCRIPTION_": "Contenido personalizado para cada elemento en la lista",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "Etiqueta HTML para toda la lista",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "Una lista con contenido personalizado en los elementos a través del slot.",

package/docs/src/views/PageList/i18n/fr.json

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Utilisation avec des Tableaux Simples et des Hiérarchies Imbriquées",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "Cet exemple montre l'utilisation de la propriété <strong>is-html</strong> dans le composant en conjonction avec le composant <strong>a-switch</strong> pour contrôler dynamiquement l'affichage de la liste entre le format texte et HTML.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Affichage des Listes en Format Texte ou HTML",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Cet exemple montre l'utilisation de la propriété <strong>separator</strong> dans le composant pour définir des séparateurs personnalisés entre les éléments (fonctionne uniquement lorsque <strong>is-html</strong> est réglé sur <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Cet exemple montre l'utilisation de la propriété <strong>separator</strong> dans le composant pour définir des séparateurs personnalisés entre les éléments.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Séparateurs Personnalisés Entre les Éléments",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Utilisation du composant pour basculer dynamiquement entre des listes ordonnées (<strong>ol</strong>) et non ordonnées (<strong>ul</strong>) via la propriété <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "Ajustement Dynamique de la Balise HTML",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Clé pour l'étiquette à afficher, si les données sont un tableau d'objets",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "Balise HTML pour les étiquettes",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "Balise HTML pour les éléments de la liste",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Séparateur entre les éléments (actif uniquement lorsque <strong>is-html</strong> est réglé sur <strong>false</strong>)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Séparateur entre les éléments",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
   "_A_LIST_SLOT_DESCRIPTION_": "Contenu personnalisé pour chaque élément de la liste",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "Balise HTML pour la liste entière",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "Une liste avec du contenu personnalisé dans les éléments via le slot.",

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

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Uporaba s jednostavnim nizovima i ugniježdenim hijerarhijama",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "Ovaj primjer prikazuje uporabu propa <strong>is-html</strong> u kombinaciji s komponentom <strong>a-switch</strong> u cilju mogućnosti dinamičkog prebacivanja između tekstualnog i HTML formata prikaza liste.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Prikaz liste u tekstualnom ili HTML formatu",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Ovaj primjer prikazuje uporabu propa <strong>separator</strong> za postavljanje prilagođenih separatora između elemenata (funkcionira samo ako je <strong>is-html</strong> postavljen na <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Ovaj primjer prikazuje uporabu propa <strong>separator</strong> za postavljanje prilagođenih separatora između elemenata.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Prilagođeni razdjelnici između elemenata",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Primjer mogućnosti dinamičke prilagodbe između numeričke (<strong>ol</strong>) i simboličke (<strong>ul</strong>) liste koristeći prop <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "Dinamička prilagodba HTML oznake",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Ključ za prikazanu oznaku, ako su podaci niz objekata.",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "HTML tag za oznake.",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "HTML tag za elemente u listi.",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separator između elemenata (aktivan samo ako <strong>is-html</strong> ima vrijednost <strong>false</strong>).",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separator između elemenata.",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
   "_A_LIST_SLOT_DESCRIPTION_": "Prilagođeni sadržaj svakog od elementa liste.",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "HTML oznaka cijele liste.",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "Lista s prilagođenim sadržajem elemenata koristeći slot.",

package/docs/src/views/PageList/i18n/it.json

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Uso con Array Semplici e Gerarchie Annidate",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "Questo esempio mostra l'uso della proprietà <strong>is-html</strong> nel componente in combinazione con il componente <strong>a-switch</strong> per controllare dinamicamente la visualizzazione dell'elenco tra formato testo e HTML.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Visualizzazione delle Liste in Formato Testo o HTML",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Questo esempio mostra l'uso della proprietà <strong>separator</strong> nel componente per impostare separatori personalizzati tra gli elementi (funziona solo quando <strong>is-html</strong> è impostato su <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Questo esempio mostra l'uso della proprietà <strong>separator</strong> nel componente per impostare separatori personalizzati tra gli elementi.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Separatori Personalizzati Tra Gli Elementi",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Uso del componente per passare dinamicamente tra liste ordinate (<strong>ol</strong>) e non ordinate (<strong>ul</strong>) tramite la proprietà <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "Adattamento Dinamico del Tag HTML",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Chiave per l'etichetta da visualizzare, se i dati sono un array di oggetti",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "Tag HTML per le etichette",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "Tag HTML per gli elementi nella lista",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separatore tra gli elementi (attivo solo quando <strong>is-html</strong> è impostato su <strong>false</strong>)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Separatore tra gli elementi",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_",
   "_A_LIST_SLOT_DESCRIPTION_": "Contenuto personalizzato per ogni elemento della lista",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "Tag HTML per l'intera lista",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "Una lista con contenuto personalizzato negli elementi tramite lo slot.",

package/docs/src/views/PageList/i18n/ru.json

@@ -10,7 +10,7 @@
   "_A_LIST_GROUP_IS_DATA_SIMPLE_ARRAY_HEADER_": "Использование с простыми массивами и вложенными иерархиями",
   "_A_LIST_GROUP_IS_HTML_DESCRIPTION_": "Этот пример показывает использование свойства <strong>is-html</strong> в компоненте в сочетании с компонентом <strong>a-switch</strong> для динамического управления отображением списка в текстовом или HTML-формате.",
   "_A_LIST_GROUP_IS_HTML_HEADER_": "Отображение списка в текстовом или HTML-формате",
-  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Этот пример показывает использование свойства <strong>separator</strong> в компоненте для установки пользовательских разделителей между элементами списка (работает только при установке <strong>is-html</strong> в значение <strong>false</strong>).",
+  "_A_LIST_GROUP_SEPARATOR_DESCRIPTION_": "Этот пример показывает использование свойства <strong>separator</strong> в компоненте для установки пользовательских разделителей между элементами списка.",
   "_A_LIST_GROUP_SEPARATOR_HEADER_": "Пользовательские разделители между элементами",
   "_A_LIST_GROUP_TAG_DESCRIPTION_": "Использование компонента для динамической настройки HTML-тега между упорядоченным (<strong>ol</strong>) и неупорядоченным (<strong>ul</strong>) списками с помощью свойства <strong>tag</strong>.",
   "_A_LIST_GROUP_TAG_HEADER_": "Динамическое изменение HTML-тега",
@@ -28,7 +28,8 @@
   "_A_LIST_KEY_LABEL_PROP_DESCRIPTION_": "Ключ для отображаемого текста, если data - массив объектов",
   "_A_LIST_LABEL_TAG_PROP_DESCRIPTION_": "HTML-тег для текста",
   "_A_LIST_LIST_ITEM_TAG_PROP_DESCRIPTION_": "HTML-тег для элементов в списке",
-  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Разделитель между элементами (работает только при <strong>is-html</strong> установленном в значение <strong>false</strong>)",
+  "_A_LIST_SEPARATOR_PROP_DESCRIPTION_": "Разделитель между элементами",
+  "_A_LIST_SEPARATOR_HTML_PROP_DESCRIPTION_": "Разделитель-HTML между элементами (работает только при <strong>is-html</strong> установленном в значение <strong>false</strong>)",
   "_A_LIST_SLOT_DESCRIPTION_": "Пользовательский контент для каждого элемента списка",
   "_A_LIST_TAG_PROP_DESCRIPTION_": "HTML-тег для всего списка",
   "_A_LIST_WITH_SLOT_DESCRIPTION_": "Список с пользовательским содержимым в элементах через слот.",

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexExample/PageTableComplexExample.pug

@@ -51,7 +51,7 @@ aloha-example(
         ) Tabs
 
       template(
-        v-slot:previewRight="vm"
+        v-slot:preview="vm"
       )
         pre {{ vm }}
 

package/docs/src/views/PageTable/PageTablePreview/PageTablePreviewRight/PageTablePreviewRight.pug

@@ -13,6 +13,6 @@ aloha-example(
       preview="right"
     )
       template(
-        v-slot:previewRight="vm"
+        v-slot:preview="vm"
       )
         pre {{ vm }}

package/docs/src/views/PageTable/PageTablePreview/PageTablePreviewRightPagination/PageTablePreviewRightPagination.pug

@@ -15,6 +15,6 @@ aloha-example(
       :pagination="{ use: true }"
     )
       template(
-        v-slot:previewRight="vm"
+        v-slot:preview="vm"
       )
         pre {{ vm }}

package/docs/src/views/PageTable/PageTablePreviewDown/PageTablePreviewDownExample/PageTablePreviewDownExample.pug

@@ -13,6 +13,6 @@ aloha-example(
       preview="down"
     )
       template(
-        v-slot:previewDown="vm"
+        v-slot:preview="vm"
       )
         pre {{ vm }}

package/docs/styles/styles.scss

@@ -8,4 +8,12 @@
 }
 .a_menu_2 {
   position: fixed;
-}
+}
+.a_mobile {
+  .a_menu_2__page {
+    padding: 0 .5rem;
+  }
+  .a_menu_2__btn_toggle_outside_menu {
+    display: inline-block;
+  }
+}

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.105",
+  "version": "1.2.107",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AFilters/AFilters/compositionAPI/FiltersAPI.js

@@ -89,7 +89,7 @@ export default function FiltersAPI(props, { emit }) {
   const setFiltersVisibleIds = () => {
     const FILTERS_VISIBLE_IDS = [];
     forEach(filtersGroup.value.filters, filter => {
-      if (unappliedModel.value[filter.id]) {
+      if (filter.id in unappliedModel.value) {
         FILTERS_VISIBLE_IDS.push(filter.id);
       }
     });

package/src/AList/AList.js

@@ -72,7 +72,12 @@ export default {
     separator: {
       type: String,
       required: false,
-      default: ", ",
+      default: undefined,
+    },
+    separatorHtml: {
+      type: String,
+      required: false,
+      default: undefined,
     },
     tag: {
       type: String,
@@ -114,6 +119,8 @@ export default {
             keyLabelCallback: this.keyLabelCallback,
             labelTag: this.labelTag,
             listItemTag: this.listItemTag,
+            separator: this.separator,
+            separatorHtml: this.separatorHtml,
             tag: this.tag,
           }, this.$slots);
         }),

package/src/AList/AListItem/AListItem.js

@@ -65,6 +65,16 @@ export default {
       required: false,
       default: "li",
     },
+    separator: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    separatorHtml: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     tag: {
       type: String,
       required: true,
@@ -98,6 +108,9 @@ export default {
         withDirectives(h(this.labelTag), [
           [ASafeHtml, this.label]
         ]),
+      this.separator ?
+        h("span", {}, this.separator) :
+        "",
       this.hasChildren ? h(AList, {
         classItem: this.classItem,
         classMain: this.classMain,
@@ -109,8 +122,13 @@ export default {
         keyLabelCallback: this.keyLabelCallback,
         labelTag: this.labelTag,
         listItemTag: this.listItemTag,
+        separator: this.separator,
+        separatorHtml: this.separatorHtml,
         tag: this.tag,
       }, this.$slots) : "",
+      this.separatorHtml ? withDirectives(h("div"), [
+        [ASafeHtml, this.separatorHtml]
+      ]) : "",
     ]);
   },
 };

package/src/AMenu2/AMenu2.js

@@ -17,6 +17,7 @@ import ATranslation from "../ATranslation/ATranslation";
 import AVerticalScroll from "../AVerticalScroll/AVerticalScroll";
 
 import AMenuBlockerClickAPI from "./compositionAPI/AMenuBlockerClickAPI";
+import BackdropAPI from "./compositionAPI/BackdropAPI";
 import CheckRoutesAPI from "./compositionAPI/CheckRoutesAPI";
 import DataAPI from "./compositionAPI/DataAPI";
 import LinkClickAPI from "./compositionAPI/LinkClickAPI";
@@ -89,7 +90,7 @@ export default {
       required: false,
       default: true,
     },
-    isBackdrop: {
+    isBackdropMobileClickable: {
       type: Boolean,
       required: false,
       default: true,
@@ -177,6 +178,11 @@ export default {
       required: false,
       default: true,
     },
+    useBackdropMobile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   setup(props) {
     const isLinkTruncated = toRef(props, "isLinkTruncated");
@@ -287,6 +293,15 @@ export default {
       panelParentsOpen,
     });
 
+    const {
+      clickAttributesBackdrop,
+      isBackdropVisible,
+    } = BackdropAPI(props, {
+      isMenuOpen,
+      isMobileWidth,
+      toggleMenu,
+    });
+
     watch(currentRoute, () => {
       checkAllRoutes();
     }, {
@@ -334,9 +349,11 @@ export default {
       attributesBlockerClick,
       attributesMenuClick,
       checkAllRoutes,
+      clickAttributesBackdrop,
       clickOnSearchBtn,
       dataKeyById,
       dataProParent,
+      isBackdropVisible,
       isLeastOnePanelOpenAndMenuClosed,
       isMenuOpen,
       isMobileWidth,
@@ -471,13 +488,15 @@ export default {
         modelSearch: this.modelSearch,
       }, this.$slots),
 
-      this.isBackdrop && h(Teleport, {
+      this.isBackdropVisible ? h(Teleport, {
         to: "body",
       }, [
         h("div", {
           class: "a_menu_2__backdrop a_backdrop a_backdrop_fade",
+          "aria-hidden": true,
+          ...this.clickAttributesBackdrop,
         }),
-      ]),
+      ]) : "",
     ]);
   },
 };