@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -1,7 +1,6 @@
 <template>
 <!-- todo aria errors -->
-<div :class="twMerge(
-  `file-input
+<div :class="twMerge(`file-input
 		justify-center
 		border-2
 		border-dashed
@@ -9,26 +8,25 @@
 		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.class
-)"
-	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
+	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(
-  `
+	<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
@@ -42,7 +40,14 @@
 			</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
@@ -60,8 +65,7 @@
 		</label>
 		<input
 			:id="id ?? fallbackId"
-			:class="twMerge(
-  `
+			:class="twMerge(`
 					file-input--input
 					absolute
 					inset-0
@@ -70,28 +74,27 @@
 					text-[0]
 					opacity-0
 				`,
-  $.inputAttrs?.class
-)"
+				($.inputAttrs as any)?.class
+			)"
 			type="file"
 			:accept="formats.join(', ')"
 			:multiple="multiple"
 			ref="el"
-			v-bind="{ ...$.inputAttrs, class: void 0 }"
-			@input="inputFile"
-			@click="$event.target.value = null"
+			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(
-  `file-input--previews
+		:class="twMerge(`file-input--previews
 			flex items-stretch justify-center gap-2 flex-wrap
 			`,
-  multiple && `
+			multiple && `
 				w-full
 			`,
-  $.previewsAttrs?.class
-)"
+			($.previewsAttrs as any)?.class
+		)"
 	>
 		<div class="file-input--preview-spacer flex-1"/>
 		<div class="file-input--preview-wrapper
@@ -160,96 +163,136 @@
 	</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"]);
-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);
-    }
-  }
-};
+	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)
+		}
+	}
+}
+
 </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
+}
 
-<script>
-export default { name: "lib-file-input" };
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<InputHTMLAttributes,"class" | "multiple" | "formats" | "compact"> & TailwindClassProp>,
+	/** @vue-ignore */
+	Partial<WrapperTypes>,
+	RealProps { }
 </script>

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.stories.d.ts

@@ -0,0 +1,33 @@
+import type { StoryObj } from "@storybook/vue3";
+import LibInputDeprecated from "./LibInputDeprecated.vue.js";
+declare const meta: {
+    component: any;
+    title: string;
+    args: any;
+};
+export default meta;
+type Story = StoryObj<typeof LibInputDeprecated>;
+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 WithAutosuggestNoLabel: any;
+export declare const WithInstantAutosuggest: any;
+export declare const AutosuggestRestricted: any;
+export declare const AutosuggestRestrictedWithClearOnClick: 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 WithMultipleValuesWithSuggestionsNoSelected: any;
+export declare const WithMultipleValuesDisabled: any;
+export declare const WithMultipleValuesReadonly: any;
+export declare const InputSlotReplacement: Story;
+export declare const NextToButton: Story;