@naptics/vue-collection 0.2.7 → 0.2.8

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