@knime/kds-table 0.2.1 → 0.2.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed, unref, watch, ref, isRef, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, toValue, shallowRef, createPropsRestProxy, useModel, createBlock, mergeProps, mergeModels, useTemplateRef, watchEffect, nextTick, withCtx, createVNode, useAttrs, useId, Fragment, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, resolveComponent, withKeys, normalizeStyle, renderList, onUnmounted, readonly, defineAsyncComponent, resolveDynamicComponent, h as h$1, useSlots, markRaw, createTextVNode, toRef, useCssVars, onBeforeUnmount, reactive, createSlots, normalizeProps, guardReactiveProps } from 'vue';
+import { computed, unref, watch, ref, isRef, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, shallowRef, toValue, readonly, createPropsRestProxy, useModel, createBlock, mergeProps, mergeModels, useTemplateRef, watchEffect, nextTick, withCtx, createVNode, useAttrs, useId, Fragment, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, resolveComponent, withKeys, normalizeStyle, renderList, onUnmounted, defineAsyncComponent, resolveDynamicComponent, h as h$1, useSlots, markRaw, createTextVNode, toRef, useCssVars, onBeforeUnmount, reactive, createSlots, normalizeProps, guardReactiveProps } from 'vue';
 
 import './index.css';const defaultTimeFilter = "All time";
 const checkTimeFilter = (inDateString, timeFilterConfig) => {
@@ -742,6 +742,67 @@ function useMutationObserver(target, callback, options = {}) {
 	};
 }
 
+//#endregion
+//#region useRafFn/index.ts
+/**
+* Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+*
+* @see https://vueuse.org/useRafFn
+* @param fn
+* @param options
+*/
+function useRafFn(fn, options = {}) {
+	const { immediate = true, fpsLimit = null, window: window$1 = defaultWindow, once = false } = options;
+	const isActive = shallowRef(false);
+	const intervalLimit = computed(() => {
+		const limit = toValue(fpsLimit);
+		return limit ? 1e3 / limit : null;
+	});
+	let previousFrameTimestamp = 0;
+	let rafId = null;
+	function loop(timestamp$1) {
+		if (!isActive.value || !window$1) return;
+		if (!previousFrameTimestamp) previousFrameTimestamp = timestamp$1;
+		const delta = timestamp$1 - previousFrameTimestamp;
+		if (intervalLimit.value && delta < intervalLimit.value) {
+			rafId = window$1.requestAnimationFrame(loop);
+			return;
+		}
+		previousFrameTimestamp = timestamp$1;
+		fn({
+			delta,
+			timestamp: timestamp$1
+		});
+		if (once) {
+			isActive.value = false;
+			rafId = null;
+			return;
+		}
+		rafId = window$1.requestAnimationFrame(loop);
+	}
+	function resume() {
+		if (!isActive.value && window$1) {
+			isActive.value = true;
+			previousFrameTimestamp = 0;
+			rafId = window$1.requestAnimationFrame(loop);
+		}
+	}
+	function pause() {
+		isActive.value = false;
+		if (rafId != null && window$1) {
+			window$1.cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	}
+	if (immediate) resume();
+	tryOnScopeDispose(pause);
+	return {
+		isActive: readonly(isActive),
+		pause,
+		resume
+	};
+}
+
 //#endregion
 //#region useResizeObserver/index.ts
 /**
@@ -1692,7 +1753,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-190ac311"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-24ade73a"]]);
 
 const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
@@ -2767,7 +2828,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-1e5f9d24"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-3354d162"]]);
 
 const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   ...{
@@ -10438,7 +10499,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-7bfc5667"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-0bec87ad"]]);
 
 const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
@@ -14689,7 +14750,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-cdb20fd2"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-0a6ce241"]]);
 
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
@@ -15544,14 +15605,66 @@ const provideCommonScrollContainerProps = (containerRef, params) => {
   provideForCloseSubMenusOnScroll();
   provide(injectionKey, containerRef);
 };
+const useScrollContainer = () => inject(injectionKey, ref(null));
 const useCommonScrollContainerProps = () => {
   const closeExpandedSubMenu = injectCloseExpandedSubMenu();
   const overflowStyles = useOverflowStyles();
-  const containerRef = inject(injectionKey);
   return {
     overflowStyles,
     closeExpandedSubMenu,
-    containerRef
+    containerRef: useScrollContainer()
+  };
+};
+
+const useResizeScrollSpacer = ({
+  columnResizeActive,
+  currentBodyWidth,
+  scrollContainer
+}) => {
+  const showResizeScrollSpacer = ref(false);
+  const collapseResizeScrollSpacer = ref(false);
+  const additionalSpacerWidth = ref("0px");
+  const getVisibleWidthBeyondBody = () => {
+    const container = scrollContainer.value;
+    if (container === null) {
+      return 0;
+    }
+    return Math.max(
+      0,
+      container.scrollLeft + container.clientWidth - currentBodyWidth.value
+    );
+  };
+  watch(columnResizeActive, (active) => {
+    if (active) {
+      collapseResizeScrollSpacer.value = false;
+      showResizeScrollSpacer.value = true;
+      additionalSpacerWidth.value = "100vw";
+    } else if (showResizeScrollSpacer.value) {
+      const visibleWidthBeyondBody = getVisibleWidthBeyondBody();
+      if (visibleWidthBeyondBody > 0) {
+        additionalSpacerWidth.value = `${visibleWidthBeyondBody}px`;
+        nextTick(() => {
+          scrollContainer.value?.offsetWidth;
+          additionalSpacerWidth.value = "0px";
+          collapseResizeScrollSpacer.value = true;
+        });
+      } else {
+        showResizeScrollSpacer.value = false;
+        additionalSpacerWidth.value = "0px";
+      }
+    }
+  });
+  const onResizeScrollSpacerTransitionEnd = () => {
+    if (collapseResizeScrollSpacer.value) {
+      showResizeScrollSpacer.value = false;
+      collapseResizeScrollSpacer.value = false;
+    }
+  };
+  return {
+    showResizeScrollSpacer,
+    collapseResizeScrollSpacer,
+    additionalSpacerWidth,
+    onResizeScrollSpacerTransitionEnd
   };
 };
 
@@ -15563,7 +15676,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     columnSizes: {},
     specialColumnSizes: {},
     currentBodyWidth: {},
-    tableConfig: {}
+    tableConfig: {},
+    columnResizeActive: { type: Boolean }
   },
   emits: ["scrollerUpdate", "moveSelection", "clearSelection", "expandSelectedCell", "startEditing", "bodyFocusin", "bodyFocusout"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -15641,6 +15755,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       containerRef: injectedContainerRef,
       overflowStyles
     } = useCommonScrollContainerProps();
+    const {
+      showResizeScrollSpacer,
+      collapseResizeScrollSpacer,
+      additionalSpacerWidth,
+      onResizeScrollSpacerTransitionEnd
+    } = useResizeScrollSpacer({
+      columnResizeActive: toRef(props, "columnResizeActive"),
+      currentBodyWidth: toRef(props, "currentBodyWidth"),
+      scrollContainer: containerProps.ref
+    });
     __expose({
       scrollToPosition: ({ top, left }) => {
         if (top !== void 0) {
@@ -15663,7 +15787,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         },
         style: normalizeStyle(unref(overflowStyles)),
         class: normalizeClass(["container", { "fit-content": __props.tableConfig.forceRenderAll }]),
-        onScroll: _cache[6] || (_cache[6] = () => [unref(containerProps).onScroll(), unref(closeExpandedSubMenu)()])
+        onScroll: _cache[7] || (_cache[7] = () => [unref(containerProps).onScroll(), unref(closeExpandedSubMenu)()])
       }, [
         createElementVNode("div", {
           ref_key: "headerContainer",
@@ -15711,13 +15835,26 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "belowBody", {}, void 0, true)
           ]),
           _: 3
-        })
+        }),
+        unref(showResizeScrollSpacer) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([
+            "resize-scroll-spacer",
+            { collapsing: unref(collapseResizeScrollSpacer) }
+          ]),
+          "aria-hidden": "true",
+          style: normalizeStyle({
+            width: `calc(${__props.currentBodyWidth}px + ${unref(additionalSpacerWidth)})`
+          }),
+          onTransitionend: _cache[6] || (_cache[6] = //@ts-ignore
+          (...args) => unref(onResizeScrollSpacerTransitionEnd) && unref(onResizeScrollSpacerTransitionEnd)(...args))
+        }, null, 38)) : createCommentVNode("", true)
       ], 38)) : createCommentVNode("", true);
     };
   }
 });
 
-const TableCoreVirtual = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-4c5d7018"]]);
+const TableCoreVirtual = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-fb9f9377"]]);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -15946,6 +16083,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         },
         "current-body-width": currentBodyWidth.value,
         "table-config": __props.tableConfig,
+        "column-resize-active": __props.columnResize.active,
         onScrollerUpdate: _cache[0] || (_cache[0] = (startIndex, endIndex) => emit("scrollerUpdate", startIndex, endIndex)),
         onMoveSelection: _cache[1] || (_cache[1] = (...args) => emit("moveSelection", ...args)),
         onClearSelection: _cache[2] || (_cache[2] = ($event) => emit("clearSelection")),
@@ -15972,7 +16110,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "belowBody")
         ]),
         _: 3
-      }, 8, ["scroll-data", "column-sizes", "scroll-config", "special-column-sizes", "current-body-width", "table-config"]);
+      }, 8, ["scroll-data", "column-sizes", "scroll-config", "special-column-sizes", "current-body-width", "table-config", "column-resize-active"]);
     };
   }
 });
@@ -17122,6 +17260,59 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 
 const TableActionBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-8cfb3c41"]]);
 
+const AUTO_SCROLL_EDGE_SIZE = 20;
+const AUTO_SCROLL_SPEED = 250;
+const useAutoScrollOnRightEdge = ({
+  scrollContainer,
+  autoScrollOffset,
+  onAutoScroll
+}) => {
+  let pointerClientX = 0;
+  let scrollLeftBase = 0;
+  const isInTriggerZone = () => {
+    const container = scrollContainer.value;
+    if (!container) {
+      return false;
+    }
+    const { right } = container.getBoundingClientRect();
+    return pointerClientX >= right - AUTO_SCROLL_EDGE_SIZE;
+  };
+  const { pause, resume } = useRafFn(
+    ({ delta }) => {
+      const deltaPx = AUTO_SCROLL_SPEED * delta / 1e3;
+      autoScrollOffset.value += deltaPx;
+      const container = scrollContainer.value;
+      onAutoScroll();
+      nextTick(() => {
+        if (container) {
+          container.scrollLeft = scrollLeftBase + autoScrollOffset.value;
+        }
+      });
+    },
+    { immediate: false }
+  );
+  const updateZone = (clientX) => {
+    pointerClientX = clientX;
+    if (isInTriggerZone()) {
+      resume();
+    } else {
+      pause();
+    }
+  };
+  const onPointerDown = (clientX) => {
+    scrollLeftBase = scrollContainer.value?.scrollLeft ?? 0;
+    updateZone(clientX);
+  };
+  const onPointerMove = (clientX) => {
+    updateZone(clientX);
+  };
+  const onPointerUp = () => {
+    pause();
+    autoScrollOffset.value = 0;
+  };
+  return { onPointerDown, onPointerMove, onPointerUp };
+};
+
 const _sfc_main$8 = {
   components: {
     KdsCheckbox: _sfc_main$10,
@@ -17199,6 +17390,32 @@ const _sfc_main$8 = {
   },
   setup(props, { emit }) {
     const { indexedData: indexedColumnHeaders, style: headerStyles } = useIndicesAndStylesFor(toRef(props, "columnHeaders"));
+    const scrollContainer = useScrollContainer();
+    const dragIndex = ref(null);
+    const columnSizeOnDragStart = ref(0);
+    const pageXOnDragStart = ref(0);
+    const currentPageX = ref(0);
+    const autoScrollOffset = ref(0);
+    const emitColumnResize = () => {
+      if (dragIndex.value === null) {
+        return;
+      }
+      const newColumnSize = columnSizeOnDragStart.value + (currentPageX.value - pageXOnDragStart.value) + autoScrollOffset.value;
+      emit(
+        "columnResize",
+        dragIndex.value,
+        Math.max(newColumnSize, MIN_COLUMN_SIZE)
+      );
+    };
+    const {
+      onPointerDown: startAutoScroll,
+      onPointerMove: updateAutoScroll,
+      onPointerUp: stopAutoScroll
+    } = useAutoScrollOnRightEdge({
+      scrollContainer,
+      autoScrollOffset,
+      onAutoScroll: emitColumnResize
+    });
     let currentColumnIndex = 0;
     const onStartEditing = (initialValue) => {
       emit("headerCellStartEditing", currentColumnIndex, initialValue);
@@ -17211,19 +17428,27 @@ const _sfc_main$8 = {
       currentColumnIndex = columnIndex;
       startEditingKeydown(event);
     };
-    return { indexedColumnHeaders, headerStyles, onHeaderCellKeydown };
+    return {
+      indexedColumnHeaders,
+      headerStyles,
+      onHeaderCellKeydown,
+      scrollContainer,
+      dragIndex,
+      columnSizeOnDragStart,
+      pageXOnDragStart,
+      currentPageX,
+      autoScrollOffset,
+      emitColumnResize,
+      startAutoScroll,
+      updateAutoScroll,
+      stopAutoScroll
+    };
   },
   /* eslint-enable @typescript-eslint/no-unused-vars  */
   data() {
     return {
       hoverIndex: null,
       // the index of the column that is currently being hovered over; null during resize
-      dragIndex: null,
-      // the index of the column that is currently being dragged / resized
-      columnSizeOnDragStart: 0,
-      // the original width of the column that is currently being resized
-      pageXOnDragStart: 0,
-      // the x coordinate at which the mouse was clicked when starting the resize drag
       minimumColumnWidth: MIN_COLUMN_SIZE,
       // need to add this here since it is referenced in the template
       maximumSubMenuWidth: MAX_SUB_MENU_WIDTH,
@@ -17325,17 +17550,20 @@ const _sfc_main$8 = {
       this.currentDragHandlerHeight = this.getDragHandleHeight();
       this.columnSizeOnDragStart = this.columnSizes[columnIndex];
       this.pageXOnDragStart = event.pageX;
+      this.currentPageX = event.pageX;
       this.$emit("columnResizeStart");
+      this.startAutoScroll(event.clientX);
     },
     onPointerUp(event) {
       this.$emit("columnResizeEnd");
       if (event.shiftKey) {
-        const newColumnSize = this.columnSizeOnDragStart + event.pageX - this.pageXOnDragStart;
+        const newColumnSize = this.columnSizeOnDragStart + event.pageX - this.pageXOnDragStart + this.autoScrollOffset;
         this.$emit(
           "allColumnsResize",
           Math.max(newColumnSize, this.minimumColumnWidth)
         );
       }
+      this.stopAutoScroll();
     },
     /* eslint-disable no-invalid-this */
     onPointerMove: throttle(function(event) {
@@ -17350,12 +17578,9 @@ const _sfc_main$8 = {
     unthrottledOnPointerMove(event) {
       if (this.dragIndex !== null) {
         consola.debug("Resize via drag ongoing: ", event);
-        const newColumnSize = this.columnSizeOnDragStart + event.pageX - this.pageXOnDragStart;
-        this.$emit(
-          "columnResize",
-          this.dragIndex,
-          Math.max(newColumnSize, this.minimumColumnWidth)
-        );
+        this.currentPageX = event.pageX;
+        this.emitColumnResize();
+        this.updateAutoScroll(event.clientX);
       }
     },
     /* The lostpointercapture event is triggered if the pointer capture is lost for any reason, including its
@@ -17363,6 +17588,7 @@ const _sfc_main$8 = {
         the onLostPointerCapture function to guarantee order of event handling. */
     onLostPointerCapture: throttle(function(event) {
       consola.debug("Resize via drag finished: ", event);
+      this.stopAutoScroll();
       this.dragIndex = null;
       this.hoverIndex = null;
     }),
@@ -17564,10 +17790,10 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
             key: 2,
             class: normalizeClass([
               "resize-handle-area",
-              { hover: $data.hoverIndex === ind, drag: $data.dragIndex === ind }
+              { hover: $data.hoverIndex === ind, drag: $setup.dragIndex === ind }
             ]),
             style: normalizeStyle({
-              height: `${$options.dragHandleHeight($data.dragIndex === ind)}px`
+              height: `${$options.dragHandleHeight($setup.dragIndex === ind)}px`
             }),
             onPointerover: ($event) => $options.onPointerOver($event, ind),
             onPointerleave: _cache[2] || (_cache[2] = (...args) => $options.onPointerLeave && $options.onPointerLeave(...args)),
@@ -17608,7 +17834,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 6)) : createCommentVNode("", true)
   ]);
 }
-const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-08a86b18"]]);
+const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-3b63e327"]]);
 
 const _hoisted_1$3 = { class: "sticky-container" };
 const buttonRef = "button";