All files / src/components/u-table-view.vue drop-ghost.vue

51.28% Statements 20/39
15% Branches 3/20
80% Functions 4/5
51.35% Lines 19/37

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      7x     7x               7x             148x                                                                                                                       7x 7x 148x 148x     148x                                                              
<template>
    <div :class="$style.root" :style="currentStyle" v-show="currentStyle">
        <div :class="$style.line" :style="lineStyle" v-show="lineStyle"></div>
        <div :class="$style.mask" :style="maskStyle" v-show="maskStyle"></div>
    </div>
</template>
 
<script>
export default {
    name: 'u-table-view-drop-ghost',
    props: {
        data: Object,
    },
    data() {
        return {
            currentStyle: undefined,
            lineStyle: undefined,
            maskStyle: undefined,
            next: undefined,
        };
    },
    watch: {
        data: {
            handler(value) {
                if (!value || !value.position) {
                    this.currentStyle = undefined;
                    this.lineStyle = undefined;
                    this.maskStyle = undefined;
                    return;
                }
                const rect = value.dragoverElRect;
                if (!rect)
                    return;
                const parentElRect = value.parentElRect;
                this.currentStyle = {
                    left: '0px',
                    top: rect.top - parentElRect.top + 'px',
                    width: parentElRect.width + 'px',
                    height: rect.height + 'px',
                };
                this.lineStyle = undefined;
                this.maskStyle = undefined;
                const left = value.left || 0;
                if (value.position === 'insertBefore') {
                    this.lineStyle = {
                        left: left + 'px',
                        top: '0px',
                        // right: rect.right - scrollRect.right + 'px',
                        right: '0px',
                    };
                } else if (value.position === 'insertAfter') {
                    this.lineStyle = {
                        left: left + 'px',
                        top: rect.height + 'px',
                        right: '0px',
                    };
                } else if (value.position === 'append') {
                    this.maskStyle = {
                        top: '0px',
                        height: rect.height + 'px',
                        left: '0px',
                        right: '0px',
                    };
                }
            },
        },
    },
};
</script>
 
<style module>
.root {
    position: absolute;
    pointer-events: none;
    z-index: 999;
}
.line {
    position: absolute;
    border: 1px solid var(--table-view-drop-ghost-border-color);
}
.line::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left: 8px solid var(--table-view-drop-ghost-border-color);
    position: absolute;
    left: -1px;
    top: -4px;
}
.line::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-right: 8px solid var(--table-view-drop-ghost-border-color);
    position: absolute;
    right: -1px;
    top: -4px;
}
.line[disablednext] {
    border-color: var(--table-view-drop-ghost-disabled-border-color);
}
.line[disablednext]::before {
    border-left-color: var(--table-view-drop-ghost-disabled-border-color);
}
.line[disablednext]::after {
    border-right-color: var(--table-view-drop-ghost-disabled-border-color);
}
.mask {
    position: absolute;
    height: 0;
    background: var(--table-view-drop-ghost-mask-background);
    border: 1px dashed var(--table-view-drop-ghost-border-color);
}
</style>