@witchcraft/ui 0.2.1-beta.3 → 0.2.2

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>

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

@@ -5,22 +5,19 @@ import { computed, ref, watch } from "vue"
 import LibPopup from "./LibPopup.vue"
 
 import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibPopup> = {
 	component: LibPopup,
 	title: "Components/Popup",
 	args: {
 
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibPopup>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -51,13 +48,12 @@ export const Primary: Story = {
 				}
 			})
 
-
 			return {
 				args,
 				buttonPos,
 				autoRotatePos,
 				buttonStyle,
-				value,
+				value
 			}
 		},
 		template: `
@@ -91,22 +87,22 @@ export const Primary: Story = {
 				</template>
 			</lib-popup>
 			</div>
-			`,
-	}),
+			`
+	})
 }
 export const PopupNoShift = {
 	...Primary,
 	args: {
-		avoidRepositioning: true,
-		
+		avoidRepositioning: true
+
 	}
 }
 /** When the popup is too wide, it's positioned to the left and overflow scroll is set with an invisible scrollbar. */
 export const PopupTooBig = {
 	...Primary,
 	args: {
-		width: "110vw",
-	},
+		width: "110vw"
+	}
 }
 export const PopupCenterScreen = {
 	...Primary,
@@ -114,17 +110,17 @@ export const PopupCenterScreen = {
 		width: "500px",
 		height: "500px",
 		preferredHorizontal: ["center-screen"],
-		preferredVertical: ["center-screen"],
-	},
+		preferredVertical: ["center-screen"]
+	}
 }
 export const PopupRightBottomMost = {
 	...Primary,
 	args: {
 		width: "500px",
 		height: "500px",
-		preferredHorizontal: [ "right-most"],
-		preferredVertical: [ "bottom-most"],
-	},
+		preferredHorizontal: ["right-most"],
+		preferredVertical: ["bottom-most"]
+	}
 }
 export const PopupLeftTopMost = {
 	...Primary,
@@ -132,8 +128,8 @@ export const PopupLeftTopMost = {
 		width: "500px",
 		height: "500px",
 		preferredHorizontal: ["left-most"],
-		preferredVertical: ["top-most"],
-	},
+		preferredVertical: ["top-most"]
+	}
 }
 
 export const PopupCenterMost = {
@@ -142,8 +138,8 @@ export const PopupCenterMost = {
 		width: "500px",
 		height: "500px",
 		preferredHorizontal: ["center-most"],
-		preferredVertical: ["center-most"],
-	},
+		preferredVertical: ["center-most"]
+	}
 }
 export const LeftMenuShapeExample = {
 	...Primary,
@@ -152,6 +148,6 @@ export const LeftMenuShapeExample = {
 		height: "500px",
 		preferredHorizontal: ["left-most"],
 		preferredVertical: ["center-most"],
-		avoidRepositioning: true,
-	},
+		avoidRepositioning: true
+	}
 }

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

@@ -1,8 +1,9 @@
 <!-- Popover API WHEN :sob:
 	#awaiting https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility -->
 <template>
-<slot name="button"
-	:extract-el="(_:any)=> buttonEl = _"
+<slot
+	name="button"
+	:extract-el="(_:any) => buttonEl = _"
 />
 <!-- <Transition> -->
 <component
@@ -23,12 +24,13 @@
 		`,
 		$attrs.class as any
 	)"
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 	:is="useDialogForBackdrop ? 'dialog' : 'div'"
 	ref="dialogEl"
 	@mousedown.self="handleMouseup"
 >
-	<div v-if="modelValue"
+	<div
+		v-if="modelValue"
 		:class="`popup z-100 fixed ${props.avoidRepositioning ? 'transition-[top,left]' : ''}`"
 		:style="`
 		top:${pos.y}px;
@@ -49,13 +51,13 @@
 
 <script setup lang="ts">
 // eslint-disable-next-line simple-import-sort/imports
-import { onMounted, nextTick, ref, useAttrs, watch , type HTMLAttributes } from "vue"
+import { onMounted, ref, useAttrs, watch, type HTMLAttributes } from "vue"
 import { getFallbackId, type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js"
 
 import { twMerge } from "../../utils/twMerge.js"
 import { castType } from "@alanscodelog/utils/castType"
 import { isArray } from "@alanscodelog/utils/isArray"
-import type { IPopupReference, PopupPosition, PopupPositioner, PopupPositionModifier, SimpleDOMRect } from "../../types/index.js"
+import type { IPopupReference, PopupPosition, SimpleDOMRect } from "../../types/index.js"
 
 const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
@@ -63,13 +65,13 @@ const props = withDefaults(defineProps<Props>(), {
 	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"] ,
+	preferredVertical: () => ["top", "bottom", "either"] satisfies Props["preferredVertical"],
 	avoidRepositioning: false,
-	canClose: true,
+	canClose: true
 })
 const $attrs = useAttrs()
 defineOptions({
-	name: "lib-popup",
+	name: "LibPopup",
 	inheritAttrs: false
 })
 
@@ -77,7 +79,6 @@ const emit = defineEmits<{
 	(e: "close"): void
 }>()
 
-
 const dialogEl = ref<HTMLDialogElement | null>(null)
 const popupEl = ref<IPopupReference | null>(null)
 const buttonEl = ref<IPopupReference | null>(null)
@@ -87,7 +88,6 @@ const pos = ref<PopupPosition>({} as any)
 const modelValue = defineModel<boolean>({ default: false })
 let isOpen = false
 
-
 /**
  * We don't have access to the dialog backdrop and without extra styling, it's of 0 width/height, positioned in the center of the screen, with margins taking up all the space.
  *
@@ -101,19 +101,19 @@ const getDialogBoundingRect = (): SimpleDOMRect => ({
 	top: 0,
 	bottom: 0,
 	left: 0,
-	right: 0,
+	right: 0
 })
 let lastButtonElPos: SimpleDOMRect | undefined
 const recompute = (force: boolean = false): void => {
 	requestAnimationFrame(() => {
 		const horzHasCenterScreen = isArray(props.preferredHorizontal)
-		&& props.preferredHorizontal[0] === "center-screen"
+			&& props.preferredHorizontal[0] === "center-screen"
 		const vertHasCenterScreen = isArray(props.preferredVertical)
-		&& props.preferredVertical[0] === "center-screen"
-		
-		const canBePositionedWithoutButton =
-		(horzHasCenterScreen || typeof props.preferredHorizontal === "function")
-		&& (vertHasCenterScreen || typeof props.preferredVertical === "function")
+			&& props.preferredVertical[0] === "center-screen"
+
+		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
@@ -128,7 +128,6 @@ const recompute = (force: boolean = false): void => {
 
 		let finalPos: { x: number, y: number, maxWidth?: number, maxHeight?: number } = {} as any
 
-
 		if (!force && modelValue.value && props.avoidRepositioning && buttonEl.value && lastButtonElPos) {
 			const shiftX = buttonEl.value.getBoundingClientRect().x - lastButtonElPos.x
 			const shiftY = buttonEl.value.getBoundingClientRect().y - lastButtonElPos.y
@@ -149,7 +148,7 @@ const recompute = (force: boolean = false): void => {
 			topFromCenter: 0,
 			bottomFromCenter: 0,
 			top: 0,
-			bottom: 0,
+			bottom: 0
 		}
 		if (el) {
 			space.left = (el.x + el.width) - bg.x
@@ -169,7 +168,6 @@ const recompute = (force: boolean = false): void => {
 		if (typeof preferredHorizontal === "function") {
 			finalPos.x = preferredHorizontal(el, popup, bg, space)
 		} else {
-			/* eslint-disable no-labels */
 			outerloop:
 			for (const type of preferredHorizontal) {
 				switch (type) {
@@ -184,8 +182,8 @@ const recompute = (force: boolean = false): void => {
 					case "center-most":
 					case "center":
 						castType<DOMRect>(el)
-						if (space.leftFromCenter >= (popup.width / 2) &&
-						space.rightFromCenter >= (popup.width / 2)) {
+						if (space.leftFromCenter >= (popup.width / 2)
+							&& space.rightFromCenter >= (popup.width / 2)) {
 							finalPos.x = el.x + (el.width / 2) - (popup.width / 2)
 							break outerloop
 						}
@@ -216,7 +214,7 @@ const recompute = (force: boolean = false): void => {
 						} else {
 							finalPos.x = bg.x + bg.width - popup.width; break outerloop
 						}
-				
+
 					case "right":
 						castType<DOMRect>(el)
 						if (space.right >= popup.width) {
@@ -284,8 +282,8 @@ const recompute = (force: boolean = false): void => {
 					case "center-most":
 					case "center":
 						castType<DOMRect>(el)
-						if (space.topFromCenter >= (popup.height / 2) &&
-						space.bottomFromCenter >= (popup.height / 2)) {
+						if (space.topFromCenter >= (popup.height / 2)
+							&& space.bottomFromCenter >= (popup.height / 2)) {
 							finalPos.y = el.y + (el.height / 2) - (popup.height / 2)
 							break outerloop
 						}
@@ -313,7 +311,7 @@ const recompute = (force: boolean = false): void => {
 		}
 		finalPos.maxWidth = maxWidth ?? undefined
 		finalPos.maxHeight = maxHeight ?? undefined
-		/* eslint-enable no-labels */
+
 		if (props.modifyPosition) {
 			finalPos = props.modifyPosition(finalPos, el, popup, bg, space)
 		}
@@ -369,7 +367,6 @@ watch([modelValue, popupEl], () => {
 	}
 })
 
-
 const handleMouseup = ($event: MouseEvent) => {
 	$event.preventDefault()
 	toggle()
@@ -385,20 +382,19 @@ defineExpose({
 	},
 	setBackground: (el: IPopupReference | null) => {
 		backgroundEl.value = el
-	},
+	}
 
 })
-
 </script>
-<script lang="ts">
 
-type RealProps =
-& LinkableByIdProps
-& PopupProps
+<script lang="ts">
+type RealProps
+	= & LinkableByIdProps
+		& PopupProps
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps { }
 </script>