@naptics/vue-collection 0.2.4 → 0.2.6

package/components/NInputPhone.d.ts

@@ -1,5 +1,6 @@
 export declare const nInputPhoneProps: {
     readonly input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: import("vue").PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -51,6 +52,7 @@ export declare const nInputPhoneProps: {
  */
 declare const Component: import("vue").DefineComponent<{
     readonly input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: import("vue").PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -98,6 +100,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly onUpdateValue: import("vue").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<{
     readonly input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: import("vue").PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -154,6 +157,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly error: boolean;
     readonly autocomplete: string;
     readonly hideLabel: boolean;
+    readonly disableValidation: boolean;
     readonly optional: boolean;
     readonly rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
     readonly hideErrorMessage: boolean;

package/components/NInputSuggestion.d.ts

@@ -20,6 +20,7 @@ export declare const nInputSuggestionProps: {
         readonly default: () => never[];
     };
     readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -91,6 +92,7 @@ declare const Component: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -157,6 +159,7 @@ declare const Component: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -213,6 +216,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly error: boolean;
     readonly autocomplete: string;
     readonly hideLabel: boolean;
+    readonly disableValidation: boolean;
     readonly optional: boolean;
     readonly rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
     readonly hideErrorMessage: boolean;

package/components/NSelect.d.ts

@@ -50,6 +50,10 @@ export declare const nSelectProps: {
      * @see {@link nValInputProps.form}
      */
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.hideLabel}
+     */
+    readonly hideLabel: BooleanConstructor;
     /**
      * @see {@link nValInputProps.inputClass}
      */
@@ -111,6 +115,10 @@ declare const Component: import("vue").DefineComponent<{
      * @see {@link nValInputProps.form}
      */
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.hideLabel}
+     */
+    readonly hideLabel: BooleanConstructor;
     /**
      * @see {@link nValInputProps.inputClass}
      */
@@ -164,6 +172,10 @@ declare const Component: import("vue").DefineComponent<{
      * @see {@link nValInputProps.form}
      */
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.hideLabel}
+     */
+    readonly hideLabel: BooleanConstructor;
     /**
      * @see {@link nValInputProps.inputClass}
      */
@@ -175,6 +187,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
     readonly options: SelectionOption[];
     readonly disabled: boolean;
+    readonly hideLabel: boolean;
     readonly optional: boolean;
 }>;
 export { Component as NSelect, Component as default };

package/components/NSelect.js

@@ -38,6 +38,10 @@ export const nSelectProps = {
    * @see {@link nValInputProps.form}
    */
   form: nValInputProps.form,
+  /**
+   * @see {@link nValInputProps.hideLabel}
+   */
+  hideLabel: nValInputProps.hideLabel,
   /**
    * @see {@link nValInputProps.inputClass}
    */
@@ -61,7 +65,7 @@ const Component = createComponent('NSelect', nSelectProps, (props, context) => {
   return () => _createVNode(NValInput, _mergeProps({
     "ref": inputRef
   }, props, {
-    "input": slotProps => _createVNode(_Fragment, null, [_createVNode("label", {
+    "input": slotProps => _createVNode(_Fragment, null, [props.name && !props.hideLabel && _createVNode("label", {
       "for": props.name,
       "class": ['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']
     }, [props.name]), _createVNode(NTooltip, _mergeProps({

package/components/NTextArea.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
 export declare const nTextAreaProps: {
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -88,6 +89,7 @@ export type NTextAreaExposed = {
     focus(): void;
 };
 declare const Component: import("vue").DefineComponent<{
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -169,6 +171,7 @@ declare const Component: import("vue").DefineComponent<{
     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<{
+    readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -258,6 +261,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly error: boolean;
     readonly autocomplete: string;
     readonly hideLabel: boolean;
+    readonly disableValidation: boolean;
     readonly optional: boolean;
     readonly rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
     readonly hideErrorMessage: boolean;

package/components/NValInput.d.ts

@@ -3,6 +3,11 @@ import { type NInputExposed } from './NInput';
 import { type ValidationRule, type ValidationResult } from '../utils/validation';
 import type { ValidatedForm } from './ValidatedForm';
 export declare const validationProps: {
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    readonly disableValidation: BooleanConstructor;
     /**
      * If set to `true` this input is always valid when its value is empty.
      * If set to `false` the input receives the {@link required} rule. Default is `false`.
@@ -45,6 +50,11 @@ export declare const nValInputProps: {
      * A slot to replace the input.
      */
     readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    readonly disableValidation: BooleanConstructor;
     /**
      * If set to `true` this input is always valid when its value is empty.
      * If set to `false` the input receives the {@link required} rule. Default is `false`.
@@ -113,7 +123,10 @@ export declare const nValInputProps: {
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
-    readonly onBlur: 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 value: PropType<string>;
     readonly onUpdateValue: PropType<(newValue: string) => void>;
 };
@@ -143,6 +156,11 @@ declare const Component: import("vue").DefineComponent<{
      * A slot to replace the input.
      */
     readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    readonly disableValidation: BooleanConstructor;
     /**
      * If set to `true` this input is always valid when its value is empty.
      * If set to `false` the input receives the {@link required} rule. Default is `false`.
@@ -211,7 +229,10 @@ declare const Component: import("vue").DefineComponent<{
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
-    readonly onBlur: 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 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<{
@@ -219,6 +240,11 @@ declare const Component: import("vue").DefineComponent<{
      * A slot to replace the input.
      */
     readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    readonly disableValidation: BooleanConstructor;
     /**
      * If set to `true` this input is always valid when its value is empty.
      * If set to `false` the input receives the {@link required} rule. Default is `false`.
@@ -287,7 +313,10 @@ declare const Component: import("vue").DefineComponent<{
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
-    readonly onBlur: 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 value: PropType<string>;
     readonly onUpdateValue: PropType<(newValue: string) => void>;
 }>> & {}, {
@@ -301,6 +330,7 @@ declare const Component: import("vue").DefineComponent<{
     readonly error: boolean;
     readonly autocomplete: string;
     readonly hideLabel: boolean;
+    readonly disableValidation: boolean;
     readonly optional: boolean;
     readonly rules: ValidationRule | ValidationRule[];
     readonly hideErrorMessage: boolean;

package/components/NValInput.js

@@ -3,8 +3,13 @@ import { createComponentWithSlots } from '../utils/component';
 import { computed } from 'vue';
 import { ref, reactive, watch } from 'vue';
 import NInput, { nInputProps } from './NInput';
-import { validate, required } from '../utils/validation';
+import { validate, required, validResult } from '../utils/validation';
 export const validationProps = {
+  /**
+   * If set to `true` this inputs validation will always succeed and all validation
+   * rules are ignored. Default is `false`.
+   */
+  disableValidation: Boolean,
   /**
    * If set to `true` this input is always valid when its value is empty.
    * If set to `false` the input receives the {@link required} rule. Default is `false`.
@@ -60,7 +65,7 @@ const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'
   });
   const validationResult = ref();
   const validateRules = input => {
-    const result = validate(input, rules.value);
+    const result = props.disableValidation ? validResult() : validate(input, rules.value);
     validationResult.value = result;
     return result;
   };
@@ -72,6 +77,7 @@ const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'
   };
   watch(() => props.value, () => validateIfError());
   watch(() => rules.value, () => validateIfError());
+  watch(() => props.disableValidation, () => validateIfError());
   const onBlur = () => {
     if (!props.disableBlurValidation) validateRules(props.value);
     props.onBlur?.();

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