@witchcraft/ui 0.3.19 → 0.3.20

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.19",
+  "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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.19",
+  "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/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 }
+}