@witchcraft/ui 0.3.14 → 0.3.16

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

@@ -1,3 +1,4 @@
+import { type VirtualizerOptions } from "@tanstack/vue-virtual";
 import { type TableHTMLAttributes } from "vue";
 import type { ResizableOptions, TableColConfig } from "../../types/index.js";
 import type { TailwindClassProp } from "../shared/props.js";
@@ -5,7 +6,6 @@ type T = any;
 type RealProps = {
     resizable?: Partial<ResizableOptions>;
     values?: T[];
-    itemKey?: keyof T | ((item: T) => string);
     /** Let's the table know the shape of the data since values might be empty. */
     cols?: (keyof T)[];
     rounded?: boolean;
@@ -13,6 +13,56 @@ type RealProps = {
     cellBorder?: boolean;
     header?: boolean;
     colConfig?: TableColConfig<T>;
+    /**
+     * See tanstack/vue-virtual {@link https://tanstack.com/virtual/latest/docs/api/virtualizer}
+     *
+     * The defaults are:
+     *
+     * - enabled: false
+     * - method: "fixed"
+     * - overscan: (50 if fixed, 10 if dynamic)
+     * - estimateSize: () => { return 33 }
+     *
+     * This also has an additional option, `method`, which can be set to `fixed` or `dynamic` (experimental).
+     *
+     * Notes:
+     *
+     * - Because of how virtualization works, initial layout (before .resizable-cols-setup class is applied) will only have access to the headers and not the rows. This can cause cols to look very small, especially if using resizable.fitWidth false.
+     *
+     * ### Fixed
+     *
+     * `fixed` is the default and will set the height of ALL items to the height of the first item onMounted (tanstack does not do this and if your estimateSize if off, the scrolling is weird).
+     *
+     * 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.
+     *
+     * Dynamic mode also requires the table displays itself using grid and flex post setup as otherwise dynamic mode doesn't work.
+     *
+     * You don't need to do anything unless using slots. If using slots, pass the given `ref` slot prop to ref (internally this is tanstack's measureElement) and the class and style slot props at the very least:
+     * ```vue
+     * <template #[`${colName}`]="slotProps">
+     * 	<td
+     * 		:ref="slotProps.ref"
+     * 		:class="slotProps.class"
+     * 		:style="slotProps.style"
+     * 	>
+     * 		{{ slotProps.value }}
+     * 	</td>
+     * </template>
+     * ```
+     */
+    virtualizerOptions?: Partial<VirtualizerOptions<any, any>> & {
+        method?: "fixed" | "dynamic";
+    };
+    /** Whether to enable sticky header styles. This requires `border:false`. This moves the border to the wrapper and styles a straight border between the scroll bar and the rounded border. */
+    stickyHeader?: boolean;
+    /** Which key to use for the rows (only if not using virtualization). */
+    itemKey?: keyof T | ((item: T) => string);
 };
 interface Props extends 
 /** @vue-ignore */
@@ -20,18 +70,25 @@ Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindC
 }
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Props & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        forceRecalculateFixedVirtualizer: () => void;
+    }>): void;
     attrs: any;
     slots: {
         [x: string]: ((props: {
             colKey: any;
             config: any;
-            style: string;
-            class: string;
+            style: {
+                width: any;
+            };
+            class: any;
         }) => any) | undefined;
     } & {
         [x: string]: ((props: {
-            class: string;
+            class: any;
+            style: {
+                width: any;
+            };
             item: any;
             value: any;
         }) => any) | undefined;

package/dist/runtime/directives/vResizableCols.js

@@ -1,6 +1,5 @@
 import { castType } from "@alanscodelog/utils/castType";
 import { override } from "@alanscodelog/utils/override";
-import { throttle } from "@alanscodelog/utils/throttle";
 import { unreachable } from "@alanscodelog/utils/unreachable";
 import { globalResizeObserver } from "../globalResizeObserver.js";
 const observer = globalResizeObserver;
@@ -11,38 +10,40 @@ const defaultOpts = {
   enabled: true
 };
 const callback = (_rect, el) => {
+  const $el = getElInfo(el);
+  if ($el.justResized) return;
   setColWidths(el);
-  positionGrips(el);
+  $el.justResized = true;
+  setTimeout(() => {
+    positionGrips(el);
+    $el.justResized = false;
+  }, 0);
 };
-const throttledCallback = throttle(callback);
 export const vResizableCols = {
   mounted(el, { value: opts = {} }) {
     const options = override({ ...defaultOpts }, opts);
     if (options.enabled) {
       setupColumns(el, options);
-      observer.observe(el, throttledCallback);
+      observer.observe(el, callback);
     }
   },
   updated(el, { value: opts = {} }) {
     const options = override({ ...defaultOpts }, opts);
-    const info = el && getElInfo(el);
-    const hasGrips = el && elMap.get(el).grips;
+    const info = el && options.enabled && getElInfo(el);
+    const hasGrips = el && options.enabled && elMap.get(el)?.grips;
     const colsNotEqual = info && info.colCount !== options.colCount;
-    if (hasGrips && !options.enabled || colsNotEqual) {
+    if (!options.enabled || colsNotEqual) {
       teardownColumns(el);
-      observer.unobserve(el, throttledCallback);
+      observer.unobserve(el, callback);
     }
     if (!hasGrips && options.enabled || colsNotEqual) {
       setupColumns(el, options);
-      observer.observe(el, throttledCallback);
+      observer.observe(el, callback);
     }
   },
   unmounted(el) {
-    const hasGrips = elMap.has(el) && elMap.get(el).grips;
-    if (hasGrips) {
-      teardownColumns(el);
-      globalResizeObserver.unobserve(el, throttledCallback);
-    }
+    teardownColumns(el);
+    globalResizeObserver.unobserve(el, callback);
   },
   getSSRProps() {
     return {};
@@ -88,7 +89,7 @@ function createPointerDownHandler(el) {
       e.preventDefault();
       document.addEventListener("pointerup", $el.pointerUpHandler);
       const { col, colNext } = getCols(el);
-      if (col === null || colNext === null) {
+      if (col === null || colNext === null && $el.fitWidth) {
         el.classList.add("resizable-cols-error");
       } else {
         document.addEventListener("pointermove", $el.pointerMoveHandler);
@@ -105,6 +106,7 @@ function createPointerMoveHandler(el) {
     const $el = getElInfo(el);
     if ($el.isDragging) {
       e.preventDefault();
+      $el.fluidWidthsAsPercentOfFluidWidth = void 0;
       const { col, colNext } = getCols(el);
       if (col !== null) {
         const leftBox = getBox(col);
@@ -131,7 +133,11 @@ function createPointerMoveHandler(el) {
             setWidth(col, newWidth, el);
           }
         }
-        positionGrips(el);
+        $el.justResized = true;
+        setTimeout(() => {
+          positionGrips(el);
+          $el.justResized = false;
+        }, 0);
       }
     }
   };
@@ -173,15 +179,15 @@ function getTestGripSize(el) {
   el.removeChild(testGrip);
   return dynamicMinWidth;
 }
-function getElInfo(el) {
+function getElInfo(el, { throwIfMissing = true } = {}) {
   const $el = elMap.get(el);
-  if (!$el) unreachable("El went missing.");
+  if (!$el && throwIfMissing) unreachable("El went missing.");
   return $el;
 }
 function getColEls(el) {
   const $el = elMap.get(el);
   if (!$el) unreachable("El went missing.");
-  return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > td"}`)];
+  return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > th, tr > td"}`)];
 }
 function setupColumns(el, opts) {
   const gripWidth = getTestGripSize(el);
@@ -196,7 +202,8 @@ function setupColumns(el, opts) {
     margin: opts.margin === "dynamic" ? gripWidth : opts.margin,
     colCount: opts.colCount,
     widths: opts.widths,
-    selector: opts.selector
+    selector: opts.selector,
+    onTeardown: opts.onTeardown
   };
   elMap.set(el, $el);
   const els = getColEls(el);
@@ -211,17 +218,22 @@ function setupColumns(el, opts) {
     el.appendChild(grip);
     $el.grips.set(grip, i);
   }
-  positionGrips(el);
-  el.classList.add("resizable-cols-setup");
+  $el.justResized = true;
+  setTimeout(() => {
+    positionGrips(el);
+    $el.justResized = false;
+    el.classList.add("resizable-cols-setup");
+    opts.onSetup?.(el);
+  }, 0);
 }
 function positionGrips(el) {
   let xPos = 0;
   const $el = getElInfo(el);
   for (const grip of $el.grips.keys()) {
     const col = $el.grips.get(grip);
-    const colEls = getColEls(el)[col];
-    if (!colEls) unreachable();
-    const colBox = getBox(colEls);
+    const colEl = getColEls(el)[col];
+    if (!colEl) unreachable();
+    const colBox = getBox(colEl);
     const gripBox = getBox(grip);
     grip.style.left = `${xPos + colBox.width - gripBox.width / 2}px`;
     xPos += colBox.width;
@@ -231,14 +243,71 @@ function setColWidths(el, children) {
   const $el = getElInfo(el);
   const header = children ?? getColEls(el).slice(0, $el.colCount);
   const len = $el.colCount;
+  const elWidth = getBox(el).width;
+  let fluidTotalPx = 0;
+  const fluid = {};
+  const doCalculateFixed = $el.fixedWidths === void 0;
+  const doCalculateFluid = $el.fluidWidthsAsPercentOfFluidWidth === void 0;
+  if (doCalculateFixed) {
+    $el.fixedWidths = { [-1]: 0 };
+  }
+  if (doCalculateFluid) {
+    $el.fluidWidthsAsPercentOfFluidWidth = {};
+  }
+  for (let i = 0; i < len; i++) {
+    const col = header[i];
+    castType(col);
+    if (col.classList.contains("no-resize")) {
+      if (doCalculateFixed) {
+        const w = getBox(col).width;
+        $el.fixedWidths[i] = w;
+        $el.fixedWidths[-1] += $el.fixedWidths[i];
+      }
+    } else {
+      if (doCalculateFluid) {
+        const w = getBox(col).width;
+        fluid[i] = w;
+        fluidTotalPx += w;
+      }
+    }
+  }
+  const totalFluidCount = len - Object.keys($el.fixedWidths).length;
+  if (doCalculateFluid) {
+    for (let i = 0; i < len; i++) {
+      if ($el.fixedWidths[i] !== void 0) continue;
+      $el.fluidWidthsAsPercentOfFluidWidth[i] = fluid[i] / fluidTotalPx;
+    }
+  }
+  const fixedTotalPx = $el.fixedWidths[-1];
+  const minFlexWidth = totalFluidCount * $el.margin;
+  const minTotalWidth = minFlexWidth + fixedTotalPx;
+  let leftOverFluidWidth = elWidth - fixedTotalPx;
+  if (leftOverFluidWidth < minFlexWidth) {
+    leftOverFluidWidth = minFlexWidth;
+  }
   let width = 0;
-  const minTotalWidth = len * $el.margin;
   for (let i = 0; i < len; i++) {
     const col = header[i];
     castType(col);
     const colBox = getBox(col);
-    setWidth(col, colBox.width, el);
-    width += getBox(col).width;
+    if ($el.fixedWidths[i] !== void 0) {
+      setWidth(col, $el.fixedWidths[i], el);
+      width += $el.fixedWidths[i];
+    } else {
+      if ($el.fitWidth) {
+        if (!$el.widths.value[i]) {
+          setWidth(col, colBox.width, el);
+          width += getBox(col).width;
+          continue;
+        }
+        const newInPx = $el.fluidWidthsAsPercentOfFluidWidth[i] * leftOverFluidWidth;
+        setWidth(col, newInPx, el);
+        width += getBox(col).width;
+      } else {
+        setWidth(col, colBox.width, el);
+        width += getBox(col).width;
+      }
+    }
   }
   if (width < minTotalWidth) {
     el.style.minWidth = `${minTotalWidth}px`;
@@ -247,14 +316,17 @@ function setColWidths(el, children) {
   }
 }
 function teardownColumns(el) {
-  const $el = getElInfo(el);
-  el.removeEventListener("pointerdown", $el.pointerDownHandler);
-  document.removeEventListener("pointermove", $el.pointerMoveHandler);
-  document.removeEventListener("pointerup", $el.pointerUpHandler);
-  for (const key of Object.keys($el)) {
-    delete $el[key];
+  const $el = getElInfo(el, { throwIfMissing: false });
+  if ($el) {
+    el.removeEventListener("pointerdown", $el.pointerDownHandler);
+    document.removeEventListener("pointermove", $el.pointerMoveHandler);
+    document.removeEventListener("pointerup", $el.pointerUpHandler);
+    for (const key of Object.keys($el)) {
+      delete $el[key];
+    }
+    $el.onTeardown?.(el);
+    elMap.delete(el);
   }
-  elMap.delete(el);
   el.classList.remove("resizable-cols-setup");
   removeGrips(el);
 }

package/dist/runtime/types/index.d.ts

@@ -2,9 +2,7 @@ import type { ErrorW } from "@alanscodelog/utils";
 import type { Ref } from "vue";
 export type ResizableOptions = {
     /**
-     * Defaults to true.
-     *
-     * ### true
+     * ### true (default)
      * The directive will shrink/expand the columns when the table is resized and will use percentage widths on the table cells. This disables resizing of the last column (from the right handle).
      *
      * Additionally because of the way `table-layout:fixed` works, a min-width cannot be set on the elements via css, so instead, if the table shrinks past `opts.margin * col #`, `min-width` is set on the table until it's resized larger.
@@ -16,6 +14,8 @@ export type ResizableOptions = {
      * The table can be resized past it's normal width and uses pixel widths on the table cells. You might want to set `overscroll-x: scroll` on a parent wrapping element.
      *
      * This will set the table width to `min-content`, else it doesn't work. Note that it does this after the initial reading/setting of sizes so you can, for example, layout the table with `width: 100%`.
+     *
+     * @default true
      */
     fitWidth: boolean;
     /**
@@ -42,6 +42,10 @@ export type ResizableOptions = {
     widths: Ref<string[]>;
     /** The selector to use for the cells. "tr > td" by default. */
     selector: string;
+    /** Is called just after the `resizable-cols-setup` class is added. Can be useful for controlling the styling of wrappers or doing additional things post-setup. The default table element uses it to set the class on the wrapper also. */
+    onSetup?: (el: Element) => void;
+    /** Is called on teardown (after the `resizable-cols-setup` class is removed). */
+    onTeardown?: (el: Element) => void;
 };
 export type TableColConfig<T = {}> = Record<keyof T, {
     name?: string;

package/dist/runtime/utils/twMerge.d.ts

@@ -5,6 +5,7 @@ export declare const twMergeExtend: {
             "focus-outline": {
                 "focus-outline": string[];
             }[];
+            "no-truncate": string[];
         };
     };
 };

package/dist/runtime/utils/twMerge.js

@@ -2,7 +2,8 @@ import { extendTailwindMerge } from "tailwind-merge";
 const _twMergeExtend = {
   extend: {
     classGroups: {
-      "focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }]
+      "focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }],
+      "no-truncate": ["truncate", "no-truncate"]
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -89,6 +89,7 @@
     "@chromatic-com/storybook": "^3.2.7",
     "@commitlint/cli": "^19.8.1",
     "@internationalized/date": "^3.9.0",
+    "@faker-js/faker": "^10.0.0",
     "@nuxt/eslint-config": "^1.9.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxtjs/i18n": "^9.5.6",
@@ -106,6 +107,7 @@
     "@storybook/test-runner": "^0.22.1",
     "@storybook/vue3": "^8.6.14",
     "@storybook/vue3-vite": "^8.6.14",
+    "@tanstack/vue-virtual": "^3.13.0",
     "@tailwindcss/cli": "^4.1.12",
     "@tailwindcss/postcss": "^4.1.12",
     "@types/node": "^24.3.0",
@@ -176,7 +178,7 @@
     "storybook": "BROWSER=none storybook dev -p 6006",
     "storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
     "storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
-    "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
+    "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --excludeTags 'skip-smoke-test'\"",
     "test": "pnpm storybook:test && pnpm lint:types",
     "test:dev": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --watch\"",
     "doc": "pnpm test && pnpm storybook:build",

package/src/module.ts

@@ -177,7 +177,9 @@ export default defineNuxtModule<ModuleOptions>({
 		nuxt.hook("vite:extendConfig", async config => {
 			if (options.includeUnpluginIconsPlugins) {
 				logger.info(`Adding unplugin-icons`)
+				// @ts-expect-error .
 				config.plugins ??= []
+				// @ts-expect-error .
 				config.plugins = [
 					...(
 						options.includeUnpluginIconsPlugins
@@ -199,6 +201,7 @@ export default defineNuxtModule<ModuleOptions>({
 					tailwindcss() as any,
 					...config.plugins
 				]
+				// @ts-expect-error .
 				config.optimizeDeps ??= {}
 				config.optimizeDeps.exclude ??= []
 				config.optimizeDeps.exclude.push("~icons")

package/src/runtime/assets/utils.css

@@ -224,3 +224,8 @@
 	@apply cursor-pointer hover:text-accent-500;
 }
 
+@utility no-truncate {
+	text-overflow: unset;
+	overflow: visible;
+	white-space: normal;
+}