wip

3YOURMIND · May 30, 2022 · 1763af9 · 1763af9
1 parent fc1302f
commit 1763af9
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 67 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/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>(

diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="kt-field-select">
+	<div :class="fieldSelectClasses">
 		<div ref="tippyTriggerRef">
 			<KtField
 				v-bind="{ field }"
@@ -28,7 +28,6 @@
 						/>
 					</div>
 					<input
-						v-if="isInputVisible"
 						ref="inputRef"
 						v-bind="inputProps"
 						@input="updateQuery"
@@ -53,12 +52,13 @@
 		<div ref="tippyContentRef">
 			<FieldSelectOptions
 				:actions="actions"
-				:dataTestPrefix="field.inputProps['data-test']"
+				:dataTestPrefix="inputProps['data-test']"
 				:isDisabled="field.isDisabled"
 				:isDropdownOpen="isDropdownOpen"
 				:isLoading="isLoadingOptions"
 				:isMultiple="isMultiple"
 				:isUnsorted="isUnsorted"
+				:maximumSelectable="maximumSelectable"
 				:options="filteredOptions"
 				:value="optionsValue"
 				@close="setIsDropdownOpen(false)"
@@ -119,9 +119,7 @@ type MultiValue =
 	| KottiFieldMultiSelect.Value
 	| KottiFieldMultiSelectRemote.Value
 
-export default defineComponent<
-	KottiFieldSingleSelectRemote.PropsInternal & z.output<typeof propsSchema>
->({
+export default defineComponent<z.output<typeof propsSchema>>({
 	name: 'GenericSelectField',
 	components: {
 		ActionIcon,
@@ -147,19 +145,11 @@ export default defineComponent<
 
 		const localQuery = ref<string | null>(null)
 
+		const { forceUpdateKey, forceUpdate } = useForceUpdate()
+
 		const { isDropdownOpen, isDropdownMounted, ...selectTippy } =
 			useSelectTippy()
 
-		const selectedLabel = computed((): string | null => {
-			if (field.currentValue === null) return null
-			return (
-				props.options.find((option) => option.value === field.currentValue)
-					?.label ?? null
-			)
-		})
-
-		const { forceUpdateKey, forceUpdate } = useForceUpdate()
-
 		watch(isDropdownMounted, (isMounted) => {
 			if (isMounted) return
 
@@ -182,29 +172,42 @@ export default defineComponent<
 		 * keeps reference of already seen option labels so that
 		 * the tags can be rendered properly when filtering remotely
 		 */
-		const seenValueLabelMap = ref<Map<Shared.Value, string>>(new Map())
+		const seenValueLabelMap = ref<Map<Shared.Value, Shared.Option['label']>>(
+			new Map(),
+		)
 
 		watch(
 			() => props.options,
 			() => {
 				seenValueLabelMap.value = new Map([
 					...seenValueLabelMap.value,
-					...props.options.map((option): [Shared.Value, string] => [
-						option.value,
-						option.label,
-					]),
+					...props.options.map(
+						(option): [Shared.Value, Shared.Option['label']] => [
+							option.value,
+							option.label,
+						],
+					),
 				])
 			},
 			{ immediate: true },
 		)
 
+		const isInputVisible = computed(
+			// save some space in multi select when tags are shown
+			() => !props.isMultiple || isDropdownOpen.value || field.isEmpty,
+		)
+
 		return {
 			collapsedTagCount: computed(() =>
 				props.isMultiple
 					? (field.currentValue as MultiValue).length - props.collapseTagsAfter
 					: 0,
 			),
 			field,
+			fieldSelectClasses: computed(() => ({
+				'kt-field-select': true,
+				'kt-field-select--is-input-visible': !isInputVisible.value,
+			})),
 			filteredOptions: computed(() =>
 				props.isRemote
 					? props.options
@@ -224,15 +227,16 @@ export default defineComponent<
 				value: (() => {
 					if (isDropdownOpen.value) return queryValue.value ?? undefined
 
-					return selectedLabel.value ?? undefined
+					// can't bind multiple values to input (therefore, we just bind `undefined`)
+					if (field.currentValue === null || props.isMultiple) return undefined
+
+					return props.options.find(
+						(option) => option.value === field.currentValue,
+					)?.label
 				})(),
 			})),
 			inputRef,
 			isDropdownOpen,
-			isInputVisible: computed(
-				// save some space in multi select when tags are shown
-				() => !props.isMultiple || isDropdownOpen.value || field.isEmpty,
-			),
 			tippyContentRef: selectTippy.tippyContentRef,
 			tippyTriggerRef: selectTippy.tippyTriggerRef,
 			onOptionsInput: (value: MultiValue) => {
@@ -302,6 +306,17 @@ export default defineComponent<
 		margin-bottom: 0.8rem;
 	}
 
+	// can't rely on v-if because the field wouldn't be focusable
+	&.kt-field-select--is-input-visible {
+		position: relative;
+
+		.kt-field-select__wrapper {
+			position: absolute;
+			left: -10000px;
+			pointer-events: none;
+		}
+	}
+
 	&__query {
 		display: flex;
 		flex: 1;
@@ -369,7 +384,7 @@ export default defineComponent<
 	&__wrapper {
 		display: flex;
 		flex: 1;
-		min-width: 30%; /* TODO: necessary? */
+		min-width: 30%;
 		padding: 0;
 		margin: 0;
 		line-height: 1.6;