@witchcraft/ui 0.4.0 → 0.4.2

package/src/runtime/components/{LibNotifications/LibNotifications.vue → WNotifications/WNotifications.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
@@ -25,18 +24,25 @@
 	`, ($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 >
-	<lib-notification
+	<WNotification
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
-		class="overflow-hidden my-2"
+		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"
-		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
-		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
 	>
 		<template #top>
-			<LibProgressBar
+			<WProgressBar
 				v-if="notification.timeout !== undefined"
 				class="
 					w-full
@@ -46,10 +52,10 @@
 					-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>
+	</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
@@ -59,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
 			"
@@ -67,18 +73,27 @@
 		<AlertDialogContent
 			class="
 				data-[state=open]:animate-contentShow
+				max-sm:data-[state=open]:animate-slideInUp
 				fixed
-				top-[50%]
-				left-[50%]
-				translate-x-[-50%]
-				translate-y-[-50%]
-				max-h-[80dvh]
-				max-w-[700px]
+				flex justify-center
+				top-1/2
+				left-1/2
+				w-full
+				sm:translate-x-[-50%]
+				sm:translate-y-[-50%]
+				p-2
+				max-sm:bottom-0
+				max-sm:top-[unset]
+				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-h-[80dvh]
 					top-notification
 					text-md
 					gap-2
@@ -102,7 +117,7 @@
 						{{ slotProps.message }}
 					</AlertDialogDescription>
 				</template>
-			</lib-notification>
+			</Wnotification>
 		</AlertDialogContent>
 	</AlertDialogPortal>
 </AlertDialogRoot>
@@ -117,51 +132,76 @@ import {
 	AlertDialogRoot,
 	AlertDialogTitle
 } from "reka-ui"
-import { computed, ref } from "vue"
+import type { HTMLAttributes } from "vue"
+import { computed, onBeforeUnmount, onMounted, useAttrs } from "vue"
 
-import LibNotification from "./LibNotification.vue"
+import { calculateNotificationProgress } from "./calculateNotificationProgress.js"
+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()
 
 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 { time } = useTimeConditionally(fetchTime, { refreshInterval: props.progressUpdateInterval })
 
-const handler = props.handler ?? useNotificationHandler()
-</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
+	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)
+			}
+		})
+	}
+}
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
-	RealProps
-{}
+onMounted(() => {
+	window.addEventListener("pointerdown", handleGlobalPointerDown)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener("pointerdown", handleGlobalPointerDown)
+})
 </script>
+

package/src/runtime/components/WNotifications/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/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>

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

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import WPagination from "./WPagination.vue"
+
+import * as components from "../index.js"
+
+const meta: Meta<typeof WPagination> = {
+	component: WPagination,
+	title: "Components/Pagination",
+	args: {
+		total: 10
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof WPagination>
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup() {
+			const num = ref(1)
+			const interceptClick = ref(false)
+			const changePage = ($event: any, i: any) => {
+				if (interceptClick.value) {
+					$event.preventDefault()
+				}
+				if (i >= 10) num.value = 10
+				if (i <= 1) num.value = 1
+				num.value = i
+			}
+
+			return {
+				changePage,
+				args,
+				num,
+				interceptClick
+			}
+		},
+		template: `
+			<WCheckbox v-model="interceptClick">Intercept Click (url should change when off)</WCheckbox>
+			<WPagination v-bind="{...args, current: num, route:'#'}" @link-click="changePage($event, num)">
+			</WPagination>
+			<WSimpleInput class="mt-5" :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
+
+			</WSimpleInput>
+		`
+	})
+}

package/src/runtime/components/WPagination/WPagination.vue

@@ -0,0 +1,207 @@
+<template>
+<PaginationRoot
+	:total="total"
+	:items-per-page="itemsPerPage"
+	:sibling-count="siblingCount"
+	show-edges
+	:class="twMerge(`
+		pagination--wrapper
+		flex flex-wrap items-center justify-center gap-2
+	`, ($attrs as any).class)"
+	v-model:page="current"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	<PaginationList
+		v-slot="{ items }"
+		class="flex items-center gap-2 w-full"
+	>
+		<PaginationFirst
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, 1).href"
+				:aria-label="t('pagination.aria.go-to-first-page')"
+			>
+				<slot name="first">
+					<i-lucide-chevrons-left class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationFirst>
+
+		<PaginationPrev
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, current - 1).href"
+				:aria-label="t('pagination.aria.go-to-previous-page')"
+				@click="onLinkClick($event, current - 1)"
+			>
+				<slot name="prev">
+					<i-lucide-chevron-left class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationPrev>
+
+		<div class="pagination--spacer flex-1"/>
+
+		<template v-for="(page, index) in items">
+			<PaginationListItem
+				v-if="page.type === 'page'"
+				:value="page.value"
+				as-child
+				:key="index"
+			>
+				<a
+					:href="customRoute(route, page.value).href"
+					:aria-label="t('pagination.aria.go-to-page', { count: page.value })"
+					:class="page.value === current ? currentPageClasses : pageClasses"
+					@click="onLinkClick($event, page.value)"
+				>
+					<slot
+						name="page"
+						:value="page.value"
+					>
+						{{ page.value }}
+					</slot>
+				</a>
+			</PaginationListItem>
+
+			<!-- @vue-expect-error index is a prop... -->
+			<PaginationEllipsis
+				v-else
+				:index="index"
+				class="pagination--page-fill flex items-center justify-center w-8 h-8"
+				:key="page.type"
+			>
+				...
+			</PaginationEllipsis>
+		</template>
+
+		<div class="pagination--spacer flex-1"/>
+
+		<PaginationNext
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, current + 1).href"
+				:aria-label="t('pagination.aria.go-to-next-page')"
+				@click="onLinkClick($event, current + 1)"
+			>
+				<slot name="next">
+					<i-lucide-chevron-right class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationNext>
+
+		<PaginationLast
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, Math.ceil(total / itemsPerPage)).href"
+				:aria-label="t('pagination.aria.go-to-last-page')"
+				@click="onLinkClick($event, Math.ceil(total / itemsPerPage))"
+			>
+				<slot name="last">
+					<i-lucide-chevrons-right class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationLast>
+	</PaginationList>
+</PaginationRoot>
+</template>
+
+<script setup lang="ts">
+import {
+	PaginationEllipsis,
+	PaginationFirst,
+	PaginationLast,
+	PaginationList,
+	PaginationListItem,
+	PaginationNext,
+	PaginationPrev,
+	PaginationRoot,
+	type PaginationRootProps
+} from "reka-ui"
+import { type HTMLAttributes, useAttrs } from "vue"
+
+import ILucideChevronLeft from "~icons/lucide/chevron-left"
+import ILucideChevronRight from "~icons/lucide/chevron-right"
+import ILucideChevronsLeft from "~icons/lucide/chevrons-left"
+import ILucideChevronsRight from "~icons/lucide/chevrons-right"
+
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+
+defineOptions({
+	name: "WPagination",
+	inheritAttrs: false
+})
+
+const t = useInjectedI18n()
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<
+	& /** @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
+	}
+>(), {
+	customRoute: (route: string = "", i: number) => {
+		if (i <= 1) return { href: route, i: 1 }
+		return { href: `${route}${i}`, i }
+	},
+	siblingCount: 1,
+	defaultPage: 1,
+	itemsPerPage: 1
+})
+
+const current = defineModel<number>("current", { required: true })
+
+const emit = defineEmits<{
+	/**
+	 * Fired when a link is clicked. Can be used to prevent navigation. Is passed the href calculated by customRoute.
+	 */
+	(e: "link-click", event: MouseEvent, payload: { i: number, href: string }): void
+}>()
+
+function onLinkClick(event: MouseEvent, pageNum: number) {
+	const routeInfo = props.customRoute(props.route, pageNum)
+	emit("link-click", event, routeInfo)
+}
+
+const commonClasses = `
+	flex
+	items-center
+	justify-center
+	w-8
+	h-8
+	focus-outline
+	border-b-2
+	border-transparent
+	transition-all
+	outlined:rounded-sm
+`
+const pageClasses = `
+	${commonClasses}
+	focus-outline
+	hover:text-accent-600
+	hover:border-b-accent-500
+	hover:scale-125
+`
+
+const currentPageClasses = `
+	${commonClasses}
+	border-b-accent-500
+	scale-125
+`
+</script>
+

package/src/runtime/components/{LibPalette/LibPalette.stories.ts → WPalette/WPalette.stories.ts}

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-import LibPalette from "./LibPalette.vue"
+import WPalette from "./WPalette.vue"
 
 import { theme } from "../../theme.js"
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibPalette> = {
-	component: LibPalette,
+const meta: Meta<typeof WPalette> = {
+	component: WPalette,
 	title: "Components/Palette",
 	args: {
 		// theme,
@@ -15,14 +15,14 @@ const meta: Meta<typeof LibPalette> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibPalette>
+type Story = StoryObj<typeof WPalette>
 
 export const Primary: Story = {
 	render: args => ({
-		components: { ...components, LibPalette },
+		components: { ...components, WPalette },
 		setup: () => ({ args: { ...args, theme } }),
 		template: `
-			<LibPalette v-bind="{...args}">{{args.value}}</LibPalette>
+			<WPalette v-bind="{...args}">{{args.value}}</WPalette>
 		`
 	})
 }

package/src/runtime/components/{LibPalette/LibPalette.vue → WPalette/WPalette.vue}

@@ -25,24 +25,19 @@
 </div>
 </template>
 
-<script lang="ts">
-export default { name: "LibPalette" }
-</script>
-
-<script setup  lang="ts">
+<script setup lang="ts">
 import { keys } from "@alanscodelog/utils/keys"
 import type { Theme } from "metamorphosis"
 
-import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js"
+import type { BaseInteractiveProps } from "../../types/index.js"
 
 const props = withDefaults(defineProps<
-	& LinkableByIdProps
 	& BaseInteractiveProps
 	& {
 		theme?: Theme
 	}>(), {
 	theme: () => ({} as any),
-	unstyle: false, disabled: false, readonly: false, border: true
+	border: true
 })
 
 const exclude = ["--color-bg", "--color-fg"]