@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibFileInput/LibFileInput.vue

@@ -1,7 +1,7 @@
 <template>
 <!-- todo aria errors -->
 <div :class="twMerge(
-		`file-input
+  `file-input
 		justify-center
 		border-2
 		border-dashed
@@ -9,83 +9,92 @@
 		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}"
+  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.class
+)"
+	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
 >
 	<div :class="twMerge(
-		`relative justify-center`,
-		compact && `flex gap-2`,
-		!compact && `input-wrapper
+  `
+		file-input--wrapper
+		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`
-			)"
+			:class="twMerge(`
+				file-input--label
+				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")
-					)
+					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>
+			<span
+				v-if="compact && multiple"
+				class="file-input--label-count"
+			>
+				{{ ` (${files.length})` }}
+			</span>
 		</label>
-		<label v-if="!compact && formats?.length > 0" class="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="">
+			<div class="file-input--formats-list">
 				{{ extensions.join(", ") }}
 			</div>
 		</label>
 		<input
 			:id="id ?? fallbackId"
 			:class="twMerge(
-				`absolute inset-0
-				z-0
-				cursor-pointer
-				text-[0]
-				opacity-0
+  `
+					file-input--input
+					absolute
+					inset-0
+					z-0
+					cursor-pointer
+					text-[0]
+					opacity-0
 				`,
-				($.inputAttrs as any)?.class
-			)"
+  $.inputAttrs?.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"
+			v-bind="{ ...$.inputAttrs, class: void 0 }"
+			@input="inputFile"
+			@click="$event.target.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
+		:class="twMerge(
+  `file-input--previews
 			flex items-stretch justify-center gap-2 flex-wrap
 			`,
-			multiple && `
+  multiple && `
 				w-full
 			`,
-			($.previewsAttrs as any)?.class
-		)"
+  $.previewsAttrs?.class
+)"
 	>
-		<div class="flex-1"/>
-		<div class="preview
+		<div class="file-input--preview-spacer flex-1"/>
+		<div class="file-input--preview-wrapper
 				z-1
 				relative
 				flex
@@ -101,7 +110,7 @@
 			v-for="entry of files"
 			:key="entry.file.name"
 		>
-			<div class="flex flex-initial basis-full justify-start">
+			<div class="file-input--remove-button flex flex-initial basis-full justify-start">
 				<lib-button
 					:border="false"
 					:aria-label="`Remove file ${entry.file.name}`"
@@ -111,9 +120,9 @@
 				</lib-button>
 			</div>
 
-			<div class="flex flex-initial basis-full justify-center">
+			<div class="file-input--preview flex flex-initial basis-full justify-center">
 				<div v-if="entry.isImg"
-					class="image
+					class="file-input--preview-image
 					bg-transparency-squares flex
 					h-[80px]   flex-wrap items-center
 					justify-center
@@ -122,7 +131,7 @@
 					<img class="max-h-full w-auto" :src="getSrc(entry.file)">
 				</div>
 				<div v-if="!entry.isImg"
-					class="no-image
+					class="file-input--preview-no-image
 					flex h-[80px]
 					flex-1 basis-full flex-wrap items-center justify-center
 					"
@@ -130,144 +139,117 @@
 					<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 class="
+				file-input--preview-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)
 
+<script setup>
+import { computed, ref, shallowReactive, watch } from "vue";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import {} from "../../types/index.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
+import { getFallbackId } from "../shared/props.js";
+const t = useInjectedI18n();
+const el = ref(null);
+const files = shallowReactive([]);
+const errors = shallowReactive([]);
+const errorFlashing = ref(false);
 watch(files, () => {
-	emits("input", files.map(entry => entry.file))
-})
+  emits("input", files.map((entry) => entry.file));
+});
 watch(errors, () => {
-	if (errors.length > 0) {
-		errorFlashing.value = true
-		setTimeout(() => {
-			errorFlashing.value = false
-		}, 500)
-		emits("errors", 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)
-		}
-	}
-}
-
+  name: "lib-file-input",
+  inheritAttrs: false
+});
+const $ = useDivideAttrs(["wrapper", "input", "previews"]);
+const emits = defineEmits(["input", "errors"]);
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  formats: { type: Array, required: false, default: () => ["image/*", ".jpeg", ".jpg", ".png"] },
+  compact: { type: Boolean, required: false, default: false }
+});
+const mimeTypes = computed(() => props.formats?.filter((_) => !_.startsWith(".")) ?? []);
+const extensions = computed(() => props.formats?.filter((_) => _.startsWith(".")) ?? []);
+const getSrc = (file) => {
+  const src = URL.createObjectURL(file);
+  return src;
+};
+const removeFile = (entry) => {
+  const index = files.indexOf(entry);
+  files.splice(index, 1);
+};
+const extensionsList = computed(() => extensions.value.join(", "));
+const inputFile = async (e) => {
+  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) !== void 0;
+      const isValidExtension = extensions.value.find((_) => file.name.endsWith(_)) !== void 0;
+      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);
+        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>
+export default { name: "lib-file-input" };
 </script>

package/dist/runtime/components/LibFileInput/LibFileInput.vue.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
+import { type FileInputError } from "../../types/index.js.js";
+import { type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    input: (val: File[]) => any;
+    errors: (val: FileInputError[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onInput?: ((val: File[]) => any) | undefined;
+    onErrors?: ((val: FileInputError[]) => any) | undefined;
+}>, {
+    multiple: boolean;
+    formats: string[];
+    compact: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: (props: {}) => any;
+} & {
+    label?: (props: {}) => any;
+} & {
+    formats?: (props: {}) => any;
+}>;
+export default _default;
+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 {
+}
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};