@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Forms/Select.vue

@@ -0,0 +1,670 @@
+<template>
+    <div
+        class="uikit-select"
+        @mouseover="mouseOverSelect"
+        @mouseout="hover = false"
+        @keydown="keydownListener"
+    >
+        <label
+            v-if="label"
+            v-dark="isDarkMode"
+            class="uikit-select__label"
+            :class="{
+                'uikit-select__label--hover': hover,
+                'uikit-select__label--focus': focus,
+                'uikit-select__label--error': error,
+            }"
+        >{{ label }}</label>
+        <div
+            ref="uikit-select__input-container" 
+            class="uikit-select__input-container"
+            :tabindex="disabled || typeahead ? -1 : 0"
+            role="combobox"
+            :aria-label="label"
+            :aria-expanded="(showDropdown && !disabled) ? 'true' : 'false'"
+            @focus="focusSelect"
+            @blur="focus = false; showDropdown = false;"
+            @keydown.stop="keyPressedContainer"
+        >
+            <div
+                v-if="!typeahead"
+                v-dark="isDarkMode"
+                class="uikit-select__value"
+                :class="{
+                    'uikit-select__value--placeholder': !modelValue,
+                    'uikit-select__value--hover': hover,
+                    'uikit-select__value--focus': focus,
+                    'uikit-select__value--disabled': disabled,
+                    'uikit-select__value--subtext': subtext
+                }"
+                @click="showDropdown = !showDropdown"
+            >
+                {{ modelValue ? modelValue.label : placeholder }}
+
+                <div
+                    v-if="subtext"
+                    v-dark="isDarkMode"
+                    class="uikit-select__subtext"
+                    :class="{
+                        'uikit-select__subtext--placeholder': !subtext,
+                        'uikit-select__subtext--hover': hover,
+                        'uikit-select__subtext--focus': focus,
+                        'uikit-select__subtext--disabled': disabled,
+                    }"
+                >
+                    {{ modelValue ? modelValue.subtext : subtext }}
+                </div>
+            </div>
+            <input
+                v-else
+                v-model="searchText"
+                v-dark="isDarkMode"
+                type="text"
+                class="uikit-select__input"
+                :class="{
+                    'uikit-select__input--placeholder': !modelValue && !searchText,
+                    'uikit-select__input--hover': hover,
+                    'uikit-select__input--focus': focus,
+                    'uikit-select__input--disabled': disabled,
+                    'uikit-select__input--show-dropdown': showDropdown,
+                }"
+                :placeholder="placeholder"
+                :aria-label="label"
+                @focus="focusSelect"
+                @blur="blurMenu"
+                @keydown.stop="keyPressedContainer"
+                @click="showDropdown = true"
+            >
+            <Icon
+                v-dark="isDarkMode"
+                type="accordionArrow"
+                class="uikit-select__arrow"
+                :class="{
+                    'uikit-select__arrow--hover': hover,
+                    'uikit-select__arrow--focus': focus,
+                    'uikit-select__arrow--show-dropdown': showDropdown,
+                }"
+                @click="showDropdown = true"
+            />
+            <ul
+                v-show="showDropdown && !disabled"
+                ref="menu"
+                v-dark="isDarkMode"
+                :style="{ top: `${menuPositionTop}px` }"
+                class="uikit-select__list"
+                :class="{
+                    'uikit-select__list--subtext': subtext,
+                }"
+            >
+                <li
+                    v-for="item in filteredData"
+                    :key="JSON.stringify(item)"
+                    ref="uikit-select__items"
+                    v-dark="isDarkMode"
+                    class="uikit-select__item"
+                    :class="{ 
+                        'uikit-select__item--link': item.type === 'link',
+                        'uikit-select__item--subtext': item.subtext
+                    }"
+                    :value="item.value || undefined"
+                    tabindex="0"
+                    @click="selectItem(item)"
+                    @keydown="keyPressedItem"
+                    @mousedown.prevent
+                >
+                    {{ item.label }}
+
+                    <div
+                        v-if="item.subtext"
+                        v-dark="isDarkMode"
+                        class="uikit-select__item-subtext"
+                    >
+                        {{ item.subtext }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
+
+interface IItem {
+    value?: string | null
+    label: string
+    type?: 'option' | 'link'
+    subtext?: string
+}
+
+/**
+ * @see [Designs for Inputs](https://marvelapp.com/adf8ab3/screen/70331421)
+ */
+@Component({
+    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({ default: false }) isDarkMode!: 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
+        }
+    }
+
+    get menuPositionTop () {
+        if (this.menuHeight) return `-${this.menuHeight}`
+
+        if (this.subtext) return 60
+
+        return 36
+    }
+
+    mounted () {
+        if (this.autoFocus) {
+            (this.$refs['uikit-select__input-container'] as HTMLElement).focus()
+        }
+
+        if (this.typeahead && this.modelValue?.label) {
+            this.searchText = this.modelValue.label
+        }
+
+        this.updateMenuHeight()
+    }
+
+    keydownListener (e: Event | KeyboardEvent) {
+        if (this.focus && 'key' in e && e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+            e.stopPropagation()
+        }
+    }
+
+    blurMenu (e?: FocusEvent) {
+        if ((e?.relatedTarget as Element)?.tagName === 'LI') {
+            return
+        }
+
+        this.focus = false
+        this.showDropdown = false
+
+        if (this.typeahead && !this.searchText) {
+            this.emitUpdateModelValue(null)
+        }
+        if (this.typeahead && this.searchText && this.filteredData.length !== 1) {
+            this.emitUpdateModelValue(null)
+            this.searchText = ''
+        } else if (this.typeahead && this.searchText && this.filteredData[0]) {
+            this.emitUpdateModelValue(this.filteredData[0])
+        }
+    }
+
+    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
+    }
+
+    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('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('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('value')
+                    : item.getAttribute('value') === null
+            )
+            if (prevItem) {
+                prevItem.focus()
+                this.showDropdown = true
+                this.focus = true
+            }
+        }
+        // navigate items with down key
+        if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            const data = this.filteredData
+            const itemValue = (e.target as HTMLElement).getAttribute('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('value') 
+                    : item.getAttribute('value') === null
+            )
+            if (nextItem) {
+                nextItem.focus()
+                this.showDropdown = true
+                this.focus = true
+            }
+        }
+    }
+    
+    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('value') 
+                    : item.getAttribute('value') === null
+            )
+            if (firstItem) {
+                firstItem.focus()
+                this.showDropdown = true
+                this.focus = true
+            }
+        }
+
+        // toggle showDropdown on enter or space + not typeahead
+        if (e.key === 'Enter' || (e.key === ' ' && !this.typeahead)) {
+            e.preventDefault()
+            this.showDropdown = !this.showDropdown
+        }
+
+        // escape to close dropdown
+        if (e.key === 'Escape') {
+            e.preventDefault()
+            e.stopPropagation()
+            this.showDropdown = false
+        }
+    }
+
+    mouseOverSelect () {
+        this.hover = this.disabled ? false : true
+    }
+
+    focusSelect () {
+        this.focus = this.disabled ? false : true
+        if (this.typeahead && !this.searchText) {
+            this.showDropdown = true
+        }
+    }
+
+    selectItem (item: IItem) {
+        if (item) {
+            this.showDropdown = false
+        }
+
+        if (item.type === 'link') {
+            this.emitLinkClick(item.value ? item : null)
+        } else {
+            this.emitUpdateModelValue(item.value ? item : null)
+        }
+    }
+
+    @Watch('showDropdown')
+    showDropdownChanged (newVal: boolean) {
+        this.emitOpenDropdown(newVal)
+    }
+
+    @Watch('modelValue')
+    valueChanged (newVal: IItem) {
+        if (this.typeahead) {
+            this.searchText = newVal?.label || ''
+        }
+    }
+
+    @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)
+            }
+
+            this.updateMenuHeight()
+        }
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (item: IItem | null) {
+        return item
+    }
+
+    @Emit('linkClick')
+    emitLinkClick (item: IItem | null) {
+        return item
+    }
+
+    @Emit('openDropdown')
+    emitOpenDropdown (open: boolean) {
+        return open
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-select {
+    position: relative;
+
+    &__label {
+        font-size: 13px;
+        line-height: 14px;
+        margin: 0 0 6px 12px;
+        color: $slate-01;
+        display: block;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--hover {
+            color: $slate-03;
+
+            &--dark {
+                color: $fog;
+            }
+        }
+
+        &--focus {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &--error {
+            color: $red-pegasus;
+        }
+    }
+
+    &__input-container {
+        outline: none;
+        position: relative;
+    }
+
+    &__value,
+    &__input {
+        background-color: $white;
+        border: 1px solid rgba($pewter, 0.85);
+        color: $brand-black;
+        border-radius: 3px;
+        caret-color: $brand-blue;
+        padding: 9px 11px;
+        font-size: 15px;
+        line-height: 18px;
+        width: 100%;
+        height: 36px;
+        box-sizing: border-box;
+        cursor: default;
+        position: relative;
+        z-index: 1;
+        outline: none;
+        appearance: none;
+
+        &--dark {
+            background-color: $moonlit-ocean;
+            border-color: $pewter;
+            color: $white;
+            caret-color: $banana-bread;
+        }
+
+        &--placeholder,
+        &::placeholder {
+            color: $pewter;
+        }
+
+        &--hover {
+            border: 1px solid $baby-blue;
+
+            &--dark {
+                border: 0.5px solid $banana-bread;
+            }
+        }
+
+        &--focus {
+            border: 1px solid $brand-blue;
+
+            &--dark {
+                border-color: $banana-bread;
+            }
+        }
+
+        &--disabled {
+            background: $gray-background;
+            border: 1px solid $gray-background;
+            color: $slate-03;
+
+            &--dark {
+                border-color: $moonlit-ocean;
+                background-color: $moonlit-ocean;
+            }
+        }
+    }
+
+    &__input {
+        cursor: text !important;
+
+        &--error {
+            border: 1px solid $red-pegasus;
+        }
+
+        &--show-dropdown {
+            border-radius: 3px 3px 0 0;
+        }
+    }
+
+    &__value {
+        user-select: none;
+
+        &--subtext {
+            height: 60px;
+
+            &--dark {
+                background-color: $moonlit-ocean;
+                border-color: $pewter;
+                color: $fog;
+                caret-color: $banana-bread;
+            }
+        }
+    }
+
+    &__item-subtext,
+    &__subtext {
+        font-size: 13px;
+        line-height: 16px;
+        text-align: left;
+        color: $slate;
+        margin: 4px 0 0 0;
+
+        &--dark {
+            &--hover {
+                background-color: $charcoal;
+            }
+
+            border-color: $pewter;
+            color: $fog;
+            caret-color: $banana-bread;
+        }
+    }
+
+    &__arrow {
+        position: absolute;
+        right: 13px;
+        top: 14px;
+        color: $pewter;
+        width: 12px;
+        height: 7px;
+        z-index: 1;
+
+        &--hover {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &--focus {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &--show-dropdown {
+            color: $brand-blue;
+            transform: rotate(180deg);
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+    }
+
+    &__list {
+        box-shadow: 0 4px 12px 0 rgba($brand-black, 0.1);
+        margin: 0;
+        padding: 10px 0;
+        list-style: none;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        max-height: 187px;
+        overflow: auto;
+        background: $white;
+        z-index: 2;
+        border-radius: 0 0 6px 6px;
+
+        &--dark {
+            background-color: $moonlit-ocean;
+            box-shadow: 0 4px 12px 0 rgba($charcoal, 0.1);
+            color: $white;
+        }
+
+        &--subtext {
+            padding: 0 0;
+        }
+    }
+
+    &__item {
+        padding: 5px 11px;
+        font-size: 15px;
+        line-height: 20px;
+        cursor: default;
+        user-select: none;
+
+        &--link {
+            color: $brand-blue;
+            font-size: 15px;
+            padding: 9px 17px;
+            font-weight: 600;
+            cursor: pointer;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &:hover,
+        &:focus {
+            background: $gray-background;
+            outline: none;
+        }
+
+        &--dark {
+            &:hover,
+            &:focus {
+                background-color: $charcoal;
+            }
+        }
+
+        &--subtext {
+            padding: 9px 11px;
+            border-bottom: 1px solid $fog;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &--dark {
+                border-bottom: 1px solid $ash;
+            }
+        }
+    }
+}
+</style>