All files / src/components/u-dropdown.vue item.vue

61.9% Statements 13/21
9.52% Branches 2/21
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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113      7x   7x     7x                                                                                                                                                                                                                
<template>
    <a
        :class="$style.root"
        :selected="parentVM.router ? active : isSelected"
        :readonly="parentVM.readonly"
        :disabled="disabled || parentVM.disabled || (groupVM && groupVM.disabled)"
        :href="currentHref"
        :target="target"
        @click="parentVM.router ? onClick($event) : onSelect($event)"
        v-on="listeners"
        v-ellipsis-title
        vusion-slot-name="default"
        vusion-slot-name-edit="text"
        @click.stop>
        <i-ico
            v-if="icon"
            :name="icon"
            :class="$style.singleicon"
            notext
        ></i-ico>
        <slot>{{ text }}</slot>
        <s-empty v-if="!text && (!$slots.default) && $env.VUE_APP_DESIGNER"></s-empty>
    </a>
</template>
 
<script>
import { MSinglexItem } from '../m-singlex.vue';
import ULink from '../u-link.vue';
import SEmpty from '../s-empty.vue';
 
export default {
    name: 'u-dropdown-item',
    components: { SEmpty },
    extends: MSinglexItem,
    groupName: 'u-dropdown-group',
    parentName: 'u-dropdown',
    methods: {
        onClick(e) {
            if (this.disabled || this.parentVM.readonly || this.parentVM.disabled || (this.groupVM && this.groupVM.disabled))
                return e.preventDefault();
            ULink.methods.onClick.call(this, e);
            if (this.parentVM.router) {
                let cancel = false;
                this.$emit('before-select', {
                    value: this.value,
                    item: this.item,
                    itemVM: this,
                    preventDefault: () => (cancel = true),
                }, this);
                if (cancel) {
                    this.close();
                    return;
                }
                this.parentVM.select(this, true);
            }
            this.close();
        },
        onSelect(e) {
            this.select(e);
            this.close();
        },
        close() {
            if (this.groupVM && this.groupVM.close) {
                this.groupVM.close();
            }
            if (this.parentVM.close) {
                this.parentVM.close();
            }
        },
    },
};
</script>
 
<style module>
.root {
    display: block;
    position: relative;
    z-index: 1;
    cursor: var(--cursor-pointer);
    line-height: 32px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--color-base);
    text-align: left;
}
.root:hover {
    color: var(--brand-primary);
}
 
.root[readonly] {
    cursor: default;
    background: none;
}
 
.root[selected] {
    color: var(--brand-primary);
}
 
.root[disabled] {
    /* @Private */
    cursor: var(--cursor-not-allowed);
    background: none;
    color: var(--font-disabled-color);
}
 
.root[selected][disabled] {
    background: var(--background-color-disabled);
}
.root .singleicon {
    margin-right: 4px;
}
</style>