aloha-vue 1.2.250 → 1.2.251

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

@@ -78,6 +78,20 @@ export default function ComponentItemsAPI() {
               name: "PageCheckbox",
             }
           },
+          {
+            id: "datepicker",
+            label: "Datepicker",
+            to: {
+              name: "PageDatepicker",
+            }
+          },
+          {
+            id: "datepicker-range",
+            label: "DatepickerRange",
+            to: {
+              name: "PageDatepickerRange",
+            }
+          },
           {
             id: "fieldset",
             label: "Fieldset",
@@ -98,33 +112,6 @@ export default function ComponentItemsAPI() {
               },
             ],
           },
-          {
-            id: "ui-child",
-            label: "Child",
-            children: [
-              {
-                id: "input",
-                to: {
-                  name: "PageInput",
-                },
-                label: "Input",
-              }
-            ]
-          },
-          {
-            id: "datepicker",
-            label: "Datepicker",
-            to: {
-              name: "PageDatepicker",
-            }
-          },
-          {
-            id: "datepicker-range",
-            label: "DatepickerRange",
-            to: {
-              name: "PageDatepickerRange",
-            }
-          },
           {
             id: "form",
             label: "Form",
@@ -132,6 +119,13 @@ export default function ComponentItemsAPI() {
               name: "PageForm",
             }
           },
+          {
+            id: "PageGroup",
+            to: {
+              name: "PageGroup",
+            },
+            label: "Group",
+          },
           {
             id: "input",
             to: {

package/docs/src/i18n/ar.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "الاستخدام الأساسي",
+  "_A_GLOBAL_ADD_": "إضافة",
+  "_A_GLOBAL_DELETE_": "حذف",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "كائن يحتوي على متغيرات لاستبدالها في قالب الترجمة. يُستخدم لاستبدال القيم في نصوص الترجمة بشكل ديناميكي. على سبيل المثال، إذا كانت سلسلة الترجمة تحتوي على عناصر نائبة مثل <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>، والتي تُترجم إلى <strong>\"مرحبًا <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>، يمكنك تمرير كائن مثل <strong>{ <span lang=\"en\">foo</span>: \"أبج\", bar: \"123\" }</strong>، وستكون النتيجة هي الترجمة <strong>\"مرحبًا أبج: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "معرّف فريد للمكون",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "يحدد ما إذا كان يجب تفسير التلميح على أنه <strong lang=\"en\">HTML</strong>. إذا تم تعيينه على <strong lang=\"en\">true</strong>، سيتم عرض محتوى التلميح مع تنسيق <strong lang=\"en\">HTML</strong>.",

package/docs/src/i18n/de.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Grundlegende Verwendung",
+  "_A_GLOBAL_ADD_": "Hinzufügen",
+  "_A_GLOBAL_DELETE_": "Löschen",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Ein Objekt, das Variablen für die Ersetzung im Übersetzungstemplate enthält. Es wird verwendet, um Werte in Übersetzungsstrings dynamisch zu ersetzen. Zum Beispiel, wenn der Übersetzungsstring Platzhalter wie <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong> enthält, was als <strong>\"Willkommen <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong> übersetzt wird, können Sie ein Objekt wie <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong> übergeben, und das Ergebnis wird die Übersetzung <strong>\"Willkommen abc: 123\"</strong> sein.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Eindeutiger Bezeichner für die Komponente",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Legt fest, ob das Tooltip als <strong lang=\"en\">HTML</strong> interpretiert werden soll. Wenn auf <strong lang=\"en\">true</strong> gesetzt, wird der Inhalt des Tooltips mit <strong lang=\"en\">HTML</strong>-Formatierung angezeigt.",

package/docs/src/i18n/en.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Basic usage",
+  "_A_GLOBAL_ADD_": "Add",
+  "_A_GLOBAL_DELETE_": "Delete",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "An object that contains variables for substitution in the translation template. It is used for dynamically replacing values in translation strings. For example, if the translation string has placeholders like <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, which is translated as <strong>\"Welcome <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, you can pass an object like <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, and the result will be the translation <strong>\"Welcome abc: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Unique identifier for the component",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Determines whether the tooltip should be interpreted as <strong lang=\"en\">HTML</strong>. If set to <strong lang=\"en\">true</strong>, the content of the tooltip will be displayed with <strong lang=\"en\">HTML</strong> formatting.",

package/docs/src/i18n/es.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Uso básico",
+  "_A_GLOBAL_ADD_": "Añadir",
+  "_A_GLOBAL_DELETE_": "Eliminar",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Un objeto que contiene variables para la sustitución en la plantilla de traducción. Se utiliza para reemplazar dinámicamente valores en las cadenas de traducción. Por ejemplo, si la cadena de traducción tiene marcadores de posición como <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, que se traduce como <strong>\"Bienvenido <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, puede pasar un objeto como <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, y el resultado será la traducción <strong>\"Bienvenido abc: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Identificador único para el componente",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Determina si la herramienta debe interpretarse como <strong lang=\"en\">HTML</strong>. Si se establece en <strong lang=\"en\">true</strong>, el contenido de la herramienta se mostrará con formato <strong lang=\"en\">HTML</strong>.",

package/docs/src/i18n/fr.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Utilisation de base",
+  "_A_GLOBAL_ADD_": "Ajouter",
+  "_A_GLOBAL_DELETE_": "Supprimer",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Un objet qui contient des variables pour la substitution dans le modèle de traduction. Il est utilisé pour remplacer dynamiquement les valeurs dans les chaînes de traduction. Par exemple, si la chaîne de traduction contient des espaces réservés comme <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, qui est traduit par <strong>\"Bienvenue <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, vous pouvez passer un objet comme <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, et le résultat sera la traduction <strong>\"Bienvenue abc: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Identifiant unique pour le composant",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Détermine si l'infobulle doit être interprétée comme <strong lang=\"en\">HTML</strong>. Si cette option est activée (<strong lang=\"en\">true</strong>), le contenu de l'infobulle sera affiché avec une mise en forme <strong lang=\"en\">HTML</strong>.",

package/docs/src/i18n/hr.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Osnovna uporaba",
+  "_A_GLOBAL_ADD_": "Dodaj",
+  "_A_GLOBAL_DELETE_": "Izbriši",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Objekt koji sadrži varijable za zamjenu u predlošku prijevoda. Koristi se za dinamičku zamjenu vrijednosti u prijevodnim nizovima. Na primjer, ako prijevodni niz ima rezervirane prostore poput <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, što je prevedeno kao <strong>\"Dobrodošli <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, možete proslijediti objekt poput <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, a rezultat će biti prijevod <strong>\"Dobrodošli abc: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Jedinstveni identifikator za komponentu",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Određuje hoće li se alatna traka tumačiti kao <strong lang=\"en\">HTML</strong>. Ako je postavljeno na <strong lang=\"en\">true</strong>, sadržaj alatne trake će se prikazivati s <strong lang=\"en\">HTML</strong> formatiranjem.",

package/docs/src/i18n/it.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Utilizzo di base",
+  "_A_GLOBAL_ADD_": "Aggiungi",
+  "_A_GLOBAL_DELETE_": "Elimina",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Un oggetto che contiene variabili per la sostituzione nel modello di traduzione. Viene utilizzato per sostituire dinamicamente i valori nelle stringhe di traduzione. Ad esempio, se la stringa di traduzione ha segnaposti come <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, che viene tradotto come <strong>\"Benvenuto <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, puoi passare un oggetto come <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, e il risultato sarà la traduzione <strong>\"Benvenuto abc: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Identificatore univoco per il componente",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Determina se la tooltip debba essere interpretata come <strong lang=\"en\">HTML</strong>. Se impostato su <strong lang=\"en\">true</strong>, il contenuto della tooltip verrà visualizzato con formattazione <strong lang=\"en\">HTML</strong>.",

package/docs/src/i18n/ru.json

@@ -1,5 +1,7 @@
 {
   "_A_BASIC_USAGE_": "Основное использование",
+  "_A_GLOBAL_ADD_": "Добавить",
+  "_A_GLOBAL_DELETE_": "Удалить",
   "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Объект, который содержит переменные для подстановки в шаблон перевода. Используется для динамической замены значений в строках перевода. Например, если строка перевода имеет плейсхолдеры, такие как <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, это переведено как <strong>\"Добро пожаловать <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, можно передать объект <strong>{ <span lang=\"en\">foo</span>: \"абв\", bar: \"123\" }</strong>, и в результате получится перевод <strong>\"Добро пожаловать абв: 123\"</strong>.",
   "_A_GLOBAL_PROPS_ID_DESCRIPTION_": "Уникальный идентификатор для компонента",
   "_A_GLOBAL_PROPS_IS_TITLE_HTML_DESCRIPTION_": "Определяет, будет ли всплывающая подсказка интерпретироваться как <strong lang=\"en\">HTML</strong>. Если установлено в <strong lang=\"en\">true</strong>, содержимое подсказки будет отображаться с учетом <strong lang=\"en\">HTML</strong>-разметки.",

package/docs/src/mainTranslation.js

@@ -81,6 +81,7 @@ import PageSpinnerI18n from "./views/PageSpinner/i18n/PageSpinnerI18n";
 import PageCloakI18n from "./views/PageCloak/i18n/PageCloakI18n";
 import PageLoadingI18n from "./views/PageLoading/i18n/PageLoadingI18n";
 import PageTabsI18n from "./views/PageTabs/i18n/PageTabsI18n";
+import PageGroupI18n from "./views/Form/PageGroup/i18n/PageGroupI18n";
 
 export const mainTranslation = {
   ar: {
@@ -158,6 +159,7 @@ export const mainTranslation = {
     ...PageCloakI18n.ar,
     ...PageLoadingI18n.ar,
     ...PageTabsI18n.ar,
+    ...PageGroupI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -234,6 +236,7 @@ export const mainTranslation = {
     ...PageCloakI18n.de,
     ...PageLoadingI18n.de,
     ...PageTabsI18n.de,
+    ...PageGroupI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -310,6 +313,7 @@ export const mainTranslation = {
     ...PageCloakI18n.en,
     ...PageLoadingI18n.en,
     ...PageTabsI18n.en,
+    ...PageGroupI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -386,6 +390,7 @@ export const mainTranslation = {
     ...PageCloakI18n.es,
     ...PageLoadingI18n.es,
     ...PageTabsI18n.es,
+    ...PageGroupI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -462,6 +467,7 @@ export const mainTranslation = {
     ...PageCloakI18n.fr,
     ...PageLoadingI18n.fr,
     ...PageTabsI18n.fr,
+    ...PageGroupI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -538,6 +544,7 @@ export const mainTranslation = {
     ...PageCloakI18n.hr,
     ...PageLoadingI18n.hr,
     ...PageTabsI18n.hr,
+    ...PageGroupI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -614,6 +621,7 @@ export const mainTranslation = {
     ...PageCloakI18n.it,
     ...PageLoadingI18n.it,
     ...PageTabsI18n.it,
+    ...PageGroupI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -690,5 +698,6 @@ export const mainTranslation = {
     ...PageCloakI18n.ru,
     ...PageLoadingI18n.ru,
     ...PageTabsI18n.ru,
+    ...PageGroupI18n.ru,
   },
 };

package/docs/src/router/index.js

@@ -259,6 +259,11 @@ const ROUTES = [
     name: "PageButton",
     component: () => import(/* webpackChunkName: "PageButton" */ "../views/PageButton/PageButton.vue"),
   },
+  {
+    path: "/group",
+    name: "PageGroup",
+    component: () => import(/* webpackChunkName: "PageGroup" */ "../views/Form/PageGroup/PageGroup.vue"),
+  },
   {
     path: "/link",
     name: "PageLink",

package/docs/src/views/Form/PageFieldset/compositionAPI/PropsAPI.js

@@ -22,8 +22,8 @@ export default function PropsAPI() {
       required: false,
     },
     {
-      name: "class-column",
-      description: "_A_UI_PROPS_CLASS_COLUMN_DESCRIPTION_",
+      name: "class-column-default",
+      description: "_A_UI_PROPS_CLASS_COLUMN_DEFAULT_DESCRIPTION_",
       type: "String / Object",
       default: "a_column a_column_12",
       required: false,

package/docs/src/views/Form/PageFieldsetChildren/PageFieldsetChildrenClassColumn/PageFieldsetChildrenClassColumn.pug

@@ -3,12 +3,12 @@ aloha-example(
   :code-js="codeJs"
   header="_A_UI_GROUP_CLASS_COLUMN_HEADER_"
   description="_A_UI_GROUP_CLASS_COLUMN_DESCRIPTION_"
-  :props="['class-column']"
+  :props="['class-column-default']"
 )
   a-fieldset(
     v-model="model"
     :children="children"
-    class-column="a_column a_column_6 a_column_12_touch"
+    class-column-default="a_column a_column_6 a_column_12_touch"
     label="Fieldset"
   )
   div model: {{ model }}

package/docs/src/views/Form/PageFieldsetChildren/PageFieldsetChildrenClassColumn/compositionAPI/HtmlAPI.js

@@ -2,7 +2,7 @@ export default function HtmlAPI() {
   const codeHtml = `<a-fieldset
   v-model="model"
   :children="children"
-  class-column="a_column a_column_6 a_column_12_touch"
+  class-column-default="a_column a_column_6 a_column_12_touch"
   label="Fieldset"
 ></a-fieldset>
 <div>model: {{ model }}</div>`;

package/docs/src/views/Form/PageFieldsetChildren/PageFieldsetChildrenClassColumns/PageFieldsetChildrenClassColumns.pug

@@ -8,7 +8,7 @@ aloha-example(
   a-fieldset(
     v-model="model"
     :children="children"
-    class-column="a_column a_column_4 a_column_8_touch"
+    class-column-default="a_column a_column_4 a_column_8_touch"
     class-columns="a_columns a_columns_count_8 a_columns_gap_y_1 a_columns_gap_x_1"
     label="Fieldset"
   )

package/docs/src/views/Form/PageFieldsetChildren/PageFieldsetChildrenClassColumns/compositionAPI/HtmlAPI.js

@@ -2,7 +2,7 @@ export default function HtmlAPI() {
   const codeHtml = `<a-fieldset
   v-model="model"
   :children="children"
-  class-column="a_column a_column_4 a_column_8_touch"
+  class-column-default="a_column a_column_4 a_column_8_touch"
   class-columns="a_columns a_columns_count_8 a_columns_gap_y_1 a_columns_gap_x_1"
   label="Fieldset"
 ></a-fieldset>

package/docs/src/views/Form/PageFieldsetChildren/compositionAPI/PropsAPI.js

@@ -8,8 +8,8 @@ export default function PropsAPI() {
       required: false,
     },
     {
-      name: "class-column",
-      description: "_A_UI_PROPS_CLASS_COLUMN_DESCRIPTION_",
+      name: "class-column-default",
+      description: "_A_UI_PROPS_CLASS_COLUMN_DEFAULT_DESCRIPTION_",
       type: "String / Object",
       default: "a_column a_column_12",
       required: false,

package/docs/src/views/Form/PageFieldsetChildren/i18n/ar.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "تتناول هذه الصفحة استخدام <strong lang=\"en\">children</strong> في مكون <strong lang=\"en\">AFieldset</strong>، بالإضافة إلى الخصائص المتعلقة مثل <strong lang=\"en\">class-column</strong> لتخصيص الفئات للعناصر الفرعية الفردية، و<strong lang=\"en\">class-columns</strong> لحاوية الأصل، و<strong lang=\"en\">errors-all</strong> لعرض أخطاء العناصر الفرعية.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "تتناول هذه الصفحة استخدام <strong lang=\"en\">children</strong> في مكون <strong lang=\"en\">AFieldset</strong>، بالإضافة إلى الخصائص المتعلقة مثل <strong lang=\"en\">class-column-default</strong> لتخصيص الفئات للعناصر الفرعية الفردية، و<strong lang=\"en\">class-columns</strong> لحاوية الأصل، و<strong lang=\"en\">errors-all</strong> لعرض أخطاء العناصر الفرعية.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "العناصر الفرعية <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "يوضح هذا المثال القدرة على إنشاء هيكل متداخل للعناصر بعمق غير محدود باستخدام مكون <strong lang=\"en\">AFieldset</strong>. يمكن لكل عنصر فرعي أن يحتوي على عناصر فرعية خاصة به، مما يسمح بالتحكم المرن في هيكل البيانات والعرض. على سبيل المثال، يحتوي الحقل الأول والثاني <strong lang=\"en\">fieldset</strong> على عناصر فرعية خاصة بهما مثل حقول النصوص والمربعات.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "هيكل العناصر المتداخلة"

package/docs/src/views/Form/PageFieldsetChildren/i18n/de.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Auf dieser Seite wird die Verwendung von <strong lang=\"en\">children</strong> im <strong lang=\"en\">AFieldset</strong>-Komponenten erläutert, sowie verwandte Eigenschaften wie <strong lang=\"en\">class-column</strong> zur Anpassung der Klassen einzelner Kinderelemente, <strong lang=\"en\">class-columns</strong> für das Elternelement und <strong lang=\"en\">errors-all</strong> zur Anzeige von Fehlern der Kinderelemente.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Auf dieser Seite wird die Verwendung von <strong lang=\"en\">children</strong> im <strong lang=\"en\">AFieldset</strong>-Komponenten erläutert, sowie verwandte Eigenschaften wie <strong lang=\"en\">class-column-default</strong> zur Anpassung der Klassen einzelner Kinderelemente, <strong lang=\"en\">class-columns</strong> für das Elternelement und <strong lang=\"en\">errors-all</strong> zur Anzeige von Fehlern der Kinderelemente.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Kinderelemente <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "Dieses Beispiel zeigt die Möglichkeit, eine verschachtelte Elementstruktur mit unbegrenzter Tiefe mithilfe der <strong lang=\"en\">AFieldset</strong>-Komponente zu erstellen. Jedes Kinderelement kann seine eigenen verschachtelten Elemente enthalten, was eine flexible Steuerung der Datenstruktur und -anzeige ermöglicht. Zum Beispiel enthalten hier das erste und zweite <strong lang=\"en\">fieldset</strong> ihre eigenen Kinderelemente wie Textfelder und Kontrollkästchen.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Verschachtelte Elementstruktur"

package/docs/src/views/Form/PageFieldsetChildren/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "This page covers the use of <strong lang=\"en\">children</strong> in the <strong lang=\"en\">AFieldset</strong> component, as well as related properties such as <strong lang=\"en\">class-column</strong> for customizing the classes of individual child elements, <strong lang=\"en\">class-columns</strong> for the parent container, and <strong lang=\"en\">errors-all</strong> for displaying child element errors.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "This page covers the use of <strong lang=\"en\">children</strong> in the <strong lang=\"en\">AFieldset</strong> component, as well as related properties such as <strong lang=\"en\">class-column-default</strong> for customizing the classes of individual child elements, <strong lang=\"en\">class-columns</strong> for the parent container, and <strong lang=\"en\">errors-all</strong> for displaying child element errors.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Child elements <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "This example demonstrates the ability to create a nested element structure of unlimited depth using the <strong lang=\"en\">AFieldset</strong> component. Each child element can contain its own nested elements, allowing flexible data structure and rendering control. For example, here, the first and second <strong lang=\"en\">fieldset</strong> contain their own child elements such as text fields and checkboxes.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Nested element structure"

package/docs/src/views/Form/PageFieldsetChildren/i18n/es.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Esta página cubre el uso de <strong lang=\"en\">children</strong> en el componente <strong lang=\"en\">AFieldset</strong>, así como las propiedades relacionadas como <strong lang=\"en\">class-column</strong> para personalizar las clases de los elementos secundarios individuales, <strong lang=\"en\">class-columns</strong> para el contenedor principal y <strong lang=\"en\">errors-all</strong> para mostrar errores en los elementos secundarios.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Esta página cubre el uso de <strong lang=\"en\">children</strong> en el componente <strong lang=\"en\">AFieldset</strong>, así como las propiedades relacionadas como <strong lang=\"en\">class-column-default</strong> para personalizar las clases de los elementos secundarios individuales, <strong lang=\"en\">class-columns</strong> para el contenedor principal y <strong lang=\"en\">errors-all</strong> para mostrar errores en los elementos secundarios.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Elementos secundarios <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "Este ejemplo demuestra la capacidad de crear una estructura de elementos anidados de profundidad ilimitada utilizando el componente <strong lang=\"en\">AFieldset</strong>. Cada elemento secundario puede contener sus propios elementos anidados, lo que permite un control flexible de la estructura y el renderizado de los datos. Por ejemplo, aquí, el primer y segundo <strong lang=\"en\">fieldset</strong> contienen sus propios elementos secundarios como campos de texto y casillas de verificación.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Estructura de elementos anidados"

package/docs/src/views/Form/PageFieldsetChildren/i18n/fr.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Cette page couvre l'utilisation des <strong lang=\"en\">children</strong> dans le composant <strong lang=\"en\">AFieldset</strong>, ainsi que des propriétés associées telles que <strong lang=\"en\">class-column</strong> pour personnaliser les classes des éléments enfants individuels, <strong lang=\"en\">class-columns</strong> pour le conteneur parent, et <strong lang=\"en\">errors-all</strong> pour afficher les erreurs des éléments enfants.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Cette page couvre l'utilisation des <strong lang=\"en\">children</strong> dans le composant <strong lang=\"en\">AFieldset</strong>, ainsi que des propriétés associées telles que <strong lang=\"en\">class-column-default</strong> pour personnaliser les classes des éléments enfants individuels, <strong lang=\"en\">class-columns</strong> pour le conteneur parent, et <strong lang=\"en\">errors-all</strong> pour afficher les erreurs des éléments enfants.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Éléments enfants <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "Cet exemple montre la capacité de créer une structure d'éléments imbriqués de profondeur illimitée en utilisant le composant <strong lang=\"en\">AFieldset</strong>. Chaque élément enfant peut contenir ses propres éléments imbriqués, permettant ainsi une gestion flexible de la structure des données et de l'affichage. Par exemple, ici, le premier et le second <strong lang=\"en\">fieldset</strong> contiennent leurs propres éléments enfants tels que des champs de texte et des cases à cocher.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Structure imbriquée d'éléments"

package/docs/src/views/Form/PageFieldsetChildren/i18n/hr.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Ova stranica pokriva upotrebu <strong lang=\"en\">children</strong> u komponenti <strong lang=\"en\">AFieldset</strong>, kao i povezane atribute poput <strong lang=\"en\">class-column</strong> za prilagodbu klasa pojedinačnih dječjih elemenata, <strong lang=\"en\">class-columns</strong> za nadređeni spremnik i <strong lang=\"en\">errors-all</strong> za prikaz pogrešaka dječjih elemenata.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Ova stranica pokriva upotrebu <strong lang=\"en\">children</strong> u komponenti <strong lang=\"en\">AFieldset</strong>, kao i povezane atribute poput <strong lang=\"en\">class-column-default</strong> za prilagodbu klasa pojedinačnih dječjih elemenata, <strong lang=\"en\">class-columns</strong> za nadređeni spremnik i <strong lang=\"en\">errors-all</strong> za prikaz pogrešaka dječjih elemenata.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Dječji elementi <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "Ovaj primjer prikazuje mogućnost stvaranja ugniježđene strukture elemenata neograničene dubine koristeći komponentu <strong lang=\"en\">AFieldset</strong>. Svaki dječji element može sadržavati vlastite ugniježđene elemente, omogućujući fleksibilno upravljanje strukturom podataka i prikazom. Na primjer, ovdje, prvi i drugi <strong lang=\"en\">fieldset</strong> sadrže vlastite dječje elemente kao što su tekstualna polja i potvrdni okviri.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Ugniježđena struktura elemenata"

package/docs/src/views/Form/PageFieldsetChildren/i18n/it.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Questa pagina tratta l'uso di <strong lang=\"en\">children</strong> nel componente <strong lang=\"en\">AFieldset</strong>, nonché le proprietà correlate come <strong lang=\"en\">class-column</strong> per personalizzare le classi dei singoli elementi figli, <strong lang=\"en\">class-columns</strong> per il contenitore padre e <strong lang=\"en\">errors-all</strong> per visualizzare gli errori degli elementi figli.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "Questa pagina tratta l'uso di <strong lang=\"en\">children</strong> nel componente <strong lang=\"en\">AFieldset</strong>, nonché le proprietà correlate come <strong lang=\"en\">class-column-default</strong> per personalizzare le classi dei singoli elementi figli, <strong lang=\"en\">class-columns</strong> per il contenitore padre e <strong lang=\"en\">errors-all</strong> per visualizzare gli errori degli elementi figli.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Elementi figli <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "Questo esempio dimostra la capacità di creare una struttura di elementi nidificati di profondità illimitata utilizzando il componente <strong lang=\"en\">AFieldset</strong>. Ogni elemento figlio può contenere i propri elementi nidificati, consentendo un controllo flessibile della struttura dei dati e della visualizzazione. Ad esempio, qui, il primo e il secondo <strong lang=\"en\">fieldset</strong> contengono i propri elementi figli come campi di testo e caselle di controllo.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Struttura nidificata degli elementi"

package/docs/src/views/Form/PageFieldsetChildren/i18n/ru.json

@@ -1,5 +1,5 @@
 {
-  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "На этой странице рассматривается использование <strong lang=\"en\">children</strong> в компоненте <strong lang=\"en\">AFieldset</strong>, а также связанных с ним <strong lang=\"en\">class-column</strong> для настройки классов отдельных дочерних элементов, <strong lang=\"en\">class-columns</strong> для родительского контейнера, и <strong lang=\"en\">errors-all</strong> для отображения ошибок дочерних элементов.",
+  "_A_FIELDSET_CHILDREN_COMPONENT_DESCRIPTION_": "На этой странице рассматривается использование <strong lang=\"en\">children</strong> в компоненте <strong lang=\"en\">AFieldset</strong>, а также связанных с ним <strong lang=\"en\">class-column-default</strong> для настройки классов отдельных дочерних элементов, <strong lang=\"en\">class-columns</strong> для родительского контейнера, и <strong lang=\"en\">errors-all</strong> для отображения ошибок дочерних элементов.",
   "_A_FIELDSET_CHILDREN_COMPONENT_NAME_": "Дочерние элементы <strong lang=\"en\">children</strong>",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_DESCRIPTION_": "В этом примере показана возможность создания вложенной структуры элементов с неограниченной глубиной с использованием компонента <strong lang=\"en\">AFieldset</strong>. Каждый дочерний элемент может содержать свои вложенные элементы, что позволяет гибко управлять структурой данных и отображением. Например, здесь первый и второй <strong lang=\"en\">fieldset</strong> содержат свои собственные дочерние элементы, такие как текстовые поля и флажки.",
   "_A_FIELDSET_CHILDREN_GROUP_TREE_HEADER_": "Древовидная структура вложенных элементов"

package/docs/src/views/Form/PageGroup/PageGroup.js

@@ -0,0 +1,45 @@
+import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import AlohaTableTranslate from "../../../global/components/AlohaTableTranslate/AlohaTableTranslate.vue";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import PageGroupBasic from "./PageGroupBasic/PageGroupBasic.vue";
+
+import EventsAPI from "./compositionAPI/EventsAPI";
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import TranslateAPI from "./compositionAPI/TranslateAPI";
+
+export default {
+  name: "PageGroup",
+  components: {
+    AlohaPage,
+    AlohaTableProps,
+    AlohaTableTranslate,
+    ATranslation,
+    PageGroupBasic,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataTranslate,
+    } = TranslateAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    return {
+      dataEvents,
+      dataProps,
+      dataTranslate,
+      pageTitle,
+    };
+  },
+};

package/docs/src/views/Form/PageGroup/PageGroup.pug

@@ -0,0 +1,27 @@
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
+  )
+    a-translation(
+      tag="p"
+      html="_A_GROUP_COMPONENT_DESCRIPTION_"
+    )
+
+    page-group-basic
+
+    aloha-table-props(
+      :data="dataProps"
+    )
+
+    aloha-table-props(
+      table-label="Events"
+      :data="dataEvents"
+      :columns="['name', 'type', 'description']"
+    )
+
+    aloha-table-translate(
+      :data="dataTranslate"
+    )
+

package/docs/src/views/Form/PageGroup/PageGroup.vue

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

package/docs/src/views/Form/PageGroup/PageGroupBasic/PageGroupBasic.js

@@ -0,0 +1,46 @@
+import {
+  ref,
+} from "vue";
+
+import AGroup from "../../../../../../src/ui/AGroup/AGroup";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageGroupBasic",
+  components: {
+    AGroup,
+    AlohaExample,
+  },
+  setup() {
+    const childrenGroup = [
+      {
+        id: "text1",
+        type: "text",
+        label: "Input",
+        labelClass: "a_column a_column_3 a_column_12_touch a_text_right",
+        classColumn: "a_column a_column_5 a_column_12_touch",
+      },
+    ];
+    const model = ref({
+      text1: "Aloha",
+    });
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      childrenGroup,
+      codeHtml,
+      codeJs,
+      model,
+    };
+  },
+};

package/docs/src/views/Form/PageGroup/PageGroupBasic/PageGroupBasic.pug

@@ -0,0 +1,11 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BASIC_USAGE_"
+  :props="['model-value', 'children']"
+)
+  a-group(
+    v-model="model"
+    :children="childrenGroup"
+  )
+  div model: {{ model }}

package/docs/src/views/Form/PageGroup/PageGroupBasic/PageGroupBasic.vue

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

package/docs/src/views/Form/PageGroup/PageGroupBasic/compositionAPI/HtmlAPI.js

@@ -0,0 +1,11 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-group
+  v-model="model"
+  :children="childrenGroup"
+></a-group>
+<div>model: {{ model }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageGroup/PageGroupBasic/compositionAPI/JsAPI.js

@@ -0,0 +1,37 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AGroup from "aloha-vue/src/ui/AGroup/AGroup";
+    
+export default {
+  name: "PageGroupBasic",
+  components: {
+    AGroup,
+  },
+  setup() {
+    const childrenGroup = [
+      {
+        id: "text1",
+        type: "text",
+        label: "Input",
+        labelClass: "a_column a_column_3 a_column_12_touch a_text_right",
+        classColumn: "a_column a_column_5 a_column_12_touch",
+      },
+    ];
+    const model = ref({
+      text1: "Aloha",
+    });
+    
+    return {
+      childrenGroup,
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageGroup/compositionAPI/EventsAPI.js

@@ -0,0 +1,23 @@
+export default function EventsAPI() {
+  const dataEvents = [
+    {
+      name: "update:model-value",
+      description: "_A_UI_EVENTS_UPDATE_MODEL_VALUE_DESCRIPTION_",
+      type: "Function",
+    },
+    {
+      name: "focus",
+      description: "_A_UI_EVENTS_FOCUS_DESCRIPTION_",
+      type: "Function",
+    },
+    {
+      name: "blur",
+      description: "_A_UI_EVENTS_BLUR_DESCRIPTION_",
+      type: "Function",
+    },
+  ];
+
+  return {
+    dataEvents,
+  };
+}

package/docs/src/views/Form/PageGroup/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_GROUP_COMPONENT_NAME_",
+    });
+  });
+
+  const pageTitle = computed(() => {
+    return `AGroup${ componentNameTranslated.value ? ` (${ componentNameTranslated.value })` : "" }`;
+  });
+
+  return {
+    pageTitle,
+  };
+}