@redseed/redseed-ui-vue3 8.29.1 → 8.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.29.1",
+    "version": "8.30.1",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/FormField/FormFieldCheckbox.vue

@@ -30,6 +30,7 @@ function check(event) {
 <FormFieldSlot
     :id="$attrs.id"
     :required="$attrs.required"
+    :showAsterisk="false"
     class="rsui-form-field-checkbox"
 >
     <template #label>
@@ -51,12 +52,14 @@ function check(event) {
                 >
             </div>
             <div v-if="$slots.label"
-                :class="[
-                    'rsui-form-field-checkbox__label',
-                    { 'rsui-form-field-checkbox__label--required': $attrs.required !== undefined },
-                ]"
+                class="rsui-form-field-checkbox__label"
             >
                 <slot name="label"></slot>
+                <span
+                    v-if="$attrs.required !== undefined && $attrs.required !== false"
+                    aria-hidden="true"
+                    class="rsui-form-field-slot__asterisk"
+                >*</span>
             </div>
         </div>
     </template>

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/index.js

@@ -7,6 +7,7 @@ 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'
@@ -23,6 +24,7 @@ export {
     FormFieldPasswordToggle,
     FormFieldRadioGroup,
     FormFieldSearch,
+    FormFieldSearchAsync,
     FormFieldSelect,
     FormFieldSlot,
     FormFieldText,