Self updating Contact Card

Want to edit edit your data? Just make it ContactCard!

<script>
    import { Peerpiper } from '@peerpiper/awesome-peerpiper-components';

    export let name = 'First Last Names';
   	export let address = '123 Main Street USA';
	export let email = 'coolbeaner@hotmail.com';
	export let notes = 'Some extra notes here';

</script>


<Peerpiper.ContactCard slot="example" {profile} on:change={e=>console.log(e.detail)} >

<!-- Set address to read only, cannot edit "Pro" version is used -->
<span slot="address">
{profile.address} (Read Only)
</span>

</Peerpiper.ContactCard>

Notes

If you want to be able to edit the property then pass the variable in as a prop.

If you want to use this component to display data only, then use read-only modeby using slotted Content instead of props.

When used with the Gateway, do not assign any action to on:change

Contact List

Want to add Contacts? Just add them to ContactList!

Notes

If you want to be able to edit the property then pass the variable in as a prop.

If you want to use this component to display data only, then use read-only modeby using slotted Content instead of props.

When used with the Gateway, do not assign any action to on:change

Manage Multiple Compiled Components

Want to edit edit your data? Just make it TagManager!

<script>
    // import TagManager from './TagManager.svelte';
    import { Peerpiper } from '@peerpiper/awesome-peerpiper-components';
	let esModule =
		'https://raw.githubusercontent.com/PeerPiper/awesome-peerpiper-components/master/compiled/%40peerpiper/ContactCard.svelte.js';

	export let params = [
		{esModule, props:{profile:{"firstName":"Doug","lastName":"Anders"}}},
		{esModule, props:{profile:{"firstName":"Joe","lastName":"Smith"}}},
	]

</script>

<Peerpiper.TagManager slot="example" {params} on:change={e=>console.log(e.detail)} >
</Peerpiper.TagManager>

Notes

If you want to be able to edit the property then pass the variable in as a prop.

If you want to use this component to display data only, then use read-only modeby using slotted Content instead of props.

When used with the Gateway, do not assign any action to on:change