Merge pull request #419 from 3YOURMIND/add-source-links-to-documentation

Add source links to documentation

packages/documentation/components/ComponentInfo.vue

@@ -130,6 +130,7 @@ import { Kotti } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
 import { Dashes } from '@metatypes/typography'
 import { computed, defineComponent, ref } from '@vue/composition-api'
+import { kebabCase } from 'lodash'
 
 import ComponentInfoSlots from './component-info/Slots.vue'
 
@@ -141,7 +142,11 @@ type VuePropType =
 	| StringConstructor
 
 export default defineComponent<{
-	component: { meta: Kotti.Meta; name: string }
+	component: {
+		meta: Kotti.Meta
+		name: string
+		props?: Record<string, unknown>
+	}
 }>({
 	props: {
 		component: { required: true, type: Object },
@@ -162,11 +167,15 @@ export default defineComponent<{
 				}> = []
 
 				const {
-					addedVersion,
-					deprecated,
-					designs,
-					typeScript,
-				} = props.component.meta
+					meta: { addedVersion, deprecated, designs, typeScript },
+					name,
+				} = props.component
+
+				const componentSourceFolder = props.component.props
+					? `https://github.com/3YOURMIND/kotti/blob/master/packages/kotti-ui/source/${kebabCase(
+							name.replace(/^Kt/, 'Kotti'),
+					  )}`
+					: null
 
 				if (deprecated !== null)
 					result.push({
@@ -212,6 +221,9 @@ export default defineComponent<{
 						backgroundColor: 'var(--primary-20)',
 						color: 'var(--primary-70)',
 						left: 'TS',
+						link: componentSourceFolder
+							? `${componentSourceFolder}/types.ts`
+							: undefined,
 						right: typeScript.namespace,
 					})
 
@@ -229,6 +241,15 @@ export default defineComponent<{
 						  }),
 				})
 
+				if (componentSourceFolder)
+					result.push({
+						backgroundColor: 'var(--purple-20)',
+						color: 'var(--purple-70)',
+						left: 'Source',
+						link: `${componentSourceFolder}/${name}.vue`,
+						right: `${name}.vue`,
+					})
+
 				return result
 			}),
 			showProps: ref(false),

packages/kotti-ui/source/index.ts

@@ -55,15 +55,16 @@ import { KtFieldTextArea } from './kotti-field-text-area'
 export * from './kotti-field-text-area'
 import { KtFieldToggle, KtFieldToggleGroup } from './kotti-field-toggle'
 export * from './kotti-field-toggle'
-import { KtFilters } from './kotti-filter'
-export * from './kotti-filter'
-import {
-	KtForm,
-	KtFormControllerList,
-	KtFormControllerObject,
-	KtFormSubmit,
-} from './kotti-form'
+import { KtFilters } from './kotti-filters'
+export * from './kotti-filters'
+import { KtForm } from './kotti-form'
 export * from './kotti-form'
+import { KtFormControllerList } from './kotti-form-controller-list'
+export * from './kotti-form-controller-list'
+import { KtFormControllerObject } from './kotti-form-controller-object'
+export * from './kotti-form-controller-object'
+import { KtFormSubmit } from './kotti-form-submit'
+export * from './kotti-form-submit'
 import { KtHeading } from './kotti-heading'
 export * from './kotti-heading'
 import { KtInlineEdit } from './kotti-inline-edit'
@@ -95,7 +96,6 @@ import {
 	KtTableColumn,
 	KtTableProvider,
 	KtTableConsumer,
-	KtTableColumnsStateMixin,
 } from './kotti-table'
 export * from './kotti-table'
 import { KtTheme } from './kotti-theme'
@@ -165,7 +165,6 @@ export default {
 			KtTableColumn,
 			KtTableProvider,
 			KtTableConsumer,
-			KtTableColumnsStateMixin,
 			KtTheme,
 			KtToaster,
 			KtTranslationContext,

packages/kotti-ui/source/kotti-form/controllers/KtFormControllerList.vue → packages/kotti-ui/source/kotti-form-controller-list/KtFormControllerList.vue

@@ -5,7 +5,7 @@
 			name="header"
 			:values="cloneDeep(valuesList)"
 		/>
-		<KtFormControllerListItem
+		<FormControllerListItem
 			v-for="(values, index) in valuesList"
 			:key="index"
 			:context="context"
@@ -23,7 +23,7 @@
 				:setValues="(newValue) => setValuesIndex(index, newValue)"
 				:values="cloneDeep(values)"
 			/>
-		</KtFormControllerListItem>
+		</FormControllerListItem>
 		<slot
 			v-bind="slotFunctions"
 			name="footer"
@@ -36,15 +36,15 @@
 import { defineComponent, inject, computed } from '@vue/composition-api'
 import cloneDeep from 'lodash/cloneDeep'
 
-import { KT_FORM_CONTEXT } from '../constants'
-import { KottiForm } from '../types'
+import { KT_FORM_CONTEXT } from '../kotti-form/constants'
+import { KottiForm } from '../kotti-form/types'
 
-import KtFormControllerListItem from './KtFormControllerListItem.vue'
+import FormControllerListItem from './components/FormControllerListItem.vue'
 import { KottiFormControllerList } from './types'
 
 export default defineComponent({
 	name: 'KtFormControllerList',
-	components: { KtFormControllerListItem },
+	components: { FormControllerListItem },
 	props: {
 		formKey: { required: true, type: String },
 	},

packages/kotti-ui/source/kotti-form/controllers/KtFormControllerListItem.vue → packages/kotti-ui/source/kotti-form-controller-list/components/FormControllerListItem.vue

@@ -5,13 +5,12 @@
 <script lang="ts">
 import { defineComponent, provide, computed } from '@vue/composition-api'
 
-import { KT_FORM_CONTEXT } from '../constants'
-import { KottiForm } from '../types'
-
-import { KottiFormControllerListItem } from './types'
+import { KT_FORM_CONTEXT } from '../../kotti-form/constants'
+import { KottiForm } from '../../kotti-form/types'
+import { KottiFormControllerListItem } from '../types'
 
 export default defineComponent({
-	name: 'KtFormControllerListItem',
+	name: 'FormControllerListItem',
 	props: {
 		context: { required: true, type: Object },
 		formKey: { required: true, type: String },

packages/kotti-ui/source/kotti-form-controller-list/index.ts

@@ -0,0 +1,74 @@
+import { Kotti } from '../types'
+import { attachMeta, makeInstallable } from '../utilities'
+
+import KtFormControllerListVue from './KtFormControllerList.vue'
+
+export const sharedHeaderFooterScope: Kotti.Meta['slots'][string]['scope'] = {
+	addAfter: {
+		description: 'append an item to the list',
+		type: 'function',
+	},
+	addBefore: {
+		description: 'prepend an item to the list',
+		type: 'function',
+	},
+	setValues: {
+		description: 'replace the list',
+		type: 'function',
+	},
+	values: {
+		description: 'all items in the list',
+		type: 'object',
+	},
+}
+
+export const KtFormControllerList = attachMeta(
+	makeInstallable(KtFormControllerListVue),
+	{
+		addedVersion: '2.0.0',
+		deprecated: null,
+		designs: null,
+		slots: {
+			default: {
+				description: null,
+				scope: {
+					addAfter: {
+						description: null,
+						type: 'function',
+					},
+					addBefore: {
+						description: null,
+						type: 'function',
+					},
+					deleteSelf: {
+						description: null,
+						type: 'function',
+					},
+					index: {
+						description: null,
+						type: 'integer',
+					},
+					setValues: {
+						description: null,
+						type: 'function',
+					},
+					values: {
+						description: null,
+						type: 'object',
+					},
+				},
+			},
+			footer: {
+				description: 'inserted below the list, exposes list utilities',
+				scope: sharedHeaderFooterScope,
+			},
+			header: {
+				description: 'inserted above the list, exposes list utilities',
+				scope: sharedHeaderFooterScope,
+			},
+		},
+		typeScript: {
+			namespace: 'Kotti.FormControllerList',
+		},
+	},
+)

packages/kotti-ui/source/kotti-form/controllers/tests.ts → packages/kotti-ui/source/kotti-form-controller-list/tests.ts

@@ -3,16 +3,15 @@ require('jsdom-global')()
 import { defineComponent, ref } from '@vue/composition-api'
 import { mount, Wrapper } from '@vue/test-utils'
 
-import { KOTTI_FIELD_PROPS } from '../../kotti-field/constants'
-import { useField } from '../../kotti-field/hooks'
-import KtField from '../../kotti-field/KtField.vue'
-import { KottiField } from '../../kotti-field/types'
-import { useTranslationProvide } from '../../kotti-translation/hooks'
-import { localVue } from '../../test-utils/index'
-import KtForm from '../KtForm.vue'
+import { KOTTI_FIELD_PROPS } from '../kotti-field/constants'
+import { useField } from '../kotti-field/hooks'
+import KtField from '../kotti-field/KtField.vue'
+import { KottiField } from '../kotti-field/types'
+import KtForm from '../kotti-form/KtForm.vue'
+import { useTranslationProvide } from '../kotti-translation/hooks'
+import { localVue } from '../test-utils/index'
 
 import KtFormControllerList from './KtFormControllerList.vue'
-import KtFormControllerObject from './KtFormControllerObject.vue'
 
 const TestField = defineComponent({
 	name: 'TestField',
@@ -53,20 +52,6 @@ const TestControllerListForm = {
 	template: `<KtForm v-bind="formProps" @input="$event => $emit('input', $event)"><TestControllerList v-bind="controllerProps"/></KtForm>`,
 }
 
-const TestControllerObject = {
-	components: { TestField, KtFormControllerObject },
-	template: `<KtFormControllerObject v-bind="$attrs"><TestField formKey="testKey"/></KtFormControllerObject>`,
-}
-
-const TestControllerObjectForm = {
-	components: { KtForm, TestControllerObject },
-	props: {
-		controllerProps: { required: true, type: Object },
-		formProps: { required: true, type: Object },
-	},
-	template: `<KtForm v-bind="formProps" @input="$event => $emit('input', $event)"><TestControllerObject v-bind="controllerProps"/></KtForm>`,
-}
-
 const getField = (
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	wrapper: Wrapper<any>,
@@ -190,79 +175,3 @@ describe('KtFormControllerList', () => {
 		})
 	})
 })
-
-describe('KtFormControllerObject', () => {
-	it('provides context with nested data, and passes-down the other properties of the KtFormContext', () => {
-		const wrapper = mount(TestControllerObjectForm, {
-			localVue,
-			propsData: {
-				controllerProps: { formKey: 'parentKey' },
-				formProps: {
-					hideValidation: true,
-					validators: { testKey: () => ({ type: 'empty' }) },
-					value: { parentKey: { testKey: 'something' } },
-				},
-			},
-		})
-
-		const field = getField(wrapper, 0)
-
-		expect(field.currentValue).toBe('something')
-		expect(field.hideValidation).toBe(true)
-		expect(field.validation).toEqual({ type: 'empty' })
-	})
-
-	it('implements setValue properly', async () => {
-		const wrapper = mount(TestControllerObjectForm, {
-			localVue,
-			propsData: {
-				controllerProps: { formKey: 'parentKey' },
-				formProps: {
-					hideValidation: true,
-					validators: {
-						testKey: () => ({ type: 'empty' }),
-					},
-					value: { parentKey: { testKey: 'something' } },
-				},
-			},
-		})
-		const field = getField(wrapper, 0)
-
-		field.setValue('setSomething')
-
-		await wrapper.vm.$nextTick()
-
-		expect(wrapper.emitted('input')).toEqual([
-			[{ parentKey: { testKey: 'setSomething' } }],
-		])
-	})
-
-	describe('reactivity', () => {
-		it('hideValidation', async () => {
-			const FORM_PROPS = {
-				hideValidation: false,
-				value: {
-					parentKey: { testKey: 'something' },
-				},
-			}
-
-			const wrapper = mount(TestControllerObjectForm, {
-				localVue,
-				propsData: {
-					controllerProps: { formKey: 'parentKey' },
-					formProps: FORM_PROPS,
-				},
-			})
-
-			const field = getField(wrapper, 0)
-
-			expect(field.hideValidation).toBe(false)
-
-			wrapper.setProps({ formProps: { ...FORM_PROPS, hideValidation: true } })
-
-			await wrapper.vm.$nextTick()
-
-			expect(field.hideValidation).toBe(true)
-		})
-	})
-})

packages/kotti-ui/source/kotti-form/controllers/types.ts → packages/kotti-ui/source/kotti-form-controller-list/types.ts

@@ -1,18 +1,11 @@
-import { KottiField } from '../../kotti-field/types'
-import { KottiForm } from '../types'
+import { KottiField } from '../kotti-field/types'
+import { KottiForm } from '../kotti-form/types'
 
 export namespace KottiFormControllerList {
 	export type Props = {
 		formKey: string
 	}
 }
-
-export namespace KottiFormControllerObject {
-	export type Props = {
-		formKey: string
-	}
-}
-
 export namespace KottiFormControllerListItem {
 	export type Props = {
 		context: KottiForm.Context

packages/kotti-ui/source/kotti-form/controllers/KtFormControllerObject.vue → packages/kotti-ui/source/kotti-form-controller-object/KtFormControllerObject.vue

@@ -16,8 +16,8 @@ import {
 	provide,
 } from '@vue/composition-api'
 
-import { KT_FORM_CONTEXT } from '../constants'
-import { KottiForm } from '../types'
+import { KT_FORM_CONTEXT } from '../kotti-form/constants'
+import { KottiForm } from '../kotti-form/types'
 
 import { KottiFormControllerObject } from './types'