@witchcraft/ui 0.2.1-beta.3 → 0.2.2

package/src/runtime/components/Template/TemplateStory.ts

@@ -1,38 +1,37 @@
-// @ts-nocheck remove when copying
+// remove when copying
+// @ts-nocheck this is a templatek
+/* eslint-disable */
+
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 import NAME from "./NAME.vue"
 
 // todo, maybe don't do this for perf reasons
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof NAME> = {
 	component: NAME,
 	args: {
 
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof NAME>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
 			<NAME v-bind="{...args}">{{args.value}}</NAME>
-		`,
-	}),
+		`
+	})
 }
 export const Secondary: Story = {
 	...Primary,
 	args: {
-		...Primary.args,
-	},
+		...Primary.args
+	}
 }
-

package/src/runtime/components/TestControls/TestControls.vue

@@ -2,7 +2,9 @@
 <!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
 <div class="test-controls flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
 	<div class="flex-grow"/>
-	<div class="outline-indicator">{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}</div>
+	<div class="outline-indicator">
+		{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}
+	</div>
 	<lib-dark-mode-switcher/>
 </div>
 </template>
@@ -10,10 +12,8 @@
 <script setup lang="ts">
 import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
 
-defineOptions({ name: "test-controls" })
-defineProps< {
+defineOptions({ name: "TestControls" })
+defineProps<{
 	showOutline: boolean
 }>()
-
 </script>
-

package/src/runtime/components/shared/props.ts

@@ -2,7 +2,6 @@ import { useId } from "vue"
 
 import type { PopupPositioner, PopupPositionModifier } from "../../types"
 
- 
 export interface LinkableByIdProps {
 	/**
 	 * The id for the input. Uses vue's useId if none provided.
@@ -19,7 +18,7 @@ export interface ButtonProps {
 	color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
 	autoTitleFromAria?: boolean
 }
- 
+
 export interface LabelProps {
 /** For the label. Note the component might or might not support an actual label element. If none is supported, this is used for the `aria-label`. */
 	label?: string
@@ -80,7 +79,7 @@ export type SuggestionsProps<T = any> = {
 	showSelectedValues?: boolean
 }
 export type SuggestionsOptions<T> = SuggestionsProps<T>
- 
+
 export interface SuggestionsEmits<TMultivalue extends boolean = false> {
 	(e: "submit", val: string, suggestion?: any, wasRemoved?: boolean): void
 	(e: "update:isOpen", val: boolean): void
@@ -155,7 +154,6 @@ export interface PopupProps {
 	canClose?: boolean
 }
 
-
 export type BaseInteractiveProps = {
 	/** Default is false. */
 	disabled?: boolean
@@ -185,8 +183,8 @@ export type WrapperProps<TPrefix extends string, T, TOverrides extends Record<st
 	[P in keyof T as P extends keyof TOverrides
 		? never
 		: P extends string
-		? `${TPrefix}${Capitalize<P>}`
-		: never
+			? `${TPrefix}${Capitalize<P>}`
+			: never
 	]: T[P];
 } & {
 	[P in keyof TOverrides as P extends string

package/src/runtime/components/shared/storyHelpers/playInput.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect, userEvent, within } from "@storybook/test"
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -27,10 +26,10 @@ export const playMultipleValues = async ({ canvasElement, args }: { canvasElemen
 	await expect(canvas.getByTestId("model-value")).toHaveTextContent("D")
 	await userEvent.keyboard("{Enter}")
 	await expect(canvas.getByTestId("values").textContent)
-		.toBe([ ...initialValues, "D" ].join(", "))
+		.toBe([...initialValues, "D"].join(", "))
 	// empty input does nothing
 	await userEvent.clear(input)
 	await userEvent.keyboard("{Enter}")
 	await expect(canvas.getByTestId("values").textContent)
-		.toBe([ ...initialValues, "D" ].join(", "))
+		.toBe([...initialValues, "D"].join(", "))
 }

package/src/runtime/components/shared/storyHelpers/playSuggestions.ts

@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect, userEvent, within } from "@storybook/test"
 
-
 export const playBasicSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
 	const canvas = within(canvasElement)
 	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
@@ -23,7 +21,7 @@ export const playBasicSelect = async ({ canvasElement, args }: { canvasElement:
 		await expect(canvas.queryByRole("listbox")).toBeNull()
 	}
 	await userEvent.keyboard("{Backspace}")
-	await expect(canvas.queryByRole("option",{ selected: true })).toBeInTheDocument()
+	await expect(canvas.queryByRole("option", { selected: true })).toBeInTheDocument()
 	await userEvent.clear(input)
 	await userEvent.type(input, "unmatched")
 	if (!args.suggestionsFilter && !args.values) {
@@ -55,7 +53,7 @@ export const playBasicSelect = async ({ canvasElement, args }: { canvasElement:
 	}
 }
 
-export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement , args: any }) => {
+export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
 	const canvas = within(canvasElement)
 	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
 	await userEvent.clear(input)
@@ -70,9 +68,8 @@ export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasE
 	await userEvent.keyboard("{ArrowUp}")
 	await expect(canvas.queryByRole("option", {
 		name: args.values ? "C" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-		selected: true,
+		selected: true
 	})).toBeInTheDocument()
-	
 
 	// loops back to the first item
 	await userEvent.keyboard("{ArrowDown}")
@@ -82,12 +79,12 @@ export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasE
 	await userEvent.keyboard("{PageDown}")
 	await expect(canvas.queryByRole("option", {
 		name: args.values ? "C" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-		selected: true,
+		selected: true
 	})).toBeInTheDocument()
 	// goes to first
 	await userEvent.keyboard("{PageUp}")
 	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
-	
+
 	const testOpen = async (key: string) => {
 		await userEvent.keyboard("{Escape}")
 		if (!args.values) {
@@ -116,4 +113,3 @@ export const playBasicClickSelect = async ({ canvasElement, args }: { canvasElem
 	// 	await expect(canvas.getByTestId("values")).toHaveTextContent(/AB$/)
 	// }
 }
-

package/src/runtime/composables/useAccesibilityOutline.ts

@@ -43,7 +43,7 @@ import { onBeforeUnmount, onMounted, type Ref, ref, watch } from "vue"
 // TODO tailwind example/plugin?
 export function useAccesibilityOutline(
 	target: Ref<HTMLElement | null>,
-	enable: Ref<boolean> = ref(true),
+	enable: Ref<boolean> = ref(true)
 ): Record<"outline" | "control", Ref<boolean>> {
 	const outline = ref(false)
 	const awaitingFocus = ref(false)

package/src/runtime/composables/useAriaLabel.ts

@@ -11,7 +11,7 @@ export const useAriaLabel = (
 
 	const aria = computed(() => ({
 		"aria-label": labelExists.value ? undefined : props.label,
-		"aria-labelledby": labelExists.value ? `label-${id.value}` : undefined,
+		"aria-labelledby": labelExists.value ? `label-${id.value}` : undefined
 	}))
 
 	onMounted(() => {

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
 	}
 }
-