PronounsPage/components/IconSelector.vue

<template>
    <div class="bg-light border rounded">
        <input ref="filter" v-model="filter" class="form-control mb-1" :placeholder="$t('crud.search')">
        <ul class="list-unstyled icons-list p-2 text-center">
            <li
                v-for="icon in visibleIcons"
                class="list-inline-item"
            >
                <button class="btn btn-outline-dark border-0 my-2" @click.prevent="$emit('change', icon.name)">
                    <Icon :v="icon.name" />
                </button>
            </li>
            <li v-if="!showAll && visibleIcons.length >= displayLimit" class="list-inline-item">
                <button class="btn btn-outline-dark border-0 my-2" @click.prevent="showAll = true">
                    <T>crud.loadAll</T>
                </button>
            </li>
        </ul>
    </div>
</template>

<script>
import icons from '../src/icons.js';

export default {
    props: {
        styles: { default: () => ['light'] },
        skipIcons: { default: () => [] },
    },
    data() {
        return {
            icons,
            filter: '',
            showAll: false,
            displayLimit: 27,
        };
    },
    computed: {
        visibleIcons() {
            return this.icons.filter(this.matches).slice(0, this.showAll ? undefined : this.displayLimit);
        },
    },
    mounted() {
        this.$refs.filter.focus();
    },
    methods: {
        matches(icon) {
            return !this.skipIcons.includes(icon.name) &&
                icon.styles.filter((v) => this.styles.includes(v)).length > 0 &&
                (
                    this.filter === '' ||
                    icon.searchTerms.filter((t) => t.includes(this.filter.toLowerCase())).length > 0
                )
            ;
        },
    },
};
</script>

<style lang="scss" scoped>
    .icons-list {
        height: 200px;
        overflow-y: auto;
    }
</style>