aloha-vue 1.0.258 → 1.0.259

package/package.json

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

package/src/ADropdown/compositionAPI/ToggleAPI.js

@@ -3,6 +3,8 @@ import {
   toRef,
 } from "vue";
 
+import ADropdownGlobalAPI from "../../compositionAPI/ADropdownGlobalAPI";
+
 import AKeysCode from "../../const/AKeysCode";
 import {
   forEach,
@@ -24,6 +26,11 @@ export default function ToggleAPI(props, {
   const buttonWidth = ref(undefined);
   const statusEventPressArrows = ref(false);
 
+  const {
+    closeDropdownGlobal,
+    openDropdownGlobal,
+  } = ADropdownGlobalAPI();
+
   const pressArrows = ({ down }) => {
     const ELEMENTS = dropdownRef.value.querySelectorAll(elementsForArrows.value);
     if (ELEMENTS.length === 0) {
@@ -108,6 +115,7 @@ export default function ToggleAPI(props, {
       setTimeout(() => {
         setFocusToFirstElement();
       });
+      openDropdownGlobal();
     });
     statusExpanded.value = true;
   };
@@ -139,6 +147,7 @@ export default function ToggleAPI(props, {
     destroyEventPressArrows();
     destroyPopover();
     statusExpanded.value = false;
+    closeDropdownGlobal();
   }
 
   function onClickEvent($event) {

package/src/AGroupButtonDropdown/AGroupButtonDropdownItem/AGroupButtonDropdownItem.js

@@ -99,12 +99,14 @@ export default {
           isHideWithoutActionAndSlot: true,
           actions: this.actionsDropdown,
           useActionClass: this.useDropdownActionClass,
+          disabled: this.disabled,
           ...this.dropdownAttributes,
         }, this.$slots),
       ]),
       this.isDropdownActionsAfterGroup && h(ADropdown, {
         isHideWithoutActionAndSlot: true,
         actions: this.actionsDropdown,
+        disabled: this.disabled,
         useActionClass: this.useDropdownActionClass,
         ...this.dropdownAttributes,
       }, this.$slots),

package/src/ATable/ATable.js

@@ -16,13 +16,14 @@ import ATablePreviewRight from "./ATablePreviewRight/ATablePreviewRight";
 import ATableTopPanel from "./ATableTopPanel/ATableTopPanel";
 import ATableTr from "./ATableTr/ATableTr";
 
+import AMobileAPI from "../compositionAPI/AMobileAPI";
 import LimitOffsetAPI from "./compositionAPI/LimitOffsetAPI";
-import MobileAPI from "./compositionAPI/MobileAPI";
 import MobileColumnsAPI from "./compositionAPI/MobileColumnsAPI";
 import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
 import PreviewAPI from "./compositionAPI/PreviewAPI";
 import RowsAPI from "./compositionAPI/RowsAPI";
 import ScrollControlAPI from "./compositionAPI/ScrollControlAPI";
+import StickyAPI from "./compositionAPI/StickyAPI";
 import TableAttributesAPI from "./compositionAPI/TableAttributesAPI";
 import TableColumnsAPI from "./compositionAPI/TableColumnsAPI";
 import TableColumnsVisibleAPI from "./compositionAPI/TableColumnsVisibleAPI";
@@ -164,12 +165,6 @@ export default {
       required: false,
       default: 10,
     },
-    mobileWidth: {
-      type: Number,
-      required: false,
-      default: 768,
-      validator: value => value >= 0,
-    },
     modelColumnsOrdering: {
       type: Array,
       required: false,
@@ -226,6 +221,11 @@ export default {
       required: false,
       default: () => [],
     },
+    rowActionsSticky: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     rowActionsClass: {
       type: [String, Object],
       required: false,
@@ -325,7 +325,7 @@ export default {
 
     const {
       isMobile,
-    } = MobileAPI(props);
+    } = AMobileAPI();
 
     const {
       hasRows,
@@ -351,6 +351,13 @@ export default {
       modelColumnsVisibleLocal,
     });
 
+    const {
+      isRowActionsStickyLocal,
+    } = StickyAPI(props, {
+      isMobile,
+      modelIsTableWithoutScroll,
+    });
+
     const {
       areAllRowsSelected,
       areAllVisibleRowsSelected,
@@ -473,65 +480,61 @@ export default {
 
     return {
       allVisibleMobileColumns,
+      areAllRowsSelected,
+      areAllVisibleRowsSelected,
+      areSomeRowsSelected,
       aTableRef,
+      changeLimit,
       changeModelColumnsVisible,
+      changeOffset,
       checkVisibleColumns,
+      closeFilterValue,
+      closeMultipleActionsActive,
+      closePreview,
+      closePreviewAll,
       columnsOrdered,
+      dataKeyByKeyIdPerFilter,
+      filtersGroup,
+      filtersKeyById,
+      filtersVisible,
+      filtersVisibleAll,
+      hasFilters,
+      hasRows,
       hasViews,
       initModelColumnsVisibleLocal,
       isMobile,
+      isMultipleActionsActive,
+      isPreviewRightOpen,
+      isRowActionsStickyLocal,
       isViewTableVisible,
+      limit,
       modelColumnsOrderingLocal,
       modelColumnsVisibleLocal,
+      modelFiltersLocal,
       modelIsTableWithoutScroll,
-      onUpdateModelFilters,
-      tableChildRole,
-      tableGrandparentRef,
-      tableRoleAttributes,
-      updateViewCurrent,
-      viewCurrent,
-
-      closePreview,
-      closePreviewAll,
-      isPreviewRightOpen,
+      modelSort,
       mousedownResizePreviewRight,
       mousemoveResizePreviewRight,
       mouseupResizePreviewRight,
+      offset,
+      onUpdateModelFilters,
       previewDownRowIndexes,
       previewRightRowIndex,
-      togglePreviewResize,
-
-      hasRows,
-      limit,
-      modelSort,
-      offset,
       rowsLocal,
       rowsLocalLength,
-
-      areAllRowsSelected,
-      areAllVisibleRowsSelected,
-      areSomeRowsSelected,
-      closeMultipleActionsActive,
-      isMultipleActionsActive,
       selectedRows,
       selectedRowsIndexes,
       setEmptySelectedRowsIndexes,
       setSelectedRowsIndexes,
+      startSearch,
+      tableChildRole,
+      tableGrandparentRef,
+      tableRoleAttributes,
       toggleBtnAllRows,
       toggleMultipleActionsActive,
-
-      changeOffset,
-      changeLimit,
-
-      closeFilterValue,
-      dataKeyByKeyIdPerFilter,
-      filtersGroup,
-      filtersKeyById,
-      filtersVisible,
-      filtersVisibleAll,
-      hasFilters,
-      modelFiltersLocal,
-      startSearch,
+      togglePreviewResize,
+      updateViewCurrent,
+      viewCurrent,
     };
   },
   data() {
@@ -692,6 +695,8 @@ export default {
               areAllRowsSelected: this.areAllRowsSelected,
               areAllVisibleRowsSelected: this.areAllVisibleRowsSelected,
               areSomeRowsSelected: this.areSomeRowsSelected,
+              isRowActionsStickyLocal: this.isRowActionsStickyLocal,
+              rowsLocalLength: this.rowsLocalLength,
               modelSort: this.modelSort,
               onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
             }),
@@ -705,6 +710,7 @@ export default {
                 countVisibleMobileColumns: this.countVisibleMobileColumns,
                 row,
                 rowIndex,
+                isRowActionsStickyLocal: this.isRowActionsStickyLocal,
                 selectedRowsIndexes: this.selectedRowsIndexes,
                 rowActionsClass: this.rowActionsClass,
                 onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
@@ -732,6 +738,7 @@ export default {
                 countVisibleMobileColumns: this.countVisibleMobileColumns,
                 row,
                 rowIndex,
+                isRowActionsStickyLocal: this.isRowActionsStickyLocal,
                 rowActionsClass: this.rowActionsClass,
                 selectedRowsIndexes: this.selectedRowsIndexes,
                 onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,

package/src/ATable/ATableHeader/ATableHeader.js

@@ -6,6 +6,7 @@ import AOneCheckbox from "../../ui/AOneCheckbox/AOneCheckbox";
 import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
 import ATableHeaderThAction from "../ATableHeaderThAction/ATableHeaderThAction";
 
+import CheckboxAPI from "./compositionAPI/CheckboxAPI";
 import DragAndDropParentAPI from "../compositionAPI/DragAndDropParentAPI";
 
 export default {
@@ -27,10 +28,18 @@ export default {
       type: Boolean,
       required: true,
     },
+    isRowActionsStickyLocal: {
+      type: Boolean,
+      required: true,
+    },
     modelSort: {
       type: String,
       required: false,
     },
+    rowsLocalLength: {
+      type: Number,
+      required: true,
+    },
   },
   emits: [
     "setSelectedRowsIndexes",
@@ -42,7 +51,7 @@ export default {
     "isMobile",
     "isMultipleActionsActive",
   ],
-  setup(props, { emit }) {
+  setup(props, context) {
     const {
       columnIndexDraggable,
       dragstart,
@@ -58,20 +67,25 @@ export default {
       classOverParent: "a_table__th"
     });
 
-    const toggleCheckbox = () => {
-      emit("setSelectedRowsIndexes", { isAll: true });
-    };
+    const {
+      isCheckboxDisabled,
+      isCheckboxIndeterminate,
+      modelValueCheckboxLocal,
+      toggleCheckbox,
+    } = CheckboxAPI(props, context);
 
     return {
       columnIndexDraggable,
-      dragstart,
+      dragend,
       dragenter,
       dragleave,
-      dragend,
+      dragstart,
       drop,
+      isCheckboxDisabled,
+      isCheckboxIndeterminate,
       isDragstart,
+      modelValueCheckboxLocal,
       root,
-
       toggleCheckbox,
     };
   },
@@ -99,9 +113,12 @@ export default {
         }, [
           h(AOneCheckbox, {
             isWidthAuto: true,
-            modelValue: this.areAllVisibleRowsSelected || this.areAllRowsSelected,
-            indeterminate: this.areSomeRowsSelected && !(this.areAllVisibleRowsSelected || this.areAllRowsSelected),
-            disabled: this.areAllRowsSelected,
+            modelValue: this.modelValueCheckboxLocal,
+            indeterminate: this.isCheckboxIndeterminate,
+            disabled: this.isCheckboxDisabled,
+            label: "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_",
+            labelClass: "a_sr_only",
+            isLabelTitle: true,
             "onUpdate:modelValue": this.toggleCheckbox,
           }),
         ]),
@@ -118,7 +135,9 @@ export default {
             onDragendParent: this.dragend,
           });
         }),
-        this.isActionColumnVisible && h(ATableHeaderThAction),
+        this.isActionColumnVisible && h(ATableHeaderThAction, {
+          isRowActionsStickyLocal: this.isRowActionsStickyLocal,
+        }),
       ]),
     ]);
   },

package/src/ATable/ATableHeader/compositionAPI/CheckboxAPI.js

@@ -0,0 +1,41 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function CheckboxAPI(props, { emit }) {
+  const areAllRowsSelected = toRef(props, "areAllRowsSelected");
+  const areAllVisibleRowsSelected = toRef(props, "areAllVisibleRowsSelected");
+  const areSomeRowsSelected = toRef(props, "areSomeRowsSelected");
+  const rowsLocalLength = toRef(props, "rowsLocalLength");
+
+  const isCheckboxDisabled = computed(() => {
+    return !!(rowsLocalLength.value === 0 ||
+      areAllRowsSelected.value);
+  });
+
+  const isCheckboxIndeterminate = computed(() => {
+    return areSomeRowsSelected.value &&
+      !(areAllVisibleRowsSelected.value ||
+        areAllRowsSelected.value);
+  });
+
+  const modelValueCheckboxLocal = computed(() => {
+    return areAllVisibleRowsSelected.value ||
+      areAllRowsSelected.value;
+  });
+
+  const toggleCheckbox = () => {
+    if (isCheckboxDisabled.value) {
+      return;
+    }
+    emit("setSelectedRowsIndexes", { isAll: true });
+  };
+
+  return {
+    isCheckboxDisabled,
+    isCheckboxIndeterminate,
+    modelValueCheckboxLocal,
+    toggleCheckbox,
+  };
+}

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -32,6 +32,12 @@ export default {
     "isLoadingTable",
     "modelIsTableWithoutScroll",
   ],
+  props: {
+    isRowActionsStickyLocal: {
+      type: Boolean,
+      required: true,
+    },
+  },
   setup() {
     const {
       columnIndexDraggable,
@@ -67,11 +73,6 @@ export default {
       updateSearchColumnModel,
     };
   },
-  computed: {
-    stylesThAction() {
-      return `width: ${ this.columnActionsWidthLocal }px; min-width: ${ this.columnActionsWidthLocal }px; max-width: ${ this.columnActionsWidthLocal }px;`;
-    },
-  },
   methods: {
     selectAllColumns() {
       const MODEL_COLUMNS_VISIBLE = {};
@@ -96,9 +97,13 @@ export default {
   },
   render() {
     return h("div", {
-      class: "a_table__th a_table__cell a_table__cell_action",
+      class: [
+        "a_table__th a_table__cell a_table__cell_action",
+        {
+          a_table__cell_action_sticky: this.isRowActionsStickyLocal,
+        },
+      ],
       scope: "col",
-      // style: this.stylesThAction,
       role: "columnheader",
     }, [
       h("span", {

package/src/ATable/ATableTd/ATableTd.js

@@ -1,6 +1,7 @@
 import {
   computed,
-  h, inject,
+  h,
+  inject,
   resolveComponent,
   withDirectives,
 } from "vue";

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -29,6 +29,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    isRowActionsStickyLocal: {
+      type: Boolean,
+      required: true,
+    },
     rowActionsClass: {
       type: [String, Object],
       required: false,
@@ -70,16 +74,16 @@ export default {
     countColumnsScrollInvisible() {
       return this.columnsScrollInvisible.length;
     },
-
-    stylesTdAction() {
-      return `width: ${ this.columnActionsWidthLocal }px; min-width: ${ this.columnActionsWidthLocal }px; max-width: ${ this.columnActionsWidthLocal }px;`;
-    },
   },
   render() {
     return h("div", {
       role: "cell",
-      class: "a_table__td a_table__cell a_table__cell_action",
-      // style: this.stylesTdAction,
+      class: [
+        "a_table__td a_table__cell a_table__cell_action",
+        {
+          a_table__cell_action_sticky: this.isRowActionsStickyLocal,
+        },
+      ],
     }, [
       h("div", {
         class: [

package/src/ATable/ATableTopPanel/ATableTopPanel.js

@@ -133,6 +133,7 @@ export default {
 
     const {
       isBtnMultipleActionDisabled,
+      isBtnSelectAllRowsDisabled,
       textMultipleBtnAllRowsTranslate,
       textMultipleSelectedTranslateExtra,
       toggleBtnAllRows,
@@ -147,6 +148,7 @@ export default {
       currentMultipleActions,
       filterCurrency,
       isBtnMultipleActionDisabled,
+      isBtnSelectAllRowsDisabled,
       multipleActionsFiltered,
       onCancelMultipleActions,
       onOpenModalMultipleActions,
@@ -271,14 +273,15 @@ export default {
               text: "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_",
               extra: this.textMultipleSelectedTranslateExtra,
             }),
-            this.currentMultipleActions.isAllRowsSelected && h(AButton, {
+            this.currentMultipleActions.isAllRowsSelected &&
+            h(AButton, {
               class: "a_btn a_btn_secondary a_table__multiple_panel__btn_all_rows",
               type: "button",
               text: this.textMultipleBtnAllRowsTranslate,
               extraTranslate: {
                 countAllRows: this.countAllRows,
               },
-              disabled: this.isLoadingMultipleActions,
+              disabled: this.isBtnSelectAllRowsDisabled,
               loading: this.isLoadingMultipleActions,
               onClick: this.toggleBtnAllRows,
             }),

package/src/ATable/ATableTopPanel/compositionAPI/MultipleAPI.js

@@ -4,10 +4,11 @@ import {
 } from "vue";
 
 export default function MultipleAPI(props, { emit }) {
-  const selectedRows = toRef(props, "selectedRows");
-  const countAllRows = toRef(props, "countAllRows");
-  const areSomeRowsSelected = toRef(props, "areSomeRowsSelected");
   const areAllRowsSelected = toRef(props, "areAllRowsSelected");
+  const areSomeRowsSelected = toRef(props, "areSomeRowsSelected");
+  const countAllRows = toRef(props, "countAllRows");
+  const isLoadingMultipleActions = toRef(props, "isLoadingMultipleActions");
+  const selectedRows = toRef(props, "selectedRows");
 
   const countSelectedRows = computed(() => {
     return areAllRowsSelected.value ?
@@ -28,7 +29,15 @@ export default function MultipleAPI(props, { emit }) {
       "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_";
   });
 
+  const isBtnSelectAllRowsDisabled = computed(() => {
+    return !!(isLoadingMultipleActions.value ||
+      countAllRows.value === 0);
+  });
+
   const toggleBtnAllRows = () => {
+    if (isBtnSelectAllRowsDisabled.value) {
+      return;
+    }
     emit("toggleBtnAllRows");
   };
 
@@ -38,8 +47,9 @@ export default function MultipleAPI(props, { emit }) {
 
   return {
     isBtnMultipleActionDisabled,
-    textMultipleSelectedTranslateExtra,
+    isBtnSelectAllRowsDisabled,
     textMultipleBtnAllRowsTranslate,
+    textMultipleSelectedTranslateExtra,
     toggleBtnAllRows,
   };
 }

package/src/ATable/ATableTr/ATableTr.js

@@ -1,7 +1,5 @@
 import {
-  computed,
   h,
-  inject, toRef,
 } from "vue";
 
 import ATableTd from "../ATableTd/ATableTd";
@@ -9,12 +7,11 @@ import ATableTdAction from "../ATableTdAction/ATableTdAction";
 import AOneCheckbox from "../../ui/AOneCheckbox/AOneCheckbox";
 
 import AttributesAPI from "./compositionAPI/AttributesAPI";
+import CheckboxAPI from "./compositionAPI/CheckboxAPI";
 import MobileAPI from "./compositionAPI/MobileAPI";
 
 import {
   forEach,
-  get,
-  isFunction,
 } from "lodash-es";
 
 export default {
@@ -44,6 +41,10 @@ export default {
       type: Object,
       required: true,
     },
+    isRowActionsStickyLocal: {
+      type: Boolean,
+      required: true,
+    },
     isFooter: {
       type: Boolean,
       required: false,
@@ -57,28 +58,7 @@ export default {
   emits: [
     "setSelectedRowsIndexes",
   ],
-  setup(props) {
-    const row = toRef(props, "row");
-    const rowIndex = toRef(props, "rowIndex");
-    const areAllRowsSelected = toRef(props, "areAllRowsSelected");
-    const currentMultipleActions = inject("currentMultipleActions");
-    const isMultipleActionsActive = inject("isMultipleActionsActive");
-
-    const isCheckboxDisabled = computed(() => {
-      if (isMultipleActionsActive.value) {
-        if (isFunction(get(currentMultipleActions.value, "isHiddenCallback"))) {
-          return currentMultipleActions.value.isHiddenCallback({
-            row: row.value,
-            rowIndex: rowIndex.value,
-          });
-        }
-        if (areAllRowsSelected.value) {
-          return true;
-        }
-      }
-      return false;
-    });
-
+  setup(props, context) {
     const {
       rowAttributes,
     } = AttributesAPI(props);
@@ -90,31 +70,29 @@ export default {
       toggleAllColumnsVisibleMobile,
     } = MobileAPI(props);
 
+    const {
+      isCheckboxDisabled,
+      isRowSelected,
+      toggleCheckbox,
+    } = CheckboxAPI(props, context);
+
     return {
       isAllColumnsVisibleMobile,
       isBtnToggleAllColumnsVisible,
       isCheckboxDisabled,
-      isMultipleActionsActive,
+      isRowSelected,
       rowAttributes,
       textBtnToggleAllColumns,
       toggleAllColumnsVisibleMobile,
+      toggleCheckbox,
     };
   },
   inject: [
     "columnsOrdered",
     "isActionColumnVisible",
+    "isMultipleActionsActive",
     "isMobile",
   ],
-  computed: {
-    isRowSelected() {
-      return !!this.selectedRowsIndexes[this.rowIndex] || this.areAllRowsSelected;
-    },
-  },
-  methods: {
-    toggleCheckbox() {
-      this.$emit("setSelectedRowsIndexes", { rowIndex: this.rowIndex });
-    },
-  },
   render() {
     let tds = [];
     if (this.isMobile && !this.isAllColumnsVisibleMobile) {
@@ -150,6 +128,7 @@ export default {
         rowIndex: this.rowIndex,
         isFooter: this.isFooter,
         rowActionsClass: this.rowActionsClass,
+        isRowActionsStickyLocal: this.isRowActionsStickyLocal,
       }, this.$slots);
 
     const CHILDREN = this.isMobile ?
@@ -168,6 +147,9 @@ export default {
           isWidthAuto: true,
           modelValue: this.isRowSelected,
           disabled: this.isCheckboxDisabled,
+          label: "_TABLE_SELECT_THIS_ROW_",
+          labelClass: "a_sr_only",
+          isLabelTitle: true,
           "onUpdate:modelValue": this.toggleCheckbox,
         }),
       ]),

package/src/ATable/ATableTr/compositionAPI/CheckboxAPI.js

@@ -0,0 +1,52 @@
+import {
+  computed,
+  inject,
+  toRef,
+} from "vue";
+
+import {
+  get,
+  isFunction,
+} from "lodash-es";
+
+export default function CheckboxAPI(props, { emit }) {
+  const areAllRowsSelected = toRef(props, "areAllRowsSelected");
+  const row = toRef(props, "row");
+  const rowIndex = toRef(props, "rowIndex");
+  const selectedRowsIndexes = toRef(props, "selectedRowsIndexes");
+
+  const currentMultipleActions = inject("currentMultipleActions");
+  const isMultipleActionsActive = inject("isMultipleActionsActive");
+
+  const isRowSelected = computed(() => {
+    return !!selectedRowsIndexes.value[rowIndex.value] || areAllRowsSelected.value;
+  });
+
+  const isCheckboxDisabled = computed(() => {
+    if (isMultipleActionsActive.value) {
+      if (isFunction(get(currentMultipleActions.value, "isHiddenCallback"))) {
+        return currentMultipleActions.value.isHiddenCallback({
+          row: row.value,
+          rowIndex: rowIndex.value,
+        });
+      }
+      if (areAllRowsSelected.value) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  const toggleCheckbox = () => {
+    if (isCheckboxDisabled.value) {
+      return;
+    }
+    emit("setSelectedRowsIndexes", { rowIndex: rowIndex.value });
+  };
+
+  return {
+    isCheckboxDisabled,
+    isRowSelected,
+    toggleCheckbox,
+  };
+}

package/src/ATable/compositionAPI/MultipleActionAPI.js

@@ -67,7 +67,8 @@ export default function MultipleActionAPI({
   });
 
   const areAllVisibleRowsSelected = computed(() => {
-    return rowsLocalLength.value === selectedRowsIndexesLength.value;
+    return rowsLocalLength.value > 0 && 
+      rowsLocalLength.value === selectedRowsIndexesLength.value;
   });
 
   const areSomeRowsSelected = computed(() => {

package/src/ATable/compositionAPI/PreviewAPI.js

@@ -4,6 +4,7 @@ import {
   toRef,
 } from "vue";
 
+import ADropdownGlobalAPI from "../../compositionAPI/ADropdownGlobalAPI";
 import PreviewRightResizeAPI from "./PreviewRightResizeAPI";
 
 import {
@@ -19,6 +20,10 @@ export default function PreviewAPI(props, context, {
   tableGrandparentRef = ref({}),
   rowsLocal = computed(() => []),
 }) {
+  const {
+    isDropdownGlobalOpen,
+  } = ADropdownGlobalAPI();
+
   const {
     addEventListenerWindowResize,
     mousedownResizePreviewRight,
@@ -135,6 +140,10 @@ export default function PreviewAPI(props, context, {
   };
 
   const onTogglePreview = ({ rowIndex }) => {
+    console.log("isDropdownGlobalOpen", isDropdownGlobalOpen.value);
+    if (isDropdownGlobalOpen.value) {
+      return;
+    }
     if (isPreviewRight.value) {
       onTogglePreviewRight({ rowIndex });
     }

package/src/ATable/compositionAPI/StickyAPI.js

@@ -0,0 +1,20 @@
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+export default function StickyAPI(props, {
+  isMobile = ref(undefined),
+  modelIsTableWithoutScroll = ref(undefined),
+}) {
+  const rowActionsSticky = toRef(props, "rowActionsSticky");
+
+  const isRowActionsStickyLocal = computed(() => {
+    return !!(!isMobile.value && rowActionsSticky.value && !modelIsTableWithoutScroll.value);
+  });
+
+  return {
+    isRowActionsStickyLocal,
+  };
+}

package/src/compositionAPI/ADropdownGlobalAPI.js

@@ -0,0 +1,20 @@
+import {
+  ref,
+} from "vue";
+
+const isDropdownGlobalOpen = ref(false);
+export default function ADropdownGlobalAPI() {
+  const openDropdownGlobal = () => {
+    isDropdownGlobalOpen.value = true;
+  };
+
+  const closeDropdownGlobal = () => {
+    isDropdownGlobalOpen.value = false;
+  };
+
+  return {
+    closeDropdownGlobal,
+    isDropdownGlobalOpen,
+    openDropdownGlobal,
+  };
+}

package/src/i18n/de.json

@@ -8,9 +8,11 @@
   "_PREVIOUS_": "Vorherige",
   "_REMOVE_FIELD_CONTENT_": "Feldinhalt entfernen",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Alle Zeilen abwählen ({{ countAllRows }})",
-  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Alle Zeilen auswählen ({{ countAllRows }})",
   "_TABLE_MULTIPLE_CANCEL_": "Mehrfachaktion abbrechen",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "{{ countSelectedRows }} von {{ countAllRows }} ausgewählt",
+  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Alle Zeilen auswählen ({{ countAllRows }})",
+  "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Alle sichtbaren, möglichen Zeilen auswählen",
+  "_TABLE_SELECT_THIS_ROW_": "Die Zeile auswählen",
   "_WIZARD_NEXT_": "Nächste",
   "_WIZARD_PREVIOUS_": "Vorherige",
   "_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Schritt {{ stepActive }} von {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/i18n/en.json

@@ -8,9 +8,11 @@
   "_PREVIOUS_": "Previous",
   "_REMOVE_FIELD_CONTENT_": "Remove field content",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Deselect all rows ({{ countAllRows }})",
-  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Select all rows ({{ countAllRows }})",
   "_TABLE_MULTIPLE_CANCEL_": "Cancel multiple action",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "{{ countSelectedRows }} of {{ countAllRows }} selected",
+  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Select all rows ({{ countAllRows }})",
+  "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Select all visible, possible rows",
+  "_TABLE_SELECT_THIS_ROW_": "Select this row",
   "_WIZARD_NEXT_": "Next",
   "_WIZARD_PREVIOUS_": "Previous",
   "_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Step {{ stepActive }} of {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/i18n/hr.json

@@ -8,9 +8,11 @@
   "_PREVIOUS_": "Prethodni",
   "_REMOVE_FIELD_CONTENT_": "Izbrišite sadržaj polja",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Poništite odabir svih redaka ({{ countAllRows }})",
-  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Odaberite svih redaka ({{ countAllRows }})",
   "_TABLE_MULTIPLE_CANCEL_": "Otkaži višestruku radnju",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "{{ countSelectedRows }} od {{ countAllRows }} odabrana",
+  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Odaberite svih redaka ({{ countAllRows }})",
+  "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Odaberite sve vidljive, moguće retke",
+  "_TABLE_SELECT_THIS_ROW_": "Odaberite ovu liniju",
   "_WIZARD_NEXT_": "Sljedeći",
   "_WIZARD_PREVIOUS_": "Prethodno",
   "_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Korak {{ stepActive }} od {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/i18n/ru.json

@@ -8,9 +8,11 @@
   "_PREVIOUS_": "Предыдущий",
   "_REMOVE_FIELD_CONTENT_": "Удалить содержимое поля",
   "_TABLE_DESELECT_ALL_ROWS_{{countAllRows}}_": "Отменить выбор всех строк ({{ countAllRows }})",
-  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Выделить все строки  ({{ countAllRows }})",
   "_TABLE_MULTIPLE_CANCEL_": "Отменить",
   "_TABLE_MULTIPLE_ITEMS_SELECTED_{{countSelectedRows}}_{{countAllRows}}_": "выбрано {{ countSelectedRows }} из {{ countAllRows }}",
+  "_TABLE_SELECT_ALL_ROWS_{{countAllRows}}_": "Выделить все строки  ({{ countAllRows }})",
+  "_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Выбрать все видимые, возможные строки",
+  "_TABLE_SELECT_THIS_ROW_": "Выбрать эту строку",
   "_WIZARD_NEXT_": "Следующий",
   "_WIZARD_PREVIOUS_": "Предыдущий",
   "_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Шаг {{ stepActive }} из {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/styles/components/ATable.scss

@@ -35,7 +35,7 @@
   overflow-x: auto;
 }
 .a_table {
-  --a_table_bg: transparent;
+  --a_table_bg: var(--a_color_white);
   display: block;
   width: 100%;
   caption-side: bottom;
@@ -241,6 +241,10 @@
     justify-content: flex-end;
   }
 }
+.a_table__cell_action_sticky {
+  position: sticky;
+  right: 0;
+}
 .a_table__th__dropdown_item {
   display: flex;
   justify-content: space-between;

package/src/ui/AOneCheckbox/AOneCheckbox.js

@@ -1,14 +1,13 @@
 import {
   h,
-  withDirectives,
 } from "vue";
 
 import AErrorsText from "../AErrorsText/AErrorsText";
-
-import ASafeHtml from "../../directives/ASafeHtml";
+import ATranslation from "../../ATranslation/ATranslation";
 
 import UiMixinProps from "../mixins/UiMixinProps";
 
+import LabelAPI from "./compositionAPI/LabelAPI";
 import TrueFalseValueAPI from "./compositionAPI/TrueFalseValueAPI";
 import UiAPI from "../compositionApi/UiAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
@@ -20,27 +19,31 @@ export default {
     UiMixinProps,
   ],
   props: {
-    modelValue: {
+    falseValue: {
       type: [Boolean, String, Number],
       required: false,
+      default: undefined,
     },
-    isWidthAuto: {
+    indeterminate: {
       type: Boolean,
       required: false,
     },
-    indeterminate: {
+    isLabelTitle: {
       type: Boolean,
       required: false,
     },
-    trueValue: {
+    isWidthAuto: {
+      type: Boolean,
+      required: false,
+    },
+    modelValue: {
       type: [Boolean, String, Number],
       required: false,
-      default: true,
     },
-    falseValue: {
+    trueValue: {
       type: [Boolean, String, Number],
       required: false,
-      default: undefined,
+      default: true,
     },
   },
   setup(props, context) {
@@ -67,20 +70,23 @@ export default {
       changeModel,
     });
 
-    return {
-      componentStyleHide,
+    const {
+      hasLabel,
+    } = LabelAPI(props);
 
+    return {
       ariaDescribedbyLocal,
+      componentStyleHide,
       errorsId,
+      hasLabel,
       helpTextId,
       htmlIdLocal,
-      isErrors,
-
       isChecked,
+      isErrors,
+      onBlur,
       onClick,
       onFocus,
       onKeydown,
-      onBlur,
     };
   },
   render() {
@@ -117,27 +123,39 @@ export default {
             }),
             h("label", {
               for: this.htmlIdLocal,
-              class: ["a_custom_control_label", {
-                a_custom_control_label_width_auto: this.isWidthAuto,
-              }],
+              class: [
+                "a_custom_control_label",
+                {
+                  a_custom_control_label_width_auto: this.isWidthAuto,
+                },
+              ],
             }, [
-              this.label && h("span", {
-                class: "a_custom_control_label__text",
+              this.hasLabel && h("span", {
+                class: [
+                  "a_custom_control_label__text",
+                  this.labelClass,
+                ],
               }, [
-                withDirectives(h("span"), [
-                  [ASafeHtml, this.label],
-                ]),
+                h(ATranslation, {
+                  tag: "span",
+                  html: this.label,
+                }),
                 this.required && h("span", null, "*"),
               ]),
+              (this.isLabelTitle && this.hasLabel) && h(ATranslation, {
+                class: "a_position_absolute_all",
+                ariaHidden: true,
+                tag: "span",
+                title: this.label,
+              }),
             ]),
           ]),
         ]),
-        this.helpText && withDirectives(h("div", {
-          id: this.helpTextId,
+        this.helpText && h(ATranslation, {
+          tag: "div",
           class: "a_form_element__help_text",
-        }), [
-          [ASafeHtml, this.helpText],
-        ]),
+          html: this.helpText,
+        }),
         this.isErrors && h(AErrorsText, {
           id: this.errorsId,
           errors: this.errors,

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

@@ -0,0 +1,20 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  isNil,
+} from "lodash-es";
+
+export default function LabelAPI(props) {
+  const label = toRef(props, "label");
+
+  const hasLabel = computed(() => {
+    return !isNil(label.value);
+  });
+
+  return {
+    hasLabel,
+  };
+}

package/src/ui/mixins/UiMixinProps.js

@@ -32,7 +32,7 @@ export default {
       required: false,
     },
     label: {
-      type: String,
+      type: [String, Number],
       required: false,
       default: undefined,
     },

package/src/ATable/compositionAPI/MobileAPI.js

@@ -1,26 +0,0 @@
-import {
-  onBeforeUnmount,
-  ref,
-  toRef,
-} from "vue";
-
-export default function MobileAPI(props) {
-  const mobileWidth = toRef(props, "mobileWidth");
-
-  const isMobile = ref(false);
-
-  const checkMobileWidth = () => {
-    isMobile.value = window.innerWidth <= mobileWidth.value;
-  };
-
-  checkMobileWidth();
-  window.addEventListener("resize", checkMobileWidth);
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", checkMobileWidth);
-  });
-
-  return {
-    isMobile,
-  };
-}