@wirekyt/vue 0.0.1 → 0.0.2

package/dist/file-upload.cjs

@@ -0,0 +1,421 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
+const require_utils = require("./utils-XrBZd2Yk.cjs");
+const require_providers = require("./providers-5QhcwgSd.cjs");
+const require_clean_props = require("./clean-props-MyKqus13.cjs");
+const require_factory = require("./factory-JL7MPjkk.cjs");
+const require_field = require("./field-DRz-v4rB.cjs");
+let vue = require("vue");
+let _wirekyt_dom_utils = require("@wirekyt/dom/utils");
+let _wirekyt_dom_machines_file_upload = require("@wirekyt/dom/machines/file-upload");
+_wirekyt_dom_machines_file_upload = require_rolldown_runtime.__toESM(_wirekyt_dom_machines_file_upload, 1);
+//#region src/components/file-upload/use-context.ts
+const [FileUploadProvider, useFileUploadContext] = require_utils.createContext("FileUploadContext");
+//#endregion
+//#region src/components/file-upload/clear-trigger.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "clear-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getClearTriggerProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/context.vue
+const _sfc_main$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "context",
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(fileUpload))));
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/dropzone.vue
+const _sfc_main$2 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "dropzone",
+	props: /*@__PURE__*/ (0, vue.mergeDefaults)({
+		asChild: { type: Boolean },
+		disableClick: { type: Boolean }
+	}, { disableClick: void 0 }),
+	setup(__props) {
+		const props = __props;
+		const fileUpload = useFileUploadContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getDropzoneProps(props), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/hidden-input.vue
+const _sfc_main$3 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "hidden-input",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const field = require_field.useFieldContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).input, (0, vue.mergeProps)({ "aria-describedby": (0, vue.unref)(field)?.ariaDescribedby }, (0, vue.unref)(fileUpload).getHiddenInputProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["aria-describedby", "as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/use-item-props-context.ts
+const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = require_utils.createContext("FileUploadItemPropsContext");
+//#endregion
+//#region src/components/file-upload/item-delete-trigger.vue
+const _sfc_main$5 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item-delete-trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getItemDeleteTriggerProps((0, vue.unref)(itemProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/use-item-group-props-context.ts
+const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] = require_utils.createContext("FileUploadItemGroupPropsContext");
+//#endregion
+//#region src/components/file-upload/item-group.vue
+const _sfc_main$6 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item-group",
+	props: {
+		asChild: { type: Boolean },
+		type: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const groupProps = (0, vue.computed)(() => (0, _wirekyt_dom_utils.pick)(props, ["type"]));
+		const fileUpload = useFileUploadContext();
+		FileUploadItemGroupPropsProvider(groupProps);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).ul, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getItemGroupProps(groupProps.value), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/item-name.vue
+const _sfc_main$7 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item-name",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const slots = (0, vue.useSlots)();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getItemNameProps((0, vue.unref)(itemProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(slots.default?.() || (0, vue.unref)(itemProps).file.name), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/item-preview-image.vue
+const _sfc_main$9 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item-preview-image",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const url = (0, vue.ref)("");
+		(0, vue.watchEffect)((onCleanup) => {
+			onCleanup(fileUpload.value.createFileUrl(itemProps.value.file, (src) => url.value = src));
+		});
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return url.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).img, (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(fileUpload).getItemPreviewImageProps({
+				...(0, vue.unref)(itemProps),
+				url: url.value
+			}))), null, 16)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/item-preview.vue
+const _sfc_main$8 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item-preview",
+	props: {
+		type: { default: ".*" },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(itemProps).file.type.match(__props.type ?? ".*") ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(fileUpload).getItemPreviewProps((0, vue.unref)(itemProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/item-size-text.vue
+const _sfc_main$10 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item-size-text",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		const itemProps = useFileUploadItemPropsContext();
+		const slots = (0, vue.useSlots)();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getItemSizeTextProps((0, vue.unref)(itemProps)), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(slots.default?.() || (0, vue.unref)(fileUpload).getFileSize((0, vue.unref)(itemProps).file)), 1)])]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/item.vue
+const _sfc_main$4 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "item",
+	props: {
+		file: {},
+		type: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const fileUpload = useFileUploadContext();
+		const itemGroupProps = useFileUploadItemGroupPropsContext();
+		const itemPropsContext = (0, vue.computed)(() => ({
+			...props,
+			type: itemGroupProps.value.type
+		}));
+		FileUploadItemPropsProvider(itemPropsContext);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).li, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getItemProps(itemPropsContext.value), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/label.vue
+const _sfc_main$11 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "label",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).label, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getLabelProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/root-provider.vue
+const _sfc_main$13 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root-provider",
+	props: {
+		value: {},
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const fileUpload = (0, vue.computed)(() => props.value);
+		FileUploadProvider(fileUpload);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)(fileUpload.value.getRootProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/use-file-upload.ts
+const useFileUpload = (props = {}, emit) => {
+	const id = (0, vue.useId)();
+	const env = require_providers.useEnvironmentContext(require_providers.DEFAULT_ENVIRONMENT);
+	const locale = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+	const field = require_field.useFieldContext();
+	const context = (0, vue.computed)(() => {
+		const localeProps = (0, vue.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,
+			...require_clean_props.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 = require_utils.useMachine(_wirekyt_dom_machines_file_upload.machine, context);
+	return (0, vue.computed)(() => _wirekyt_dom_machines_file_upload.connect(service, require_utils.normalizeProps));
+};
+//#endregion
+//#region src/components/file-upload/root.vue
+const _sfc_main$12 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root",
+	props: /*@__PURE__*/ (0, vue.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);
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).div, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getRootProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/trigger.vue
+const _sfc_main$14 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "trigger",
+	props: { asChild: { type: Boolean } },
+	setup(__props) {
+		const fileUpload = useFileUploadContext();
+		require_utils.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_factory.wire).button, (0, vue.mergeProps)((0, vue.unref)(fileUpload).getTriggerProps(), { "as-child": __props.asChild }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/file-upload/file-upload.ts
+var file_upload_exports = /* @__PURE__ */ require_rolldown_runtime.__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
+Object.defineProperty(exports, "FileUpload", {
+	enumerable: true,
+	get: function() {
+		return file_upload_exports;
+	}
+});
+exports.FileUploadClearTrigger = _sfc_main;
+exports.FileUploadContext = _sfc_main$1;
+exports.FileUploadDropzone = _sfc_main$2;
+exports.FileUploadHiddenInput = _sfc_main$3;
+exports.FileUploadItem = _sfc_main$4;
+exports.FileUploadItemDeleteTrigger = _sfc_main$5;
+exports.FileUploadItemGroup = _sfc_main$6;
+exports.FileUploadItemName = _sfc_main$7;
+exports.FileUploadItemPreview = _sfc_main$8;
+exports.FileUploadItemPreviewImage = _sfc_main$9;
+exports.FileUploadItemSizeText = _sfc_main$10;
+exports.FileUploadLabel = _sfc_main$11;
+exports.FileUploadRoot = _sfc_main$12;
+exports.FileUploadRootProvider = _sfc_main$13;
+exports.FileUploadTrigger = _sfc_main$14;
+Object.defineProperty(exports, "fileUploadAnatomy", {
+	enumerable: true,
+	get: function() {
+		return _wirekyt_dom_machines_file_upload.anatomy;
+	}
+});
+exports.useFileUpload = useFileUpload;
+exports.useFileUploadContext = useFileUploadContext;