@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/src/runtime/components/WCombobox/WCombobox.vue

@@ -0,0 +1,446 @@
+<template>
+<!-- reka's filter does not work well, specially with lowercase/uppercase, e.g. A !== A but a === A ??? -->
+<ComboboxRoot
+	:ignore-filter="true"
+	:class="twMerge(`combobox-root relative`, $attrs?.class as any)"
+	v-bind="{ ...$attrs, class: undefined }"
+	:reset-search-term-on-select="true"
+	:reset-search-term-on-blur="true"
+	:open-on-click="true"
+	ref="comboboxRootComponent"
+	v-model:open="open"
+	v-model="modelValue"
+>
+	<ComboboxAnchor
+		class="combobox-anchor justify-between flex"
+	>
+		<div
+			:class="twMerge(`
+				combobox--input-wrapper
+				flex
+				items-center
+				justify-between
+				rounded-sm
+				px-1
+				leading-none
+				fg-inherit
+				bg-inherit
+				outlined-within:border-accent-500
+				gap-2
+				focus-outline-none
+				focus-outline-hidden
+				w-full
+				min-w-0
+			`, errorMessage !== false && `!border-danger-500`,
+				border &&`
+					border
+					border-neutral-300
+					dark:border-neutral-700
+					bg-neutral-100
+					dark:bg-neutral-800/50
+					focus:bg-bg
+					dark:focus:bg-neutral-800
+					dark:focus:border-accent-500
+					focus-within:border-accent-500
+					dark:focus-within:border-accent-500
+					has-[input:invalid]:border-danger-500
+					invalid:border-danger-500
+				`,
+				open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
+				open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
+			)"
+		>
+			<!-- @vue-expect-error aria/keydown can be defined -->
+			<ComboboxInput
+				:id="id"
+				:display-value="display"
+				spellcheck="false"
+				:aria-invalid="errorMessage !== false"
+				:aria-busy="loading"
+				:aria-errormessage="ariaDescribedBy"
+				:class="twMerge(`
+					combobox--input
+					bg-transparent
+					min-w-[70px]
+					w-full
+					outline-hidden
+					px-1
+				`,
+					inputProps?.class
+				)"
+				v-bind="{ ...inputProps, class: undefined }"
+				:aria-describedby="ariaDescribedBy"
+				v-model="searchTerm"
+				@keydown.enter="save"
+			/>
+			<Transition>
+				<slot
+					v-if="showLoadingIndicator"
+					name="loading-indicator"
+				>
+					<WIcon
+						v-if="showLoadingIndicator"
+						aria-label="Loading suggestions"
+						class="
+						combobox--loading-indicator
+						animate-spin
+						text-neutral-500
+						-mr-1
+					"
+					>
+						<i-lucide-loader-circle/>
+					</WIcon>
+				</slot>
+			</Transition>
+			<ComboboxTrigger
+				:as-child="true"
+			>
+				<slot
+					name="trigger"
+					v-bind="{ open }"
+				>
+					<WButton
+						:border="false"
+						class="combobox--toggle p-0"
+						:aria-label="open ? 'Close' : 'Open'"
+					>
+						<slot
+							name="toggle"
+							:is-open="open"
+						>
+							<WIcon
+								:class="twMerge(`combobox--toggle scale-150`, open && `rotate-180`)"
+							>
+								<i-chevron-caret-down/>
+							</WIcon>
+						</slot>
+					</WButton>
+				</slot>
+			</ComboboxTrigger>
+		</div>
+	</ComboboxAnchor>
+	<ComboboxPortal :to="to">
+		<ComboboxContent
+			v-if="showEmptyLabel || filtered.length > 0 || errorMessage !== false"
+			:style="contentStyle"
+			:class="twMerge(`
+					combobox--content
+					z-100
+					w-[var(--reka-combobox-trigger-width)]
+					align-end
+					bg-white
+					dark:bg-neutral-900
+					will-change-[opacity,transform]
+					data-[side=top]:animate-slideDownAndFade
+					data-[side=right]:animate-slideLeftAndFade
+					data-[side=bottom]:animate-slideUpAndFade
+					data-[side=left]:animate-slideRightAndFade
+					border-neutral-300
+					dark:border-neutral-700
+					border
+					rounded-sm
+					shadow-lg
+					shadow-black/50
+					data-[side=bottom]:border-t-0
+					data-[side=top]:border-b-0
+					dark:data-[side=bottom]:border-t-0
+					dark:data-[side=top]:border-b-0
+					data-[side=bottom]:rounded-tl-none
+					data-[side=bottom]:rounded-tr-none
+					data-[side=top]:rounded-bl-none
+					data-[side=top]:rounded-br-none
+					max-h-[500px]
+					overflow-y-auto
+				`, contentProps?.class)"
+			ref="contentComponent"
+			v-bind="{
+				side: 'bottom',
+				position: 'popper',
+				avoidCollisions: true,
+				prioritizePosition: true,
+				...contentProps,
+				class: undefined
+			}"
+		>
+			<ComboboxViewport
+
+				class="combobox--viewport flex flex-col"
+			>
+				<Transition>
+					<div
+						v-if="useSlots()['header']"
+						:id="`${id}-instruction`"
+						class="
+							combobox--popup-header
+							px-2
+							flex
+							items-center
+							justify-center
+						"
+					>
+						<slot
+							:filtered="filtered"
+							:is-showing-empty-label="showEmptyLabel"
+							name="header"
+							class="
+								text-neutral-800
+								dark:text-neutral-200
+								combobox--popup-label
+								text-ellipsis
+								overflow-hidden
+								whitespace-nowrap
+							"
+						/>
+					</div>
+				</Transition>
+				<slot
+					v-if="errorMessage !== false"
+					name="invalid"
+					v-bind="{ searchTerm, errorMessage, id: `${id}-error`, role: 'alert' }"
+				>
+					<div
+						:id="`${id}-error`"
+						role="alert"
+						class="
+							combobox--error-message
+							text-danger-500
+							dark:text-danger-500
+							text-sm
+							px-2
+							py-1
+							bg-danger-100
+							dark:bg-danger-800
+							flex
+							items-center
+							justify-center
+						"
+					>
+						{{ errorMessage }}
+					</div>
+				</slot>
+				<ComboboxEmpty
+					v-if="showEmptyLabel"
+					class="
+						combobox--empty
+						px-2
+						text-center
+						text-neutral-800
+						dark:text-neutral-200
+						bg-neutral-100
+						dark:bg-neutral-800
+					"
+				>
+					{{ emptyLabel }}
+				</ComboboxEmpty>
+				<slot
+					name="suggestions"
+					v-bind="{ filtered, display, searchTerm }"
+				>
+					<div
+						class="
+						combobox--suggestions
+						flex-col
+						flex
+						max-h-[500px]
+						overflow-y-auto
+					"
+					>
+						<ComboboxItem
+							class="
+								combobox--suggestion
+								flex
+								justify-between
+								gap-2
+								px-2
+								cursor-pointer
+								data-[highlighted]:outline-hidden
+								data-[highlighted]:bg-accent-200
+								data-[highlighted]:text-accent-800
+								dark:data-[highlighted]:bg-accent-800
+								dark:data-[highlighted]:text-accent-200
+							"
+							:value="suggestion"
+							v-for="(suggestion, index) in filtered"
+							:key="index"
+						>
+							<slot
+								name="suggestion-icon"
+								v-bind="{ suggestion: suggestion as Exclude<TSuggestion, any[]> }"
+							/>
+							<slot
+								name="suggestion"
+								v-bind="{
+									suggestion: suggestion as Exclude<TSuggestion, any[]>,
+									suggestionText: display(suggestion)
+								}"
+							>
+								<div
+									class="
+									combobox--suggestion-label
+								"
+								>
+									{{ display(suggestion) }}
+								</div>
+							</slot>
+						</ComboboxItem>
+					</div>
+				</slot>
+			</ComboboxViewport>
+		</ComboboxContent>
+	</ComboboxPortal>
+</ComboboxRoot>
+</template>
+
+<script setup lang="ts" generic="TSuggestion extends NonNullable<AcceptableValue>">
+import type { AcceptableValue, ComboboxContentEmits, ComboboxContentProps, ComboboxInputEmits, ComboboxInputProps } from "reka-ui"
+import {
+	ComboboxAnchor,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxPortal,
+	ComboboxRoot,
+	ComboboxTrigger,
+	ComboboxViewport, useFilter } from "reka-ui"
+import type { EmitsToProps, HTMLAttributes, InputHTMLAttributes } from "vue"
+import { computed, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch } from "vue"
+
+import { useDelayedLoadingIndicator } from "../../composables/useDelayedLoadingIndicator.js"
+import { type SuggestionsDisplayProps, useDisplayForReka } from "../../composables/useDisplayForReka.js"
+import { useFallbackId } from "../../composables/useFallbackId.js"
+import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
+import type { PopupConstrainToProps } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
+
+const $attrs = useAttrs()
+
+const emit = defineEmits<{
+	(e: "save", value: string): void
+	(e: "new", value: string): void
+}>()
+
+const props = withDefaults(defineProps<
+	& SuggestionsDisplayProps<TSuggestion>
+	& PopupConstrainToProps
+	& {
+		id?: string
+		border?: boolean
+		to?: string
+		/**
+		 * Validates the input, return true if valid, otherwise return an error message.
+		 *
+		 * If the input is invalid, modelValue is not updated. Empty inputs are visually valid, but they cannot trigger saves or or any setting of modelValue.
+		 *
+		 * If restrictToSuggestions is true, the input will be invalid if there is no exact match.
+		 *
+		 * `save` will not be emitted when the input is invalid.
+		 *
+		 * To show an error message, return a string from the function.
+		 */
+		isValid?: (searchTerm: string) => true | string
+		suggestions: TSuggestion[]
+		/** Shown in the popup when the search term is valid, not empty, not already selected, there are no suggestions, and restrictToSuggestions is false. Defaults to undefined. */
+		emptyLabel?: string
+		/** The popup can't be styled via the regular class attr because it's teleported. You can also pass any reka ComboboxContent options. */
+		contentProps?: { class?: string, to?: string } & HTMLAttributes & ComboboxContentProps & EmitsToProps<ComboboxContentEmits>
+		/** Disables the filter. */
+		ignoreFilter?: boolean
+		/** If false, modelValue is set to the search term (so long as it's valid). */
+		restrictToSuggestions?: boolean
+		/** Input attributes or reka-ui ComboboxInput props. */
+		inputProps?: Omit<InputHTMLAttributes, "class"> & { class?: string } & HTMLAttributes & ComboboxInputProps & EmitsToProps<ComboboxInputEmits>
+	}>(), {
+	border: true,
+	ignoreFilter: false,
+	emptyLabel: undefined,
+	isValid: (_: string) => true as const,
+	restrictToSuggestions: false,
+	to: "#root"
+})
+const finalId = useFallbackId(props)
+
+const contentStyle = usePopupConstrainToStyle("combobox-content", props, [props?.contentProps?.style])
+
+const modelValue = defineModel<TSuggestion>({ required: false, default: "" })
+usePreHydrationValue(finalId, modelValue)
+const open = defineModel<boolean>("open", { required: false, default: false })
+const searchTerm = defineModel<string>("searchTerm", { default: "" })
+const display = useDisplayForReka(props)
+
+const { contains } = useFilter()
+const filtered = computed(() => {
+	const f = props.ignoreFilter
+		? props.suggestions
+		: props.suggestions.filter(v => {
+				return contains(display(v), searchTerm.value)
+			})
+	if ((f?.length ?? 0) === 0 && props.restrictToSuggestions) {
+		return props.suggestions
+	} else {
+		return f
+	}
+})
+
+const errorMessage = computed(() => {
+	if (searchTerm.value === "") return false
+	const isExactMatch = filtered.value.find(v => display(v) === searchTerm.value)
+	if (!props.restrictToSuggestions && isExactMatch) return false
+	const validation = props.isValid(searchTerm.value)
+	if (validation === true) return false
+	return validation
+})
+
+
+watch(searchTerm, () => {
+	const isExactMatch = filtered.value.find(v => display(v) === searchTerm.value)
+	if (isExactMatch) {
+		modelValue.value = isExactMatch
+	}
+})
+
+
+function save(e: Event) {
+	if (errorMessage.value !== false || searchTerm.value === "") {
+		open.value = false
+		return
+	}
+	e.preventDefault()
+	emit("save", searchTerm.value)
+	open.value = false
+}
+
+const loading = defineModel<boolean>("loading", { default: false })
+const showLoadingIndicator = useDelayedLoadingIndicator(loading)
+
+const showEmptyLabel = computed(() => {
+	return errorMessage.value === false
+		&& !props.restrictToSuggestions
+		&& searchTerm.value !== ""
+		&& props.emptyLabel !== ""
+		&& !props.suggestions.some(s => display(s) === searchTerm.value)
+})
+
+const ariaDescribedBy = computed(() => {
+	const ids = []
+	if (open.value) ids.push(`${props.id}-instruction`)
+	if (errorMessage.value !== false) ids.push(`${props.id}-error`)
+	if ("ariaDescribedby" in $attrs) ids.push($attrs.ariaDescribedby as any)
+	return ids.join(" ") || undefined
+})
+
+const contentComp = useTemplateRef("contentComponent")
+const popupSide = ref<"top" | "right" | "bottom" | "left" | undefined>(undefined)
+watch(open, () => {
+	nextTick(() => {
+		if (open.value && contentComp.value?.$el) {
+			popupSide.value = contentComp.value.$el.getAttribute("data-side")
+		} else {
+			popupSide.value = undefined
+		}
+	})
+})
+</script>

package/src/runtime/components/WCombobox/storyPlays.ts

@@ -0,0 +1,92 @@
+import { expect, userEvent, waitFor, within } from "@storybook/test"
+
+export const playBasic = async ({ canvasElement }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox") // More robust than LabelText
+	await userEvent.clear(input)
+
+	await userEvent.type(input, "A")
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("A")
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "[Esc]")
+	await expect(canvas.getByTestId("search-term")).toHaveTextContent("")
+
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("A")
+}
+export const playBasicKeyboardSelect = async ({ canvasElement }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "A")
+
+	await expect(canvas.getByRole("listbox")).toBeInTheDocument()
+
+	await userEvent.keyboard("{ArrowDown}")
+	const options = canvas.getAllByRole("option")
+
+	await expect(options[1]).toHaveAttribute("data-highlighted")
+
+	await userEvent.keyboard("{Enter}")
+	// it's the 0th element because of the filter
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent(options[0]!.textContent?.trim() ?? "")
+}
+export const playBasicClickSelect = async ({ canvasElement }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+	await userEvent.clear(input)
+
+	await userEvent.click(input)
+
+	const option = canvas.getByRole("option", { name: "AB" })
+	await userEvent.click(option)
+
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("AB")
+
+	await waitFor(() => {
+		expect(canvas.queryByRole("listbox")).not.toBeInTheDocument()
+	})
+}
+export const playValidation = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "Invalid")
+
+	await userEvent.click(input)
+
+	const body = within(document.body)
+	await waitFor(() => {
+		expect(body.getByRole("alert")).toBeInTheDocument()
+	})
+}
+
+export const playAllowNewValues = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+	await userEvent.clear(input)
+	const newValue = "New Custom Value"
+
+	await userEvent.type(input, newValue)
+
+	const body = within(document.body)
+	await waitFor(() => {
+		expect(body.getByText(/Press Enter to Add Value/i)).toBeInTheDocument()
+	})
+
+	await userEvent.keyboard("{Enter}")
+
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent(newValue)
+
+	await userEvent.clear(input)
+	await userEvent.type(input, newValue)
+	expect(body.queryByText(/Press Enter to Add Value/i)).not.toBeInTheDocument()
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "New")
+	await waitFor(() => {
+		expect(body.getByRole("option", { name: newValue })).toBeInTheDocument()
+	})
+}

package/src/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.stories.ts → WDarkModeSwitcher/WDarkModeSwitcher.stories.ts}

@@ -3,13 +3,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 
-import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue"
+import WDarkModeSwitcher from "./WDarkModeSwitcher.vue"
 
 // todo, maybe don't do this for perf reasons
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibDarkModeSwitcher> = {
-	component: LibDarkModeSwitcher,
+const meta: Meta<typeof WDarkModeSwitcher> = {
+	component: WDarkModeSwitcher,
 	title: "Components/DarkModeSwitcher",
 	args: {
 
@@ -17,7 +17,7 @@ const meta: Meta<typeof LibDarkModeSwitcher> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibDarkModeSwitcher>
+type Story = StoryObj<typeof WDarkModeSwitcher>
 
 
 export const Primary: Story = {
@@ -32,10 +32,10 @@ export const Primary: Story = {
 		},
 		template: `
 			Value: {{darkMode}}
-			<LibDarkModeSwitcher 
+			<WDarkModeSwitcher 
 				@update:darkMode="darkMode = $event"
 				v-bind="{...args}"
-			></LibDarkModeSwitcher>
+			></WDarkModeSwitcher>
 			<!-- workaround for style tag not being allowed -->
 			<component is="style">
 				{{args.css}}

package/src/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.vue → WDarkModeSwitcher/WDarkModeSwitcher.vue}

@@ -1,23 +1,23 @@
 <template>
-<lib-button
+<WButton
 	v-bind="{ ...$attrs, class: undefined }"
-	:class="!($attrs as any).unstyle && twMerge(`
+	:class="!unstyle && twMerge(`
 			dark-mode-switcher
 			rounded-full
 			after:rounded-full
 		`,
 		($attrs as any)?.class
 	)"
-	:title="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
+	:aria-label="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
 	@click="cycleDarkMode"
 >
 	<!-- content-vertical-holder will keep the icon the height of a text line regardless of the svg used -->
 	<template #icon>
-		<icon
+		<WIcon
 			class="w-[1em] items-center content-vertical-holder"
 		>
 			<component :is="darkModeState==='dark' ? IFaSolidMoon : darkModeState==='light' ? IPhSunBold : IFa6SolidCircleHalfStroke"/>
-		</icon>
+		</WIcon>
 	</template>
 	<template
 		#default
@@ -27,7 +27,7 @@
 			{{ t(`dark-mode-switcher.${darkModeState}`) }}
 		</div>
 	</template>
-</lib-button>
+</Wbutton>
 </template>
 
 <script lang="ts" setup>
@@ -39,10 +39,10 @@ import IPhSunBold from "~icons/ph/sun-bold"
 
 import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import type { TailwindClassProp } from "../shared/props.js"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 const t = useInjectedI18n()
 
@@ -54,7 +54,16 @@ const emit = defineEmits<{
 }>()
 const $attrs = useAttrs()
 
-withDefaults(defineProps<Props>(), { showLabel: true })
+withDefaults(defineProps<
+	& Pick<BaseInteractiveProps, "border">
+	& {
+		disabled?: boolean
+		unstyle?: boolean
+		showLabel?: boolean
+	}
+	& /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+>(), { showLabel: true })
 
 const {
 	darkMode,
@@ -70,23 +79,3 @@ onMounted(() => {
 })
 </script>
 
-<script lang="ts">
-export default {
-	name: "LibDarkModeSwitcher"
-}
-type RealProps = {
-	showLabel?: boolean
-}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled">
-	& TailwindClassProp
-	& {
-		disabled?: boolean
-		unstyle?: boolean
-	}>,
-	RealProps
-{ }
-</script>