@mantine-vue/dropzone 1.1.2

package/lib/DropzoneFullScreen.d.ts

@@ -0,0 +1,101 @@
+import { type PropType } from 'vue';
+import { type DropzoneProps, type DropzoneStylesNames } from './Dropzone';
+export type DropzoneFullScreenStylesNames = DropzoneStylesNames | 'fullScreen';
+export interface DropzoneFullScreenProps extends Omit<DropzoneProps, 'variant' | 'classNames' | 'styles' | 'vars'> {
+    /** Determines whether user can drop files to browser window @default true */
+    active?: boolean;
+    /** Z-index value @default 9999 (theme "max" z-index) */
+    zIndex?: string | number;
+    /** Determines whether component should be rendered within `Portal` @default true */
+    withinPortal?: boolean;
+    /** Props to pass down to the portal when withinPortal is `true` */
+    portalProps?: Record<string, any>;
+    classNames?: any;
+    styles?: any;
+}
+export declare const DropzoneFullScreen: import("@mantine-vue/core").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onDrop: {
+        type: PropType<(files: any[]) => void>;
+        required: true;
+    };
+    onReject: {
+        type: PropType<(fileRejections: any[]) => void>;
+        default: undefined;
+    };
+    zIndex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    withinPortal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    portalProps: {
+        type: PropType<Record<string, any>>;
+        default: undefined;
+    };
+    classNames: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    styles: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onDrop: {
+        type: PropType<(files: any[]) => void>;
+        required: true;
+    };
+    onReject: {
+        type: PropType<(fileRejections: any[]) => void>;
+        default: undefined;
+    };
+    zIndex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    withinPortal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    portalProps: {
+        type: PropType<Record<string, any>>;
+        default: undefined;
+    };
+    classNames: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    styles: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    classNames: Function | Record<string, any>;
+    styles: Function | Record<string, any>;
+    active: boolean;
+    zIndex: string | number;
+    unstyled: boolean;
+    withinPortal: boolean;
+    portalProps: Record<string, any>;
+    onReject: (fileRejections: any[]) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;

package/lib/DropzoneStatus.d.ts

@@ -0,0 +1,16 @@
+import { type VNodeChild } from 'vue';
+export declare const DropzoneAccept: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const DropzoneReject: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const DropzoneIdle: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface DropzoneStatusProps {
+    children?: VNodeChild;
+}
+export type DropzoneAcceptProps = DropzoneStatusProps;
+export type DropzoneRejectProps = DropzoneStatusProps;
+export type DropzoneIdleProps = DropzoneStatusProps;

package/lib/get-files-from-event.d.ts

@@ -0,0 +1,2 @@
+import type { DropEvent, FileWithPath } from './types';
+export declare function getFilesFromEvent(event: DropEvent): Promise<FileWithPath[]>;

package/lib/index.d.mts

@@ -0,0 +1,16 @@
+import { Dropzone as _Dropzone } from './Dropzone';
+import { DropzoneFullScreen } from './DropzoneFullScreen';
+export declare const Dropzone: typeof _Dropzone & {
+    FullScreen: typeof DropzoneFullScreen;
+};
+export { DropzoneFullScreen };
+export { DropzoneAccept, DropzoneIdle, DropzoneReject } from './DropzoneStatus';
+export { useDropzone } from './use-dropzone';
+export * from './mime-types';
+export * from './utils';
+export type { DropzoneFullScreenProps, DropzoneFullScreenStylesNames } from './DropzoneFullScreen';
+export type { DropzoneCssVariables, DropzoneProps, DropzoneStylesNames, DropzoneVariant, } from './Dropzone';
+export type { DropzoneAcceptProps, DropzoneIdleProps, DropzoneRejectProps } from './DropzoneStatus';
+export type { DropzoneContextValue } from './Dropzone.context';
+export type { UseDropzoneOptions } from './use-dropzone';
+export type { Accept, DropEvent, FileError, FileRejection, FileWithPath } from './types';

package/lib/index.d.ts

@@ -0,0 +1,16 @@
+import { Dropzone as _Dropzone } from './Dropzone';
+import { DropzoneFullScreen } from './DropzoneFullScreen';
+export declare const Dropzone: typeof _Dropzone & {
+    FullScreen: typeof DropzoneFullScreen;
+};
+export { DropzoneFullScreen };
+export { DropzoneAccept, DropzoneIdle, DropzoneReject } from './DropzoneStatus';
+export { useDropzone } from './use-dropzone';
+export * from './mime-types';
+export * from './utils';
+export type { DropzoneFullScreenProps, DropzoneFullScreenStylesNames } from './DropzoneFullScreen';
+export type { DropzoneCssVariables, DropzoneProps, DropzoneStylesNames, DropzoneVariant, } from './Dropzone';
+export type { DropzoneAcceptProps, DropzoneIdleProps, DropzoneRejectProps } from './DropzoneStatus';
+export type { DropzoneContextValue } from './Dropzone.context';
+export type { UseDropzoneOptions } from './use-dropzone';
+export type { Accept, DropEvent, FileError, FileRejection, FileWithPath } from './types';

package/lib/mime-types.d.ts

@@ -0,0 +1,29 @@
+export declare const MIME_TYPES: {
+    readonly png: "image/png";
+    readonly gif: "image/gif";
+    readonly jpeg: "image/jpeg";
+    readonly svg: "image/svg+xml";
+    readonly webp: "image/webp";
+    readonly avif: "image/avif";
+    readonly heic: "image/heic";
+    readonly heif: "image/heif";
+    readonly mp4: "video/mp4";
+    readonly zip: "application/zip";
+    readonly rar: "application/x-rar";
+    readonly '7z': "application/x-7z-compressed";
+    readonly csv: "text/csv";
+    readonly pdf: "application/pdf";
+    readonly doc: "application/msword";
+    readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly xls: "application/vnd.ms-excel";
+    readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly ppt: "application/vnd.ms-powerpoint";
+    readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly exe: "application/vnd.microsoft.portable-executable";
+};
+export declare const IMAGE_MIME_TYPE: ("image/png" | "image/svg+xml" | "image/gif" | "image/jpeg" | "image/webp" | "image/avif" | "image/heic" | "image/heif")[];
+export declare const PDF_MIME_TYPE: "application/pdf"[];
+export declare const MS_WORD_MIME_TYPE: ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document")[];
+export declare const MS_EXCEL_MIME_TYPE: ("application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")[];
+export declare const MS_POWERPOINT_MIME_TYPE: ("application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation")[];
+export declare const EXE_MIME_TYPE: "application/vnd.microsoft.portable-executable"[];

package/lib/types.d.ts

@@ -0,0 +1,14 @@
+export interface FileWithPath extends File {
+    readonly path?: string;
+}
+export interface FileError {
+    message: string;
+    code: string;
+}
+export interface FileRejection {
+    file: FileWithPath;
+    errors: FileError[];
+}
+/** Mime type -> array of accepted file extensions (e.g. `{ 'image/png': ['.png'] }`) */
+export type Accept = Record<string, string[]>;
+export type DropEvent = DragEvent | Event | FileSystemFileHandle[];

package/lib/use-dropzone.d.ts

@@ -0,0 +1,72 @@
+import type { Accept, DropEvent, FileError, FileRejection, FileWithPath } from './types';
+export interface UseDropzoneOptions {
+    accept?: () => Accept | undefined;
+    disabled?: () => boolean | undefined;
+    multiple?: () => boolean | undefined;
+    maxSize?: () => number | undefined;
+    minSize?: () => number | undefined;
+    maxFiles?: () => number | undefined;
+    autoFocus?: () => boolean | undefined;
+    noClick?: () => boolean | undefined;
+    noDrag?: () => boolean | undefined;
+    noDragEventsBubbling?: () => boolean | undefined;
+    noKeyboard?: () => boolean | undefined;
+    preventDropOnDocument?: () => boolean | undefined;
+    useFsAccessApi?: () => boolean | undefined;
+    validator?: () => ((file: FileWithPath) => FileError | FileError[] | null) | undefined;
+    getFilesFromEvent?: () => ((event: DropEvent) => Promise<FileWithPath[]>) | undefined;
+    onDrop?: (files: FileWithPath[], fileRejections: FileRejection[], event: DropEvent | null) => void;
+    onDropAccepted?: (files: FileWithPath[], event: DropEvent | null) => void;
+    onDropRejected?: (fileRejections: FileRejection[], event: DropEvent | null) => void;
+    onDragEnter?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onFileDialogCancel?: () => void;
+    onFileDialogOpen?: () => void;
+    onError?: (error: unknown) => void;
+}
+export interface DropzoneRootProps {
+    onKeydown: ((event: KeyboardEvent) => void) | null;
+    onFocus: (() => void) | null;
+    onBlur: (() => void) | null;
+    onClick: (() => void) | null;
+    onDragenter: ((event: DragEvent) => void) | null;
+    onDragover: ((event: DragEvent) => void) | null;
+    onDragleave: ((event: DragEvent) => void) | null;
+    onDrop: ((event: DragEvent) => void) | null;
+    role: string;
+    ref: (el: any) => void;
+    tabindex?: number;
+    [key: string]: any;
+}
+export interface DropzoneInputProps {
+    type: 'file';
+    accept?: string;
+    multiple: boolean;
+    style: Record<string, string | number>;
+    tabindex: number;
+    ref: (el: any) => void;
+    onChange: ((event: Event) => void) | null;
+    onClick: ((event: Event) => void) | null;
+    [key: string]: any;
+}
+declare function noop(): void;
+export declare function useDropzone(options: UseDropzoneOptions): {
+    state: {
+        isFocused: boolean;
+        isFileDialogActive: boolean;
+        isDragActive: boolean;
+        isDragAccept: boolean;
+        isDragReject: boolean;
+    };
+    rootRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    isFocused: import("vue").ComputedRef<boolean>;
+    isDragActive: import("vue").ComputedRef<boolean>;
+    isDragAccept: import("vue").ComputedRef<boolean>;
+    isDragReject: import("vue").ComputedRef<boolean>;
+    getRootProps: (overrides?: Record<string, any>) => DropzoneRootProps;
+    getInputProps: (overrides?: Record<string, any>) => DropzoneInputProps;
+    open: () => void | undefined;
+};
+export { noop };

package/lib/utils.d.ts

@@ -0,0 +1,46 @@
+import type { Accept, FileError, FileWithPath } from './types';
+export declare const FILE_INVALID_TYPE = "file-invalid-type";
+export declare const FILE_TOO_LARGE = "file-too-large";
+export declare const FILE_TOO_SMALL = "file-too-small";
+export declare const TOO_MANY_FILES = "too-many-files";
+export declare const ErrorCode: {
+    readonly FileInvalidType: "file-invalid-type";
+    readonly FileTooLarge: "file-too-large";
+    readonly FileTooSmall: "file-too-small";
+    readonly TooManyFiles: "too-many-files";
+};
+export declare const getInvalidTypeRejectionErr: (accept?: string) => FileError;
+export declare const getTooLargeRejectionErr: (maxSize: number) => FileError;
+export declare const getTooSmallRejectionErr: (minSize: number) => FileError;
+export declare const TOO_MANY_FILES_REJECTION: FileError;
+/**
+ * Check if the given file is a DataTransferItem with an empty type. During drag events some
+ * browsers report an empty MIME type on DataTransferItem for certain file extensions even though
+ * the type is correctly set once the file is actually dropped, so we accept those provisionally.
+ */
+export declare function isDataTransferItemWithEmptyType(file: any): boolean;
+export declare function fileAccepted(file: FileWithPath | DataTransferItem, accept?: string): [boolean, FileError | null];
+export declare function fileMatchSize(file: FileWithPath, minSize?: number, maxSize?: number): [boolean, FileError | null];
+export interface AllFilesAcceptedOptions {
+    files: FileWithPath[];
+    accept?: string;
+    minSize?: number;
+    maxSize?: number;
+    multiple?: boolean;
+    maxFiles?: number;
+    validator?: (file: FileWithPath) => FileError | FileError[] | null;
+}
+export declare function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles, validator, }: AllFilesAcceptedOptions): boolean;
+export declare function isEvtWithFiles(event: DragEvent | Event): boolean;
+export declare function canUseFileSystemAccessAPI(): boolean;
+/** Convert the `accept` prop into the `{types}` option for `window.showOpenFilePicker`. */
+export declare function pickerOptionsFromAccept(accept?: Accept): {
+    description: string;
+    accept: Accept;
+}[] | undefined;
+/** Convert the `accept` prop into a comma-separated string suitable for `<input accept>`. */
+export declare function acceptPropAsAcceptAttr(accept?: Accept): string | undefined;
+export declare function isAbort(v: unknown): boolean;
+export declare function isSecurityError(v: unknown): boolean;
+export declare function isMIMEType(v: string): boolean;
+export declare function isExt(v: string): boolean;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@mantine-vue/dropzone",
+  "version": "1.1.2",
+  "description": "Vue file drag & drop zone component equivalent to @mantine/dropzone",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "@mantine-vue/core": "workspace:*",
+    "@mantine-vue/hooks": "workspace:*",
+    "@vue/compiler-dom": "^3.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@mantine-vue/core": "1.1.1",
+    "@mantine-vue/hooks": "1.1.2",
+    "vue": "^3.5.0"
+  }
+}

package/styles.css

@@ -0,0 +1,83 @@
+._root_27ynu_1 {
+  position: relative;
+  border: calc(0.0625rem * var(--mantine-scale)) dashed;
+  color: var(--mantine-color-text);
+  padding: var(--mantine-spacing-md);
+  border-radius: var(--dropzone-radius);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 100ms ease,
+    border-color 100ms ease;
+}
+
+  ._root_27ynu_1:where([data-loading]),
+  ._root_27ynu_1:where(:not([data-activate-on-click])) {
+    cursor: default;
+  }
+
+  :where([data-mantine-color-scheme='light']) ._root_27ynu_1 {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+}
+
+  :where([data-mantine-color-scheme='dark']) ._root_27ynu_1 {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+  @media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) ._root_27ynu_1:hover:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) ._root_27ynu_1:hover:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  @media (hover: none) {
+      :where([data-mantine-color-scheme='light']) ._root_27ynu_1:active:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) ._root_27ynu_1:active:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  ._root_27ynu_1:where([data-accept]) {
+    background-color: var(--dropzone-accept-bg);
+    border-color: var(--dropzone-accept-bg);
+    color: var(--dropzone-accept-color);
+  }
+
+  ._root_27ynu_1:where([data-reject]) {
+    background-color: var(--dropzone-reject-bg);
+    border-color: var(--dropzone-reject-bg);
+    color: var(--dropzone-reject-color);
+  }
+
+._inner_27ynu_53 {
+  pointer-events: none;
+  user-select: none;
+}
+
+._inner_27ynu_53:where([data-enable-pointer-events]) {
+    pointer-events: all;
+  }
+
+._fullScreen_27ynu_62 {
+  position: fixed;
+  inset: 0;
+  background-color: var(--mantine-color-body);
+  display: flex;
+  flex-direction: column;
+  padding: var(--mantine-spacing-xs);
+  transition: opacity 100ms ease;
+}
+
+._fullScreen_27ynu_62 ._dropzone_27ynu_71 {
+    flex: 1;
+  }
+/*$vite$:1*/

package/styles.layer.css

@@ -0,0 +1,85 @@
+@layer mantine {
+._root_27ynu_1 {
+  position: relative;
+  border: calc(0.0625rem * var(--mantine-scale)) dashed;
+  color: var(--mantine-color-text);
+  padding: var(--mantine-spacing-md);
+  border-radius: var(--dropzone-radius);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 100ms ease,
+    border-color 100ms ease;
+}
+
+  ._root_27ynu_1:where([data-loading]),
+  ._root_27ynu_1:where(:not([data-activate-on-click])) {
+    cursor: default;
+  }
+
+  :where([data-mantine-color-scheme='light']) ._root_27ynu_1 {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+}
+
+  :where([data-mantine-color-scheme='dark']) ._root_27ynu_1 {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+  @media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) ._root_27ynu_1:hover:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) ._root_27ynu_1:hover:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  @media (hover: none) {
+      :where([data-mantine-color-scheme='light']) ._root_27ynu_1:active:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) ._root_27ynu_1:active:where([data-activate-on-click]:not([data-loading])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  ._root_27ynu_1:where([data-accept]) {
+    background-color: var(--dropzone-accept-bg);
+    border-color: var(--dropzone-accept-bg);
+    color: var(--dropzone-accept-color);
+  }
+
+  ._root_27ynu_1:where([data-reject]) {
+    background-color: var(--dropzone-reject-bg);
+    border-color: var(--dropzone-reject-bg);
+    color: var(--dropzone-reject-color);
+  }
+
+._inner_27ynu_53 {
+  pointer-events: none;
+  user-select: none;
+}
+
+._inner_27ynu_53:where([data-enable-pointer-events]) {
+    pointer-events: all;
+  }
+
+._fullScreen_27ynu_62 {
+  position: fixed;
+  inset: 0;
+  background-color: var(--mantine-color-body);
+  display: flex;
+  flex-direction: column;
+  padding: var(--mantine-spacing-xs);
+  transition: opacity 100ms ease;
+}
+
+._fullScreen_27ynu_62 ._dropzone_27ynu_71 {
+    flex: 1;
+  }
+/*$vite$:1*/
+}