@theofficialurban/svelte-utils
v1.3.2
Published
A compilation of useful components and other utilities. This package is intended for myself and not really intended to be anything concrete, I will be happy to fix anything or even take some requests if asked.
Downloads
4
Readme
A compilation of useful components and other utilities. This package is intended for myself and not really intended to be anything concrete, I will be happy to fix anything or even take some requests if asked.
Components & Utilities
ConfirmationButton
- A barebones confirmation buttonForm
Component - A Form WrapperTable
Component - Table component
Table Component
Props
rows: T[]
- Table Rowsextends Record<string,unknown>
columns: TableColumn<T>
- Table Columns
Snippets
cell: Snippet<{row: T, column: TableColumn<T>}>
- A snippet for each cellcols: Snippet<TableColumn<T>>
- Snippet for each headerlabel: Snippet<null>
- Label for the table
Slots
thead
- Table Head getscolumns
passeddefault
- Table Bodytfoot
- Table Footer
<script lang="ts">
import { Table } from '@theofficialurban/svelte-utils';
import type { TableColumn } from '@theofficialurban/svelte-utils';
// Rows can have any Record<string, unknown> Shape
type Row = { name: string; city: string };
const rows: Row[] = [
{ name: 'Josh', city: 'Los Angeles' },
{ name: 'Dave', city: 'Portland' }
];
const columns: TableColumn<Row>[] = [
// Column #1 'Name' for 'name' key
{ title: 'Name', key: 'name' },
// Column #2 'City' for 'city' key
{ title: 'City', key: 'city' }
];
</script>
<!-- Then just pass these to the component -->
<Table {rows} {columns}>
<!-- Data Object = {row: Row, column: Column} -->
{#snippet cell({row, column}: {row: Row, column: TableColumn<Row>})}
<td>{row[column.key]}</td>
{/snippet}
<!-- Column gets passed the 'Column' object -->
{#snippet cols(col: TableColumn<Row>)}
<th>{col.title}</th>
{/snippet}
</Table>
Form Component
A simple wrapper for async forms with Svelte's built in use:enhance
Components:
Body
- Form BodyControl
- Input ControlInput
- A form inputSelect
- Form SelectTextarea
- Form Textarea
import Form from '@theofficialurban/svelte-utils';
Form.Body
Top Level Wrapper
Props extends HTMLFormAttributes
:
form?: ActionResult | null
- Theform
return from page props foruse:enhance
submitFn?: SubmitFunction | undefined
- A custom function to be passed touse:enhance={submitFn}
Slots:
title
- Form Title Slotdefault
- Inside slot for the formsubmit
- Submit Button Slot
Example
<Form.Body method="POST" action="/" {form}>
<Form.Control>
<label slot="label">My Label</label>
<Form.Input name="inputName" id="inputId" />
</Form.Control>
<!-- Submit Button Added Automatically Unless Overwritten -->
</Form.Body>
Form.Control
A control for an input, includes a slot for a label
Props extends HTMLDivAttributes
:
- Extends Default HTMLDivAttributes
Slots:
label
- Label Slot
See Above Example
Form.Select
A form select input element
Props extends HTMLSelectAttributes
:
options: T[]
- Options,T extends Record<string,unknown>
displayKey: keyof T
- Key to displayvalueKey: keyof T
- Key for the option value No Slots
Example:
<script lang="ts">
import Form from '@theofficialurban/svelte-utils';
type Option = { name: string; city: string };
let options: Option[] = [{ name: 'Josh', city: 'Los Angeles' }];
</script>
<Form.Body ...>
<Form.Control>
<label slot="label">My Select</label>
<!-- Option #1 - Display: Josh, Value: Los Angeles -->
<Form.Select {options} displayKey="name" valueKey="city" />
</Form.Control>
</Form.Body>
Form.Input
Props extends HTMLInputAttributes
Example
<script lang="ts">
import Form from '@theofficialurban/svelte-utils';
</script>
<Form.Body ...>
<Form.Control>
<label slot="label">My Input</label>
<Form.Input name=".." id=".." placeholder=".." />
</Form.Control>
</Form.Body>
Form.Textarea
Props extends HTMLTextareaAttributes
toggleHTML?: boolean
- Toggleable HTML Preview
Slots
default
- Textareapreview
- HTML Preview
<script lang="ts">
import Form from '@theofficialurban/svelte-utils';
</script>
<Form.Body ...>
<Form.Control>
<label slot="label">My Input</label>
<Form.Textarea name=".." id=".." placeholder=".." />
</Form.Control>
</Form.Body>
GradientText
A simple Gradient Text Component
Props
element
- span
- h1
- h2
- h3
- p
- div
--size
=font-size
--weight
=font-weight
--from
--to
= Stop 1 and Stop 2--font
=font-family
<script lang="ts">
import { GradientText } from '@theofficialurban/svelte-utils';
</script>
<GradientText element="span" --from="red" --to="blue"> Hello World </GradientText>
ConfirmationButton
Types
type ClickEvent = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement };
type OnConfirm = (itemId: string, e: ClickEvent) => Promise<void> | void;
type OnDecline = (itemId: string, e: ClickEvent) => Promise<void> | void;
Props
onconfirm
- On Confirm Eventondecline
- On Decline Eventtext
- Prompt Text
Example
<script lang="ts">
import { ConfirmationButton } from '@theofficialurban/svelte-utils';
</script>
<ConfirmationButton text="Please Confirm"> Click Me </ConfirmationButton>
Typewriter Effect
import { typewriter } from '@theofficialurban/svelte-utils';
Float Effect
Parameters
options: TweenedOptions<number>
- Options for the tweenfloatDistance: number
= The distance for the bounce (usually -10 works)
Types
export type FloatEffect<T extends Element = Element> = (
options: TweenedOptions<number>,
floatDistance: number
) => FloatEffectReturn<T>;
export type FloatEffectReturn<T extends Element = Element> = {
effect: Action<T, number>;
store: Tweened<number>;
};
<script lang="ts">
import { useFloatingEffect } from '@theofficialurban/svelte-utils';
const { effect, store } = useFloatingEffect({ duration: 1000 }, -10);
</script>
<div use:effect="{$store}">Floating Effect</div>
SVGBounce
Properties
extends SVGAttributes
(width, height, etc..)springOpts?: SpringOpts
bounceDistance?: number
- PX translate for bounce effectcss?: CSSFunction
(node: SVGElement, bStore: Spring<number>, bVal: number) => string;
(Should return the style string)trigger?: [inEvent: string, outEvent: string]
(['pointerenter', 'pointerleave']
)
<script lang="ts">
import { SVGBounce } from '@theofficialurban/svelte-utils';
const cssFn = (n, s, v) => {
return `translate: translateY(${v}px);`;
};
</script>
<SVGBounce css="{cssFn}">
<path
transition:draw
stroke="blue"
stroke-width="{3}"
d="M807.7 951h-449V192L643.8 87l163.9 105z"
fill="#F7D4FF"
></path>
</SVGBounce>
Modal Async. Rendering Modal
Modal.Wrapper
Provides loading for a promise
Props
promise
- Promise to await
Slots
loading
- Loading
Modal.List
Props
modal
- An array (may require cast for TS)
Slots (Snippets)
children(item: T[])
<script lang="ts">
import { Modal } from '@theofficialurban/svelte-utils';
</script>
// Slot: loading // Value = Promise Awaited Return
<Modal.Wrapper {promise} let:value>
<span slot="loading">Loading....</span>
<Modal.List modal="{value" as ({name: string}[])}>
{#snippet children(item: {name: string})}
<li>{item.name}</li>
{/snippet}
</Modal.List>
</Modal.Wrapper>