aloha-vue 1.2.163 → 1.2.164

package/package.json

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

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontal.js

@@ -239,7 +239,7 @@ export default {
                   change: this.changeModelFiltersSaved,
                   class: "a_filters_top__save_select",
                   data: this.filtersSavedLocal,
-                  deselect: false,
+                  deselectable: false,
                   keyId: "label",
                   keyLabel: "label",
                   keyGroup: "group",

package/src/ATable/ATable.js

@@ -41,6 +41,9 @@ import {
   tablePluginOptions,
 } from "../plugins/ATablePlugin";
 
+import {
+  getRowIdOrIndex,
+} from "./utils/utils";
 import {
   isInteger,
   uniqueId,
@@ -213,7 +216,7 @@ export default {
     keyId: {
       type: String,
       required: false,
-      default: "id",
+      default: undefined,
     },
     keyChildren: {
       type: String,
@@ -448,6 +451,7 @@ export default {
       columnWidthDefault: computed(() => this.columnWidthDefault),
       isLoadingOptions: computed(() => this.isLoadingOptions),
       isLoadingTable: computed(() => this.isLoadingTable),
+      keyId: computed(() => this.keyId),
       rowActions: computed(() => this.rowActions),
       tableId: computed(() => this.id),
       valuesForColumnDefault: computed(() => this.valuesForColumnDefault),
@@ -623,7 +627,7 @@ export default {
       mousedownResizePreviewRight,
       mousemoveResizePreviewRight,
       mouseupResizePreviewRight,
-      previewDownRowIndexes,
+      previewDownRowIds,
       previewRightRowIndex,
       previewRightRowIndexLast,
       togglePreviewResize,
@@ -747,7 +751,7 @@ export default {
       mouseupResizePreviewRight,
       offset,
       onTogglePreview,
-      previewDownRowIndexes,
+      previewDownRowIds,
       previewRightRowIndex,
       renderedGroupedColumns,
       rowsLocal,
@@ -902,8 +906,10 @@ export default {
                 role: this.tableChildRole,
               }, {
                 default: () => this.rowsLocal.map((row, rowIndex) => {
+                  const ROW_ID = getRowIdOrIndex({ row, rowIndex, keyId: this.keyId });
+
                   return h(ATableTr, {
-                    key: row[this.keyId] || rowIndex,
+                    key: ROW_ID,
                     allVisibleMobileColumns: this.allVisibleMobileColumns,
                     areAllRowsSelected: this.areAllRowsSelected,
                     countVisibleMobileColumns: this.countVisibleMobileColumns,
@@ -911,7 +917,7 @@ export default {
                     disabledPreviewRowCallback: this.disabledPreviewRowCallback,
                     disabledRowActions: this.disabledRowActions,
                     isFooter: false,
-                    isPreviewDownOpen: this.previewDownRowIndexes[rowIndex],
+                    isPreviewDownOpen: this.previewDownRowIds[ROW_ID],
                     isRowActionsStickyLocal: this.isRowActionsStickyLocal,
                     isTree: this.isTree,
                     keyChildren: this.keyChildren,
@@ -943,7 +949,10 @@ export default {
                 class: "a_table__footer",
                 role: this.tableChildRole,
               }, this.rowsFooter.map((row, rowIndex) => {
+                const ROW_ID = getRowIdOrIndex({ row, rowIndex, keyId: this.keyId });
+
                 return h(ATableTr, {
+                  key: ROW_ID,
                   allVisibleMobileColumns: this.allVisibleMobileColumns,
                   areAllRowsSelected: this.areAllRowsSelected,
                   countVisibleMobileColumns: this.countVisibleMobileColumns,

package/src/ATable/ATableTr/ATableTr.js

@@ -141,7 +141,7 @@ export default {
       eventsLocal,
       roleLocal,
       rowClassComputed,
-      rowId,
+      rowHtmlId,
     } = AttributesAPI(props, {
       hasChildren,
       hasPreviewLocal,
@@ -184,7 +184,7 @@ export default {
       previewAttributes,
       roleLocal,
       rowClassComputed,
-      rowId,
+      rowHtmlId,
       textBtnToggleAllColumns,
       toggleAllColumnsVisibleMobile,
       toggleCheckbox,
@@ -248,7 +248,7 @@ export default {
 
     return [
       h("div", {
-        id: this.rowId,
+        id: this.rowHtmlId,
         role: this.roleLocal,
         class: this.rowClassComputed,
         "aria-expanded": this.ariaExpanded,

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

@@ -4,13 +4,13 @@ import {
   toRef,
 } from "vue";
 
-import {
-  isFunction,
-} from "lodash-es";
 import AKeysCode from "../../../const/AKeysCode";
 import {
   isClickTags,
 } from "../../utils/utils";
+import {
+  isFunction,
+} from "lodash-es";
 
 export default function AttributesAPI(props, {
   hasChildren = computed(() => false),
@@ -31,7 +31,7 @@ export default function AttributesAPI(props, {
   const onTogglePreview = inject("onTogglePreview");
   const tableId = inject("tableId");
 
-  const rowId = computed(() => {
+  const rowHtmlId = computed(() => {
     const FOOTER_ID = isFooter.value ? "_footer" : "";
     return `${ tableId.value }${ FOOTER_ID }_${ rowIndex.value }`;
   });
@@ -113,6 +113,6 @@ export default function AttributesAPI(props, {
     eventsLocal,
     roleLocal,
     rowClassComputed,
-    rowId,
+    rowHtmlId,
   };
 }

package/src/ATable/compositionAPI/PreviewAPI.js

@@ -12,6 +12,7 @@ import {
 } from "../../utils/utilsDOM";
 import {
   getPreviewRightId,
+  getRowIdOrIndex,
 } from "../utils/utils";
 import {
   isNil,
@@ -39,10 +40,15 @@ export default function PreviewAPI(props, context, {
     aTableRef,
     tableGrandparentRef,
   });
-  const emit = context.emit;
-
+  const keyId = toRef(props, "keyId");
   const preview = toRef(props, "preview");
   const tableId = toRef(props, "id");
+
+  const emit = context.emit;
+  const previewDownRowIds = ref({});
+  const previewRightRowIndex = ref(undefined);
+  const previewRightRowIndexLast = ref(undefined);
+
   const hasPreview = computed(() => {
     return !!preview.value;
   });
@@ -64,8 +70,7 @@ export default function PreviewAPI(props, context, {
   const isPreviewRight = computed(() => {
     return preview.value === "right" || isMobile.value;
   });
-  const previewRightRowIndex = ref(undefined);
-  const previewRightRowIndexLast = ref(undefined);
+
   const isPreviewRightOpen = computed(() => {
     return !isNil(previewRightRowIndex.value);
   });
@@ -99,14 +104,14 @@ export default function PreviewAPI(props, context, {
     return preview.value === "down";
   });
 
-  const previewDownRowIndexes = ref({});
+  const closePreviewDown = ({ rowIndex, row }) => {
+    const ID = getRowIdOrIndex({ row, rowIndex, keyId: keyId.value });
 
-  const closePreviewDown = ({ rowIndex }) => {
-    previewDownRowIndexes.value[rowIndex] = undefined;
+    delete previewDownRowIds.value[ID];
   };
 
   const closePreviewDownAll = () => {
-    previewDownRowIndexes.value = {};
+    previewDownRowIds.value = {};
   };
 
   const closePreviewAll = () => {
@@ -114,12 +119,11 @@ export default function PreviewAPI(props, context, {
     closePreviewDownAll();
   };
 
-  const closePreview = ({ rowIndex } = {}) => {
+  const closePreview = ({ rowIndex, row } = {}) => {
     if (isPreviewRight.value) {
       closePreviewRight();
-    }
-    if (isPreviewDown.value) {
-      closePreviewDown({ rowIndex });
+    } else if (isPreviewDown.value) {
+      closePreviewDown({ rowIndex, row });
     }
   };
 
@@ -145,15 +149,18 @@ export default function PreviewAPI(props, context, {
       openPreviewRight({ rowIndex });
     }
   };
-  const onTogglePreviewDown = ({ rowIndex }) => {
-    if (previewDownRowIndexes.value[rowIndex]) {
-      previewDownRowIndexes.value[rowIndex] = undefined;
+
+  const onTogglePreviewDown = ({ rowIndex, row }) => {
+    const ID = getRowIdOrIndex({ row, rowIndex, keyId: keyId.value });
+
+    if (previewDownRowIds.value[ID]) {
+      delete previewDownRowIds.value[ID];
     } else {
-      previewDownRowIndexes.value[rowIndex] = true;
+      previewDownRowIds.value[ID] = true;
     }
   };
 
-  const onTogglePreview = ({ rowIndex }) => {
+  const onTogglePreview = ({ row, rowIndex }) => {
     if (isDropdownGlobalOpen.value) {
       return;
     }
@@ -162,7 +169,7 @@ export default function PreviewAPI(props, context, {
       return;
     }
     if (isPreviewDown.value) {
-      onTogglePreviewDown({ rowIndex });
+      onTogglePreviewDown({ row, rowIndex });
     }
   };
 
@@ -175,7 +182,7 @@ export default function PreviewAPI(props, context, {
     mousemoveResizePreviewRight,
     mouseupResizePreviewRight,
     onTogglePreview,
-    previewDownRowIndexes,
+    previewDownRowIds,
     previewRightRowIndex,
     previewRightRowIndexLast,
     togglePreviewResize,

package/src/ATable/utils/utils.js

@@ -1,4 +1,4 @@
-import { isNil } from "lodash-es";
+import { get, isNil } from "lodash-es";
 
 export function getModelColumnsVisibleDefault(columns) {
   const MODEL_COLUMNS_VISIBLE = {};
@@ -78,3 +78,11 @@ export function getMultiplePanelId({ tableId }) {
 export function getTableLabelId({ tableId }) {
   return `${ tableId }_header_label`;
 }
+
+export function getRowIdOrIndex({ row, rowIndex, keyId }) {
+  if (keyId) {
+    return get(row, keyId);
+  }
+
+  return rowIndex;
+}

package/src/ui/ASelect/ASelect.js

@@ -674,7 +674,7 @@ export default {
               "aria-labelledby": this.ariaLabelledby,
               role: "combobox",
               tabindex: this.tabindex,
-              ariaHaspopup: "listbox",
+              "aria-haspopup": "listbox",
               ariaExpanded: this.isOpen,
               ariaRequired: this.required,
               ariaDisabled: this.disabled,