open-index/open-npm huggingface dataset:
npm package: @samhess/svelte-components
Description: - [Address Autocompletion](src/routes/components/forms) - [DataTable](src/routes/components/tables) - [TreeMap](src/routes/components/charts)
Latest version: 0.5.0

# Sam's Svelte Components

- [Address Autocompletion](src/routes/components/forms)
- [DataTable](src/routes/components/tables)
- [TreeMap](src/routes/components/charts)

The components code can be found in

## Demo

Find a [demo](https://svelte-components-black.vercel.app) on Vercel.

## Integration

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

```js
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.

```bash
npm install @samhess/svelte-components
```

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

## Usage

### Address Autocompletion

```html
<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

```html
<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

```html
<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>
```
npm package: @samhou1988/vue-carousel
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.0.2

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @samhren/svelte-dropdown
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Latest version: 0.0.3

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte

# create a new project in my-app
npm init svelte my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.