loon-bulma-react 2022.3.3 → 2022.3.4

package/README.md

@@ -1162,7 +1162,31 @@ De library bevat componenten om als losse inputs, selects, ranges of checkboxes
 
 ### Input Types<a id="form-input"></a>
 
-Er zijn verschillende soorten inputs voor de afhandeling van input-types.
+Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zijn een aantal props die op alle inputs voorkomen:
+
+- `name`: input name voor in een form
+- `id`: id van de input
+- `label`: label-tekst voor een input, voor als dat afwijkt van de `name`-prop
+- `labelHidden`: boolean, verbergt het label als die alleen voor screenreaders beschikbaar moet zijn.
+- `placeholder`: placeholder-tekst voor een input.
+- `tooltip`: tooltip voor een input (`<input title="..." />`)
+- `disabled`: input disabled
+- `validatie`: een object met wat standaard-validatie-opties en een onValidate-function input
+  - `required`: input is verplicht
+  - `max`: maximale waarde
+    - text: input max length
+    - numeric: max value
+    - date: max datum
+  - `min`: minimale waarde
+    - text: input min length
+    - numeric: min value
+    - date: min datum
+  - `minDiff`: voor multirange: minimale verschil tussen de twee waarden
+  - `maxDiff`: voor multirange: maximale verschil tussen de twee waarden
+  - `pattern`: een patroon voor string-validatie (mag een string of een Regexp zijn)
+  - `onValidate()`: een eigen function opgeven voor validatie
+- `keyboardType`: wat voor toetsenbord moet er op een smartphone of tablet gebruikt worden
+- `direction`: orientatie van de input (horizontaal of vertical, default = 'horizontal')
 
 - Tekst:
   - **TextInput:** invoeren van tekst, urls, etc.
@@ -1194,7 +1218,7 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types.
 
   <NumberInput name="NumberInput" id="numberinput" validatie={{required: true, min:-10, max: 10}}/>
 
-  <ColorInput name="ColorInput" id="colorinput" value="#ff8000">
+  <ColorInput name="ColorInput" id="colorinput" value="#ff8000" direction="vertical">
 
   <HiddenInput name="HiddenInput" value="bazinga!" id="hiddenInput" required={true}/>
 

package/dist/components/Form/Base.Input.Container.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { DirectionProp, SizeProp } from '../../loon-react-bulma-types';
 /** een wrapper voor een input component, om te zorgen dat ze allemaal op dezelfde manier horizontaal of verticaal aligned worden. */
 export declare const InputContainer: ({ label, children: input, error, size, direction, }: {
-    label: React.ReactNode;
+    label?: {
+        txt: string;
+        id: string;
+    } | undefined;
     children: React.ReactNode;
     error?: React.ReactNode;
     size?: "s" | "l" | "m" | "xl" | undefined;

package/dist/components/Form/BaseInputProps.d.ts

@@ -4,8 +4,8 @@ export declare type BaseInputProps = {
     disabled?: boolean;
     /** name input: gebruikt voor een <label> als er geen label gedefinieerd is & de name-attribuut <input> */
     name: string;
-    /** id voor de input: gebruikt voor een <label for="*id*}"> */
-    id: string;
+    /** id voor de input: gebruikt voor een <label for="*id*}">. default wordt anders de 'name'-prop gebruik */
+    id?: string;
     /** een tooltip voor de button */
     tooltip?: string;
     /**  label voor de input, als dat afwijkt van de name-attribuut */
@@ -81,3 +81,4 @@ export declare type BaseFocusStateType = {
     type: 'FOCUS';
     focus: boolean;
 };
+export declare type InputTypeProp = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | 'search' | 'multirange' | 'multiselect' | 'select' | 'textarea';

package/dist/components/Form/Form.d.ts

@@ -1,9 +1,69 @@
-/// <reference types="react" />
-import { FormProps } from './FormProps';
-/**
- * stel een form samen op basis van een array van fields, met een submit-button en optionele extra buttons.
- * Kan ook in een modal getoont worden.
- * @param props
- * @returns een object voor POST requests OF een URLPARAMS string voor GET requests
- */
-export declare function Form(props: FormProps): JSX.Element;
+import { DirectionProp, SizeProp } from '../../loon-react-bulma-types';
+import React from 'react';
+declare type FormProps = {
+    /** de inputs voor dit form */
+    children: React.ReactNode;
+    /** form attribuut <form action="..." > */
+    action?: string;
+    /** form attribuut <form name="..." > */
+    name?: string;
+    /** form attribuut <form method="..." > */
+    method?: 'post' | 'get';
+    /** form attribuut <form target="..." > */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** form onsubmit handler */
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    /** size voor alle form-elementen (default = 'm') */
+    size?: SizeProp;
+    /** form attribuut <form autocomplete="..." >. */
+    autocomplete?: 'on' | 'off';
+    /** direction voor form-elementen (horizontaal (1 lijn, default) of vertical (label boven, input onder)) */
+    direction?: DirectionProp;
+    /** form attribuut <form novalidate="..." > */
+    novalidate?: boolean;
+    /** extra classnames voor de form */
+    className?: string;
+};
+declare const Form: {
+    (props: FormProps): JSX.Element;
+    /** een zelf-configureerbare base input */
+    Input: (props: import("./Others/BasicInput").BasicInputProps) => JSX.Element;
+    /** input voor type url, text of tel */
+    Text: (props: import("./Text/TextInput").TextInputProps) => JSX.Element;
+    /** password input */
+    Password: (props: import("./Text/PasswordInput").PasswordInputProps) => JSX.Element;
+    /** email input */
+    Email: (props: import("./Text/EmailInput").EmailInputProps) => JSX.Element;
+    /** text area input */
+    TextArea: (props: import("./Text/TextArea").TextAreaProps) => JSX.Element;
+    /** select input */
+    Select: (props: import("./Selects/Select").SelectInputProps) => JSX.Element;
+    /** multi-select input */
+    MultiSelect: (props: import("./Selects/MultiSelect").MultiSelectInputProps) => JSX.Element;
+    /** color input */
+    Color: (props: import("./Others/ColorInput").ColorInputProps) => JSX.Element;
+    /** hidden input */
+    Hidden: (props: import("./Others/HiddenInput").HiddenInputProps) => JSX.Element;
+    /** number input */
+    Number: (props: import("./Numeric/NumberInput").NumberInputProps) => JSX.Element;
+    /** range input (als a number input) */
+    Range: (props: import("./Numeric/RangeInput").RangeInputProps) => JSX.Element;
+    /** multi-range input (2 numbers) */
+    MultiRange: (props: import("./Numeric/MultiRangeInput").MultiRangeInputProps) => JSX.Element;
+    /** input for dates */
+    Date: (props: import("./Datetimes/DateInput").DateInputProps) => JSX.Element;
+    /** input for date & time combinations */
+    DateTime: (props: import("./Datetimes/DateTimeInput").DateTimeInputProps) => JSX.Element;
+    /** time input */
+    Time: (props: import("./Datetimes/TimeInput").TimeInputProps) => JSX.Element;
+    /** checkbox input */
+    CheckBox: (props: import("./Checkbox/Checkbox").CheckboxInputProps) => JSX.Element;
+    /** Plaats 2 of meer inputs op een lijn
+     * LET OP: je moet zelf instellen of ze horizontaal / verticaal moeten zijn (default = horizontal)
+     */
+    Line: (props: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+};
+export { Form };
+export type { FormProps };

package/dist/components/Form/FormBuilder.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FormBuilderProps } from './FormBuilderProps';
+/**
+ * stel een form samen op basis van een array van fields, met een submit-button en optionele extra buttons.
+ * Kan ook in een modal getoont worden.
+ * @param props
+ * @returns een object voor POST requests OF een URLPARAMS string voor GET requests
+ */
+export declare function FormBuilder(props: FormBuilderProps): JSX.Element;

package/dist/components/Form/FormBuilderProps.d.ts

@@ -0,0 +1,92 @@
+import { ColorProp, DirectionProp } from '../../loon-react-bulma-types';
+import { FormValidationType } from './BaseInputProps';
+import { SelectOptionType, SelectOptionGroupType } from './Selects/BaseSelectProps';
+/** Props voor de Form-component */
+export declare type FormBuilderProps = {
+    /** definieer een onSubmit voor het form
+     * <form onSubmit="onSubmit(e)"
+     * @param e: data
+     * @returns: het resultaat van het form: GET: URLSearchParams string, POST: key-values van fields
+     */
+    onSubmit(e: any | undefined): void;
+    /** Moet het form in een modal verschijnen */
+    useModal?: boolean;
+    /** wat te doen om de modal te sluiten. ALLEEN ALS useModal 'true' IS, IS DEZE NODIG */
+    onDismiss?(e: any): void;
+    /** buttons voor onderaan het form */
+    buttons: {
+        /** de tekst voor de (groene) submit button, deze is VERPLICHT */
+        submit: string;
+        /** 0 of emerdere (blauw) buttons */
+        other?: FormBuilderButton[];
+    };
+    /** Een array van fields voor het form */
+    fields: FormBuilderFieldProps[];
+    /** autocomplete on or off? */
+    autocomplete?: 'on' | 'off' | null;
+    /** de form name */
+    name: string;
+    /** de GET / POST methode voor het form
+     * <form method="get"></form>
+     */
+    method: 'post' | 'get';
+    /** target voor het form */
+    target?: '_self' | '_blank' | '_parent' | '_top' | null;
+    direction?: DirectionProp;
+};
+/** Props voor de fields in een form van de Form-Component */
+export declare type FormBuilderFieldProps = {
+    /** de naam voor het field. gebruikt in input en  in <label> als geen label gedefinieerd.
+     * <input name="..." /> */
+    name: string;
+    /** een tooltip voor de button */
+    tooltip?: string;
+    /** label voor het field, als die afwijkt van de name-attribuut. gebruikt in <label> (optional) */
+    label?: string;
+    /** is het field gevalideerd en wat is daar de uitkomst van. */
+    placeholder?: string;
+    /** (optioneel) id van een field. Anders wordt de "name" gebruikt  */
+    id?: string;
+    valid?: boolean;
+    /** de waarde van de input.
+     * Voor multi-range-inputs: een number[] van twee waarden: [valueA, valueB]
+     * Voor Datum/Tijd inputs:
+     * - type 'date': YYYY-MM-DD
+     * - type 'time': HH:mm
+     * - type 'datetime': YYYY-MM-DD HH:mm OF YYYY-MM-DDTHH:mm
+     */
+    value?: string | string[] | number | number[] | boolean | null;
+    /** object gebruikt voot validatie */
+    validation?: FormValidationType;
+    /** input type: <input type="..." /> */
+    type: 'text' | 'number' | 'email' | 'password' | 'date' | 'datetime' | 'time' | 'textarea' | 'select' | 'multiselect' | 'checkbox' | 'tel' | 'url' | 'range' | 'multirange' | 'hidden';
+    /** voor type 'number', 'time', 'range' en 'multirange' kan er een step-grootte worden opgegeven */
+    step?: number;
+    /** autocomplete voor gebruik met wachtwoorden, usernames & wachtwoordmanagers */
+    autocomplete?: 'on' | 'off' | 'current-password' | 'new-password' | 'username' | undefined;
+    /** voor een <select> input: welke options moeten er zijn */
+    selectOptions?: string[] | SelectOptionType[] | SelectOptionGroupType[];
+};
+/** Props voor het Button-object van de Form-component */
+export declare type FormBuilderButton = {
+    /** tekst op de button */
+    txt: string;
+    /** moet de formdata gevalideert zijn voor je de button kan gebruiken? */
+    mustValidate?: boolean;
+    /** button type <button type="..." */
+    type: 'submit' | 'reset' | 'button';
+    /** button color: s: success-button, d: danger-button, n: primarycolor button */
+    color?: ColorProp;
+    /** wat als er op de button geklikt wordt? (optional) */
+    onClick(e: MouseEvent): any | void;
+};
+export declare type ChangedValue = {
+    /** nieuwe waarde */
+    new: number | number[] | string | string[] | boolean | null | undefined;
+    /** oude waarde */
+    old: number | number[] | string | string[] | boolean | null | undefined;
+    /** is de waarde valid */
+    valid: boolean;
+    /** wat is de naam van het gewijzigde field */
+    name: string;
+};

package/dist/components/Form/Others/BasicInput.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { SizeProp } from '../../../loon-react-bulma-types';
+import { BaseInputProps, InputTypeProp } from '../BaseInputProps';
+declare type BasicInputProps = BaseInputProps & {
+    icon?: string | IconProp | any;
+    /** type van de tekst input (default = 'text') */
+    type?: InputTypeProp;
+    /** start value voor deze input (optioneel) */
+    value?: string;
+    /** speciaal voor password-managers. Wat is de functie van deze input */
+    autocomplete?: 'on' | 'off' | 'current-password' | 'new-password' | 'username' | 'given-name' | 'additional-name' | 'family-name' | 'nickname' | 'email' | 'name' | 'one-time-code' | 'organization' | 'street-address' | 'tel' | 'bday' | 'language' | 'country' | 'postal-code' | string;
+    /** grootte input (optioneel) */
+    size?: SizeProp;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+};
+/**
+ * Maak een input van een tekst-type met optionele validation.
+ * @param props
+ * @returns <input type="text'|'tel'|'url">
+ */
+declare const BasicInput: (props: BasicInputProps) => JSX.Element;
+export { BasicInput };
+export type { BasicInputProps };

package/dist/components/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ReactNode } from 'react';
 import { ColorProp, SizeProp } from '../../loon-react-bulma-types';
 declare type IconProps = {
@@ -5,7 +6,7 @@ declare type IconProps = {
      * - string: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.
      * - any: geef een react IconProp object door.
      */
-    icon: string | any;
+    icon: string | IconProp;
     /** de icon-grootte */
     size?: SizeProp;
     /** de kleur voor het icoon */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { SizeProp, AlignmentProp } from './loon-react-bulma-types';
+export type { SizeProp, AlignmentProp, DirectionProp } from './loon-react-bulma-types';
 export { AspectRatio } from './components/Layout/AspectRatio/AspectRatio';
 export type { AspectRatioProps } from './components/Layout/AspectRatio/AspectRatio';
 export { Box } from './components/Layout/Box/Box';
@@ -45,8 +45,10 @@ export type { ButtonProps } from './components/Button/ButtonProps';
 export { Button } from './components/Button/Button';
 export { Link, LinkButton } from './components/Link/Link';
 export type { LinkProps, LinkButtonProps } from './components/Link/Link';
-export * from './components/Form/Form';
-export type { FormProps, FormFieldProps, FormButton } from './components/Form/FormProps';
+export { Form } from './components/Form/Form';
+export type { FormProps } from './components/Form/Form';
+export { FormBuilder } from './components/Form/FormBuilder';
+export type { FormBuilderProps, FormBuilderFieldProps, FormBuilderButton } from './components/Form/FormBuilderProps';
 export { CheckBox } from './components/Form/Checkbox/Checkbox';
 export type { CheckboxInputProps } from './components/Form/Checkbox/Checkbox';
 export type { SelectOptionGroupType, SelectOptionType } from './components/Form/Selects/BaseSelectProps';
@@ -58,6 +60,8 @@ export { ColorInput } from './components/Form/Others/ColorInput';
 export type { ColorInputProps } from './components/Form/Others/ColorInput';
 export { HiddenInput } from './components/Form/Others/HiddenInput';
 export type { HiddenInputProps } from './components/Form/Others/HiddenInput';
+export { BasicInput } from './components/Form/Others/BasicInput';
+export type { BasicInputProps } from './components/Form/Others/BasicInput';
 export { EmailInput } from './components/Form/Text/EmailInput';
 export type { EmailInputProps } from './components/Form/Text/EmailInput';
 export { PasswordInput } from './components/Form/Text/PasswordInput';