aloha-vue 2.7.0 → 2.7.2

package/src/ATable/compositionAPI/ColumnsAPI.js

@@ -1,127 +1,127 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  isColumnVisible,
-} from "../utils/utils.js";
-import {
-  cloneDeep,
-  forEach,
-  keyBy,
-} from "lodash-es";
-
-export default function ColumnsAPI(props, {
-  columnsScrollInvisible = ref([]),
-  indexFirstScrollInvisibleColumn = ref(undefined),
-  modelColumnsVisibleLocal = ref({}),
-  modelIsTableWithoutScrollComputed = computed(() => false),
-  columnsOrderedFromSimpleTable = computed(() => []),
-}) {
-  const columns = toRef(props, "columns");
-  const isActionColumnVisible = toRef(props, "isActionColumnVisible");
-  const isSimpleTable = toRef(props, "isSimpleTable");
-  const modelColumnsOrdering = toRef(props, "modelColumnsOrdering");
-  const multipleActions = toRef(props, "multipleActions");
-
-  const columnsKeyById = computed(() => {
-    return keyBy(columns.value, "id");
-  });
-
-  const columnIdsGroupByLocked = computed(() => {
-    const COLUMNS_GROUP_BY_LOCKED = {
-      true: [],
-      false: [],
-      trueObject: {},
-      falseObject: {},
-      trueColumns: [],
-      falseColumns: [],
-    };
-    forEach(cloneDeep(columns.value), column => {
-      const COLUMN_ID = column.id;
-      if (column.locked) {
-        COLUMNS_GROUP_BY_LOCKED.true.push(COLUMN_ID);
-        COLUMNS_GROUP_BY_LOCKED.trueColumns.push(column);
-        COLUMNS_GROUP_BY_LOCKED.trueObject[COLUMN_ID] = true;
-      } else {
-        COLUMNS_GROUP_BY_LOCKED.false.push(COLUMN_ID);
-        COLUMNS_GROUP_BY_LOCKED.falseColumns.push(column);
-        COLUMNS_GROUP_BY_LOCKED.falseObject[COLUMN_ID] = true;
-      }
-    });
-    return COLUMNS_GROUP_BY_LOCKED;
-  });
-
-  const columnsOrdered = computed(() => {
-    if (isSimpleTable.value && columnsOrderedFromSimpleTable.value && columnsOrderedFromSimpleTable.value.length) {
-      return columnsOrderedFromSimpleTable.value;
-    }
-    if (!modelColumnsOrdering.value.length) {
-      return [...columnIdsGroupByLocked.value.trueColumns, ...columnIdsGroupByLocked.value.falseColumns];
-    }
-    const COLUMNS = [];
-    const COLUMNS_KEY_BY_ID = cloneDeep(columnsKeyById.value);
-    forEach(modelColumnsOrdering.value, columnId => {
-      if (COLUMNS_KEY_BY_ID[columnId]) {
-        COLUMNS.push(COLUMNS_KEY_BY_ID[columnId]);
-      }
-    });
-
-    return COLUMNS;
-  });
-
-  const columnsFilteredForRenderObj = computed(() => {
-    const COLUMNS = [];
-    const COLUMNS_INDEXES_MAPPING = {};
-    forEach(columnsOrdered.value, (column, columnIndex) => {
-      if (isColumnVisible({
-        column,
-        columnIndex,
-        modelIsTableWithoutScroll: modelIsTableWithoutScrollComputed.value,
-        modelColumnsVisibleLocal: modelColumnsVisibleLocal.value,
-        indexFirstScrollInvisibleColumn: indexFirstScrollInvisibleColumn.value,
-      })) {
-        COLUMNS_INDEXES_MAPPING[COLUMNS.length] = columnIndex;
-        COLUMNS.push(column);
-      }
-    });
-
-    return {
-      columns: COLUMNS,
-      columnsIndexesMapping: COLUMNS_INDEXES_MAPPING,
-    };
-  });
-
-  const columnsFilteredForRenderIndexesMapping = computed(() => {
-    return columnsFilteredForRenderObj.value.columnsIndexesMapping;
-  });
-
-
-  const columnsFilteredForRender = computed(() => {
-    return columnsFilteredForRenderObj.value.columns;
-  });
-
-  const countNotHiddenColumns = computed(() => {
-    let count = columnsFilteredForRender.value.length;
-    if (modelIsTableWithoutScrollComputed.value) {
-      count += columnsScrollInvisible.value.length;
-    }
-    if (isActionColumnVisible.value) {
-      count++;
-    }
-    if (multipleActions.value.length) {
-      count++;
-    }
-    return count;
-  });
-
-  return {
-    columnIdsGroupByLocked,
-    columnsFilteredForRender,
-    columnsFilteredForRenderIndexesMapping,
-    columnsOrdered,
-    countNotHiddenColumns,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  isColumnVisible,
+} from "../utils/utils.js";
+import {
+  cloneDeep,
+  forEach,
+  keyBy,
+} from "lodash-es";
+
+export default function ColumnsAPI(props, {
+  columnsScrollInvisible = ref([]),
+  indexFirstScrollInvisibleColumn = ref(undefined),
+  modelColumnsVisibleLocal = ref({}),
+  modelIsTableWithoutScrollComputed = computed(() => false),
+  columnsOrderedFromSimpleTable = computed(() => []),
+}) {
+  const columns = toRef(props, "columns");
+  const isActionColumnVisible = toRef(props, "isActionColumnVisible");
+  const isSimpleTable = toRef(props, "isSimpleTable");
+  const modelColumnsOrdering = toRef(props, "modelColumnsOrdering");
+  const multipleActions = toRef(props, "multipleActions");
+
+  const columnsKeyById = computed(() => {
+    return keyBy(columns.value, "id");
+  });
+
+  const columnIdsGroupByLocked = computed(() => {
+    const COLUMNS_GROUP_BY_LOCKED = {
+      true: [],
+      false: [],
+      trueObject: {},
+      falseObject: {},
+      trueColumns: [],
+      falseColumns: [],
+    };
+    forEach(cloneDeep(columns.value), column => {
+      const COLUMN_ID = column.id;
+      if (column.locked) {
+        COLUMNS_GROUP_BY_LOCKED.true.push(COLUMN_ID);
+        COLUMNS_GROUP_BY_LOCKED.trueColumns.push(column);
+        COLUMNS_GROUP_BY_LOCKED.trueObject[COLUMN_ID] = true;
+      } else {
+        COLUMNS_GROUP_BY_LOCKED.false.push(COLUMN_ID);
+        COLUMNS_GROUP_BY_LOCKED.falseColumns.push(column);
+        COLUMNS_GROUP_BY_LOCKED.falseObject[COLUMN_ID] = true;
+      }
+    });
+    return COLUMNS_GROUP_BY_LOCKED;
+  });
+
+  const columnsOrdered = computed(() => {
+    if (isSimpleTable.value && columnsOrderedFromSimpleTable.value && columnsOrderedFromSimpleTable.value.length) {
+      return columnsOrderedFromSimpleTable.value;
+    }
+    if (!modelColumnsOrdering.value.length) {
+      return [...columnIdsGroupByLocked.value.trueColumns, ...columnIdsGroupByLocked.value.falseColumns];
+    }
+    const COLUMNS = [];
+    const COLUMNS_KEY_BY_ID = cloneDeep(columnsKeyById.value);
+    forEach(modelColumnsOrdering.value, columnId => {
+      if (COLUMNS_KEY_BY_ID[columnId]) {
+        COLUMNS.push(COLUMNS_KEY_BY_ID[columnId]);
+      }
+    });
+
+    return COLUMNS;
+  });
+
+  const columnsFilteredForRenderObj = computed(() => {
+    const COLUMNS = [];
+    const COLUMNS_INDEXES_MAPPING = {};
+    forEach(columnsOrdered.value, (column, columnIndex) => {
+      if (isColumnVisible({
+        column,
+        columnIndex,
+        modelIsTableWithoutScroll: modelIsTableWithoutScrollComputed.value,
+        modelColumnsVisibleLocal: modelColumnsVisibleLocal.value,
+        indexFirstScrollInvisibleColumn: indexFirstScrollInvisibleColumn.value,
+      })) {
+        COLUMNS_INDEXES_MAPPING[COLUMNS.length] = columnIndex;
+        COLUMNS.push(column);
+      }
+    });
+
+    return {
+      columns: COLUMNS,
+      columnsIndexesMapping: COLUMNS_INDEXES_MAPPING,
+    };
+  });
+
+  const columnsFilteredForRenderIndexesMapping = computed(() => {
+    return columnsFilteredForRenderObj.value.columnsIndexesMapping;
+  });
+
+
+  const columnsFilteredForRender = computed(() => {
+    return columnsFilteredForRenderObj.value.columns;
+  });
+
+  const countNotHiddenColumns = computed(() => {
+    let count = columnsFilteredForRender.value.length;
+    if (modelIsTableWithoutScrollComputed.value) {
+      count += columnsScrollInvisible.value.length;
+    }
+    if (isActionColumnVisible.value) {
+      count++;
+    }
+    if (multipleActions.value.length) {
+      count++;
+    }
+    return count;
+  });
+
+  return {
+    columnIdsGroupByLocked,
+    columnsFilteredForRender,
+    columnsFilteredForRenderIndexesMapping,
+    columnsOrdered,
+    countNotHiddenColumns,
+  };
+}

package/src/ATable/compositionAPI/DragAndDropChildAPI.js

@@ -1,97 +1,97 @@
-import {
-  computed,
-  inject,
-  ref,
-  toRef,
-} from "vue";
-
-const CLASS_DRAG = "a_table__drag_element";
-
-export default function DragAndDropChildAPI(props, { emit }, {
-  classOverString = "",
-  inDropdown = false,
-}) {
-  const column = toRef(props, "column");
-  const columnIndex = toRef(props, "columnIndex");
-  const columnIndexDraggable = toRef(props, "columnIndexDraggable");
-
-  const isLoadingOptions = inject("isLoadingOptions");
-  const isColumnsDnd = inject("isColumnsDnd");
-
-  const root = ref(null);
-
-  const classOver = computed(() => {
-    if (columnIndexDraggable.value > columnIndex.value) {
-      return classOverString;
-    }
-    return `${ classOverString }_right`;
-  });
-
-  const dragstart = $event => {
-    $event.target?.classList.add(CLASS_DRAG);
-    if (inDropdown) {
-      const HEIGHT = $event.target?.offsetHeight || 30;
-      $event.target?.parentElement.style.setProperty("--a_table_draggable_li_height", `${ HEIGHT }px`);
-    }
-    $event.dataTransfer.effectAllowed = "move";
-    emit("dragstartParent", {
-      columnIndex: columnIndex.value,
-    });
-  };
-
-  const dragend = $event => {
-    $event.target?.classList.remove(classOver.value);
-    $event.target?.classList.remove(CLASS_DRAG);
-    emit("dragendParent");
-  };
-
-  const dragenter = () => {
-    if (root.value && root.value.classList) {
-      root.value.classList.add(classOver.value);
-    }
-    emit("dragenterParent", {
-      columnIndex: columnIndex.value,
-    });
-  };
-
-  const dragover = $event => {
-    if ($event.preventDefault) {
-      $event.preventDefault();
-    }
-    return false;
-  };
-
-  const dragleave = () => {
-    if (root.value && root.value.classList) {
-      root.value.classList.remove(classOver.value);
-    }
-    emit("dragleaveParent", {
-      columnIndex: columnIndex.value,
-    });
-  };
-
-  const isLocked = computed(() => {
-    return !!column.value.locked;
-  });
-
-  const attributesForRoot = computed(() => {
-    const ATTRIBUTES = {
-      ref: "root",
-    };
-    if (!isLocked.value && isColumnsDnd.value) {
-      ATTRIBUTES.draggable = !isLoadingOptions.value;
-      ATTRIBUTES.onDragstart = dragstart;
-      ATTRIBUTES.onDragend = dragend;
-      ATTRIBUTES.onDragenter = dragenter;
-      ATTRIBUTES.onDragover = dragover;
-      ATTRIBUTES.onDragleave = dragleave;
-    }
-    return ATTRIBUTES;
-  });
-
-  return {
-    attributesForRoot,
-    isLocked,
-    root,
-  };
-}
+import {
+  computed,
+  inject,
+  ref,
+  toRef,
+} from "vue";
+
+const CLASS_DRAG = "a_table__drag_element";
+
+export default function DragAndDropChildAPI(props, { emit }, {
+  classOverString = "",
+  inDropdown = false,
+}) {
+  const column = toRef(props, "column");
+  const columnIndex = toRef(props, "columnIndex");
+  const columnIndexDraggable = toRef(props, "columnIndexDraggable");
+
+  const isLoadingOptions = inject("isLoadingOptions");
+  const isColumnsDnd = inject("isColumnsDnd");
+
+  const root = ref(null);
+
+  const classOver = computed(() => {
+    if (columnIndexDraggable.value > columnIndex.value) {
+      return classOverString;
+    }
+    return `${ classOverString }_right`;
+  });
+
+  const dragstart = $event => {
+    $event.target?.classList.add(CLASS_DRAG);
+    if (inDropdown) {
+      const HEIGHT = $event.target?.offsetHeight || 30;
+      $event.target?.parentElement.style.setProperty("--a_table_draggable_li_height", `${ HEIGHT }px`);
+    }
+    $event.dataTransfer.effectAllowed = "move";
+    emit("dragstartParent", {
+      columnIndex: columnIndex.value,
+    });
+  };
+
+  const dragend = $event => {
+    $event.target?.classList.remove(classOver.value);
+    $event.target?.classList.remove(CLASS_DRAG);
+    emit("dragendParent");
+  };
+
+  const dragenter = () => {
+    if (root.value && root.value.classList) {
+      root.value.classList.add(classOver.value);
+    }
+    emit("dragenterParent", {
+      columnIndex: columnIndex.value,
+    });
+  };
+
+  const dragover = $event => {
+    if ($event.preventDefault) {
+      $event.preventDefault();
+    }
+    return false;
+  };
+
+  const dragleave = () => {
+    if (root.value && root.value.classList) {
+      root.value.classList.remove(classOver.value);
+    }
+    emit("dragleaveParent", {
+      columnIndex: columnIndex.value,
+    });
+  };
+
+  const isLocked = computed(() => {
+    return !!column.value.locked;
+  });
+
+  const attributesForRoot = computed(() => {
+    const ATTRIBUTES = {
+      ref: "root",
+    };
+    if (!isLocked.value && isColumnsDnd.value) {
+      ATTRIBUTES.draggable = !isLoadingOptions.value;
+      ATTRIBUTES.onDragstart = dragstart;
+      ATTRIBUTES.onDragend = dragend;
+      ATTRIBUTES.onDragenter = dragenter;
+      ATTRIBUTES.onDragover = dragover;
+      ATTRIBUTES.onDragleave = dragleave;
+    }
+    return ATTRIBUTES;
+  });
+
+  return {
+    attributesForRoot,
+    isLocked,
+    root,
+  };
+}

package/src/ATable/compositionAPI/DragAndDropParentAPI.js

@@ -1,79 +1,79 @@
-import {
-  computed,
-  inject,
-  ref,
-} from "vue";
-
-import {
-  isNil,
-} from "lodash-es";
-
-
-export default function DragAndDropParentAPI({
-  classOver = "",
-  classOverRight = "",
-  classOverParent = "",
-  inHeader = false,
-}) {
-  const root = ref(undefined);
-  const columnIndexDraggable = ref(undefined);
-  const columnIndexOver = ref(undefined);
-
-  const changeColumnsOrdering = inject("changeColumnsOrdering");
-
-  const isDragstart = computed(() => {
-    return !isNil(columnIndexDraggable.value);
-  });
-
-  const dragstart = ({ columnIndex }) => {
-    columnIndexDraggable.value = columnIndex;
-  };
-
-  const dragenter = ({ columnIndex }) => {
-    columnIndexOver.value = columnIndex;
-  };
-
-  const dragleave = ({ columnIndex }) => {
-    if (columnIndexOver.value === columnIndex) {
-      columnIndexOver.value = undefined;
-    }
-  };
-
-  const drop = $event => {
-    if (isNil(columnIndexDraggable.value) || isNil(columnIndexOver.value)) {
-      return;
-    }
-    changeColumnsOrdering({
-      columnIndexDraggable: columnIndexDraggable.value,
-      columnIndexOver: columnIndexOver.value,
-      inHeader,
-    });
-    $event.stopPropagation();
-    return false;
-  };
-
-  const removeClassOverFromChildren = () => {
-    const CHILDREN = root.value.querySelectorAll(`.${ classOverParent }`);
-    CHILDREN.forEach(child => {
-      child.classList.remove(classOver);
-      child.classList.remove(classOverRight);
-    });
-  };
-
-  const dragend = () => {
-    removeClassOverFromChildren();
-    columnIndexDraggable.value = undefined;
-  };
-
-
-  return {
-    columnIndexDraggable,
-    dragstart,
-    dragenter,
-    dragleave,
-    dragend,
-    drop,
-    isDragstart,
-    root,
-  };
-}
+import {
+  computed,
+  inject,
+  ref,
+} from "vue";
+
+import {
+  isNil,
+} from "lodash-es";
+
+
+export default function DragAndDropParentAPI({
+  classOver = "",
+  classOverRight = "",
+  classOverParent = "",
+  inHeader = false,
+}) {
+  const root = ref(undefined);
+  const columnIndexDraggable = ref(undefined);
+  const columnIndexOver = ref(undefined);
+
+  const changeColumnsOrdering = inject("changeColumnsOrdering");
+
+  const isDragstart = computed(() => {
+    return !isNil(columnIndexDraggable.value);
+  });
+
+  const dragstart = ({ columnIndex }) => {
+    columnIndexDraggable.value = columnIndex;
+  };
+
+  const dragenter = ({ columnIndex }) => {
+    columnIndexOver.value = columnIndex;
+  };
+
+  const dragleave = ({ columnIndex }) => {
+    if (columnIndexOver.value === columnIndex) {
+      columnIndexOver.value = undefined;
+    }
+  };
+
+  const drop = $event => {
+    if (isNil(columnIndexDraggable.value) || isNil(columnIndexOver.value)) {
+      return;
+    }
+    changeColumnsOrdering({
+      columnIndexDraggable: columnIndexDraggable.value,
+      columnIndexOver: columnIndexOver.value,
+      inHeader,
+    });
+    $event.stopPropagation();
+    return false;
+  };
+
+  const removeClassOverFromChildren = () => {
+    const CHILDREN = root.value.querySelectorAll(`.${ classOverParent }`);
+    CHILDREN.forEach(child => {
+      child.classList.remove(classOver);
+      child.classList.remove(classOverRight);
+    });
+  };
+
+  const dragend = () => {
+    removeClassOverFromChildren();
+    columnIndexDraggable.value = undefined;
+  };
+
+
+  return {
+    columnIndexDraggable,
+    dragstart,
+    dragenter,
+    dragleave,
+    dragend,
+    drop,
+    isDragstart,
+    root,
+  };
+}

package/src/ATable/compositionAPI/FocusTableAPI.js

@@ -1,31 +1,31 @@
-import {
-  ref,
-} from "vue";
-
-export default function FocusTableAPI({
-  tableRef = ref(undefined),
-}) {
-  const setFocusToTable = () => {
-    if (tableRef.value) {
-      tableRef.value.setAttribute("tabindex", "-1");
-      tableRef.value.focus();
-      tableRef.value.removeAttribute("tabindex");
-    }
-  };
-
-  const scrollToTable = () => {
-    if (tableRef.value) {
-      const elementTop = tableRef.value.getBoundingClientRect().top + window.scrollY;
-      let scrollToPosition = elementTop - (window.innerHeight / 2);
-      if (scrollToPosition < 0) {
-        scrollToPosition = 0;
-      }
-      document.documentElement.scrollTop = scrollToPosition;
-    }
-  };
-
-  return {
-    scrollToTable,
-    setFocusToTable,
-  };
-}
+import {
+  ref,
+} from "vue";
+
+export default function FocusTableAPI({
+  tableRef = ref(undefined),
+}) {
+  const setFocusToTable = () => {
+    if (tableRef.value) {
+      tableRef.value.setAttribute("tabindex", "-1");
+      tableRef.value.focus();
+      tableRef.value.removeAttribute("tabindex");
+    }
+  };
+
+  const scrollToTable = () => {
+    if (tableRef.value) {
+      const elementTop = tableRef.value.getBoundingClientRect().top + window.scrollY;
+      let scrollToPosition = elementTop - (window.innerHeight / 2);
+      if (scrollToPosition < 0) {
+        scrollToPosition = 0;
+      }
+      document.documentElement.scrollTop = scrollToPosition;
+    }
+  };
+
+  return {
+    scrollToTable,
+    setFocusToTable,
+  };
+}