aloha-vue 1.2.103 → 1.2.105

package/docs/src/components/TheNavbar/compositionAPI/LanguagesAPI.js

@@ -6,8 +6,9 @@ import {
   setLanguage,
 } from "../../../../../src/ATranslation/compositionAPI/ATranslationAPI";
 
+export const modelLanguage = ref("de");
+
 export default function LanguagesAPI() {
-  const modelLanguage = ref("de");
   const languages = [
     {
       label: "Deutsch",
@@ -45,6 +46,7 @@ export default function LanguagesAPI() {
 
   const changeLanguage = () => {
     setTimeout(() => {
+      localStorage.setItem("language", modelLanguage.value);
       setLanguage(modelLanguage.value);
     });
   };
@@ -55,3 +57,8 @@ export default function LanguagesAPI() {
     modelLanguage,
   };
 }
+
+export function setLanguageFromLocalStorage() {
+  modelLanguage.value = localStorage.getItem("language") || "de";
+}
+

package/docs/src/global/components/AlohaHighlightjs/AlohaHighlightjs.js

@@ -9,12 +9,14 @@ import hljs from "highlight.js/lib/core";
 import javascript from "highlight.js/lib/languages/javascript";
 import xml from "highlight.js/lib/languages/xml";
 import markdown from "highlight.js/lib/languages/markdown";
+import scss from "highlight.js/lib/languages/scss";
 
 import "highlight.js/styles/a11y-dark.css";
 
 hljs.registerLanguage("javascript", javascript);
 hljs.registerLanguage("html", xml);
 hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("scss", scss);
 
 
 export default {

package/docs/src/global/components/AlohaTableProps/AlohaTableProps.pug

@@ -15,3 +15,8 @@
       div(
         v-html="row.description"
       )
+      slot(
+        v-if="row.descriptionSlot"
+        :name="[row.descriptionSlot]"
+        :row="row"
+      )

package/docs/src/main.js

@@ -15,11 +15,16 @@ import mainIcons from "./mainIcons";
 import {
   mainTranslation,
 } from "./mainTranslation";
+import {
+  modelLanguage,
+  setLanguageFromLocalStorage,
+} from "./components/TheNavbar/compositionAPI/LanguagesAPI";
 
+setLanguageFromLocalStorage();
 
 const APP = createApp(App);
 
-APP.use(AI18nPlugin, mainTranslation, "de", {});
+APP.use(AI18nPlugin, mainTranslation, modelLanguage.value, {});
 APP.use(AIconPlugin, {
   icons: mainIcons,
 });

package/docs/src/views/Functions/PageFilterCurrency/i18n/ru.json

@@ -1,7 +1,7 @@
 {
-  "_PAGE_FILTER_CURRENCY_ARGUMENTS_DIGIT_GROUPING_": "Указывает, активировано ли группирование цифр для вставки разделителей тысяч в отформатированную строку",
+  "_PAGE_FILTER_CURRENCY_ARGUMENTS_DIGIT_GROUPING_": "Указывает, активировано ли группировка цифр для вставки разделителя разряда числа тысячами в отформатированную строку",
   "_PAGE_FILTER_CURRENCY_ARGUMENTS_DIGITS_": "Количество знаков после запятой в отформатированной строке",
   "_PAGE_FILTER_CURRENCY_ARGUMENTS_SUFFIX_": "Суффикс, добавляемый к отформатированной строке для указания валюты",
   "_PAGE_FILTER_CURRENCY_ARGUMENTS_VALUE_": "Числовое значение, которое следует форматировать как валюту",
-  "_PAGE_FILTER_CURRENCY_DESCRIPTION_": "Функция <strong>filterCurrency</strong> является специализированным расширением функции <a href=\"/#/filter-float\"><strong>filterFloat</strong></a> и предназначена для форматирования числовых значений как валюты. Она принимает числовое значение и возвращает строку, представляющую значение с указанной валютой, количеством десятичных знаков, суффиксом и, при необходимости, группировкой цифр (разделителями тысяч). Если числовое значение не указано (равно null или undefined), возвращается пустая строка. Эта функция разработана с возможностью расширения для поддержки множества валют."
+  "_PAGE_FILTER_CURRENCY_DESCRIPTION_": "Функция <strong>filterCurrency</strong> является специализированным расширением функции <a href=\"/#/filter-float\"><strong>filterFloat</strong></a> и предназначена для форматирования числовых значений как валюты. Она принимает числовое значение и возвращает строку, представляющую значение с указанной валютой, количеством десятичных знаков, суффиксом и, при необходимости, группировкой цифр (разделение разрядов числа тысячами). Если числовое значение не указано (равно null или undefined), возвращается пустая строка. Эта функция разработана с возможностью расширения для поддержки множества валют."
 }

package/docs/src/views/PageButton/PageButton.js

@@ -1,3 +1,4 @@
+import AlohaHighlightjs from "../../global/components/AlohaHighlightjs/AlohaHighlightjs";
 import AlohaPage from "../../global/components/AlohaPage/AlohaPage.vue";
 import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableProps.vue";
 import ATranslation from "../../../../src/ATranslation/ATranslation";
@@ -38,6 +39,7 @@ import SlotsAPI from "./compositionAPI/SlotsAPI";
 export default {
   name: "PageButton",
   components: {
+    AlohaHighlightjs,
     AlohaPage,
     AlohaTableProps,
     ATranslation,

package/docs/src/views/PageButton/PageButton.pug

@@ -4,6 +4,11 @@ aloha-page(
   template(
     v-slot:body
   )
+    a-translation(
+      tag="p"
+      html="_A_BUTTON_COMPONENT_DESCRIPTION_"
+    )
+
     page-button-basic
 
     page-button-outline
@@ -61,6 +66,12 @@ aloha-page(
     aloha-table-props(
       :data="dataProps"
     )
+      template(
+        v-slot:class-default="{ row }"
+      )
+        aloha-highlightjs(
+          :code="row.scss"
+        )
 
     aloha-table-props(
       table-label="Slots"

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

@@ -28,6 +28,28 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "class-default",
+      description: "_A_BUTTON_PROPS_CLASS_DEFAULT_DESCRIPTION_",
+      descriptionSlot: "class-default",
+      scss: `// SCSS:
+.aloha_element {
+  position: relative;
+  & > :not(.aloha_element__hidden) + :not(.aloha_element__ml_0) {
+    margin-left: .5rem;
+  }
+}`,
+      type: "String",
+      default: "aloha_element",
+      required: false,
+    },
+    {
+      name: "class-default-hidden",
+      description: "_A_BUTTON_PROPS_CLASS_DEFAULT_HIDDEN_DESCRIPTION_",
+      type: "String",
+      default: "aloha_element__hidden",
+      required: false,
+    },
     {
       name: "disabled",
       description: "_A_BUTTON_PROPS_DISABLED_DESCRIPTION_",
@@ -42,6 +64,13 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "extraData",
+      description: "_A_BUTTON_PROPS_EXTRA_DATA_DESCRIPTION_",
+      type: "Any",
+      default: undefined,
+      required: false,
+    },
     {
       name: "html",
       description: "_A_BUTTON_PROPS_HTML_DESCRIPTION_",
@@ -98,6 +127,13 @@ export default function PropsAPI() {
       default: "() => uniqueId(\"a_btn_\")",
       required: false,
     },
+    {
+      name: "is-switch",
+      description: "_A_BUTTON_PROPS_IS_SWITCH_DESCRIPTION_",
+      type: "Boolean",
+      default: undefined,
+      required: false,
+    },
     {
       name: "is-title-html",
       description: "_A_BUTTON_PROPS_IS_TITLE_HTML_DESCRIPTION_",
@@ -127,6 +163,13 @@ export default function PropsAPI() {
       default: "a_spinner_small",
       required: false,
     },
+    {
+      name: "model-switch",
+      description: "_A_BUTTON_PROPS_MODEL_SWITCH_DESCRIPTION_",
+      type: "Boolean",
+      default: undefined,
+      required: false,
+    },
     {
       name: "prevent",
       description: "_A_BUTTON_PROPS_PREVENT_DESCRIPTION_",
@@ -166,7 +209,7 @@ export default function PropsAPI() {
       name: "tag",
       description: "_A_BUTTON_PROPS_TAG_DESCRIPTION_",
       type: "String",
-      default: "button",
+      default: undefined,
       required: false,
     },
     {
@@ -247,27 +290,12 @@ export default function PropsAPI() {
       default: "auto",
       required: false,
     },
-    {
-      name: "is-switch",
-      description: "_A_BUTTON_PROPS_IS_SWITCH_DESCRIPTION_",
-      type: "Boolean",
-      default: undefined,
-      required: false,
-    },
-    {
-      name: "model-switch",
-      description: "_A_BUTTON_PROPS_MODEL_SWITCH_DESCRIPTION_",
-      type: "Boolean",
-      default: undefined,
-      required: false,
-    },
     {
       name: "type",
       description: "_A_BUTTON_PROPS_TYPE_DESCRIPTION_",
       type: "String",
       default: "button",
       required: false,
-      //  validator: value => ["button", "submit", "reset"].indexOf(value) !== -1,
     },
   ];
 

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

@@ -1,4 +1,5 @@
 {
+  "_A_BUTTON_COMPONENT_DESCRIPTION_": "Die Komponente <strong>AButton</strong> ist eine universelle Schaltfläche mit erweiterten Anpassungsmöglichkeiten über Props. Sie integriert sich mit <a href=\"/#/element\">AElement</a> für das Rendering und ermöglicht die Anpassung von Zugänglichkeit, Klassen, Identifikatoren, Ladezuständen und anderen Parametern. Sie unterstützt das Anpassen des Aussehens, des Texts, der Icons und das Verarbeiten von Ereignissen wie Klicks, was sie zu einem leistungsstarken Werkzeug für die Gestaltung von Benutzeroberflächen macht.",
   "_A_BUTTON_COMPONENT_NAME_": "Schaltfläche",
   "_A_BUTTON_EVENTS_CLICK_DESCRIPTION_": "Wird emittiert, wenn der Button geklickt wird.",
   "_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div>DAS IST MEIN <strong>HTML-TOOLTIP!!!!</strong></div><div>Zweite Zeile</div>",
@@ -55,13 +56,16 @@
   "_A_BUTTON_GROUP_TITLE_HTML_EXTRA_DESCRIPTION_": "Anzeige von HTML-Titel mit Übersetzung und Parameter",
   "_A_BUTTON_GROUP_TITLE_HTML_EXTRA_HEADER_": "Im folgenden Beispiel wird der Titel als übersetzter Text mit einem Parameter angezeigt. Dabei wird der Parameter number über das extra-Attribut übergeben.",
   "_A_BUTTON_GROUP_TITLE_HTML_HEADER_": "Anzeige von HTML-Titel und Titelplatzierung",
-  "_A_BUTTON_GROUP_TRANSPARENT_HEADER_": "Transparente Schaltflächen",
   "_A_BUTTON_GROUP_TRANSPARENT_DESCRIPTION_": "Wenn Sie eine Schaltfläche benötigen, die mit dem Hintergrund verschmilzt, anstatt ihn zu verdecken, ersetzen Sie die Standardmodifikatorklassen durch die .a_btn_transparent*-Klassen.",
+  "_A_BUTTON_GROUP_TRANSPARENT_HEADER_": "Transparente Schaltflächen",
   "_A_BUTTON_PROPS_ARIA_DISABLED_DESCRIPTION_": "Gibt an, ob der Button als inaktiv markiert werden soll. Wenn der Wert auf true gesetzt ist, wird der Button als inaktiv dargestellt und die Accessibility-Eigenschaft \"aria-disabled\" wird hinzugefügt.",
   "_A_BUTTON_PROPS_ARIA_LABEL_DESCRIPTION_": " Gibt das ARIA-Label für den Button an. Sie können einen String, eine Zahl oder ein Objekt als Wert verwenden, um das gewünschte Label festzulegen.",
   "_A_BUTTON_PROPS_ATTRIBUTES_DESCRIPTION_": "Gibt zusätzliche Attribute für den Button an. Sie können ein Objekt verwenden, um die gewünschten Attribute und deren Werte festzulegen.",
+  "_A_BUTTON_PROPS_CLASS_DEFAULT_DESCRIPTION_": "Definiert die Basis-CSS-Klasse für das Element, indem ein allgemeiner visueller Standardstil festgelegt wird.",
+  "_A_BUTTON_PROPS_CLASS_DEFAULT_HIDDEN_DESCRIPTION_": "Legt eine CSS-Klasse fest, um das Element zu verbergen, wird verwendet, um die Sichtbarkeit des Elements in verschiedenen Kontexten zu steuern.",
   "_A_BUTTON_PROPS_CLASS_DESCRIPTION_": "CSS-Klasse",
   "_A_BUTTON_PROPS_DISABLED_DESCRIPTION_": "Gibt an, ob der Button deaktiviert werden soll. Wenn der Wert auf true gesetzt ist, wird der Button deaktiviert.",
+  "_A_BUTTON_PROPS_EXTRA_DATA_DESCRIPTION_": "Bietet zusätzliche Daten für alle Slots des Komponenten, was die Übertragung benutzerdefinierter Daten und Informationen ermöglicht, die innerhalb der Slots für eine flexiblere und detailliertere Anpassung des Inhalts verwendet werden können.",
   "_A_BUTTON_PROPS_EXTRA_DESCRIPTION_": "Extra-Objekt für Übersetzung",
   "_A_BUTTON_PROPS_HTML_DESCRIPTION_": "Der zu sichernde HTML-Inhalt, der im Button angezeigt werden soll",
   "_A_BUTTON_PROPS_HTML_SCREEN_READER_DESCRIPTION_": "Gibt das HTML für den Screenreader-Inhalt des Buttons an. Sie können einen String, eine Zahl oder ein Objekt als Wert verwenden, um den gewünschten HTML-Inhalt festzulegen.",
@@ -90,8 +94,10 @@
   "_A_BUTTON_PROPS_TEXT_DESCRIPTION_": "Ein String oder ein Objekt, das den Text für verschiedene Geräte enthält. Verwenden Sie die Schlüssel \"mobile\" und \"desktop\", um den entsprechenden Text für jedes Gerät anzugeben.",
   "_A_BUTTON_PROPS_TEXT_SCREEN_READER_DESCRIPTION_": "Gibt den Text an, der für Screenreader verwendet werden soll.",
   "_A_BUTTON_PROPS_TEXT_TAG_DESCRIPTION_": "Diese Prop ermöglicht die Anpassung des HTML-Tags, in dem der Text innerhalb des Buttons gerendert wird",
+  "_A_BUTTON_PROPS_TITLE_ATTRIBUTES_DESCRIPTION_": "Bietet ein Objekt zur Einstellung zusätzlicher HTML-Attribute für den Titel des Elements, ermöglicht eine detaillierte Anpassung seines Verhaltens und Stils.",
   "_A_BUTTON_PROPS_TITLE_DESCRIPTION_": "Ein String oder ein Array von Elementen, die zu einem einzigen Titel konkateniert werden.",
   "_A_BUTTON_PROPS_TITLE_PLACEMENT_DESCRIPTION_": "Die Positionierung des HTML-Titels",
+  "_A_BUTTON_PROPS_TITLE_Z_INDEX_DESCRIPTION_": "Setzt den z-Index für den Titel des Elements, bestimmt seine Überlagerungsreihenfolge im Kontext anderer überlappender Elemente.",
   "_A_BUTTON_PROPS_TYPE_DESCRIPTION_": "Gibt den Typ des Buttons an. Erlaubte Werte sind \"button\", \"submit\" und \"reset\".",
   "_A_BUTTON_SLOT_BUTTON_APPEND_DESCRIPTION_": "Der Slot, der den Inhalt enthält, der nach dem Text im Button angezeigt werden soll.",
   "_A_BUTTON_SLOT_BUTTON_PREPEND_DESCRIPTION_": "Der Slot, der den Inhalt enthält, der vor dem Text im Button angezeigt werden soll.",

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

@@ -1,13 +1,14 @@
 {
+  "_A_BUTTON_COMPONENT_DESCRIPTION_": "Компонент <strong>AButton</strong> представляет собой универсальную кнопку с расширенной настройкой через пропсы. Он интегрируется с <a href=\"/#/element\">AElement</a> для рендеринга, позволяя настроить доступность, классы, идентификаторы, состояние загрузки и другие параметры. Поддерживает настройку внешнего вида, текста, иконок и обработку событий, таких как клик, делая его мощным инструментом для создания интерфейсов.",
   "_A_BUTTON_COMPONENT_NAME_": "Кнопка",
   "_A_BUTTON_EVENTS_CLICK_DESCRIPTION_": "Срабатывает при клике на кнопку.",
   "_A_BUTTON_EXAMPLE_BIG_TITLE_": "<div>ЭТО МОЙ <strong>HTML-ВОЛШЕБНАЯ ПОДСКАЗКА!!!!</strong></div><div>Вторая строка</div>",
   "_A_BUTTON_EXAMPLE_BIG_TITLE_{{number}}_": "<div>ЭТО МОЙ <strong>HTML-ВОЛШЕБНАЯ ПОДСКАЗКА!!!!</strong></div><div>Вторая строка</div><div>Номер: {{ number }}</div>",
   "_A_BUTTON_EXAMPLE_HTML_": "<span onclick='alert(\"Aloha\")'>Aloha</button>",
-  "_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "Компонент AButton позволяет отображать кнопку в неактивном состоянии и устанавливать соответствующие атрибуты доступности. Для этого можно использовать свойство \"aria-disabled\" для указания неактивного состояния. Это позволяет использовать события, такие как фокус или наведение, при этом кнопка остаётся неактивной для нажатия.",
+  "_A_BUTTON_GROUP_ARIA_DISABLED_DESCRIPTION_": "Компонент <strong>AButton</strong> позволяет отображать кнопку в неактивном состоянии и устанавливать соответствующие атрибуты доступности. Для этого можно использовать свойство \"aria-disabled\" для указания неактивного состояния. Это позволяет использовать события, такие как фокус или наведение, при этом кнопка остаётся неактивной для нажатия.",
   "_A_BUTTON_GROUP_ARIA_DISABLED_HEADER_": "Неактивная кнопка с использованием aria-disabled",
   "_A_BUTTON_GROUP_BASIC_DESCRIPTION_": "Существует множество классов CSS, которые можно использовать с кнопкой.",
-  "_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "Компонент AButton позволяет использовать различные сложные свойства и события для настройки и управления кнопкой с расширенными функциями. В следующем примере используются несколько свойств и событий для настройки кнопки и управления её состоянием загрузки.",
+  "_A_BUTTON_GROUP_COMPLEX_DESCRIPTION_": "Компонент <strong>AButton</strong> позволяет использовать различные сложные свойства и события для настройки и управления кнопкой с расширенными функциями. В следующем примере используются несколько свойств и событий для настройки кнопки и управления её состоянием загрузки.",
   "_A_BUTTON_GROUP_COMPLEX_HEADER_": "Использование сложных свойств и событий",
   "_A_BUTTON_GROUP_DISABLED_DESCRIPTION_": "Компонент AButton позволяет отключить кнопку с помощью свойства \"disabled\". Это делает кнопку недоступной для взаимодействия как внешне, так и функционально.",
   "_A_BUTTON_GROUP_DISABLED_HEADER_": "Отключение кнопки",
@@ -55,11 +56,16 @@
   "_A_BUTTON_GROUP_TITLE_HTML_EXTRA_DESCRIPTION_": "Отображение HTML-заголовка с переводом и параметрами",
   "_A_BUTTON_GROUP_TITLE_HTML_EXTRA_HEADER_": "В приведенном ниже примере заголовок отображается как переведенный текст с параметром. Параметр number передается через extra атрибут.",
   "_A_BUTTON_GROUP_TITLE_HTML_HEADER_": "Отображение HTML-заголовка и его размещение",
+  "_A_BUTTON_GROUP_TRANSPARENT_DESCRIPTION_": "Если вам нужна кнопка, которая будет гармонировать с фоном, а не перекрывать его, замените стандартные классы на классы .a_btn_transparent*.",
+  "_A_BUTTON_GROUP_TRANSPARENT_HEADER_": "Прозрачные кнопки",
   "_A_BUTTON_PROPS_ARIA_DISABLED_DESCRIPTION_": "Определяет, должна ли кнопка быть неактивной. Если значение установлено как true, кнопка будет отображаться как неактивная, и будет добавлено свойство доступности \"aria-disabled\".",
   "_A_BUTTON_PROPS_ARIA_LABEL_DESCRIPTION_": "Определяет ARIA-метку для кнопки. Вы можете использовать строку, число или объект в качестве значения для задания желаемой метки.",
   "_A_BUTTON_PROPS_ATTRIBUTES_DESCRIPTION_": "Определяет дополнительные атрибуты для кнопки. Вы можете использовать объект для задания необходимых атрибутов и их значений.",
+  "_A_BUTTON_PROPS_CLASS_DEFAULT_DESCRIPTION_": "Определяет базовый класс стиля для элемента, устанавливая общий визуальный стиль по умолчанию.",
+  "_A_BUTTON_PROPS_CLASS_DEFAULT_HIDDEN_DESCRIPTION_": "Задает класс стиля для скрытия элемента, используется для управления видимостью элемента в различных контекстах.",
   "_A_BUTTON_PROPS_CLASS_DESCRIPTION_": "CSS-класс",
   "_A_BUTTON_PROPS_DISABLED_DESCRIPTION_": "Определяет, должна ли кнопка быть отключена. Если значение установлено как true, кнопка будет отключена.",
+  "_A_BUTTON_PROPS_EXTRA_DATA_DESCRIPTION_": "Предоставляет дополнительные данные для всех слотов компонента, позволяя передавать пользовательские данные и информацию, которые могут быть использованы внутри слотов для более гибкой и детализированной кастомизации содержимого.",
   "_A_BUTTON_PROPS_EXTRA_DESCRIPTION_": "Дополнительный объект для перевода",
   "_A_BUTTON_PROPS_HTML_DESCRIPTION_": "HTML-контент, который должен быть отображен внутри кнопки.",
   "_A_BUTTON_PROPS_HTML_SCREEN_READER_DESCRIPTION_": "Определяет HTML-контент для чтения экраном кнопки. Вы можете использовать строку, число или объект в качестве значения для задания желаемого HTML-контента.",
@@ -88,8 +94,10 @@
   "_A_BUTTON_PROPS_TEXT_DESCRIPTION_": "Строка или объект, содержащий текст для разных устройств. Используйте ключи \"mobile\" и \"desktop\", чтобы указать соответствующий текст для каждого устройства.",
   "_A_BUTTON_PROPS_TEXT_SCREEN_READER_DESCRIPTION_": "Определяет текст, который будет использоваться для считывания экраном.",
   "_A_BUTTON_PROPS_TEXT_TAG_DESCRIPTION_": "Этот параметр позволяет настраивать тег HTML, в котором отображается текст внутри кнопки.",
+  "_A_BUTTON_PROPS_TITLE_ATTRIBUTES_DESCRIPTION_": "Предоставляет объект для настройки дополнительных HTML атрибутов для заголовка элемента, позволяя детализировать его поведение и стиль.",
   "_A_BUTTON_PROPS_TITLE_DESCRIPTION_": "Строка или массив элементов, которые будут объединены в один заголовок.",
   "_A_BUTTON_PROPS_TITLE_PLACEMENT_DESCRIPTION_": "Позиционирование HTML-заголовка.",
+  "_A_BUTTON_PROPS_TITLE_Z_INDEX_DESCRIPTION_": "Устанавливает z-index для заголовка элемента, определяя его порядок наложения в контексте других перекрывающихся элементов.",
   "_A_BUTTON_PROPS_TYPE_DESCRIPTION_": "Определяет тип кнопки. Допустимые значения: \"button\", \"submit\" и \"reset\".",
   "_A_BUTTON_SLOT_BUTTON_APPEND_DESCRIPTION_": "Слот, который содержит контент, который должен быть отображен после текста кнопки.",
   "_A_BUTTON_SLOT_BUTTON_PREPEND_DESCRIPTION_": "Слот, который содержит контент, который должен быть отображен перед текстом кнопки.",

package/package.json

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

package/src/AButton/AButton.js

@@ -2,19 +2,9 @@ import {
   h,
 } from "vue";
 
-import AIcon from "../AIcon/AIcon";
-import ASpinner from "../ASpinner/ASpinner";
-import ATranslation from "../ATranslation/ATranslation";
+import AElement from "../AElement/AElement";
 
-import AriaLabelAPI from "../ATranslation/compositionAPI/AriaLabelAPI";
-import ClickAPI from "./comositionAPI/ClickAPI";
-import ComponentLocalAPI from "./comositionAPI/ComponentLocalAPI";
-import HtmlTitleAPI from "./comositionAPI/HtmlTitleAPI";
-import LoadingAPI from "./comositionAPI/LoadingAPI";
-import SwitchAPI from "./comositionAPI/SwitchAPI";
-import TextAPI from "./comositionAPI/TextAPI";
-import TitleAPI from "./comositionAPI/TitleAPI";
-import TypeAPI from "./comositionAPI/TypeAPI";
+import EmitsAPI from "./compositionAPI/EmitsAPI";
 
 import placements from "../const/placements";
 import {
@@ -47,10 +37,15 @@ export default {
       required: false,
       default: undefined,
     },
-    classDefault: { // TODO: Documentation
+    classDefault: {
       type: String,
       required: false,
-      default: "aloha_btn",
+      default: "aloha_element",
+    },
+    classDefaultHidden: {
+      type: String,
+      required: false,
+      default: "aloha_element__hidden",
     },
     disabled: {
       type: Boolean,
@@ -166,7 +161,7 @@ export default {
     tag: {
       type: String,
       required: false,
-      default: "button",
+      default: undefined,
     },
     text: {
       type: [String, Number, Object, Array],
@@ -242,164 +237,18 @@ export default {
   ],
   setup(props, context) {
     const {
-      typeLocal,
-    } = TypeAPI(props);
-
-    const {
-      isTitleVisible,
-    } = TitleAPI(props);
-
-    const {
-      isLoadingLeft,
-      isLoadingRight,
-    } = LoadingAPI(props);
-
-    const {
-      isTextOrHtmlVisible,
-      isTextOrHtmlScreenReaderVisible,
-    } = TextAPI(props);
-
-    const {
-      onClick,
-    } = ClickAPI(props, context);
-
-    const {
-      componentLocal,
-    } = ComponentLocalAPI(props);
-
-    const {
-      buttonRef,
-      htmlTitleAttributes,
-    } = HtmlTitleAPI(props);
-
-    const {
-      ariaLabelAttributes,
-    } = AriaLabelAPI(props);
-
-    const {
-      isSwitchActive,
-      switchClass,
-    } = SwitchAPI(props);
+      clickEmit,
+    } = EmitsAPI(props, context);
 
     return {
-      ariaLabelAttributes,
-      buttonRef,
-      componentLocal,
-      htmlTitleAttributes,
-      isLoadingLeft,
-      isLoadingRight,
-      isSwitchActive,
-      isTextOrHtmlScreenReaderVisible,
-      isTextOrHtmlVisible,
-      isTitleVisible,
-      onClick,
-      typeLocal,
-      switchClass,
+      clickEmit,
     };
   },
   render() {
-    return h(this.componentLocal, {
+    return h(AElement, {
       ...this.$attrs,
-      ...this.htmlTitleAttributes,
-      ...this.ariaLabelAttributes,
-      ref: "buttonRef",
-      id: this.id,
-      class: [
-        this.classDefault,
-        this.switchClass,
-        this.class,
-        {
-          disabled: this.ariaDisabled,
-        },
-      ],
-      type: this.typeLocal,
-      tabindex: this.tabindex,
-      disabled: this.disabled,
-      ariaDisabled: this.ariaDisabled,
-      "aria-pressed": this.isSwitchActive,
-      // TODO: ATable
-      isAllRowsSelected: undefined,
-      onClick: this.onClick,
-      ...this.attributes,
-    }, {
-      default: () => [
-        (!this.isTitleHtml && this.isTitleVisible) && h(ATranslation, {
-          tag: "span",
-          ariaHidden: true,
-          class: "a_position_absolute_all aloha_btn__hidden",
-          title: this.title,
-          extra: this.extra,
-          style: {
-            zIndex: this.titleZIndex,
-          },
-          ...this.titleAttributes,
-        }),
-        this.isTextOrHtmlScreenReaderVisible && h(ATranslation, {
-          class: "a_sr_only aloha_btn__hidden",
-          tag: "span",
-          text: this.textScreenReader,
-          html: this.htmlScreenReader,
-          safeHtml: this.safeHtmlScreenReader,
-          extra: this.extra,
-        }),
-        this.$slots.buttonPrepend && this.$slots.buttonPrepend(),
-        this.isLoadingLeft && h(ASpinner, {
-          class: [
-            "aloha_btn__spinner_left",
-            this.loadingClass,
-          ],
-        }),
-        h(AIcon, {
-          icon: this.iconLeft,
-          iconTag: this.iconTag,
-          class: [
-            "aloha_btn__icon_left",
-            this.iconClass,
-          ],
-          ...this.iconAttributes,
-        }),
-        this.$slots.default && this.$slots.default({ extraData: this.extraData }),
-        this.isTextOrHtmlVisible && h(ATranslation, {
-          ariaHidden: this.textAriaHidden,
-          class: this.textClass,
-          extra: this.extra,
-          html: this.html,
-          safeHtml: this.safeHtml,
-          tag: this.textTag,
-          text: this.text,
-          textAfter: this.textAfter,
-          textBefore: this.textBefore,
-        }),
-        h(AIcon, {
-          icon: this.iconRight,
-          iconTag: this.iconTag,
-          class: [
-            "aloha_btn__icon_right",
-            this.iconClass,
-          ],
-          ...this.iconAttributes,
-        }),
-        this.isLoadingRight && h(ASpinner, {
-          class: [
-            "aloha_btn__spinner_right",
-            this.loadingClass,
-          ],
-        }),
-        this.$slots.buttonAppend && this.$slots.buttonAppend(),
-      ],
-      title: !this.isTitleHtml ||
-        (!this.title && !this.$slots.buttonTitle) ?
-        undefined :
-        () => {
-          return [
-            this.isTitleVisible && h(ATranslation, {
-              html: this.title,
-              tag: "span",
-              extra: this.extra,
-            }),
-            this.$slots.buttonTitle && this.$slots.buttonTitle(),
-          ];
-        },
-    });
+      ...this.$props,
+      onClick: this.clickEmit,
+    }, this.$slots);
   },
 };

package/src/AButton/compositionAPI/EmitsAPI.js

@@ -0,0 +1,9 @@
+export default function EmitsAPI(props, { emit }) {
+  const clickEmit = arg => {
+    emit("click", arg);
+  };
+
+  return {
+    clickEmit,
+  };
+}