@witchcraft/ui 0.2.1-beta.2 → 0.2.1

package/src/runtime/composables/useDarkMode.ts

@@ -1,5 +1,4 @@
-import { computed, type InjectionKey, onMounted, provide, type Ref,ref, watch } from "vue"
-
+import { computed, type InjectionKey, onMounted, provide, type Ref, ref, watch } from "vue"
 
 const defaultLocalStorageKey = "prefersColorSchemeDark"
 const defaultOrder = ["system", "dark", "light"] as const
@@ -29,7 +28,7 @@ export const useDarkMode = ({
 }: DarkModeOptions = {}): DarkModeState & DarkModeCommands => {
 	const systemDarkMode = ref(false)
 	const manualDarkMode = ref<boolean | undefined>(undefined)
-	
+
 	if (useLocalStorage && isClientSide) {
 		watch(manualDarkMode, () => {
 			localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false")
@@ -39,19 +38,19 @@ export const useDarkMode = ({
 	const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value)
 	const darkModeState = computed(() =>
 		manualDarkMode.value === undefined
-		? "system"
-		: manualDarkMode.value
-		? "dark"
-		: "light"
+			? "system"
+			: manualDarkMode.value
+				? "dark"
+				: "light"
 	)
 	// todo move to useinjected
 	function setDarkMode(value: "dark" | "light" | "system"): void {
-		manualDarkMode.value =
-			value === "dark"
-			? true
-			: value === "light"
-			? false
-			: undefined
+		manualDarkMode.value
+			= value === "dark"
+				? true
+				: value === "light"
+					? false
+					: undefined
 	}
 	function cycleDarkMode(): void {
 		const index = darkModeOrder.indexOf(darkModeState.value)
@@ -90,11 +89,11 @@ export const useDarkMode = ({
 		darkMode,
 		darkModeState,
 		manualDarkMode,
-		systemDarkMode,
+		systemDarkMode
 	})
 	provide(commandsInjectionKey, {
 		setDarkMode,
-		cycleDarkMode,
+		cycleDarkMode
 	})
 
 	return {
@@ -103,7 +102,7 @@ export const useDarkMode = ({
 		setDarkMode,
 		cycleDarkMode,
 		manualDarkMode,
-		systemDarkMode,
+		systemDarkMode
 	}
 }
 export const defaultDarkModeOrder = defaultOrder
@@ -116,7 +115,6 @@ export const darkModeCommandsInjectionKey = commandsInjectionKey
 
 export const darkModeStateInjectionKey = stateInjectionKey
 
-
 export type DarkModeOptions = {
 	/* Whether to save the manual dark mode to local storage. Uses the key "prefersColorSchemeDark" by default. You can pass a key instead of true to use that as the key instead. */
 	useLocalStorage?: boolean | string
@@ -126,13 +124,11 @@ export type DarkModeOptions = {
 	isClientSide?: boolean
 }
 
- 
 export interface DarkModeCommands {
 	setDarkMode: (value: "dark" | "light" | "system") => void
 	cycleDarkMode: () => void
 }
 
- 
 export interface DarkModeState {
 	/** Whether the dark mode should be enabled or not */
 	darkMode: Ref<boolean>

package/src/runtime/composables/useDragWithThreshold.ts

@@ -2,7 +2,6 @@ import { type Ref, ref } from "vue"
 
 import type { Point } from "../types/index.js"
 
-
 /**
  * A composable for dragging items only after a certain threshold of movement has been reached.
  *
@@ -58,12 +57,12 @@ import type { Point } from "../types/index.js"
 export const useDragWithThreshold = ({
 	initialOffset = ref({ x: 0, y: 0 }),
 	pointerCoords = ref({ x: 0, y: 0 }),
-	threshold = ref(10),
+	threshold = ref(10)
 }: {
 	initialOffset?: Ref<Point | undefined>
 	pointerCoords?: Ref<Point | undefined>
 	threshold?: Ref<number>
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+
 } = {}) => {
 	const passedDragThreshold = ref(false)
 	function getDistance(p1: Point, p2: Point): number {
@@ -80,9 +79,9 @@ export const useDragWithThreshold = ({
 	function checkDragThreshold(e: PointerEvent): void {
 		pointerCoords.value = getEventCoords(e)
 		// don't allow it to be reset to false
-		passedDragThreshold.value ||=
-		initialOffset.value !== undefined &&
-			getDistance(initialOffset.value, pointerCoords.value) >= threshold.value
+		passedDragThreshold.value
+			||= initialOffset.value !== undefined
+				&& getDistance(initialOffset.value, pointerCoords.value) >= threshold.value
 	}
 	function startDragThresholdCheck(e: PointerEvent): void {
 		passedDragThreshold.value = false
@@ -102,7 +101,6 @@ export const useDragWithThreshold = ({
 		getEventCoords,
 		checkDragThreshold,
 		startDragThresholdCheck,
-		endDragThresholdCheck,
+		endDragThresholdCheck
 	}
 }
-

package/src/runtime/composables/useGlobalResizeObserver.ts

@@ -3,7 +3,6 @@ import { onBeforeUnmount, onMounted, type Ref, watch } from "vue"
 
 import { globalResizeObserver } from "../globalResizeObserver.js"
 
-
 export const useGlobalResizeObserver = (el: Ref<HTMLElement | null>, cb: AnyFunction): void => {
 	let wasMounted = false
 	// in case we accidentally use it in an onMounted hook or somewhere where the element already exists

package/src/runtime/composables/useInjectedDarkMode.ts

@@ -1,6 +1,6 @@
 import { inject } from "vue"
 
-import { type DarkModeCommands, darkModeCommandsInjectionKey, type DarkModeState,darkModeStateInjectionKey } from "./useDarkMode.js"
+import { type DarkModeCommands, darkModeCommandsInjectionKey, type DarkModeState, darkModeStateInjectionKey } from "./useDarkMode.js"
 
 export function useInjectedDarkMode(): DarkModeState & DarkModeCommands {
 	const darkModeState = inject(darkModeStateInjectionKey)
@@ -10,6 +10,6 @@ export function useInjectedDarkMode(): DarkModeState & DarkModeCommands {
 	}
 	return {
 		...darkModeState,
-		...darkModeCommands,
+		...darkModeCommands
 	}
 }

package/src/runtime/composables/useInjectedI18n.ts

@@ -1,7 +1,7 @@
 import { inject } from "vue"
 
+import type { TranslationFunction } from "./useSetupI18n.js"
 import { i18nInjectionKey } from "./useSetupI18n.js"
-import { type TranslationFunction } from "./useSetupI18n.js"
 
 export function useInjectedI18n(): TranslationFunction {
 	const val = inject(i18nInjectionKey, undefined)

package/src/runtime/composables/useInjectedLocale.ts

@@ -1,6 +1,6 @@
 import { inject } from "vue"
 
-import { languageLocaleInjectionKey , timeLocaleInjectionKey , type useSetupLocale } from "./useSetupLocale.js"
+import { languageLocaleInjectionKey, timeLocaleInjectionKey, type useSetupLocale } from "./useSetupLocale.js"
 
 export function useInjectedLocale(): ReturnType<typeof useSetupLocale> {
 	const timeLocale = inject(timeLocaleInjectionKey)
@@ -14,11 +14,10 @@ export function useInjectedLocale(): ReturnType<typeof useSetupLocale> {
 	function setTimeLocale(value: string): void {
 		timeLocale!.value = value
 	}
-	return{
+	return {
 		timeLocale,
 		languageLocale,
 		setLanguageLocale,
-		setTimeLocale,
+		setTimeLocale
 	}
 }
-

package/src/runtime/composables/useScrollNearContainerEdges.stories.ts

@@ -6,7 +6,7 @@ import { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js"
 import { twMerge } from "../utils/twMerge.js"
 
 const meta = {
-	title: "Composables/ScrollNearContainerEdges",
+	title: "Composables/ScrollNearContainerEdges"
 }
 
 export default meta
@@ -25,7 +25,7 @@ export const Primary: Story = {
 			} = useScrollNearContainerEdges({
 				containerEl,
 				scrollMargin: 20,
-				outerScrollMargin: 20,
+				outerScrollMargin: 20
 			})
 			const pos = ref({ x: 0, y: 0 })
 			onMounted(() => {
@@ -88,6 +88,6 @@ export const Primary: Story = {
 				></div>
 			</div>
 		</div>
-		`,
-	}),
+		`
+	})
 }

package/src/runtime/composables/useScrollNearContainerEdges.ts

@@ -2,7 +2,6 @@ import { reactive, type Ref, ref } from "vue"
 
 import type { ScrollNearContainerEdgesOptions } from "../types/index.js"
 
-
 /**
  * Creates a function `scrollContainer` that allows scrolling a container manually when the coordinates are near it's edges.
  * Supports scrolling faster the closer one is to the edge, and configuing an inner and outer margin.
@@ -55,7 +54,7 @@ import type { ScrollNearContainerEdgesOptions } from "../types/index.js"
  * </div>
  * ```
  */
- 
+
 export const useScrollNearContainerEdges = ({
 	containerEl,
 	scrollMargin = 10,
@@ -63,16 +62,16 @@ export const useScrollNearContainerEdges = ({
 	fastPixelMultiplier = 4,
 	fastPixelAmount,
 	useTimer = true,
-	timerInterval = 1,
+	timerInterval = 1
 }: ScrollNearContainerEdgesOptions): {
-		scrollEdges: (clientX: number, clientY: number, overrideUseTimer?: boolean) => void
-		/** Reactive. */
-		scrollIndicator: { left: boolean, right: boolean, down: boolean, up: boolean }
-		resetScrollIndicator: () => void
-		clearScrollInterval: () => void
-		isScrolling: Ref<boolean>
-		endScroll: () => void
-	} => {
+	scrollEdges: (clientX: number, clientY: number, overrideUseTimer?: boolean) => void
+	/** Reactive. */
+	scrollIndicator: { left: boolean, right: boolean, down: boolean, up: boolean }
+	resetScrollIndicator: () => void
+	clearScrollInterval: () => void
+	isScrolling: Ref<boolean>
+	endScroll: () => void
+} => {
 	fastPixelMultiplier = fastPixelAmount !== undefined ? fastPixelAmount * 2 : fastPixelMultiplier
 	const scrollIndicator = reactive({ left: false, right: false, down: false, up: false })
 	const isScrolling = ref(false)
@@ -104,7 +103,7 @@ export const useScrollNearContainerEdges = ({
 		const el = containerEl.value
 		if (!el) return
 		const box = el.getBoundingClientRect()
-		
+
 		/*
 		     rightRightLimit│
 		                    │
@@ -199,7 +198,7 @@ export const useScrollNearContainerEdges = ({
 		resetScrollIndicator,
 		clearScrollInterval,
 		isScrolling,
-		endScroll,
+		endScroll
 		/* resetMove does not need to be returned since the user cannot call the timer interval manually and the scrollContainer function resets it before starting. */
 	}
 }

package/src/runtime/composables/useSetupI18n.ts

@@ -3,12 +3,11 @@ import {
 	provide,
 	type Ref,
 	ref,
-	watch,
+	watch
 } from "vue"
 
 import { defaultTranslationFunction } from "../helpers/defaultTranslationFunction.js"
 
-
 export type TranslationFunction = (key: string, replacements?: Record<string, any>) => string
 
 const _i18nInjectionKey = Symbol("witchcraftUiI18n") as InjectionKey<TranslationFunction>
@@ -19,17 +18,16 @@ const loaded: Record<string, any> = {}
 const dummyLibraryMessages = new Proxy({}, {
 	get() {
 		return "..."
-	},
+	}
 })
 const dummyMessageSet = new Proxy({}, {
 	get(_, key: string) {
 		if (key === "witchcraft-ui") {
 			return dummyLibraryMessages
 		} else return undefined
-	},
+	}
 })
 
-
 /**
  * A composable for providing a translation function + messages for the library. Note the Root component already takes care of setting this up with defaults, disable it via it's `useBuiltinTranslations` option.
  *
@@ -43,7 +41,7 @@ export async function useSetupI18n({
 	locale,
 	useBuiltinTranslations = false,
 	useDummyMessageSetWhileLoading = true,
-	translationFunction = defaultTranslationFunction,
+	translationFunction = defaultTranslationFunction
 }: {
 	locale: Ref<string>
 	/** Will asynchronously load the built-in translations for the current locale (watching and updating if needed). If you don't use this, you'll need to provide a custom translation function. */
@@ -80,4 +78,3 @@ export async function useSetupI18n({
 
 export const i18nInjectionKey = _i18nInjectionKey
 export const translationMessagesInjectionKey = _translationMessagesInjectionKey
-

package/src/runtime/composables/useSetupLocale.ts

@@ -1,5 +1,4 @@
-import { type InjectionKey, provide,type Ref,ref } from "vue"
-
+import { type InjectionKey, provide, type Ref, ref } from "vue"
 
 export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale") as InjectionKey<Ref<string>>
 export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale") as InjectionKey<Ref<string>>
@@ -19,14 +18,13 @@ export function useSetupLocale(): {
 	function setTimeLocale(value: string): void {
 		timeLocale.value = value
 	}
-	
+
 	provide(languageLocaleInjectionKey, languageLocale)
 	provide(timeLocaleInjectionKey, timeLocale)
 	return {
 		languageLocale,
 		timeLocale,
 		setLanguageLocale,
-		setTimeLocale,
+		setTimeLocale
 	}
 }
-

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: {