@witchcraft/ui 0.3.24 → 0.4.0-beta.1

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

@@ -1,6 +1,9 @@
 <template>
 <div
 	v-if="notification"
+	:role="notification.requiresAction ? 'alertdialog' : 'status'"
+	:aria-labelledby="notification.title ? `title-${notification.id}` : undefined"
+	:aria-describedby="notification.message ? `msg-${notification.id}` : undefined"
 	:class="twMerge(`
 		notification
 		bg-neutral-50
@@ -20,39 +23,43 @@
 		focus:border-accent-500
 		focus-within:border-accent-500
 	`,
-		($attrs as any).class)"
-	v-bind="{ ...$attrs, class: undefined }"
+		($attrs as any).class,
+		notification.notificationAttrs?.class
+	)
+	"
+	v-bind="{ ...$attrs, ...(notification?.notificationAttrs ?? {}), class: undefined }"
 	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
@@ -63,8 +70,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
@@ -73,10 +81,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
@@ -84,8 +93,8 @@
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
-				<icon><i-fa6-solid-xmark/></icon>
-			</lib-button>
+				<WIcon><i-lucide-x/></WIcon>
+			</Wbutton>
 		</div>
 	</div>
 	<slot
@@ -101,12 +110,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>
@@ -115,6 +124,7 @@
 		v-if="notification.component"
 		:is="notification.component"
 		v-bind="{
+			notification,
 			message: notification.message,
 			messageClasses: `
 					notification--message
@@ -144,7 +154,7 @@
 				gap-2
 			"
 		>
-			<lib-button
+			<WButton
 				:label="option"
 				:class="twMerge(`
 					notification--button
@@ -164,21 +174,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, ref, useAttrs } from "vue"
-
-import IFa6RegularCopy from "~icons/fa6-regular/copy"
-import IFa6SolidXmark from "~icons/fa6-solid/xmark"
+import { computed, type HTMLAttributes, onMounted, ref, useAttrs } from "vue"
 
 import { useSlotVars } from "../../composables/useSlotVars.js"
 import { copy } from "../../helpers/copy.js"
 import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import type { TailwindClassProp } from "../shared/props.js"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 defineOptions({
-	name: "LibNotification",
+	name: "WNotification",
 	inheritAttrs: false
 })
 const $attrs = useAttrs()
@@ -186,14 +193,17 @@ const $attrs = useAttrs()
 const { setSlotVar, slotVars } = useSlotVars()
 
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<
+	& {
+		notification: NotificationEntry
+		handler?: NotificationHandler
+	}
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
 	handler: undefined
 })
 
-const emit = defineEmits<{
-	(e: "pause", notification: NotificationEntry): void
-	(e: "resume", notification: NotificationEntry): void
-}>()
 
 const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => {
 	return notification.dangerous.includes(option)
@@ -203,51 +213,21 @@ const getColor = (notification: NotificationEntry, option: string): "ok" | "prim
 			: "secondary"
 }
 
-/* Todo make this more flexible? */
 
+/* Todo make this more flexible? */
 const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
 
 const notificationEl = ref<null | HTMLElement>(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 lang="ts">
-type RealProps = {
-	notification: NotificationEntry
-	handler?: NotificationHandler
-}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
-	RealProps
-{}
-</script>

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

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { faker } from "@faker-js/faker"
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { computed, ref } from "vue"
+
+import WNotifications from "./WNotifications.vue"
+
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	_withTitle?: boolean
+}
+const meta: Meta<typeof WNotifications> = {
+	component: WNotifications,
+	title: "Components/Notifications",
+	args: {
+		_withTitle: true
+	} satisfies ExtraTestArgs as any
+}
+
+export default meta
+
+type Story = StoryObj<typeof WNotifications> & {
+	args?: ExtraTestArgs
+}
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup() {
+				const handler = new NotificationHandler({})
+
+				let count = 0
+
+				const withTitle = ref(extraArgs._withTitle)
+				const disableTimeout = ref(false)
+				const lotsOfText = ref(false)
+				const paragraphs = `\n Simulating lots of text:\n${faker.lorem.paragraphs(20)}`
+				const extraText = computed(() => lotsOfText.value ? paragraphs : "")
+
+				const notifyRequiresAction = (options: any) => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a cancellable notification that requires action. Pick an option:${extraText.value}`,
+						requiresAction: true,
+						options: ["Ok", "Default Answer", "Cancel"],
+						default: "Default Answer",
+						cancellable: true,
+						...options
+					})
+				}
+
+				const notifyWithDangerousOption = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a cancellable notification that has a dangerous option. Pick an option:${extraText.value}`,
+						options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+						cancellable: true,
+						default: "Default Answer",
+						dangerous: ["Dangerous Option"]
+					})
+				}
+				const notifyNonCancellable = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
+						options: ["Ok", "Default Answer"],
+						default: "Default Answer",
+						cancellable: false
+					})
+				}
+				const notifyNonCancellableRequiresAction = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
+						requiresAction: true,
+						options: ["Ok", "Default Answer"],
+						default: "Default Answer",
+						cancellable: false
+					})
+				}
+				const notifyTimeoutable = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a notification. No action required.${extraText.value}`,
+						timeout: disableTimeout.value ? false : 5000
+					})
+				}
+				return {
+					notifyRequiresAction,
+					notifyTimeoutable,
+					notifyNonCancellable,
+					notifyWithDangerousOption,
+					notifyNonCancellableRequiresAction,
+					handler,
+					withTitle,
+					disableTimeout,
+					lotsOfText,
+					args: {
+						outline: false,
+						...args
+					}
+				}
+			},
+			backgrounds: { disable: true },
+			// <WDebug>{{args.handler}}</WDebug>
+			template: `
+	<WRoot :outline="args.outline" :notification-handler="handler">
+		<WButton :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></WButton>
+		<WButton :label="'Notify RequiresAction (Cancellable)'" @click="notifyRequiresAction()"></WButton>
+		<WButton :label="'Notify RequiresAction (Cancellable) - Custom Width'" @click="notifyRequiresAction({cancellable:true,notificationProps: {class: 'sm:max-w-[90dvw]'}})"></WButton>
+		<WButton :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></WButton>
+		<WButton :label="'Notify With Dangerous Option (Cancellable)'" @click="notifyWithDangerousOption()"></WButton>
+		<WButton :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></WButton>
+		<WCheckbox v-model="lotsOfText">Use lots of text</WCheckbox>
+		<WCheckbox v-model="disableTimeout">Disable Timeout</WCheckbox>
+		<WCheckbox v-model="withTitle">With Title</WCheckbox>
+		<WNotifications :handler="handler" />
+		History:
+		<WDebug>
+			<template v-for="entry in handler.history">
+				Message: {{entry.message}}
+				Resolution: {{entry.resolution}}
+				<br>
+			</template>
+		</WDebug>
+	</WRoot>
+	`
+		}
+	}
+}

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

@@ -24,7 +24,7 @@
 	`, ($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 >
-	<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 !== undefined"
 				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,24 +132,36 @@ import {
 	AlertDialogRoot,
 	AlertDialogTitle
 } from "reka-ui"
-import { computed } from "vue"
+import type { HTMLAttributes } 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 type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import LibProgressBar from "../LibProgressBar/LibProgressBar.vue"
-import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
+import WProgressBar from "../WProgressBar/WProgressBar.vue"
+
 
 defineOptions({
-	name: "LibNotifications",
+	name: "WNotifications",
 	inheritAttrs: false
 })
 
-const props = defineProps<Props>()
+const $attrs = useAttrs()
+
+const props = defineProps<
+	& {
+		/** 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
+>()
 
 const handler = props.handler ?? useNotificationHandler()
 
@@ -165,23 +173,35 @@ const fetchTime = computed(() => {
 })
 
 const { time } = useTimeConditionally(fetchTime, { refreshInterval: props.progressUpdateInterval })
-</script>
 
-<script lang="ts">
-import type { HTMLAttributes } from "vue"
+function handleGlobalPointerDown(e: PointerEvent) {
+	const target = e.target as HTMLElement
+	const notificationEl = target.closest(".notification") as HTMLElement
+	const rawId = notificationEl?.dataset.id
+	const clickedId = rawId ? Number.parseInt(rawId, 10) : null
 
-type RealProps
-	= & LinkableByIdProps
-		& {
-		/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
-			handler?: NotificationHandler
-			progressUpdateInterval?: number
+	if (clickedId !== null) {
+		// User clicked a specific notification -> Pause it
+		const entry = handler.queue.find(n => n.id === clickedId)
+		if (entry && entry.timeout && !entry.isPaused) {
+			handler.pause(entry)
 		}
+	} else {
+		// User clicked outside -> Resume all paused ephemeral notifications
+		handler.queue.forEach(entry => {
+			if (entry.timeout && entry.isPaused) {
+				handler.resume(entry)
+			}
+		})
+	}
+}
+
+onMounted(() => {
+	window.addEventListener("pointerdown", handleGlobalPointerDown)
+})
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
-	RealProps
-{}
+onBeforeUnmount(() => {
+	window.removeEventListener("pointerdown", handleGlobalPointerDown)
+})
 </script>
+

package/src/runtime/components/WNumberInput/WNumberInput.vue

@@ -0,0 +1,109 @@
+<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: undefined }"
+	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: undefined }"
+	/>
+
+	<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 lang="ts">
+import type {
+	NumberFieldInputProps,
+	NumberFieldRootEmits,
+	NumberFieldRootProps
+} from "reka-ui"
+import type { HTMLAttributes, InputHTMLAttributes } from "vue"
+
+import type { EmitsToProps, TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+
+const props = withDefaults(defineProps<
+	& {
+		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
+	}
+>(), {
+	max: Number.MAX_SAFE_INTEGER,
+	min: Number.MIN_SAFE_INTEGER,
+	isValid: (value: any) => { return typeof value === "number" && !Number.isNaN(value) }
+})
+
+const modelValue = defineModel<number>({ required: true })
+</script>