@witchcraft/ui 0.0.1

package/src/runtime/components/LibFileInput/LibFileInput.vue

@@ -0,0 +1,273 @@
+<template>
+<!-- todo aria errors -->
+<div :class="twMerge(
+		`file-input
+		justify-center
+		border-2
+		border-dashed
+		border-accent-500/80
+		focus-outline-within
+		transition-[border-color,box-shadow]
+		ease-out`,
+		compact && `rounded-sm`,
+		!compact && `flex w-full flex-col items-center gap-2 rounded-xl  p-2 `,
+		errors.length > 0 && errorFlashing && `border-danger-400`,
+		( $.wrapperAttrs as any ).class
+	)"
+	v-bind="{...$.wrapperAttrs, class:undefined}"
+>
+	<div :class="twMerge(
+		`relative justify-center`,
+		compact && `flex gap-2`,
+		!compact && `input-wrapper
+		flex flex-col items-center
+		`
+	)"
+	>
+		<label
+			:for="id ?? fallbackId"
+			:class="twMerge(
+				`pointer-events-none flex gap-1 items-center whitespace-nowrap`
+			)"
+		>
+			<slot v-if="compact || multiple || files.length === 0" name="icon">
+				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
+			</slot>
+			<slot name="label">
+				{{
+					(compact
+						? multiple
+							? t("file-input.compact-choose-file-plural")
+							: t("file-input.compact-choose-file")
+						: multiple
+							? t("file-input.non-compact-choose-file-plural")
+							: t("file-input.non-compact-choose-file")
+					)
+				}}
+			</slot>
+			<span v-if="compact && multiple">{{ ` (${files.length})` }}</span>
+		</label>
+		<label v-if="!compact && formats?.length > 0" class="flex flex-col items-center text-sm">
+			<slot name="formats">{{ t("file-input.accepted-formats") }}: </slot>
+			<div class="">
+				{{ extensions.join(", ") }}
+			</div>
+		</label>
+		<input
+			:id="id ?? fallbackId"
+			:class="twMerge(
+				`absolute inset-0
+				z-0
+				cursor-pointer
+				text-[0]
+				opacity-0
+				`,
+				($.inputAttrs as any)?.class
+			)"
+			type="file"
+			:accept="formats.join(', ')"
+			:multiple="multiple"
+			ref="el"
+			v-bind="{...$.inputAttrs, class:undefined}"
+			@input="(inputFile as any)"
+			@click="($event.target! as any).value = null"
+		>
+		<!--  click event allows event to fire even if the user picks the same file -->
+	</div>
+	<div v-if="!compact && files.length > 0"
+		:class="twMerge(`previews
+			flex items-stretch justify-center gap-2 flex-wrap
+			`,
+			multiple && `
+				w-full
+			`,
+			($.previewsAttrs as any)?.class
+		)"
+	>
+		<div class="flex-1"/>
+		<div class="preview
+				z-1
+				relative
+				flex
+				min-w-0
+				max-w-[150px]
+				flex-initial
+				flex-wrap
+				items-center
+				gap-2 rounded-sm border border-neutral-400
+				shadow-xs
+				shadow-neutral-800/20
+			"
+			v-for="entry of files"
+			:key="entry.file.name"
+		>
+			<div class="flex flex-initial basis-full justify-start">
+				<lib-button
+					:border="false"
+					:aria-label="`Remove file ${entry.file.name}`"
+					@click="removeFile(entry)"
+				>
+					<icon><i-fa6-solid-xmark/></icon>
+				</lib-button>
+			</div>
+
+			<div class="flex flex-initial basis-full justify-center">
+				<div v-if="entry.isImg"
+					class="image
+					bg-transparency-squares flex
+					h-[80px]   flex-wrap items-center
+					justify-center
+				"
+				>
+					<img class="max-h-full w-auto" :src="getSrc(entry.file)">
+				</div>
+				<div v-if="!entry.isImg"
+					class="no-image
+					flex h-[80px]
+					flex-1 basis-full flex-wrap items-center justify-center
+					"
+				>
+					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
+				</div>
+			</div>
+			<div class="filename min-w-0 flex-1 basis-0 truncate break-all rounded-sm p-1 text-sm" :title="entry.file.name">{{ entry.file.name }}</div>
+		</div>
+
+		<div class="flex-1"/>
+	</div>
+</div>
+</template>
+<script setup lang="ts">
+import { computed, type HTMLAttributes, type InputHTMLAttributes,ref, shallowReactive, watch } from "vue"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import { type FileInputError } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import { getFallbackId,type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+
+const t = useInjectedI18n()
+const el = ref<null | HTMLInputElement>(null)
+type Entry = { file: File, isImg: boolean }
+
+const files = shallowReactive<(Entry)[]>([])
+const errors = shallowReactive<(FileInputError)[]>([])
+const errorFlashing = ref(false)
+
+watch(files, () => {
+	emits("input", files.map(entry => entry.file))
+})
+watch(errors, () => {
+	if (errors.length > 0) {
+		errorFlashing.value = true
+		setTimeout(() => {
+			errorFlashing.value = false
+		}, 500)
+		emits("errors", errors)
+	}
+})
+
+defineOptions({
+	name: "lib-file-input",
+	inheritAttrs: false,
+})
+const $ = useDivideAttrs(["wrapper", "input", "previews"] as const)
+ 
+const emits = defineEmits<{
+	(e: "input", val: File[]): void
+	(e: "errors", val: FileInputError[]): void
+}>()
+
+const fallbackId = getFallbackId()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	multiple: false,
+	formats: () => ["image/*", ".jpeg", ".jpg", ".png"],
+	compact: false,
+})
+
+const mimeTypes = computed(() => props.formats?.filter(_ => !_.startsWith(".")) ?? [])
+const extensions = computed(() => props.formats?.filter(_ => _.startsWith(".")) ?? [])
+
+const getSrc = (file: File) => {
+	const src = URL.createObjectURL(file)
+	return src
+}
+
+const removeFile = (entry: Entry) => {
+	const index = files.indexOf(entry)
+	files.splice(index, 1)
+}
+const extensionsList = computed(() => extensions.value.join(", "))
+const inputFile = async (e: InputEvent): Promise<void | boolean> => {
+	e.preventDefault()
+	if (el.value!.files) {
+		const errs = []
+		for (const file of el.value!.files) {
+			const isImg = file.type.startsWith("image")
+
+			const byPassValidation = props.formats.length === 0
+			const isValidMimeType = mimeTypes.value.find(_ => _.endsWith("/*") ? file.type.startsWith(_.slice(0, -2)) : _ === file.type) !== undefined
+			const isValidExtension = extensions.value.find(_ => file.name.endsWith(_)) !== undefined
+			if (!byPassValidation && (!isValidMimeType || !isValidExtension)) {
+				const extension = file.name.match(/.*(\..*)/)?.[1] ?? "Unknown"
+				const type = file.type === "" ? "" : ` (${file.type})`
+				const message = `File type ${extension}${type} is not allowed. Allowed file types are: ${extensionsList.value}.`
+				const err = new Error(message) as FileInputError
+				err.file = file
+				err.isValidExtension = isValidExtension
+				err.isValidMimeType = isValidMimeType
+				errs.push(err)
+				continue
+			}
+			if (errs.length > 0) continue
+			if (!files.find(_ => _.file === file)) {
+				if ((props.multiple || files.length < 1)
+				) {
+					files.push({ file, isImg })
+				} else {
+					files.splice(0, files.length, { file, isImg })
+				}
+			}
+		}
+		if (errs.length > 0) {
+			errors.splice(0, errors.length, ...errs)
+			return false
+		} else if (errors.length > 0) {
+			errors.splice(0, errors.length)
+		}
+	}
+}
+
+</script>
+<script lang="ts">
+export default { name: "lib-file-input" }
+
+type WrapperTypes =
+	& WrapperProps<"input", InputHTMLAttributes >
+	& WrapperProps<"wrapper", HTMLAttributes >
+	& WrapperProps<"previews",HTMLAttributes >
+
+type RealProps =
+& LinkableByIdProps
+& {
+	multiple?: boolean
+	/**
+	 * A list of extensions or mime types to add to the input's accept. Basic validations are done so that files match an extension and mimeType, but note that a file could still be lying, all files should be validated server side.
+	 *
+	 * Pass an empty array to allow any filetype.
+	 */
+	formats?: string[]
+	compact?: boolean
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<InputHTMLAttributes,"class" | "multiple" | "formats" | "compact"> & TailwindClassProp>,
+	/** @vue-ignore */
+	Partial<WrapperTypes>,
+	RealProps { }
+</script>

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

@@ -0,0 +1,367 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref, watchEffect } from "vue"
+
+import LibInput from "./LibInput.vue"
+
+import IconFaChevronLeft from "~icons/fa6-solid/chevron-left"
+import IconFaChevronRight from "~icons/fa6-solid/chevron-right"
+import IconFaSolidKeyboard from "~icons/fa6-solid/keyboard"
+import IconFaSolidTags from "~icons/fa6-solid/tags"
+
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
+import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js"
+import Icon from "../Icon/Icon.vue"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+import {
+	playBasicVModel,
+	playMultipleValues
+} from "../shared/storyHelpers/playInput.js"
+import {
+	playBasicClickSelect,
+	playBasicKeyboardSelect,
+	playBasicSelect,
+} from "../shared/storyHelpers/playSuggestions.js"
+
+const meta = {
+	component: LibInput as any,
+	title: "Components/Input",
+	args: {
+		border: true,
+		label: "Some Label",
+	},
+} satisfies Meta<typeof LibInput> & Meta<{ custom: string }>
+
+export default meta
+type Story = StoryObj<typeof LibInput> // & StoryObj<typeof extraArgs>
+const allComponents = {
+	...components,
+	LibInput,
+	Icon,
+	IconFaChevronRight,
+	IconFaChevronLeft,
+	IconFaSolidKeyboard,
+	IconFaSolidTags,
+}
+
+
+const playAutosuggestSelectLike = async (context: { canvasElement: HTMLElement, args: any }) => {
+	await playBasicSelect(context)
+	await playBasicKeyboardSelect(context)
+	await playBasicClickSelect(context)
+}
+
+const setupModelValue = (args: any) => ({
+	modelValue: ref(args.modelValue ?? ""),
+})
+
+const setupModelValues = (args: any) => ({
+	values: ref(args.values ?? undefined),
+})
+
+const Base: Story = {
+	render: args => ({
+		components: allComponents,
+		setup: () => ({
+			...setupModelValue(args),
+			...setupModelValues(args),
+			args: {
+				...args,
+				updateOnlyOnSubmit: args.suggestions !== undefined,
+			},
+		}),
+
+		template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
+			<lib-input
+				v-bind="args"
+				v-model:values="values"
+				v-model="modelValue"
+				@submit="modelValue = $event"
+			>
+			</lib-input>
+		`,
+	}),
+}
+
+export const Primary: Story = {
+	...Base,
+	play: playBasicVModel
+}
+
+export const Disabled: Story = {
+	...Base,
+	args: {
+		disabled: true,
+	},
+}
+export const Readonly: Story = {
+	...Base,
+	args: {
+		readonly: true,
+	},
+}
+export const Invalid: Story = {
+	...Base,
+	args: {
+		valid: false,
+	},
+}
+
+export const AttrsPassword: Story = {
+	...Base,
+	args: {
+		type: "password",
+	} as any,
+}
+export const AttrsDate: Story = {
+	...Base,
+	args: {
+		type: "date",
+	} as any,
+}
+export const AttrsNumber: Story = {
+	...Base,
+	args: {
+		type: "number",
+	} as any,
+}
+
+export const Borderless = {
+	...Base,
+	args: {
+		border: false,
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+	},
+}
+
+
+export const WithAutosuggest = {
+	...Base,
+	args: {
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+	},
+	play: playAutosuggestSelectLike
+}
+export const WithInstantAutosuggest = {
+	...Base,
+	args: {
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+	},
+}
+export const AutosuggestRestricted = {
+	...WithAutosuggest,
+	args: {
+		...WithAutosuggest.args,
+		restrictToSuggestions: true,
+	},
+	play: playAutosuggestSelectLike
+}
+export const AutosuggestSelectLikeShowAllUnrestricted = {
+	...WithAutosuggest,
+	args: {
+		...WithAutosuggest.args,
+		restrictToSuggestions: false,
+		suggestionsFilter: (_input: string, items: string[]) => items,
+	},
+	play: playAutosuggestSelectLike
+}
+export const AutosuggestObjectOptions = {
+	...WithAutosuggest,
+	args: {
+		...WithAutosuggest.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,
+	},
+	play: playAutosuggestSelectLike
+}
+
+export const Slots: Story = {
+	render: args => ({
+		components: allComponents,
+		setup: () => ({
+			...setupModelValue(args),
+			...setupModelValues(args),
+			args: {
+				...args,
+				updateOnlyOnSubmit: args.suggestions !== undefined,
+			},
+		})
+		,
+		template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
+
+			<lib-input
+				v-bind="args"
+				v-model="modelValue"
+				v-model:values="values"
+			>
+				<template #label>
+					Custom Label Slot
+				</template>
+				<template #left>
+					<lib-button  class="px-0" :border="false" :label="'none'">
+						<icon><icon-fa-chevron-left/></icon>
+					</lib-button>
+				</template>
+				<template #right>
+					<lib-button  class="px-0" :border="false"  :label="'none'">
+						<icon><icon-fa-chevron-right/></icon>
+					</lib-button>
+				</template>
+			</lib-input>
+		`,
+	}),
+}
+const MultipleValuesBase: Story = {
+	render: args => ({
+		components: allComponents,
+		setup: () => ({
+			...setupModelValue(args),
+			...setupModelValues(args),
+			args,
+		})
+		,
+
+		template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
+			<br/>
+			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>\n
+			<lib-input
+				v-bind="args"
+				v-model="modelValue"
+				v-model:values="values"
+			>
+				<template #left>
+					<lib-button class="px-0" :border="false">
+						<icon><icon-fa-solid-tags/></icon>
+					</lib-button>
+				</template>
+			</lib-input>
+		`,
+	}),
+	args: {
+		values: ["A", "B", "C"],
+	},
+	
+}
+/** Press enter to add a value. */
+export const WithMultipleValues: Story = {
+	...MultipleValuesBase,
+	play: playMultipleValues
+}
+
+export const WithMultipleValuesWithSuggestions = {
+	...MultipleValuesBase,
+	args: {
+		...MultipleValuesBase.args,
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+	},
+	play: playAutosuggestSelectLike
+}
+export const WithMultipleValuesDisabled = {
+	...MultipleValuesBase,
+	args: {
+		...MultipleValuesBase.args,
+		disabled: true,
+	},
+}
+export const WithMultipleValuesReadonly = {
+	...MultipleValuesBase,
+	args: {
+		...MultipleValuesBase.args,
+		readonly: true,
+	},
+}
+
+export const InputSlotReplacement: Story = {
+	render: args => ({
+		components: allComponents,
+		directives: { vExtractRootEl },
+		setup: () => {
+			const recording = ref(false)
+			const recordingValue = ref("")
+			const modelValue = ref("K E Y S")
+			const values = ref<string[]>((args.values as any) ?? [])
+			const recorderEl = ref(null)
+			const recorder = createRecorderHandler(recordingValue, recording, modelValue, recorderEl)
+			watchEffect(createRecorderWatchEffect(recordingValue, recording, modelValue, values as any))
+			return {
+				recorder,
+				recording,
+				recordingValue,
+				recorderEl,
+				modelValue,
+				values,
+				args,
+			}
+		}
+		,
+
+		template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
+			<br/>
+			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>\n
+			<br/>
+			Recording: <span class="inline-block" data-testid="recording">{{recording}}</span>\n
+			<lib-input
+				v-bind="args"
+				v-model="modelValue"
+				v-model:values="values"
+			>
+				<template #input >
+					<lib-recorder
+						class="p-0"
+						v-extract-root-el="_ => recorderEl = _"
+						:border="false"
+						:recordingValue="recordingValue"
+						:recorder="recorder"
+						v-model:recording="recording"
+						v-model="modelValue"
+						@recorder:click="recording = !recording"
+						@recorder:blur="recordingValue = modelValue; recording = false"
+					/>
+				</template>
+				<template #left>
+					<icon><icon-fa-solid-keyboard/></icon>
+				</template>
+			</lib-input>
+		`,
+	}),
+	args: {
+		values: ["A", "B", "C"],
+	},
+}
+
+
+export const NextToButton: Story = {
+	render: args => ({
+		components: allComponents,
+		setup: () => ({
+			...setupModelValue(args),
+			...setupModelValues(args),
+			args,
+		}),
+
+		template: `
+		<div class="flex gap-2 items-center">
+			<lib-input
+				v-bind="args"
+				v-model:values="values"
+				v-model="modelValue"
+:label="undefined"
+			>
+			</lib-input>
+			<lib-button>Button</lib-button>
+		</div>
+		`,
+	}),
+}
+