@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/src/runtime/components/LibSuggestions/LibSuggestions.stories.ts

@@ -1,134 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { StoryObj } from "@storybook/vue3"
-import { computed, onMounted, ref } from "vue"
-import type { ComponentExposed } from "vue-component-type-helpers"
-
-import LibSuggestions from "./LibSuggestions.vue"
-
-import * as components from "../index.js"
-
-const meta = {
-	component: LibSuggestions,
-	title: "Components/Suggestions",
-	args: {
-		id: "some-id",
-		modelValue: "",
-		label: "Some Label",
-		border: true,
-		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	}
-} // satisfies Meta<typeof LibSuggestions> & Meta<{ custom: string }>
-
-export default meta
-type Story = StoryObj<typeof LibSuggestions> // & StoryObj<typeof extraArgs>
-
-/**
- * The suggestions component is just the dropdown part.
- *
- * Here it is decoupled from the input.
- *
- * More examples can be found in the input component.
- */
-export const Primary: Story = {
-	render: args => ({
-		components: { ...components, LibSuggestions },
-
-		setup: () => {
-			const inputValue = ref(args.modelValue)
-			const modelValue = ref(args.modelValue)
-			const drawer = ref<ComponentExposed<typeof LibSuggestions> | null>(null)
-			const keydownHandler = (e: KeyboardEvent): void => {
-				drawer.value?.inputKeydownHandler(e)
-			}
-			const suggestions = computed(() => drawer.value?.suggestions)
-			const blurHandler = (e: MouseEvent) => {
-				drawer.value?.inputBlurHandler(e)
-			}
-			onMounted(() => {
-				drawer.value?.suggestions.open()
-			})
-			return {
-				args,
-				inputValue,
-				modelValue,
-				isOpen: ref(false),
-				suggestions,
-				drawer,
-				keydownHandler,
-				blurHandler
-			}
-		},
-
-		template: `
-			<div class="flex flex-col gap-3">
-			Temporary Value: {{inputValue}}
-			<br/>
-			Model Value (Final Value): <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-			
-<br/>
-			Selected: {{suggestions?.filtered[suggestions.active]}}
-			<label>Some Label</label>
-				<lib-simple-input
-					:class="isOpen ? 'open' : ''"
-					v-model="inputValue"
-					@focus="suggestions.open()"
-					@blur="blurHandler"
-					@keydown="keydownHandler"
-				></lib-simple-input>
-				<lib-suggestions
-					ref="drawer"
-					v-bind="{...args}"
-					@update:isOpen="isOpen = $event"
-					v-model="modelValue"
-					v-model:inputValue="inputValue"
-				>
-					<template #item={item}>
-						{{item}}
-					</template>
-				</lib-suggestions>
-			</div>
-		`
-	})
-}
-
-export const RestrictToSuggestions: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: true
-	}
-
-}
-export const AlwaysShowAllSuggestions = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: true,
-		suggestionsFilter: (_input: string, items: string[]) => items
-	}
-
-}
-export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: false,
-		suggestionsFilter: (_input: string, items: string[]) => items
-	}
-
-}
-export const CustomSuggestionsObject = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: true,
-		suggestions: [
-			{ label: "A", other: "some data A" },
-			{ label: "AB", other: "some data AB" },
-			{ label: "ABC", other: "some data ABC" },
-			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
-		],
-		suggestionLabel: (item: any) => item.label
-	}
-
-}

package/src/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -1,212 +0,0 @@
-<template>
-<div
-	v-if="$open"
-	:id="`suggestions-${id ?? fallbackId}`"
-	:class="twMerge(`
-			suggestions
-			bg-bg
-			dark:bg-fg
-			dark:text-bg
-		`,
-		($.attrs as any)?.class
-	)"
-	:data-open="$open"
-	role="listbox"
-	ref="el"
-	v-bind="{ ...$.attrs, class: undefined }"
->
-	<!-- Click event is just in case, it should not really be triggered. We can do click selections via the blur handler. -->
-	<div
-		:id="`suggestion-${id ?? fallbackId}-${index}`"
-		role="option"
-		:class="twMerge(`
-			suggestions--item
-			user-select-none
-			cursor-pointer
-			px-2
-		`,
-			index=== suggestions.active && `
-				bg-accent-200
-				dark:bg-accent-800/70
-			`,
-			($.itemAttrs as any)?.class
-		)"
-		v-bind="{ ...$.itemAttrs, class: undefined }"
-		:aria-selected="index === suggestions.active ? true : false"
-		:aria-label="suggestions.getLabel(item)"
-		v-for="(item, index) in suggestions.filtered"
-		:key="item"
-		@mouseover="suggestions.active = index"
-		@mousedown.prevent
-		@mouseup="suggestions.enterIndex(index, !Array.isArray($modelValue))"
-	>
-		<slot
-			name="item"
-			:item="item"
-			:index="index"
-			:is-selected="Array.isArray($modelValue) ? $modelValue.includes(item) : $modelValue === item"
-		>
-			<div class="flex gap-2 nowrap">
-				<lib-checkbox
-					v-if="Array.isArray($modelValue) && showSelectedValues"
-					:model-value="$modelValue.includes(item)"
-					@mousedown.prevent
-				/>
-				<div> {{ item }} </div>
-			</div>
-		</slot>
-	</div>
-</div>
-</template>
-
-<script setup lang="ts" generic="TSuggestion extends string | object, TValue extends string|string[]">
-import { type HTMLAttributes, reactive, ref } from "vue"
-
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
-import { useSuggestions } from "../../composables/useSuggestions.js"
-import { hasModifiers } from "../../helpers/hasModifiers.js"
-import { twMerge } from "../../utils/twMerge.js"
-import LibCheckbox from "../LibCheckbox/LibCheckbox.vue"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
-
-defineOptions({
-	name: "LibSuggestions",
-	inheritAttrs: false
-})
-
-const $ = useDivideAttrs(["item"] as const)
-
-const emits = defineEmits<SuggestionsEmits>()
-
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
-	isValid: true,
-	canOpen: true,
-	canClose: true,
-	filterKeydown: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true
-})
-/**
- * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
- *
- * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
- */
-const $modelValue = defineModel<TValue>("modelValue", { required: true })
-/**
- * If the element is bound to an input, this is the value that the input should be sharing.
- *
- * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
- */
-const $inputValue = defineModel<string>("inputValue", { default: "" })
-
-const $open = defineModel<boolean>("open", { default: false })
-
-if (typeof props.suggestions?.[0] === "object" && !props.suggestionLabel && !props.suggestionsFilter) {
-	throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
-}
-
-const el = ref<HTMLElement | null>(null)
-
-const suggestions = reactive(useSuggestions<TSuggestion, TValue extends string[] ? true : false>(
-	$inputValue,
-	$modelValue as any,
-	$open,
-	emits,
-	props
-))
-
-const inputKeydownHandler = (e: KeyboardEvent): void => {
-	if (props.filterKeydown?.(e)) return
-	if (hasModifiers(e)) return
-	if (e.key === "Enter") {
-		suggestions.enterSelected(!Array.isArray($modelValue))
-		e.preventDefault()
-	} else if (e.key === "Escape") {
-		suggestions.cancel()
-		e.preventDefault()
-	} else if (!$open.value && ["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key) && suggestions.available) {
-		suggestions.open()
-		e.preventDefault()
-		if (e.key === "PageUp") {
-			suggestions.first()
-		} else if (e.key === "PageDown") {
-			suggestions.last()
-		}
-	} else if (e.key === "ArrowUp") {
-		suggestions.prev()
-		e.preventDefault()
-	} else if (e.key === "ArrowDown") {
-		suggestions.next()
-		e.preventDefault()
-	} else if (e.key === "PageUp") {
-		suggestions.first()
-		e.preventDefault()
-	} else if (e.key === "PageDown") {
-		suggestions.last()
-		e.preventDefault()
-	}
-}
-const inputBlurHandler = (e: MouseEvent): void => {
-	if (props.filterBlur?.(e)) return
-
-	if (!$open.value) return
-
-	if (props.restrictToSuggestions) {
-		suggestions.cancel()
-	} else {
-		if (!Array.isArray($modelValue.value)) {
-			$modelValue.value = $inputValue.value as any
-		}
-	}
-	if ($open.value) {
-		suggestions.close()
-	}
-}
-const inputFocusHandler = (e: FocusEvent): void => {
-	if (props.filterFocus?.(e)) return
-	suggestions.open()
-}
-
-defineExpose({
-	suggestions,
-	el,
-	/** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
-	inputKeydownHandler,
-	/** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
-	inputBlurHandler,
-	/** A focus handler for the input that controls the component. */
-	inputFocusHandler
-})
-</script>
-
-<script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
-	/** Tailwind classes. */
-	class?: string
-}>>
-
-type RealProps
-	= & LinkableByIdProps
-		& LabelProps
-		& BaseInteractiveProps
-		& {
-		/** Return true to prevent the keydown event from being handled. */
-			filterKeydown?: (e: KeyboardEvent) => boolean
-			/** Return true to prevent the blur event from being handled. */
-			filterBlur?: (e: MouseEvent) => boolean
-			/** Return true to prevent the focus event from being handled. */
-			filterFocus?: (e: FocusEvent) => boolean
-		}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
-		/** Tailwind classes. */
-		class?: string
-	}>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
-</script>

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