WIP

Author: Isokaeder

packages/documentation/components/component-form/ComponentForm.vue

@@ -153,8 +153,8 @@ export default defineComponent({
 				if (props.slots.some((slot) => slot.name === slotName)) continue
 
 				result.push({
-					name: slotName,
 					content: [`\t${slotName} content`],
+					name: slotName,
 					renderedString: `${slotName} content`,
 				})
 			}

packages/documentation/pages/(main)/usage/components/form-fields/+Page.vue

@@ -134,28 +134,108 @@
 			:total="500"
 		/>
 	</CodePreview>
+
+	<KtForm v-model:value="settings">
+		<ComponentForm
+			:component="component"
+			:hiddenProps="{
+				'onUpdate:page': (val: number) => (settings.page = val),
+			}"
+			:props="settings"
+		>
+			<template #component-form-settings>
+				<div>
+					<h4>Settings</h4>
+					<KtFieldSingleSelect
+						formKey="pagingStyle"
+						hideClear
+						label="Paging style"
+						:options="[
+							{ label: 'expand (default)', value: 'expand' },
+							{ label: 'flex', value: 'flex' },
+							{ label: 'fraction', value: 'fraction' },
+						]"
+					/>
+					<KtFieldToggle
+						v-show="settings.pagingStyle === 'flex'"
+						formKey="fixedWidth"
+						isOptional
+						label="Fixed width"
+						type="switch"
+					>
+						<template #helpText>
+							<code>fixedWidth</code> only has an effect if
+							<code>pagingStyle</code> is set to <code>flex</code>
+						</template>
+					</KtFieldToggle>
+				</div>
+				<div>
+					<h4>Numbers</h4>
+					<KtFieldNumber formKey="page" hideClear label="Page" />
+					<KtFieldNumber formKey="pageSize" hideClear label="Page size" />
+					<KtFieldNumber formKey="total" hideClear label="Total" />
+					<KtFieldNumber
+						formKey="adjacentAmount"
+						hideClear
+						label="Adjacent Pages"
+					/>
+				</div>
+			</template>
+		</ComponentForm>
+	</KtForm>
+
+	<!-- Scape goat element to redirect eslint's anger -->
+	<div />
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 
-import { KtPagination } from '@3yourmind/kotti-ui'
+import type { Kotti } from '@3yourmind/kotti-ui'
+import {
+	KtFieldNumber,
+	KtFieldSingleSelect,
+	KtFieldToggle,
+	KtForm,
+	KtPagination,
+} from '@3yourmind/kotti-ui'
 
 import CodePreview from '~/components/CodePreview.vue'
+import ComponentForm from '~/components/component-form/ComponentForm.vue'
 import ComponentInfo from '~/components/component-info/ComponentInfo.vue'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsPagination',
 	components: {
 		CodePreview,
 		ComponentInfo,
+		ComponentForm,
+		KtFieldSingleSelect,
+		KtFieldNumber,
+		KtFieldToggle,
+		KtForm,
 		KtPagination,
 	},
 	setup() {
 		return {
 			component: KtPagination,
 			page50: ref(1),
 			page500: ref(1),
+			settings: ref<{
+				adjacentAmount: Kotti.FieldNumber.Value
+				fixedWidth: Kotti.FieldToggle.Value
+				page: Kotti.FieldNumber.Value
+				pageSize: Kotti.FieldNumber.Value
+				pagingStyle: 'expand' | 'flex' | 'fraction'
+				total: Kotti.FieldNumber.Value
+			}>({
+				adjacentAmount: 2,
+				fixedWidth: false,
+				page: 1,
+				pageSize: 10,
+				pagingStyle: 'expand',
+				total: 100,
+			}),
 		}
 	},
 })

packages/documentation/pages/(main)/usage/components/pagination/+Page.vue

@@ -96,7 +96,7 @@ export default defineComponent({
 			showRightDots: computed(
 				() =>
 					showLastPage.value &&
-					!neighborValues.value.includes(props.maximumPage),
+					!neighborValues.value.includes(props.maximumPage - 1),
 			),
 		}
 	},

packages/kotti-ui/source/kotti-pagination/components/PaginationFlexible.vue

@@ -59,55 +59,9 @@ export default defineComponent({
 	display: contents;
 }
 
-<<<<<<< HEAD
 .kt-toast > * {
 	box-shadow:
 		0 4px 6px 0 rgba(0 0 0 / 10%),
 		0 2px 4px 0 rgba(0 0 0 / 6%);
-=======
-	background-color: var(--ui-01);
-
-	border-radius: var(--border-radius);
-	/* 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 {
-			font-size: var(--unit-6);
-			height: var(--unit-6);
-			width: var(--unit-6);
-		}
-	}
-
-	&__icon {
-		display: flex;
-
-		padding: var(--unit-2) var(--unit-2) var(--unit-2) var(--unit-4);
-	}
-
-	&__text {
-		flex: 1;
-		padding-block: var(--unit-2);
-	}
-
-	&__close {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		padding: var(--unit-2) var(--unit-4) var(--unit-2) var(--unit-2);
-
-		cursor: pointer;
-
-		&:hover {
-			background-color: var(--interactive-01);
-			color: #fff;
-		}
-	}
->>>>>>> 4f75dff3d (wip: Make KtToaster Greater Again)
 }
 </style>

packages/kotti-ui/source/kotti-toaster/KtToast.vue

@@ -46,31 +46,7 @@ describe('createToaster', () => {
 
 	describe('.abort()', () => {
 		it('can abort a toast', () => {
-<<<<<<< HEAD
 			const toaster = createToaster()
-=======
-			// default: Record<string, never>
-			const toaster = createToaster<{
-				error: Record<string, never>
-				success: { tbd: true }
-			}>()
-
-			const success = toaster.withOptions({ type: 'success' })
-			const error = toaster.withOptions({ type: 'error' })
-
-			error({ text: 'something' })
-
-			// wrong, surplus key
-			success({ custom: { tbd: true, wrong: true }, text: 'sdsdf' })
-
-			success({ text: 'wow' })
-
-			// correct
-			success({ custom: { tbd: true }, text: 'sdsdf' })
-
-			// wrong, custom missing
-			success({ text: 'simple' })
->>>>>>> 4f75dff3d (wip: Make KtToaster Greater Again)
 
 			const toast = toaster.show({ duration: 1, text: 'test' })
 			expect(() => {

packages/kotti-ui/source/kotti-toaster/create-toaster.test.ts

@@ -80,10 +80,6 @@ type IsEmptyObject<T> = T extends Record<string, never> ? true : false
 
 // messages
 
-<<<<<<< HEAD
-=======
-// type MessageTypes = Record<string, Record<string, unknown>>
->>>>>>> 4f75dff3d (wip: Make KtToaster Greater Again)
 type MessageTypes = {
 	[key: string]: Record<string, unknown>
 	default: Record<string, never>
@@ -103,10 +99,7 @@ type Messages<MESSAGE_TYPES extends MessageTypes> = {
 type MessagesNoDefault<MESSAGE_TYPES extends MessageTypes> = {
 	[KEY in keyof MESSAGE_TYPES]: {
 		duration?: number | null
-<<<<<<< HEAD
 		header?: string | null
-=======
->>>>>>> 4f75dff3d (wip: Make KtToaster Greater Again)
 		text: string
 		type: KEY
 	} & (IsEmptyObject<MESSAGE_TYPES[KEY]> extends true