@witchcraft/ui 0.4.0 → 0.4.1

package/src/runtime/components/Template/NAME.vue

@@ -1,49 +0,0 @@
-<!-- eslint-disable -->
-<template>
-<div :class="twMerge(`
-
-	`, ($attrs as any).class)"
-	v-bind="{...$attrs, class:undefined}"
->
-	<slot/>
-</div>
-</template>
-
-<script setup  lang="ts">
-// remove when copying
-// @ts-nocheck this is a templatek
-/* eslint-disable */
-
-import { type HTMLAttributes, ref } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-import type { TailwindClassProp } from "../shared/props.js"
-
-defineOptions({
-	name: "LibName", /* todo */
-	inheritAttrs: false
-})
-
-// const props = defineProps<{}>({ })
-
-const el = ref<null | HTMLElement>(null)
-
-const modelValue = defineModel<string>({ required: true })
-</script>
-
-<script lang="ts">
-export default {
-	name: "LibName"
-}
-
-type RealProps = {
-}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class">
-	& TailwindClassProp
-	& RealProps
-	> { }
-</script>

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

@@ -1,37 +0,0 @@
-// 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
-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
-	}
-}

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

@@ -1,199 +0,0 @@
-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.
-	 *
-	 * For components that are not inputs, the id passed to inputs should be shared with the corresponding label/suggestions/etc component to connect them.
-	 */
-
-	id?: string
-}
-
-export const getFallbackId = (): string => useId()
-export interface ButtonProps {
-	border?: boolean
-	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
-}
-
-export type SuggestionsProps<T = any> = {
-	/**
-	 * A list of autocomplete suggestions. Can be a simple list of strings, or more complicated, like a list of objects. In the case of objects, you'll want to specify `suggestionsLabel`.
-	 *
-	 * Each item is passed to the suggestion slot via the `items` prop. You can access it like:
-	 * ```
-	 * <div #item={item}>
-	 * 	{{item}}
-	 * </div>
-	 * ```
-	 */
-	suggestions?: T[]
-	/** A function that specifies how to extract the label from a suggestion when it's an object, e.g. `(item) => item.label`. By default, if none is passed, it's assumed suggestions is a list of strings. */
-	suggestionLabel?: (item: T) => string
-	/**
-	 * Whether to restrict the value to the suggestions list or merely use it to suggest values. Default is false.
-	 *
-	 * This stops v-modeling of what the user is typing when there is a value that does not match any values in the suggestions list. `update:modelValue` will only be emitted when they type/select/click a valid option.
-	 *
-	 * When the input is partially valid (it partially matches an option in the suggestions list), if the user presses enter or focuses away, the last selected suggestion is set as the value.
-	 *
-	 * When the input is completely invalid, the `errored` class is added to the component and the input goes red. If the user focuses away or tries to press enter anyways, the value is reset to the last valid value.
-	 *
-	 * Additionally when the input is invalid, the user can open the dropdown menu (it won't auto open) to view all the suggestions.
-	 */
-	restrictToSuggestions?: boolean
-	/**
-	 * Usually when using autosuggest, we only want to update the modelValue when the user submits the input.
-	 * This happens by default if using `restrictToSuggestions`, but not if not restricting them.
-	 *
-	 * This can be worked around by listening a bit differently to events, but this is a common use case so there's now an option that automatically does this.
-	 *
-	 * By default it's false.
-	 */
-	updateOnlyOnSubmit?: boolean
-	/** A function to filter the suggestions based on the current input. If none is given, will attempt to filter by the label using a basic case insensitive `includes` search. */
-	suggestionsFilter?: (input: string | number, items: T[]) => any[]
-	/** Allows opening the input dropdown when it's empty. Default is true. */
-	allowOpenEmpty?: boolean
-	/** Whether the suggestions dropdown can be opened. Default is true. */
-	canOpen?: boolean
-	/** Whether the suggestions dropdown can be closed. Default is true. */
-	canClose?: boolean
-	/** Whether the input is valid. Default is true. */
-	isValid?: boolean
-	/**
-	 * A function to determine which selection to auto select. By default, the start of the string must match and the longest match is used. If the input is 0 length, the first element is selected.
-	 *
-	 * You can implement custom behavior here like fuzzy matching. Note that an exactly matching selection is always picked (the function will not be called).
-	 */
-	suggestionSelector?: (suggestions: T[], input: string) => number
-	/** In the case modelValue is an array of values, whether to show the selected values in the suggestions list. Default is true so users can deselect from the list as well. If false, the checkboxes will also not be shown. */
-	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
-	(e: "update:activeSuggestion", val: TMultivalue extends true ? number[] : number): void
-}
-
-export interface PopupProps {
-	/**
-	 * Whether to use the dialog element instead of a regular backdrop. While using the dialog element would be ideal, css variables won't be applied to it, tailwind themes will fail, etc, if the css variables are not applied to `::backdrop`.
-	 *
-	 * Using a div ends up easier to setup.
-	 *
-	 * The default is now false.
-	 */
-	useDialogForBackdrop?: false
-	/** Wether to use a backdrop (clicking it will close the popup), or not (use is allowed to click elsewhere. */
-	useBackdrop?: boolean
-	/**
-	 * The preferred horizontal positioning of the popup. The first position in the array to fit is used.
-	 *
-	 * All elements need to have box-sizing: border-box set. Also note that while the component should work with dynamic popup sizes, in practice there's issues with the positioning being slightly off. Giving the popup element a static size is better. If you need margins around the popup, this can be done with a wrapper element + padding.
-	 *
-	 * The positions `right`/`left`/`top`/`bottom` are relative to the opposite side of the button element so as to try not to cover the triggering button.
-	 *
-	 * So positioning `right` and `left` look like this:
-	 *
-	 * ```
-	 * // right
-	 *         [button]
-	 *         [----popup----]
-	 *
-	 * // left
-	 *         [button]
-	 *  [----popup----]
-	 * ```
-	 *
-	 * Positions `*-most` try to position the popup as close to that side of the screen as possible, otherwise limiting the popup to that edge. For example:
-	 *
-	 * ```
-	 * [--------------screen---------------]
-	 * // right-most
-	 *           [button]
-	 *                   [----popup----]
-	 * // near the edge:
-	 *                 [button]
-	 *                      [----popup----]
-	 * ```
-	 *
-	 * There is also the `center-screen` position, which centers the popup on the screen.
-	 *
-	 * These last two (`*-most` and `center-screen`) are greedy, they will always find a position that fits. Positions listed after are ignored.
-	 *
-	 * You can also specify a function instead which is given some additional information regarding the space around the button reference element. It should a number for the x position (or y, if preferredVertical).
-	 *
-	 * If you only need to slightly modify	the position, you can use the `modifyPosition` option instead.
-	 */
-	preferredHorizontal?: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | PopupPositioner
-	/** See `preferredHorizontal`. */
-	preferredVertical?: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | PopupPositioner
-	/**
-	 * When the user scrolls or resizes, normally the entire popup position is recomputed, taking into account the preferred positioning.
-	 *
-	 * This can cause it to shift around.
-	 *
-	 * Set this to true to only shift the popup depending on how much the button element moved and avoid recalculating the best position.
-	 */
-	avoidRepositioning?: boolean
-	/**
-	 * Allows modifying the calculated position, to for example, clamp it.
-	 */
-	modifyPosition?: PopupPositionModifier
-	canClose?: boolean
-}
-
-export type BaseInteractiveProps = {
-	/** Default is false. */
-	disabled?: boolean
-	/** Default is false. */
-	readonly?: boolean
-	/** Default is true. */
-	border?: boolean
-	/** Removes styles from the component. Default is false. */
-	unstyle?: boolean
-}
-
-// see https://github.com/nuxt/module-builder/issues/649
-// export const baseInteractivePropsDefaults = {
-// 	disabled: false,
-// 	readonly: false,
-// 	border: true,
-// 	unstyle: false,
-// }
-
-/**
-	* @internal
-	*  For easily typing attributes created by useDivideAttrs. See readme.
-	*
-	* By default overrides the `class` prop to only take a string (to pass to tailwing).
-	*/
-export type WrapperProps<TPrefix extends string, T, TOverrides extends Record<string, any> | never = TailwindClassProp> = {
-	[P in keyof T as P extends keyof TOverrides
-		? never
-		: P extends string
-			? `${TPrefix}${Capitalize<P>}`
-			: never
-	]: T[P];
-} & {
-	[P in keyof TOverrides as P extends string
-		? `${TPrefix}${Capitalize<P>}`
-		: never
-	]: TOverrides[P];
-}
-
-export type TailwindClassProp = {
-	/** Tailwind classes. */
-	class?: string | false
-}

package/src/runtime/composables/useAriaLabel.ts

@@ -1,23 +0,0 @@
-import { computed, type ComputedRef, onMounted, ref } from "vue"
-
-/** Returns a computed ref that creates aria-label and aria-labelledby with the correct id for labelledby. */
-export const useAriaLabel = (
-	props: { id?: string, label?: string },
-	fallbackId?: string
-
-): ComputedRef<Record<string, string | undefined>> => {
-	const id = computed(() => props.id ?? fallbackId)
-	const labelExists = ref(false)
-
-	const aria = computed(() => ({
-		"aria-label": labelExists.value ? undefined : props.label,
-		"aria-labelledby": labelExists.value ? `label-${id.value}` : undefined
-	}))
-
-	onMounted(() => {
-		if (id.value && document.querySelector(`#label-${id.value}`)) {
-			labelExists.value = true
-		}
-	})
-	return aria
-}

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