@witchcraft/ui 0.4.0 → 0.4.1

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

@@ -1,42 +0,0 @@
-import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js";
-type WrapperTypes = Partial<WrapperProps<"label", HTMLAttributes, {
-    /** Tailwind classes. */
-    class?: string;
-}>>;
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
-    unstyle?: boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit"> & TailwindClassProp>, 
-/** @vue-ignore */
-WrapperTypes, RealProps {
-}
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
-    modelValue?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-} & {
-    submit: (val: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<Props & {
-    modelValue?: boolean;
-}> & Readonly<{
-    onSubmit?: ((val: boolean) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    left?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibColorInput/LibColorInput.vue

@@ -1,162 +0,0 @@
-<template>
-<lib-popup
-	class="color-input--popup"
-	v-model="showPopup"
-	@close="$tempValue = void 0;
-  emit('cancel')"
->
-	<template #button="{ extractEl }">
-		<!-- <div -->
-		<!-- 		class=" -->
-		<!-- 	flex -->
-		<!-- 				w-full -->
-		<!-- 	border -->
-		<!-- 				 " -->
-		<!-- 	v-extract-root-el="extractEl" -->
-		<!-- > -->
-
-		<!--  -->
-		<lib-button
-			:id="id ?? fallbackId"
-			:class="twMerge(
-  `
-				p-0
-				color-input--button
-				flex flex-nowrap
-				min-w-4
-				overflow-hidden
-				[&_.button--label]:items-stretch
-				[&_.button--label]:gap-0
-				after:hidden
-			`,
-  $attrs.class
-)"
-			:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
-			:title="t('color-input.aria-and-title-prefix') + stringColor"
-			v-bind="{ ...$attrs, class: void 0 }"
-			v-extract-root-el="extractEl"
-			@click="togglePopup"
-		>
-			<template #label>
-				<div
-					class="
-					color-input--swatch-wrapper
-					flex
-					w-full
-				"
-				>
-					<slot v-bind="{ stringColor, classes: swatchClasses }">
-						<div
-							:class="swatchClasses"
-							:style="`background:${stringColor}`"
-						/>
-					</slot>
-					<slot
-						v-if="$tempValue"
-						v-bind="{ tempStringColor, classes: swatchClasses }"
-						name="temp"
-					>
-						<div
-							:class="swatchClasses"
-							:style="`background:${tempStringColor}`"
-						/>
-					</slot>
-				</div>
-			</template>
-		</lib-button>
-	</template>
-	<template #popup="{ extractEl }">
-		<div
-			class="color-input--popup-wrapper p-5"
-			v-extract-root-el="extractEl"
-		>
-			<lib-color-picker
-				v-if="showPopup"
-				:id="id ?? fallbackId"
-				:allow-alpha="allowAlpha"
-				:custom-representation="customRepresentation"
-				:string-precision="stringPrecision"
-				v-model="internalTempValue"
-				v-model:temp-value="$tempValue"
-				@save="save"
-				@cancel="cancel"
-			/>
-		</div>
-	</template>
-</lib-popup>
-</template>
-
-<script setup>
-import Color from "colorjs.io";
-import { computed, ref, useAttrs } from "vue";
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js";
-import { twMerge } from "../../utils/twMerge.js";
-import LibButton from "../LibButton/LibButton.vue";
-import LibColorPicker from "../LibColorPicker/LibColorPicker.vue";
-import LibPopup from "../LibPopup/LibPopup.vue";
-import { getFallbackId } from "../shared/props.js";
-defineOptions({
-  name: "LibColorInput"
-});
-const swatchClasses = `
-	color-input--swatch
-	after:content-vertical-holder
-	min-w-4
-	flex-1
-	relative
-	before:content-['']
-	before:absolute
-	before:inset-0
-	before:bg-transparency-squares
-	before:z-[-1]
-`;
-const fallbackId = getFallbackId();
-const t = useInjectedI18n();
-defineProps({
-  label: { type: String, required: false },
-  id: { type: String, required: false },
-  allowAlpha: { type: Boolean, required: false, default: true },
-  border: { type: Boolean, required: false, default: true },
-  copyTransform: { type: Function, required: false, default: (_val, stringVal) => stringVal },
-  stringPrecision: { type: Number, required: false, default: 3 },
-  customRepresentation: { type: Object, required: false, default: void 0 }
-});
-const emit = defineEmits(["save", "cancel"]);
-function save() {
-  $value.value = internalTempValue.value;
-  showPopup.value = false;
-  $tempValue.value = void 0;
-  emit("save");
-}
-function cancel() {
-  showPopup.value = false;
-  $tempValue.value = void 0;
-  emit("cancel");
-}
-const $attrs = useAttrs();
-const $value = defineModel({ type: Object, ...{ required: false, default: () => ({ r: 0, g: 0, b: 0 }) } });
-const $tempValue = defineModel("tempValue", { type: null, ...{ required: false, default: () => void 0 } });
-const stringColor = computed(() => new Color("srgb", [
-  $value.value.r / 255,
-  $value.value.g / 255,
-  $value.value.b / 255
-], $value.value.a ?? 1).toString());
-const tempStringColor = computed(() => $tempValue.value ? new Color("srgb", [
-  $tempValue.value.r / 255,
-  $tempValue.value.g / 255,
-  $tempValue.value.b / 255
-], $tempValue.value.a ?? 1).toString() : "");
-const internalTempValue = ref({ ...$value.value });
-const showPopup = ref(false);
-const togglePopup = () => {
-  if (showPopup.value) {
-    $value.value = internalTempValue.value;
-  }
-  showPopup.value = !showPopup.value;
-};
-</script>
-
-<script>
-
-</script>

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.d.vue.ts

@@ -1,34 +0,0 @@
-import type { RangeDate } from "../../types/index.js";
-type __VLS_Props = {
-    useTime?: boolean;
-    id: string;
-    fallbackDate?: Date;
-    timeZone?: string;
-    updateInterval?: number;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue: RangeDate;
-};
-declare var __VLS_167: {
-    tempValue: any;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_167) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: RangeDate) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: RangeDate) => any) | undefined;
-}>, {
-    fallbackDate: Date;
-    timeZone: string;
-    useTime: boolean;
-    updateInterval: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.vue.d.ts

@@ -1,34 +0,0 @@
-import type { RangeDate } from "../../types/index.js";
-type __VLS_Props = {
-    useTime?: boolean;
-    id: string;
-    fallbackDate?: Date;
-    timeZone?: string;
-    updateInterval?: number;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue: RangeDate;
-};
-declare var __VLS_167: {
-    tempValue: any;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_167) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: RangeDate) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: RangeDate) => any) | undefined;
-}>, {
-    fallbackDate: Date;
-    timeZone: string;
-    useTime: boolean;
-    updateInterval: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibDatePicker/LibTimeZonePicker.d.vue.ts

@@ -1,22 +0,0 @@
-type __VLS_PublicProps = {
-    modelValue?: string;
-    "label"?: string;
-};
-declare var __VLS_7: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-    "update:label": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    "onUpdate:label"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/LibDatePicker/LibTimeZonePicker.vue.d.ts

@@ -1,22 +0,0 @@
-type __VLS_PublicProps = {
-    modelValue?: string;
-    "label"?: string;
-};
-declare var __VLS_7: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-    "update:label": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    "onUpdate:label"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,43 +0,0 @@
-import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
-import type { FileInputError } from "../../types/index.js";
-import { type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js";
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, 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;
-    };
-};

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

@@ -1,274 +0,0 @@
-<template>
-<!-- todo aria errors -->
-<div
-	:class="twMerge(
-  `file-input
-		justify-center
-		border-2
-		border-dashed
-		border-accent-500/80
-		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 }"
->
-	<div
-		:class="twMerge(
-  `
-		file-input--wrapper
-		relative justify-center`,
-  compact && `flex gap-2`,
-  !compact && `input-wrapper
-		flex flex-col items-center
-		`
-)"
-	>
-		<label
-			:for="id ?? fallbackId"
-			: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")
-				}}
-			</slot>
-			<span
-				v-if="compact && multiple"
-				class="file-input--label-count"
-			>
-				{{ ` (${files.length})` }}
-			</span>
-		</label>
-		<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(", ") }}
-			</div>
-		</label>
-		<input
-			:id="id ?? fallbackId"
-			:class="twMerge(
-  `
-					file-input--input
-					absolute
-					inset-0
-					z-0
-					cursor-pointer
-					text-[0]
-					opacity-0
-				`,
-  $.inputAttrs?.class
-)"
-			type="file"
-			:accept="formats.join(', ')"
-			:multiple="multiple"
-			ref="el"
-			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
-			flex items-stretch justify-center gap-2 flex-wrap
-			`,
-  multiple && `
-				w-full
-			`,
-  $.previewsAttrs?.class
-)"
-	>
-		<div class="file-input--preview-spacer flex-1"/>
-		<div
-			class="file-input--preview-wrapper
-				z-1
-				relative
-				flex
-				min-w-0
-				max-w-[150px]
-				flex-initial
-				flex-wrap
-				items-center
-				gap-2 rounded-sm border border-neutral-400
-				shadow-xs
-				shadow-neutral-800/20
-			"
-			v-for="entry of files"
-			:key="entry.file.name"
-		>
-			<div class="file-input--remove-button flex flex-initial basis-full justify-start">
-				<lib-button
-					:border="false"
-					:aria-label="`Remove file ${entry.file.name}`"
-					@click="removeFile(entry)"
-				>
-					<icon><i-fa6-solid-xmark/></icon>
-				</lib-button>
-			</div>
-
-			<div class="file-input--preview flex flex-initial basis-full justify-center">
-				<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)"
-					>
-				</div>
-				<div
-					v-if="!entry.isImg"
-					class="file-input--preview-no-image
-					flex h-[80px]
-					flex-1 basis-full flex-wrap items-center justify-center
-					"
-				>
-					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
-				</div>
-			</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>
-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 { 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));
-});
-watch(errors, () => {
-  if (errors.length > 0) {
-    errorFlashing.value = true;
-    setTimeout(() => {
-      errorFlashing.value = false;
-    }, 500);
-    emits("errors", errors);
-  }
-});
-defineOptions({
-  name: "LibFileInput",
-  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);
-    }
-  }
-  return void 0;
-};
-</script>
-
-<script>
-export default { name: "LibFileInput" };
-</script>

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

@@ -1,43 +0,0 @@
-import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
-import type { FileInputError } from "../../types/index.js";
-import { type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js";
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, 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;
-    };
-};