aloha-vue 1.2.159 → 1.2.161

package/docs/src/views/PageFilters/PageFiltersExample/PageFiltersExample.js

@@ -27,6 +27,7 @@ export default {
       type: "text",
       id: "search",
       label: "_A_PAGE_FILTER_SEARCH_",
+      labelScreenreader: "_A_PAGE_FILTER_SEARCH_SCREEN_READER_",
     };
 
     const filters = [

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

@@ -2,6 +2,7 @@
   "_A_FILTERS_COMPONENT_DESCRIPTION_": "_A_FILTERS_COMPONENT_DESCRIPTION_",
   "_A_FILTERS_COMPONENT_NAME_": "Filters",
   "_A_PAGE_FILTER_SEARCH_": "Schnellsuche",
+  "_A_PAGE_FILTER_SEARCH_SCREEN_READER_": "Schnellsuche für Screen Reader",
   "_A_PAGE_FILTER_TEXT_": "Text",
   "_A_PAGE_FILTER_DATE_": "Datum",
   "_A_PAGE_FILTER_INTEGER_": "Ganze Zahl",

package/package.json

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

package/src/AElement/AElement.js

@@ -377,38 +377,46 @@ export default {
       ...this.attributesToExcludeFromRender,
     }, {
       default: () => [
-        (!this.isTitleHtml && this.isTitleVisible) ? h(ATranslation, {
-          tag: "span",
-          ariaHidden: true,
-          class: [
-            "a_position_absolute_all",
-            this.classDefaultHidden,
-          ],
-          title: this.title,
-          extra: this.extra,
-          style: {
-            zIndex: this.titleZIndex,
-          },
-          ...this.titleAttributes,
-        }) : undefined,
-        this.isTextOrHtmlScreenReaderVisible ? h(ATranslation, {
-          class: [
-            "a_sr_only",
-            this.classDefaultHidden,
-          ],
-          tag: "span",
-          text: this.textScreenReader,
-          html: this.htmlScreenReader,
-          safeHtml: this.safeHtmlScreenReader,
-          extra: this.extra,
-        }) : undefined,
-        this.$slots.buttonPrepend ? this.$slots.buttonPrepend({ extraData: this.extraData }) : undefined,
-        this.isLoadingLeft ? h(ASpinner, {
-          class: [
-            "aloha_btn__spinner_left",
-            this.loadingClass,
-          ],
-        }) : undefined,
+        (!this.isTitleHtml && this.isTitleVisible) ?
+          h(ATranslation, {
+            tag: "span",
+            ariaHidden: true,
+            class: [
+              "a_position_absolute_all",
+              this.classDefaultHidden,
+            ],
+            title: this.title,
+            extra: this.extra,
+            style: {
+              zIndex: this.titleZIndex,
+            },
+            ...this.titleAttributes,
+          }) :
+          "",
+        this.isTextOrHtmlScreenReaderVisible ?
+          h(ATranslation, {
+            class: [
+              "a_sr_only",
+              this.classDefaultHidden,
+            ],
+            tag: "span",
+            text: this.textScreenReader,
+            html: this.htmlScreenReader,
+            safeHtml: this.safeHtmlScreenReader,
+            extra: this.extra,
+          }) :
+          "",
+        this.$slots.buttonPrepend ?
+          this.$slots.buttonPrepend({ extraData: this.extraData }) :
+          "",
+        this.isLoadingLeft ?
+          h(ASpinner, {
+            class: [
+              "aloha_btn__spinner_left",
+              this.loadingClass,
+            ],
+          }) :
+          "",
         h(AIcon, {
           icon: this.iconLeft,
           iconTag: this.iconTag,
@@ -418,18 +426,22 @@ export default {
           ],
           ...this.iconAttributes,
         }),
-        this.$slots.default ? this.$slots.default({ extraData: this.extraData }) : undefined,
-        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,
-        }) : undefined,
+        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,
@@ -446,20 +458,26 @@ export default {
               this.loadingClass,
             ],
           }) :
-          undefined,
-        this.$slots.buttonAppend ? this.$slots.buttonAppend({ extraData: this.extraData }) : undefined,
+          "",
+        this.$slots.buttonAppend ?
+          this.$slots.buttonAppend({ extraData: this.extraData }) :
+          "",
       ],
       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({ extraData: this.extraData }),
+            this.isTitleVisible ?
+              h(ATranslation, {
+                html: this.title,
+                tag: "span",
+                extra: this.extra,
+              }) :
+              "",
+            this.$slots.buttonTitle ?
+              this.$slots.buttonTitle({ extraData: this.extraData }) :
+              "",
           ];
         },
     });

package/src/ATable/ATable.js

@@ -54,6 +54,11 @@ export default {
       required: false,
       default: () => [],
     },
+    clearSelectedRowsOnDataChange: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     columnActionsWidth: {
       type: Number,
       required: false,

package/src/ATable/compositionAPI/RowsAPI.js

@@ -17,6 +17,7 @@ export default function RowsAPI(props, {
   setEmptySelectedRowsIndexes = () => {},
   usePaginationLocal = computed(() => false),
 }) {
+  const clearSelectedRowsOnDataChange = toRef(props, "clearSelectedRowsOnDataChange");
   const pagination = toRef(props, "pagination");
   const rowsCountRenderPerTick = toRef(props, "rowsCountRenderPerTick");
 
@@ -88,7 +89,7 @@ export default function RowsAPI(props, {
       return;
     }
     prevDataPaginated.value = [...newValue];
-    if (!firstLoad) {
+    if (!firstLoad && clearSelectedRowsOnDataChange.value) {
       setEmptySelectedRowsIndexes();
     }
     firstLoad = false;

package/src/ui/ADatepicker/ADatepicker.js

@@ -114,6 +114,11 @@ export default {
       required: false,
       default: false,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     lang: {
       type: String,
       default: "de",
@@ -475,6 +480,7 @@ export default {
           id: this.htmlIdLocal,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           type: this.type,
           isLabelFloat: this.isLabelFloat,

package/src/ui/ADatepickerRange/ADatepickerRange.js

@@ -169,6 +169,11 @@ export default {
       required: false,
       default: "_A_DATEPICKER_RANGE_FROM_",
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     labelUntil: {
       type: String,
       required: false,
@@ -330,6 +335,7 @@ export default {
           id: this.idFrom,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           type: this.type,
           isLabelFloat: false,

package/src/ui/AGroup/AGroup.js

@@ -155,6 +155,7 @@ export default {
             id: this.htmlIdFirstChild,
             label: this.firstChild.label,
             labelClass: this.firstChild.labelClass,
+            labelScreenreader: this.firstChild.labelScreenreader,
             required: this.firstChild.required,
             type: this.firstChild.type,
             isLabelFloat: false,

package/src/ui/AInput/AInput.js

@@ -10,7 +10,6 @@ import AFormElementBtnClear from "../../AFormElement/AFormElementBtnClear/AFormE
 import AFormHelpText from "../AFormHelpText/AFormHelpText";
 import AIcon from "../../AIcon/AIcon";
 import ALabel from "../ALabel/ALabel";
-import ATranslation from "../../ATranslation/ATranslation";
 
 import UiClearButtonMixinProps from "../mixins/UiClearButtonMixinProps";
 import UiMixinProps from "../mixins/UiMixinProps";
@@ -23,11 +22,6 @@ import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
 export default {
   name: "AInput",
-  components: {
-    AFormElementBtnClear,
-    ALabel,
-    ATranslation,
-  },
   mixins: [
     UiClearButtonMixinProps,
     UiMixinProps,
@@ -43,6 +37,11 @@ export default {
       required: false,
       default: undefined,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     maxlength: {
       type: [String, Number],
       required: false,
@@ -165,6 +164,7 @@ export default {
           id: this.htmlIdLocal,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           type: this.type,
           isLabelFloat: this.isLabelFloat,

package/src/ui/AInputFile/AInputFile.js

@@ -37,6 +37,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     modelUndefined: {
       required: false,
       default: "",
@@ -161,6 +166,7 @@ export default {
           id: this.htmlIdLocal,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           hideId: true,
           type: this.type,

package/src/ui/AInputNumber/AInputNumber.js

@@ -75,6 +75,11 @@ export default {
       required: false,
       default: inputNumberPluginOptions.value.propsDefault.isLabelFloat,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     max: {
       type: Number,
       required: false,
@@ -295,6 +300,7 @@ export default {
           id: this.htmlIdLocal,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           type: this.type,
           isLabelFloat: this.isLabelFloat,
@@ -317,6 +323,7 @@ export default {
               id: this.htmlIdLocal,
               label: this.label,
               labelClass: this.labelClass,
+              labelScreenreader: this.labelScreenreader,
               required: this.required,
               type: this.type,
               isLabelFloat: this.isLabelFloat,

package/src/ui/AInputNumberRange/AInputNumberRange.js

@@ -143,6 +143,11 @@ export default {
       required: false,
       default: "_A_INPUT_NUMBER_RANGE_LABEL_MIN_",
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     max: {
       type: Number,
       required: false,
@@ -314,6 +319,7 @@ export default {
             id: this.htmlIdLocal,
             label: this.label,
             labelClass: this.labelClass,
+            labelScreenreader: this.labelScreenreader,
             required: this.required,
             type: this.type,
             isLabelFloat: false,

package/src/ui/ALabel/ALabel.js

@@ -2,14 +2,12 @@ import {
   h,
 } from "vue";
 
-import ASpinner from "../../ASpinner/ASpinner";
-import ATranslation from "../../ATranslation/ATranslation";
+import AElement from "../../AElement/AElement";
 
 import ClickAPI from "./compositionAPI/ClickAPI";
 import IdAPI from "./compositionAPI/IdAPI";
 import LabelAPI from "./compositionAPI/LabelAPI";
 import PropsTypeAPI from "./compositionAPI/PropsTypeAPI";
-import TextAfterAPI from "./compositionAPI/TextAfterAPI";
 import UIExcludeRenderAttributesAPI from "../compositionApi/UIExcludeRenderAttributesAPI";
 
 export default {
@@ -56,6 +54,11 @@ export default {
     labelClass: {
       required: false,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     loading: {
       type: Boolean,
       required: false,
@@ -75,6 +78,11 @@ export default {
       required: false,
       default: undefined,
     },
+    tag: {
+      type: String,
+      required: false,
+      default: "label",
+    },
     type: {
       type: String,
       required: false,
@@ -100,12 +108,11 @@ export default {
       hideIdLocal,
     });
 
-    const {
-      textAfterLabel,
-    } = TextAfterAPI(props);
-
     const {
       isLabel,
+      labelLocal,
+      textAfterLabel,
+      titleLocal,
     } = LabelAPI(props);
 
     const {
@@ -121,33 +128,28 @@ export default {
       forLabelLocal,
       idLabelLocal,
       isLabel,
+      labelLocal,
       onClick,
       textAfterLabel,
+      titleLocal,
     };
   },
   render() {
-    return h("label", {
+    return h(AElement, {
       id: this.idLabelLocal,
-      for: this.forLabelLocal,
       class: ["a_form_element_label", this.labelClass],
+      html: this.labelLocal,
+      htmlScreenReader: this.labelScreenreader,
+      for: this.forLabelLocal,
+      loading: this.loading,
+      loadingAlign: "right",
+      loadingClass: "a_spinner_small a_form_element_label__spinner",
+      tag: this.tag,
+      textAfter: this.textAfterLabel,
+      title: this.titleLocal,
+      type: "text",
       onClick: this.onClick,
       ...this.attributesToExcludeFromRender,
-    }, [
-      this.isLabel && h(ATranslation, {
-        tag: "span",
-        html: this.label,
-        textAfter: this.textAfterLabel,
-      }, () => [
-        this.isLabelFloat && h(ATranslation, {
-          class: "a_position_absolute_all",
-          ariaHidden: true,
-          tag: "span",
-          title: this.label,
-        })
-      ]),
-      this.loading && h(ASpinner, {
-        class: "a_spinner_small a_form_element_label__spinner",
-      }),
-    ]);
+    });
   },
 };

package/src/ui/ALabel/__tests__/ALabel.LabelAPI.test.js

@@ -0,0 +1,27 @@
+import LabelAPI from "../compositionAPI/LabelAPI";
+
+describe("ALabel LabelAPI", () => {
+  it("textAfterLabel should be empty when 'required' is false", () => {
+    const {
+      textAfterLabel,
+    } = LabelAPI({ required: false, label: "Aloha" });
+
+    expect(textAfterLabel.value).toBe("");
+  });
+
+  it("textAfterLabel should be empty when 'label' is empty", () => {
+    const {
+      textAfterLabel,
+    } = LabelAPI({ required: false, label: "" });
+
+    expect(textAfterLabel.value).toBe("");
+  });
+
+  it("textAfterLabel should be asterisk when 'required' is true", () => {
+    const {
+      textAfterLabel,
+    } = LabelAPI({ required: true, label: "Aloha" });
+
+    expect(textAfterLabel.value).toBe("*");
+  });
+});

package/src/ui/ALabel/compositionAPI/LabelAPI.js

@@ -8,13 +8,38 @@ import {
 } from "lodash-es";
 
 export default function LabelAPI(props) {
+  const isLabelFloat = toRef(props, "isLabelFloat");
   const label = toRef(props, "label");
+  const required = toRef(props, "required");
 
   const isLabel = computed(() => {
     return !isNil(label.value);
   });
 
+  const labelLocal = computed(() => {
+    return isLabel.value ?
+      label.value :
+      undefined;
+  });
+
+  const textAfterLabel = computed(() => {
+    return required.value && isLabel.value ?
+      "*" :
+      "";
+  });
+
+  const titleLocal = computed(() => {
+    if (isLabelFloat.value) {
+      return labelLocal.value;
+    }
+
+    return undefined;
+  });
+
   return {
     isLabel,
+    labelLocal,
+    textAfterLabel,
+    titleLocal,
   };
 }

package/src/ui/ASelect/ASelect.js

@@ -242,6 +242,11 @@ export default {
       required: false,
       default: undefined,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     loading: {
       type: Boolean,
       required: false,
@@ -644,6 +649,7 @@ export default {
           isLabelFloat: this.isLabelFloat,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           loading: this.loadingLocal,
           required: this.required,
           type: this.type,

package/src/ui/ASwitch/ASwitch.js

@@ -144,6 +144,11 @@ export default {
       required: false,
       default: undefined,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     modelDependencies: {
       type: Object,
       required: false,
@@ -308,6 +313,7 @@ export default {
           id: this.htmlIdLocal,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           type: this.type,
           isLabelFloat: this.isLabelFloat,

package/src/ui/ATextarea/ATextarea.js

@@ -11,7 +11,6 @@ import AErrorsText from "../AErrorsText/AErrorsText";
 import AFormElementBtnClear from "../../AFormElement/AFormElementBtnClear/AFormElementBtnClear";
 import AFormHelpText from "../AFormHelpText/AFormHelpText";
 import ALabel from "../ALabel/ALabel";
-import ATranslation from "../../ATranslation/ATranslation";
 
 import UiClearButtonMixinProps from "../mixins/UiClearButtonMixinProps";
 import UiMixinProps from "../mixins/UiMixinProps";
@@ -26,11 +25,6 @@ import autosize from "../../utils/autosize";
 
 export default {
   name: "ATextarea",
-  components: {
-    AFormElementBtnClear,
-    ALabel,
-    ATranslation,
-  },
   mixins: [
     UiClearButtonMixinProps,
     UiMixinProps,
@@ -45,6 +39,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     maxlength: {
       type: [String, Number],
       required: false,
@@ -195,6 +194,7 @@ export default {
           id: this.htmlIdLocal,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           required: this.required,
           isLabelFloat: this.isLabelFloat,
         }),

package/src/ui/ATinymce/ATinymce.js

@@ -46,6 +46,11 @@ export default {
       required: false,
       default: () => [],
     },
+    labelScreenreader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     languageDefault: {
       type: String,
       required: false,
@@ -191,6 +196,7 @@ export default {
           clickLabel: this.clickLabel,
           label: this.label,
           labelClass: this.labelClass,
+          labelScreenreader: this.labelScreenreader,
           prevent: true,
           required: this.required,
           stop: true,

package/src/ui/ALabel/__tests__/ALabel.TextAfterAPI.test.js

@@ -1,19 +0,0 @@
-import TextAfterAPI from "../compositionAPI/TextAfterAPI";
-
-describe("ALabel TextAfterAPI", () => {
-  it("textAfterLabel should be empty when 'required' is false", () => {
-    const {
-      textAfterLabel,
-    } = TextAfterAPI({ required: false });
-
-    expect(textAfterLabel.value).toBe("");
-  });
-
-  it("textAfterLabel should be asterisk when 'required' is true", () => {
-    const {
-      textAfterLabel,
-    } = TextAfterAPI({ required: true });
-
-    expect(textAfterLabel.value).toBe("*");
-  });
-});

package/src/ui/ALabel/compositionAPI/TextAfterAPI.js

@@ -1,18 +0,0 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-export default function TextAfterAPI(props) {
-  const required = toRef(props, "required");
-
-  const textAfterLabel = computed(() => {
-    return required.value ?
-      "*" :
-      "";
-  });
-
-  return {
-    textAfterLabel,
-  };
-}