@witchcraft/ui 0.3.16 → 0.3.17

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/LibTable/LibTable.d.vue.ts

@@ -36,7 +36,7 @@ type RealProps = {
      * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
      *
      * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-     *
+      *
      * ### Dynamic (experimental)
      *
      * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.

package/dist/runtime/components/LibTable/LibTable.vue

@@ -177,7 +177,7 @@
 						:style="{
   ...mergedVirtualizerOpts.enabled ? {
     transform: mergedVirtualizerOpts.method === 'fixed' ? `translateY(${virtual.start - index * virtual.size}px)` : `translateY(${virtual.start}px)`,
-    height: virtual.size
+    height: `${virtual.size}px`
   } : {}
 }"
 						:data-index="virtual.index"
@@ -287,11 +287,13 @@ function measureElement(el) {
     rowVirtualizer.value.measureElement(el);
   }
 }
+let mounted = false;
 function forceRecalculateFixedVirtualizer() {
   if (mergedVirtualizerOpts.value?.method === "dynamic" || !mergedVirtualizerOpts.value.enabled) return;
-  if (!parentRef.value) {
+  if (!mounted) {
     throw new Error("forceRecalculateFixedVirtualizer cannot be called before the table is mounted.");
   }
+  if (!parentRef.value) return;
   const height = parentRef.value.querySelector("td")?.getBoundingClientRect().height;
   if (!height) return;
   for (let i = 0; i < props.values.length; i++) {
@@ -309,7 +311,10 @@ function updateTableHeight() {
 const throttledUpdateTableHeight = throttle(updateTableHeight, 100, { leading: true });
 onMounted(() => {
   throttledUpdateTableHeight();
-  forceRecalculateFixedVirtualizer();
+  mounted = true;
+  setTimeout(() => {
+    forceRecalculateFixedVirtualizer();
+  }, 0);
   useGlobalResizeObserver(parentRef, onResize);
 });
 const hasScrollbar = ref({ vertical: false, horizontal: false });

package/dist/runtime/components/LibTable/LibTable.vue.d.ts

@@ -36,7 +36,7 @@ type RealProps = {
      * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
      *
      * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-     *
+      *
      * ### Dynamic (experimental)
      *
      * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/runtime/components/LibTable/LibTable.vue

@@ -182,7 +182,7 @@
 									transform: mergedVirtualizerOpts.method === 'fixed'
 										? `translateY(${virtual.start - index * virtual.size!}px)`
 										: `translateY(${virtual.start}px)`,
-									height: virtual.size
+									height: `${virtual.size}px`
 								}
 								: {})
 						}"
@@ -314,11 +314,13 @@ function measureElement(el: any): void {
 	}
 }
 
+let mounted = false
 function forceRecalculateFixedVirtualizer() {
 	if (mergedVirtualizerOpts.value?.method === "dynamic" || !mergedVirtualizerOpts.value.enabled) return
-	if (!parentRef.value) {
+	if (!mounted) {
 		throw new Error("forceRecalculateFixedVirtualizer cannot be called before the table is mounted.")
 	}
+	if (!parentRef.value) return // this could happen if the table is destroyed before the timeout (highly unlikely, probably impossible)
 	const height = parentRef.value.querySelector("td")?.getBoundingClientRect().height
 	if (!height) return
 	for (let i = 0; i < props.values.length; i++) {
@@ -339,7 +341,10 @@ const throttledUpdateTableHeight = throttle(updateTableHeight, 100, { leading: t
 
 onMounted(() => {
 	throttledUpdateTableHeight()
-	forceRecalculateFixedVirtualizer()
+	mounted = true
+	setTimeout(() => {
+		forceRecalculateFixedVirtualizer()
+	}, 0)
 	useGlobalResizeObserver(parentRef, onResize)
 })
 
@@ -434,7 +439,7 @@ type RealProps = {
 	 * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
 	 *
 	 * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-	 *
+	  *
 	 * ### Dynamic (experimental)
 	 *
 	 * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.