@witchcraft/ui 0.0.1

package/src/runtime/components/LibInput/LibInput.vue

@@ -0,0 +1,372 @@
+<template>
+<div
+	:class="twMerge(`input wrapper
+			grow
+			flex
+			flex-wrap
+			`,
+		disabled && `
+			text-neutral-400
+		`,
+		($.wrapperAttrs as any)?.class,
+	)"
+	tabindex="-1"
+	v-bind="{...$.wrapperAttrs, class:undefined}"
+	ref="inputWrapperEl"
+>
+	<slot name="label" v-bind="{ ...slotProps, label }">
+		<lib-label v-if="label || $slots.default"
+			:id="id ?? fallbackId"
+			:disabled="disabled"
+			:readonly="readonly"
+			:valid="valid"
+		>
+			<slot v-bind="slotProps">
+				{{ label }}
+			</slot>
+		</lib-label>
+		<!-- Allow blurring when clicking the blank part of a label. -->
+		<div class="flex-1"/>
+	</slot>
+	<!-- These are mostly copies of the classes on LibSimpleInput except made to work with disabled/readonly/etc manually since a div cannot have these states. -->
+	<div
+		:data-border="border"
+		:data-invalid="!valid"
+		:data-disabled="disabled"
+		:data-read-only="readonly"
+		:data-is-open="isOpen"
+		v-bind="{...$['inner-wrapperAttrs'], class:undefined}"
+		:class="twMerge(`inner-wrapper
+				relative
+				flex
+				flex-1
+				basis-[100%]
+				flex-wrap
+				rounded-sm
+				gap-2
+				px-2
+			`,
+			border && `
+				bg-inherit
+				border
+				border-neutral-500
+				outlined-within:border-accent-500
+			`,
+			isOpen && `rounded-b-none`,
+			!valid && `
+				border-danger-700
+				outlined:!ring-danger-700
+				text-danger-800
+				dark:text-danger-400
+				dark:border-danger-600
+				`,
+			readonly && `
+				bg-neutral-50
+				text-neutral-800
+				dark:bg-neutral-950
+				dark:text-neutral-200
+				`,
+			disabled && `
+				bg-neutral-50
+				text-neutral-400
+				dark:border-neutral-600
+				border-neutral-400
+			`,
+			($['inner-wrapperAttrs'] as any)?.class,
+		)"
+	>
+		<slot name="left" v-bind="slotProps"/>
+		<slot name="input" v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }">
+			<lib-simple-input
+				:class="twMerge(
+					`p-0`,
+					!$slots.left && `-ml-2 pl-2`,
+					!$slots.right && (!$values || $values.length === 0) && !suggestions && `-mr-2 -pr-2`,
+					($.attrs as any)?.class,
+				)"
+				v-bind="inputProps"
+			/>
+		</slot>
+		<slot name="indicator" v-bind="{isOpen, suggestionsIndicatorClickHandler }">
+			<div
+				v-if="suggestions"
+				:data-is-open="isOpen"
+				:class="twMerge(
+					`indicator flex flex-col justify-center`,
+				)"
+				@click="suggestionsIndicatorClickHandler"
+			>
+				<icon :class="isOpen && `rotate-180`"> <i-fa6-solid-chevron-up/> </icon>
+			</div>
+		</slot>
+		<slot
+			name="values"
+			v-bind="{...multivaluesProps, ...slotProps}"
+		>
+			<template v-if="$values && $values.length > 0">
+				<lib-multi-values
+					:class="twMerge(`
+							grow-[9000]
+							justify-space-between
+							py-1
+						`,
+						!$slots.right && `
+							-mr-1
+						`,
+						($.multivaluesAttrs as any)?.class,
+					)"
+					v-bind="multivaluesProps"
+				/>
+			</template>
+		</slot>
+		<slot name="right" v-bind="slotProps"/>
+
+		<slot v-if="suggestions" name="suggestions" v-bind="{...suggestionProps, ...slotProps}">
+			<!-- todo 1px needs to be abstracted to var -->
+			<lib-suggestions
+				:class="twMerge(`
+						absolute
+						-inset-x-px
+						z-10
+						rounded-b-sm
+						border-accent-500
+						border
+						top-full
+					`,
+					!border && `
+						rounded-sm
+					`,
+					($.suggestionsAttrs as any)?.class,
+				)"
+				ref="suggestionsComponent"
+				v-bind="suggestionProps"
+			>
+				<template #item="itemSlotProps">
+					<slot name="suggestion-item" v-bind="itemSlotProps"/>
+				</template>
+			</lib-suggestions>
+		</slot>
+	</div>
+</div>
+</template>
+<script setup lang="ts">
+import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js"
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { computed,type HTMLAttributes,type InputHTMLAttributes, nextTick, type PropType, ref, toRef, useSlots, watch } from "vue"
+import type { ComponentExposed } from "vue-component-type-helpers"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useSuggestionsInputAria } from "../../composables/useSuggestions.js"
+import { hasModifiers } from "../../helpers/hasModifiers.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibLabel from "../LibLabel/LibLabel.vue"
+import LibMultiValues from "../LibMultiValues/LibMultiValues.vue"
+import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
+import LibSuggestions from "../LibSuggestions/LibSuggestions.vue"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type MultiValueProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+
+
+/* #region base */
+defineOptions({
+	name: "lib-input",
+	inheritAttrs: false,
+})
+const $slots = useSlots()
+const emit = defineEmits<{
+	(e: "submit", val: string, suggestion?: any): void
+	(e: "input", val: InputEvent): void
+	(e: "keydown", val: KeyboardEvent): void
+	(e: "blur", val: FocusEvent): void
+	(e: "focus", val: FocusEvent): void
+	(e: "indicatorClick", val: MouseEvent): void
+}>()
+
+const fallbackId = getFallbackId()
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	valid: true,
+	suggestions: undefined,
+	updateOnlyOnSubmit: false,
+	...baseInteractivePropsDefaults,
+})
+
+const $ = useDivideAttrs(["wrapper", "inner-wrapper", "suggestions", "multivalues"] as const)
+
+const $values = defineModel<string[] | undefined>("values", { default: undefined })
+const $modelValue = defineModel<string>({ required: true })
+
+const fullId = computed(() => props.id ?? fallbackId)
+
+const $inputValue = defineModel<string>("inputValue", { default: "" })
+$inputValue.value = $modelValue.value ?? ""
+
+const canEdit = computed(() => !props.disabled && !props.readonly)
+const suggestionsComponent = ref<ComponentExposed<typeof LibSuggestions> | null>(null)
+const activeSuggestion = ref(0)
+watch($modelValue, () => {
+	$inputValue.value = $modelValue.value
+})
+const inputWrapperEl = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const suggestionsIndicatorClickHandler = (e: MouseEvent) => {
+	nextTick(() => {
+		if (props.suggestions) {
+			(suggestionsComponent.value as any)?.suggestions.toggle()
+		}
+	})
+	emit("indicatorClick", e)
+}
+
+
+const handleKeydown = (e: KeyboardEvent) => {
+	if (props.suggestions) {
+		(suggestionsComponent.value as any)?.inputKeydownHandler?.(e)
+	}
+	
+	emit("keydown", e)
+}
+const handleBlur = (e: FocusEvent) => {
+	if (props.suggestions) {
+		(suggestionsComponent.value as any)?.inputBlurHandler?.(e)
+	}
+	emit("blur", e)
+}
+const handleFocus = (e: FocusEvent) => {
+	if (props.suggestions) {
+		(suggestionsComponent.value as any)?.inputFocusHandler?.(e)
+	}
+	emit("focus", e)
+}
+
+function addValue(val: string) {
+	if ($values.value === undefined) return
+	if (isBlank(val)) return
+	props.preventDuplicateValues
+		? pushIfNotIn($values.value, [val])
+		: $values.value.push(val)
+	$inputValue.value = ""
+	$modelValue.value = ""
+}
+const suggestions = toRef(props, "suggestions")
+const inputAriaProps = useSuggestionsInputAria(
+	fullId,
+	isOpen,
+	activeSuggestion,
+	suggestions,
+)
+const inputProps = computed(() => ({
+	id: fullId.value,
+	border: false,
+	disabled: props.disabled,
+	readonly: props.readonly,
+	isValid: props.valid,
+	onKeydown: handleKeydown,
+	onBlur: handleBlur,
+	onFocus: handleFocus,
+	modelValue: $inputValue.value,
+	"onUpdate:modelValue": (e: string) => {
+		$inputValue.value = e
+		if (!props.suggestions && !props.updateOnlyOnSubmit && !props.restrictToSuggestions) {
+			$modelValue.value = e
+		}
+	},
+	onSubmit: (e: string) => {
+		if (!props.suggestions) {
+			$modelValue.value = e
+			emit("submit", e)
+			if ($values.value) {
+				addValue(e)
+			}
+		}
+	},
+	...inputAriaProps.value,
+	canEdit: canEdit.value,
+	...$.value.attrs,
+	class: undefined,
+}))
+
+function slotSubmit(val: any): void {
+	emit("submit", val)
+}
+const slotProps = computed(() => ({
+	id: fullId.value,
+	isOpen: isOpen.value,
+	valid: props.valid,
+	disabled: props.disabled,
+	readonly: props.readonly,
+	emitSubmit: slotSubmit
+}))
+
+const suggestionProps = computed(() => ({
+	id: fullId.value,
+	suggestions: props.suggestions,
+	allowOpenEmpty: props.allowOpenEmpty,
+	restrictToSuggestions: props.restrictToSuggestions,
+	suggestionLabel: props.suggestionLabel,
+	suggestionsFilter: props.suggestionsFilter,
+	modelValue: $modelValue.value.toString(),
+	inputValue: $inputValue.value,
+	isValid: props.isValid,
+	"onUpdate:inputValue": (e: string) => $inputValue.value = e,
+	onSubmit: (e: string, suggestion: any) => {
+		$modelValue.value = e
+		emit("submit", e, suggestion)
+		if ($values.value) {
+			addValue(e)
+		}
+	},
+	"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
+	"onUpdate:activeSuggestion": (e: number) => activeSuggestion.value = e,
+	...$.value.suggestionsAttrs,
+	class: undefined,
+}))
+
+const multivaluesProps = computed(() => ({
+	hasSlotRight: !$slots.right,
+	label: props.label,
+	border: props.border,
+	disabled: props.disabled,
+	readonly: props.readonly,
+	values: $values.value,
+	"onUpdate:values": (e: string[]) => $values.value = e,
+	...$.value.multivaluesAttrs,
+	class: undefined,
+}))
+
+
+defineExpose({
+	suggestionsComponent,
+	el: inputWrapperEl,
+})
+</script>
+<script lang="ts">
+
+type WrapperTypes =
+	& WrapperProps<"suggestions",HTMLAttributes >
+	& WrapperProps<"wrapper", HTMLAttributes >
+	& WrapperProps<"inner-wrapper",HTMLAttributes>
+
+type RealProps =
+	SuggestionsProps
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& MultiValueProps
+& {
+	suggestions?: SuggestionsProps["suggestions"]
+	valid?: boolean
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<InputHTMLAttributes,"class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>,
+	/** @vue-ignore */
+	Partial<WrapperTypes>,
+	RealProps { }
+</script>
+

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

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import Label from "./LibLabel.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof Label> = {
+	component: Label,
+	title: "Components/Label",
+	args: {
+		slot: "label",
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof Label>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+				<lib-label v-bind="args">{{args.slot}}</lib-label>
+				<br/>
+				In flex col with input:
+				<div class="flex flex-col">
+					<lib-label v-bind="args">{{args.slot}}</lib-label>
+					<lib-simple-input modelValue="some input"></lib-simple-input>
+				</div>
+		`,
+	}),
+}
+

package/src/runtime/components/LibLabel/LibLabel.vue

@@ -0,0 +1,66 @@
+<template>
+<!-- we use data-disabled because labels have no disabled property technically -->
+<label
+	:id="`label-${id ?? fallbackId}`"
+	:class="!($attrs as any).unstyle && twMerge(`
+			pr-0
+			text-sm
+		`,
+		!valid && `text-danger-700`,
+		($attrs as any)?.class
+	)"
+	:data-disabled="disabled"
+	:data-invalid="!valid"
+	:for="id"
+	v-bind="{...$attrs, class:undefined}"
+>
+	<slot/>
+</label>
+</template>
+
+<script setup  lang="ts">
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { type LabelHTMLAttributes,toRef,useAttrs } from "vue"
+
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-label",
+})
+
+const fallbackId = getFallbackId()
+
+ 
+withDefaults(defineProps<Props>(), {
+	id: "",
+	unstyled: undefined,
+	valid: true,
+	...baseInteractivePropsDefaults,
+})
+
+const $attrs = useAttrs()
+</script>
+
+<script lang="ts">
+type RealProps =
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		unstyled?: boolean
+		valid?: boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<LabelHTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+{}
+</script>
+
+<script lang="ts">
+
+</script>

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

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import LibMultiValues from "./LibMultiValues.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta = {
+	component: LibMultiValues as any,
+	title: "Components/MultiValues",
+	args: {
+		values: ["A", "B", "C"],
+		border: true,
+	},
+	tags: ["!test"],
+} satisfies Meta<typeof LibMultiValues> & Meta<{ custom: string }>
+
+export default meta
+type Story = StoryObj<typeof LibMultiValues> // & StoryObj<typeof extraArgs>
+
+
+/**
+ * The multi-value component is just the values part beneath the input.
+ *
+ * This is a simple example of how it can be combined with the simple-input component to create an input with multiple values.
+ *
+ * Note that setting the `disabled` or `readonly` props won't prevent the component from accepting an updated `values` prop. Disabling adding must be done separately from whatever is controlling the component (e.g. the input in this case).
+ */
+export const Primary: Story = {
+	render: args => ({
+		components: { ...components, LibMultiValues },
+		setup: () => {
+			const inputValue = ref("B")
+			const multiValueEl = ref<typeof LibMultiValues | null>(null)
+			const onKeydownEnter = (e: KeyboardEvent): void => {
+				if (e.key === "Enter") (args.values!).push(inputValue.value)
+			}
+			return ({
+				args,
+				inputValue,
+				multiValueEl,
+				onKeydownEnter,
+			})
+		}
+		,
+
+		template: `
+			<p>Simple Input connected to multi-value.</p>
+			<p> Press enter to add value:</p>
+			<lib-simple-input
+				v-model="inputValue"
+				@keydown="onKeydownEnter"
+			>
+			</lib-simple-input>
+			<p>Multi-value component: </p>
+			<div class="flex justify-start">
+				<lib-multi-values
+					ref="multiValueEl"
+					v-bind="args"
+					v-model:values="args.values"
+				/>
+			</div>
+		`,
+	}),
+}
+
+
+export const Disabled = {
+	...Primary,
+	args: {
+		disabled: true,
+	},
+}
+
+export const Readonly = {
+	...Primary,
+	args: {
+		readonly: true,
+	},
+}

package/src/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -0,0 +1,127 @@
+<template>
+<div
+	v-if="$values && $values?.length > 0"
+	:class="twMerge(`
+		values
+		group
+		flex
+		flex-initial
+		items-center
+		justify-center
+		gap-1
+		overflow-x-scroll
+		scrollbar-hidden
+	`,
+		($ as any)?.class)
+	"
+	:data-disabled="disabled"
+	:data-read-only="readonly"
+	:aria-label="`Values for ${label}`"
+	:tabindex="disabled ? -1 : 0"
+	v-bind="{...$, class:undefined}"
+>
+	<div
+		:data-border="border"
+		:class="twMerge(`
+				value_wrapper
+				flex-basis-0
+				min-w-2
+				flex
+				max-w-fit
+				flex-1
+				items-center
+				gap-0.5
+				overflow-hidden
+				px-1
+				text-xs
+				leading-none`,
+			!(disabled || readonly) && `
+				group-focus:text-accent-500
+				focus:text-accent-500`,
+			border && `
+				rounded-sm
+				border-neutral-400
+				border
+				focus:border-accent-400
+			`,
+			border && (disabled || readonly) && `
+				border-neutral-200
+				focus:border-neutral-200
+				dark:border-neutral-800
+				dark:focus:border-neutral-800
+			`,
+			($.itemAttrs as any)?.class
+		)"
+		:tabindex="canEdit ? 0 : undefined"
+		v-for="(value) of $values"
+		:key="value"
+		@keydown.ctrl.c.prevent="copy(value.toString())"
+	>
+		<span class="value_label truncate">{{ value }}</span>
+		<lib-button
+			class="!p-0 text-sm !leading-none"
+			:aria-label="`Remove ${value}`"
+			:border="false"
+			:disabled="disabled || readonly"
+			@click="removeVal(value)"
+		>
+			<icon><i-fa6-solid-xmark/></icon>
+		</lib-button>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts" generic="T extends string | number">
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { computed, type HTMLAttributes } from "vue"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { copy } from "../../helpers/copy.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type MultiValueProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-multi-values",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["item"] as const)
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	...baseInteractivePropsDefaults
+})
+
+
+const canEdit = computed(() => !props.disabled && !props.readonly)
+const $values = defineModel<T[]>("values", { default: () => []})
+
+const removeVal = (value: T) => {
+	if (!canEdit.value) return
+	removeIfIn($values.value, value)
+}
+</script>
+
+<script lang="ts">
+type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes>>
+
+type RealProps =
+	& LabelProps
+	& BaseInteractiveProps
+	& MultiValueProps
+	& {
+		border?: boolean
+	}
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	/** @vue-ignore */
+	WrapperTypes,
+	RealProps
+{}
+
+</script>
+