@e280/quay/x/dom/components/dropzone/component.js

File-browser and outliner UI for the web

import { html } from "lit";
import { shadowElement, useHost, useStyles } from "@e280/sly";
import styleCss from "./style.css.js";
import themeCss from "../../theme.css.js";
import { findLocalGroup } from "../../utils/find-local-group.js";
export const QuayDropzone = shadowElement(() => {
    useStyles(themeCss, styleCss);
    const host = useHost();
    const group = findLocalGroup(host);
    const { dropzone, config: { root } } = group;
    return html `
		<div class="dropzone" ?data-hovering=${dropzone.hovering}>
			<input
				type="file"
				class="dz-input"
				@change=${(e) => dropzone.change(e, root)}
				@drop=${(e) => dropzone.drop(e, root)}
				@dragover=${(e) => dropzone.dragover(e, root)}
				@dragenter=${(e) => dropzone.dragenter(e, root)}
				@dragleave=${dropzone.dragleave}
			>
			<div class=dz-info>
				<sl-icon name="upload"></sl-icon>
				Drop files here
			</div>
		</div>
	`;
});
//# sourceMappingURL=component.js.map