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

yarn add @livinglogic-components/inputs

Usage

jsx

import one or more components component

// 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

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

// 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

// 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

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.