All files / src/components/m-singlex.vue item.vue

76.19% Statements 16/21
15% Branches 3/20
50% Functions 2/4
75% Lines 15/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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147      7x   7x     7x                                                                               7x                                                                                                                                                                                                    
<template>
<a :class="$style.root"
    :selected="parentVM.router ? active : isSelected" :readonly="parentVM.readonly" :disabled="disabled || parentVM.disabled"
    :href="currentHref" :target="target" @click="parentVM.router ? onClick($event) : select($event)" v-on="listeners"
    v-ellipsis-title
    vusion-slot-name-edit="text"
    vusion-slot-name="default">
    <i-ico v-if="icon" :name="icon" :class="$style.singleicon" notext></i-ico>
    <slot>{{ text }}</slot>
    <s-empty
        v-if="(!$slots.default)
        && !text
        && $env.VUE_APP_DESIGNER
        && !!$attrs['vusion-node-path']">
    </s-empty>
</a>
</template>
 
<script>
import { MChild } from '../m-parent.vue';
import ULink from '../u-link.vue';
import IIco from '../i-ico.vue';
import { ellipsisTitle } from '../../directives';
import SEmpty from '../s-empty.vue';
 
const trailingSlashRE = /\/?$/;
 
export default {
    name: 'm-singlex-item',
    parentName: 'm-singlex',
    groupName: 'm-singlex-group',
    directives: { ellipsisTitle },
    components: {
        IIco,
        SEmpty,
    },
    mixins: [MChild, ULink],
    props: {
        icon: String,
        text: String,
        value: null,
        disabled: { type: Boolean, default: false },
        item: Object,
        exact: { type: Boolean, default: false },
        exactHash: { type: Boolean, default: false },
    },
    data() {
        return {
            // @inherit: parentVM: undefined,
        };
    },
    computed: {
        isSelected() {
            return this.parentVM && this.parentVM.selectedVM === this;
        },
        active() {
            if (this.to === undefined && !this.destination)
                return;
            if (!this.$router)
                return console.warn(
                    '[cloud-ui] Use `<m-router-item>` but cannot find vue router.',
                );
            const current = this.$route;
            let to = this.to;
            if (this.destination) {
                if (this.destination.startsWith('http')) {
                    return false;
                }
                to = this.destination;
            }
            const target = this.$router.resolve(to).route;
            const currentPath = decodeURIComponent(current.path.replace(trailingSlashRE, '/'));
            const targetPath = decodeURIComponent((target.redirectedFrom ? this.$router.resolve(target.redirectedFrom).location.path : target.path).replace(trailingSlashRE, '/')); // @TODO: 是否要检查 query 的包含关系
            const currentHash = decodeURIComponent(current.hash);
            const targetHash = decodeURIComponent(target.hash);
            const exact = this.exact ? currentPath === targetPath : currentPath.startsWith(targetPath);
            const exactHash = this.exactHash ? currentHash === targetHash : currentHash.startsWith(targetHash);
            return exact && exactHash;
        },
    },
    methods: {
        onClick(e) {
            if (this.disabled || (this.parentVM && this.parentVM.readonly) || (this.parentVM && this.parentVM.disabled))
                return e.preventDefault();
            ULink.methods.onClick.call(this, e);
        },
        select(e) {
            // readme:点击事件可能在组件destoryed后在调用,多发于导航相关,使用isCreated来判断而不是使用parentVM来判断是因为防止有人单独mixin当前组件。
            if (!this.isCreated) {
                return;
            }
            if (this.disabled || this.parentVM.readonly || this.parentVM.disabled)
                return;
            this.$emit('click', e, this);
            this.parentVM.click(this);
 
            let cancel = false;
            this.$emit('before-select', {
                value: this.value,
                item: this.item,
                itemVM: this,
                preventDefault: () => (cancel = true),
            }, this);
            if (cancel)
                return;
            this.parentVM.select(this);
        },
    },
};
</script>
 
<style module>
.root {
    /* @Private */
    display: inline-block;
    cursor: var(--cursor-pointer);
 
    /* @Public */
    padding: 4px 12px;
}
 
.root:hover {
    background: var(--background-color-light);
}
 
.root[readonly] {
    cursor: default;
    background: none;
}
 
.root[selected] {
    background: var(--brand-primary);
    color: var(--color-white);
}
 
.root[disabled] {
    /* @Private */
    cursor: var(--cursor-not-allowed);
    background: none;
    color: var(--brand-disabled);
}
 
.root[selected][disabled] {
    background: var(--brand-disabled-light);
}
</style>