Brunobkr/llama.cpp_AlgMor24_github

1https://github.com/wobsoriano/svelte-sonner/assets/13049130/4b9c250f-1431-4130-9c5b-5a4f8b0210c52 3# svelte-sonner4 5[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)6 7An opinionated toast component for Svelte. A port of Emil Kowalski's [Sonner](https://sonner.emilkowal.ski/).8 9## Quick start10 11Install it:12 13```bash14npm i svelte-sonner15# or16yarn add svelte-sonner17# or18pnpm add svelte-sonner19```20 21Add `<Toaster />` to your app, it will be the place where all your toasts will be rendered. After that, you can use `toast()` from anywhere in your app.22 23```svelte24<script>25	import { Toaster, toast } from 'svelte-sonner';26</script>27 28<Toaster />29<button onclick={() => toast('My first toast')}>Give me a toast</button>30```31 32## Types33 34### Default35 36Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.37 38```js39toast('Event has been created');40```41 42With custom icon and description:43 44```js45import Icon from './Icon.svelte';46 47toast('Event has been created', {48	description: 'Monday, January 3rd at 6:00pm',49	icon: Icon50});51```52 53### Success54 55Renders a checkmark icon in front of the message.56 57```js58toast.success('Event has been created');59```60 61### Info62 63Renders a question mark icon in front of the message.64 65```js66toast.info('Event has new information');67```68 69### Warning70 71Renders a warning icon in front of the message.72 73```js74toast.warning('Event has warning');75```76 77### Error78 79Renders an error icon in front of the message.80 81```js82toast.error('Event has not been created');83```84 85### Action86 87Renders a button.88 89```js90toast('Event has been created', {91	action: {92		label: 'Undo',93		onClick: () => console.log('Undo')94	}95});96```97 98### Promise99 100Starts in a loading state and will update automatically after the promise resolves or fails.101 102```js103toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {104	loading: 'Loading',105	success: 'Success',106	error: 'Error'107});108```109 110You can pass a function to the success/error messages to incorporate the result/error of the promise.111 112```js113toast.promise(promise, {114	loading: 'Loading...',115	success: (data) => {116		return `${data.name} has been added!`;117	},118	error: 'Error'119});120```121 122### Custom Component123 124You can pass a component as the first argument instead of a string to render custom component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.125 126```js127toast(CustomComponent);128```129 130### Updating a toast131 132You can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.133 134```js135const toastId = toast('Sonner');136 137toast.success('Toast has been updated', {138	id: toastId139});140```141 142## Customization143 144### Headless145 146You can use `toast.custom` to render an unstyled toast with custom component while maintaining the functionality.147 148```svelte149<script>150	import { createEventDispatcher } from 'svelte';151 152	const dispatch = createEventDispatcher();153</script>154 155<div>156	This is a custom component <button onclick={() => dispatch('closeToast')}>close</button>157</div>158```159 160```js161import HeadlessToast from './HeadlessToast.svelte';162 163toast.custom(HeadlessToast);164```165 166### Theme167 168You can change the theme using the `theme` prop. Default theme is light.169 170```svelte171<Toaster theme="dark" />172```173 174### Position175 176You can change the position through the `position` prop on the `<Toaster />` component. Default is `bottom-right`.177 178```svelte179<!-- Available positions -->180<!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->181 182<Toaster position="top-center" />183```184 185### Expanded186 187Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.188 189```svelte190<Toaster expand visibleToasts={9} />191```192 193### Styling194 195Styling can be done globally via `toastOptions`, this way every toast will have the same styling.196 197```svelte198<Toaster199	toastOptions={{200		style: 'background: red;',201		class: 'my-toast',202		descriptionClass: 'my-toast-description'203	}}204/>205```206 207You can also use the same props when calling `toast` to style a specific toast.208 209```js210toast('Event has been created', {211	style: 'background: red;',212	class: 'my-toast',213	descriptionClass: 'my-toast-description'214});215```216 217### Tailwind CSS218 219The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.220 221```svelte222<Toaster223	toastOptions={{224		unstyled: true,225		classes: {226			toast: 'bg-blue-400',227			title: 'text-red-400',228			description: 'text-red-400',229			actionButton: 'bg-zinc-400',230			cancelButton: 'bg-orange-400',231			closeButton: 'bg-lime-400'232		}233	}}234/>235```236 237You can do the same when calling `toast()`.238 239```js240toast('Hello World', {241	unstyled: true,242	classes: {243		toast: 'bg-blue-400',244		title: 'text-red-400 text-2xl',245		description: 'text-red-400',246		actionButton: 'bg-zinc-400',247		cancelButton: 'bg-orange-400',248		closeButton: 'bg-lime-400'249	}250});251```252 253Styling per toast type is also possible.254 255```svelte256<Toaster257	toastOptions={{258		unstyled: true,259		classes: {260			error: 'bg-red-400',261			success: 'text-green-400',262			warning: 'text-yellow-400',263			info: 'bg-blue-400'264		}265	}}266/>267```268 269### Changing Icon270 271You can change the default icons using snippets:272 273```svelte274<Toaster>275	{#snippet loadingIcon()}276		<LoadingIcon />277	{/snippet}278	{#snippet successIcon()}279		<SuccessIcon />280	{/snippet}281	{#snippet errorIcon()}282		<ErrorIcon />283	{/snippet}284	{#snippet infoIcon()}285		<InfoIcon />286	{/snippet}287	{#snippet warningIcon()}288		<WarningIcon />289	{/snippet}290</Toaster>291```292 293### Close button294 295Add a close button to all toasts that shows on hover by adding the `closeButton` prop.296 297```svelte298<Toaster closeButton />299```300 301### Rich colors302 303You can make error and success state more colorful by adding the `richColors` prop.304 305```svelte306<Toaster richColors />307```308 309### Custom offset310 311Offset from the edges of the screen.312 313```svelte314<Toaster offset="80px" />315```316 317### Programmatically remove toast318 319To remove a toast programmatically use `toast.dismiss(id)`. The `toast()` function returns the id of the toast.320 321```js322const toastId = toast('Event has been created');323 324toast.dismiss(toastId);325```326 327You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.328 329```js330toast.dismiss();331```332 333### `useSonner`334 335You can use the `useSonner` hook to retrieve all visible toasts like below.336 337```ts338const sonner = useSonner();339 340$effect(() => console.log(sonner.toasts));341```342 343### Duration344 345You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:346 347```svelte348<Toaster duration={10000} />349```350 351```js352toast('Event has been created', {353	duration: 10000354});355 356// Persisent toast357toast('Event has been created', {358	duration: Number.POSITIVE_INFINITY359});360```361 362### On Close Callback363 364You can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).365 366```js367toast('Event has been created', {368	onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),369	onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`)370});371```372 373## Keyboard focus374 375You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of `event.code` values for each key.376 377```svelte378<Toaster hotkey={['KeyC']} />379```380 381## License382 383MIT384