@sprawlify/vue 0.0.67 → 0.0.72

package/dist/components/file-upload/index.js

@@ -0,0 +1,597 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { n as useMachine, r as normalizeProps$1 } from "../../core-DNndr38p.js";
+import { a as useLocaleContext, c as useEnvironmentContext, i as DEFAULT_LOCALE, s as DEFAULT_ENVIRONMENT } from "../../providers-DNBWT-O_.js";
+import { t as createContext } from "../../create-context-Ds1GbsVc.js";
+import { t as useForwardExpose } from "../../use-forward-expose-CCAmHTUB.js";
+import { t as sprawlify } from "../../factory-Co08Aw8u.js";
+import { t as cleanProps } from "../../clean-props-D2R4tz5e.js";
+import { m as useFieldContext } from "../../field-CtPR24u6.js";
+import { pick } from "@sprawlify/primitives/utils";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, ref, renderSlot, toDisplayString, toValue, unref, useId, useSlots, watchEffect, withCtx } from "vue";
+import * as fileUpload from "@sprawlify/primitives/machines/file-upload";
+import { anatomy as fileUploadAnatomy } from "@sprawlify/primitives/machines/file-upload";
+
+//#region src/components/file-upload/use-file-upload-context.ts
+const [FileUploadProvider, useFileUploadContext] = createContext("FileUploadContext");
+
+//#endregion
+//#region src/components/file-upload/file-upload-clear-trigger.vue?vue&type=script&setup=true&lang.ts
+var file_upload_clear_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-clear-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(fileUpload).getClearTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-clear-trigger.vue
+var file_upload_clear_trigger_default = file_upload_clear_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-context.vue?vue&type=script&setup=true&lang.ts
+var file_upload_context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-context",
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(fileUpload))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-context.vue
+var file_upload_context_default = file_upload_context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-dropzone.vue?vue&type=script&setup=true&lang.ts
+var file_upload_dropzone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-dropzone",
+	props: /* @__PURE__ */ mergeDefaults({
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		disableClick: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		}
+	}, { disableClick: void 0 }),
+	setup(__props) {
+		const props = __props;
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(fileUpload).getDropzoneProps(props), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-dropzone.vue
+var file_upload_dropzone_default = file_upload_dropzone_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-hidden-input.vue?vue&type=script&setup=true&lang.ts
+var file_upload_hidden_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-hidden-input",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).input, mergeProps({ "aria-describedby": unref(field)?.ariaDescribedby }, unref(fileUpload).getHiddenInputProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-describedby", "as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-hidden-input.vue
+var file_upload_hidden_input_default = file_upload_hidden_input_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/use-file-upload-item-props-context.ts
+const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext("FileUploadItemPropsContext");
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-delete-trigger.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_delete_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item-delete-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(fileUpload).getItemDeleteTriggerProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-delete-trigger.vue
+var file_upload_item_delete_trigger_default = file_upload_item_delete_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/use-file-upload-item-group-props-context.ts
+const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext("FileUploadItemGroupPropsContext");
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-group.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item-group",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const groupProps = computed(() => pick(props, ["type"]));
+		const fileUpload = useFileUploadContext();
+		FileUploadItemGroupPropsProvider(groupProps);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).ul, mergeProps(unref(fileUpload).getItemGroupProps(groupProps.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-group.vue
+var file_upload_item_group_default = file_upload_item_group_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-name.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_name_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item-name",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const slots = useSlots();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(fileUpload).getItemNameProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(slots.default?.() || unref(itemProps).file.name), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-name.vue
+var file_upload_item_name_default = file_upload_item_name_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-preview-image.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_preview_image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item-preview-image",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const url = ref("");
+		watchEffect((onCleanup) => {
+			onCleanup(fileUpload.value.createFileUrl(itemProps.value.file, (src) => url.value = src));
+		});
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return url.value ? (openBlock(), createBlock(unref(sprawlify).img, normalizeProps(mergeProps({ key: 0 }, unref(fileUpload).getItemPreviewImageProps({
+				...unref(itemProps),
+				url: url.value
+			}))), null, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-preview-image.vue
+var file_upload_item_preview_image_default = file_upload_item_preview_image_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-preview.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item-preview",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: ".*"
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(itemProps).file.type.match(__props.type ?? ".*") ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, unref(fileUpload).getItemPreviewProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-preview.vue
+var file_upload_item_preview_default = file_upload_item_preview_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-size-text.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_size_text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item-size-text",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const slots = useSlots();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(fileUpload).getItemSizeTextProps(unref(itemProps)), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(slots.default?.() || unref(fileUpload).getFileSize(unref(itemProps).file)), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item-size-text.vue
+var file_upload_item_size_text_default = file_upload_item_size_text_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-item.vue?vue&type=script&setup=true&lang.ts
+var file_upload_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-item",
+	props: {
+		file: {
+			type: null,
+			required: true
+		},
+		type: {
+			type: null,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const fileUpload = useFileUploadContext();
+		const itemGroupProps = useFileUploadItemGroupPropsContext();
+		const itemPropsContext = computed(() => ({
+			...props,
+			type: itemGroupProps.value.type
+		}));
+		FileUploadItemPropsProvider(itemPropsContext);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).li, mergeProps(unref(fileUpload).getItemProps(itemPropsContext.value), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-item.vue
+var file_upload_item_default = file_upload_item_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-label.vue?vue&type=script&setup=true&lang.ts
+var file_upload_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-label",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).label, mergeProps(unref(fileUpload).getLabelProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-label.vue
+var file_upload_label_default = file_upload_label_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-root-provider.vue?vue&type=script&setup=true&lang.ts
+var file_upload_root_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-root-provider",
+	props: {
+		value: {
+			type: null,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const fileUpload = computed(() => props.value);
+		FileUploadProvider(fileUpload);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(fileUpload.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-root-provider.vue
+var file_upload_root_provider_default = file_upload_root_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/use-file-upload.ts
+const useFileUpload = (props = {}, emit) => {
+	const id = useId();
+	const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+	const locale = useLocaleContext(DEFAULT_LOCALE);
+	const field = useFieldContext();
+	const context = computed(() => {
+		const localeProps = toValue(props);
+		return {
+			id,
+			ids: {
+				label: field?.value.ids.label,
+				hiddenInput: field?.value.ids.control
+			},
+			dir: locale.value.dir,
+			disabled: field?.value.disabled,
+			invalid: field?.value.invalid,
+			locale: locale.value.locale,
+			required: field?.value.required,
+			getRootNode: env?.value.getRootNode,
+			...cleanProps(localeProps),
+			onFileChange: (details) => {
+				emit?.("update:acceptedFiles", details.acceptedFiles);
+				emit?.("fileChange", details);
+				localeProps.onFileChange?.(details);
+			},
+			onFileAccept: (details) => {
+				emit?.("fileAccept", details);
+				localeProps.onFileAccept?.(details);
+			},
+			onFileReject: (details) => {
+				emit?.("fileReject", details);
+				localeProps.onFileReject?.(details);
+			}
+		};
+	});
+	const service = useMachine(fileUpload.machine, context);
+	return computed(() => fileUpload.connect(service, normalizeProps$1));
+};
+
+//#endregion
+//#region src/components/file-upload/file-upload-root.vue?vue&type=script&setup=true&lang.ts
+var file_upload_root_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-root",
+	props: /* @__PURE__ */ mergeDefaults({
+		accept: {
+			type: null,
+			required: false
+		},
+		defaultAcceptedFiles: {
+			type: Array,
+			required: false
+		},
+		allowDrop: {
+			type: Boolean,
+			required: false
+		},
+		capture: {
+			type: String,
+			required: false
+		},
+		directory: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ids: {
+			type: Object,
+			required: false
+		},
+		invalid: {
+			type: Boolean,
+			required: false
+		},
+		locale: {
+			type: String,
+			required: false
+		},
+		maxFileSize: {
+			type: Number,
+			required: false
+		},
+		maxFiles: {
+			type: Number,
+			required: false
+		},
+		minFileSize: {
+			type: Number,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		preventDocumentDrop: {
+			type: Boolean,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		translations: {
+			type: null,
+			required: false
+		},
+		validate: {
+			type: Function,
+			required: false
+		},
+		transformFiles: {
+			type: Function,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		allowDrop: void 0,
+		directory: void 0,
+		disabled: void 0,
+		invalid: void 0,
+		preventDocumentDrop: void 0,
+		readOnly: void 0,
+		required: void 0
+	}),
+	emits: [
+		"update:acceptedFiles",
+		"fileAccept",
+		"fileChange",
+		"fileReject"
+	],
+	setup(__props, { emit: __emit }) {
+		const fileUpload = useFileUpload(__props, __emit);
+		FileUploadProvider(fileUpload);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).div, mergeProps(unref(fileUpload).getRootProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-root.vue
+var file_upload_root_default = file_upload_root_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload-trigger.vue?vue&type=script&setup=true&lang.ts
+var file_upload_trigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "file-upload-trigger",
+	props: { asChild: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(sprawlify).button, mergeProps(unref(fileUpload).getTriggerProps(), { "as-child": __props.asChild }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/file-upload/file-upload-trigger.vue
+var file_upload_trigger_default = file_upload_trigger_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/file-upload/file-upload.ts
+var file_upload_exports = /* @__PURE__ */ __exportAll({
+	ClearTrigger: () => file_upload_clear_trigger_default,
+	Context: () => file_upload_context_default,
+	Dropzone: () => file_upload_dropzone_default,
+	HiddenInput: () => file_upload_hidden_input_default,
+	Item: () => file_upload_item_default,
+	ItemDeleteTrigger: () => file_upload_item_delete_trigger_default,
+	ItemGroup: () => file_upload_item_group_default,
+	ItemName: () => file_upload_item_name_default,
+	ItemPreview: () => file_upload_item_preview_default,
+	ItemPreviewImage: () => file_upload_item_preview_image_default,
+	ItemSizeText: () => file_upload_item_size_text_default,
+	Label: () => file_upload_label_default,
+	Root: () => file_upload_root_default,
+	RootProvider: () => file_upload_root_provider_default,
+	Trigger: () => file_upload_trigger_default
+});
+
+//#endregion
+export { file_upload_exports as FileUpload, file_upload_clear_trigger_default as FileUploadClearTrigger, file_upload_context_default as FileUploadContext, file_upload_dropzone_default as FileUploadDropzone, file_upload_hidden_input_default as FileUploadHiddenInput, file_upload_item_default as FileUploadItem, file_upload_item_delete_trigger_default as FileUploadItemDeleteTrigger, file_upload_item_group_default as FileUploadItemGroup, file_upload_item_name_default as FileUploadItemName, file_upload_item_preview_default as FileUploadItemPreview, file_upload_item_preview_image_default as FileUploadItemPreviewImage, file_upload_item_size_text_default as FileUploadItemSizeText, file_upload_label_default as FileUploadLabel, file_upload_root_default as FileUploadRoot, file_upload_root_provider_default as FileUploadRootProvider, file_upload_trigger_default as FileUploadTrigger, fileUploadAnatomy, useFileUpload, useFileUploadContext };