Modal fixes

README.md

@@ -21,8 +21,8 @@ pnpm dev # Run dev server
 
 > Replace `ComponentName` with your component name in the steps below
 
-1. Create a `ComponentName.svelte` file in `package/components`
-2. Add an export for your component in [./package/index.ts](./package/index.ts)
+1. Create a `ComponentName.svelte` file in `src/components`
+2. Add an export for your component in [./src/index.ts](./src/index.ts)
    ```
    export { default as ComponentName } from './components/ComponentName.svelte'
    ```

docs/routes/components/ModalDeletion.md

@@ -3,7 +3,7 @@
 	import { ModalDeletion, Button } from 'omorphia'
 </script>
 
-<ModalDeletion type="account" key="venashial" let:trigger>
+<ModalDeletion type="account" key="venashial" let:trigger on:deletion={() => console.log('Do something...')}>
 	<Button slot="trigger" color="danger" on:click={trigger}>Delete account</Button>
 </ModalDeletion>
 ```

docs/routes/getting-started/utils.md

@@ -21,14 +21,16 @@ The `markdown` parser is designed for bodies of markdown text and supports image
   This is **some** *text*! \n\
   `console.log("test")` \n\
   #### An image \n\
-  <img src="https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png" />'
+  ![](https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png)'
 </script>
-
 <div class="card markdown">
 	{@html markdown(source)}
-</div>
-<div class="card markdown">
-	{@html markdown('test\n```js\nconsole.log("test")\n```')}
+  {@html markdown(
+` | Syntax      | Description |
+  | ----------- | ----------- |
+  | Header      | Title       |
+  | Paragraph   | Text        |`)}
+  {@html markdown('```js\nconsole.log("test")\n```')}
 </div>
 ````
 

src/components/Checkbox.svelte

@@ -33,8 +33,9 @@
 			gap: 0.5rem;
 
 			> :global(.icon) {
-				width: 1var (--unit-3);
-				margin-right: -0var (--unit-3);
+				/* Icon on checkbox helps to be a little larger than normal icons 16px -> 18px */
+				width: 18px;
+				margin-right: -2px;
 			}
 
 			&__box {

src/components/Modal.svelte

@@ -3,7 +3,6 @@
 	import Button from './Button.svelte'
 	import { classCombine } from '../utils/classCombine'
 	import IconX from 'virtual:icons/heroicons-outline/x'
-	import { t } from 'svelte-intl-precompile'
 
 	export let open = false
 
@@ -15,8 +14,11 @@
 	/** If enabled, clicking outside the modal with close it */
 	export let dismissable = true
 
+	export let data: Record<string, any> = {}
+
 	function close() {
 		open = false
+		data = {}
 	}
 
 	function trigger() {
@@ -48,7 +50,7 @@
 
 		<div class="modal__buttons">
 			<Button on:click={close}><IconX /> Cancel</Button>
-			<slot name="button" />
+			<slot name="button" {close} />
 		</div>
 	</div>
 {/if}

src/components/ModalDeletion.svelte

@@ -7,16 +7,19 @@
 	import IconTrash from 'virtual:icons/heroicons-outline/trash'
 	import { markdown } from '../utils'
 	import Field from './Field.svelte'
+	import { createEventDispatcher } from 'svelte'
 
 	export let key: string
 	export let type: 'project' | 'version' | 'account' | 'image'
 
 	export let open = false
 
-	let keyInput = ''
+	let data: { key?: string } = {}
+
+	const dispatch = createEventDispatcher()
 </script>
 
-<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger>
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger bind:data>
 	<slot slot="trigger" name="trigger" {trigger} />
 
 	{#if type === 'account' || 'project'}
@@ -28,11 +31,19 @@
 	<Field label={$t('modal.deletion.generic.verify', { values: { key } })} let:id>
 		<TextInput
 			placeholder={$t('modal.deletion.generic.placeholder', { values: { key } })}
-			bind:value={keyInput}
+			bind:value={data.key}
 			{id} />
 	</Field>
 
-	<Button color="danger" slot="button" disabled={key !== keyInput}>
+	<Button
+		color="danger"
+		slot="button"
+		disabled={key !== data.key}
+		let:close
+		on:click={() => {
+			dispatch('deletion')
+			close()
+		}}>
 		<IconTrash />
 		{$t(`modal.deletion.${type}.action`)}
 	</Button>

src/components/NavRow.svelte

@@ -68,7 +68,7 @@
 					content: '';
 					display: block;
 					position: absolute;
-					bottom: -0var (--unit-3);
+					bottom: -1px;
 					width: 100%;
 					border-radius: var(--rounded-max);
 					height: 0.25rem;

src/components/Select.svelte

@@ -11,7 +11,7 @@
 
 	export let options: Option[] = []
 	export let value: string | number
-	export let selected: Option
+	export let selected: Option | undefined
 	export let color = ''
 	export let label = ''
 	export let icon = null

src/components/TextInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SvelteComponent } from 'svelte'
+	import type { SvelteComponent } from 'svelte/internal'
 
 	export let placeholder = ''
 	export let icon: SvelteComponent = undefined

src/styles/classes/markdown.postcss

@@ -95,7 +95,7 @@
 		td,
 		th {
 			padding: 0.5rem 0.85rem;
-			border: 0var (--unit-3) solid var(--color-table-border);
+			border: 1px solid var(--color-table-border);
 		}
 
 		tr:nth-child(2n) {