@knime/kds-table 8.2.2 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @knime/kds-table
 
+## 9.0.0
+
+### Major Changes
+
+- b46e376: BREAKING CHANGES:
+
+  - `@vueuse/core` is now a peer dependency instead of a bundled dependency.
+    Install it alongside this package, as every other KDS package that uses
+    VueUse already requires. The build previously inlined its own copy, so an
+    app loaded VueUse twice: once as the peer `@knime/kds-components` resolves,
+    and once inside this bundle. Composables that hold module-level state would
+    not have been shared between the two.
+
+### Patch Changes
+
+- 98b175a: `TableUI`: the pagination bar is now the shared `KdsPagination` component; the rendered appearance is unchanged.
+- Updated dependencies [98b175a, b46e376]
+  - @knime/kds-components@9.0.0
+  - @knime/kds-styles@9.0.0
+
 ## 8.2.2
 
 ### Patch Changes

package/dist/index.css

@@ -125,58 +125,6 @@ tr {
 }
 }
 
-.page-navigation {
-&[data-v-95577571] {
-  display: flex;
-  gap: var(--kds-spacing-container-0-5x);
-  align-items: center;
-}
-& .navigation-buttons[data-v-95577571] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-25x);
-    align-items: center;
-}
-& .page-count[data-v-95577571] {
-    font: var(--kds-font-base-title-small);
-    color: var(--kds-color-text-and-icon-subtle);
-}
-}
-
-.subtle[data-v-6cdf0c06] {
-  font: var(--kds-font-base-title-small);
-  color: var(--kds-color-text-and-icon-subtle);
-}
-.muted[data-v-6cdf0c06] {
-  font: var(--kds-font-base-title-small-strong);
-  color: var(--kds-color-text-and-icon-muted);
-}
-.row-range-container[data-v-6cdf0c06] {
-  display: flex;
-  flex: 1 0 0;
-  gap: var(--kds-spacing-container-0-25x);
-  align-items: center;
-  align-self: stretch;
-}
-
-.page-controls {
-&[data-v-bf51fe76] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
-  background: var(--kds-color-surface-default);
-}
-& .page-row-range[data-v-bf51fe76],
-  & .page-size-menu[data-v-bf51fe76] {
-    flex-grow: 1;
-    flex-basis: 0;
-}
-.page-size-menu[data-v-bf51fe76] {
-    display: flex;
-    justify-content: flex-end;
-}
-}
-
 .popover {
 &[data-v-349cd3ba] {
   display: flex;
@@ -656,7 +604,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-8198a271] {
+.wrapper[data-v-09b97a7c] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -666,24 +614,31 @@ tr.row {
 }
 }
 table {
-&[data-v-8198a271] {
+&[data-v-09b97a7c] {
   position: relative;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   width: 100%;
   min-height: 0;
+
+  /* The table inherits its parent's background; the pagination footer is the
+     one place Figma sets a surface token for (SLEEK-297). KdsPagination stays
+     transparent so it can sit on any surface. */
   }
-&[data-v-8198a271]:focus {
+&[data-v-09b97a7c]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-8198a271] {
+& .new-row-footer[data-v-09b97a7c] {
     width: 100%;
 }
+& .pagination[data-v-09b97a7c] {
+    background: var(--kds-color-surface-default);
+}
 }
 
 /* The empty state is placed into the rows' area by TableCoreVirtual. */
-.empty-state[data-v-8198a271] {
+.empty-state[data-v-09b97a7c] {
   max-width: 100%;
 }
 

package/dist/index.js

@@ -1,5 +1,6 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, shallowReadonly, shallowRef, toDisplayString, toRef, toValue, unref, useCssVars, useSlots, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { KdsButton, KdsCheckbox, KdsDropdown, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLoadingSkeleton, KdsMenuButton, KdsMissingValueIcon, KdsPopover, KdsSearchInput, KdsToggleButton, vKdsTooltip } from "@knime/kds-components";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, toDisplayString, toRef, unref, useCssVars, useSlots, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { KdsButton, KdsCheckbox, KdsDropdown, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLoadingSkeleton, KdsMenuButton, KdsMissingValueIcon, KdsPagination, KdsPopover, KdsSearchInput, KdsToggleButton, vKdsTooltip } from "@knime/kds-components";
+import { useRafFn, useResizeObserver } from "@vueuse/core";
 import './index.css';//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1396,161 +1397,6 @@ var getMissingValueMessage = (cellData) => {
 };
 var getPropertiesFromColumns = (columnConfigs, key) => columnConfigs.map((colConfig) => colConfig[key]);
 //#endregion
-//#region ../../node_modules/.pnpm/@vueuse+shared@14.4.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/shared/dist/index.js
-/**
-* Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
-*
-* @param fn
-*/
-function tryOnScopeDispose(fn, failSilently) {
-	if (getCurrentScope()) {
-		onScopeDispose(fn, failSilently);
-		return true;
-	}
-	return false;
-}
-var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-//#endregion
-//#region ../../node_modules/.pnpm/@vueuse+core@14.4.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
-var defaultWindow = isClient ? window : void 0;
-isClient && window.document;
-isClient && window.navigator;
-isClient && window.location;
-/**
-* Get the dom element of a ref of element or Vue component instance
-*
-* @param elRef
-*/
-function unrefElement(elRef) {
-	var _$el;
-	const plain = toValue(elRef);
-	return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
-}
-/**
-* Mounted state in ref.
-*
-* @see https://vueuse.org/useMounted
-*
-* @__NO_SIDE_EFFECTS__
-*/
-function useMounted() {
-	const isMounted = shallowRef(false);
-	const instance = getCurrentInstance();
-	if (instance) onMounted(() => {
-		isMounted.value = true;
-	}, instance);
-	return isMounted;
-}
-/* @__NO_SIDE_EFFECTS__ */
-function useSupported(callback) {
-	const isMounted = useMounted();
-	return computed(() => {
-		isMounted.value;
-		return Boolean(callback());
-	});
-}
-/**
-* 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 = 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) {
-		if (!isActive.value || !window) return;
-		if (!previousFrameTimestamp) previousFrameTimestamp = timestamp;
-		const delta = timestamp - previousFrameTimestamp;
-		if (intervalLimit.value && delta < intervalLimit.value) {
-			rafId = window.requestAnimationFrame(loop);
-			return;
-		}
-		previousFrameTimestamp = timestamp;
-		fn({
-			delta,
-			timestamp
-		});
-		if (once) {
-			isActive.value = false;
-			rafId = null;
-			return;
-		}
-		rafId = window.requestAnimationFrame(loop);
-	}
-	function resume() {
-		if (!isActive.value && window) {
-			isActive.value = true;
-			previousFrameTimestamp = 0;
-			rafId = window.requestAnimationFrame(loop);
-		}
-	}
-	function pause() {
-		isActive.value = false;
-		if (rafId != null && window) {
-			window.cancelAnimationFrame(rafId);
-			rafId = null;
-		}
-	}
-	if (immediate) resume();
-	tryOnScopeDispose(pause);
-	return {
-		isActive: shallowReadonly(isActive),
-		pause,
-		resume
-	};
-}
-/**
-* Reports changes to the dimensions of an Element's content or the border-box
-*
-* @see https://vueuse.org/useResizeObserver
-* @param target
-* @param callback
-* @param options
-*/
-function useResizeObserver(target, callback, options = {}) {
-	const { window = defaultWindow, ...observerOptions } = options;
-	let observer;
-	const isSupported = /* @__PURE__ */ useSupported(() => window && "ResizeObserver" in window);
-	const cleanup = () => {
-		if (observer) {
-			observer.disconnect();
-			observer = void 0;
-		}
-	};
-	const stopWatch = watch(computed(() => {
-		const _targets = toValue(target);
-		return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
-	}), (els) => {
-		cleanup();
-		if (isSupported.value && window) {
-			observer = new ResizeObserver(callback);
-			for (const _el of els) if (_el) observer.observe(_el, observerOptions);
-		}
-	}, {
-		immediate: true,
-		flush: "post"
-	});
-	const stop = () => {
-		cleanup();
-		stopWatch();
-	};
-	tryOnScopeDispose(stop);
-	return {
-		isSupported,
-		stop
-	};
-}
-Number.POSITIVE_INFINITY;
-//#endregion
 //#region ../../node_modules/.pnpm/@knime+vue-headless-virtual-scroller@0.2.0_vue@3.5.40_typescript@6.0.3_/node_modules/@knime/vue-headless-virtual-scroller/dist/vue-headless-virtual-scrolling.js
 var $ = Object.defineProperty;
 var P = (t, e, r) => e in t ? $(t, e, {
@@ -4390,7 +4236,7 @@ var injectColumnSizes = () => {
 };
 //#endregion
 //#region src/components/ui/EmptyRow.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = {
+var _hoisted_1$8 = {
 	key: 0,
 	class: "deletion-cell-spacer"
 };
@@ -4416,7 +4262,7 @@ var EmptyRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					height: `${__props.height}px`
 				})
 			}, [
-				__props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$11)) : createCommentVNode("", true),
+				__props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$8)) : createCommentVNode("", true),
 				__props.tableConfig.showSelection ? (openBlock(), createElementBlock("td", {
 					key: 1,
 					class: "select-cell",
@@ -5293,237 +5139,6 @@ var useVisibleAfterAvailableWidth = () => {
 	};
 };
 //#endregion
-//#region src/components/control/PageNavigation.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = { class: "page-navigation" };
-var _hoisted_2$7 = { class: "navigation-buttons" };
-var _hoisted_3$4 = { class: "page-count" };
-var _hoisted_4$3 = { class: "navigation-buttons" };
-//#endregion
-//#region src/components/control/PageNavigation.vue
-var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
-	__name: "PageNavigation",
-	props: {
-		currentPage: { default: 1 },
-		totalPages: { default: 0 },
-		hasNextPage: {
-			type: Boolean,
-			default: false
-		},
-		hasPreviousPage: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: ["pageChange"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const onPageChange = (newPageNumber) => {
-			consola.debug("Page change", newPageNumber);
-			emit("pageChange", newPageNumber);
-		};
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$10, [
-				createElementVNode("div", _hoisted_2$7, [createVNode(unref(KdsButton), {
-					variant: "transparent",
-					size: "small",
-					"leading-icon": "chevron-left-double",
-					ariaLabel: "First page",
-					disabled: !__props.hasPreviousPage,
-					onClick: _cache[0] || (_cache[0] = ($event) => onPageChange(1))
-				}, null, 8, ["disabled"]), createVNode(unref(KdsButton), {
-					variant: "transparent",
-					size: "small",
-					"leading-icon": "chevron-left",
-					ariaLabel: "Previous page",
-					disabled: !__props.hasPreviousPage,
-					onClick: _cache[1] || (_cache[1] = ($event) => onPageChange(__props.currentPage - 1))
-				}, null, 8, ["disabled"])]),
-				createElementVNode("span", _hoisted_3$4, toDisplayString(__props.currentPage) + " of " + toDisplayString(__props.totalPages), 1),
-				createElementVNode("div", _hoisted_4$3, [createVNode(unref(KdsButton), {
-					variant: "transparent",
-					size: "small",
-					"leading-icon": "chevron-right",
-					ariaLabel: "Next page",
-					disabled: !__props.hasNextPage,
-					onClick: _cache[2] || (_cache[2] = ($event) => onPageChange(__props.currentPage + 1))
-				}, null, 8, ["disabled"]), createVNode(unref(KdsButton), {
-					variant: "transparent",
-					size: "small",
-					"leading-icon": "chevron-right-double",
-					ariaLabel: "Last page",
-					disabled: !__props.hasNextPage,
-					onClick: _cache[3] || (_cache[3] = ($event) => onPageChange(__props.totalPages))
-				}, null, 8, ["disabled"])])
-			]);
-		};
-	}
-}), [["__scopeId", "data-v-95577571"]]);
-//#endregion
-//#region src/components/control/PageRowRange.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = {
-	key: 0,
-	class: "subtle"
-};
-var _hoisted_2$6 = {
-	key: 1,
-	class: "row-range-container"
-};
-var _hoisted_3$3 = { class: "subtle" };
-var _hoisted_4$2 = {
-	key: 0,
-	class: "muted"
-};
-var _hoisted_5$1 = { class: "subtle" };
-//#endregion
-//#region src/components/control/PageControls.vue?vue&type=script&lang.ts
-/**
-* Table controls for the bottom of the table, showing the current row range,
-* page navigation, and a page-size menu.
-*
-* @emits pageChange when navigating to a different page.
-* @emits pageSizeUpdate when the page size is updated.
-*/
-var PageControls_vue_vue_type_script_lang_default = {
-	components: {
-		PageNavigation: PageNavigation_default,
-		PageRowRange: /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
-			__name: "PageRowRange",
-			props: {
-				currentItems: { default: 0 },
-				pageSize: { default: 0 },
-				currentPage: { default: 1 },
-				showTableSize: {
-					type: Boolean,
-					default: true
-				},
-				rowLabel: { default: "Rows" }
-			},
-			setup(__props) {
-				const totalPages = computed(() => !__props.pageSize || __props.currentItems <= 0 ? 0 : Math.ceil(__props.currentItems / __props.pageSize));
-				const hasMultiplePages = computed(() => totalPages.value > 1);
-				const pageRangeStart = computed(() => __props.currentPage * __props.pageSize - __props.pageSize + 1);
-				const pageRangeEnd = computed(() => Math.min(__props.currentPage * __props.pageSize, __props.currentItems));
-				const rowCountText = computed(() => hasMultiplePages.value && __props.currentItems ? `of ${__props.currentItems}` : __props.currentItems);
-				return (_ctx, _cache) => {
-					return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$9, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
-						createElementVNode("span", _hoisted_3$3, toDisplayString(__props.rowLabel) + ":", 1),
-						hasMultiplePages.value && __props.currentItems ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(pageRangeStart.value) + "–" + toDisplayString(pageRangeEnd.value), 1)) : createCommentVNode("", true),
-						createElementVNode("span", _hoisted_5$1, toDisplayString(rowCountText.value), 1)
-					]));
-				};
-			}
-		}), [["__scopeId", "data-v-6cdf0c06"]]),
-		KdsMenuButton
-	},
-	props: {
-		tableConfig: {
-			type: Object,
-			required: true
-		},
-		pageConfig: {
-			type: Object,
-			required: true
-		},
-		tableState: {
-			type: Object,
-			required: true
-		},
-		pageState: {
-			type: Object,
-			required: true
-		}
-	},
-	emits: ["pageSizeUpdate", "pageChange"],
-	computed: {
-		pageSizeItems() {
-			return (this.pageConfig.possiblePageSizes ?? []).map((pageSize) => ({
-				id: pageSize.toString(),
-				text: this.createText(pageSize)
-			}));
-		},
-		currentItems() {
-			return this.tableState.tableSizes?.currentNumRows ?? 0;
-		},
-		totalPages() {
-			if (!this.pageConfig.pageSize || this.currentItems <= 0) return 0;
-			return Math.ceil(this.currentItems / this.pageConfig.pageSize);
-		},
-		hasNextPage() {
-			return this.pageState.currentPage < this.totalPages;
-		},
-		hasPreviousPage() {
-			return this.pageState.currentPage > 1;
-		},
-		showPageNavigation() {
-			return this.hasNextPage || this.hasPreviousPage;
-		}
-	},
-	methods: {
-		createText(size) {
-			return `${size.toString()} per page`;
-		},
-		onPageSizeSelect(newPageSize) {
-			consola.debug("Updated table page size: ", newPageSize);
-			this.$emit("pageSizeUpdate", Number.parseInt(newPageSize, 10));
-		}
-	}
-};
-//#endregion
-//#region src/components/control/PageControls.vue
-var _hoisted_1$8 = {
-	key: 0,
-	class: "page-controls"
-};
-var _hoisted_2$5 = { class: "page-size-menu" };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_PageRowRange = resolveComponent("PageRowRange");
-	const _component_PageNavigation = resolveComponent("PageNavigation");
-	const _component_KdsMenuButton = resolveComponent("KdsMenuButton");
-	return $options.showPageNavigation || $options.pageSizeItems.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-		createVNode(_component_PageRowRange, {
-			class: "page-row-range",
-			"current-items": $props.tableState.tableSizes?.currentNumRows,
-			"page-size": $props.pageConfig.pageSize,
-			"current-page": $props.pageState.currentPage,
-			"show-table-size": $props.tableConfig.showTableSize,
-			"row-label": $props.tableConfig.rowLabel
-		}, null, 8, [
-			"current-items",
-			"page-size",
-			"current-page",
-			"show-table-size",
-			"row-label"
-		]),
-		$options.showPageNavigation ? (openBlock(), createBlock(_component_PageNavigation, {
-			key: 0,
-			"current-page": $props.pageState.currentPage,
-			"total-pages": $options.totalPages,
-			"has-next-page": $options.hasNextPage,
-			"has-previous-page": $options.hasPreviousPage,
-			onPageChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("pageChange", $event))
-		}, null, 8, [
-			"current-page",
-			"total-pages",
-			"has-next-page",
-			"has-previous-page"
-		])) : createCommentVNode("", true),
-		createElementVNode("div", _hoisted_2$5, [$options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
-			key: 0,
-			items: $options.pageSizeItems,
-			label: $options.createText($props.pageConfig.pageSize),
-			size: "small",
-			"trailing-icon": "chevron-down",
-			variant: "transparent",
-			onItemClick: $options.onPageSizeSelect
-		}, null, 8, [
-			"items",
-			"label",
-			"onItemClick"
-		])) : createCommentVNode("", true)])
-	])) : createCommentVNode("", true);
-}
-var PageControls_default = /*#__PURE__*/ _plugin_vue_export_helper_default(PageControls_vue_vue_type_script_lang_default, [["render", _sfc_render$4], ["__scopeId", "data-v-bf51fe76"]]);
-//#endregion
 //#region src/components/control/actionbar/PopoverContainer.vue
 var _sfc_main = {};
 var _hoisted_1$7 = { class: "popover" };
@@ -6813,7 +6428,7 @@ var DEFAULT_COLUMN_SIZE = 100;
 */
 var TableUI_vue_vue_type_script_lang_default = {
 	components: {
-		PageControls: PageControls_default,
+		KdsPagination,
 		Header: Header_default,
 		Row: /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 			__name: "Row",
@@ -8118,7 +7733,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_NewRowButton = resolveComponent("NewRowButton");
 	const _component_KdsEmptyState = resolveComponent("KdsEmptyState");
 	const _component_TableCore = resolveComponent("TableCore");
-	const _component_PageControls = resolveComponent("PageControls");
+	const _component_KdsPagination = resolveComponent("KdsPagination");
 	return openBlock(), createElementBlock("div", {
 		class: "wrapper",
 		style: normalizeStyle({ visibility: $setup.tableIsVisible ? void 0 : "hidden" })
@@ -8371,24 +7986,29 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 		"onClearSelection",
 		"onExpandSelectedCell",
 		"onStartEditing"
-	]), $props.pageConfig && $props.pageState ? (openBlock(), createBlock(_component_PageControls, {
+	]), $props.pageConfig && $props.pageState ? (openBlock(), createBlock(_component_KdsPagination, {
 		key: 0,
-		"page-config": $props.pageConfig,
-		"table-config": $props.tableConfig,
-		"page-state": $props.pageState,
-		"table-state": $props.tableState,
-		onPageChange: $options.onPageChange,
-		onPageSizeUpdate: $options.onPageSizeUpdate
+		class: "pagination",
+		"current-page": $props.pageState.currentPage,
+		"page-size": $props.pageConfig.pageSize,
+		"possible-page-sizes": $props.pageConfig.possiblePageSizes,
+		"total-rows": $props.tableState.tableSizes?.currentNumRows ?? 0,
+		"show-table-size": $props.tableConfig.showTableSize,
+		"row-label": $props.tableConfig.rowLabel,
+		"onUpdate:currentPage": $options.onPageChange,
+		"onUpdate:pageSize": $options.onPageSizeUpdate
 	}, null, 8, [
-		"page-config",
-		"table-config",
-		"page-state",
-		"table-state",
-		"onPageChange",
-		"onPageSizeUpdate"
+		"current-page",
+		"page-size",
+		"possible-page-sizes",
+		"total-rows",
+		"show-table-size",
+		"row-label",
+		"onUpdate:currentPage",
+		"onUpdate:pageSize"
 	])) : createCommentVNode("", true)], 544)], 4);
 }
-var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-8198a271"]]);
+var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-09b97a7c"]]);
 //#endregion
 //#region src/components/composables/useTableReady.ts
 var useTableReady = ({ onReady }) => {