wip: Make KtToaster Greater Again

Co-Authored-By: Moritz Vetter <[email protected]>
3YOURMIND · Nov 4, 2024 · 853e473 · 853e473
1 parent 11e86bb
commit 853e473
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 92 deletions.
diff --git a/packages/documentation/pages/(main)/usage/components/toaster/+Page.vue b/packages/documentation/pages/(main)/usage/components/toaster/+Page.vue
@@ -1,8 +1,9 @@
 <template>
 	<ComponentInfo v-bind="{ component }" />
 
+	<!-- prettier-ignore -->
 	<CodePreview
-		code='
+		:code='`
 			<${parserHack.script} lang="ts">
 			import { createToaster, KtButton, KtToast, KtToaster } from \x27@3yourmind/kotti-ui\x27
 
@@ -43,6 +44,13 @@
 								type: \x27my-link-toast\x27,
 							})
 						},
+						permanentToast: () => {
+							show({
+								duration: null,
+								text: \x27permanent toast\x27,
+								type: \x27my-success-toast\x27,
+							})
+						},
 						successToast: () => {
 							show({
 								text: \x27success toast\x27,
@@ -75,7 +83,7 @@
 					<KtButton @click="linkToast">link toast</KtButton>
 				</div>
 			</${parserHack.template}>
-		'
+		`'
 		fileName="Example.vue"
 		language="vue"
 	>
@@ -103,6 +111,7 @@
 		<div style="display: flex; gap: var(--unit-6)">
 			<KtButton @click="defaultToast">default toast</KtButton>
 			<KtButton @click="successToast">success toast</KtButton>
+			<KtButton @click="permanentToast">permanent toast</KtButton>
 			<KtButton @click="linkToast">link toast</KtButton>
 		</div>
 	</CodePreview>
@@ -217,13 +226,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+
 import {
 	createToaster,
 	KtButton,
 	KtToast,
 	KtToaster,
 } from '@3yourmind/kotti-ui'
-import { defineComponent } from 'vue'
 
 import CodePreview from '~/components/CodePreview.vue'
 import ComponentInfo from '~/components/component-info/ComponentInfo.vue'
@@ -266,6 +276,13 @@ export default defineComponent({
 					type: 'my-link-toast',
 				})
 			},
+			permanentToast: () => {
+				show({
+					duration: null,
+					text: 'permanent toast',
+					type: 'my-success-toast',
+				})
+			},
 			successToast: () => {
 				show({
 					text: 'success toast',

diff --git a/packages/kotti-ui/source/kotti-toaster/KtToast.vue b/packages/kotti-ui/source/kotti-toaster/KtToast.vue
@@ -53,9 +53,12 @@ export default defineComponent({
 	background-color: var(--ui-01);
 
 	border-radius: var(--border-radius);
-	border: 1px solid var(--gray-20);
+	/* border: 1px solid var(--gray-20); */
 	overflow: hidden;
 
+	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
+		drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+
 	&__icon,
 	&__close {
 		.yoco {

diff --git a/packages/kotti-ui/source/kotti-toaster/create-toaster.test.ts b/packages/kotti-ui/source/kotti-toaster/create-toaster.test.ts
@@ -39,6 +39,7 @@ describe('createToaster', () => {
 
 	describe('.abort()', () => {
 		it('can abort a toast', () => {
+			// default: Record<string, never>
 			const toaster = createToaster<{
 				error: Record<string, never>
 				success: { tbd: true }