fix(KtField*Select): implemented maximumSelectable properly

- disable the rest of the options on multi-select if maximumSelectable is reached - feat: show `isUnsorted` prop on documentation - fix: `isInputVisible` by moving the input out of screen instead - this is to properly support tabbing into (focus) when the dropdown is closed - we can't tab/focus into a field if there's no input - fix: open the dropdown if the user starts typing into the field - in single selects, when user selects an option, the dropdown closes - the input still exists in the focused field yet the dropdown is closed - if the user starts typing, we open the dropdown again - it's an edge case that had weird UX previously - fix: horizontal scrollbar UI Co-Authored-By: Florian Wendelborn <[email protected]>
3YOURMIND · May 31, 2022 · 54f1c82 · 54f1c82
1 parent 271b005
commit 54f1c82
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 88 deletions.
diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
@@ -234,7 +234,7 @@
 								<template #option="{ option }">
 									<i
 										class="yoco"
-										style="font-size: 24px; margin-right: 10px"
+										style="margin-right: 10px; font-size: 24px"
 										v-text="option.value"
 									/>
 									<span v-text="option.label" />
@@ -251,7 +251,7 @@
 								<template #option="{ option }">
 									<i
 										class="yoco"
-										style="font-size: 24px; margin-right: 10px"
+										style="margin-right: 10px; font-size: 24px"
 										v-text="option.value"
 									/>
 									<span v-text="option.label" />
@@ -391,6 +391,15 @@
 								label="isLoadingOptions"
 								type="switch"
 							/>
+							<KtFieldToggle
+								v-if="
+									componentDefinition.additionalProps.includes('isUnsorted')
+								"
+								formKey="isUnsorted"
+								isOptional
+								label="isUnsorted"
+								type="switch"
+							/>
 							<KtFieldDate
 								v-if="
 									componentDefinition.additionalProps.includes('maximumDate')
@@ -563,8 +572,9 @@ const components: Array<{
 		additionalProps: [
 			'actions',
 			'collapseTagsAfter',
-			'maximumSelectable',
 			'hasOptionSlot',
+			'isUnsorted',
+			'maximumSelectable',
 		],
 		formKey: 'multiSelectValue',
 		name: 'KtFieldMultiSelect',
@@ -574,9 +584,10 @@ const components: Array<{
 		additionalProps: [
 			'actions',
 			'collapseTagsAfter',
+			'hasOptionSlot',
 			'isLoadingOptions',
+			'isUnsorted',
 			'maximumSelectable',
-			'hasOptionSlot',
 			'query',
 		],
 		formKey: 'multiSelectValue',
@@ -609,13 +620,19 @@ const components: Array<{
 		supports: KtFieldRadioGroup.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'hasOptionSlot'],
+		additionalProps: ['actions', 'hasOptionSlot', 'isUnsorted'],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelect',
 		supports: KtFieldSingleSelect.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'isLoadingOptions', 'hasOptionSlot', 'query'],
+		additionalProps: [
+			'actions',
+			'hasOptionSlot',
+			'isLoadingOptions',
+			'isUnsorted',
+			'query',
+		],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelectRemote',
 		supports: KtFieldSingleSelectRemote.meta.supports,
@@ -705,15 +722,15 @@ const radioGroupOptions: Kotti.FieldRadioGroup.Props['options'] = [
 ]
 
 const singleOrMultiSelectOptions: Kotti.FieldSingleSelect.Props['options'] = [
-	{ label: 'Key 1', value: 'value1' },
 	{ label: 'Key 2', value: 'value2' },
+	{ label: 'Key 1', value: 'value1' },
 	{ isDisabled: true, label: 'Key 3', value: 'value3' },
+	{ label: 'Key 7', value: 'value7' },
 	{ label: 'Key 4', value: 'value4' },
-	{ label: 'Key 5', value: 'value5' },
+	{ label: 'Key 9', value: 'value9' },
 	{ label: 'Key 6', value: 'value6' },
-	{ label: 'Key 7', value: 'value7' },
 	{ label: 'Key 8', value: 'value8' },
-	{ label: 'Key 9', value: 'value9' },
+	{ label: 'Key 5', value: 'value5' },
 ]
 
 const toggleGroupOptions: Kotti.FieldToggleGroup.Props['options'] = [
@@ -753,6 +770,7 @@ export default defineComponent({
 				hideChangeButtons: boolean
 				isInline: boolean
 				isLoadingOptions: boolean
+				isUnsorted: boolean
 				maximumDate: Kotti.FieldDate.Value
 				maximumSelectable: Kotti.FieldNumber.Value
 				minimumDate: Kotti.FieldDate.Value
@@ -784,7 +802,7 @@ export default defineComponent({
 			placeholder2: Kotti.FieldText.Value
 			prefix: Kotti.FieldText.Value
 			rightIcon: Yoco.Icon | null
-			size: 'small' | 'medium' | 'large'
+			size: Kotti.Field.Size
 			suffix: Kotti.FieldText.Value
 			tabIndex: Kotti.FieldNumber.Value
 			validation: Kotti.Field.Validation.Result['type']
@@ -798,6 +816,7 @@ export default defineComponent({
 				hideChangeButtons: false,
 				isInline: false,
 				isLoadingOptions: false,
+				isUnsorted: false,
 				maximumDate: null,
 				maximumSelectable: null,
 				minimumDate: null,
@@ -829,7 +848,7 @@ export default defineComponent({
 			placeholder2: null,
 			prefix: null,
 			rightIcon: null,
-			size: 'medium',
+			size: Kotti.Field.Size.MEDIUM,
 			suffix: null,
 			tabIndex: null,
 			validation: 'empty',
@@ -979,13 +998,21 @@ export default defineComponent({
 					isLoadingOptions: settings.value.additionalProps.isLoadingOptions,
 				})
 
+			if (componentDefinition.value.additionalProps.includes('isUnsorted'))
+				Object.assign(additionalProps, {
+					isUnsorted: settings.value.additionalProps.isUnsorted,
+				})
+
 			if (componentDefinition.value.additionalProps.includes('maximumDate'))
 				Object.assign(additionalProps, {
 					maximumDate: settings.value.additionalProps.maximumDate,
 				})
 
 			if (
-				componentDefinition.value.additionalProps.includes('maximumSelectable')
+				componentDefinition.value.additionalProps.includes(
+					'maximumSelectable',
+				) &&
+				settings.value.additionalProps.maximumSelectable !== null
 			)
 				Object.assign(additionalProps, {
 					maximumSelectable: settings.value.additionalProps.maximumSelectable,

diff --git a/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue b/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
@@ -19,10 +19,10 @@ import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, Ref, ref } from '@vue/composition-api'
 import { roundArrow } from 'tippy.js'
 
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../constants'
 import { makeProps } from '../make-props'
 
 import { KottiAvatar } from './types'
-const ARROW_HEIGHT = 7
 
 const useTooltip = (name: Ref<string | null>) => {
 	const tooltipTriggerRef = ref<Element | null>(null)
@@ -33,7 +33,7 @@ const useTooltip = (name: Ref<string | null>) => {
 			appendTo: () => document.body,
 			arrow: roundArrow,
 			content: name.value,
-			offset: [0, ARROW_HEIGHT],
+			offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
 			theme: 'light-border',
 			...(name.value === null ? { trigger: 'manual' } : {}),
 		})),

diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
@@ -19,13 +19,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldMultiSelect } from './types'
 
-export default defineComponent<KottiFieldMultiSelect.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldMultiSelect',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldMultiSelect.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldMultiSelect.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)

diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue
@@ -20,13 +20,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldMultiSelectRemote } from './types'
 
-export default defineComponent<KottiFieldMultiSelectRemote.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldMultiSelectRemote',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldMultiSelectRemote.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldMultiSelectRemote.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)

diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
@@ -18,13 +18,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldSingleSelect } from './types'
 
-export default defineComponent<KottiFieldSingleSelect.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldSingleSelect',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldSingleSelect.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldSingleSelect.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)

diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
@@ -19,13 +19,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldSingleSelectRemote } from './types'
 
-export default defineComponent<KottiFieldSingleSelectRemote.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldSingleSelectRemote',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldSingleSelectRemote.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldSingleSelectRemote.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)

diff --git a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
@@ -13,20 +13,20 @@
 import { Yoco } from '@3yourmind/yoco'
 import { defineComponent, ref, computed } from '@vue/composition-api'
 
-export default defineComponent<{
-	classes: string[]
-	handleClear(): void
-	isDropdownOpen: boolean
-	showClear: boolean
-}>({
+export default defineComponent({
 	name: 'ActionIcon',
 	props: {
 		classes: { required: true, type: Array },
 		handleClear: { required: true, type: Function },
 		isDropdownOpen: { required: true, type: Boolean },
 		showClear: { required: true, type: Boolean },
 	},
-	setup(props) {
+	setup(props: {
+		classes: string[]
+		handleClear(): void
+		isDropdownOpen: boolean
+		showClear: boolean
+	}) {
 		const hoverOnClearIcon = ref(false)
 
 		const canClear = computed<boolean>(