@redseed/redseed-ui-vue3 8.29.2 → 8.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.29.2",
+    "version": "8.31.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -14,6 +14,8 @@
         "@heroicons/vue": "2.2.0",
         "@vueuse/components": "14.2.1",
         "@vueuse/core": "14.2.1",
+        "@vueuse/integrations": "14.2.1",
+        "fuse.js": "7.1.0",
         "lodash": "4.17.23",
         "lottie-web": "5.13.0",
         "vue": "3.5.30"

package/src/components/FormField/FormFieldCombobox.vue

@@ -573,7 +573,7 @@ defineExpose({
                                 {{ option.label }}
                             </div>
                             <div class="rsui-form-field-combobox__option-icon" aria-hidden="true">
-                                <CheckIcon v-if="option.value === model"></CheckIcon>
+                                <CheckIcon v-if="!navigable && option.value === model"></CheckIcon>
                             </div>
                         </div>
                     </template>

package/src/components/FormField/FormFieldSearchAsync.vue

@@ -0,0 +1,484 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue'
+import { onClickOutside, useElementBounding } from '@vueuse/core'
+import FormFieldSlot from './FormFieldSlot.vue'
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    searchFunction: {
+        type: Function,
+        required: true,
+    },
+    debounceMs: {
+        type: Number,
+        default: 300,
+    },
+    minSearchLength: {
+        type: Number,
+        default: 2,
+    },
+})
+
+const emit = defineEmits(['input', 'query-change', 'navigate', 'keyup-enter'])
+
+const attrs = useAttrs()
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
+const query = ref('')
+const isOpen = ref(false)
+const inputElement = ref(null)
+const rootElement = ref(null)
+const dropdownElement = ref(null)
+const highlightedIndex = ref(-1)
+
+const isLoading = ref(false)
+const searchError = ref(null)
+const results = ref([])
+const debounceTimeout = ref(null)
+let latestRequestId = 0
+
+const effectiveId = computed(() => inputId.value || attrs.id)
+
+const liveAnnouncement = computed(() => {
+    if (!isOpen.value) return ''
+    if (isLoading.value) return 'Searching'
+    if (searchError.value) return 'Search failed'
+    if (results.value.length > 0) {
+        return `${results.value.length} result${results.value.length === 1 ? '' : 's'} available`
+    }
+    if (query.value.length >= props.minSearchLength) return 'No results found'
+    return ''
+})
+
+const groupedResults = computed(() => {
+    const items = results.value
+    if (!items.some((r) => r.group)) return null
+
+    const groups = []
+    let currentGroup = null
+
+    items.forEach((result, flatIndex) => {
+        const groupName = result.group || ''
+        if (!currentGroup || currentGroup.name !== groupName) {
+            currentGroup = { name: groupName, items: [] }
+            groups.push(currentGroup)
+        }
+        currentGroup.items.push({ result, flatIndex })
+    })
+
+    return groups
+})
+
+const dropdownContent = computed(() => {
+    if (isLoading.value) return 'loading'
+    if (searchError.value) return 'error'
+    if (!query.value) return 'start-typing'
+    if (query.value.length < props.minSearchLength) return 'min-length'
+    if (results.value.length === 0) return 'no-results'
+    return 'results'
+})
+
+function open() {
+    isOpen.value = true
+    highlightedIndex.value = -1
+    setTimeout(() => {
+        inputElement.value?.focus()
+        calculateDropdownPosition()
+    }, 1)
+}
+
+function close() {
+    isOpen.value = false
+    highlightedIndex.value = -1
+
+    if (debounceTimeout.value) {
+        clearTimeout(debounceTimeout.value)
+        debounceTimeout.value = null
+    }
+}
+
+function clear() {
+    latestRequestId++
+    if (debounceTimeout.value) {
+        clearTimeout(debounceTimeout.value)
+        debounceTimeout.value = null
+    }
+    query.value = ''
+    results.value = []
+    searchError.value = null
+    isLoading.value = false
+    highlightedIndex.value = -1
+    emit('query-change', '')
+}
+
+function navigate(result) {
+    emit('navigate', result.value, result)
+    clear()
+    close()
+}
+
+async function performSearch(q) {
+    const requestId = ++latestRequestId
+    isLoading.value = true
+    searchError.value = null
+
+    try {
+        const response = await props.searchFunction(q)
+        if (requestId !== latestRequestId) return
+        results.value = Array.isArray(response) ? response : []
+    } catch (error) {
+        if (requestId !== latestRequestId) return
+        console.error('FormFieldSearchAsync search error:', error)
+        searchError.value = error
+        results.value = []
+    } finally {
+        if (requestId === latestRequestId) {
+            isLoading.value = false
+        }
+    }
+}
+
+function debouncedSearch(q) {
+    if (debounceTimeout.value) {
+        clearTimeout(debounceTimeout.value)
+    }
+
+    debounceTimeout.value = setTimeout(() => {
+        if (q.length >= props.minSearchLength) {
+            performSearch(q)
+        } else {
+            latestRequestId++
+            results.value = []
+            isLoading.value = false
+        }
+    }, props.debounceMs)
+}
+
+function handleInput(event) {
+    query.value = event.target.value
+    if (!isOpen.value) {
+        isOpen.value = true
+        setTimeout(() => calculateDropdownPosition(), 1)
+    }
+    debouncedSearch(query.value)
+    emit('query-change', query.value)
+    emit('input', event)
+}
+
+function handleKeyup(event) {
+    if (event.key === 'Enter') {
+        if (highlightedIndex.value >= 0 && highlightedIndex.value < results.value.length) {
+            navigate(results.value[highlightedIndex.value])
+        }
+        emit('keyup-enter', event)
+    } else if (event.key === 'Escape') {
+        if (query.value) {
+            clear()
+        } else {
+            close()
+        }
+    }
+}
+
+function handleKeydown(event) {
+    if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        if (!isOpen.value) {
+            open()
+        } else if (results.value.length > 0) {
+            highlightedIndex.value = Math.min(
+                highlightedIndex.value + 1,
+                results.value.length - 1
+            )
+        }
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (isOpen.value && results.value.length > 0) {
+            highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+        }
+    } else if (event.key === 'Home' && isOpen.value && results.value.length > 0) {
+        event.preventDefault()
+        highlightedIndex.value = 0
+    } else if (event.key === 'End' && isOpen.value && results.value.length > 0) {
+        event.preventDefault()
+        highlightedIndex.value = results.value.length - 1
+    }
+}
+
+watch(results, () => {
+    highlightedIndex.value = -1
+})
+
+onClickOutside(rootElement, () => {
+    if (isOpen.value) close()
+})
+
+const inputElementBounding = useElementBounding(inputElement)
+
+function calculateDropdownPosition() {
+    if (!dropdownElement.value) return
+
+    const viewportHeight = window.innerHeight
+    const dropdownHeight = dropdownElement.value.offsetHeight
+    const spaceAbove = inputElementBounding.top.value
+    const spaceBelow = viewportHeight - inputElementBounding.bottom.value
+
+    dropdownElement.value.style.width = `${inputElementBounding.width.value}px`
+    dropdownElement.value.style.left = `${inputElementBounding.left.value}px`
+
+    if (spaceAbove <= dropdownHeight && spaceBelow <= dropdownHeight) {
+        dropdownElement.value.style.top = '0'
+        dropdownElement.value.style.bottom = 'auto'
+    } else if (spaceBelow > dropdownHeight) {
+        dropdownElement.value.style.top = `${inputElementBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.bottom = 'auto'
+    } else if (spaceAbove > dropdownHeight) {
+        dropdownElement.value.style.top = 'auto'
+        dropdownElement.value.style.bottom = `${spaceBelow + inputElementBounding.height.value + 8 - window.scrollY}px`
+    }
+}
+
+onMounted(() => {
+    window.addEventListener('resize', calculateDropdownPosition)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', calculateDropdownPosition)
+})
+
+defineExpose({
+    focus() {
+        inputElement.value?.focus()
+    },
+    open,
+    close,
+    clear,
+})
+</script>
+
+<template>
+<FormFieldSlot
+    ref="rootElement"
+    :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-search-async', 'rsui-form-field-search', 'rsui-form-field-text']"
+    :required="$attrs.required"
+    :showAsterisk="$attrs.showAsterisk"
+    :compact="$attrs.compact"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <div class="rsui-form-field-text__group">
+        <div
+            class="rsui-form-field-text__prefix"
+            aria-hidden="true"
+            @click.prevent="inputElement?.focus()"
+        >
+            <MagnifyingGlassIcon class="rsui-form-field-search__icon"></MagnifyingGlassIcon>
+        </div>
+
+        <input
+            ref="inputElement"
+            role="combobox"
+            class="rsui-form-field-search"
+            :aria-activedescendant="isOpen && dropdownContent === 'results' && highlightedIndex >= 0 ? `${effectiveId}-result-${highlightedIndex}` : undefined"
+            :aria-autocomplete="'list'"
+            :aria-busy="isLoading || undefined"
+            :aria-controls="`${effectiveId}-listbox`"
+            :aria-describedby="ariaDescribedby"
+            :aria-expanded="isOpen"
+            :aria-haspopup="'listbox'"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
+            :value="query"
+            :autocomplete="$attrs.autocomplete || 'off'"
+            :autofocus="$attrs.autofocus"
+            :disabled="$attrs.disabled"
+            :id="effectiveId"
+            :name="$attrs.name"
+            :placeholder="$attrs.placeholder || 'Search...'"
+            :required="$attrs.required"
+            type="search"
+            @input="handleInput"
+            @keyup="handleKeyup"
+            @keydown="handleKeydown"
+            @click="!isOpen && open()"
+        >
+
+        <Teleport to="body">
+            <transition
+                enter-active-class="enter-active-class"
+                enter-from-class="enter-from-class"
+                enter-to-class="enter-to-class"
+                leave-active-class="leave-active-class"
+                leave-from-class="leave-from-class"
+                leave-to-class="leave-to-class"
+            >
+                <div
+                    ref="dropdownElement"
+                    v-show="isOpen"
+                    :id="`${effectiveId}-listbox`"
+                    role="listbox"
+                    :class="[
+                        'rsui-form-field-combobox__options',
+                        { 'rsui-form-field-combobox__options--open': isOpen }
+                    ]"
+                >
+                    <div
+                        v-if="dropdownContent === 'loading'"
+                        class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
+                    >
+                        <div class="rsui-form-field-combobox__option-label">
+                            <slot name="loading-text">Searching...</slot>
+                        </div>
+                        <div class="rsui-form-field-combobox__option-icon">
+                            <div class="rsui-form-field-combobox__spinner"></div>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="dropdownContent === 'error'"
+                        class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled rsui-form-field-combobox__option--error"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
+                    >
+                        <div class="rsui-form-field-combobox__option-label">
+                            <slot name="error-text">Search failed</slot>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="dropdownContent === 'start-typing'"
+                        class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled rsui-form-field-combobox__option--hint"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
+                    >
+                        <div class="rsui-form-field-combobox__option-label">
+                            <slot name="start-typing-text">Start typing to search</slot>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="dropdownContent === 'min-length'"
+                        class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
+                    >
+                        <div class="rsui-form-field-combobox__option-label">
+                            <slot name="min-length-text">Type at least {{ minSearchLength }} characters to search</slot>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="dropdownContent === 'no-results'"
+                        class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
+                    >
+                        <div class="rsui-form-field-combobox__option-label">
+                            <slot name="no-results-text">No results found</slot>
+                        </div>
+                    </div>
+
+                    <template v-if="dropdownContent === 'results' && groupedResults">
+                        <div
+                            v-for="group in groupedResults"
+                            :key="group.name"
+                            role="group"
+                            :aria-label="group.name || undefined"
+                        >
+                            <div v-if="group.name" class="rsui-form-field-combobox__group-header" aria-hidden="true">
+                                {{ group.name }}
+                            </div>
+                            <div
+                                v-for="{ result, flatIndex } in group.items"
+                                :key="result.value"
+                                :id="`${effectiveId}-result-${flatIndex}`"
+                                role="option"
+                                aria-selected="false"
+                                :class="[
+                                    'rsui-form-field-combobox__option',
+                                    { 'rsui-form-field-combobox__option--highlighted': flatIndex === highlightedIndex }
+                                ]"
+                                @click="navigate(result)"
+                            >
+                                <slot
+                                    name="result"
+                                    :result="result"
+                                    :index="flatIndex"
+                                    :highlighted="flatIndex === highlightedIndex"
+                                >
+                                    <div
+                                        class="rsui-form-field-combobox__option-label"
+                                        :title="result.label"
+                                    >
+                                        {{ result.label }}
+                                    </div>
+                                </slot>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template v-if="dropdownContent === 'results' && !groupedResults">
+                        <div
+                            v-for="(result, index) in results"
+                            :key="result.value"
+                            :id="`${effectiveId}-result-${index}`"
+                            role="option"
+                            aria-selected="false"
+                            :class="[
+                                'rsui-form-field-combobox__option',
+                                { 'rsui-form-field-combobox__option--highlighted': index === highlightedIndex }
+                            ]"
+                            @click="navigate(result)"
+                        >
+                            <slot
+                                name="result"
+                                :result="result"
+                                :index="index"
+                                :highlighted="index === highlightedIndex"
+                            >
+                                <div
+                                    class="rsui-form-field-combobox__option-label"
+                                    :title="result.label"
+                                >
+                                    {{ result.label }}
+                                </div>
+                            </slot>
+                        </div>
+                    </template>
+                </div>
+            </transition>
+        </Teleport>
+
+        <div
+            aria-live="polite"
+            aria-atomic="true"
+            class="rsui-form-field-combobox__live-region"
+        >
+            {{ liveAnnouncement }}
+        </div>
+    </div>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>

package/src/components/FormField/FormFieldTreeSelect.vue

@@ -0,0 +1,263 @@
+<script setup>
+import { ref, computed, useAttrs } from 'vue'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import FormFieldSlot from './FormFieldSlot.vue'
+import FormFieldSearch from './FormFieldSearch.vue'
+import SelectableTree from './TreeSelectInternal/SelectableTree.vue'
+import Modal from '../Modal/Modal.vue'
+import ButtonSecondary from '../Button/ButtonSecondary.vue'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    fullWidth: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    triggerPlaceholder: {
+        type: String,
+        default: 'Select an option',
+    },
+    modalHeader: {
+        type: String,
+        default: 'Select an option',
+    },
+    searchPlaceholder: {
+        type: String,
+        default: 'Search...',
+    },
+    closeLabel: {
+        type: String,
+        default: 'Close',
+    },
+})
+
+const emit = defineEmits(['change'])
+
+const attrs = useAttrs()
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
+const model = defineModel({
+    default: null,
+    validator: () => true,
+})
+
+const effectiveId = computed(() => inputId.value || attrs.id)
+
+const show = ref(false)
+function openModal() {
+    if (props.disabled) return
+    show.value = true
+}
+function closeModal() {
+    show.value = false
+}
+
+// Flatten all option trees into a linear list (excluding children references).
+const linear = computed(() => {
+    const out = []
+    const walk = (node) => {
+        const { children, ...rest } = node
+        out.push(rest)
+        if (children && children.length) children.forEach(walk)
+    }
+    props.options.forEach(walk)
+    return out
+})
+
+// Build the label shown in the trigger button.
+const triggerLabel = computed(() => {
+    if (props.multiple) {
+        const count = Array.isArray(model.value) ? model.value.length : 0
+        if (count === 0) return props.triggerPlaceholder
+        return `${count} of ${linear.value.length} selected`
+    }
+    if (model.value === null || model.value === undefined || model.value === '') return props.triggerPlaceholder
+    const found = linear.value.find((o) => o.value === model.value)
+    return found ? found.label : props.triggerPlaceholder
+})
+
+// Search ----------------------------------------------------------------
+const searchInput = ref('')
+
+const searchOptions = {
+    fuseOptions: {
+        keys: ['label'],
+        isCaseSensitive: false,
+        threshold: 0.2,
+    },
+    matchAllWhenSearchEmpty: true,
+}
+
+const { results } = useFuse(searchInput, linear, searchOptions)
+
+const loading = ref(false)
+
+const openChildren = computed(() => {
+    // Force the tree to re-render so each node's local isOpen state resets.
+    loading.value = true
+    setTimeout(() => { loading.value = false }, 1)
+    if (!searchInput.value) return false
+    return linear.value.length !== results.value.length
+})
+
+// Trim the option trees to only the branches that contain matches.
+const searchedTrees = computed(() => {
+    const matchValues = results.value.map((r) => r.item.value)
+    const check = (node) => {
+        if (matchValues.includes(node.value)) return node
+        if (node.children && node.children.length) {
+            const kept = node.children.map(check).filter(Boolean)
+            if (kept.length) return { ...node, children: kept }
+        }
+    }
+    return props.options.map(check).filter(Boolean)
+})
+
+function searchChecker(node) {
+    const matchValues = results.value.map((r) => r.item.value)
+    return matchValues.includes(node.value) && matchValues.length !== linear.value.length
+}
+
+function selectionChecker(node) {
+    if (props.multiple) {
+        return Array.isArray(model.value) && model.value.includes(node.value)
+    }
+    return model.value === node.value
+}
+
+// Selection -------------------------------------------------------------
+function selectOption(node) {
+    if (!props.multiple) {
+        model.value = node.value
+        emit('change', node.value)
+        closeModal()
+        return
+    }
+    if (selectionChecker(node)) return
+    const next = Array.isArray(model.value) ? [...model.value] : []
+    const addCascade = (n) => {
+        if (!next.includes(n.value)) next.push(n.value)
+        if (n.children && n.children.length) n.children.forEach(addCascade)
+    }
+    addCascade(node)
+    model.value = next
+    emit('change', next)
+}
+
+function deselectOption(node) {
+    if (!props.multiple) {
+        model.value = null
+        emit('change', null)
+        return
+    }
+    if (!selectionChecker(node)) return
+    const next = Array.isArray(model.value) ? [...model.value] : []
+    const removeCascade = (n) => {
+        const i = next.indexOf(n.value)
+        if (i >= 0) next.splice(i, 1)
+        if (n.children && n.children.length) n.children.forEach(removeCascade)
+    }
+    removeCascade(node)
+    model.value = next
+    emit('change', next)
+}
+</script>
+
+<template>
+<FormFieldSlot
+    :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-tree-select']"
+    :required="$attrs.required"
+    :showAsterisk="$attrs.showAsterisk"
+    :compact="$attrs.compact"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <div class="rsui-form-field-tree-select__group">
+        <button
+            type="button"
+            :class="[
+                'rsui-form-field-tree-select__trigger',
+                { 'rsui-form-field-tree-select__trigger--full': fullWidth },
+                { 'rsui-form-field-tree-select__trigger--disabled': disabled },
+            ]"
+            :id="effectiveId"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
+            :aria-haspopup="'dialog'"
+            :aria-expanded="show"
+            :disabled="disabled"
+            @click="openModal"
+        >
+            {{ triggerLabel }}
+        </button>
+    </div>
+
+    <Modal :show="show" lg closeable @close="closeModal">
+        <template #header>
+            <div class="rsui-form-field-tree-select__modal-header">
+                <span>
+                    <slot name="modal-header">{{ modalHeader }}</slot>
+                </span>
+            </div>
+        </template>
+
+        <div class="rsui-form-field-tree-select__search">
+            <FormFieldSearch
+                v-model="searchInput"
+                :placeholder="searchPlaceholder"
+            ></FormFieldSearch>
+        </div>
+
+        <div class="rsui-form-field-tree-select__tree">
+            <template v-if="!loading">
+                <SelectableTree
+                    v-for="(tree, i) in searchedTrees"
+                    :key="tree.value ?? i"
+                    :node="tree"
+                    :top="true"
+                    :open="true"
+                    :openChildren="openChildren"
+                    :searchChecker="searchChecker"
+                    :selectionChecker="selectionChecker"
+                    @select="selectOption"
+                    @deselect="deselectOption"
+                ></SelectableTree>
+            </template>
+        </div>
+
+        <template #footer="{ close }">
+            <ButtonSecondary @click="close">
+                {{ closeLabel }}
+            </ButtonSecondary>
+        </template>
+    </Modal>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>

package/src/components/FormField/TreeSelectInternal/SelectableItem.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+import FormFieldCheckbox from '../FormFieldCheckbox.vue'
+
+const props = defineProps({
+    showOpener: {
+        type: Boolean,
+        default: false,
+    },
+    hasChildren: {
+        type: Boolean,
+        default: false,
+    },
+    isOpen: {
+        type: Boolean,
+        default: false,
+    },
+    isSearched: {
+        type: Boolean,
+        default: false,
+    },
+    isSelected: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['change', 'open'])
+
+const selected = ref(false)
+
+watch(() => props.isSelected, value => selected.value = value, { immediate: true, flush: 'post' })
+
+function change(event) {
+    emit('change', event)
+}
+
+function open() {
+    if (!props.hasChildren) return
+    emit('open')
+}
+
+function clickName() {
+    selected.value = !selected.value
+    emit('change', { target: { checked: selected.value } })
+}
+</script>
+<template>
+<div class="rsui-form-field-tree-select-item">
+    <div class="rsui-form-field-tree-select-item__controls">
+        <div v-if="showOpener"
+            :class="[
+                'rsui-form-field-tree-select-item__opener',
+                hasChildren ? 'rsui-form-field-tree-select-item__opener--clickable' : '',
+            ]"
+            @click="open"
+        >
+            <ChevronRightIcon v-if="hasChildren"
+                :class="[
+                    'rsui-form-field-tree-select-item__opener-icon',
+                    isOpen ? 'rsui-form-field-tree-select-item__opener-icon--open' : '',
+                ]"
+            />
+        </div>
+        <div class="rsui-form-field-tree-select-item__selector">
+            <FormFieldCheckbox
+                v-model="selected"
+                @input="change"
+            >
+                <template #label>
+                    <div :class="[
+                            'rsui-form-field-tree-select-item__name',
+                            isSearched ? 'rsui-form-field-tree-select-item__name--searched' : '',
+                        ]"
+                        @click.stop="clickName"
+                    >
+                        <slot name="name"></slot>
+                    </div>
+                </template>
+            </FormFieldCheckbox>
+        </div>
+    </div>
+</div>
+</template>

package/src/components/FormField/TreeSelectInternal/SelectableTree.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed } from 'vue'
+import SelectableItem from './SelectableItem.vue'
+
+const props = defineProps({
+    node: {
+        type: Object,
+        required: true,
+    },
+    top: {
+        type: Boolean,
+        default: false,
+    },
+    open: {
+        type: Boolean,
+        default: false,
+    },
+    openChildren: {
+        type: Boolean,
+        default: false,
+    },
+    searchChecker: {
+        type: Function,
+        required: true,
+    },
+    selectionChecker: {
+        type: Function,
+        required: true,
+    },
+})
+
+const emit = defineEmits(['select', 'deselect'])
+
+const hasChildren = computed(() => !!props.node.children && !!props.node.children.length)
+
+const showOpener = computed(() => {
+    return (props.top && hasChildren.value) || !props.top
+})
+
+const isOpen = ref(props.open)
+
+function toggleOpen() {
+    if (!hasChildren.value) return
+    isOpen.value = !isOpen.value
+}
+
+function toggleSelect(event) {
+    if (event.target.checked) {
+        emit('select', props.node)
+        return
+    }
+    emit('deselect', props.node)
+}
+</script>
+
+<template>
+<SelectableItem
+    :showOpener="showOpener"
+    :hasChildren="hasChildren"
+    :isOpen="isOpen"
+    :isSearched="searchChecker(node)"
+    :isSelected="selectionChecker(node)"
+    @open="toggleOpen"
+    @change="toggleSelect"
+>
+    <template #name>
+        {{ node.label }}
+    </template>
+</SelectableItem>
+
+<div v-if="hasChildren && isOpen"
+    class="rsui-form-field-tree-select-children"
+>
+    <SelectableTree v-for="child in node.children"
+        :key="child.value"
+        :node="child"
+        :open="openChildren"
+        :openChildren="openChildren"
+        :searchChecker="searchChecker"
+        :selectionChecker="selectionChecker"
+        @select="(n) => $emit('select', n)"
+        @deselect="(n) => $emit('deselect', n)"
+    >
+    </SelectableTree>
+</div>
+</template>

package/src/components/FormField/index.js

@@ -7,11 +7,13 @@ import FormFieldPassword from './FormFieldPassword.vue'
 import FormFieldPasswordToggle from './FormFieldPasswordToggle.vue'
 import FormFieldRadioGroup from './FormFieldRadioGroup.vue'
 import FormFieldSearch from './FormFieldSearch.vue'
+import FormFieldSearchAsync from './FormFieldSearchAsync.vue'
 import FormFieldSelect from './FormFieldSelect.vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import FormFieldText from './FormFieldText.vue'
 import FormFieldTextarea from './FormFieldTextarea.vue'
 import FormFieldTextSuffix from './FormFieldTextSuffix.vue'
+import FormFieldTreeSelect from './FormFieldTreeSelect.vue'
 import FormFieldUploaderWrapper from './FormFieldUploaderWrapper.vue'
 export {
     FormFieldCheckbox,
@@ -23,10 +25,12 @@ export {
     FormFieldPasswordToggle,
     FormFieldRadioGroup,
     FormFieldSearch,
+    FormFieldSearchAsync,
     FormFieldSelect,
     FormFieldSlot,
     FormFieldText,
     FormFieldTextarea,
     FormFieldTextSuffix,
+    FormFieldTreeSelect,
     FormFieldUploaderWrapper,
 }