@witchcraft/ui 0.3.24 → 0.4.0-beta.1

package/dist/runtime/components/{LibNotifications/LibNotification.vue → WNotifications/WNotification.vue}

@@ -1,8 +1,12 @@
 <template>
 <div
 	v-if="notification"
-	:class="twMerge(
-  `
+	:role="notification.requiresAction ? 'alertdialog' : 'status'"
+	:aria-labelledby="notification.title ? `title-${notification.id}` : void 0"
+	:aria-describedby="notification.message ? `msg-${notification.id}` : void 0"
+	:class="
+  twMerge(
+    `
 		notification
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -21,40 +25,42 @@
 		focus:border-accent-500
 		focus-within:border-accent-500
 	`,
-  $attrs.class
-)"
-	v-bind="{ ...$attrs, class: void 0 }"
+    $attrs.class,
+    notification.notificationAttrs?.class
+  )
+"
+	v-bind="{ ...$attrs, ...notification?.notificationAttrs ?? {}, class: void 0 }"
 	tabindex="0"
 	:data-id="notification.id"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
-	@pointerenter="notification.timeout && !notification.isPaused && emit('pause', notification)"
 >
 	<slot
 		name="top"
 		:notification="notification"
 	/>
+
 	<div
 		class="
-			notification--header
-			flex-reverse
-			flex
-			justify-between
-			items-center
-		"
+		notification--header
+		flex-reverse
+		flex
+		justify-between
+		items-center
+	"
 	>
 		<slot
 			v-if="notification.title"
 			name="title"
 			v-bind="setSlotVar('title', {
+  id: `title-${notification.id}`,
   title: notification.title,
   class: `
 					notification--title
 					focus-outline
 					rounded-sm
 					font-bold
-				`,
-  tabindex: 0
+				`
 })"
 		>
 			<div
@@ -65,8 +71,9 @@
 		</slot>
 		<div class="notification--spacer flex-1"/>
 		<div class="notification--actions flex">
-			<LibButton
+			<WButton
 				:border="false"
+				aria-label="Copy notification content"
 				class="
 					notification--title-button
 					notification--copy-button
@@ -75,10 +82,11 @@
 				"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
-				<icon><i-fa6-regular-copy/></icon>
-			</LibButton>
-			<lib-button
+				<WIcon><i-lucide-copy/></WIcon>
+			</WButton>
+			<WButton
 				v-if="notification.cancellable"
+				aria-label="Dismiss notification"
 				class="
 					notification--title-button
 					notification--cancel-button
@@ -86,8 +94,8 @@
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
-				<icon><i-fa6-solid-xmark/></icon>
-			</lib-button>
+				<WIcon><i-lucide-x/></WIcon>
+			</Wbutton>
 		</div>
 	</div>
 	<slot
@@ -103,12 +111,12 @@
 				dark:text-neutral-200
 				mb-1
 			`,
-  message: notification.message,
-  tabindex: 0
+  message: notification.message
 })"
 	>
 		<div
 			v-bind="slotVars.message"
+			:id="`msg-${notification.id}`"
 		>
 			{{ notification.message }}
 		</div>
@@ -117,6 +125,7 @@
 		v-if="notification.component"
 		:is="notification.component"
 		v-bind="{
+  notification,
   message: notification.message,
   messageClasses: `
 					notification--message
@@ -146,7 +155,7 @@
 				gap-2
 			"
 		>
-			<lib-button
+			<WButton
 				:label="option"
 				:class="twMerge(
   `
@@ -167,17 +176,15 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from "vue";
-import IFa6RegularCopy from "~icons/fa6-regular/copy";
-import IFa6SolidXmark from "~icons/fa6-solid/xmark";
+import { computed, onMounted, ref, useAttrs } from "vue";
 import { useSlotVars } from "../../composables/useSlotVars.js";
 import { copy } from "../../helpers/copy.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
+import WButton from "../WButton/WButton.vue";
+import WIcon from "../WIcon/WIcon.vue";
 defineOptions({
-  name: "LibNotification",
+  name: "WNotification",
   inheritAttrs: false
 });
 const $attrs = useAttrs();
@@ -186,38 +193,19 @@ const props = defineProps({
   notification: { type: null, required: true },
   handler: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["pause", "resume"]);
 const getColor = (notification, option) => {
   return notification.dangerous.includes(option) ? "danger" : notification.default === option ? "primary" : "secondary";
 };
 const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
 const notificationEl = ref(null);
-const mousedownAbortController = new AbortController();
 onMounted(() => {
-  notificationEl.value?.focus();
-  if (props.notification.timeout) {
-    window.addEventListener("pointerdown", (e) => {
-      if (!e.target || !(e.target instanceof HTMLElement)) return;
-      if (e.target === notificationEl.value || notificationEl.value?.contains(e.target)) {
-        if (props.notification.isPaused) return;
-        emit("pause", props.notification);
-      } else {
-        if (!props.notification.isPaused) return;
-        emit("resume", props.notification);
-      }
-    }, { signal: mousedownAbortController.signal });
+  if (props.notification.requiresAction) {
+    notificationEl.value?.focus();
   }
 });
-onBeforeUnmount(() => {
-  mousedownAbortController.abort();
-});
 defineExpose({
   focus: () => {
     notificationEl.value?.focus();
   }
 });
 </script>
-
-<script>
-
-</script>

package/dist/runtime/components/WNotifications/WNotification.vue.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "vue";
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    notification: NotificationEntry;
+    handler?: NotificationHandler;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    notification: NotificationEntry;
+}, __VLS_3: {
+    id: string;
+    title: string;
+    class: string;
+}, __VLS_43: {
+    class: string;
+    message: string;
+};
+type __VLS_Slots = {} & {
+    top?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    message?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    handler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+    handler?: NotificationHandler;
+    progressUpdateInterval?: number;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{LibNotifications/LibNotifications.vue → WNotifications/WNotifications.vue}

@@ -24,7 +24,7 @@
 	`, $attrs.class)"
 	v-bind="{ ...$attrs, class: void 0 }"
 >
-	<lib-notification
+	<WNotification
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
@@ -40,11 +40,9 @@
 		"
 		v-for="notification of notifications"
 		:key="notification.id"
-		@pause="handler.pause(notification)"
-		@resume="handler.resume(notification)"
 	>
 		<template #top>
-			<LibProgressBar
+			<WProgressBar
 				v-if="notification.timeout !== void 0"
 				class="
 					w-full
@@ -57,7 +55,7 @@
 				:progress="calculateNotificationProgress(notification, time)"
 			/>
 		</template>
-	</lib-notification>
+	</Wnotification>
 </TransitionGroup>
 <!-- we don't need to worry about the user accidentally closing a non-closable dialog as keeping open=true (which the handler handles when the component tries to close) is enough to keep it open without issues -->
 <AlertDialogRoot
@@ -67,7 +65,7 @@
 	<AlertDialogPortal :to="'#root'">
 		<AlertDialogOverlay
 			class="
-				fixed inset-0 z-30
+				fixed inset-0 z-90
 				bg-neutral-950/20
 				data-[state=open]:animate-overlayShow
 			"
@@ -77,27 +75,25 @@
 				data-[state=open]:animate-contentShow
 				max-sm:data-[state=open]:animate-slideInUp
 				fixed
-				flex
-				max-h-[80dvh]
-				top-[50%]
-				left-[50%]
+				flex justify-center
+				top-1/2
+				left-1/2
+				w-full
 				sm:translate-x-[-50%]
 				sm:translate-y-[-50%]
-				max-w-[700px]
-				max-sm:bottom-2
+				p-2
+				max-sm:bottom-0
 				max-sm:top-[unset]
-				max-sm:left-2
-				max-sm:right-2
-				max-sm:w-[calc(100%-var(--spacing)*4)]
+				max-sm:left-0
 				z-100
 			"
+			@interact-outside="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 		>
-			<lib-notification
+			<WNotification
 				class="
 					w-full
 					sm:max-w-[700px]
-					max-w-full
-					max-h-full
+					max-h-[80dvh]
 					top-notification
 					text-md
 					gap-2
@@ -121,7 +117,7 @@
 						{{ slotProps.message }}
 					</AlertDialogDescription>
 				</template>
-			</lib-notification>
+			</Wnotification>
 		</AlertDialogContent>
 	</AlertDialogPortal>
 </AlertDialogRoot>
@@ -136,20 +132,20 @@ import {
   AlertDialogRoot,
   AlertDialogTitle
 } from "reka-ui";
-import { computed } from "vue";
+import { computed, onBeforeUnmount, onMounted, useAttrs } from "vue";
 import { calculateNotificationProgress } from "./calculateNotificationProgress.js";
-import LibNotification from "./LibNotification.vue";
+import WNotification from "./WNotification.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";
+import WProgressBar from "../WProgressBar/WProgressBar.vue";
 defineOptions({
-  name: "LibNotifications",
+  name: "WNotifications",
   inheritAttrs: false
 });
+const $attrs = useAttrs();
 const props = defineProps({
-  id: { type: String, required: false },
   handler: { type: Object, required: false },
   progressUpdateInterval: { type: Number, required: false }
 });
@@ -160,8 +156,28 @@ 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>
-
+function handleGlobalPointerDown(e) {
+  const target = e.target;
+  const notificationEl = target.closest(".notification");
+  const rawId = notificationEl?.dataset.id;
+  const clickedId = rawId ? Number.parseInt(rawId, 10) : null;
+  if (clickedId !== null) {
+    const entry = handler.queue.find((n) => n.id === clickedId);
+    if (entry && entry.timeout && !entry.isPaused) {
+      handler.pause(entry);
+    }
+  } else {
+    handler.queue.forEach((entry) => {
+      if (entry.timeout && entry.isPaused) {
+        handler.resume(entry);
+      }
+    });
+  }
+}
+onMounted(() => {
+  window.addEventListener("pointerdown", handleGlobalPointerDown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("pointerdown", handleGlobalPointerDown);
+});
 </script>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+    handler?: NotificationHandler;
+    progressUpdateInterval?: number;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { NumberFieldInputProps, NumberFieldRootEmits, NumberFieldRootProps } from "reka-ui";
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { EmitsToProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    max?: NumberFieldRootProps["max"];
+    min?: NumberFieldRootProps["min"];
+    step?: NumberFieldRootProps["step"];
+    isValid?: (value: any) => boolean;
+    inputProps?: NumberFieldInputProps & Omit<InputHTMLAttributes, "class"> & TailwindClassProp;
+    rootProps?: NumberFieldRootProps & EmitsToProps<NumberFieldRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+};
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    isValid: (value: any) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/WNumberInput/WNumberInput.vue

@@ -0,0 +1,96 @@
+<template>
+<NumberFieldRoot
+	:min="props.min"
+	:max="props.max"
+	:step="props.step"
+	:format-options="{
+  signDisplay: 'exceptZero',
+  ...rootProps?.formatOptions
+}"
+	:class="twMerge(
+  `
+		flex
+		items-center
+		justify-center
+		metadata-input-border
+		rounded-sm
+		focus-outline-within
+		gap-2
+	`,
+  !isValid && 'text-danger-500',
+  rootProps?.class
+)"
+	v-bind="{ ...rootProps, class: void 0 }"
+	v-model="modelValue"
+>
+	<NumberFieldDecrement
+		class="
+			px-1
+			flex-1
+			hover:bg-neutral-200
+			dark:hover:bg-neutral-800
+			[&_.button--label]:justify-start
+			rounded-bl-sm
+			rounded-tl-sm
+			cursor-pointer
+			disabled:cursor-not-allowed
+		"
+	>
+		<WIcon><i-radix-icons-minus/></WIcon>
+	</NumberFieldDecrement>
+
+	<NumberFieldInput
+		:class="twMerge(
+  `
+				bg-transparent
+				tabular-nums
+				text-center
+				focus-outline-none
+				px-1
+				shrink-1
+				basis-[20ch]
+				grow-0
+				min-w-0
+				[&::-webkit-outer-spin-button]:appearance-none
+				[&::-webkit-inner-spin-button]:appearance-none
+				[-moz-appearance:textfield]
+			`,
+  !isValid && 'text-danger-500',
+  inputProps?.class
+)"
+		v-bind="{ ...inputProps, class: void 0 }"
+	/>
+
+	<NumberFieldIncrement
+		class="
+			px-1
+			flex-1
+			hover:bg-neutral-200
+			dark:hover:bg-neutral-800
+			[&_.button--label]:justify-end
+			rounded-br-sm
+			rounded-tr-sm
+			cursor-pointer
+			disabled:cursor-not-allowed
+		"
+	>
+		<WIcon><i-radix-icons-plus/></WIcon>
+	</NumberFieldIncrement>
+</NumberFieldRoot>
+</template>
+
+<script setup>
+import { twMerge } from "../../utils/twMerge.js";
+const props = defineProps({
+  id: { type: String, required: false },
+  max: { type: Number, required: false, default: Number.MAX_SAFE_INTEGER },
+  min: { type: Number, required: false, default: Number.MIN_SAFE_INTEGER },
+  step: { type: Number, required: false },
+  isValid: { type: Function, required: false, default: (value) => {
+    return typeof value === "number" && !Number.isNaN(value);
+  } },
+  inputProps: { type: Object, required: false },
+  rootProps: { type: Object, required: false }
+});
+const modelValue = defineModel({ type: Number, ...{ required: true } });
+</script>

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

@@ -0,0 +1,27 @@
+import type { NumberFieldInputProps, NumberFieldRootEmits, NumberFieldRootProps } from "reka-ui";
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { EmitsToProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    max?: NumberFieldRootProps["max"];
+    min?: NumberFieldRootProps["min"];
+    step?: NumberFieldRootProps["step"];
+    isValid?: (value: any) => boolean;
+    inputProps?: NumberFieldInputProps & Omit<InputHTMLAttributes, "class"> & TailwindClassProp;
+    rootProps?: NumberFieldRootProps & EmitsToProps<NumberFieldRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+};
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    isValid: (value: any) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,59 @@
+import { type PaginationRootProps } from "reka-ui";
+import { type HTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp & Pick<PaginationRootProps, "defaultPage" | "siblingCount" | "itemsPerPage"> & {
+    route: string;
+    customRoute?: (route: string, i: number) => {
+        i: number;
+        href: string;
+    };
+    total: number;
+};
+type __VLS_ModelProps = {
+    "current": number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {}, __VLS_33: {}, __VLS_46: {
+    value: number;
+}, __VLS_60: {}, __VLS_73: {};
+type __VLS_Slots = {} & {
+    first?: (props: typeof __VLS_20) => any;
+} & {
+    prev?: (props: typeof __VLS_33) => any;
+} & {
+    page?: (props: typeof __VLS_46) => any;
+} & {
+    next?: (props: typeof __VLS_60) => any;
+} & {
+    last?: (props: typeof __VLS_73) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:current": (value: number) => any;
+} & {
+    "link-click": (event: MouseEvent, payload: {
+        i: number;
+        href: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onLink-click"?: ((event: MouseEvent, payload: {
+        i: number;
+        href: string;
+    }) => any) | undefined;
+    "onUpdate:current"?: ((value: number) => any) | undefined;
+}>, {
+    defaultPage: number;
+    siblingCount: number;
+    itemsPerPage: number;
+    customRoute: (route: string, i: number) => {
+        i: number;
+        href: string;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};