Skip to content

Commit

Permalink
WIP AAAAAAAAAA
Browse files Browse the repository at this point in the history
  • Loading branch information
@carsoli @FlorianWendelborn
carsoli authored and FlorianWendelborn committed May 23, 2022
1 parent 05abb5b commit 2f20a83
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 104 deletions.
152 changes: 64 additions & 88 deletions packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,27 @@
>
<div class="kt-field-select__input-and-tags">
<div
v-if="isMultiple && !field.isEmpty"
class="kt-field-select__tags"
v-for="option in visibleSelectedTags"
:key="option.value"
class="kt-field-select__tag"
>
<div class="kt-field-select__tag-text" v-text="option.label" />
<div
v-for="option in visibleSelectedTags"
:key="option.value"
class="kt-field-select__tags__tag"
v-if="!(field.isDisabled || Boolean(option.isDisabled))"
class="kt-field-select__tag-icon"
@click.stop.prevent="removeTag(option.value)"
>
<div
class="kt-field-select__tags__tag-text"
v-text="option.label"
/>
<div
v-if="!(field.isDisabled || Boolean(option.isDisabled))"
class="kt-field-select__tags__tag-icon"
@click.stop.prevent="removeTag(option.value)"
>
<i class="yoco" v-text="Yoco.Icon.CLOSE" />
</div>
<i class="yoco" v-text="Yoco.Icon.CLOSE" />
</div>
</div>
<div v-if="collapsedTagCount > 0" class="kt-field-select__tag">
<div
v-if="collapsedTagCount > 0"
class="kt-field-select__tags__tag"
>
<div
class="kt-field-select__tags__tag-text"
v-text="`+${collapsedTagCount}`"
/>
</div>
class="kt-field-select__tag-text"
v-text="`+${collapsedTagCount}`"
/>
</div>
<!-- @blur="setIsDropdownOpen(false)" -->
<input
v-if="isInputVisible"
ref="inputRef"
v-bind="inputProps"
@input="updateQuery"
@keydown.enter="setIsDropdownOpen(!isDropdownOpen)"
/>
<!-- v-if="isInputVisible" -->
<input ref="inputRef" v-bind="inputProps" @input="updateQuery" />
</div>
<template v-slot:actionIcon="{ classes, handleClear, showClear }">
<ActionIcon
Expand Down Expand Up @@ -78,7 +61,6 @@
<script lang="ts">
import { Yoco } from '@3yourmind/yoco'
import { computed, defineComponent, ref, watch } from '@vue/composition-api'
import Vue from 'vue'
import { z } from 'zod'
import { KtField } from '../../kotti-field'
Expand Down Expand Up @@ -164,9 +146,11 @@ export default defineComponent<
const { forceUpdateKey, forceUpdate } = useForceUpdate()
watch(isDropdownMounted, (newValue) => {
watch(isDropdownMounted, (isMounted) => {
if (isMounted) return
if (props.isRemote) {
if (!newValue && props.query !== null) emit(UPDATE_QUERY, null)
if (props.query !== null) emit(UPDATE_QUERY, null)
} else localQuery.value = null
})
Expand All @@ -191,7 +175,7 @@ export default defineComponent<
forceUpdateKey: forceUpdateKey.value,
placeholder: props.placeholder ?? undefined,
size: 1,
style: !isDropdownOpen.value ? 'flex: 1' : undefined,
style: 'flex: 1',
type: 'text',
value: (() => {
if (isDropdownOpen.value)
Expand All @@ -213,6 +197,7 @@ export default defineComponent<
onOptionsInput: (value: MultiValue) => {
field.setValue(props.isMultiple ? value : value?.[0] ?? null)
inputRef.value?.focus()
// single select: close the tippy instance whenever a selection is made.
// This (watcher on isDropdownMounted) also intentionally resets the query
// so that the api-call (for example) can already trigger and load the non-filtered options
Expand Down Expand Up @@ -282,84 +267,75 @@ export default defineComponent<
margin-bottom: 0.8rem;
}
&__input-and-tags {
display: flex;
align-items: center;
> *:not(:first-child) {
margin-left: var(--unit-1);
}
}
&__query {
display: flex;
flex: 1;
width: 100%;
padding: 0;
margin: 0;
line-height: 1.6;
border: 0;
flex: 1;
}
&__tags {
$vertical-tag-gap: 2px;
$horizontal-tag-gap: 4px;
$tag-padding: 0.4em;
$tag-border: 1px;
$vertical-tag-gap: 2px;
$horizontal-tag-gap: 4px;
$tag-padding: 0.4em;
$tag-border: 1px;
&__input-and-tags {
display: flex;
flex-wrap: wrap;
// HACK: use negative margins to align multi-line grids of tags
margin: #{-$vertical-tag-gap + 4px} #{-$horizontal-tag-gap};
}
&__tag {
display: flex;
align-items: center;
padding: $tag-padding;
margin: $vertical-tag-gap $horizontal-tag-gap;
font-size: 0.875em;
color: var(--text-02);
text-transform: capitalize;
white-space: nowrap;
background-color: var(--interactive-02);
border: $tag-border solid var(--ui-02);
border-radius: var(--field-border-radius);
&-icon {
$size: 1.25em;
&__tag {
display: flex;
align-items: center;
padding: $tag-padding;
margin: $vertical-tag-gap $horizontal-tag-gap;
font-size: 0.875em;
color: var(--text-02);
text-transform: capitalize;
white-space: nowrap;
background-color: var(--interactive-02);
border: $tag-border solid var(--ui-02);
border-radius: var(--field-border-radius);
&-icon {
$size: 1.25em;
display: flex;
align-items: center;
justify-content: center;
width: $size;
height: $size;
margin-left: 4px;
cursor: pointer;
background-color: var(--ui-02);
border-radius: 50%;
// clipping also affects the clickable area
@supports (clip-path: circle(#{$size / 2} at center)) {
clip-path: circle(#{$size / 2} at center);
border-radius: 0;
}
&:hover {
background-color: var(--interactive-02-hover);
}
justify-content: center;
width: $size;
height: $size;
margin-left: 4px;
cursor: pointer;
background-color: var(--ui-02);
border-radius: 50%;
// clipping also affects the clickable area
@supports (clip-path: circle(#{$size / 2} at center)) {
clip-path: circle(#{$size / 2} at center);
border-radius: 0;
}
&:hover {
background-color: var(--interactive-02-hover);
}
}
}
&__wrapper {
display: flex;
min-width: 30%; /* TODO: necessary? */
padding: 0;
margin: 0;
min-width: 30%; /* TODO: necessary? */
line-height: 1.6;
border: 0;
}
Expand Down
7 changes: 5 additions & 2 deletions packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,13 @@ export const useSelectTippy = () => {
arrow: roundArrow,
content: tippyContentRef.value,
// hides the tippy if we click-away from the tippy
hideOnClick: true,
hideOnClick: false,
interactive: true,
maxWidth: 'none',
offset: [0, ARROW_HEIGHT],
onClickOutside: () => {
setIsDropdownOpen(false)
},
onShow: () => {
// More correct here, don't move to `onShown()`
isDropdownMounted.value = true
Expand All @@ -45,7 +48,7 @@ export const useSelectTippy = () => {
modifiers: [sameWidth],
},
theme: 'light-border',
trigger: 'click',
trigger: 'click focusin',
})),
)

Expand Down
22 changes: 8 additions & 14 deletions packages/kotti-ui/source/kotti-field-select/todo.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
- [x] `:helpTextSlot="$slots.helpText"`
- [ ] clicking an option counts as blur haha

- [ ] FIX: if field is multi and not empty and not interacting, hide input
## TODOs

- [x] `:helpTextSlot="$slots.helpText"`
- [x] double clicking should keep it open
- [x] selecting an option needs to refocus the field
- [x] if field is multi and not empty and not interacting, hide input (not needed anymore)
- [ ] restore arrow-key navigation for options (isHovered)
- [ ] (optional) add slot support for options
- [ ] check that `enter` from `input` doesn't trigger the submit (of a form it's used within)

## 2022-04-20

- Honestly, the most realistic and sustainable solution is to either move the search query inside the dropdown or to not show the tags

## V2

1. Clickoutside <https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/38317768#38317768>
2. support `tabIndex`
3. check if data-test is implemented sufficiently
- [x] Clickoutside (done with tippy callbacks)
- [ ] support `tabIndex`
- [ ] check if data-test is implemented sufficiently

0 comments on commit 2f20a83

Please sign in to comment.