@witchcraft/ui 0.0.1

package/dist/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/dist/runtime/components/LibInput/LibInput.stories.d.ts

@@ -0,0 +1,33 @@
+import type { StoryObj } from "@storybook/vue3";
+import LibInput from "./LibInput.vue.js";
+declare const meta: {
+    component: any;
+    title: string;
+    args: {
+        border: boolean;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof LibInput>;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const Readonly: Story;
+export declare const Invalid: Story;
+export declare const AttrsPassword: Story;
+export declare const AttrsDate: Story;
+export declare const AttrsNumber: Story;
+export declare const Borderless: any;
+export declare const WithAutosuggest: any;
+export declare const WithInstantAutosuggest: any;
+export declare const AutosuggestRestricted: any;
+export declare const AutosuggestSelectLikeShowAllUnrestricted: any;
+export declare const AutosuggestObjectOptions: any;
+export declare const Slots: Story;
+/** Press enter to add a value. */
+export declare const WithMultipleValues: Story;
+export declare const WithMultipleValuesWithSuggestions: any;
+export declare const WithMultipleValuesDisabled: any;
+export declare const WithMultipleValuesReadonly: any;
+export declare const InputSlotReplacement: Story;
+export declare const NextToButton: Story;

package/dist/runtime/components/LibInput/LibInput.stories.js

@@ -0,0 +1,339 @@
+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";
+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,
+  title: "Components/Input",
+  args: {
+    border: true,
+    label: "Some Label"
+  }
+};
+export default meta;
+const allComponents = {
+  ...components,
+  LibInput,
+  Icon,
+  IconFaChevronRight,
+  IconFaChevronLeft,
+  IconFaSolidKeyboard,
+  IconFaSolidTags
+};
+const playAutosuggestSelectLike = async (context) => {
+  await playBasicSelect(context);
+  await playBasicKeyboardSelect(context);
+  await playBasicClickSelect(context);
+};
+const setupModelValue = (args) => ({
+  modelValue: ref(args.modelValue ?? "")
+});
+const setupModelValues = (args) => ({
+  values: ref(args.values ?? void 0)
+});
+const Base = {
+  render: (args) => ({
+    components: allComponents,
+    setup: () => ({
+      ...setupModelValue(args),
+      ...setupModelValues(args),
+      args: {
+        ...args,
+        updateOnlyOnSubmit: args.suggestions !== void 0
+      }
+    }),
+    template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
+
+			<lib-input
+				v-bind="args"
+				v-model:values="values"
+				v-model="modelValue"
+				@submit="modelValue = $event"
+			>
+			</lib-input>
+		`
+  })
+};
+export const Primary = {
+  ...Base,
+  play: playBasicVModel
+};
+export const Disabled = {
+  ...Base,
+  args: {
+    disabled: true
+  }
+};
+export const Readonly = {
+  ...Base,
+  args: {
+    readonly: true
+  }
+};
+export const Invalid = {
+  ...Base,
+  args: {
+    valid: false
+  }
+};
+export const AttrsPassword = {
+  ...Base,
+  args: {
+    type: "password"
+  }
+};
+export const AttrsDate = {
+  ...Base,
+  args: {
+    type: "date"
+  }
+};
+export const AttrsNumber = {
+  ...Base,
+  args: {
+    type: "number"
+  }
+};
+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, items) => 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) => item.label
+  },
+  play: playAutosuggestSelectLike
+};
+export const Slots = {
+  render: (args) => ({
+    components: allComponents,
+    setup: () => ({
+      ...setupModelValue(args),
+      ...setupModelValues(args),
+      args: {
+        ...args,
+        updateOnlyOnSubmit: args.suggestions !== void 0
+      }
+    }),
+    template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
+
+
+			<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 = {
+  render: (args) => ({
+    components: allComponents,
+    setup: () => ({
+      ...setupModelValue(args),
+      ...setupModelValues(args),
+      args
+    }),
+    template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
+
+			<br/>
+			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>
+
+			<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"]
+  }
+};
+export const WithMultipleValues = {
+  ...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 = {
+  render: (args) => ({
+    components: allComponents,
+    directives: { vExtractRootEl },
+    setup: () => {
+      const recording = ref(false);
+      const recordingValue = ref("");
+      const modelValue = ref("K E Y S");
+      const values = ref(args.values ?? []);
+      const recorderEl = ref(null);
+      const recorder = createRecorderHandler(recordingValue, recording, modelValue, recorderEl);
+      watchEffect(createRecorderWatchEffect(recordingValue, recording, modelValue, values));
+      return {
+        recorder,
+        recording,
+        recordingValue,
+        recorderEl,
+        modelValue,
+        values,
+        args
+      };
+    },
+    template: `
+			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
+
+			<br/>
+			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>
+
+			<br/>
+			Recording: <span class="inline-block" data-testid="recording">{{recording}}</span>
+
+			<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 = {
+  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>
+		`
+  })
+};