@wirekyt/vue 0.0.1 → 0.0.3

package/dist/file-upload.js

@@ -0,0 +1,392 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { c as normalizeProps$1, d as useForwardExpose, m as createContext, s as useMachine } from "./utils-D95V66v9.js";
+import { a as DEFAULT_LOCALE, d as useEnvironmentContext, o as useLocaleContext, u as DEFAULT_ENVIRONMENT } from "./providers-C3XQH-uu.js";
+import { t as cleanProps } from "./clean-props--1kqQE0Y.js";
+import { n as wire } from "./factory-8Ao0DEy3.js";
+import { h as useFieldContext } from "./field-C3pLqz1S.js";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeDefaults, mergeProps, normalizeProps, openBlock, ref, renderSlot, toDisplayString, toValue, unref, useId, useSlots, watchEffect, withCtx } from "vue";
+import { pick } from "@wirekyt/dom/utils";
+import * as fileUpload from "@wirekyt/dom/machines/file-upload";
+import { anatomy as fileUploadAnatomy } from "@wirekyt/dom/machines/file-upload";
+//#region src/components/file-upload/use-context.ts
+const [FileUploadProvider, useFileUploadContext] = createContext("FileUploadContext");
+//#endregion
+//#region src/components/file-upload/clear-trigger.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "clear-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/context.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "context",
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(fileUpload))));
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/dropzone.vue
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "dropzone",
+	props: /*@__PURE__*/ mergeDefaults({
+		asChild: { type: Boolean },
+		disableClick: { type: Boolean }
+	}, { disableClick: void 0 }),
+	setup(__props) {
+		const props = __props;
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/hidden-input.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	__name: "hidden-input",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const field = useFieldContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/use-item-props-context.ts
+const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext("FileUploadItemPropsContext");
+//#endregion
+//#region src/components/file-upload/item-delete-trigger.vue
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	__name: "item-delete-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/use-item-group-props-context.ts
+const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = createContext("FileUploadItemGroupPropsContext");
+//#endregion
+//#region src/components/file-upload/item-group.vue
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	__name: "item-group",
+	props: {
+		asChild: { type: Boolean },
+		type: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const groupProps = computed(() => pick(props, ["type"]));
+		const fileUpload = useFileUploadContext();
+		FileUploadItemGroupPropsProvider(groupProps);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/item-name.vue
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	__name: "item-name",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const slots = useSlots();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/item-preview-image.vue
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	__name: "item-preview-image",
+	props: { asChild: { type: Boolean } },
+	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(wire).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/item-preview.vue
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+	__name: "item-preview",
+	props: {
+		type: { default: ".*" },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return unref(itemProps).file.type.match(__props.type ?? ".*") ? (openBlock(), createBlock(unref(wire).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/item-size-text.vue
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+	__name: "item-size-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const slots = useSlots();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/item.vue
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	__name: "item",
+	props: {
+		file: {},
+		type: {},
+		asChild: { type: Boolean }
+	},
+	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(wire).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/label.vue
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+	__name: "label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/root-provider.vue
+const _sfc_main$13 = /*@__PURE__*/ defineComponent({
+	__name: "root-provider",
+	props: {
+		value: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const fileUpload = computed(() => props.value);
+		FileUploadProvider(fileUpload);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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/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/root.vue
+const _sfc_main$12 = /*@__PURE__*/ defineComponent({
+	__name: "root",
+	props: /*@__PURE__*/ mergeDefaults({
+		accept: {},
+		defaultAcceptedFiles: {},
+		allowDrop: { type: Boolean },
+		capture: {},
+		directory: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		ids: {},
+		invalid: { type: Boolean },
+		locale: {},
+		maxFileSize: {},
+		maxFiles: {},
+		minFileSize: {},
+		name: {},
+		preventDocumentDrop: { type: Boolean },
+		readOnly: { type: Boolean },
+		required: { type: Boolean },
+		translations: {},
+		validate: { type: Function },
+		transformFiles: { type: Function },
+		asChild: { type: Boolean }
+	}, {
+		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(wire).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/trigger.vue
+const _sfc_main$14 = /*@__PURE__*/ defineComponent({
+	__name: "trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(wire).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.ts
+var file_upload_exports = /* @__PURE__ */ __exportAll({
+	ClearTrigger: () => _sfc_main,
+	Context: () => _sfc_main$1,
+	Dropzone: () => _sfc_main$2,
+	HiddenInput: () => _sfc_main$3,
+	Item: () => _sfc_main$4,
+	ItemDeleteTrigger: () => _sfc_main$5,
+	ItemGroup: () => _sfc_main$6,
+	ItemName: () => _sfc_main$7,
+	ItemPreview: () => _sfc_main$8,
+	ItemPreviewImage: () => _sfc_main$9,
+	ItemSizeText: () => _sfc_main$10,
+	Label: () => _sfc_main$11,
+	Root: () => _sfc_main$12,
+	RootProvider: () => _sfc_main$13,
+	Trigger: () => _sfc_main$14
+});
+//#endregion
+export { file_upload_exports as FileUpload, _sfc_main as FileUploadClearTrigger, _sfc_main$1 as FileUploadContext, _sfc_main$2 as FileUploadDropzone, _sfc_main$3 as FileUploadHiddenInput, _sfc_main$4 as FileUploadItem, _sfc_main$5 as FileUploadItemDeleteTrigger, _sfc_main$6 as FileUploadItemGroup, _sfc_main$7 as FileUploadItemName, _sfc_main$8 as FileUploadItemPreview, _sfc_main$9 as FileUploadItemPreviewImage, _sfc_main$10 as FileUploadItemSizeText, _sfc_main$11 as FileUploadLabel, _sfc_main$12 as FileUploadRoot, _sfc_main$13 as FileUploadRootProvider, _sfc_main$14 as FileUploadTrigger, fileUploadAnatomy, useFileUpload, useFileUploadContext };