aloha-vue 1.0.217 → 1.0.219

package/docs/src/views/PageCheckbox/PageCheckbox.pug

@@ -22,6 +22,7 @@ div
     key-label="label"
     label="Test label"
     :is-button-group="true"
+    :required="true"
   )
   div modelArr:
     pre {{ modelArr }}

package/docs/src/views/PageTable/PageTable.js

@@ -25,7 +25,9 @@ export default {
           grow: 2,
           footerSlot: "footerAloha",
           class: "a_text_right",
+          icon: "Close",
           isRender: true,
+          title: "Aloha",
         },
         {
           label: "Slot",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.217",
+  "version": "1.0.219",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AModal/AModal.js

@@ -456,7 +456,14 @@ export default {
                 ref: "modal_footer",
                 class: "a_modal_footer",
               }, [
-                this.$slots.modalFooter && this.$slots.modalFooter(),
+                this.$slots.modalFooterPrepend && this.$slots.modalFooterPrepend({
+                  saveButtonClass: this.saveButtonClass,
+                  closeButtonClass: this.closeButtonClass,
+                  disabled: this.disabledLocal,
+                  disabledSave: this.disabledSave,
+                  save: this.save,
+                  close: this.close,
+                }),
                 (!this.isSaveButtonHide && this.save) && h("button", {
                   type: "button",
                   class: this.saveButtonClass,
@@ -473,6 +480,14 @@ export default {
                 }, [
                   h("span", null, this.closeButtonText),
                 ]),
+                this.$slots.modalFooterAppend && this.$slots.modalFooterAppend({
+                  saveButtonClass: this.saveButtonClass,
+                  closeButtonClass: this.closeButtonClass,
+                  disabled: this.disabledLocal,
+                  disabledSave: this.disabledSave,
+                  save: this.save,
+                  close: this.close,
+                }),
               ]),
             ]),
           ]),

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -196,9 +196,25 @@ export default {
         ],
       }, [
         h(this.componentLocal, this.attributesForButton, [
-          h(ATranslation, {
+          this.column.icon && h(AIcon, {
+            icon: this.column.icon,
+            class: "a_table__th__icon",
+          }),
+          this.column.label && h(ATranslation, {
             html: this.column.label,
             tag: "span",
+            class: "a_table__th__text",
+          }),
+          this.column.title && h(ATranslation, {
+            title: this.column.title,
+            ariaHidden: true,
+            tag: "span",
+            class: "a_position_absolute_all",
+          }),
+          this.column.title && h(ATranslation, {
+            text: this.column.title,
+            tag: "span",
+            class: "a_sr_only",
           }),
           h("span", {
             class: "a_table__th__sort__icons",

package/src/styles/components/ATable.scss

@@ -105,6 +105,7 @@
   align-items: center;
   background-color: var(--a_table_th_bg);
   border-bottom: var(--a_table_th_border_bottom_width) solid var(--a_table_th_border_bottom_color);
+  position: relative;
 }
 .a_table__th_draggable {
   cursor: move;
@@ -206,6 +207,10 @@
   border-top: var(--a_table_footer_border_top);
 }
 
+.a_table__th__icon + .a_table__th__text {
+  margin-left: var(--a_table_between_actions_margin, .5rem);
+}
+
 .a_table__th__sort {
   padding: 0;
   border: none;

package/src/ui/ACheckbox/ACheckbox.js

@@ -1,4 +1,5 @@
 import {
+  computed,
   h,
   toRef,
   withDirectives,
@@ -6,6 +7,7 @@ import {
 
 import ACheckboxItem from "./ACheckboxItem/ACheckboxItem";
 import AErrorsText from "../AErrorsText/AErrorsText";
+import ATranslation from "../../ATranslation/ATranslation";
 
 import ASafeHtml from "../../directives/ASafeHtml";
 
@@ -83,6 +85,8 @@ export default {
     "updateData",
   ],
   setup(props, context) {
+    const required = toRef(props, "required");
+
     const {
       componentStyleHide,
     } = UiStyleHideAPI(props);
@@ -107,6 +111,10 @@ export default {
       dataKeyByKeyIdLocal,
     });
 
+    const textAfterLabel = computed(() => {
+      return required.value ? "*" : "";
+    });
+
     const disabled = toRef(props, "disabled");
     const onChangeModelValue = ({ model, $event }) => {
       if (disabled.value) {
@@ -128,6 +136,7 @@ export default {
       helpTextId,
       htmlIdLocal,
       isErrors,
+      textAfterLabel,
 
       dataLocal,
 
@@ -159,13 +168,14 @@ export default {
             ],
             "aria-describedby": this.ariaDescribedbyLocal,
           }, [
-            this.label && withDirectives(h("legend", {
+            this.label && h(ATranslation, {
+              tag: "legend",
               class: ["a_legend", {
                 a_legend_invalid: this.isErrors,
               }],
-            }), [
-              [ASafeHtml, this.label],
-            ]),
+              html: this.label,
+              textAfter: this.textAfterLabel,
+            }),
             h("div", {
               class: {
                 a_btn_group: this.isButtonGroup,

package/src/ui/ARadio/ARadio.js

@@ -1,4 +1,5 @@
 import {
+  computed,
   h,
   toRef,
   withDirectives,
@@ -15,6 +16,7 @@ import UiAPI from "../compositionApi/UiAPI";
 import UiDataWithKeyIdAndLabelAPI from "../compositionApi/UiDataWithKeyIdAndLabelAPI";
 import UiDataWatchEmitAPI from "../compositionApi/UiDataWatchEmitAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
+import ATranslation from "../../ATranslation/ATranslation";
 
 export default {
   name: "ARadio",
@@ -83,6 +85,8 @@ export default {
     "updateData",
   ],
   setup(props, context) {
+    const required = toRef(props, "required");
+
     const {
       componentStyleHide,
     } = UiStyleHideAPI(props);
@@ -107,6 +111,10 @@ export default {
       dataKeyByKeyIdLocal,
     });
 
+    const textAfterLabel = computed(() => {
+      return required.value ? "*" : "";
+    });
+
     const disabled = toRef(props, "disabled");
     const onChangeModelValue = ({ model, $event }) => {
       if (disabled.value) {
@@ -128,6 +136,7 @@ export default {
       helpTextId,
       htmlIdLocal,
       isErrors,
+      textAfterLabel,
 
       dataLocal,
 
@@ -159,13 +168,14 @@ export default {
             ],
             "aria-describedby": this.ariaDescribedbyLocal,
           }, [
-            this.label && withDirectives(h("legend", {
+            this.label && h(ATranslation, {
+              tag: "legend",
               class: ["a_legend", {
                 a_legend_invalid: this.isErrors,
               }],
-            }), [
-              [ASafeHtml, this.label],
-            ]),
+              html: this.label,
+              textAfter: this.textAfterLabel,
+            }),
             h("div", {
               class: {
                 a_btn_group: this.isButtonGroup,