@witchcraft/ui 0.1.3 → 0.2.1-beta.1

package/dist/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
-	)"
-	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( `
+	<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
@@ -40,14 +42,7 @@
 			</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
@@ -65,7 +60,8 @@
 		</label>
 		<input
 			:id="id ?? fallbackId"
-			:class="twMerge(`
+			:class="twMerge(
+  `
 					file-input--input
 					absolute
 					inset-0
@@ -74,27 +70,28 @@
 					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(`file-input--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="file-input--preview-spacer flex-1"/>
 		<div class="file-input--preview-wrapper
@@ -163,136 +160,99 @@
 	</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 IFa6RegularFile from "~icons/fa6-regular/file";
+import IFa6SolidArrowUpFromBracket from "~icons/fa6-solid/arrow-up-from-bracket";
+import IFa6SolidXmark from "~icons/fa6-solid/xmark";
+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()
-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;
+    };
+};