aloha-vue 2.62.0 → 2.63.0

package/src/ATable/compositionAPI/PreviewAPI.js

@@ -1,201 +1,201 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  getPreviewRightId,
-  getRowIdOrIndex,
-} from "../utils/utils";
-
-import ADropdownGlobalAPI from "../../compositionAPI/ADropdownGlobalAPI";
-import PreviewRightResizeAPI from "./PreviewRightResizeAPI";
-
-import {
-  setFocusToElement,
-} from "../../utils/utilsDOM";
-import {
-  isNil,
-  isUndefined,
-} from "lodash-es";
-
-export default function PreviewAPI(props, context, {
-  aTableRef = ref({}),
-  isMobile = ref(undefined),
-  previewBoxWidthRemLocal = computed(() => 0),
-  rowsLocalAll = computed(() => []),
-  tableGrandparentRef = ref({}),
-}) {
-  const {
-    isDropdownGlobalOpen,
-  } = ADropdownGlobalAPI();
-
-  const {
-    addEventListenerWindowResize,
-    mousedownResizePreviewRight,
-    mousemoveResizePreviewRight,
-    mouseupResizePreviewRight,
-    removeEventListenerWindowResize,
-    togglePreviewResize,
-  } = PreviewRightResizeAPI(props, context, {
-    aTableRef,
-    previewBoxWidthRemLocal,
-    tableGrandparentRef,
-  });
-  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;
-  });
-
-  const setFocusToRow = ({ rowIndex }) => {
-    if (window.isScrollDisabled) { // for autotests
-      return;
-    }
-
-    setTimeout(() => {
-      const ROW_ID = `#${ tableId.value }_${ rowIndex }`;
-      setFocusToElement({ selector: ROW_ID });
-    });
-  };
-
-  const setFocusToPreviewRight = () => {
-    if (window.isScrollDisabled) { // for autotests
-      return;
-    }
-
-    setTimeout(() => {
-      const PREVIEW_ID = `#${ getPreviewRightId({ tableId: tableId.value }) }`;
-      setFocusToElement({ selector: PREVIEW_ID });
-    });
-  };
-
-  const isPreviewRight = computed(() => {
-    return preview.value === "right" || isMobile.value;
-  });
-
-  const isPreviewRightOpen = computed(() => {
-    return !isNil(previewRightRowIndex.value);
-  });
-
-  const closePreviewRight = () => {
-    setFocusToRow({
-      rowIndex: previewRightRowIndex.value,
-    });
-    emit("togglePreview", {
-      row: rowsLocalAll.value[previewRightRowIndex.value],
-      rowIndex: previewRightRowIndex.value,
-      typeToggle: "close",
-    });
-    previewRightRowIndexLast.value = previewRightRowIndex.value;
-    previewRightRowIndex.value = undefined;
-    removeEventListenerWindowResize();
-  };
-
-  const closePreviewRightAll = () => {
-    emit("togglePreview", {
-      row: rowsLocalAll.value[previewRightRowIndex.value],
-      rowIndex: previewRightRowIndex.value,
-      typeToggle: "close",
-    });
-    previewRightRowIndexLast.value = undefined;
-    previewRightRowIndex.value = undefined;
-    removeEventListenerWindowResize();
-  };
-
-  const isPreviewDown = computed(() => {
-    return preview.value === "down";
-  });
-
-  const closePreviewDown = ({ rowIndex, row }) => {
-    const ID = getRowIdOrIndex({ row, rowIndex, keyId: keyId.value });
-
-    delete previewDownRowIds.value[ID];
-  };
-
-  const closePreviewDownAll = () => {
-    previewDownRowIds.value = {};
-  };
-
-  const closePreviewAll = () => {
-    closePreviewRightAll();
-    closePreviewDownAll();
-  };
-
-  const closePreview = ({ rowIndex, row } = {}) => {
-    if (isPreviewRight.value) {
-      closePreviewRight();
-    } else if (isPreviewDown.value) {
-      closePreviewDown({ rowIndex, row });
-    }
-  };
-
-  const openPreviewRight = ({ rowIndex }) => {
-    if (!isMobile.value && isUndefined(previewRightRowIndex.value)) {
-      addEventListenerWindowResize();
-    }
-    emit("togglePreview", {
-      row: rowsLocalAll.value[rowIndex],
-      rowIndex: rowIndex,
-      typeToggle: "open",
-    });
-    previewRightRowIndex.value = rowIndex;
-    previewRightRowIndexLast.value = undefined;
-
-    setFocusToPreviewRight();
-  };
-
-  const onTogglePreviewRight = ({ rowIndex }) => {
-    if (previewRightRowIndex.value === rowIndex) {
-      closePreviewRight();
-    } else {
-      openPreviewRight({ rowIndex });
-    }
-  };
-
-  const onTogglePreviewDown = ({ rowIndex, row }) => {
-    const ID = getRowIdOrIndex({ row, rowIndex, keyId: keyId.value });
-
-    if (previewDownRowIds.value[ID]) {
-      delete previewDownRowIds.value[ID];
-    } else {
-      previewDownRowIds.value[ID] = true;
-    }
-  };
-
-  const onTogglePreview = ({ row, rowIndex }) => {
-    if (isDropdownGlobalOpen.value) {
-      return;
-    }
-    if (isPreviewRight.value) {
-      onTogglePreviewRight({ rowIndex });
-      return;
-    }
-    if (isPreviewDown.value) {
-      onTogglePreviewDown({ row, rowIndex });
-    }
-  };
-
-  return {
-    closePreview,
-    closePreviewAll,
-    hasPreview,
-    isPreviewRightOpen,
-    mousedownResizePreviewRight,
-    mousemoveResizePreviewRight,
-    mouseupResizePreviewRight,
-    onTogglePreview,
-    previewDownRowIds,
-    previewRightRowIndex,
-    previewRightRowIndexLast,
-    togglePreviewResize,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  getPreviewRightId,
+  getRowIdOrIndex,
+} from "../utils/utils";
+
+import ADropdownGlobalAPI from "../../compositionAPI/ADropdownGlobalAPI";
+import PreviewRightResizeAPI from "./PreviewRightResizeAPI";
+
+import {
+  setFocusToElement,
+} from "../../utils/utilsDOM";
+import {
+  isNil,
+  isUndefined,
+} from "lodash-es";
+
+export default function PreviewAPI(props, context, {
+  aTableRef = ref({}),
+  isMobile = ref(undefined),
+  previewBoxWidthRemLocal = computed(() => 0),
+  rowsLocalAll = computed(() => []),
+  tableGrandparentRef = ref({}),
+}) {
+  const {
+    isDropdownGlobalOpen,
+  } = ADropdownGlobalAPI();
+
+  const {
+    addEventListenerWindowResize,
+    mousedownResizePreviewRight,
+    mousemoveResizePreviewRight,
+    mouseupResizePreviewRight,
+    removeEventListenerWindowResize,
+    togglePreviewResize,
+  } = PreviewRightResizeAPI(props, context, {
+    aTableRef,
+    previewBoxWidthRemLocal,
+    tableGrandparentRef,
+  });
+  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;
+  });
+
+  const setFocusToRow = ({ rowIndex }) => {
+    if (window.isScrollDisabled) { // for autotests
+      return;
+    }
+
+    setTimeout(() => {
+      const ROW_ID = `#${ tableId.value }_${ rowIndex }`;
+      setFocusToElement({ selector: ROW_ID });
+    });
+  };
+
+  const setFocusToPreviewRight = () => {
+    if (window.isScrollDisabled) { // for autotests
+      return;
+    }
+
+    setTimeout(() => {
+      const PREVIEW_ID = `#${ getPreviewRightId({ tableId: tableId.value }) }`;
+      setFocusToElement({ selector: PREVIEW_ID });
+    });
+  };
+
+  const isPreviewRight = computed(() => {
+    return preview.value === "right" || isMobile.value;
+  });
+
+  const isPreviewRightOpen = computed(() => {
+    return !isNil(previewRightRowIndex.value);
+  });
+
+  const closePreviewRight = () => {
+    setFocusToRow({
+      rowIndex: previewRightRowIndex.value,
+    });
+    emit("togglePreview", {
+      row: rowsLocalAll.value[previewRightRowIndex.value],
+      rowIndex: previewRightRowIndex.value,
+      typeToggle: "close",
+    });
+    previewRightRowIndexLast.value = previewRightRowIndex.value;
+    previewRightRowIndex.value = undefined;
+    removeEventListenerWindowResize();
+  };
+
+  const closePreviewRightAll = () => {
+    emit("togglePreview", {
+      row: rowsLocalAll.value[previewRightRowIndex.value],
+      rowIndex: previewRightRowIndex.value,
+      typeToggle: "close",
+    });
+    previewRightRowIndexLast.value = undefined;
+    previewRightRowIndex.value = undefined;
+    removeEventListenerWindowResize();
+  };
+
+  const isPreviewDown = computed(() => {
+    return preview.value === "down";
+  });
+
+  const closePreviewDown = ({ rowIndex, row }) => {
+    const ID = getRowIdOrIndex({ row, rowIndex, keyId: keyId.value });
+
+    delete previewDownRowIds.value[ID];
+  };
+
+  const closePreviewDownAll = () => {
+    previewDownRowIds.value = {};
+  };
+
+  const closePreviewAll = () => {
+    closePreviewRightAll();
+    closePreviewDownAll();
+  };
+
+  const closePreview = ({ rowIndex, row } = {}) => {
+    if (isPreviewRight.value) {
+      closePreviewRight();
+    } else if (isPreviewDown.value) {
+      closePreviewDown({ rowIndex, row });
+    }
+  };
+
+  const openPreviewRight = ({ rowIndex }) => {
+    if (!isMobile.value && isUndefined(previewRightRowIndex.value)) {
+      addEventListenerWindowResize();
+    }
+    emit("togglePreview", {
+      row: rowsLocalAll.value[rowIndex],
+      rowIndex: rowIndex,
+      typeToggle: "open",
+    });
+    previewRightRowIndex.value = rowIndex;
+    previewRightRowIndexLast.value = undefined;
+
+    setFocusToPreviewRight();
+  };
+
+  const onTogglePreviewRight = ({ rowIndex }) => {
+    if (previewRightRowIndex.value === rowIndex) {
+      closePreviewRight();
+    } else {
+      openPreviewRight({ rowIndex });
+    }
+  };
+
+  const onTogglePreviewDown = ({ rowIndex, row }) => {
+    const ID = getRowIdOrIndex({ row, rowIndex, keyId: keyId.value });
+
+    if (previewDownRowIds.value[ID]) {
+      delete previewDownRowIds.value[ID];
+    } else {
+      previewDownRowIds.value[ID] = true;
+    }
+  };
+
+  const onTogglePreview = ({ row, rowIndex }) => {
+    if (isDropdownGlobalOpen.value) {
+      return;
+    }
+    if (isPreviewRight.value) {
+      onTogglePreviewRight({ rowIndex });
+      return;
+    }
+    if (isPreviewDown.value) {
+      onTogglePreviewDown({ row, rowIndex });
+    }
+  };
+
+  return {
+    closePreview,
+    closePreviewAll,
+    hasPreview,
+    isPreviewRightOpen,
+    mousedownResizePreviewRight,
+    mousemoveResizePreviewRight,
+    mouseupResizePreviewRight,
+    onTogglePreview,
+    previewDownRowIds,
+    previewRightRowIndex,
+    previewRightRowIndexLast,
+    togglePreviewResize,
+  };
+}

package/src/ATable/compositionAPI/PreviewRightResizeAPI.js

@@ -1,135 +1,135 @@
-import {
-  computed,
-  onBeforeUnmount,
-  ref,
-} from "vue";
-
-import PreviewRightRewAPI from "./PreviewRightRewAPI";
-
-import {
-  debounce,
-  get,
-} from "lodash-es";
-
-export default function PreviewRightResizeAPI(props, { emit }, {
-  aTableRef = ref({}),
-  previewBoxWidthRemLocal = computed(() => 0),
-  tableGrandparentRef = ref({}),
-}) {
-  const {
-    previewRef,
-    removePreviewRef,
-  } = PreviewRightRewAPI();
-
-  const PREVIEW_BOX_MIN_WIDTH_PX = 200;
-  const PREVIEW_BOX_MAX_WIDTH_PERCENT = 50;
-  let previewBoxMaxWidthPx = undefined;
-  let clientWidthLocal = 0;
-  let clientXTableParent = 0;
-  let tableGrandparentWidth = 0;
-
-  const setClientXTableParent = () => {
-    if (!aTableRef.value?.getBoundingClientRect) {
-      return;
-    }
-    const rectTableParent = aTableRef.value.getBoundingClientRect();
-    clientXTableParent = rectTableParent.left;
-  };
-  const mousedownResizePreviewRight = ({ clientWidth }) => {
-    clientWidthLocal = clientWidth;
-    previewBoxMaxWidthPx = clientWidth / 100 * PREVIEW_BOX_MAX_WIDTH_PERCENT;
-    setClientXTableParent();
-  };
-
-  const setTableParentWidth = ({ clientWidthLocal, clientXTableParent, previewBoxWidth }) => {
-    if (!aTableRef.value) {
-      return;
-    }
-
-    const TABLE_PARENT_WIDTH = clientWidthLocal - clientXTableParent - previewBoxWidth;
-    aTableRef.value.style.width = `${ TABLE_PARENT_WIDTH }px`;
-  };
-
-  const mousemoveResizePreviewRight = ({ clientX = 0, previewRef: _previewRef, previewBoxWidth = 0 }) => {
-    let previewBoxWidthLocal = previewBoxWidth || clientWidthLocal - clientX;
-    if (previewBoxWidthLocal < PREVIEW_BOX_MIN_WIDTH_PX) {
-      previewBoxWidthLocal = PREVIEW_BOX_MIN_WIDTH_PX;
-    } else if (previewBoxWidthLocal > previewBoxMaxWidthPx) {
-      previewBoxWidthLocal = previewBoxMaxWidthPx;
-    }
-    setTableParentWidth({ clientWidthLocal, clientXTableParent, previewBoxWidth: previewBoxWidthLocal });
-    if (_previewRef) {
-      _previewRef.style.width = `${ previewBoxWidthLocal }px`;
-    }
-  };
-
-  const closePreviewResize = ({ previewRef }) => {
-    if (get(previewRef, "style.removeProperty")) {
-      previewRef.style.removeProperty("width");
-    }
-    if (get(aTableRef, "value.style.removeProperty")) {
-      aTableRef.value.style.removeProperty("width");
-    }
-  };
-
-  const openPreviewResize = ({ previewRef }) => {
-    clientWidthLocal = document.documentElement.clientWidth;
-    tableGrandparentWidth = get(tableGrandparentRef, "value.offsetWidth", 0);
-    setClientXTableParent();
-    mousemoveResizePreviewRight({
-      previewRef,
-      previewBoxWidth: previewBoxWidthRemLocal.value,
-    });
-  };
-
-  const togglePreviewResize = ({ previewRef, isOpen }) => {
-    if (isOpen) {
-      openPreviewResize({ previewRef });
-    } else {
-      closePreviewResize({ previewRef });
-    }
-  };
-
-  const mouseupResizePreviewRight = ({ previewRightWidth }) => {
-    emit("mouseupResizePreviewRight", { previewRightWidth });
-  };
-
-  const correctTableUndPreviewWidth = () => {
-    openPreviewResize({
-      previewRef: previewRef.value,
-    });
-  };
-
-  const resizeOb = new ResizeObserver(
-    debounce(entries => {
-      // since we are observing only a single element, so we access the first element in entries array
-      const RECT = entries[0].contentRect;
-      if (tableGrandparentWidth !== RECT.width) {
-        tableGrandparentWidth = RECT.width;
-        correctTableUndPreviewWidth();
-      }
-    }, 300),
-  );
-
-  const addEventListenerWindowResize = () => {
-    resizeOb.observe(tableGrandparentRef.value);
-  };
-
-  const removeEventListenerWindowResize = () => {
-    resizeOb.unobserve(tableGrandparentRef.value);
-  };
-
-  onBeforeUnmount(() => {
-    removePreviewRef();
-    removeEventListenerWindowResize();
-  });
-
-  return {
-    addEventListenerWindowResize,
-    mousedownResizePreviewRight,
-    mousemoveResizePreviewRight,
-    mouseupResizePreviewRight,
-    removeEventListenerWindowResize,
-    togglePreviewResize,
-  };
-}
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+} from "vue";
+
+import PreviewRightRewAPI from "./PreviewRightRewAPI";
+
+import {
+  debounce,
+  get,
+} from "lodash-es";
+
+export default function PreviewRightResizeAPI(props, { emit }, {
+  aTableRef = ref({}),
+  previewBoxWidthRemLocal = computed(() => 0),
+  tableGrandparentRef = ref({}),
+}) {
+  const {
+    previewRef,
+    removePreviewRef,
+  } = PreviewRightRewAPI();
+
+  const PREVIEW_BOX_MIN_WIDTH_PX = 200;
+  const PREVIEW_BOX_MAX_WIDTH_PERCENT = 50;
+  let previewBoxMaxWidthPx = undefined;
+  let clientWidthLocal = 0;
+  let clientXTableParent = 0;
+  let tableGrandparentWidth = 0;
+
+  const setClientXTableParent = () => {
+    if (!aTableRef.value?.getBoundingClientRect) {
+      return;
+    }
+    const rectTableParent = aTableRef.value.getBoundingClientRect();
+    clientXTableParent = rectTableParent.left;
+  };
+  const mousedownResizePreviewRight = ({ clientWidth }) => {
+    clientWidthLocal = clientWidth;
+    previewBoxMaxWidthPx = clientWidth / 100 * PREVIEW_BOX_MAX_WIDTH_PERCENT;
+    setClientXTableParent();
+  };
+
+  const setTableParentWidth = ({ clientWidthLocal, clientXTableParent, previewBoxWidth }) => {
+    if (!aTableRef.value) {
+      return;
+    }
+
+    const TABLE_PARENT_WIDTH = clientWidthLocal - clientXTableParent - previewBoxWidth;
+    aTableRef.value.style.width = `${ TABLE_PARENT_WIDTH }px`;
+  };
+
+  const mousemoveResizePreviewRight = ({ clientX = 0, previewRef: _previewRef, previewBoxWidth = 0 }) => {
+    let previewBoxWidthLocal = previewBoxWidth || clientWidthLocal - clientX;
+    if (previewBoxWidthLocal < PREVIEW_BOX_MIN_WIDTH_PX) {
+      previewBoxWidthLocal = PREVIEW_BOX_MIN_WIDTH_PX;
+    } else if (previewBoxWidthLocal > previewBoxMaxWidthPx) {
+      previewBoxWidthLocal = previewBoxMaxWidthPx;
+    }
+    setTableParentWidth({ clientWidthLocal, clientXTableParent, previewBoxWidth: previewBoxWidthLocal });
+    if (_previewRef) {
+      _previewRef.style.width = `${ previewBoxWidthLocal }px`;
+    }
+  };
+
+  const closePreviewResize = ({ previewRef }) => {
+    if (get(previewRef, "style.removeProperty")) {
+      previewRef.style.removeProperty("width");
+    }
+    if (get(aTableRef, "value.style.removeProperty")) {
+      aTableRef.value.style.removeProperty("width");
+    }
+  };
+
+  const openPreviewResize = ({ previewRef }) => {
+    clientWidthLocal = document.documentElement.clientWidth;
+    tableGrandparentWidth = get(tableGrandparentRef, "value.offsetWidth", 0);
+    setClientXTableParent();
+    mousemoveResizePreviewRight({
+      previewRef,
+      previewBoxWidth: previewBoxWidthRemLocal.value,
+    });
+  };
+
+  const togglePreviewResize = ({ previewRef, isOpen }) => {
+    if (isOpen) {
+      openPreviewResize({ previewRef });
+    } else {
+      closePreviewResize({ previewRef });
+    }
+  };
+
+  const mouseupResizePreviewRight = ({ previewRightWidth }) => {
+    emit("mouseupResizePreviewRight", { previewRightWidth });
+  };
+
+  const correctTableUndPreviewWidth = () => {
+    openPreviewResize({
+      previewRef: previewRef.value,
+    });
+  };
+
+  const resizeOb = new ResizeObserver(
+    debounce(entries => {
+      // since we are observing only a single element, so we access the first element in entries array
+      const RECT = entries[0].contentRect;
+      if (tableGrandparentWidth !== RECT.width) {
+        tableGrandparentWidth = RECT.width;
+        correctTableUndPreviewWidth();
+      }
+    }, 300),
+  );
+
+  const addEventListenerWindowResize = () => {
+    resizeOb.observe(tableGrandparentRef.value);
+  };
+
+  const removeEventListenerWindowResize = () => {
+    resizeOb.unobserve(tableGrandparentRef.value);
+  };
+
+  onBeforeUnmount(() => {
+    removePreviewRef();
+    removeEventListenerWindowResize();
+  });
+
+  return {
+    addEventListenerWindowResize,
+    mousedownResizePreviewRight,
+    mousemoveResizePreviewRight,
+    mouseupResizePreviewRight,
+    removeEventListenerWindowResize,
+    togglePreviewResize,
+  };
+}