@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/src/runtime/composables/useDarkMode.ts

@@ -1,199 +0,0 @@
-import { computed, nextTick, onMounted, provide, type Ref, ref, watch } from "vue"
-
-import { darkModeCommandsInjectionKey, darkModeStateInjectionKey, isDarkModeInjectionKey, manualDarkModeInjectionKey } from "../injectionKeys.js"
-
-const defaultLocalStorageKey = "prefersColorSchemeDark"
-const defaultOrder = ["system", "dark", "light"] as const
-
-/**
- * @deprecated Use `useSetupDarkMode` instead.
- *
- * A composable for setting up dark mode that automatically takes care of saving the user's preference.
- *
- * See the returned utilities for more details.
- *
- * It also provides injection keys with a ref so it can be accessed in deep nested components if needed. Alternatively you can use `useInjectedDarkMode` for ease of use.
- *
- * Note that this should only be called once at the root of the app.
- */
-export const useDarkMode = ({
-	useLocalStorage = true,
-	darkModeOrder = defaultOrder,
-
-	isClientSide = true,
-	useViewTransition = true
-}: 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")
-		})
-	}
-
-	const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value)
-	const darkModeState = computed(() =>
-		manualDarkMode.value === undefined
-			? "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
-	}
-
-	function getNextValue(): "dark" | "light" | "system" {
-		const index = darkModeOrder.indexOf(darkModeState.value)
-
-		return index === 2
-			? darkModeOrder[0]!
-			: darkModeOrder[index + 1]!
-	}
-
-	function _cycleDarkMode(): void {
-		setDarkMode(getNextValue())
-	}
-
-	function cycleDarkMode(): void {
-		if (!useViewTransition) {
-			_cycleDarkMode()
-			return
-		}
-		const nextValue = getNextValue()
-		const index = darkModeOrder.indexOf(darkModeState.value)
-		const systemDarkModeName = systemDarkMode.value ? "dark" : "light"
-
-		if (nextValue === "system" && systemDarkModeName === darkModeOrder[index]) {
-			// don't do view transitions if we're not really transitioning
-			_cycleDarkMode()
-			return
-		}
-		if (!document.startViewTransition) _cycleDarkMode()
-		document.startViewTransition(async () => {
-			_cycleDarkMode()
-			await nextTick()
-		})
-	}
-
-	onMounted(() => {
-		window.matchMedia("(prefers-color-scheme: dark)")
-			.addEventListener("change", ({ matches }) => {
-				if (matches) {
-					systemDarkMode.value = true
-				} else {
-					systemDarkMode.value = false
-				}
-			})
-		if (useLocalStorage !== false) {
-			const key = typeof useLocalStorage === "string" ? useLocalStorage : defaultLocalStorageKey
-			const value = localStorage.getItem(key)
-
-			if (value === "true") {
-				manualDarkMode.value = true
-			} else if (value === "false") {
-				manualDarkMode.value = false
-			}
-		}
-	})
-	provide(isDarkModeInjectionKey, darkMode)
-	provide(manualDarkModeInjectionKey, manualDarkMode)
-
-	provide(darkModeStateInjectionKey, {
-		darkMode,
-		darkModeState,
-		manualDarkMode,
-		systemDarkMode
-	})
-	provide(darkModeCommandsInjectionKey, {
-		setDarkMode,
-		cycleDarkMode
-	})
-
-	return {
-		darkMode,
-		darkModeState,
-		setDarkMode,
-		cycleDarkMode,
-		manualDarkMode,
-		systemDarkMode
-	}
-}
-export const defaultDarkModeOrder = defaultOrder
-
-
-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
-	/* The order of the string dark modes when using `cycleDarkMode`. Defaults to `["system", "dark", "light"]` */
-	darkModeOrder?: readonly ("system" | "dark" | "light")[]
-	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
-	isClientSide?: boolean
-	/**
-	 * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
-	 *
-	 * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
-	 *
-	 * There is an example in storybook. But basically:
-	 *
-	 * ```css
-	 *
-	 * #root { // the dark mode switcher works on the WRoot component not the html root
-	 *		view-transition-name: wroot;
-	 *		height: 100dvh;
-	 *		padding: 0;
-	 *	}
-	 *
-	 * ::view-transition-new(wroot) {
-	 * 	animation: grow var(--story-anim-length) ease-in-out;
-	 * 	animation-fill-mode: both;
-	 * 	z-index: 2;
-	 * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
-	 * }
-	 *
-	 * ::view-transition-old(wroot) {
-	 * 	animation: none;
-	 * 	animation-fill-mode: both;
-	 * 	z-index: 1;
-	 * }
-	 *
-	 * @keyframes grow {
-	 * 	from {
-	 * 		mask-size: 0dvw;
-	 * 	}
-	 * 	to {
-	 * 		mask-size: 300dvw;
-	 * 	}
-	 * }
-	 * ```
-	 *
-	 * See https://theme-toggle.rdsx.dev/ for more ideas.
-	 *
-	 * @default true
-	 */
-	useViewTransition?: 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>
-	/** The current state of the darkMode but as a string (dark, light, system) */
-	darkModeState: Ref<"dark" | "light" | "system">
-	/** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
-	manualDarkMode: Ref<boolean | undefined>
-	/** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
-	systemDarkMode: Ref<boolean>
-
-}

package/src/runtime/composables/useDivideAttrs.ts

@@ -1,53 +0,0 @@
-import { keys } from "@alanscodelog/utils/keys"
-import { computed, type Ref, useAttrs } from "vue"
-
-/**
- * Allows users to more easily pass attributes to different parts of a component. Suppose a component has an input and a wrapper and you want most attributes to go to the input, but any that start with `wrapper` to go to the wrapper.
- *
- * You can do:
- *
- * ```ts
- * const extraAttrs = useDivideAttrs(["wrapper"] as const)
- * ```
- * This will correctly remove the start of the key. So if the user passes:
- * ```vue
- * <your-component regular-attr wrapper-attr wrapperAttrs/>
- * ```
- * You will get a ref like:
- *
- * ```ts
- * extraAttrs.value = {
- * 	attrs: { regular-attr: true },
- * 	wrapperAttrs: { attr: true, Attrs: true },
- * }
- *
- * Additionally attributes are properly reactive, tough this is probably a bit expensive given they weren't meant to be reactive.
- *
- * Note that if using multi-word prefixes, like `inner-wrapper`, they will appear as the key `inner-wrapperAttrs` internally, but users will be able to correctly pass `inner-wrapper-prop`. Aditionally these can be passed down to deeper components, allowing easy wrapping.
- * ```
- */
-export const useDivideAttrs = <T extends readonly string[]>(divisionKeys: T): Ref<Record<`${T[number]}Attrs` | "attrs", Record<string, any>>> => computed(() => {
-	const attrs: Record<string, any> = useAttrs()
-	const res: any = { attrs: {} }
-	const unseen = keys(attrs)
-	for (const key of divisionKeys) {
-		res[`${key}Attrs`] = {}
-		for (let i = 0; i < unseen.length; i++) {
-			const attrKey = unseen[i]
-			if (!attrKey) continue
-			if (attrKey.startsWith(`${key}-`)) {
-				res[`${key}Attrs`][attrKey.slice(key.length + 1)] = attrs[attrKey]
-				unseen.splice(i, 1)
-				i--
-			} else if (attrKey.startsWith(key)) {
-				res[`${key}Attrs`][attrKey.slice(key.length)] = attrs[attrKey]
-				unseen.splice(i, 1)
-				i--
-			}
-		}
-	}
-	for (const attrKey of unseen) {
-		res.attrs[attrKey] = attrs[attrKey]
-	}
-	return res
-})

package/src/runtime/composables/useSuggestions.ts

@@ -1,339 +0,0 @@
-/* eslint-disable no-console */
-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, 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).
- */
-
-export function useSuggestions<TSuggestion, TMultivalue extends boolean = false>(
-	$inputValue: Ref<string>,
-	$modelValue: Ref<TMultivalue extends true ? string[] : string>,
-	$open: Ref<boolean>,
-	emit: SuggestionsEmits,
-	opts: SuggestionsOptions<TSuggestion>,
-	debug: boolean = false
-) {
-	if (typeof opts.suggestions?.[0] === "object" && !opts.suggestionLabel && !opts.suggestionsFilter) {
-		throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
-	}
-
-	const activeSuggestion = ref(-1)
-	watch(activeSuggestion, val => { emit("update:activeSuggestion", val) })
-	if (opts.suggestions) {
-		for (const suggestion of opts.suggestions) {
-			suggestionLabelGuard(suggestion, opts.suggestionLabel)
-		}
-	}
-
-	const getSuggestionLabel = (item: any): string => {
-		suggestionLabelGuard(item, opts.suggestionLabel)
-		if (isObject<any>(item)) {
-			return opts.suggestionLabel!(item)
-		}
-		return item
-	}
-
-	const defaultSuggestionsFilter = (input: string, items: TSuggestion[]): TSuggestion[] => input === ""
-		? [...items]
-		: items.filter(item => {
-				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())
-			})
-	const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter)
-
-	const suggestionsList = computed(() => {
-		if (opts.suggestions) {
-			const suggestions = [...opts.suggestions]
-			if (Array.isArray($modelValue.value) && !opts.showSelectedValues) {
-				pushIfNotIn(suggestions, $modelValue.value)
-			}
-			const res = suggestionsFilter.value($inputValue.value, suggestions)
-			return res
-		}
-		return undefined
-	})
-
-	const suggestionAvailable = computed<boolean>(() =>
-		(suggestionsList.value?.length ?? 0) > 0)
-
-	const moreThanOneSuggestionAvailable = computed<boolean>(() =>
-		(suggestionsList.value?.length ?? 0) > 1)
-
-	const exactlyMatchingSuggestion = computed(() =>
-		opts.suggestions?.find(suggestion =>
-			$inputValue.value === getSuggestionLabel(suggestion)))
-
-	const isValidSuggestion = computed(() =>
-		((!opts.restrictToSuggestions && opts.isValid) || suggestionAvailable.value))
-
-	const openable = computed(() =>
-		opts.canOpen && (
-			(isBlank($inputValue.value) && opts.allowOpenEmpty)
-			|| suggestionAvailable.value
-
-		)
-	)
-
-	const filteredSuggestions = computed(() => {
-		if (opts.suggestions) {
-			const res = (suggestionAvailable.value
-				? suggestionsList.value!
-				: opts.suggestions!)
-
-			if (opts.restrictToSuggestions && !isValidSuggestion.value) return res
-			return res
-		}
-		return undefined
-	})
-
-	// methods
-	// returns true if the value was removed
-	function setValue(val: string): boolean {
-		if (Array.isArray($modelValue.value)) {
-			// works like a toggle
-			if ($modelValue.value.includes(val)) {
-				removeIfIn($modelValue.value, val)
-				return true
-			} else {
-				pushIfNotIn($modelValue.value, [val])
-			}
-		} else {
-			($modelValue.value as string) = val
-		}
-		return false
-	}
-
-	function closeSuggestions(): void {
-		if (!opts.canClose) return
-		if (debug) console.log("closeSuggestions")
-		$open.value = false
-		activeSuggestion.value = -1
-	}
-	function openSuggestions(): void {
-		if (debug) console.log("openSuggestions", { openable: openable.value })
-		if (!openable.value) return
-		if (activeSuggestion.value === -1) {
-			if (exactlyMatchingSuggestion.value) {
-				activeSuggestion.value = suggestionsList.value?.indexOf(exactlyMatchingSuggestion.value) ?? -1
-			} else {
-				activeSuggestion.value = 0
-			}
-		}
-		$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)
-		$inputValue.value = Array.isArray($modelValue.value) ? "" : getSuggestionLabel(suggestion)
-		if (doClose) {
-			closeSuggestions()
-		}
-		emit("submit", val, toRaw(suggestion), wasRemoved)
-	}
-
-	function enterSelected(doClose: boolean = true): void {
-		if (activeSuggestion.value === -1) {
-			if (!opts.restrictToSuggestions) {
-				if (debug) console.log("enterSelected, unrestricted, emitting submit")
-				emit("submit", $inputValue.value)
-			} else {
-				if (debug) console.log("enterSelected, no active suggestion, ignoring")
-			}
-			return
-		}
-		if (debug) console.log("enterSelected")
-		enterSuggestion(activeSuggestion.value, doClose)
-	}
-
-	function selectSuggestion(num: number): void {
-		if (debug) console.log("selectSuggestion", num)
-		if (num >= -1) {
-			activeSuggestion.value = num
-		}
-		if (num === Infinity && (filteredSuggestions.value?.length ?? 0) > 0) {
-			activeSuggestion.value = filteredSuggestions.value!.length - 1
-		}
-	}
-
-	function toggleSuggestions(): void {
-		$open.value ? closeSuggestions() : openSuggestions()
-	}
-
-	function prevSuggestion(): void {
-		if (!filteredSuggestions.value) return
-		if (activeSuggestion.value > 0) {
-			activeSuggestion.value--
-		} else if (filteredSuggestions.value) {
-			activeSuggestion.value = filteredSuggestions.value.length - 1
-		}
-	}
-
-	function nextSuggestion(): void {
-		if (!filteredSuggestions.value) return
-		if (activeSuggestion.value >= filteredSuggestions.value.length - 1) {
-			activeSuggestion.value = 0
-		} else {
-			activeSuggestion.value++
-		}
-	}
-	function firstSuggestion(): void {
-		selectSuggestion(0)
-	}
-	function lastSuggestion(): void {
-		selectSuggestion(Infinity)
-	}
-
-	function cancel(): void {
-		if (Array.isArray($modelValue.value)) {
-			$inputValue.value = ""
-			return
-		}
-		if (debug) console.log("cancel")
-		$inputValue.value = getSuggestionLabel($modelValue.value)
-		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 = ""
-		} else {
-			$inputValue.value = getSuggestionLabel($modelValue.value)
-		}
-		if (debug) console.log("modelValue changed")
-	})
-
-	function defaultSuggestionSelector(suggestions: TSuggestion[], input: string): number {
-		if (input.length === 0) return 0
-		let longestMatch
-		let ii = -1
-		for (let i = 0; i < suggestions.length; i++) {
-			const suggestion = suggestions[i]
-			const label = getSuggestionLabel(suggestion)
-			const labelPart = label.slice(0, input.length)
-			if (labelPart === input) {
-				if (label.length > (longestMatch?.[0]?.length ?? 0)) {
-					longestMatch = label
-					ii = i
-				}
-			}
-		}
-		return ii
-	}
-
-	watch($inputValue, () => {
-		if (debug) console.log("input changed:", $inputValue.value, "modelValue:", $modelValue.value)
-		if (!Array.isArray($modelValue.value) && getSuggestionLabel($modelValue.value) === $inputValue.value) return
-
-		if (suggestionAvailable.value) {
-			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)
-		}
-		if (exactlyMatchingSuggestion.value && suggestionsList.value) {
-			if (debug) console.log("input changed, exactly matching, setting activeSuggestion")
-			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)
-
-			selectSuggestion(i)
-		}
-	})
-
-	return {
-		list: suggestionsList,
-		filtered: filteredSuggestions,
-		active: activeSuggestion,
-		available: suggestionAvailable,
-		moreThanOneAvailable: moreThanOneSuggestionAvailable,
-		hasExactlyMatching: exactlyMatchingSuggestion,
-		/** Whether there is a valid suggestion that can be submitted. If `restrictToSuggestions` is true, this will be true if isValid is true, otherwise this is considered to be true if suggestions are available. */
-		hasValidSuggestion: isValidSuggestion,
-		openable,
-		getLabel: getSuggestionLabel,
-		$open,
-		open: openSuggestions,
-		close: closeSuggestions,
-		enterSelected,
-		enterIndex: enterSuggestion,
-		toggle: toggleSuggestions,
-		cancel,
-		select: selectSuggestion,
-		prev: prevSuggestion,
-		next: nextSuggestion,
-		first: firstSuggestion,
-		last: lastSuggestion
-
-	}
-}
-
-export function useSuggestionsInputAria(
-	id: Ref<string>,
-	$open: Ref<boolean>,
-	activeSuggestion: Ref<number>,
-	suggestions: Ref<any | undefined>
-) {
-	const ariaInputProps = computed(() => ({
-		"aria-autocomplete": suggestions !== undefined ? "both" as const : undefined,
-		"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
-	}))
-	return ariaInputProps
-}
-export function suggestionLabelGuard<TFunction extends AnyFunction>(item: any, suggestionLabeler: TFunction | undefined): asserts suggestionLabeler is TFunction {
-	if (isObject<any>(item)) {
-		if (!suggestionLabeler) {
-			throw new Error("`suggestionLabel` must be passed if suggestions are objects.")
-		}
-	}
-}