@witchcraft/ui 0.0.1 → 0.1.0

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

@@ -2,13 +2,14 @@
 <TransitionGroup name="list"
 	tag="div"
 	:class="twMerge(`notifications
-			fixed
+			absolute
 			z-50
 			inset-y-0 right-0
 			w-1/3
 			min-w-[300px]
 			pointer-events-none
 			overflow-hidden
+			flex flex-col
 		`, ($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 >
@@ -21,22 +22,25 @@
 	/>
 </TransitionGroup>
 <Transition>
-	<div v-show="topNotifications.length > 0"/>
+	<div
+		v-show="topNotifications.length > 0"
+		:class="twMerge(`notifications--none`, ($attrs as any).class)"
+	/>
 </Transition>
 <Transition>
 	<dialog v-show="topNotifications.length > 0"
 		:id="id"
-		class="modal
+		:class="twMerge(`notifications-modal
 			bg-transparent
 			p-0
 			backdrop:bg-black/50
 			backdrop:p-5
-		"
+		`, ($attrs as any).class)"
 		ref="dialogEl"
-		@click.self.prevent="NotificationHandler.dismiss(topNotifications[0])"
+		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
 		<form>
-			<lib-notification v-if="topNotifications.length > 0"
+			<lib-notification v-if="topNotifications.length > 0 && topNotifications[0]"
 				:handler="handler"
 				class="top-notification"
 				:notification="topNotifications[0]"
@@ -48,10 +52,11 @@
 </template>
 <script setup lang="ts">
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
-import { type HTMLAttributes,nextTick, onBeforeUnmount, type PropType, ref, shallowReactive } from "vue"
+import { type HTMLAttributes,nextTick, onBeforeUnmount, ref,shallowReactive, Transition, TransitionGroup } from "vue"
 
 import LibNotification from "./LibNotification.vue"
 
+import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
 import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { twMerge } from "../../utils/twMerge.js"
 import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
@@ -108,11 +113,14 @@ const notificationListener = (entry: NotificationEntry, type: "added" | "resolve
 		addNotification(entry)
 	}
 }
-props.handler.addNotificationListener(notificationListener)
 
-for (const entry of props.handler.queue) { addNotification(entry) }
+const handler = props.handler ?? useNotificationHandler()
+
+handler.addNotificationListener(notificationListener)
+
+for (const entry of handler.queue) { addNotification(entry) }
 onBeforeUnmount(() => {
-	props.handler.removeNotificationListener(notificationListener)
+	handler.removeNotificationListener(notificationListener)
 })
 
 </script>
@@ -121,7 +129,8 @@ onBeforeUnmount(() => {
 type RealProps =
 & LinkableByIdProps
 & {
-	handler: NotificationHandler
+	/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+	handler?: NotificationHandler
 }
 
 interface Props

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

@@ -44,9 +44,9 @@ export const Primary: Story = {
 					<a v-bind="linkProps" @click="changePage($event, linkProps.i)">{{ linkProps.text ?? linkProps.i }}</a>
 				</template>
 			</lib-pagination>
-			<lib-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
+			<lib-simple-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
 
-			</lib-input>
+			</lib-simple-input>
 		`,
 	}),
 }

package/src/runtime/components/LibPagination/LibPagination.vue

@@ -1,6 +1,7 @@
 <template>
 <nav
 	:class="twMerge(`
+		pagination--wrapper
 		flex flex-wrap items-center justify-center gap-2
 	`, ($attrs as any).class)"
 	role="navigation"
@@ -12,33 +13,33 @@
 		:href="prevLink.href"
 		:text="t('pagination.previous-page')"
 		:aria-label=" t('pagination.aria.go-to-previous-page',{count:prevLink.i})"
-		:class="pageClasses"
+		:class="`pagination--link ${pageClasses}`"
 	>
 		<a
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:href="prevLink.href"
 			:aria-label=" t('pagination.aria.go-to-previous-page', {count:prevLink.i})"
 		/>
 	</slot>
-	<div class="flex-1"/>
+	<div class="pagination--spacer flex-1"/>
 	<slot v-if="firstLink.i !== currentLink.i"
 		name="link"
 		:i="0"
 		:href="firstLink.href"
 		:text="firstLink.i"
 		:aria-label="t('pagination.aria.go-to-page', {count:firstLink.i})"
-		:class="pageClasses"
+		:class="`pagination--link pagination--first-link ${pageClasses}`"
 	>
 		{{ firstLink.href }}
 		<a
-			:class="pageClasses"
+			:class="`pagination--link pagination--first-link ${pageClasses}`"
 			:href="firstLink.href"
 			:aria-label="t('pagination.aria.go-to-page', {count:firstLink.i})"
 		>
 			{{ firstLink.i }}
 		</a>
 	</slot>
-	<div v-if="prevLink.i - extraPages > firstLink.i" class="page-fill">
+	<div v-if="prevLink.i - extraPages > firstLink.i" class="pagination--page-fill">
 		...
 	</div>
 	<template
@@ -46,13 +47,13 @@
 		:key="entry.i"
 	>
 		<slot name="link"
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
 			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
 		>
 			<a
-				:class="pageClasses"
+				:class="`pagination--link ${pageClasses}`"
 				:href="entry.href"
 				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
 			>
@@ -61,15 +62,14 @@
 		</slot>
 	</template>
 	<slot name="current"
-		:class="currentPageClasses"
+		:class="`pagination--link ${currentPageClasses}`"
 		tabindex="0"
 		:i="currentLink.i"
 		:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
 		:aria_current="true"
 	>
-		<div class="a"
+		<div :class="`pagination--current-page a ${currentPageClasses}`"
 			tabindex="0"
-			:class="currentPageClasses"
 			:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
 			aria-current="true"
 			@click="$event.preventDefault()"
@@ -82,13 +82,13 @@
 		:key="entry.i"
 	>
 		<slot name="link"
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
 			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
 		>
 			<a
-				:class="pageClasses"
+				:class="`pagination--link ${pageClasses}`"
 				:href="entry.href"
 				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
 			>
@@ -96,29 +96,29 @@
 			</a>
 		</slot>
 	</template>
-	<div v-if="nextLink.i + extraPages < total" class="page-fill" aria-hidden="true">
+	<div v-if="nextLink.i + extraPages < total" class="pagination--page-fill" aria-hidden="true">
 		...
 	</div>
 	<slot v-if="lastLink.i !== currentLink.i"
 		name="link"
-		:class="pageClasses"
+		:class="`pagination--link ${pageClasses}`"
 		:i="lastLink.i"
 		:href="lastLink.href"
 		:text="total"
 		:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
 	>
 		<a
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:href="lastLink.href"
 			:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
 		>
 			{{ total }}
 		</a>
 	</slot>
-	<div class="flex-1"/>
+	<div class="pagination--spacer flex-1"/>
 	<slot
 		v-if="nextLink.i <= total && nextLink.i !== currentLink.i"
-		:class="pageClasses"
+		:class="`pagination--link ${pageClasses}`"
 		name="link"
 		:i="nextLink.i"
 		:href="nextLink.href"
@@ -126,7 +126,7 @@
 		:aria-label="t('pagination.aria.go-to-next-page', {count:nextLink.i})"
 	>
 		<a
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:href="nextLink.href"
 			:aria-label="t('pagination.aria.go-to-next-page', {count:nextLink.i})"
 		>

package/src/runtime/components/LibPalette/LibPalette.vue

@@ -1,11 +1,11 @@
 <template>
-<div class="flex h-full flex-col items-center justify-center ">
-	<div class="container mx-auto ">
+<div class="theme-palette flex h-full flex-col items-center justify-center ">
+	<div class="theme-palette--container mx-auto ">
 		<div class="grid grid-cols-11 gap-2 gap-y-10 px-10">
 			<template v-for="color, i in colors" :key="color">
 				<div
 					:style="`background-color: var(${color});`"
-					:class="`h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
+					:class="`theme-palette--item h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
 				>
 					{{ [5, 16, 27, 38, 49].includes(i) ? 'Text':'' }}
 				</div>

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

@@ -61,14 +61,14 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<lib-input
+			<lib-simple-input
 				:suggestions="['TL', 'TR', 'BL', 'BR']"
 				:restrict-to-suggestions="true"
 				:suggestions-filter="(_, items) => items"
 				:label="'Button Position'"
 				v-model="buttonPos"
 			>
-			</lib-input>
+			</lib-simple-input>
 			<div>
 				<label>Auto Rotate Position</label>
 				<input type="checkbox" v-model="autoRotatePos">

package/src/runtime/components/LibPopup/LibPopup.vue

@@ -6,21 +6,30 @@
 />
 <!-- <Transition> -->
 <component
+	v-if="modelValue || useDialogForBackdrop"
 	:id="id ?? fallbackId"
 	:class="twMerge(
-		useBackdrop && `bg-transparent
+		useBackdrop && useDialogForBackdrop && `
+			popup--backdrop
+			bg-transparent
 			p-0
 			backdrop:bg-transparent
 		`,
+		modelValue && useBackdrop && !useDialogForBackdrop && `
+			popup--backdrop
+			z-100
+			fixed
+			inset-0
+		`,
 		$attrs.class as any
 	)"
 	v-bind="{...$attrs, class:undefined}"
-	:is="useBackdrop ? 'dialog' : 'div'"
+	:is="useDialogForBackdrop ? 'dialog' : 'div'"
 	ref="dialogEl"
 	@mousedown.self="handleMouseup"
 >
-	<div v-if="useBackdrop || modelValue"
-		:class="`fixed ${props.avoidRepositioning ? 'transition-[top,left]' : ''}`"
+	<div v-if="modelValue"
+		:class="`popup z-100 fixed ${props.avoidRepositioning ? 'transition-[top,left]' : ''}`"
 		:style="`
 		top:${pos.y}px;
 		left:${pos.x}px;
@@ -41,7 +50,7 @@
 <script setup lang="ts">
 // eslint-disable-next-line simple-import-sort/imports
 import { onMounted, nextTick, ref, useAttrs, watch , type HTMLAttributes } from "vue"
-import { getFallbackId, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
+import { getFallbackId, type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js"
 
 import { twMerge } from "../../utils/twMerge.js"
 import { castType } from "@alanscodelog/utils/castType.js"
@@ -52,13 +61,22 @@ const fallbackId = getFallbackId()
 // eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	useBackdrop: true,
+	useDialogForBackdrop: false,
 	// vue is getting confused when the prop type can also be a function
 	preferredHorizontal: () => ["center-most", "either"] satisfies Props["preferredHorizontal"],
 	preferredVertical: () => ["top", "bottom", "either"] satisfies Props["preferredVertical"] ,
 	avoidRepositioning: false,
+	canClose: true,
 })
 const $attrs = useAttrs()
-defineOptions({ name: "lib-popup" })
+defineOptions({
+	name: "lib-popup",
+	inheritAttrs: false
+})
+
+const emit = defineEmits<{
+	(e: "close"): void
+}>()
 
 
 const dialogEl = ref<HTMLDialogElement | null>(null)
@@ -97,7 +115,6 @@ const recompute = (force: boolean = false): void => {
 		const canBePositionedWithoutButton =
 		(horzHasCenterScreen || typeof props.preferredHorizontal === "function")
 		&& (vertHasCenterScreen || typeof props.preferredVertical === "function")
-
 		if (!popupEl.value || !dialogEl.value || (!buttonEl.value && !canBePositionedWithoutButton)) {
 			pos.value = {} as any
 			return
@@ -310,17 +327,20 @@ const show = () => {
 	if (!isOpen) {
 		isOpen = true
 		modelValue.value = isOpen
-		if (props.useBackdrop) dialogEl.value?.showModal()
+		if (props.useBackdrop && props.useDialogForBackdrop) dialogEl.value?.showModal()
 		recompute(true)
 	}
 }
 
 const close = () => {
 	if (isOpen) {
+		const res = props.canClose ?? false
+		emit("close")
+		if (res === false) return
 		isOpen = false
 		modelValue.value = isOpen
 		pos.value.maxWidth = undefined
-		if (props.useBackdrop) dialogEl.value?.close()
+		if (props.useBackdrop && props.useDialogForBackdrop) dialogEl.value?.close()
 	}
 }
 
@@ -375,63 +395,7 @@ defineExpose({
 
 type RealProps =
 & LinkableByIdProps
-& {
-	useBackdrop?: boolean
-	/**
-	 * The preferred horizontal positioning of the popup. The first position in the array to fit is used.
-	 *
-	 * All elements need to have box-sizing: border-box set. Also note that while the component should work with dynamic popup sizes, in practice there's issues with the positioning being slightly off. Giving the popup element a static size is better. If you need margins around the popup, this can be done with a wrapper element + padding.
-	 *
-	 * The positions `right`/`left`/`top`/`bottom` are relative to the opposite side of the button element so as to try not to cover the triggering button.
-	 *
-	 * So positioning `right` and `left` look like this:
-	 *
-	 * ```
-	 * // right
-	 *         [button]
-	 *         [----popup----]
-	 *
-	 * // left
-	 *         [button]
-	 *  [----popup----]
-	 * ```
-	 *
-	 * Positions `*-most` try to position the popup as close to that side of the screen as possible, otherwise limiting the popup to that edge. For example:
-	 *
-	 * ```
-	 * [--------------screen---------------]
-	 * // right-most
-	 *           [button]
-	 *                   [----popup----]
-	 * // near the edge:
-	 *                 [button]
-	 *                      [----popup----]
-	 * ```
-	 *
-	 * There is also the `center-screen` position, which centers the popup on the screen.
-	 *
-	 * These last two (`*-most` and `center-screen`) are greedy, they will always find a position that fits. Positions listed after are ignored.
-	 *
-	 * You can also specify a function instead which is given some additional information regarding the space around the button reference element. It should a number for the x position (or y, if preferredVertical).
-	 *
-	 * If you only need to slightly modify	the position, you can use the `modifyPosition` option instead.
-	 */
-	preferredHorizontal?: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | PopupPositioner
-	/** See `preferredHorizontal`. */
-	preferredVertical?: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | PopupPositioner
-	/**
-	 * When the user scrolls or resizes, normally the entire popup position is recomputed, taking into account the preferred positioning.
-	 *
-	 * This can cause it to shift around.
-	 *
-	 * Set this to true to only shift the popup depending on how much the button element moved and avoid recalculating the best position.
-	 */
-	avoidRepositioning?: boolean
-	/**
-	 * Allows modifying the calculated position, to for example, clamp it.
-	 */
-	modifyPosition?: PopupPositionModifier
-}
+& PopupProps
 
 interface Props
 	extends

package/src/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -3,6 +3,7 @@
 	<div v-if="!hide"
 		:id="id ?? fallbackId"
 		:class="twMerge(`
+			progress-bar
 			w-[200px]
 			whitespace-nowrap
 			overflow-x-scroll
@@ -47,7 +48,7 @@
 		v-bind="{...$attrs, class:undefined}"
 		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
 	>
-		<div class="label-wrapper relative flex-1">
+		<div class="procgress-bar--label-wrapper relative flex-1">
 			<span class="before:content-vertical-holder"/>
 			<Transition>
 				<slot>
@@ -71,6 +72,7 @@
 					<label
 						v-if="!psuedoHide"
 						class="
+							progress-bar--label
 							contrast-label
 							pointer-events-none
 							absolute

package/src/runtime/components/LibRecorder/LibRecorder.vue

@@ -43,7 +43,7 @@
 >
 	<!-- :aria-description="recording ? recordingTitle : ''" -->
 	<div
-		:class="twMerge(`recorder-indicator
+		:class="twMerge(`recorder--indicator
 				inline-block
 				bg-red-700
 				rounded-full
@@ -62,7 +62,7 @@
 		)"
 		ref="recorderIndicatorEl"
 	/>
-	<div class="recorder-value before:content-vertical-holder truncate">
+	<div class="recorder--value before:content-vertical-holder truncate">
 		{{ recording
 			? recordingValue ?? t("recorder.recording")
 			: tempValue }}

package/src/runtime/components/LibRoot/LibRoot.vue

@@ -32,6 +32,7 @@
 			($attrs as any).attrs?.class)"
 	>
 		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
+		<Notifications v-if="useNotifications && isClientSide"/>
 		<slot/>
 	</div>
 </div>
@@ -44,12 +45,15 @@ import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref
 
 import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
 import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js"
 import { useSetupI18n } from "../../composables/useSetupI18n.js"
 import { useSetupLocale } from "../../composables/useSetupLocale.js"
 import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js"
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { theme as defaultTheme } from "../../theme.js"
 import { twMerge } from "../../utils/twMerge.js"
+import Notifications from "../LibNotifications/LibNotifications.vue"
 import TestControls from "../TestControls/TestControls.vue"
 
 const $attrs = useDivideAttrs(["wrapper"])
@@ -66,6 +70,8 @@ const props = withDefaults(defineProps<{
 	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
 	isClientSide?: boolean
 	useBuiltinTranslations?: boolean
+	useNotifications?: boolean
+	notificationHandler?: NotificationHandler
 }>(), {
 	theme: undefined,
 	testWrapperMode: false,
@@ -74,7 +80,9 @@ const props = withDefaults(defineProps<{
 	id: "app",
 	getRef: undefined,
 	isClientSide: true,
-	useBuiltinTranslations: true
+	useBuiltinTranslations: true,
+	useNotifications: true,
+	notificationHandler: undefined
 })
 
 const el = ref<HTMLElement | null>(null)
@@ -85,6 +93,11 @@ function handleRef(_: Element | ComponentPublicInstance | null): void {
 	props.getRef?.(_)
 }
 
+if (props.useNotifications) {
+	const handler = props.notificationHandler ?? new NotificationHandler()
+	useNotificationHandler(handler, props.isClientSide)
+}
+
 const autoOutline = useAccesibilityOutline(el).outline
 
 const showOutline = computed(() => (props.outline && autoOutline.value) || props.forceOutline)

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

@@ -7,7 +7,7 @@ import * as components from "../index.js"
 
 const meta = {
 	component: components.LibSimpleInput,
-	title: "Components/SimpleInput",
+	title: "Components/Input",
 	args: {
 		modelValue: "Value",
 		placeholder: "Placeholder",

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -2,7 +2,7 @@
 <input
 	:id="id ?? fallbackId"
 	:class="twMerge(`
-			input
+			simple-input
 			flex-1
 			grow-[999999]
 			rounded-sm
@@ -48,7 +48,7 @@
 			placeholder:text-danger-700
 			border-danger-700
 			focus:border-danger-700
-			outlined:!ring-danger-700
+			outlined:!outline-danger-700
 			text-danger-800
 			dark:text-danger-400
 			dark:placeholder:text-danger-700
@@ -71,13 +71,10 @@
 
 
 <script lang="ts" setup generic="T">
-import { keys } from "@alanscodelog/utils/keys.js"
-import { pick } from "@alanscodelog/utils/pick.js"
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { castType } from "@alanscodelog/utils/utils"
-import { getCurrentInstance, type InputHTMLAttributes, type InputTypeHTMLAttribute,toRef,useAttrs } from "vue"
+import { type InputHTMLAttributes, useAttrs } from "vue"
 
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { hasModifiers } from "../../helpers/hasModifiers.js"
 import { twMerge } from "../../utils/twMerge.js"
 import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
@@ -115,6 +112,7 @@ function handleKeydown(e: KeyboardEvent) {
 		emit("submit", modelValue.value)
 	}
 }
+usePreHydrationValue(props.id ?? fallbackId, modelValue)
 
 </script>