@witchcraft/ui 0.2.1-beta.2 → 0.2.1

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

@@ -1,5 +1,6 @@
 <template>
-<div :class="twMerge(`notification
+<div
+	:class="twMerge(`notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -13,14 +14,15 @@
 		gap-2
 		p-2 m-2
 	`,
-	($attrs as any).class)"
+		($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 	tabindex="0"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
 	<div class="notification--header flex-reverse flex justify-between">
-		<div v-if="notification.title"
+		<div
+			v-if="notification.title"
 			tabindex="0"
 			class="title
 				focus-outline flex
@@ -32,7 +34,8 @@
 		</div>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
-			<LibButton :border="false"
+			<LibButton
+				:border="false"
 				class="notification--copy-button text-neutral-700"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
@@ -48,21 +51,29 @@
 			</lib-button>
 		</div>
 	</div>
-	<div class="notification--message whitespace-pre-wrap" tabindex="0">
+	<div
+		class="notification--message whitespace-pre-wrap"
+		tabindex="0"
+	>
 		{{ notification.message }}
 	</div>
 	<div class="notification--footer flex items-end justify-between">
-		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
+		<div
+			v-if="notification.code"
+			class="code text-xs text-neutral-700 dark:text-neutral-300"
+		>
 			Code: {{ notification.code }}
 		</div>
 		<div class="notification--footer-spacer flex-1 py-1"/>
-		<div v-if="notification.options"
+		<div
+			v-if="notification.options"
 			class="notification--options
 				flex flex-wrap justify-end
 				gap-2
 			"
 		>
-			<lib-button :label="option"
+			<lib-button
+				:label="option"
 				:class="twMerge(`
 					notification--option-button
 				`,
@@ -78,8 +89,9 @@
 	</div>
 </div>
 </template>
+
 <script setup lang="ts">
-import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
+import { computed, type HTMLAttributes, ref, useAttrs } from "vue"
 
 import IFa6RegularCopy from "~icons/fa6-regular/copy"
 import IFa6SolidXmark from "~icons/fa6-solid/xmark"
@@ -91,30 +103,28 @@ import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
 import type { TailwindClassProp } from "../shared/props.js"
 
-
 defineOptions({
-	name: "lib-notification",
-	inheritAttrs: false,
+	name: "LibNotification",
+	inheritAttrs: false
 })
 const $attrs = useAttrs()
 
 const props = withDefaults(defineProps<Props>(), {
-	handler: undefined,
+	handler: undefined
 })
 
 const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
 
 /* Todo make this more flexible? */
-// eslint-disable-next-line @stylistic/space-in-parens
+
 const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
 
 const notificationEl = ref<null | HTMLElement>(null)
 defineExpose({
 	focus: () => {
 		notificationEl.value?.focus()
-	},
+	}
 })
-
 </script>
 
 <script lang="ts">
@@ -126,7 +136,7 @@ type RealProps = {
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 {}
 </script>

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

@@ -5,23 +5,20 @@ import { reactive, ref } from "vue"
 import LibNotifications from "./LibNotifications.vue"
 
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibNotifications> = {
 	component: LibNotifications,
 	title: "Components/Notifications",
 	args: {
 	// @ts-expect-error story only arg
-		withTitle: true,
-	},
+		withTitle: true
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibNotifications>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -40,7 +37,7 @@ export const Primary: Story = {
 					message: `This is a notification that requires action. Pick an option:`,
 					requiresAction: true,
 					options: ["Ok", "Default Answer", "Cancel"],
-					default: "Default Answer",
+					default: "Default Answer"
 				})
 			}
 			const notifyWithDangerousOption = () => {
@@ -50,7 +47,7 @@ export const Primary: Story = {
 					message: `This is a notification that has a dangerous option. Pick an option:`,
 					options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
 					default: "Default Answer",
-					dangerous: ["Dangerous Option"],
+					dangerous: ["Dangerous Option"]
 				})
 			}
 			const notifyNonCancellable = () => {
@@ -60,7 +57,7 @@ export const Primary: Story = {
 					message: `This is a non-cancellable notification. Pick an option:`,
 					options: ["Ok", "Default Answer"],
 					default: "Default Answer",
-					cancellable: false,
+					cancellable: false
 				})
 			}
 			const notifyNonCancellableRequiresAction = () => {
@@ -71,7 +68,7 @@ export const Primary: Story = {
 					requiresAction: true,
 					options: ["Ok", "Default Answer"],
 					default: "Default Answer",
-					cancellable: false,
+					cancellable: false
 				})
 			}
 			const notifyTimeoutable = () => {
@@ -79,7 +76,7 @@ export const Primary: Story = {
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
 					message: `This is a notification. No action required.`,
-					timeout: disableTimeout.value ? false : 2000,
+					timeout: disableTimeout.value ? false : 2000
 				})
 			}
 			return {
@@ -93,8 +90,8 @@ export const Primary: Story = {
 				disableTimeout,
 				args: {
 					outline: false,
-					...args,
-				},
+					...args
+				}
 			}
 		},
 		backgrounds: { disable: true },
@@ -118,7 +115,6 @@ export const Primary: Story = {
 			</template>
 		</lib-debug>
 	</lib-root>
-	`,
-	}),
+	`
+	})
 }
-

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

@@ -1,5 +1,6 @@
 <template>
-<TransitionGroup name="list"
+<TransitionGroup
+	name="list"
 	tag="div"
 	:class="twMerge(`notifications
 			absolute
@@ -13,7 +14,8 @@
 		`, ($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 >
-	<lib-notification class="pointer-events-auto"
+	<lib-notification
+		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
@@ -28,7 +30,8 @@
 	/>
 </Transition>
 <Transition>
-	<dialog v-show="topNotifications.length > 0"
+	<dialog
+		v-show="topNotifications.length > 0"
 		:id="id"
 		:class="twMerge(`notifications-modal
 			bg-transparent
@@ -40,7 +43,8 @@
 		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
 		<form>
-			<lib-notification v-if="topNotifications.length > 0 && topNotifications[0]"
+			<lib-notification
+				v-if="topNotifications.length > 0 && topNotifications[0]"
 				:handler="handler"
 				class="top-notification"
 				:notification="topNotifications[0]"
@@ -50,9 +54,10 @@
 	</dialog>
 </Transition>
 </template>
+
 <script setup lang="ts">
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
-import { type HTMLAttributes,nextTick, onBeforeUnmount, ref,shallowReactive, Transition, TransitionGroup } from "vue"
+import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue"
 
 import LibNotification from "./LibNotification.vue"
 
@@ -62,11 +67,10 @@ import { twMerge } from "../../utils/twMerge.js"
 import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-notifications",
-	inheritAttrs: false,
+	name: "LibNotifications",
+	inheritAttrs: false
 })
 
-
 const props = defineProps<Props>()
 
 const dialogEl = ref<HTMLDialogElement | null>(null)
@@ -121,21 +125,22 @@ for (const entry of handler.queue) { addNotification(entry) }
 onBeforeUnmount(() => {
 	handler.removeNotificationListener(notificationListener)
 })
-
 </script>
+
 <script lang="ts">
+import type { HTMLAttributes } from "vue"
 
-type RealProps =
-& LinkableByIdProps
-& {
-	/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
-	handler?: NotificationHandler
-}
+type RealProps
+	= & LinkableByIdProps
+		& {
+			/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+			handler?: NotificationHandler
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 {}
 </script>

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

@@ -4,22 +4,19 @@ import { ref } from "vue"
 
 import LibPagination from "./LibPagination.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibPagination> = {
 	component: LibPagination,
 	title: "Components/Pagination",
 	args: {
-		total: 10,
-	},
+		total: 10
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibPagination>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -35,7 +32,7 @@ export const Primary: Story = {
 			return {
 				changePage,
 				args,
-				num,
+				num
 			}
 		},
 		template: `
@@ -47,7 +44,6 @@ export const Primary: Story = {
 			<lib-simple-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
 
 			</lib-simple-input>
-		`,
-	}),
+		`
+	})
 }
-

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

@@ -7,70 +7,78 @@
 	role="navigation"
 	:aria-label="t('pagination.aria')"
 >
-	<slot v-if="prevLink.i > 0 && prevLink.i !== currentLink.i"
+	<slot
+		v-if="prevLink.i > 0 && prevLink.i !== currentLink.i"
 		name="link"
 		:i="prevLink.i"
 		:href="prevLink.href"
 		:text="t('pagination.previous-page')"
-		:aria-label=" t('pagination.aria.go-to-previous-page',{count:prevLink.i})"
+		:aria-label=" t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
 		:class="`pagination--link ${pageClasses}`"
 	>
 		<a
 			:class="`pagination--link ${pageClasses}`"
 			:href="prevLink.href"
-			:aria-label=" t('pagination.aria.go-to-previous-page', {count:prevLink.i})"
+			:aria-label=" t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
 		/>
 	</slot>
 	<div class="pagination--spacer flex-1"/>
-	<slot v-if="firstLink.i !== currentLink.i"
+	<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})"
+		:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
 		:class="`pagination--link pagination--first-link ${pageClasses}`"
 	>
 		{{ firstLink.href }}
 		<a
 			:class="`pagination--link pagination--first-link ${pageClasses}`"
 			:href="firstLink.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:firstLink.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
 		>
 			{{ firstLink.i }}
 		</a>
 	</slot>
-	<div v-if="prevLink.i - extraPages > firstLink.i" class="pagination--page-fill">
+	<div
+		v-if="prevLink.i - extraPages > firstLink.i"
+		class="pagination--page-fill"
+	>
 		...
 	</div>
 	<template
 		v-for="entry in extraPagesPrev"
 		:key="entry.i"
 	>
-		<slot name="link"
+		<slot
+			name="link"
 			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 		>
 			<a
 				:class="`pagination--link ${pageClasses}`"
 				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 			>
 				{{ entry.i }}
 			</a>
 		</slot>
 	</template>
-	<slot name="current"
+	<slot
+		name="current"
 		:class="`pagination--link ${currentPageClasses}`"
 		tabindex="0"
 		:i="currentLink.i"
-		:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
+		:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
 		:aria_current="true"
 	>
-		<div :class="`pagination--current-page a ${currentPageClasses}`"
+		<div
+			:class="`pagination--current-page a ${currentPageClasses}`"
 			tabindex="0"
-			:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
+			:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
 			aria-current="true"
 			@click="$event.preventDefault()"
 		>
@@ -81,36 +89,42 @@
 		v-for="entry in extraPagesNext"
 		:key="entry.i"
 	>
-		<slot name="link"
+		<slot
+			name="link"
 			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 		>
 			<a
 				:class="`pagination--link ${pageClasses}`"
 				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 			>
 				{{ entry.i }}
 			</a>
 		</slot>
 	</template>
-	<div v-if="nextLink.i + extraPages < total" class="pagination--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"
+	<slot
+		v-if="lastLink.i !== currentLink.i"
 		name="link"
 		:class="`pagination--link ${pageClasses}`"
 		:i="lastLink.i"
 		:href="lastLink.href"
 		:text="total"
-		:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
+		:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
 	>
 		<a
 			:class="`pagination--link ${pageClasses}`"
 			:href="lastLink.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
 		>
 			{{ total }}
 		</a>
@@ -123,24 +137,25 @@
 		:i="nextLink.i"
 		:href="nextLink.href"
 		:text="t('pagination.next-page')"
-		:aria-label="t('pagination.aria.go-to-next-page', {count:nextLink.i})"
+		:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
 	>
 		<a
 			:class="`pagination--link ${pageClasses}`"
 			:href="nextLink.href"
-			:aria-label="t('pagination.aria.go-to-next-page', {count:nextLink.i})"
+			:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
 		>
 			Next
 		</a>
 	</slot>
 </nav>
 </template>
+
 <script setup lang="ts">
-import { computed, type HTMLAttributes,useAttrs,watch } from "vue"
+import { computed, type HTMLAttributes, useAttrs, watch } from "vue"
 
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type TailwindClassProp } from "../shared/props.js"
+import type { TailwindClassProp } from "../shared/props.js"
 
 const t = useInjectedI18n()
 
@@ -166,8 +181,8 @@ const currentPageClasses = `
 	scale-125
 `
 defineOptions({
-	name: "lib-pagination",
-	inheritAttrs: false,
+	name: "LibPagination",
+	inheritAttrs: false
 })
 
 const props = withDefaults(defineProps<Props>(), {
@@ -178,7 +193,7 @@ const props = withDefaults(defineProps<Props>(), {
 		}
 		return { href: route + i.toString(), i }
 	},
-	extraPages: 3,
+	extraPages: 3
 })
 const $attrs = useAttrs()
 
@@ -216,10 +231,9 @@ const extraPagesNext = computed(() => [...Array(props.extraPages + 1)].map((_, i
 	if (num <= firstLink.value.i || num >= lastLink.value.i || num <= currentLink.value.i) return undefined
 	return props.customRoute(props.route, num)
 }).filter(entry => entry !== undefined).slice(0, props.extraPages) as HrefInfo[])
-
 </script>
-<script lang="ts">
 
+<script lang="ts">
 /**
  * Pagination component.
  *
@@ -231,7 +245,7 @@ const extraPagesNext = computed(() => [...Array(props.extraPages + 1)].map((_, i
  * ```
  */
 export default {
-	name: "lib-pagination",
+	name: "LibPagination"
 }
 type RealProps = {
 	/** The total number of pages. */
@@ -254,7 +268,7 @@ type RealProps = {
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 {}
 </script>

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

@@ -4,29 +4,25 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import LibPalette from "./LibPalette.vue"
 
 import { theme } from "../../theme.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibPalette> = {
 	component: LibPalette,
 	title: "Components/Palette",
 	args: {
 		// theme,
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibPalette>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components: { ...components, LibPalette },
 		setup: () => ({ args: { ...args, theme } }),
 		template: `
 			<LibPalette v-bind="{...args}">{{args.value}}</LibPalette>
-		`,
-	}),
+		`
+	})
 }
-

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

@@ -2,7 +2,10 @@
 <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">
+			<template
+				v-for="color, i in colors"
+				:key="color"
+			>
 				<div
 					:style="`background-color: var(${color});`"
 					:class="`theme-palette--item h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
@@ -23,27 +26,25 @@
 </template>
 
 <script lang="ts">
-export default { name: "lib-palette" }
+export default { name: "LibPalette" }
 </script>
 
 <script setup  lang="ts">
 import { keys } from "@alanscodelog/utils/keys"
-import { type Theme } from "metamorphosis"
-
-import { type BaseInteractiveProps,type LinkableByIdProps } from "../shared/props.js"
+import type { Theme } from "metamorphosis"
 
+import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js"
 
 const props = withDefaults(defineProps<
-& LinkableByIdProps
-& BaseInteractiveProps
-& {
-	theme: Theme
-}>(), {
+	& LinkableByIdProps
+	& BaseInteractiveProps
+	& {
+		theme?: Theme
+	}>(), {
 	theme: () => ({} as any),
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
 const exclude = ["--color-bg", "--color-fg"]
 const colors = keys(props.theme.css).filter(key => key.startsWith("--color") && !exclude.includes(key))
-
 </script>