npm package: @livinglogic-components/inputs
Description: Ionic UI Components for inputs.
Author: milleniumfrog
Latest version: 0.0.1-alpha.5

# LivingApps Input Components

Ionic UI Components for inputs.

This Library unifies the input events and packs errorhandling, labels,
inputelements in one element.

## Installation

install the library
```bash
yarn add @livinglogic-components/inputs
```

## Usage
### jsx

import one or more components component

```typescript
// import all components
import LLBool from '@livinglogic-components/inputs/dist/bool';
import LLDate from '@livinglogic-components/inputs/dist/date';
import LLFile from '@livinglogic-components/inputs/dist/file';
import LLLookup from '@livinglogic-components/inputs/dist/lookup';
import LLNumber from '@livinglogic-components/inputs/dist/number';
import LLText from '@livinglogic-components/inputs/dist/text';
import LLTextarea from '@livinglogic-components/inputs/dist/textarea';
import LLSig from '@livinglogic-components/inputs/dist/signature';
```

use them in jsx

```typescript
defineComponent({
  setup() {
    return () => (
      <ion-list>
        <LLBool label='boolean' />
      </ion-list>
    )
  }
})
```

## Props:
handling Properties requires you to know if the prop should change.
If it should change it has to be an reference, if it should be constant
it should not be an reference.
See more to vue3 reactifity: [composition api](https://composition-api.vuejs.org/)

```typescript
// render constant
...
<LLBool value={true} /> // shows a ticked boolean input
...
// variables
const boolRef = ref(true);
// render variable with boolRef.value = true
...
<LLBool value={boolRef} /> // shows a ticked boolean input
...
// change ref value
boolRef.value = false;
// render variable with boolRef.value = true
...
<LLBool value={boolRef} /> // shows a unticked boolean input
...
```
This feature is important for resetting input fields.

You can find the props for each component in the matching 
declaration file.

## Usage with inputmanager

A huge advantage of using this input components is that you can use
the input manager, a provider which collects the inputs, reset input
values, stores error messages and sends data to LivingApps.

a small example

```tsx
// import the componoent
import LLDate from '@livinglogic-components/inputs/dist/date';
// import the input manager
import Manager from '@livinglogic-components/inputmanager';
// import all apollo dependencies
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { createUploadLink } from 'apollo-upload-client';
// import vue
import { defineComponent } from 'vue';
// a jsx helper function
import { h } from './__ultils/jsx';

export default defineComponent({
  setup() {
    // create GraphQL client
    const client = new ApolloClient({
      cache: new InMemoryCache({}),
      link: createUploadLink({
        uri: 'https://graphql-gateway-la-prod.xist4c.io/'
      }),
    })

    const manager = new Manager({
      // register all fields the manager should handle
      setup: [
        // [la field identifier, la field type, defaultvalue?]
        ['datum', 'date', new Date().toISOString()],
      ],
      // set GraphQL client
      client
    });

    return () => {
      return (
        <ion-list>
          <ion-item>
            {/* reset the form after pressing reset button */}
            <ion-button
              onClick={() => manager.reset()}
            >reset</ion-button>
            {/* submit when clicking here */}
            <ion-button
              onClick={() => manager.submit(
                '0000000',
                undefined,
                {}
              )}
            >submit</ion-button>
          </ion-item>
          {/*
            sets the label to Datum
            the manager listens to the llChange Event and stores
            all inputdata in the manager so it can use the data
            for submitting
            the component uses a ref to the value of datum, very
            usefull for resetting the form
          */}
          <LLDate 
            label='Datum'
            onllChange={manager.listen('datum')}
            value={manager.getValueRef('datum')}
          />
        </ion-list>
      )
    }
  }
}) 

```

[a bigger example](https://gitlab.livinglogic.de/livingapps/pwa/wartungsliste-richter)

As you can see there is not a lot of logic behind it, so it should be very
easy to create apps with the inputs and the inputmanager.