@witchcraft/ui 0.3.18 → 0.3.20

package/dist/module.json

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

package/dist/runtime/assets/animations.css

@@ -1 +1 @@
-@theme{--animate-blinkInf:blink 1s linear-infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideIn:slideIn 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}
+@utility animate-from-*{--animate-from:--value([length,percentage]);--animate-from:calc(var(--spacing) * --value(integer))}@utility -animate-from-*{--animate-from:--value([length,percentage]);--animate-from:calc(var(--spacing) * -1 * --value(integer))}@theme{--animate-blinkInf:blink 1s linear-infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideInLeft:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInLeft{0%{opacity:0;transform:translateX(var(--animate-from,100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInRight:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInRight{0%{opacity:0;transform:translateX(var(--animate-from,-100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInUp:slideInUp 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInUp{0%{opacity:0;transform:translateY(var(--animate-from,100%))}to{opacity:1;transform:translateY(0)}}--animate-slideInDown:slideInDown 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInDown{0%{opacity:0;transform:translateY(var(--animate-from,-100%))}to{opacity:1;transform:translateY(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.vue

@@ -209,10 +209,14 @@ const locale = useInjectedLocale().timeLocale;
 			dark:border-neutral-700
 			shadow-lg
 			will-change-[transform,opacity]
-			data-[state=open]:data-[side=top]:animate-slideDownAndFade
-			data-[state=open]:data-[side=right]:animate-slideLeftAndFade
-			data-[state=open]:data-[side=bottom]:animate-slideUpAndFade
-			data-[state=open]:data-[side=left]:animate-slideRightAndFade
+			data-[side=top]:animate-from-3
+			data-[side=left]:animate-from-3
+			data-[side=right]:-animate-from-3
+			data-[side=bottom]:-animate-from-3
+			data-[state=open]:data-[side=top]:animate-slideInUp
+			data-[state=open]:data-[side=right]:animate-slideInRight
+			data-[state=open]:data-[side=bottom]:animate-slideInDown
+			data-[state=open]:data-[side=left]:animate-slideInLeft
 			text-fg
 			dark:text-neutral-200
 		"

package/dist/runtime/components/LibNotifications/LibNotification.vue

@@ -4,7 +4,6 @@
 	:class="twMerge(
   `
 		notification
-		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
 		text-fg
@@ -65,7 +64,7 @@
 			</div>
 		</slot>
 		<div class="notification--spacer flex-1"/>
-		<div class="actions flex">
+		<div class="notification--actions flex">
 			<LibButton
 				:border="false"
 				class="
@@ -203,6 +202,7 @@ onMounted(() => {
         if (props.notification.isPaused) return;
         emit("pause", props.notification);
       } else {
+        if (!props.notification.isPaused) return;
         emit("resume", props.notification);
       }
     }, { signal: mousedownAbortController.signal });

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

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & {
     /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
     handler?: NotificationHandler;
+    progressUpdateInterval?: number;
 };
 interface Props extends 
 /** @vue-ignore */

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -5,17 +5,16 @@
 	tag="div"
 	:class="twMerge(`
 		notifications
-		[--notification-width:300px]
+		[--notification-width:calc(100dvw-var(--spacing)*4)]
+		sm:[--notification-width:300px]
 		fixed
 		top-0
 		z-50
 		right-[calc(var(--notification-width)*-1)]
 		w-[calc(var(--spacing)*2+var(--notification-width)*2)]
-		[&_.notification]:w-[var(--notification-width)]
 		max-h-[100dvh]
 		flex
 		flex-col
-		[&_.notification]:shrink-0
 		gap-1
 		list-none
 		outline-none
@@ -29,7 +28,16 @@
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2 max-h-[25dvh] min-h-[300px]"
+		class="
+			overflow-hidden
+			my-2
+			max-h-[300px]
+			w-[var(--notification-width)]
+			shrink-0
+			max-sm:[&_.notification--button]:p-2
+			max-sm:[&_.notification--button]:py-1
+			max-sm:[&_.notification--header]:text-lg
+		"
 		v-for="notification of notifications"
 		:key="notification.id"
 		@pause="handler.pause(notification)"
@@ -46,7 +54,7 @@
 					-mx-[calc(var(--spacing)*2+2px)]
 					rounded-none
 				"
-				:progress="100 - (notification.isPaused ? notification._timer.elapsedBeforePause : notification._timer.elapsedBeforePause + (time - notification.startTime)) / notification.timeout * 100"
+				:progress="calculateNotificationProgress(notification, time)"
 			/>
 		</template>
 	</lib-notification>
@@ -67,19 +75,27 @@
 		<AlertDialogContent
 			class="
 				data-[state=open]:animate-contentShow
+				max-sm:data-[state=open]:animate-slideInUp
 				fixed
 				flex
+				max-h-[80dvh]
 				top-[50%]
 				left-[50%]
-				translate-x-[-50%]
-				translate-y-[-50%]
-				max-h-[80dvh]
+				sm:translate-x-[-50%]
+				sm:translate-y-[-50%]
 				max-w-[700px]
+				max-sm:bottom-2
+				max-sm:top-[unset]
+				max-sm:left-2
+				max-sm:right-2
+				max-sm:w-[calc(100%-var(--spacing)*4)]
 				z-100
 			"
 		>
 			<lib-notification
 				class="
+					w-full
+					sm:max-w-[700px]
 					max-w-full
 					max-h-full
 					top-notification
@@ -120,9 +136,11 @@ import {
   AlertDialogRoot,
   AlertDialogTitle
 } from "reka-ui";
-import { computed, ref } from "vue";
+import { computed } from "vue";
+import { calculateNotificationProgress } from "./calculateNotificationProgress.js";
 import LibNotification from "./LibNotification.vue";
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
+import { useTimeConditionally } from "../../composables/useTimeConditionally.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
 import LibProgressBar from "../LibProgressBar/LibProgressBar.vue";
@@ -132,17 +150,16 @@ defineOptions({
 });
 const props = defineProps({
   id: { type: String, required: false },
-  handler: { type: Object, required: false }
+  handler: { type: Object, required: false },
+  progressUpdateInterval: { type: Number, required: false }
 });
+const handler = props.handler ?? useNotificationHandler();
 const topNotifications = computed(() => handler.queue.filter((entry) => entry.requiresAction).reverse());
 const notifications = computed(() => handler.queue.filter((entry) => !entry.requiresAction));
-const time = ref(Date.now());
-setInterval(() => {
-  requestAnimationFrame(() => {
-    time.value = Date.now();
-  });
-}, 50);
-const handler = props.handler ?? useNotificationHandler();
+const fetchTime = computed(() => {
+  return notifications.value.filter((entry) => entry.timeout !== void 0 && !entry.isPaused).length > 0;
+});
+const { time } = useTimeConditionally(fetchTime, { refreshInterval: props.progressUpdateInterval });
 </script>
 
 <script>

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

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & {
     /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
     handler?: NotificationHandler;
+    progressUpdateInterval?: number;
 };
 interface Props extends 
 /** @vue-ignore */

package/dist/runtime/components/LibNotifications/calculateNotificationProgress.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationEntry } from "../../helpers/NotificationHandler.js";
+export declare function calculateNotificationProgress(notification: NotificationEntry, time: number): number;

package/dist/runtime/components/LibNotifications/calculateNotificationProgress.js

@@ -0,0 +1,4 @@
+export function calculateNotificationProgress(notification, time) {
+  if (notification.timeout === void 0) return 0;
+  return 100 - (notification.isPaused ? notification._timer.elapsedBeforePause : notification._timer.elapsedBeforePause + (time - notification.startTime)) / notification.timeout * 100;
+}

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

@@ -11,6 +11,7 @@ type RealProps = {
     rounded?: boolean;
     border?: boolean;
     cellBorder?: boolean;
+    /** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
     header?: boolean;
     colConfig?: TableColConfig<T>;
     /**

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

@@ -51,7 +51,7 @@
   mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
 		relative
 		`,
-  $attrs.wrapperClass
+  $attrs['wrapper-class']
 )"
 	ref="parentRef"
 >
@@ -240,7 +240,7 @@ const isPostSetup = ref(false);
 const resizableOptions = computed(() => ({
   colCount: props.cols.length,
   widths,
-  selector: ".cell",
+  selector: props.header ? void 0 : `tr:first-child > td`,
   ...props.resizable,
   onSetup: (el) => {
     isPostSetup.value = true;

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

@@ -11,6 +11,7 @@ type RealProps = {
     rounded?: boolean;
     border?: boolean;
     cellBorder?: boolean;
+    /** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
     header?: boolean;
     colConfig?: TableColConfig<T>;
     /**

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

@@ -10,14 +10,8 @@ const defaultOpts = {
   enabled: true
 };
 const callback = (_rect, el) => {
-  const $el = getElInfo(el);
-  if ($el.justResized) return;
   setColWidths(el);
-  $el.justResized = true;
-  setTimeout(() => {
-    positionGrips(el);
-    $el.justResized = false;
-  }, 0);
+  positionGrips(el);
 };
 export const vResizableCols = {
   mounted(el, { value: opts = {} }) {
@@ -29,7 +23,7 @@ export const vResizableCols = {
   },
   updated(el, { value: opts = {} }) {
     const options = override({ ...defaultOpts }, opts);
-    const info = el && options.enabled && getElInfo(el);
+    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 (!options.enabled || colsNotEqual) {
@@ -54,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`;
   }
@@ -86,6 +84,7 @@ 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);
@@ -133,11 +132,7 @@ function createPointerMoveHandler(el) {
             setWidth(col, newWidth, el);
           }
         }
-        $el.justResized = true;
-        setTimeout(() => {
-          positionGrips(el);
-          $el.justResized = false;
-        }, 0);
+        positionGrips(el);
       }
     }
   };
@@ -145,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;
@@ -187,7 +184,7 @@ function getElInfo(el, { throwIfMissing = true } = {}) {
 function getColEls(el) {
   const $el = elMap.get(el);
   if (!$el) unreachable("El went missing.");
-  return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > th, tr > td"}`)];
+  return [...el.querySelectorAll(`:scope ${$el.selector ?? "tr > th"}`)];
 }
 function setupColumns(el, opts) {
   const gripWidth = getTestGripSize(el);
@@ -206,8 +203,10 @@ function setupColumns(el, opts) {
     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;
@@ -218,13 +217,9 @@ function setupColumns(el, opts) {
     el.appendChild(grip);
     $el.grips.set(grip, i);
   }
-  $el.justResized = true;
-  setTimeout(() => {
-    positionGrips(el);
-    $el.justResized = false;
-    el.classList.add("resizable-cols-setup");
-    opts.onSetup?.(el);
-  }, 0);
+  positionGrips(el);
+  el.classList.add("resizable-cols-setup");
+  opts.onSetup?.(el);
 }
 function positionGrips(el) {
   let xPos = 0;
@@ -291,7 +286,7 @@ function setColWidths(el, children) {
     castType(col);
     const colBox = getBox(col);
     if ($el.fixedWidths[i] !== void 0) {
-      setWidth(col, $el.fixedWidths[i], el);
+      $el.widths.value[i] = `${$el.fixedWidths[i]}px`;
       width += $el.fixedWidths[i];
     } else {
       if ($el.fitWidth) {

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

@@ -40,7 +40,7 @@ export type ResizableOptions = {
      * It can then be used as needed by the component.
      */
     widths: Ref<string[]>;
-    /** The selector to use for the cells. "tr > td" by default. */
+    /** The selector to use for the header cells. "tr > th" 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;

package/package.json

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

package/src/runtime/assets/animations.css

@@ -1,3 +1,13 @@
+@utility animate-from-* {
+	--animate-from: --value([length, percentage]);
+	--animate-from: calc(var(--spacing) * --value(integer));
+}
+
+@utility -animate-from-* {
+	--animate-from: --value([length, percentage]);
+	--animate-from: calc(var(--spacing) * -1 * --value(integer));
+}
+
 @theme {
 	--animate-blinkInf: blink 1s linear-infinite;
 	@keyframes blink {
@@ -38,10 +48,10 @@
 		}
 	}
 
-	--animate-slideIn: slideIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
-	@keyframes slideIn {
+	--animate-slideInLeft: slideInLeft 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInLeft {
 		from {
-			transform: translateX(100%);
+			transform: translateX(var(--animate-from, 100%));
 			opacity: 0;
 		}
 		to {
@@ -50,6 +60,43 @@
 		}
 	}
 
+	--animate-slideInRight: slideInLeft 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInRight {
+		from {
+			transform: translateX(var(--animate-from, -100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-slideInUp: slideInUp 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInUp {
+		from {
+			transform: translateY(var(--animate-from, 100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-slideInDown: slideInDown 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInDown {
+		from {
+			transform: translateY(var(--animate-from, -100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+
 	--animate-overlayShow: overlayShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
 	@keyframes overlayShow {
 		from {

package/src/runtime/components/LibDatePicker/LibRangeDatePicker.vue

@@ -237,10 +237,14 @@ const locale = useInjectedLocale().timeLocale
 			dark:border-neutral-700
 			shadow-lg
 			will-change-[transform,opacity]
-			data-[state=open]:data-[side=top]:animate-slideDownAndFade
-			data-[state=open]:data-[side=right]:animate-slideLeftAndFade
-			data-[state=open]:data-[side=bottom]:animate-slideUpAndFade
-			data-[state=open]:data-[side=left]:animate-slideRightAndFade
+			data-[side=top]:animate-from-3
+			data-[side=left]:animate-from-3
+			data-[side=right]:-animate-from-3
+			data-[side=bottom]:-animate-from-3
+			data-[state=open]:data-[side=top]:animate-slideInUp
+			data-[state=open]:data-[side=right]:animate-slideInRight
+			data-[state=open]:data-[side=bottom]:animate-slideInDown
+			data-[state=open]:data-[side=left]:animate-slideInLeft
 			text-fg
 			dark:text-neutral-200
 		"

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -3,7 +3,6 @@
 	v-if="notification"
 	:class="twMerge(`
 		notification
-		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
 		text-fg
@@ -63,7 +62,7 @@
 			</div>
 		</slot>
 		<div class="notification--spacer flex-1"/>
-		<div class="actions flex">
+		<div class="notification--actions flex">
 			<LibButton
 				:border="false"
 				class="
@@ -221,6 +220,7 @@ onMounted(() => {
 				if (props.notification.isPaused) return
 				emit("pause", props.notification)
 			} else {
+				if (!props.notification.isPaused) return
 				emit("resume", props.notification)
 			}
 		}, { signal: mousedownAbortController.signal })

package/src/runtime/components/LibNotifications/LibNotifications.vue

@@ -5,17 +5,16 @@
 	tag="div"
 	:class="twMerge(`
 		notifications
-		[--notification-width:300px]
+		[--notification-width:calc(100dvw-var(--spacing)*4)]
+		sm:[--notification-width:300px]
 		fixed
 		top-0
 		z-50
 		right-[calc(var(--notification-width)*-1)]
 		w-[calc(var(--spacing)*2+var(--notification-width)*2)]
-		[&_.notification]:w-[var(--notification-width)]
 		max-h-[100dvh]
 		flex
 		flex-col
-		[&_.notification]:shrink-0
 		gap-1
 		list-none
 		outline-none
@@ -29,7 +28,16 @@
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2 max-h-[25dvh] min-h-[300px]"
+		class="
+			overflow-hidden
+			my-2
+			max-h-[300px]
+			w-[var(--notification-width)]
+			shrink-0
+			max-sm:[&_.notification--button]:p-2
+			max-sm:[&_.notification--button]:py-1
+			max-sm:[&_.notification--header]:text-lg
+		"
 		v-for="notification of notifications"
 		:key="notification.id"
 		@pause="handler.pause(notification)"
@@ -46,7 +54,7 @@
 					-mx-[calc(var(--spacing)*2+2px)]
 					rounded-none
 				"
-				:progress="100 - (((notification.isPaused ? (notification._timer.elapsedBeforePause): (notification._timer.elapsedBeforePause + (time - notification.startTime))) / notification.timeout) * 100)"
+				:progress="calculateNotificationProgress(notification, time!)"
 			/>
 		</template>
 	</lib-notification>
@@ -67,19 +75,27 @@
 		<AlertDialogContent
 			class="
 				data-[state=open]:animate-contentShow
+				max-sm:data-[state=open]:animate-slideInUp
 				fixed
 				flex
+				max-h-[80dvh]
 				top-[50%]
 				left-[50%]
-				translate-x-[-50%]
-				translate-y-[-50%]
-				max-h-[80dvh]
+				sm:translate-x-[-50%]
+				sm:translate-y-[-50%]
 				max-w-[700px]
+				max-sm:bottom-2
+				max-sm:top-[unset]
+				max-sm:left-2
+				max-sm:right-2
+				max-sm:w-[calc(100%-var(--spacing)*4)]
 				z-100
 			"
 		>
 			<lib-notification
 				class="
+					w-full
+					sm:max-w-[700px]
 					max-w-full
 					max-h-full
 					top-notification
@@ -120,11 +136,13 @@ import {
 	AlertDialogRoot,
 	AlertDialogTitle
 } from "reka-ui"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
+import { calculateNotificationProgress } from "./calculateNotificationProgress.js"
 import LibNotification from "./LibNotification.vue"
 
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
+import { useTimeConditionally } from "../../composables/useTimeConditionally.js"
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { twMerge } from "../../utils/twMerge.js"
 import LibProgressBar from "../LibProgressBar/LibProgressBar.vue"
@@ -137,18 +155,16 @@ defineOptions({
 
 const props = defineProps<Props>()
 
+const handler = props.handler ?? useNotificationHandler()
+
 const topNotifications = computed(() => handler.queue.filter(entry => entry.requiresAction).reverse())
 const notifications = computed(() => handler.queue.filter(entry => !entry.requiresAction))
 
-const time = ref(Date.now())
-setInterval(() => {
-	requestAnimationFrame(() => {
-		time.value = Date.now()
-	})
-}, 50)
-
+const fetchTime = computed(() => {
+	return notifications.value.filter(entry => entry.timeout !== undefined && !entry.isPaused).length > 0
+})
 
-const handler = props.handler ?? useNotificationHandler()
+const { time } = useTimeConditionally(fetchTime, { refreshInterval: props.progressUpdateInterval })
 </script>
 
 <script lang="ts">
@@ -157,8 +173,9 @@ import type { HTMLAttributes } from "vue"
 type RealProps
 	= & LinkableByIdProps
 		& {
-			/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+		/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
 			handler?: NotificationHandler
+			progressUpdateInterval?: number
 		}
 
 interface Props

package/src/runtime/components/LibNotifications/calculateNotificationProgress.ts

@@ -0,0 +1,8 @@
+import type { NotificationEntry } from "../../helpers/NotificationHandler.js"
+
+export function calculateNotificationProgress(notification: NotificationEntry, time: number) {
+	if (notification.timeout === undefined) return 0
+
+	return 100 - (((notification.isPaused ? (notification._timer.elapsedBeforePause) : (notification._timer.elapsedBeforePause + (time - notification.startTime))) / notification.timeout) * 100)
+}
+

package/src/runtime/components/LibTable/LibTable.stories.ts

@@ -19,8 +19,9 @@ const meta: Meta<typeof LibTable> = {
 export default meta
 type Story = StoryObj<typeof LibTable> & { args: {
 	slots?: string
-	wrapperClass?: string
+	["wrapper-class"]?: string
 } }
+
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -182,7 +183,7 @@ export const StickyHeader: Story = {
 		// moving the border to the wrapper is to hide the little bits of border sticking out
 		// added back the right straight border otherwise the scrollbar looks ass
 		// this is ever so slightly visible if there is no scrollbar
-		wrapperClass: `
+		["wrapper-class"]: `
 			max-h-[50dvh]
 		`,
 		values: Array.from({ length: 200 }).fill(0).map((_, i) => ({
@@ -205,7 +206,7 @@ export const VirtualizedFixedHeight: Story = {
 			enabled: true
 		},
 		stickyHeader: true,
-		wrapperClass: `
+		["wrapper-class"]: `
 			max-h-[50dvh]
 		`,
 		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({
@@ -258,7 +259,7 @@ export const VirtualizedFitWidthFalse: Story = {
 			[&:not(.resizable-cols-setup)]:w-max
 			[&:not(.resizable-cols-setup)_th]:w-max
 		`,
-		wrapperClass: `
+		["wrapper-class"]: `
 			max-h-[50dvh]
 		`,
 		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({

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

@@ -50,7 +50,7 @@
 		mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
 		relative
 		`,
-		($attrs as any).wrapperClass)"
+		($attrs as any)['wrapper-class'])"
 	ref="parentRef"
 >
 	<div
@@ -256,7 +256,7 @@ const isPostSetup = ref(false)
 const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({
 	colCount: props.cols.length,
 	widths,
-	selector: ".cell",
+	selector: props.header ? undefined : `tr:first-child > td`,
 	...props.resizable,
 	onSetup: el => {
 		isPostSetup.value = true
@@ -414,6 +414,7 @@ type RealProps = {
 	rounded?: boolean
 	border?: boolean
 	cellBorder?: boolean
+	/** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
 	header?: boolean
 	colConfig?: TableColConfig<T>
 	/**

package/src/runtime/composables/useTimeConditionally.ts

@@ -0,0 +1,51 @@
+import { type Ref, ref, watch } 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 function useTimeConditionally(
+	val: Ref<any[] | boolean | any>,
+	{
+		refreshInterval = 50
+	}: {
+		refreshInterval?: number
+	} = {}
+): {
+	time: Ref<undefined | number>
+	refresh: () => void
+} {
+	const time = ref<undefined | number>(undefined)
+
+	let interval: ReturnType<typeof setInterval> | undefined
+	function refresh(
+		/** The value to use for the check. Do not pass unless you know what you're doing. */
+		v = val.value
+	) {
+		if (v === true || (Array.isArray(v) && v.length > 0)) {
+			if (interval !== undefined) return
+			time.value = Date.now()
+			interval = setInterval(() => {
+				requestAnimationFrame(() => {
+					time.value = Date.now()
+				})
+			}, refreshInterval)
+		} else {
+			if (interval === undefined) return
+			clearInterval(interval)
+			interval = undefined
+		}
+	}
+	watch(val, val => {
+		refresh(val)
+	})
+
+	refresh()
+
+	return { time, refresh }
+}

package/src/runtime/directives/vResizableCols.ts

@@ -24,7 +24,6 @@ type Data = {
 	onTeardown?: (el: Element) => void
 	fixedWidths?: Record<number, number>
 	fluidWidthsAsPercentOfFluidWidth?: Record<number, number>
-	justResized?: boolean
 }
 const elMap = new WeakMap<HTMLElement, Data>()
 type RawOpts = { value: Partial<ResizableOptions> }
@@ -40,14 +39,8 @@ const defaultOpts: Omit<ResizableOptions, "colCount" | "widths" | "selector"> =
 // note that while it would be nice to throttle this it seems to loose the reference to the original element
 // haven't found where the issue is yet #future
 const callback: ResizeCallback = (_rect: DOMRectReadOnly, el: Element): void => {
-	const $el = getElInfo(el as ResizableElement)
-	if ($el.justResized) return
 	setColWidths(el as ResizableElement)
-	$el.justResized = true
-	setTimeout(() => {
-		positionGrips(el as ResizableElement)
-		$el.justResized = false
-	}, 0)
+	positionGrips(el as ResizableElement)
 }
 
 /**
@@ -119,7 +112,7 @@ export const vResizableCols: Directive = {
 	},
 	updated(el: ResizableElement, { value: opts = {} }: RawOpts) {
 		const options = override({ ...defaultOpts }, opts) as ResizableOptions
-		const info = el && options.enabled && getElInfo(el)
+		const info = el && options.enabled && getElInfo(el, { throwIfMissing: false })
 		const hasGrips = el && options.enabled && elMap.get(el)?.grips
 		// todo, we should probably check by name
 		const colsNotEqual = (info && info.colCount !== options.colCount)
@@ -148,7 +141,11 @@ function setWidth(col: HTMLElement, amountInPx: number, el: ResizableElement): v
 
 	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`
 	}
@@ -186,6 +183,7 @@ function createPointerDownHandler(el: ResizableElement) {
 			castType<HTMLElement>(e.target)
 			$el.target = e.target
 			$el.isDragging = true
+			el.classList.add("dragging")
 			e.preventDefault()
 
 			// in case any errors happen, we want the pointer up to still be called
@@ -245,11 +243,7 @@ function createPointerMoveHandler(el: ResizableElement) {
 					}
 				}
 
-				$el.justResized = true
-				setTimeout(() => {
-					positionGrips(el)
-					$el.justResized = false
-				}, 0)
+				positionGrips(el)
 			}
 		}
 	}
@@ -258,9 +252,11 @@ function createPointerMoveHandler(el: ResizableElement) {
 function createPointerUpHandler(el: ResizableElement) {
 	return (e: PointerEvent) => {
 		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
@@ -303,7 +299,7 @@ function getElInfo<T extends boolean = true>(el: ResizableElement, { throwIfMiss
 function getColEls(el: ResizableElement): HTMLElement[] {
 	const $el = elMap.get(el)
 	if (!$el) unreachable("El went missing.")
-	return [...el.querySelectorAll(`:scope ${$el.selector ? $el.selector : "tr > th, tr > td"}`)] as any
+	return [...el.querySelectorAll(`:scope ${$el.selector ?? "tr > th"}`)] as any
 }
 
 function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
@@ -323,9 +319,10 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		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"
@@ -338,13 +335,9 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		el.appendChild(grip)
 		$el.grips.set(grip, i)
 	}
-	$el.justResized = true
-	setTimeout(() => {
-		positionGrips(el)
-		$el.justResized = false
-		el.classList.add("resizable-cols-setup")
-		opts.onSetup?.(el)
-	}, 0)
+	positionGrips(el)
+	el.classList.add("resizable-cols-setup")
+	opts.onSetup?.(el)
 }
 
 function positionGrips(el: ResizableElement): void {
@@ -412,7 +405,6 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 	const minFlexWidth = (totalFluidCount * $el.margin)
 	const minTotalWidth = minFlexWidth + fixedTotalPx
 
-
 	let leftOverFluidWidth = elWidth - fixedTotalPx
 	if (leftOverFluidWidth < minFlexWidth) {
 		leftOverFluidWidth = minFlexWidth
@@ -428,7 +420,7 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 		 */
 		const colBox = getBox(col)
 		if ($el.fixedWidths![i] !== undefined) {
-			setWidth(col, $el.fixedWidths![i]!, el)
+			$el.widths.value[i] = `${$el.fixedWidths![i]!}px`
 			width += $el.fixedWidths![i]!
 		} else {
 			if ($el.fitWidth) {

package/src/runtime/types/index.ts

@@ -41,7 +41,7 @@ export type ResizableOptions = {
 	 * It can then be used as needed by the component.
 	 */
 	widths: Ref<string[]>
-	/** The selector to use for the cells. "tr > td" by default. */
+	/** The selector to use for the header cells. "tr > th" 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