@witchcraft/ui 0.4.0 → 0.4.2

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

@@ -1,20 +1,20 @@
-export { default as aria } from "./Aria/Aria.vue";
-export { default as LibButton } from "./LibButton/LibButton.vue";
-export { default as LibCheckbox } from "./LibCheckbox/LibCheckbox.vue";
-export { default as LibColorInput } from "./LibColorInput/LibColorInput.vue";
-export { default as LibColorPicker } from "./LibColorPicker/LibColorPicker.vue";
-export { default as LibDarkModeSwitcher } from "./LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
-export { default as LibDatePicker } from "./LibDatePicker/LibDatePicker.vue";
-export { default as LibDebug } from "./LibDebug/LibDebug.vue";
-export { default as LibFileInput } from "./LibFileInput/LibFileInput.vue";
-export { default as LibInputDeprecated } from "./LibInputDeprecated/LibInputDeprecated.vue";
-export { default as LibLabel } from "./LibLabel/LibLabel.vue";
-export { default as LibNotifications } from "./LibNotifications/LibNotifications.vue";
-export { default as LibPagination } from "./LibPagination/LibPagination.vue";
-export { default as LibPopup } from "./LibPopup/LibPopup.vue";
-export { default as LibProgressBar } from "./LibProgressBar/LibProgressBar.vue";
-export { default as LibRecorder } from "./LibRecorder/LibRecorder.vue";
-export { default as LibRoot } from "./LibRoot/LibRoot.vue";
-export { default as LibSimpleInput } from "./LibSimpleInput/LibSimpleInput.vue";
-export { default as LibTable } from "./LibTable/LibTable.vue";
-export { default as LibTimeZonePicker } from "./LibDatePicker/LibTimeZonePicker.vue";
+export { default as WButton } from "./WButton/WButton.vue";
+export { default as WCheckbox } from "./WCheckbox/WCheckbox.vue";
+export { default as WColorInput } from "./WColorInput/WColorInput.vue";
+export { default as WColorPicker } from "./WColorPicker/WColorPicker.vue";
+export { default as WCombobox } from "./WCombobox/WCombobox.vue";
+export { default as WDarkModeSwitcher } from "./WDarkModeSwitcher/WDarkModeSwitcher.vue";
+export { default as WDatePicker } from "./WDatePicker/WDatePicker.vue";
+export { default as WDebug } from "./WDebug/WDebug.vue";
+export { default as WFileInput } from "./WFileInput/WFileInput.vue";
+export { default as WNotifications } from "./WNotifications/WNotifications.vue";
+export { default as WPagination } from "./WPagination/WPagination.vue";
+export { default as WPopup } from "./WPopup/WPopup.vue";
+export { default as WPopover } from "./WPopover/WPopover.vue";
+export { default as WProgressBar } from "./WProgressBar/WProgressBar.vue";
+export { default as WRecorder } from "./WRecorder/WRecorder.vue";
+export { default as WRoot } from "./WRoot/WRoot.vue";
+export { default as WSimpleInput } from "./WSimpleInput/WSimpleInput.vue";
+export { default as WTable } from "./WTable/WTable.vue";
+export { default as WTimeZonePicker } from "./WDatePicker/WTimeZonePicker.vue";
+export { default as WTooltip } from "./WTooltip/WTooltip.vue";

package/dist/runtime/components/index.js

@@ -1,20 +1,20 @@
-export { default as aria } from "./Aria/Aria.vue";
-export { default as LibButton } from "./LibButton/LibButton.vue";
-export { default as LibCheckbox } from "./LibCheckbox/LibCheckbox.vue";
-export { default as LibColorInput } from "./LibColorInput/LibColorInput.vue";
-export { default as LibColorPicker } from "./LibColorPicker/LibColorPicker.vue";
-export { default as LibDarkModeSwitcher } from "./LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
-export { default as LibDatePicker } from "./LibDatePicker/LibDatePicker.vue";
-export { default as LibDebug } from "./LibDebug/LibDebug.vue";
-export { default as LibFileInput } from "./LibFileInput/LibFileInput.vue";
-export { default as LibInputDeprecated } from "./LibInputDeprecated/LibInputDeprecated.vue";
-export { default as LibLabel } from "./LibLabel/LibLabel.vue";
-export { default as LibNotifications } from "./LibNotifications/LibNotifications.vue";
-export { default as LibPagination } from "./LibPagination/LibPagination.vue";
-export { default as LibPopup } from "./LibPopup/LibPopup.vue";
-export { default as LibProgressBar } from "./LibProgressBar/LibProgressBar.vue";
-export { default as LibRecorder } from "./LibRecorder/LibRecorder.vue";
-export { default as LibRoot } from "./LibRoot/LibRoot.vue";
-export { default as LibSimpleInput } from "./LibSimpleInput/LibSimpleInput.vue";
-export { default as LibTable } from "./LibTable/LibTable.vue";
-export { default as LibTimeZonePicker } from "./LibDatePicker/LibTimeZonePicker.vue";
+export { default as WButton } from "./WButton/WButton.vue";
+export { default as WCheckbox } from "./WCheckbox/WCheckbox.vue";
+export { default as WColorInput } from "./WColorInput/WColorInput.vue";
+export { default as WColorPicker } from "./WColorPicker/WColorPicker.vue";
+export { default as WCombobox } from "./WCombobox/WCombobox.vue";
+export { default as WDarkModeSwitcher } from "./WDarkModeSwitcher/WDarkModeSwitcher.vue";
+export { default as WDatePicker } from "./WDatePicker/WDatePicker.vue";
+export { default as WDebug } from "./WDebug/WDebug.vue";
+export { default as WFileInput } from "./WFileInput/WFileInput.vue";
+export { default as WNotifications } from "./WNotifications/WNotifications.vue";
+export { default as WPagination } from "./WPagination/WPagination.vue";
+export { default as WPopup } from "./WPopup/WPopup.vue";
+export { default as WPopover } from "./WPopover/WPopover.vue";
+export { default as WProgressBar } from "./WProgressBar/WProgressBar.vue";
+export { default as WRecorder } from "./WRecorder/WRecorder.vue";
+export { default as WRoot } from "./WRoot/WRoot.vue";
+export { default as WSimpleInput } from "./WSimpleInput/WSimpleInput.vue";
+export { default as WTable } from "./WTable/WTable.vue";
+export { default as WTimeZonePicker } from "./WDatePicker/WTimeZonePicker.vue";
+export { default as WTooltip } from "./WTooltip/WTooltip.vue";

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

@@ -1,17 +1,17 @@
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js";
-export { useAriaLabel } from "./useAriaLabel.js";
-export { useDarkMode } from "./useDarkMode.js";
-export { useDivideAttrs } from "./useDivideAttrs.js";
+export { useDelayedLoadingIndicator } from "./useDelayedLoadingIndicator.js";
 export { useDragWithThreshold } from "./useDragWithThreshold.js";
+export { useFallbackId } from "./useFallbackId.js";
 export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js";
 export { useInjectedDarkMode } from "./useInjectedDarkMode.js";
 export { useInjectedI18n } from "./useInjectedI18n.js";
 export { useInjectedLocale } from "./useInjectedLocale.js";
 export { useNotificationHandler } from "./useNotificationHandler.js";
+export { usePopupConstrainToStyle } from "./usePopupConstrainToStyle.js";
 export { usePreHydrationValue } from "./usePreHydrationValue.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js";
 export { useSetupLocale } from "./useSetupLocale.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
 export { useSlotVars } from "./useSlotVars.js";
-export { useSuggestions } from "./useSuggestions.js";
+export { useTimeConditionally } from "./useTimeConditionally.js";

package/dist/runtime/composables/index.js

@@ -1,17 +1,17 @@
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js";
-export { useAriaLabel } from "./useAriaLabel.js";
-export { useDarkMode } from "./useDarkMode.js";
-export { useDivideAttrs } from "./useDivideAttrs.js";
+export { useDelayedLoadingIndicator } from "./useDelayedLoadingIndicator.js";
 export { useDragWithThreshold } from "./useDragWithThreshold.js";
+export { useFallbackId } from "./useFallbackId.js";
 export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js";
 export { useInjectedDarkMode } from "./useInjectedDarkMode.js";
 export { useInjectedI18n } from "./useInjectedI18n.js";
 export { useInjectedLocale } from "./useInjectedLocale.js";
 export { useNotificationHandler } from "./useNotificationHandler.js";
+export { usePopupConstrainToStyle } from "./usePopupConstrainToStyle.js";
 export { usePreHydrationValue } from "./usePreHydrationValue.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js";
 export { useSetupLocale } from "./useSetupLocale.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
 export { useSlotVars } from "./useSlotVars.js";
-export { useSuggestions } from "./useSuggestions.js";
+export { useTimeConditionally } from "./useTimeConditionally.js";

package/dist/runtime/composables/useDelayedLoadingIndicator.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from "vue";
+/**
+ * For async operations sometimes it actually loads so fast the loading indicator is not visible but we still want it to be briefly visible. This delays the setting of the returned ref to false by the given timeout so it at least flashes onscreen.
+ *
+ * Setting to true is not delayed.
+ *
+ * If the indicator is set to true while the timeout is still running, it's canceled.
+ */
+export declare function useDelayedLoadingIndicator(loading: Ref<boolean>, timeout?: number): Ref<boolean, boolean>;

package/dist/runtime/composables/useDelayedLoadingIndicator.js

@@ -0,0 +1,18 @@
+import { ref, watch } from "vue";
+export function useDelayedLoadingIndicator(loading, timeout = 200) {
+  const showLoadingIndicator = ref(false);
+  let loadingTimeout;
+  watch(loading, (newVal) => {
+    clearTimeout(loadingTimeout);
+    if (newVal === true) {
+      showLoadingIndicator.value = true;
+    } else {
+      loadingTimeout = setTimeout(() => {
+        if (loading.value === false) {
+          showLoadingIndicator.value = false;
+        }
+      }, timeout);
+    }
+  });
+  return showLoadingIndicator;
+}

package/dist/runtime/composables/useDisplayForReka.d.ts

@@ -0,0 +1,25 @@
+import type { AcceptableValue, ComboboxRootProps } from "reka-ui";
+export type SuggestionsDisplayProps<T extends NonNullable<AcceptableValue>> = {
+    displayKey?: string;
+    /**
+     * Override's reka-ui's displayValue.
+     *
+     * Prefer displayKey or displayEntry if possible as it's easier to type and requires less code.
+     *
+     * It's passed a special options object with a `isForEmit` boolean that tells you whether the value will be used for emits or just visually/search. This is useful to v-model an id when suggestions are objects.
+     */
+    displayValue?: (value: T | T[], options?: {
+        isForEmit?: boolean;
+    }) => string;
+    /**
+     * When displayKey is not enough, prefer this over displayValue as it takes care of extracting the entry (from the array/object/value).
+     *
+     * The component uses this to filter out the suggestions. In some rare cases you might want to display a different label than the one filtered on (e.g. for example, to indicate some suggestion is active), in these cases, the function will be called with the visualOnly option set to true. This applies only to the visual suggestion in the suggestion list.
+     */
+    displayEntry?: (value: T, options: {
+        isForEmit?: boolean;
+    }) => string;
+};
+export declare function useDisplayForReka<T extends NonNullable<ComboboxRootProps["modelValue"]>>(props: SuggestionsDisplayProps<T>): (value: T, options?: {
+    isForEmit?: boolean;
+}) => string;

package/dist/runtime/composables/useDisplayForReka.js

@@ -0,0 +1,16 @@
+export function useDisplayForReka(props) {
+  const display = props.displayValue ?? function(value, options = {}) {
+    if (Array.isArray(value)) {
+      return value.map((v) => {
+        const val = v[props.displayKey];
+        return props.displayEntry?.(val, options) ?? val;
+      }).filter((v) => v !== "").join(", ");
+    } else if (typeof value === "object") {
+      return props.displayEntry?.(value, options) ?? value[props.displayKey];
+    } else {
+      if (value === "" && !options.isForEmit) return "";
+      return props.displayEntry?.(value, options) ?? value;
+    }
+  };
+  return display;
+}

package/dist/runtime/composables/useFallbackId.d.ts

@@ -0,0 +1,3 @@
+export declare function useFallbackId(props: {
+    id?: string;
+}): string;

package/dist/runtime/composables/useFallbackId.js

@@ -0,0 +1,5 @@
+import { useId } from "vue";
+export function useFallbackId(props) {
+  const fallbackId = props.id ?? useId();
+  return fallbackId;
+}

package/dist/runtime/composables/useInjectedDarkMode.d.ts

@@ -1,2 +1,2 @@
-import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js";
+import type { DarkModeCommands, DarkModeState } from "../types/index.js";
 export declare function useInjectedDarkMode(): DarkModeState & DarkModeCommands;

package/dist/runtime/composables/usePopupConstrainToStyle.d.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef, StyleValue } from "vue";
+import type { PopupConstrainToProps } from "../types/index.js";
+/**
+ * Mostly internal, create the computed style with maxWidth/Height based on the constrain*To props.
+ *
+ * @internal
+ */
+export declare function usePopupConstrainToStyle(rekaName: string, props: PopupConstrainToProps, attrsStyle?: StyleValue[]): ComputedRef<StyleValue[]>;

package/dist/runtime/composables/usePopupConstrainToStyle.js

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+export function usePopupConstrainToStyle(rekaName, props, attrsStyle) {
+  const contentStyle = computed(() => [{
+    maxWidth: props.constrainWidthTo === "trigger" ? `var(--reka-${rekaName}-trigger-width)` : props.constrainWidthTo === "available" ? `var(--reka-${rekaName}-content-available-width)` : typeof props.constrainWidthTo === "number" ? `${props.constrainWidthTo}px` : props.constrainWidthTo ?? void 0,
+    maxHeight: props.constrainHeightTo === "trigger" ? `var(--reka-${rekaName}-trigger-height)` : props.constrainHeightTo === "available" ? `var(--reka-${rekaName}-content-available-height)` : typeof props.constrainHeightTo === "number" ? `${props.constrainHeightTo}px` : props.constrainHeightTo ?? void 0
+  }, ...attrsStyle ?? []]);
+  return contentStyle;
+}

package/dist/runtime/composables/useSetupDarkMode.d.ts

@@ -1,4 +1,4 @@
-import { useDarkMode } from "./useDarkMode.js";
+import type { DarkModeCommands, DarkModeOptions, DarkModeState } from "../types/index.js";
 /**
  * A composable for setting up dark mode that automatically takes care of saving the user's preference.
  *
@@ -7,6 +7,5 @@ import { useDarkMode } from "./useDarkMode.js";
  * Use it's twin, `useInjectedDarkMode` for accessing the injected state and commands in components
  *
  * Note that this should only be called once at the root of the app.
- *
  */
-export declare function useSetupDarkMode(...args: Parameters<typeof useDarkMode>): ReturnType<typeof useDarkMode>;
+export declare const useSetupDarkMode: ({ useLocalStorage, darkModeOrder, isClientSide, useViewTransition }?: DarkModeOptions) => DarkModeState & DarkModeCommands;

package/dist/runtime/composables/useSetupDarkMode.js

@@ -1,4 +1,90 @@
-import { useDarkMode } from "./useDarkMode.js";
-export function useSetupDarkMode(...args) {
-  return useDarkMode(...args);
-}
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js";
+import { defaultDarkModeOrder } from "../types/index.js";
+const isDarkModeInjectionKey = Symbol("isDarkMode");
+const manualDarkModeInjectionKey = Symbol("manualDarkMode");
+const defaultLocalStorageKey = "prefersColorSchemeDark";
+export const useSetupDarkMode = ({
+  useLocalStorage = true,
+  darkModeOrder = defaultDarkModeOrder,
+  isClientSide = true,
+  useViewTransition = true
+} = {}) => {
+  const systemDarkMode = ref(false);
+  const manualDarkMode = ref(void 0);
+  if (useLocalStorage && isClientSide) {
+    watch(manualDarkMode, () => {
+      localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false");
+    });
+  }
+  const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value);
+  const darkModeState = computed(
+    () => manualDarkMode.value === void 0 ? "system" : manualDarkMode.value ? "dark" : "light"
+  );
+  function setDarkMode(value) {
+    manualDarkMode.value = value === "dark" ? true : value === "light" ? false : void 0;
+  }
+  function getNextValue() {
+    const index = darkModeOrder.indexOf(darkModeState.value);
+    return index === 2 ? darkModeOrder[0] : darkModeOrder[index + 1];
+  }
+  function _cycleDarkMode() {
+    setDarkMode(getNextValue());
+  }
+  function cycleDarkMode() {
+    if (!useViewTransition) {
+      _cycleDarkMode();
+      return;
+    }
+    const nextValue = getNextValue();
+    const index = darkModeOrder.indexOf(darkModeState.value);
+    const systemDarkModeName = systemDarkMode.value ? "dark" : "light";
+    if (nextValue === "system" && systemDarkModeName === darkModeOrder[index]) {
+      _cycleDarkMode();
+      return;
+    }
+    if (!document.startViewTransition) _cycleDarkMode();
+    document.startViewTransition(async () => {
+      _cycleDarkMode();
+      await nextTick();
+    });
+  }
+  onMounted(() => {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
+      if (matches) {
+        systemDarkMode.value = true;
+      } else {
+        systemDarkMode.value = false;
+      }
+    });
+    if (useLocalStorage !== false) {
+      const key = typeof useLocalStorage === "string" ? useLocalStorage : defaultLocalStorageKey;
+      const value = localStorage.getItem(key);
+      if (value === "true") {
+        manualDarkMode.value = true;
+      } else if (value === "false") {
+        manualDarkMode.value = false;
+      }
+    }
+  });
+  provide(isDarkModeInjectionKey, darkMode);
+  provide(manualDarkModeInjectionKey, manualDarkMode);
+  provide(darkModeStateInjectionKey, {
+    darkMode,
+    darkModeState,
+    manualDarkMode,
+    systemDarkMode
+  });
+  provide(darkModeCommandsInjectionKey, {
+    setDarkMode,
+    cycleDarkMode
+  });
+  return {
+    darkMode,
+    darkModeState,
+    setDarkMode,
+    cycleDarkMode,
+    manualDarkMode,
+    systemDarkMode
+  };
+};

package/dist/runtime/composables/useTimeConditionally.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from "vue";
+/**
+ * Returns a ref with the current time if the given value ref is true or it's an array with 1 or more items.. It will update the time every 50ms (configurable) if so (within a requestAnimationFrame).
+ *
+ * When the value is anything else it will clear the interval and set the time to undefined.
+ *
+ * Useful for use with a progress bar.
+ *
+ * Updating the time all the time is expensive and not idea. This way we only set the interval if we really need it.
+ */
+export declare function useTimeConditionally(val: Ref<any[] | boolean | any>, { refreshInterval }?: {
+    refreshInterval?: number;
+}): {
+    time: Ref<undefined | number>;
+    refresh: () => void;
+};

package/dist/runtime/composables/useTimeConditionally.js

@@ -0,0 +1,27 @@
+import { ref, watch } from "vue";
+export function useTimeConditionally(val, {
+  refreshInterval = 50
+} = {}) {
+  const time = ref(void 0);
+  let interval;
+  function refresh(v = val.value) {
+    if (v === true || Array.isArray(v) && v.length > 0) {
+      if (interval !== void 0) return;
+      time.value = Date.now();
+      interval = setInterval(() => {
+        requestAnimationFrame(() => {
+          time.value = Date.now();
+        });
+      }, refreshInterval);
+    } else {
+      if (interval === void 0) return;
+      clearInterval(interval);
+      interval = void 0;
+    }
+  }
+  watch(val, (val2) => {
+    refresh(val2);
+  });
+  refresh();
+  return { time, refresh };
+}

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;
@@ -14,35 +13,31 @@ const callback = (_rect, el) => {
   setColWidths(el);
   positionGrips(el);
 };
-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, { throwIfMissing: false });
+    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 {};
@@ -53,7 +48,11 @@ function setWidth(col, amountInPx, el) {
   const width = Math.max($el.margin, amountInPx);
   const index = getColEls(el).findIndex((_) => col === _);
   if ($el.fitWidth) {
-    $el.widths.value[index] = `${width / getBox(el).width * 100}%`;
+    if (amountInPx <= $el.margin) {
+      $el.widths.value[index] = `${$el.margin}px`;
+    } else {
+      $el.widths.value[index] = `${width / getBox(el).width * 100}%`;
+    }
   } else {
     $el.widths.value[index] = `${width}px`;
   }
@@ -85,10 +84,11 @@ function createPointerDownHandler(el) {
       castType(e.target);
       $el.target = e.target;
       $el.isDragging = true;
+      el.classList.add("dragging");
       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 +105,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);
@@ -139,9 +140,11 @@ function createPointerMoveHandler(el) {
 function createPointerUpHandler(el) {
   return (e) => {
     const $el = getElInfo(el);
+    $el.pointerMoveHandler(e);
     if ($el.isDragging) {
       e.preventDefault();
       $el.isDragging = false;
+      el.classList.remove("dragging");
       el.classList.remove("resizable-cols-error");
       $el.offset = 0;
       delete $el.target;
@@ -173,15 +176,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 ?? "tr > th"}`)];
 }
 function setupColumns(el, opts) {
   const gripWidth = getTestGripSize(el);
@@ -196,11 +199,14 @@ 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);
-  const headers = els.slice(0, opts.colCount);
+  const headers = getColEls(el);
+  if (headers.length !== opts.colCount) {
+    throw new Error(`Number of headers matched using selector ${opts.selector ?? "tr > th"} does not match number of columns.`);
+  }
   setColWidths(el, headers);
   el.style.width = $el.fitWidth ? "" : "min-content";
   const len = opts.colCount;
@@ -213,15 +219,16 @@ function setupColumns(el, opts) {
   }
   positionGrips(el);
   el.classList.add("resizable-cols-setup");
+  opts.onSetup?.(el);
 }
 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 +238,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) {
+      $el.widths.value[i] = `${$el.fixedWidths[i]}px`;
+      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 +311,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);
 }