Sam's Svelte Components

• Address Autocompletion
• DataTable
• TreeMap

The components code can be found in

Demo

Find a demo on Vercel.

Integration

Probably you just want to copy the the svelte component file from src/lib/components, create your own version and import it as follows:

import AddressInput from '$lib/components/AddressInput.svelte'

Or, if you want to install the library, you can do so using npm and then import it.

npm install @samhess/svelte-components

import {AddressInput, DataTable, Treemap} from '@samhess/svelte-components'

Usage

Address Autocompletion

<script lang="ts">
  import {AddressInput} from '@samhess/svelte-components'

  let {data} = $props()
  let {mapbox} = $derived(data)

  type Address = {
    postcode?: string | number
    city?: string
    state?: string
    country?: string
  }

  const {data} = $props()

  let address: Address = $state({})
</script>

<form>
  <label
    >Street
    <AddressInput mapboxOptions="{data.mapbox}" dispatch="{(results:" Address)="">
      Object.assign(address, results)} ></AddressInput
    >
  </label>
</form>

DataTable

<script lang="ts">
  import DataTable from '$lib/components/DataTable.svelte'
  import {invalidateAll} from '$app/navigation'

  let {data} = $props()
  let {entity, records} = $derived(data)
</script>
<article class="prose">
  <h1>Tables</h1>
  <h2>DataTable</h2>
  <p>
    This is a sortable (click on column in table header) and optionally editable (double click on
    table row) data table.
  </p>
  <DataTable {entity} {records}>
    {#snippet tbody(records: any)} {#each records as record}
    <tr>
      <td>{record.code}</td>
      <td>{record.name}</td>
      <td>{record.region}</td>
      <td>{record.Currency.name} ({record.currency})</td>
      {#if entity.isEditable} {@render editRecord(entity.key, {code: record.code})} {/if}
    </tr>
    {/each} {/snippet}
  </DataTable>
</article>

TreeMap

<script lang="ts">
  import {Treemap} from '@samhess/svelte-components'
  const data = [
    {
      name: 'GOOG',
      marketCap: 200,
      performance1d: 2,
      type: 'stock'
    }
  ]
  const evaluation = 'performance1d'
  const structure = 'marketCap'
  const grouping = ['type', 'name']
</script>
<article class="prose">
  <h1>Charts</h1>
  <h2>TreeMap</h2>
  <Treemap {data} {structure} {grouping} {evaluation}> </Treemap>
</article>