@naptics/vue-collection 0.2.8 → 0.2.9

package/components/NDropzone.d.ts

@@ -46,6 +46,10 @@ export declare const nDropzoneProps: {
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
+    /**
+     * If set to `true`, the dropzone is disabled and does not accept input anymore.
+     */
+    readonly disabled: BooleanConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 };
@@ -101,6 +105,10 @@ declare const Component: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
+    /**
+     * If set to `true`, the dropzone is disabled and does not accept input anymore.
+     */
+    readonly disabled: BooleanConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -151,9 +159,14 @@ declare const Component: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
+    /**
+     * If set to `true`, the dropzone is disabled and does not accept input anymore.
+     */
+    readonly disabled: BooleanConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }>> & {}, {
+    readonly disabled: boolean;
     readonly maxFiles: number;
     readonly maxFileSize: number;
     readonly maxLengthFileNames: number;

package/components/NDropzone.js

@@ -60,7 +60,11 @@ export const nDropzoneProps = {
   height: {
     type: String,
     default: 'min-h-36'
-  }
+  },
+  /**
+   * If set to `true`, the dropzone is disabled and does not accept input anymore.
+   */
+  disabled: Boolean
 };
 /**
  * The `NDropzone` is an area where files can be added by the user by drag & drop.
@@ -112,6 +116,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
   const onDrop = event => {
     event.preventDefault();
     isDragOver.value = false;
+    if (props.disabled) return;
     const transfer = event.dataTransfer;
     if (transfer == null) return;
     if (transfer.items.length > 0) {
@@ -143,11 +148,13 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
   return () => {
     let _slot;
     return _createVNode("div", null, [_createVNode("button", {
-      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
+      "class": ['block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none p-4', !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '', props.disabled ? 'border-default-300 bg-default-50/50 text-default-500/30' : isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
       "onDrop": onDrop,
       "onDragover": onDragOver,
       "onDragleave": onDragLeave,
-      "onClick": onClick
+      "onClick": onClick,
+      "type": "button",
+      "disabled": props.disabled
     }, [_createVNode("input", {
       "type": "file",
       "class": "hidden",

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.2.8",
+    "version": "0.2.9",
     "main": "./index.js",
     "repository": {
         "type": "git",