@witchcraft/ui 0.2.1-beta.3 → 0.2.2

package/src/runtime/composables/useSuggestions.ts

@@ -1,20 +1,19 @@
 /* eslint-disable no-console */
-import { type AnyFunction } from "@alanscodelog/utils"
+import type { AnyFunction } from "@alanscodelog/utils"
 import { isBlank } from "@alanscodelog/utils/isBlank"
 import { isObject } from "@alanscodelog/utils/isObject"
 import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
 import { computed, type Ref, ref, toRaw, watch } from "vue"
 
-import { type SuggestionsEmits,type SuggestionsOptions } from "../components/shared/props.js"
-
+import type { SuggestionsEmits, SuggestionsOptions } from "../components/shared/props.js"
 
 /**
  * The logic for the suggestions component.
  *
  * Note that while object suggestions are supported, the `suggestionLabel` prop is required and $inputModel and $modelValue will still be string values (as returned by the suggestionLabel function).
  */
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+
 export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>(
 	$inputValue: Ref<string>,
 	$modelValue: Ref<TMultivalue extends true ? string[] : string>,
@@ -46,12 +45,12 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 	const defaultSuggestionsFilter = (input: string, items: TSuggestion[]): TSuggestion[] => input === ""
 		? [...items]
 		: items.filter(item => {
-			if (Array.isArray($modelValue.value)) {
+				if (Array.isArray($modelValue.value)) {
 				// always include selected values for unselecting
-				if ($modelValue.value.includes(getSuggestionLabel(item))) return true
-			}
-			return getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase())
-		})
+					if ($modelValue.value.includes(getSuggestionLabel(item))) return true
+				}
+				return getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase())
+			})
 	const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter)
 
 	const suggestionsList = computed(() => {
@@ -81,8 +80,8 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 
 	const openable = computed(() =>
 		opts.canOpen && (
-			(isBlank($inputValue.value) && opts.allowOpenEmpty) ||
-			suggestionAvailable.value
+			(isBlank($inputValue.value) && opts.allowOpenEmpty)
+			|| suggestionAvailable.value
 
 		)
 	)
@@ -99,7 +98,6 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 		return undefined
 	})
 
-
 	// methods
 	// returns true if the value was removed
 	function setValue(val: string): boolean {
@@ -135,12 +133,12 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 		}
 		$open.value = true
 	}
-	
+
 	function enterSuggestion(num: number, doClose: boolean = true): void {
 		if (num < -1 || num > (filteredSuggestions.value?.length ?? 0)) return
 		if (debug) console.log("enterSuggestion", num)
 		if (filteredSuggestions.value === undefined) return
-	
+
 		const suggestion = filteredSuggestions.value[num]
 		const val = getSuggestionLabel(suggestion)
 		const wasRemoved = setValue(val)
@@ -174,7 +172,7 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 			activeSuggestion.value = filteredSuggestions.value!.length - 1
 		}
 	}
-	
+
 	function toggleSuggestions(): void {
 		$open.value ? closeSuggestions() : openSuggestions()
 	}
@@ -202,7 +200,7 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 	function lastSuggestion(): void {
 		selectSuggestion(Infinity)
 	}
-	
+
 	function cancel(): void {
 		if (Array.isArray($modelValue.value)) {
 			$inputValue.value = ""
@@ -213,30 +211,29 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 		closeSuggestions()
 	}
 
-	
 	watch(() => opts.canOpen, val => {
 		if (!val) {
 			if (debug) console.log("canOpen changed to false, closing suggestions")
 			closeSuggestions()
 		}
 	})
-	
+
 	watch(openable, val => {
 		if (!val) {
 			if (debug) console.log("openable changed to false, closing suggestions")
 			closeSuggestions()
 		}
 	})
-	
+
 	watch(isValidSuggestion, () => {
 		if (!isValidSuggestion.value) {
 			if (debug) console.log("isValidSuggestion changed to false, opening suggestions")
 			openSuggestions()
 		}
 	})
-	
+
 	// sync vmodels and vmodel effects
-	
+
 	watch($modelValue, () => {
 		if (Array.isArray($modelValue.value)) {
 			$inputValue.value = ""
@@ -272,7 +269,7 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 			if (debug) console.log("input changed, suggestion available, opening suggestions")
 			openSuggestions()
 		}
-		
+
 		if (!opts.restrictToSuggestions && !Array.isArray($modelValue.value)) {
 			if (debug) console.log("input changed, unrestricted, setting modelValue")
 			setValue($inputValue.value)
@@ -282,16 +279,15 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 			selectSuggestion(suggestionsList.value.indexOf(exactlyMatchingSuggestion.value))
 		} else {
 			if (debug) console.log("input changed, not exactly matching, finding longest match")
-			
-			const i =
-				opts.suggestionSelector?.(filteredSuggestions.value ?? [], $inputValue.value)
-				?? defaultSuggestionSelector(filteredSuggestions.value ?? [], $inputValue.value)
+
+			const i
+				= opts.suggestionSelector?.(filteredSuggestions.value ?? [], $inputValue.value)
+					?? defaultSuggestionSelector(filteredSuggestions.value ?? [], $inputValue.value)
 
 			selectSuggestion(i)
 		}
 	})
 
-
 	return {
 		list: suggestionsList,
 		filtered: filteredSuggestions,
@@ -314,12 +310,11 @@ export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>
 		prev: prevSuggestion,
 		next: nextSuggestion,
 		first: firstSuggestion,
-		last: lastSuggestion,
+		last: lastSuggestion
 
 	}
 }
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function useSuggestionsInputAria(
 	id: Ref<string>,
 	$open: Ref<boolean>,
@@ -331,7 +326,7 @@ export function useSuggestionsInputAria(
 		"aria-controls": suggestions !== undefined ? `suggestions-${id.value}` : undefined,
 		role: suggestions ? "combobox" : undefined,
 		"aria-expanded": suggestions !== undefined ? $open.value : undefined,
-		"aria-activedescendant": $open.value ? `suggestion-${id.value}-${activeSuggestion.value}` : undefined,
+		"aria-activedescendant": $open.value ? `suggestion-${id.value}-${activeSuggestion.value}` : undefined
 	}))
 	return ariaInputProps
 }

package/src/runtime/directives/vDetectFlex.ts

@@ -7,7 +7,6 @@ import type { Directive } from "vue"
 import { globalResizeObserver } from "../globalResizeObserver.js"
 import type { ResizeCallback } from "../types/index.js"
 
-
 const observer = globalResizeObserver
 /**
  * Directive for detecting flex wrap on element. It will bind a resize-observer to the element to detect when it's children have wrapped and add a .wrapped class when they are.
@@ -56,7 +55,7 @@ function removeCallback(throttleTime: number): void {
 
 function callback(_rect: DOMRectReadOnly, el: Element): void {
 	const _ = elMap.get(el as HTMLElement)
-	if (!_) {unreachable()}
+	if (!_) { unreachable() }
 	const pos = _.vertical ? "x" : "y"
 	const dimension = _.vertical ? "width" : "height"
 
@@ -78,7 +77,6 @@ function callback(_rect: DOMRectReadOnly, el: Element): void {
 	const firstRect = firstChild.getBoundingClientRect()
 	const lastRect = lastChild.getBoundingClientRect()
 
-
 	// should work even if the flex items are different heights
 	// only exceptions i think are if the element aligns itself below another element somehow
 	// rounded to nearest 10th since getBoundingClientRect can have rounding errors
@@ -89,14 +87,13 @@ function callback(_rect: DOMRectReadOnly, el: Element): void {
 	}
 }
 
-
 export const vDetectFlex: Directive = {
 	mounted(el: HTMLElement, { value: { condition = true, vertical = false, throttleTime = 50, ignoreSelector = ".detect-flex-ignore" } = {} }: DetectFlexOptions) {
 		const _: PrivateState = {
 			vertical,
 			lastCondition: condition,
 			lastThrottleTime: throttleTime,
-			ignoreSelector,
+			ignoreSelector
 		}
 		elMap.set(el, _)
 		if (condition) {
@@ -106,7 +103,7 @@ export const vDetectFlex: Directive = {
 	},
 	updated(el: HTMLElement, { value: { condition = true, vertical = false, throttleTime = 50, ignoreSelector = ".detect-flex-ignore" } = {} }: DetectFlexOptions) {
 		const _ = elMap.get(el)
-		if (!_) {unreachable()}
+		if (!_) { unreachable() }
 
 		_.vertical = vertical
 		_.ignoreSelector = ignoreSelector
@@ -135,7 +132,7 @@ export const vDetectFlex: Directive = {
 	},
 	unmounted(el: HTMLElement, { value: { vertical = false, throttleTime = 50, ignoreSelector = ".detect-flex-ignore" } = {} }: DetectFlexOptions) {
 		const _ = elMap.get(el)
-		if (!_) {unreachable()}
+		if (!_) { unreachable() }
 		_.vertical = vertical
 		_.ignoreSelector = ignoreSelector
 		_.lastThrottleTime = throttleTime
@@ -147,7 +144,7 @@ export const vDetectFlex: Directive = {
 	},
 	getSSRProps() {
 		return {}
-	},
+	}
 }
 type DetectFlexOptions = {
 	value: {

package/src/runtime/directives/vExtractRootEl.ts

@@ -31,7 +31,7 @@ export const vExtractRootEl: Directive = {
 	},
 	getSSRProps() {
 		return {}
-	},
+	}
 }
 type Options = {
 	value: (el: HTMLElement | null) => void

package/src/runtime/directives/vResizableCols.ts

@@ -7,7 +7,6 @@ import type { Directive, Ref } from "vue"
 import { globalResizeObserver } from "../globalResizeObserver.js"
 import type { ResizableOptions, ResizeCallback } from "../types/index.js"
 
-
 const observer = globalResizeObserver
 type Data = {
 	margin: number
@@ -32,7 +31,7 @@ type ResizableElement = HTMLElement
 const defaultOpts: Omit<ResizableOptions, "colCount" | "widths" | "selector"> = {
 	fitWidth: true,
 	margin: "dynamic",
-	enabled: true,
+	enabled: true
 }
 
 const callback: ResizeCallback = (_rect: DOMRectReadOnly, el: Element): void => {
@@ -132,10 +131,9 @@ export const vResizableCols: Directive = {
 	},
 	getSSRProps() {
 		return {}
-	},
+	}
 }
 
-
 function setWidth(col: HTMLElement, amountInPx: number, el: ResizableElement): void {
 	const $el = getElInfo(el)
 	const width = Math.max($el.margin, amountInPx)
@@ -148,7 +146,6 @@ function setWidth(col: HTMLElement, amountInPx: number, el: ResizableElement): v
 	}
 }
 
-
 function getBox(el: Element): { x: number, width: number } {
 	const rect = el.getBoundingClientRect()
 	// the numbers need to be rounded or else the columns will start to shift
@@ -228,7 +225,6 @@ function createPointerMoveHandler(el: ResizableElement) {
 							return
 						}
 
-
 						setWidth(col, newWidth, el)
 						setWidth(colNext!, rightBox.width + diff, el)
 					}
@@ -309,7 +305,7 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		margin: opts.margin === "dynamic" ? gripWidth : opts.margin,
 		colCount: opts.colCount,
 		widths: opts.widths,
-		selector: opts.selector,
+		selector: opts.selector
 	}
 	elMap.set(el, $el)
 	const els = getColEls(el)

package/src/runtime/directives/vResizeObserver.ts

@@ -3,7 +3,6 @@ import type { Directive } from "vue"
 import { globalResizeObserver } from "../globalResizeObserver.js"
 import type { ResizeCallback } from "../types/index.js"
 
-
 const observer = globalResizeObserver
 const lastCondition = Symbol("lastCondition")
 const checkCallback = (cb: any): void => {
@@ -35,7 +34,7 @@ export const vResizeObserver: Directive = {
 	},
 	getSSRProps() {
 		return {}
-	},
+	}
 }
 type Options = {
 	value: {

package/src/runtime/globalResizeObserver.ts

@@ -4,7 +4,6 @@
 
 import { ResizeObserverWrapper } from "./helpers/resizeObserverWrapper.js"
 
-
 if (typeof ResizeObserver === "undefined") {
 	// eslint-disable-next-line no-console
 	console.warn("You are using a directive that uses a ResizeObserver or are importing something that uses this resize observer in a context (e.g. the server) where ResizeObserver does not exist.")

package/src/runtime/helpers/NotificationHandler.ts

@@ -6,10 +6,9 @@ import { isBlank } from "@alanscodelog/utils/isBlank"
 import { pretty } from "@alanscodelog/utils/pretty"
 import { setReadOnly } from "@alanscodelog/utils/setReadOnly"
 
-
 export class NotificationHandler<
 	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
-	TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>,
+	TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>
 > {
 	timeout: number = 5000
 
@@ -30,7 +29,7 @@ export class NotificationHandler<
 	constructor({
 		timeout,
 		stringifier,
-		maxHistory,
+		maxHistory
 	}: {
 		timeout?: NotificationHandler<TRawEntry>["timeout"]
 		stringifier?: NotificationHandler<TRawEntry>["stringifier"]
@@ -101,11 +100,10 @@ export class NotificationHandler<
 			timeout: rawEntry.timeout === true
 				? this.timeout
 				: rawEntry.timeout !== undefined && rawEntry.timeout !== false
-				? rawEntry.timeout
-				: undefined,
+					? rawEntry.timeout
+					: undefined
 		} as any as TEntry
 
-
 		if (rawEntry.cancellable === true || (rawEntry.cancellable === undefined && entry.options?.includes("Cancel"))) {
 			entry.cancellable = "Cancel" as any
 		}
@@ -120,8 +118,8 @@ export class NotificationHandler<
 
 	async notify<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry):
 	NotificationPromise<TNotifyEntry["options"][number] extends string
-			? TNotifyEntry["options"][number]
-			: "Ok" | "Cancel"> {
+		? TNotifyEntry["options"][number]
+		: "Ok" | "Cancel"> {
 		const entry = this._createEntry(rawEntry)
 		entry.promise = new Promise(_resolve => {
 			entry.resolve = _resolve
@@ -195,7 +193,7 @@ export type NotificationPromise<TOption extends string = string> = Promise<TOpti
 
 export type RawNotificationEntry<
 	TOptions extends string[] = ["Ok", "Cancel"],
-	TCancellable extends boolean | TOptions[number] = "Cancel",
+	TCancellable extends boolean | TOptions[number] = "Cancel"
 > = {
 	message: string
 	title?: string
@@ -215,7 +213,7 @@ export type RawNotificationEntry<
 }
 
 export type NotificationEntry<
-	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>,
+	TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>
 > = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
 	promise: NotificationPromise
 	resolve: AnyFunction
@@ -227,6 +225,4 @@ export type NotificationEntry<
 
 export type NotificationListener<TEntry extends NotificationEntry<any>> = (notification: TEntry, type: "added" | "resolved" | "deleted") => void
 
-
 export type NotificationStringifier<T extends NotificationEntry<any>> = (notification: T) => string
-

package/src/runtime/helpers/base64ToImg.ts

@@ -1,14 +1,13 @@
 export const base64ToImg = async (imageSrc: string): Promise<HTMLImageElement> => {
 	const img = new Image()
 
-	const loaded = new Promise((resolve => {
+	const loaded = new Promise(resolve => {
 		img.addEventListener("load", () => {
 			resolve(img)
 		})
-	})) as any as Promise<HTMLImageElement>
+	}) as any as Promise<HTMLImageElement>
 
 	img.src = imageSrc // must be set after
 	await loaded
 	return img
 }
-

package/src/runtime/helpers/createNoonUtcDate.ts

@@ -18,4 +18,3 @@ export function createNoonUtcDate(date: CalendarDate): ZonedDateTime {
 	)
 	return d
 }
-

package/src/runtime/helpers/defaultTranslationFunction.ts

@@ -30,4 +30,3 @@ export function defaultTranslationFunction(key: string, replacements?: Record<st
 	}
 	return value
 }
-

package/src/runtime/helpers/getTimeZoneList.ts

@@ -1,4 +1,3 @@
 export function getTimeZoneList(): string[] {
 	return Intl.supportedValuesOf("timeZone")
 }
-

package/src/runtime/helpers/readFile.ts

@@ -5,8 +5,8 @@ export const readFile = async <TType extends "DataUrl" | "ArrayBuffer" | "Binary
 ):
 Promise<
 	TType extends "ArrayBuffer"
-	? ArrayBuffer
-	: string
+		? ArrayBuffer
+		: string
 > => new Promise((resolve, reject) => {
 	const reader = new FileReader()
 	reader.addEventListener("load", () => {

package/src/runtime/helpers/resizeObserverWrapper.ts

@@ -1,6 +1,5 @@
 import type { ResizeCallback } from "../types/index.js"
 
-
 export class ResizeObserverWrapper {
 	observers: WeakMap<Element, Set<ResizeCallback>> = new WeakMap()
 

package/src/runtime/helpers/storybook.ts

@@ -2,7 +2,6 @@ import type { Ref } from "vue"
 
 import { hasModifiers } from "./hasModifiers.js"
 
-
 export const createRecorderHandler = (
 	recordingValue: Ref<string>,
 	recording: Ref<boolean>,
@@ -23,7 +22,7 @@ export const createRecorderHandler = (
 		recordingValue.value += ` ${e.key}`
 	},
 	mousedown(e: MouseEvent) {
-		const target = (e.target as any)
+		const target = e.target as any
 		const el = recordingEl.value
 		if (target === el || el?.contains(target)) {
 			return
@@ -34,7 +33,7 @@ export const createRecorderHandler = (
 	wheel(e: WheelEvent) {
 		recordingValue.value += ` ${e.deltaY > 0 ? "↓" : "↑"}`
 		e.preventDefault()
-	},
+	}
 })
 
 export const createRecorderWatchEffect = (recordingValue: Ref<string>, recording: Ref<boolean>, modelValue: Ref<string>, values?: Ref<string[]>) => () => {

package/src/runtime/main.lib.ts

@@ -9,7 +9,6 @@ export { VueComponentsPlugin } from "./vue/VueComponentsPlugin.js"
 
 import type * as components from "./components/index.js"
 
-
 type Components = typeof components
 
 /**
@@ -28,4 +27,3 @@ type Components = typeof components
 export type GlobalComponentTypes = {
 	[key in keyof Components]: Components[key]
 }
-

package/src/runtime/nuxt/plugins/vue-plugin.ts

@@ -4,16 +4,15 @@ import { defineNuxtPlugin, useRuntimeConfig } from "#imports"
 
 import { registerDirectives } from "../../vue/registerDirectives.js"
 
-
 export default defineNuxtPlugin({
 	name: "components-plugin",
-	async setup(nuxtApp): Promise<void> {
+	async setup(nuxtApp: any): Promise<void> {
 		const config = useRuntimeConfig().public.witchcraftUi
 		const app = nuxtApp.vueApp
 		const directives = (isArray(config?.directives)
-		? (await Promise.all(config.directives.map(async (name: string) => (import(`../../directives/${name}.ts`))))).map((_: any) => Object.values(_)[0])
+			? (await Promise.all(config.directives.map(async (name: string) => (import(`../../directives/${name}.ts`))))).map((_: any) => Object.values(_)[0])
 		// @ts-expect-error ts filetype needed for nuxt
-		: await import(`../../directives/index.ts`))
+			: await import(`../../directives/index.ts`))
 		registerDirectives(app as any, Object.values(directives))
-	},
+	}
 })

package/src/runtime/tailwind/themeConvertionOpts.ts

@@ -1,5 +1,4 @@
-import { type themeAsTailwindCss } from "metamorphosis/tailwind"
-
+import type { themeAsTailwindCss } from "metamorphosis/tailwind"
 
 export const themeConvertionOpts: Parameters<typeof themeAsTailwindCss>[1] = {
 	topLevel: ["number-spacing"],
@@ -10,6 +9,6 @@ export const themeConvertionOpts: Parameters<typeof themeAsTailwindCss>[1] = {
 		"color-warning": "500",
 		"color-ok": "500",
 		"color-error": "500",
-		"color-accent": "500",
-	},
+		"color-accent": "500"
+	}
 }

package/src/runtime/theme.ts

@@ -1,5 +1,4 @@
 import { baseTheme } from "metamorphosis/BaseTheme"
 import type { Theme } from "metamorphosis/Theme"
 
-
 export const theme = baseTheme as Theme

package/src/runtime/types/index.ts

@@ -1,5 +1,5 @@
 import type { ErrorW } from "@alanscodelog/utils"
-import { type Ref } from "vue"
+import type { Ref } from "vue"
 
 export type ResizableOptions = {
 	/**
@@ -51,7 +51,6 @@ export type ResizeCallback = (_rect: DOMRectReadOnly, el: Element) => void
 
 export type FileInputError = ErrorW<{ file: File, isValidMimeType: boolean, isValidExtension: boolean }>
 
-
 /** h 0-360+ (deg), s 0-100%, v 0-100%, a 0-1 */
 export type HsvaColor = { h: number, s: number, v: number, a?: number }
 /** rgb 0-255, 0-1 for alpha */
@@ -60,7 +59,7 @@ export type RgbaColor = { r: number, g: number, b: number, a?: number }
 export type Point = { x: number, y: number }
 
 export type ScrollNearContainerEdgesOptions = {
-	containerEl: Ref< HTMLElement | null>
+	containerEl: Ref<HTMLElement | null>
 	/** Margin inside contianer that allows scrolling. 10 by default. */
 	scrollMargin?: number
 	/** Margin around container that still allows scrolling. 0 by defualt. */
@@ -80,7 +79,7 @@ export type ScrollNearContainerEdgesOptions = {
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export type SimpleDOMRect = Omit<DOMRect, "toJSON">
- 
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export interface IPopupReference { getBoundingClientRect: () => SimpleDOMRect }
 export type PopupPosition = { x: number, y: number, maxWidth?: number, maxHeight?: number }

package/src/runtime/utils/notifyIfError.ts

@@ -13,7 +13,7 @@ export function notifyIfError<T>(
 	err: T, {
 		logger,
 		ns,
-		force = false,
+		force = false
 	}: {
 		logger?: { debug: (...args: any[]) => void }
 		/* Logger namespace. */
@@ -24,7 +24,7 @@ export function notifyIfError<T>(
 	if (force || err instanceof Error) {
 		const errMessage = {
 			message: err instanceof Error ? err.message : `Unknown error ${err as any}`,
-			code: err instanceof TypedError ? err.code : undefined,
+			code: err instanceof TypedError ? err.code : undefined
 		}
 		if (logger) {
 			logger.debug({

package/src/runtime/utils/twMerge.ts

@@ -3,8 +3,8 @@ import { extendTailwindMerge } from "tailwind-merge"
 const _twMergeExtend = {
 	extend: {
 		classGroups: {
-			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"]}],
-		},
+			"focus-outline": [{ "focus-outline": ["", "no-offset", "none"] }]
+		}
 	}
 } satisfies Parameters<typeof extendTailwindMerge>[0]
 

package/src/runtime/vue/VueComponentsPlugin.ts

@@ -11,6 +11,5 @@ export const VueComponentsPlugin: Plugin = {
 	install(app: App) {
 		registerComponents(app, components)
 		registerDirectives(app, directives)
-	},
+	}
 }
-

package/src/runtime/vue/registerComponents.ts

@@ -19,7 +19,6 @@ import type { App } from "vue"
  * ```
  */
 
-
 export const registerComponents = (app: App, components: Record<string, any>, prefix = ""): void => {
 	for (const key of Object.keys(components)) {
 		const component = (components as any)[key]