@naptics/vue-collection 0.2.7 → 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/components/NValInput.d.ts

@@ -123,10 +123,7 @@ export declare const nValInputProps: {
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>; /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
+    readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
     readonly onUpdateValue: PropType<(newValue: string) => void>;
 };
@@ -229,10 +226,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>; /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
+    readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
     readonly onUpdateValue: PropType<(newValue: string) => 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<{
@@ -313,10 +307,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>; /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
+    readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
     readonly onUpdateValue: PropType<(newValue: string) => void>;
 }>> & {}, {

package/components/NValInput.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { createComponentWithSlots } from '../utils/component';
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted } from 'vue';
 import { ref, reactive, watch } from 'vue';
 import NInput, { nInputProps } from './NInput';
 import { validate, required, validResult } from '../utils/validation';
@@ -98,7 +98,9 @@ const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'
     focus: () => inputRef.value?.focus()
   };
   context.expose(expose);
-  props.form?.addInput(expose);
+  let assignedId = undefined;
+  onMounted(() => assignedId = props.form?.addInput(expose));
+  onUnmounted(() => assignedId && props.form?.removeInput(assignedId));
   return () => _createVNode("div", null, [props.input?.(inputSlotProps) || _createVNode(NInput, _mergeProps({
     "ref": inputRef
   }, {

package/components/ValidatedForm.d.ts

@@ -11,12 +11,17 @@ import type { NValInputExposed } from './NValInput';
  */
 export type ValidatedForm = {
     /**
-     * Adds the input to the list of this form.
+     * Adds the input to the list of this form and returns the assigned `id`.
      * If this form is passed to a `<NValInput />` via the props, will add itself to this form.
+     * @returns the newly assigned `id` of the added input.
      * @example
      * <NValInput ... form={form} />
      */
-    addInput(input: NValInputExposed): void;
+    addInput(input: NValInputExposed): string;
+    /**
+     * Removes the input with the given `id` from this form.
+     */
+    removeInput(id: string): void;
     /**
      * Validates all inputs of the form. If inputs are invalid they will show it visually.
      * The first invalid validation result is returned.

package/components/ValidatedForm.js

@@ -1,3 +1,5 @@
+import { Id } from '../utils/identifiable';
+import { uniqueId } from '../utils/utils';
 /**
  * Creates a new ValidatedForm.
  * @returns the instance of the new form.
@@ -8,7 +10,15 @@ export function createValidatedForm() {
 class ValidatedFormImpl {
   inputs = [];
   addInput(input) {
-    this.inputs.push(input);
+    const id = `input-${uniqueId()}`;
+    this.inputs.push({
+      id,
+      ...input
+    });
+    return id;
+  }
+  removeInput(id) {
+    Id.remove(this.inputs, id);
   }
   validate() {
     const results = this.inputs.map(input => input.validate());

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.7",
+    "version": "0.2.9",
     "main": "./index.js",
     "repository": {
         "type": "git",