@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/src/runtime/components/{LibFileInput/LibFileInput.vue → WFileInput/WFileInput.vue}

@@ -1,5 +1,4 @@
 <template>
-<!-- todo aria errors -->
 <div
 	:class="twMerge(`
 		file-input
@@ -23,11 +22,11 @@
 			rounded-xl
 			p-2
 		`,
-		errors.length > 0 && errorFlashing && `border-danger-400`,
 		isHovered && `bg-accent-500/10`,
-		($.wrapperAttrs as any).class
+		errors.length > 0 && isErrored && `errored border-red-400 hover:border-red-500`,
+		wrapperAttrs?.class
 	)"
-	v-bind="{ ...$.wrapperAttrs, class: undefined }"
+	v-bind="{ ...wrapperAttrs, class: undefined }"
 	@drop="onDrop"
 	@dragover.prevent="isHovered = true"
 	@dragleave="isHovered = false"
@@ -49,7 +48,7 @@
 		)"
 	>
 		<label
-			:for="id ?? fallbackId"
+			:for="finalId"
 			:class="twMerge(`
 				file-input--label
 				pointer-events-none
@@ -65,7 +64,7 @@
 				v-if="compact || multiple || files.length === 0"
 				name="icon"
 			>
-				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
+				<WIcon><i-lucide-upload/></WIcon>
 			</slot>
 			<slot name="label">
 				<div class="text-ellipsis overflow-hidden shrink-1 hidden @min-[15ch]:block">
@@ -110,7 +109,7 @@
 			</div>
 		</label>
 		<input
-			:id="id ?? fallbackId"
+			:id="finalId"
 			:class="twMerge(`
 				file-input--input
 				absolute
@@ -120,13 +119,15 @@
 				text-[0]
 				opacity-0
 			`,
-				($.inputAttrs as any)?.class
+				inputAttrs?.class
 			)"
 			type="file"
 			:accept="formats.join(', ')"
 			:multiple="multiple"
+			v-bind="{ ...inputAttrs, class: undefined }"
+			:aria-invalid="errors.length > 0"
+			:aria-errormessage="errors.map(_ => _.message).join(', ')"
 			ref="el"
-			v-bind="{ ...$.inputAttrs, class: undefined }"
 			@input="(inputFile as any)"
 			@click="($event.target! as any).value = null"
 		>
@@ -139,8 +140,7 @@
 			`,
 			multiple && `
 				w-full
-			`,
-			($.previewsAttrs as any)?.class
+			`
 		)"
 	>
 		<div
@@ -170,14 +170,14 @@
 			:key="entry.file.name"
 		>
 			<div class="flex flex-initial basis-full justify-start items-center max-w-full gap-2 px-1">
-				<lib-button
+				<WButton
 					:border="false"
 					class="file-input--remove-button rounded-full p-0"
 					:aria-label="`Remove file ${entry.file.name}`"
 					@click="removeFile(entry)"
 				>
-					<icon><i-fa6-solid-xmark/></icon>
-				</lib-button>
+					<WIcon><i-lucide-x/></WIcon>
+				</Wbutton>
 				<div
 					class="file-input--preview-filename min-w-0 flex-1 basis-0 truncate break-all rounded-sm text-sm"
 					:title="entry.file.name"
@@ -197,7 +197,7 @@
 				>
 					<img
 						class="max-h-full w-auto"
-						:src="getSrc(entry.file)"
+						:src="entry.previewUrl"
 					>
 				</div>
 				<div
@@ -207,41 +207,82 @@
 					flex-1 basis-full flex-wrap items-center justify-center
 					"
 				>
-					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
+					<WIcon><i-lucide-file class="text-4xl opacity-50"/></WIcon>
 				</div>
 			</div>
 		</div>
 	</div>
+	<div
+		v-if="!compact && errors.length > 0"
+		class="file-input--errors flex flex-col gap-2 text-sm text-red-600 dark:text-red-400 items-center px-2"
+	>
+		<div
+			class="file-input--error text-center"
+			v-for="error of errors"
+			:key="error.message"
+		>
+			{{ error.message }}
+		</div>
+	</div>
 </div>
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes, type InputHTMLAttributes, ref, shallowReactive, watch } from "vue"
-
-import IFa6RegularFile from "~icons/fa6-regular/file"
-import IFa6SolidArrowUpFromBracket from "~icons/fa6-solid/arrow-up-from-bracket"
-import IFa6SolidXmark from "~icons/fa6-solid/xmark"
+import type { HTMLAttributes, InputHTMLAttributes } from "vue"
+import { computed, onBeforeUnmount, ref, shallowReactive, watch } from "vue"
 
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useFallbackId } from "../../composables/useFallbackId.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import type { FileInputError } from "../../types/index.js"
+import type { FileInputError, TailwindClassProp } 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"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 const t = useInjectedI18n()
 const el = ref<null | HTMLInputElement>(null)
-type Entry = { file: File, isImg: boolean }
+
+
+const props = withDefaults(defineProps<
+	& {
+		id?: string
+		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
+		inputAttrs?: Omit<InputHTMLAttributes, "class"> & TailwindClassProp
+		wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+>(), {
+	multiple: false,
+	formats: () => ["image/*", ".jpeg", ".jpg", ".png"],
+	compact: false
+})
+const finalId = useFallbackId(props)
+
+const emits = defineEmits<{
+	(e: "input", val: File[], clearFiles: () => void): void
+	(e: "errors", val: FileInputError[], clearErrors: () => void): void
+}>()
+
+type Entry = { file: File } & ({ isImg: true, previewUrl: string } | { isImg: false, previewUrl: undefined })
 
 const files = shallowReactive<(Entry)[]>([])
 const errors = shallowReactive<(FileInputError)[]>([])
-const errorFlashing = ref(false)
+const isErrored = ref(false)
 const isHovered = ref(false)
 
-
 function clearFiles() {
-	el.value!.value = ""
+	if (el.value) {
+		// not sure why sometimes el.value is undefined but it can be
+		el.value.value = ""
+	}
+	for (const entry of files) {
+		if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl)
+	}
 	files.splice(0, files.length)
 }
 
@@ -250,45 +291,37 @@ watch(files, () => {
 })
 watch(errors, () => {
 	if (errors.length > 0) {
-		errorFlashing.value = true
-		setTimeout(() => {
-			errorFlashing.value = false
-		}, 500)
-		emits("errors", [...errors])
-		errors.splice(0, errors.length)
+		isErrored.value = true
+		emits("errors", [...errors], clearErrors)
 	}
 })
 
+function clearErrors() {
+	isErrored.value = false
+	errors.splice(0, errors.length)
+}
+
 defineOptions({
-	name: "LibFileInput",
+	name: "WFileInput",
 	inheritAttrs: false
 })
-const $ = useDivideAttrs(["wrapper", "input", "previews"] as const)
-
-const emits = defineEmits<{
-	(e: "input", val: File[], clearFiles: () => void): void
-	(e: "errors", val: FileInputError[]): void
-}>()
-
-const fallbackId = getFallbackId()
-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) => {
+onBeforeUnmount(() => {
+	for (const entry of files) {
+		if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl)
+	}
+})
+
+function removeFile(entry: Entry) {
+	if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl)
 	const index = files.indexOf(entry)
-	files.splice(index, 1)
+	if (index > -1) files.splice(index, 1)
 }
+
 const extensionsList = computed(() => extensions.value.join(", "))
 
 function onDrop(e: DragEvent) {
@@ -327,13 +360,14 @@ function updateFiles(filesList: FileList): boolean | undefined {
 			errs.push(err)
 			continue
 		}
+		const previewUrl = isImg ? URL.createObjectURL(file) : undefined
 		if (errs.length > 0) continue
 		if (!files.find(_ => _.file === file)) {
 			if ((props.multiple || files.length < 1)
 			) {
-				files.push({ file, isImg })
+				files.push({ file, isImg, previewUrl: previewUrl as any })
 			} else {
-				files.splice(0, files.length, { file, isImg })
+				files.splice(0, files.length, { file, isImg, previewUrl: previewUrl as any })
 			}
 		}
 	}
@@ -341,51 +375,14 @@ function updateFiles(filesList: FileList): boolean | undefined {
 		errors.splice(0, errors.length, ...errs)
 		return false
 	} else if (errors.length > 0) {
-		errors.splice(0, errors.length)
+		clearErrors()
 	}
 	return undefined
 }
 
 defineExpose({
-	clearFiles
+	clearFiles,
+	clearErrors
 })
 </script>
 
-<script lang="ts">
-export default { name: "LibFileInput" }
-
-type WrapperTypes
-	= & WrapperProps<
-		"input",
-		// https://github.com/vuejs/core/pull/14237
-		Omit<InputHTMLAttributes, "autocomplete">
-	>
-	& 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"
-		// https://github.com/vuejs/core/pull/14237
-		| "autocomplete"
-	> & TailwindClassProp>,
-	/** @vue-ignore */
-	Partial<WrapperTypes>,
-	RealProps { }
-</script>

package/src/runtime/components/{Icon/Icon.vue → WIcon/WIcon.vue}

@@ -19,7 +19,9 @@ defineOptions({
 
 const $attrs = useAttrs() as any
 
-/* const props =  */defineProps<Props>()
+defineProps<
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+>()
 </script>
 
 <script lang="ts">
@@ -27,13 +29,8 @@ const $attrs = useAttrs() as any
  * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
  *
  * ```vue
- * 		<icon><i-...></icon>
+ * 		<WIcon><i-...></WIcon>
  * ``
  */
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class">
-	> { }
+export default { name: "Icon" }
 </script>

package/src/runtime/components/{LibMultiValues/LibMultiValues.stories.ts → WMultiValues/WMultiValues.stories.ts}

@@ -2,22 +2,22 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 
-import LibMultiValues from "./LibMultiValues.vue"
+import WMultiValues from "./WMultiValues.vue"
 
 import * as components from "../index.js"
 
 const meta = {
-	component: LibMultiValues as any,
+	component: WMultiValues as any,
 	title: "Components/MultiValues",
 	args: {
 		modelValue: ["A", "B", "C"],
 		border: true
 	},
 	tags: ["!test"]
-} satisfies Meta<typeof LibMultiValues> & Meta<{ custom: string }>
+} satisfies Meta<typeof WMultiValues>
 
 export default meta
-type Story = StoryObj<typeof LibMultiValues> // & StoryObj<typeof extraArgs>
+type Story = StoryObj<typeof WMultiValues>
 
 /**
  * The multi-value component is just the values part beneath the input.
@@ -28,10 +28,10 @@ type Story = StoryObj<typeof LibMultiValues> // & StoryObj<typeof extraArgs>
  */
 export const Primary: Story = {
 	render: args => ({
-		components: { ...components, LibMultiValues },
+		components: { ...components, WMultiValues },
 		setup: () => {
 			const inputValue = ref("B")
-			const multiValueEl = ref<typeof LibMultiValues | null>(null)
+			const multiValueEl = ref<typeof WMultiValues | null>(null)
 			const onKeydownEnter = (e: KeyboardEvent): void => {
 				if (e.key === "Enter") (args.modelValue!).push(inputValue.value)
 			}
@@ -47,14 +47,14 @@ export const Primary: Story = {
 			<p>Simple Input connected to multi-value.</p>
 			<p>Note: You will be able to add values, including duplicates, even to the disabled/readonly version in this test, see the Input component for a properly connected approach.</p>
 			<p> Press enter to add value :</p>
-			<lib-simple-input
+			<WSimpleInput
 				v-model="inputValue"
 				@keydown="onKeydownEnter"
 			>
-			</lib-simple-input>
+			</WSimpleInput>
 			<p>Multi-value component: </p>
 			<div class="flex justify-start">
-				<lib-multi-values
+				<WMultiValues
 					ref="multiValueEl"
 					v-bind="args"
 					v-model="args.modelValue"

package/src/runtime/components/WMultiValues/WMultiValues.vue

@@ -0,0 +1,161 @@
+<template>
+<div
+	v-if="$modelValue && $modelValue?.length > 0"
+	role="list"
+	:class="twMerge(`
+		multivalues
+		group
+		flex
+		flex-initial
+		items-center
+		justify-center
+		gap-1
+		overflow-x-scroll
+		scrollbar-hidden
+	`,
+		($attrs as any)?.class)
+	"
+	:data-disabled="disabled"
+	:data-read-only="readonly"
+	:aria-label="label ? `Values for ${label}` : undefined"
+	v-bind="{ ...$attrs, class: undefined }"
+	@keydown="handleKeydown"
+>
+	<div
+		role="listitem"
+		:data-border="border"
+		:class="twMerge(`
+				multivalues--item
+				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
+				focus-outline
+				outlined:outline-offset-0
+			`,
+			!(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?.class
+		)"
+		:tabindex="canEdit ? (activeIndex === index ? 0 : -1) : undefined"
+		v-for="(value, index) of $modelValue"
+		:key="value"
+		ref="itemRefs"
+		@keydown.ctrl.c.prevent="copy(value.toString())"
+		@focus="activeIndex = index"
+	>
+		<span class="multivalues--label truncate">{{ value }}</span>
+		<WButton
+			class="multivalues--remove-button !p-0 text-sm !leading-none"
+			:aria-label="`Remove ${value}`"
+			:border="false"
+			:disabled="disabled || readonly"
+			tabindex="-1"
+			@click="removeVal(value)"
+		>
+			<WIcon><i-lucide-x/></WIcon>
+		</Wbutton>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts" generic="T extends string | number">
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
+import { computed, type HTMLAttributes, nextTick, ref, useAttrs } from "vue"
+
+import { copy } from "../../helpers/copy.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
+
+defineOptions({
+	name: "WMultiValues",
+	inheritAttrs: false
+})
+
+const $attrs = useAttrs()
+const props = withDefaults(defineProps<
+	& BaseInteractiveProps
+	& {
+		label?: string
+		border?: boolean
+		itemAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
+	border: true
+})
+
+const canEdit = computed(() => !props.disabled && !props.readonly)
+const $modelValue = defineModel<T[]>({ default: () => [] })
+const itemRefs = ref<HTMLElement[]>([])
+const activeIndex = ref(0)
+
+
+function removeVal(value: T) {
+	if (!canEdit.value) return
+	removeIfIn($modelValue.value, value)
+
+	if ($modelValue.value.length > 0) {
+		if (activeIndex.value >= $modelValue.value.length) {
+			activeIndex.value = $modelValue.value.length - 1
+		}
+		nextTick(() => {
+			itemRefs.value[activeIndex.value]?.focus()
+		})
+	}
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (props.disabled) return
+
+	const len = $modelValue.value.length
+	if (len === 0) return
+
+	if (e.key === "ArrowRight") {
+		activeIndex.value = (activeIndex.value + 1) % len
+		itemRefs.value[activeIndex.value]?.focus()
+		e.preventDefault()
+	} else if (e.key === "ArrowLeft") {
+		activeIndex.value = (activeIndex.value - 1 + len) % len
+		itemRefs.value[activeIndex.value]?.focus()
+		e.preventDefault()
+	} else if (e.key === "Delete" || e.key === "Backspace") {
+		if (canEdit.value) {
+			removeVal($modelValue.value[activeIndex.value]!)
+			e.preventDefault()
+		}
+	} else if (e.key === "Home") {
+		activeIndex.value = 0
+		itemRefs.value[activeIndex.value]?.focus()
+		e.preventDefault()
+	} else if (e.key === "End") {
+		activeIndex.value = len - 1
+		itemRefs.value[activeIndex.value]?.focus()
+		e.preventDefault()
+	}
+}
+</script>
+

package/src/runtime/components/{LibNotifications/LibNotification.stories.ts → WNotifications/WNotification.stories.ts}

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-import LibNotification from "./LibNotification.vue"
-import LibNotificationTestMessageComponent from "./LibNotificationTestMessageComponent.vue"
+import WNotification from "./WNotification.vue"
+import WNotificationTestMessageComponent from "./WNotificationTestMessageComponent.vue"
 
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import * as components from "../index.js"
 
 const handler = new NotificationHandler()
 
-const meta: Meta<typeof LibNotification> = {
-	component: LibNotification,
+const meta: Meta<typeof WNotification> = {
+	component: WNotification,
 	title: "Components/Notification",
 	args: {
 
@@ -18,21 +18,21 @@ const meta: Meta<typeof LibNotification> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibNotification>
+type Story = StoryObj<typeof WNotification>
 
 export const Primary: Story = {
 	render: args => ({
 		components: {
 			...components,
-			LibNotification,
-			LibNotificationTestMessageComponent
+			WNotification,
+			WNotificationTestMessageComponent
 		},
 		setup() {
 			return { args }
 		},
 		backgrounds: { disable: true },
 		template: `
-			<lib-notification v-bind="args"/>
+			<WNotification v-bind="args"/>
 		`
 	}),
 	args: {
@@ -150,7 +150,7 @@ export const CustomMessageComponent: Story = {
 		// @ts-expect-error calling protected method
 		notification: handler._createEntry({
 			...Primary.args!.notification,
-			component: LibNotificationTestMessageComponent,
+			component: WNotificationTestMessageComponent,
 			componentProps: {
 				customProp: "Custom Prop"
 			}