@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Forms/Select.vue

@@ -16,7 +16,7 @@
             }"
         >{{ label }}</label>
         <div
-            ref="uikit-select__input-container" 
+            ref="uikit-select__input-container"
             class="uikit-select__input-container"
             :tabindex="disabled || typeahead ? -1 : 0"
             role="combobox"
@@ -41,7 +41,7 @@
             >
                 <slot name="selectValue" :item="modelValue">
                     {{ modelValue ? modelValue.label : placeholder }}
-    
+
                     <div
                         v-if="subtext"
                         v-dark="isDarkMode"
@@ -148,10 +148,10 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Watch, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 interface IItem {
     value?: string | null
@@ -160,304 +160,312 @@ interface IItem {
     subtext?: string
 }
 
-/**
- * @see [Designs for Inputs](https://marvelapp.com/adf8ab3/screen/70331421)
- */
-@Component({
-    name: 'PocketSelect',
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Select extends Vue {
-    @Prop() label?: string
-    @Prop() modelValue?: IItem
-    @Prop() subtext?: string
-    @Prop() placeholder?: string
-    @Prop() data!: IItem[]
-    @Prop() disabled?: boolean
-    @Prop() autoFocus?: boolean
-    @Prop() showEmptyOption?: boolean
-    @Prop() emptyOptionLabel?: string
-    @Prop() typeahead?: boolean
-    @Prop() error?: boolean
-    @Prop() openMenuAbove?: boolean
-    @Prop() customDropdownTop?: number
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) dropdownOverride!: boolean // Can override the icon to be an X instead
-    @Prop({ default: false }) showTypeaheadClear!: boolean
-
-    hover = false
-    focus = false
-    showDropdown = false
-    searchText = ''
-    menuHeight: number | null = null
-
-    get filteredData () {
-        if (this.typeahead && this.searchText) {
-            return this.data.filter(item => item.label.toLowerCase().includes(this.searchText.toLowerCase()))
-        } else {
-            if (this.showEmptyOption && this.modelValue) {
-                return [{ value: null, label: this.emptyOptionLabel || '' }, ...this.data ]
-            }
-            return this.data
-        }
+const {
+    label = '',
+    modelValue = null,
+    subtext = '',
+    placeholder = '',
+    data,
+    disabled = false,
+    autoFocus = false,
+    showEmptyOption = false,
+    emptyOptionLabel = '',
+    typeahead = false,
+    error = false,
+    openMenuAbove = false,
+    customDropdownTop = 0,
+    isDarkMode = false,
+    dropdownOverride = false,
+    showTypeaheadClear = false,
+} = defineProps<{
+    label?: string
+    modelValue?: IItem | null
+    subtext?: string
+    placeholder?: string
+    data: IItem[]
+    disabled?: boolean
+    autoFocus?: boolean
+    showEmptyOption?: boolean
+    emptyOptionLabel?: string
+    typeahead?: boolean
+    error?: boolean
+    openMenuAbove?: boolean
+    customDropdownTop?: number
+    isDarkMode?: boolean
+    dropdownOverride?: boolean  // Can override the icon to be an X instead
+    showTypeaheadClear?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [modelVal: IItem | null]
+    'linkClick': [item: IItem | null]
+    'openDropdown': [open: boolean]
+    'close': []
+}>()
+
+const hover = ref(false)
+const focus = ref(false)
+const showDropdown = ref(false)
+const searchText = ref('')
+const menuHeight = ref<number | null>(null)
+
+const inputRef = useTemplateRef<HTMLElement>('uikit-select__input')
+const inputContainerRef = useTemplateRef<HTMLElement>('uikit-select__input-container')
+const menuRef = useTemplateRef<HTMLElement>('menu')
+const itemRefs = useTemplateRef<HTMLElement[]>('uikit-select__items')
+
+const filteredData = computed(() => {
+    if (typeahead && searchText.value) {
+        return data.filter(item => item.label.toLowerCase().includes(searchText.value.toLowerCase()))
+    } else {
+        if (showEmptyOption && modelValue) {
+            return [{ value: null, label: emptyOptionLabel || '' }, ...data ]
+        }
+        return data
     }
+})
 
-    get menuPositionTop () {
-        if (this.customDropdownTop) return this.customDropdownTop
-
-        if (this.menuHeight) return `-${this.menuHeight}`
+const menuPositionTop = computed(() => {
+    if (customDropdownTop) return customDropdownTop
 
-        if (this.subtext) return 60
+    if (menuHeight.value) return `-${menuHeight.value}`
 
-        return 36
-    }
+    if (subtext) return 60
 
-    mounted () {
-        if (this.autoFocus) {
-            if (this.typeahead) {
-                (this.$refs['uikit-select__input'] as HTMLElement).focus()
-            } else {
-                (this.$refs['uikit-select__input-container'] as HTMLElement).focus()
-            }
-        }
+    return 36
+})
 
-        if (this.typeahead && this.modelValue?.label) {
-            this.searchText = this.modelValue.label
+onMounted(() => {
+    if (autoFocus) {
+        if (typeahead) {
+            inputRef.value?.focus()
+        } else {
+            inputContainerRef.value?.focus()
         }
-
-        this.updateMenuHeight()
     }
 
-    keydownListener (e: Event | KeyboardEvent) {
-        if (this.focus && 'key' in e && e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
-            e.stopPropagation()
-        }
+    if (typeahead && modelValue?.label) {
+        searchText.value = modelValue.label
     }
 
-    blurMenu (e?: FocusEvent) {
-        if ((e?.relatedTarget as Element)?.tagName === 'LI') {
-            return
-        }
+    updateMenuHeight()
+})
 
-        this.focus = false
-        this.showDropdown = false
+const keydownListener = (e: Event | KeyboardEvent) => {
+    if (focus.value && 'key' in e && e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+        e.stopPropagation()
+    }
+}
 
-        if (this.typeahead && !this.searchText) {
-            this.emitUpdateModelValue(null)
-        } else if (this.typeahead && this.searchText && this.filteredData.length < 1 && !this.dropdownOverride) {
-            this.emitUpdateModelValue(null)
-            this.searchText = ''
-        } else if (this.typeahead && this.searchText && this.filteredData.length === 1 && this.filteredData[0]) {
-            this.emitUpdateModelValue(this.filteredData[0])
-        }
+const blurMenu = (e?: FocusEvent) => {
+    if ((e?.relatedTarget as Element)?.tagName === 'LI') {
+        return
     }
 
-    updateMenuHeight () {
-        if (this.openMenuAbove) {
-            const originalShowDropdownValue = this.showDropdown
-            if (!this.showDropdown) {
-                this.showDropdown = true
-            }
-            this.$nextTick(() => {
-                const menu = this.$refs['menu'] as HTMLElement
-        
-                if (menu) {
-                    this.menuHeight = menu.getBoundingClientRect().height
-                }
-                if (!originalShowDropdownValue) {
-                    this.showDropdown = false
-                }
-            })
-        }
-
-        this.menuHeight = null
+    focus.value = false
+    showDropdown.value = false
+
+    if (typeahead && !searchText.value) {
+        emitUpdateModelValue(null)
+    } else if (typeahead && searchText.value && filteredData.value.length < 1 && !dropdownOverride) {
+        emitUpdateModelValue(null)
+        searchText.value = ''
+    } else if (typeahead && searchText.value && filteredData.value.length === 1 && filteredData.value[0]) {
+        emitUpdateModelValue(filteredData.value[0])
     }
+}
 
-    keyPressedItem (e: KeyboardEvent) {
-        // select option on enter or space or tab (but not shift tab)
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
-            const item = this.filteredData.find(i => itemValue ? String(i.value) === itemValue : i.value === null);
-            (this.$refs['uikit-select__input-container'] as HTMLElement).focus()
-            item && this.selectItem(item)
-        }
-        // close menu on tab
-        if (e.key === 'Tab' && !e.shiftKey) {
-            this.blurMenu()
-        }
-        // navigate items with up key
-        if (e.key === 'ArrowUp') {
-            e.preventDefault()
-            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
-            const itemIndex = this.filteredData.findIndex(
-                i => itemValue ? String(i.value) === itemValue : i.value === null
-            )
-            const prevIndex = itemIndex < 1 ? 0 : itemIndex - 1
-            const prevValue = this.filteredData[prevIndex]?.value
-            const items = this.$refs['uikit-select__items'] as HTMLElement[]
-            const prevItem = items.find(
-                item => prevValue
-                    ? String(prevValue) === item.getAttribute('data-value')
-                    : item.getAttribute('data-value') === null
-            )
-            if (prevItem) {
-                prevItem.focus()
-                this.showDropdown = true
-                this.focus = true
-            }
+const updateMenuHeight = () => {
+    if (openMenuAbove) {
+        const originalShowDropdownValue = showDropdown.value
+        if (!showDropdown.value) {
+            showDropdown.value = true
         }
-        // navigate items with down key
-        if (e.key === 'ArrowDown') {
-            e.preventDefault()
-            const data = this.filteredData
-            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
-            const itemIndex = data.findIndex(i => itemValue ? String(i.value) === itemValue : i.value === null)
-            const nextIndex = itemIndex >= data.length - 1 ? data.length - 1 : itemIndex + 1
-            const nextValue = this.filteredData[nextIndex]?.value
-            const items = this.$refs['uikit-select__items'] as HTMLElement[]
-            const nextItem = items.find(
-                item => nextValue
-                    ? String(nextValue) === item.getAttribute('data-value') 
-                    : item.getAttribute('data-value') === null
-            )
-            if (nextItem) {
-                nextItem.focus()
-                this.showDropdown = true
-                this.focus = true
+        nextTick(() => {
+            if (menuRef.value) {
+                menuHeight.value = menuRef.value.getBoundingClientRect().height || null
             }
-        }
-    }
-    
-    keyPressedContainer (e: KeyboardEvent) {
-        if (!(e.target as HTMLElement).className.includes('uikit-select__input-container')
-            && !(e.target as HTMLElement).className.includes('uikit-select__input')
-        ) {
-            return
-        }
-        
-        // open showDropdown on down arrow and select first item
-        if (e.key === 'ArrowDown' 
-            || (e.key === 'Tab' && !e.shiftKey && this.typeahead && this.searchText && this.showDropdown)) {
-            e.preventDefault()
-            const firstValue = this.filteredData[0]?.value
-            const items = this.$refs['uikit-select__items'] as HTMLElement[]
-            const firstItem = items.find(
-                item => firstValue
-                    ? String(firstValue) === item.getAttribute('data-value') 
-                    : item.getAttribute('data-value') === null
-            )
-            if (firstItem) {
-                firstItem.focus()
-                this.showDropdown = true
-                this.focus = true
+            if (!originalShowDropdownValue) {
+                showDropdown.value = false
             }
-        }
+        })
+    }
 
-        // toggle showDropdown on enter or space + not typeahead
-        if (e.key === 'Enter' || (e.key === ' ' && !this.typeahead)) {
-            e.preventDefault()
-            this.showDropdown = !this.showDropdown
-        }
+    menuHeight.value = null
+}
 
-        // escape to close dropdown
-        if (e.key === 'Escape') {
-            e.preventDefault()
-            e.stopPropagation()
-            this.showDropdown = false
-        }
+const keyPressedItem = (e: KeyboardEvent) => {
+    // select option on enter or space or tab (but not shift tab)
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        const itemValue = (e.target as HTMLElement).getAttribute('data-value')
+        const item = filteredData.value.find(i => itemValue ? String(i.value) === itemValue : i.value === null)
+        inputContainerRef.value?.focus()
+        item && selectItem(item)
     }
-
-    mouseOverSelect () {
-        this.hover = this.disabled ? false : true
+    // close menu on tab
+    if (e.key === 'Tab' && !e.shiftKey) {
+        blurMenu()
     }
-
-    focusSelect () {
-        this.focus = this.disabled ? false : true
-        if (this.typeahead && !this.searchText) {
-            this.showDropdown = true
+    // navigate items with up key
+    if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        const itemValue = (e.target as HTMLElement).getAttribute('data-value')
+        const itemIndex = filteredData.value.findIndex(
+            i => itemValue ? String(i.value) === itemValue : i.value === null
+        )
+        const prevIndex = itemIndex < 1 ? 0 : itemIndex - 1
+        const prevValue = filteredData.value[prevIndex]?.value
+        const prevItem = itemRefs.value?.find(
+            item => prevValue
+                ? prevValue === item.getAttribute('data-value')
+                : item.getAttribute('data-value') === null
+        )
+        if (prevItem) {
+            prevItem.focus()
+            showDropdown.value = true
+            focus.value = true
         }
     }
-
-    selectItem (item: IItem) {
-        if (item) {
-            this.showDropdown = false
+    // navigate items with down key
+    if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        const itemValue = (e.target as HTMLElement).getAttribute('data-value')
+        const itemIndex = filteredData.value.findIndex(i =>
+            itemValue
+                ? String(i.value) === itemValue
+                : i.value === null
+        )
+        const nextIndex = itemIndex >= filteredData.value.length - 1 ? filteredData.value.length - 1 : itemIndex + 1
+        const nextValue = filteredData.value[nextIndex]?.value
+        const nextItem = itemRefs.value?.find(
+            item => nextValue
+                ? nextValue === item.getAttribute('data-value')
+                : item.getAttribute('data-value') === null
+        )
+        if (nextItem) {
+            nextItem.focus()
+            showDropdown.value = true
+            focus.value = true
         }
+    }
+}
 
-        if (item.type === 'link') {
-            this.emitLinkClick(item.value ? item : null)
-        } else {
-            this.emitUpdateModelValue(item.value ? item : null)
-        }
+const keyPressedContainer = (e: KeyboardEvent) => {
+    if (!(e.target as HTMLElement).className.includes('uikit-select__input-container')
+        && !(e.target as HTMLElement).className.includes('uikit-select__input')
+    ) {
+        return
     }
 
-    performCloseActions () {
-        /**
-         * If the dropdown is showing an X, there is some logic we need...
-         * The first time, it should clear out search text -- the second time it should collapse dropdown
-         *  */
-        if (this.searchText) {
-            this.emitUpdateModelValue(null)
-            this.searchText = ''
-        } else {
-            this.showDropdown = false
-            this.emitClose()
+    // open showDropdown on down arrow and select first item
+    if (e.key === 'ArrowDown'
+        || (e.key === 'Tab' && !e.shiftKey && typeahead && searchText.value && showDropdown.value)) {
+        e.preventDefault()
+        const firstValue = filteredData.value[0]?.value
+        const firstItem = itemRefs.value?.find(
+            item => firstValue
+                ? firstValue === item.getAttribute('data-value')
+                : item.getAttribute('data-value') === null
+        )
+        if (firstItem) {
+            firstItem.focus()
+            showDropdown.value = true
+            focus.value = true
         }
     }
 
-    @Watch('showDropdown')
-    showDropdownChanged (newVal: boolean) {
-        this.emitOpenDropdown(newVal)
+    // toggle showDropdown on enter or space + not typeahead
+    if (e.key === 'Enter' || (e.key === ' ' && !typeahead)) {
+        e.preventDefault()
+        showDropdown.value = !showDropdown.value
     }
 
-    @Watch('modelValue')
-    valueChanged (newVal: IItem) {
-        if (this.typeahead) {
-            this.searchText = newVal?.label || ''
-        }
+    // escape to close dropdown
+    if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        showDropdown.value = false
     }
+}
 
-    @Watch('searchText')
-    searchTextChanged (newVal: string) {
-        if (this.typeahead) {
-            const matchedItem = this.filteredData.find(item =>
-                item.label.toLowerCase() === newVal.toLowerCase()
-            )
-            if (!matchedItem) {
-                this.showDropdown = true
-            }
-            if (this.filteredData.length === 1 && matchedItem && this.modelValue?.label !== matchedItem.label) {
-                this.selectItem(matchedItem)
-            }
+const mouseOverSelect = () => {
+    hover.value = disabled ? false : true
+}
 
-            this.updateMenuHeight()
-        }
+const focusSelect = () => {
+    focus.value = disabled ? false : true
+    if (typeahead && !searchText.value) {
+        showDropdown.value = true
+    }
+}
+
+const selectItem = (item: IItem) => {
+    if (item) {
+        showDropdown.value = false
     }
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (item: IItem | null) {
-        return item
+    if (item.type === 'link') {
+        emitLinkClick(item.value ? item : null)
+    } else {
+        emitUpdateModelValue(item.value ? item : null)
     }
+}
 
-    @Emit('linkClick')
-    emitLinkClick (item: IItem | null) {
-        return item
+const performCloseActions = () => {
+    /**
+     * If the dropdown is showing an X, there is some logic we need...
+     * The first time, it should clear out search text -- the second time it should collapse dropdown
+     *  */
+    if (searchText.value) {
+        emitUpdateModelValue(null)
+        searchText.value = ''
+    } else {
+        showDropdown.value = false
+        emitClose()
     }
+}
+
+watch(showDropdown, (newVal: boolean) => {
+    emitOpenDropdown(newVal)
+})
 
-    @Emit('openDropdown')
-    emitOpenDropdown (open: boolean) {
-        return open
+watch(() => modelValue, (newVal) => {
+    if (typeahead) {
+        searchText.value = newVal?.label || ''
     }
+})
 
-    @Emit('close')
-    emitClose () {
-        return true
+watch(searchText, (newVal: string) => {
+    if (typeahead) {
+        const matchedItem = filteredData.value.find(item =>
+            item.label.toLowerCase() === newVal.toLowerCase()
+        )
+        if (!matchedItem) {
+            showDropdown.value = true
+        }
+        if (filteredData.value.length === 1 && matchedItem && modelValue?.label !== matchedItem.label) {
+            selectItem(matchedItem)
+        }
+
+        updateMenuHeight()
     }
+})
+
+const emitUpdateModelValue = (item: IItem | null) => {
+    emit('update:modelValue', item)
+}
+
+const emitLinkClick = (item: IItem | null) => {
+    emit('linkClick', item)
+}
+
+const emitOpenDropdown = (open: boolean) => {
+    emit('openDropdown', open)
+}
+
+const emitClose = () => {
+    emit('close')
 }
 </script>
 
@@ -613,7 +621,7 @@ export default class Select extends Vue {
             border-color: $pewter;
             color: $fog;
             caret-color: $banana-bread;
-            
+
             &--hover {
                 background-color: $charcoal;
             }