@witchcraft/ui 0.0.1

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

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta = {
+	component: components.LibSimpleInput,
+	title: "Components/SimpleInput",
+	args: {
+		modelValue: "Value",
+		placeholder: "Placeholder",
+	},
+} satisfies Meta<typeof components.LibSimpleInput> & Meta<{ custom: string }>
+
+export default meta
+type Story = StoryObj<typeof components.LibSimpleInput> // & StoryObj<typeof extraArgs>
+
+
+/** Input */
+export const Primary: Story = {
+	args: {
+		modelValue: "some value",
+	},
+	render: args => ({
+		components,
+		// eslint-disable-next-line no-console
+		setup: () => ({ args, test: () => console.log("Enter") }),
+		template: `
+				<lib-simple-input
+				@keydown="test"
+				class="m-2" v-bind="args" v-model="args.modelValue" ></lib-simple-input>
+				<lib-simple-input class="m-2" v-bind="{...args, modelValue:''}" ></lib-simple-input>
+				`,
+	}),
+}
+
+/** Has more reasonable min-width inside a flexbox. */
+export const InsideAFlexbox: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+				Inside a flexbox:
+				<div class="flex flex-wrap">
+					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
+					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
+				</div>
+		`,
+	}),
+	args: {
+		stretch: true,
+	},
+}
+
+
+export const Disabled = {
+	...Primary,
+	args: {
+		disabled: true,
+	},
+}
+export const Readonly = {
+	...Primary,
+	args: {
+		readonly: true,
+	},
+}
+export const Invalid = {
+	...Primary,
+	args: {
+		valid: false,
+	},
+}
+/**
+ * Intended for being wrapped.
+ * Should not have any border or focus outline styles.
+ */
+export const Borderless = {
+	...Primary,
+	args: {
+		border: false,
+	},
+}
+
+export const Numerical = {
+	...Primary,
+	args: {
+		type: "number",
+	},
+}
+export const NumericalInsideAFlexbox = {
+	...InsideAFlexbox,
+	args: {
+		type: "number",
+	},
+}

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -0,0 +1,148 @@
+<template>
+<input
+	:id="id ?? fallbackId"
+	:class="twMerge(`
+			input
+			flex-1
+			grow-[999999]
+			rounded-sm
+			px-1
+			focus-outline
+			min-w-[2rem]
+			bg-inherit
+			placeholder:text-neutral-400
+			placeholder:focus:text-accent-300
+			read-only:bg-neutral-50
+			read-only:text-neutral-800
+			read-only:placeholder:select-none
+			read-only:placeholder:text-opacity-0
+			read-only:focus:placeholder:text-opacity-0
+			disabled:placeholder:text-nuetral-400
+			disabled:cursor-unset
+			disabled:bg-neutral-50
+			disabled:text-neutral-400
+			dark:read-only:bg-neutral-950
+			dark:read-only:text-neutral-200
+			dark:disabled:placeholder:text-nuetral-600
+			dark:disabled:bg-neutral-950
+			dark:disabled:text-neutral-500
+		`,
+		type === `text` && `
+			min-w-[10ch]
+			w-full
+		`,
+		type === `number` && `
+			w-12
+			placeholder:text-transparent
+			appearance-none
+			pr-0
+		`,
+		border && `
+			border
+			border-neutral-500
+			focus:border-accent-500
+			disabled:border-neutral-400
+			dark:disabled:border-neutral-600
+		`,
+		!valid && `
+			placeholder:text-danger-700
+			border-danger-700
+			focus:border-danger-700
+			outlined:!ring-danger-700
+			text-danger-800
+			dark:text-danger-400
+			dark:placeholder:text-danger-700
+			dark:border-danger-600
+		`,
+		($attrs as any)?.class
+	)"
+	:data-border="border"
+	:data-invalid="!valid"
+	:type="type"
+	:placeholder="placeholder"
+	:disabled="disabled"
+	:readonly="readonly"
+	v-model="modelValue"
+	v-bind="{...$attrs, class:undefined, ...ariaLabel}"
+	@keydown="handleKeydown"
+	@input="emit('input', $event as InputEvent)"
+>
+</template>
+
+
+<script lang="ts" setup generic="T">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { pick } from "@alanscodelog/utils/pick.js"
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { castType } from "@alanscodelog/utils/utils"
+import { getCurrentInstance, type InputHTMLAttributes, type InputTypeHTMLAttribute,toRef,useAttrs } from "vue"
+
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { hasModifiers } from "../../helpers/hasModifiers.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-simple-input",
+	inheritAttrs: false,
+})
+
+const fallbackId = getFallbackId()
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	id: "",
+	placeholder: "",
+	valid: true,
+	label: "",
+	type: undefined,
+	...baseInteractivePropsDefaults
+})
+
+const modelValue = defineModel<T>({ required: true })
+
+const emit = defineEmits<{
+	/* User presses enter.*/
+	(e: "submit", val: T): void
+	(e: "input", val: InputEvent): void
+}>()
+const $attrs = useAttrs()
+const ariaLabel = useAriaLabel(props, fallbackId)
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" && !hasModifiers(e)) {
+		emit("submit", modelValue.value)
+	}
+}
+
+</script>
+
+<script lang="ts">
+
+type RealProps =
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		placeholder?: InputHTMLAttributes["placeholder"]
+		disabled?: InputHTMLAttributes["disabled"]
+		id?: InputHTMLAttributes["id"]
+		type?: InputHTMLAttributes["type"]
+		valid?: boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<
+		InputHTMLAttributes,
+		| "class"
+		| "readonly"
+		| "disabled"
+		| "onSubmit"
+		| "onInput"
+	> & TailwindClassProp>,
+	RealProps
+{}
+</script>

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

@@ -0,0 +1,137 @@
+/* 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"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+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

@@ -0,0 +1,198 @@
+<template>
+<div
+	v-if="suggestions.isOpen"
+	:id="`suggestions-${id ?? fallbackId}`"
+	:class="twMerge(`
+			suggestions
+			bg-bg
+			dark:bg-fg
+		`,
+		($.attrs as any)?.class
+	)"
+	:data-open="suggestions.isOpen"
+	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(`
+					px-1
+					user-select-none
+					cursor-pointer
+					px-2
+				`,
+			index=== suggestions.active && `bg-accent-200 dark:bg-accent-800`,
+			($.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.enterSuggestion(index)"
+	>
+		<slot name="item" :item="item" :index="index">
+			{{ item }}
+		</slot>
+	</div>
+</div>
+</template>
+
+
+<script setup lang="ts" generic="TSuggestion extends string | object">
+
+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 { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type MultiValueProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-suggestions",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["item"] as const)
+
+const emits = defineEmits<SuggestionsEmits>()
+
+const fallbackId = getFallbackId()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
+	isValid: true,
+	canOpen: true,
+	values: undefined,
+	filterKeydown: undefined,
+	...baseInteractivePropsDefaults
+})
+
+/**
+ * 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<string>("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: "" })
+
+
+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 mousedown = ref(false)
+
+const suggestions = reactive(useSuggestions(
+	$inputValue,
+	$modelValue,
+	emits,
+	props
+))
+
+const inputKeydownHandler = (e: KeyboardEvent): void => {
+	if (props.filterKeydown?.(e)) return
+	if (hasModifiers(e)) return
+	if (e.key === "Enter") {
+		suggestions.enterSelected()
+		e.preventDefault()
+	} else if (e.key === "Escape") {
+		suggestions.cancel()
+		e.preventDefault()
+	} else if (!suggestions.isOpen && ["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 (!suggestions.isOpen) return
+
+	if (props.restrictToSuggestions) {
+		suggestions.cancel()
+	} else {
+		$modelValue.value = $inputValue.value
+	}
+	if (suggestions.isOpen) {
+		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
+	& MultiValueProps
+	& {
+		/** 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>