@witchcraft/ui 0.2.1-beta.2 → 0.2.1

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

@@ -1,6 +1,7 @@
 <template>
 <!-- todo aria errors -->
-<div :class="twMerge(`file-input
+<div
+	:class="twMerge(`file-input
 		justify-center
 		border-2
 		border-dashed
@@ -8,25 +9,26 @@
 		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
+		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}"
+	v-bind="{ ...$.wrapperAttrs, class: undefined }"
 >
-	<div :class="twMerge( `
+	<div
+		:class="twMerge(`
 		file-input--wrapper
 		relative justify-center`,
-		compact && `flex gap-2`,
-		!compact && `input-wrapper
+			compact && `flex gap-2`,
+			!compact && `input-wrapper
 		flex flex-col items-center
 		`
-	)"
+		)"
 	>
 		<label
 			:for="id ?? fallbackId"
-			:class="twMerge( `
+			:class="twMerge(`
 				file-input--label
 				pointer-events-none
 				flex
@@ -35,7 +37,10 @@
 				whitespace-nowrap
 			`)"
 		>
-			<slot v-if="compact || multiple || files.length === 0" name="icon">
+			<slot
+				v-if="compact || multiple || files.length === 0"
+				name="icon"
+			>
 				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
 			</slot>
 			<slot name="label">
@@ -57,7 +62,10 @@
 				{{ ` (${files.length})` }}
 			</span>
 		</label>
-		<label v-if="!compact && formats?.length > 0" class="file-input--formats-label flex flex-col items-center text-sm">
+		<label
+			v-if="!compact && formats?.length > 0"
+			class="file-input--formats-label flex flex-col items-center text-sm"
+		>
 			<slot name="formats">{{ t("file-input.accepted-formats") }}: </slot>
 			<div class="file-input--formats-list">
 				{{ extensions.join(", ") }}
@@ -80,13 +88,14 @@
 			:accept="formats.join(', ')"
 			:multiple="multiple"
 			ref="el"
-			v-bind="{...$.inputAttrs, class:undefined}"
+			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"
+	<div
+		v-if="!compact && files.length > 0"
 		:class="twMerge(`file-input--previews
 			flex items-stretch justify-center gap-2 flex-wrap
 			`,
@@ -97,7 +106,8 @@
 		)"
 	>
 		<div class="file-input--preview-spacer flex-1"/>
-		<div class="file-input--preview-wrapper
+		<div
+			class="file-input--preview-wrapper
 				z-1
 				relative
 				flex
@@ -124,16 +134,21 @@
 			</div>
 
 			<div class="file-input--preview flex flex-initial basis-full justify-center">
-				<div v-if="entry.isImg"
+				<div
+					v-if="entry.isImg"
 					class="file-input--preview-image
 					bg-transparency-squares flex
 					h-[80px]   flex-wrap items-center
 					justify-center
 				"
 				>
-					<img class="max-h-full w-auto" :src="getSrc(entry.file)">
+					<img
+						class="max-h-full w-auto"
+						:src="getSrc(entry.file)"
+					>
 				</div>
-				<div v-if="!entry.isImg"
+				<div
+					v-if="!entry.isImg"
 					class="file-input--preview-no-image
 					flex h-[80px]
 					flex-1 basis-full flex-wrap items-center justify-center
@@ -142,7 +157,8 @@
 					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
 				</div>
 			</div>
-			<div class="
+			<div
+				class="
 				file-input--preview-filename
 				min-w-0
 				flex-1
@@ -163,8 +179,9 @@
 	</div>
 </div>
 </template>
+
 <script setup lang="ts">
-import { computed, type HTMLAttributes, type InputHTMLAttributes,ref, shallowReactive, watch } from "vue"
+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"
@@ -172,11 +189,11 @@ import IFa6SolidXmark from "~icons/fa6-solid/xmark"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import { type FileInputError } from "../../types/index.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"
+import { getFallbackId, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 const t = useInjectedI18n()
 const el = ref<null | HTMLInputElement>(null)
@@ -200,11 +217,11 @@ watch(errors, () => {
 })
 
 defineOptions({
-	name: "lib-file-input",
-	inheritAttrs: false,
+	name: "LibFileInput",
+	inheritAttrs: false
 })
 const $ = useDivideAttrs(["wrapper", "input", "previews"] as const)
- 
+
 const emits = defineEmits<{
 	(e: "input", val: File[]): void
 	(e: "errors", val: FileInputError[]): void
@@ -214,7 +231,7 @@ const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
 	multiple: false,
 	formats: () => ["image/*", ".jpeg", ".jpg", ".png"],
-	compact: false,
+	compact: false
 })
 
 const mimeTypes = computed(() => props.formats?.filter(_ => !_.startsWith(".")) ?? [])
@@ -230,7 +247,7 @@ const removeFile = (entry: Entry) => {
 	files.splice(index, 1)
 }
 const extensionsList = computed(() => extensions.value.join(", "))
-const inputFile = async (e: InputEvent): Promise<void | boolean> => {
+const inputFile = async (e: InputEvent): Promise<undefined | boolean> => {
 	e.preventDefault()
 	if (el.value!.files) {
 		const errs = []
@@ -268,34 +285,35 @@ const inputFile = async (e: InputEvent): Promise<void | boolean> => {
 			errors.splice(0, errors.length)
 		}
 	}
+	return undefined
 }
-
 </script>
+
 <script lang="ts">
-export default { name: "lib-file-input" }
+export default { name: "LibFileInput" }
 
-type WrapperTypes =
-	& WrapperProps<"input", InputHTMLAttributes >
-	& WrapperProps<"wrapper", HTMLAttributes >
-	& WrapperProps<"previews",HTMLAttributes >
+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
-}
+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>,
+	Partial<Omit<InputHTMLAttributes, "class" | "multiple" | "formats" | "compact"> & TailwindClassProp>,
 	/** @vue-ignore */
 	Partial<WrapperTypes>,
 	RealProps { }

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

@@ -12,7 +12,6 @@ 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,
@@ -21,7 +20,7 @@ import {
 import {
 	playBasicClickSelect,
 	playBasicKeyboardSelect,
-	playBasicSelect,
+	playBasicSelect
 } from "../shared/storyHelpers/playSuggestions.js"
 
 const meta = {
@@ -31,9 +30,9 @@ const meta = {
 		border: true,
 		label: "Some Label",
 		...{
-			_template: undefined,
+			_template: undefined
 		} as any
-	},
+	}
 } satisfies Meta<typeof LibInputDeprecated> & Meta<{ custom: string }>
 
 export default meta
@@ -45,10 +44,9 @@ const allComponents = {
 	IconFaChevronRight,
 	IconFaChevronLeft,
 	IconFaSolidKeyboard,
-	IconFaSolidTags,
+	IconFaSolidTags
 }
 
-
 const playAutosuggestSelectLike = async (context: { canvasElement: HTMLElement, args: any }) => {
 	await playBasicSelect(context)
 	await playBasicKeyboardSelect(context)
@@ -57,24 +55,24 @@ const playAutosuggestSelectLike = async (context: { canvasElement: HTMLElement,
 
 const setupModelValue = (args: any) => ({
 	modelValue: ref(args.modelValue ?? ""),
-	inputValue: ref(args.inputValue ?? ""),
+	inputValue: ref(args.inputValue ?? "")
 })
 
 const setupModelValues = (args: any) => ({
-	values: ref(args.values ?? undefined),
+	values: ref(args.values ?? undefined)
 })
 
 const Base: Story = {
 	render: args => ({
 		components: allComponents,
 		setup: () => ({
-			
+
 			...setupModelValue(args),
 			...setupModelValues(args),
 			args: {
 				...args,
-				updateOnlyOnSubmit: args.suggestions !== undefined,
-			},
+				updateOnlyOnSubmit: args.suggestions !== undefined
+			}
 		}),
 
 		template: (args as any)._template ?? `
@@ -87,8 +85,8 @@ const Base: Story = {
 				@submit="modelValue = $event"
 			>
 			</lib-simple-input-deprecated>
-		`,
-	}),
+		`
+	})
 }
 
 export const Primary: Story = {
@@ -99,54 +97,53 @@ export const Primary: Story = {
 export const Disabled: Story = {
 	...Base,
 	args: {
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 export const Readonly: Story = {
 	...Base,
 	args: {
-		readonly: true,
-	},
+		readonly: true
+	}
 }
 export const Invalid: Story = {
 	...Base,
 	args: {
-		valid: false,
-	},
+		valid: false
+	}
 }
 
 export const AttrsPassword: Story = {
 	...Base,
 	args: {
-		type: "password",
-	} as any,
+		type: "password"
+	} as any
 }
 export const AttrsDate: Story = {
 	...Base,
 	args: {
-		type: "date",
-	} as any,
+		type: "date"
+	} as any
 }
 export const AttrsNumber: Story = {
 	...Base,
 	args: {
-		type: "number",
-	} as any,
+		type: "number"
+	} as any
 }
 
 export const Borderless = {
 	...Base,
 	args: {
 		border: false,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-	},
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+	}
 }
 
-
 export const WithAutosuggest = {
 	...Base,
 	args: {
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
 	},
 	play: playAutosuggestSelectLike
 }
@@ -155,21 +152,21 @@ export const WithAutosuggestNoLabel = {
 	...Base,
 	args: {
 		label: undefined,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
 	},
 	play: playAutosuggestSelectLike
 }
 export const WithInstantAutosuggest = {
 	...Base,
 	args: {
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-	},
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+	}
 }
 export const AutosuggestRestricted = {
 	...WithAutosuggest,
 	args: {
 		...WithAutosuggest.args,
-		restrictToSuggestions: true,
+		restrictToSuggestions: true
 	},
 	play: playAutosuggestSelectLike
 }
@@ -192,14 +189,14 @@ export const AutosuggestRestrictedWithClearOnClick = {
 				</lib-simple-input-deprecated>
 			`
 	},
-	play: null,
+	play: null
 }
 export const AutosuggestSelectLikeShowAllUnrestricted = {
 	...WithAutosuggest,
 	args: {
 		...WithAutosuggest.args,
 		restrictToSuggestions: false,
-		suggestionsFilter: (_input: string, items: string[]) => items,
+		suggestionsFilter: (_input: string, items: string[]) => items
 	},
 	play: playAutosuggestSelectLike
 }
@@ -212,9 +209,9 @@ export const AutosuggestObjectOptions = {
 			{ label: "A", other: "some data A" },
 			{ label: "AB", other: "some data AB" },
 			{ label: "ABC", other: "some data ABC" },
-			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" },
+			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
 		],
-		suggestionLabel: (item: any) => item.label,
+		suggestionLabel: (item: any) => item.label
 	},
 	play: playAutosuggestSelectLike
 }
@@ -227,10 +224,9 @@ export const Slots: Story = {
 			...setupModelValues(args),
 			args: {
 				...args,
-				updateOnlyOnSubmit: args.suggestions !== undefined,
-			},
-		})
-		,
+				updateOnlyOnSubmit: args.suggestions !== undefined
+			}
+		}),
 		template: `
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
 
@@ -253,8 +249,8 @@ export const Slots: Story = {
 					</lib-button>
 				</template>
 			</lib-simple-input-deprecated>
-		`,
-	}),
+		`
+	})
 }
 const MultipleValuesBase: Story = {
 	render: args => ({
@@ -262,9 +258,8 @@ const MultipleValuesBase: Story = {
 		setup: () => ({
 			...setupModelValue(args),
 			...setupModelValues(args),
-			args,
-		})
-		,
+			args
+		}),
 
 		template: `
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
@@ -281,12 +276,12 @@ const MultipleValuesBase: Story = {
 					</lib-button>
 				</template>
 			</lib-simple-input-deprecated>
-		`,
+		`
 	}),
 	args: {
-		values: ["A", "B", "C"],
-	},
-	
+		values: ["A", "B", "C"]
+	}
+
 }
 /** Press enter to add a value. */
 export const WithMultipleValues: Story = {
@@ -298,7 +293,7 @@ export const WithMultipleValuesWithSuggestions = {
 	...MultipleValuesBase,
 	args: {
 		...MultipleValuesBase.args,
-		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
 	},
 	play: playAutosuggestSelectLike
 }
@@ -307,7 +302,7 @@ export const WithMultipleValuesWithSuggestionsNoSelected = {
 	args: {
 		...MultipleValuesBase.args,
 		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-		showSelectedValues: false,
+		showSelectedValues: false
 	},
 	play: playAutosuggestSelectLike
 }
@@ -315,15 +310,15 @@ export const WithMultipleValuesDisabled = {
 	...MultipleValuesBase,
 	args: {
 		...MultipleValuesBase.args,
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 export const WithMultipleValuesReadonly = {
 	...MultipleValuesBase,
 	args: {
 		...MultipleValuesBase.args,
-		readonly: true,
-	},
+		readonly: true
+	}
 }
 
 export const InputSlotReplacement: Story = {
@@ -345,10 +340,9 @@ export const InputSlotReplacement: Story = {
 				recorderEl,
 				modelValue,
 				values,
-				args,
+				args
 			}
-		}
-		,
+		},
 
 		template: `
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
@@ -378,21 +372,20 @@ export const InputSlotReplacement: Story = {
 					<icon><icon-fa-solid-keyboard/></icon>
 				</template>
 			</lib-simple-input-deprecated>
-		`,
+		`
 	}),
 	args: {
-		values: ["A", "B", "C"],
-	},
+		values: ["A", "B", "C"]
+	}
 }
 
-
 export const NextToButton: Story = {
 	render: args => ({
 		components: allComponents,
 		setup: () => ({
 			...setupModelValue(args),
 			...setupModelValues(args),
-			args,
+			args
 		}),
 
 		template: `
@@ -406,7 +399,6 @@ export const NextToButton: Story = {
 			</lib-simple-input-deprecated>
 			<lib-button>Button</lib-button>
 		</div>
-		`,
-	}),
+		`
+	})
 }
-