@naptics/vue-collection 0.2.6 → 0.2.8

package/components/NSelect.d.ts

@@ -8,7 +8,9 @@ export declare const nSelectProps: {
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
         readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
+        readonly default: "auto"; /**
+         * @see {@link nValInputProps.name}
+         */
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
@@ -34,6 +36,14 @@ export declare const nSelectProps: {
         readonly type: PropType<SelectionOption[]>;
         readonly default: () => never[];
     };
+    /**
+     * The value which is shown in the empty state.
+     * The "nothing-option" will be called like this.
+     */
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: () => string;
+    };
     /**
      * @see {@link nValInputProps.name}
      */
@@ -73,7 +83,9 @@ declare const Component: import("vue").DefineComponent<{
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
         readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
+        readonly default: "auto"; /**
+         * @see {@link nValInputProps.name}
+         */
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
@@ -99,6 +111,14 @@ declare const Component: import("vue").DefineComponent<{
         readonly type: PropType<SelectionOption[]>;
         readonly default: () => never[];
     };
+    /**
+     * The value which is shown in the empty state.
+     * The "nothing-option" will be called like this.
+     */
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: () => string;
+    };
     /**
      * @see {@link nValInputProps.name}
      */
@@ -130,7 +150,9 @@ declare const Component: import("vue").DefineComponent<{
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
         readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
+        readonly default: "auto"; /**
+         * @see {@link nValInputProps.name}
+         */
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
@@ -156,6 +178,14 @@ declare const Component: import("vue").DefineComponent<{
         readonly type: PropType<SelectionOption[]>;
         readonly default: () => never[];
     };
+    /**
+     * The value which is shown in the empty state.
+     * The "nothing-option" will be called like this.
+     */
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: () => string;
+    };
     /**
      * @see {@link nValInputProps.name}
      */
@@ -187,6 +217,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
     readonly options: SelectionOption[];
     readonly disabled: boolean;
+    readonly placeholder: string;
     readonly hideLabel: boolean;
     readonly optional: boolean;
 }>;

package/components/NSelect.js

@@ -22,6 +22,14 @@ export const nSelectProps = {
     type: Array,
     default: () => []
   },
+  /**
+   * The value which is shown in the empty state.
+   * The "nothing-option" will be called like this.
+   */
+  placeholder: {
+    type: String,
+    default: () => trsl('vue-collection.action.select')
+  },
   /**
    * @see {@link nValInputProps.name}
    */
@@ -82,7 +90,7 @@ const Component = createComponent('NSelect', nSelectProps, (props, context) => {
         "disabled": !props.optional,
         "selected": !props.value,
         "value": ""
-      }, [trsl('vue-collection.action.select')]), props.options.map(option => _createVNode("option", {
+      }, [props.placeholder]), props.options.map(option => _createVNode("option", {
         "key": option.id,
         "value": option.id,
         "selected": props.value == option.id

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