All files / src/components/u-actions.vue index.vue

61.9% Statements 13/21
25% Branches 2/8
20% Functions 1/5
65% Lines 13/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85      7x   7x     7x                                                                                                                                                        
<template>
<div :class="$style.root">
    <div v-show="false"><slot></slot></div>
    <u-linear-layout gap="small">
        <template v-for="itemVM in outsideVMs">
            <u-create-element tag="u-link" :key="itemVM._uid"
                v-bind="itemVM.$attrs" v-on="itemVM.$listeners"
                :data="itemVM.$vnode.data" :children="itemVM.$slots.default">
            </u-create-element>
        </template>
        <u-link v-if="insideVMs.length">{{ menuTitle }} ▾
            <u-popup :placement="placement">
                <u-menu slot="root">
                    <template v-for="itemVM in insideVMs">
                        <u-create-element tag="u-menu-item" :key="itemVM._uid"
                            v-bind="itemVM.$attrs" v-on="itemVM.$listeners"
                            :data="itemVM.$vnode.data" :children="itemVM.$slots.default">
                        </u-create-element>
                    </template>
                </u-menu>
            </u-popup>
        </u-link>
    </u-linear-layout>
</div>
</template>
 
<script>
import i18n from './i18n';
import i18nMixin from '../../mixins/i18n';
 
export default {
    name: 'u-actions',
    childName: 'u-action',
    // i18n,
    mixins: [i18nMixin('u-actions')],
    props: {
        maxCount: { type: Number, default: 3 },
        menuTitle: {
            type: String,
            default() {
                return this.$tt('more');
            },
        },
        placement: { type: String, default: 'bottom-end' },
    },
    data() {
        return { itemVMs: [], outsideVMs: [], insideVMs: [] };
    },
    watch: {
        itemVMs() {
            this.watchValue();
        },
    },
    created() {
        this.$on('add-item-vm', (itemVM) => {
            itemVM.parentVM = this;
            this.itemVMs.push(itemVM);
        });
        this.$on('remove-item-vm', (itemVM) => {
            itemVM.parentVM = undefined;
            this.itemVMs.splice(this.itemVMs.indexOf(itemVM), 1);
        });
    },
    methods: {
        watchValue() {
            const itemVMs = this.itemVMs.filter((itemVM) => !itemVM.hidden);
            if (itemVMs.length <= this.maxCount) {
                this.outsideVMs = itemVMs.slice(0, itemVMs.length);
                this.insideVMs = [];
            } else {
                this.outsideVMs = itemVMs.slice(0, this.maxCount - 1);
                this.insideVMs = itemVMs.slice(
                    this.maxCount - 1,
                    itemVMs.length,
                );
            }
        },
    },
};
</script>
 
<style module>
.root {}
</style>