@livinglogic-components/inputs v0.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
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>
)
}
}
})
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.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago