104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div>{{ t('signal') }}({{signals.content.length}})</div>
|
|
<hr>
|
|
<div class="vcd-signal-signals-display">
|
|
<div v-for="(signal, index) in signals.content" :key="index"
|
|
@click="clickItem(signal)"
|
|
class="vcd-signal-signal-item"
|
|
:class="globalLookup.currentWires.has(signal) ? 'vcd-treeview-selected' : ''">
|
|
<div><span class="iconfont icon-wave-square"></span> {{ signal.name }}</div>
|
|
<div>
|
|
<div :class="signal.size > 1 ? 'vcd-signal-signal-caption' : ''">
|
|
{{ makeSignalCaption(signal) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { emitter, globalLookup } from '@/hook/global';
|
|
|
|
/* eslint-disable */
|
|
export default {
|
|
name: 'signals',
|
|
props: {},
|
|
setup() {
|
|
const { t } = useI18n();
|
|
|
|
// signal : link, name, size, type
|
|
const signals = reactive({
|
|
content: []
|
|
});
|
|
|
|
emitter.on('tree-view', sendWires => {
|
|
signals.content.length = 0;
|
|
signals.content = sendWires;
|
|
});
|
|
|
|
function makeSignalCaption(signal) {
|
|
return signal.size === 1 ? '' : `${signal.size - 1}:0`;
|
|
}
|
|
|
|
function clickItem(signal) {
|
|
if (globalLookup.currentWires.has(signal)) {
|
|
globalLookup.currentWires.delete(signal);
|
|
} else {
|
|
globalLookup.currentWires.add(signal);
|
|
}
|
|
}
|
|
|
|
return {
|
|
signals,
|
|
clickItem,
|
|
globalLookup,
|
|
makeSignalCaption,
|
|
t
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.icon-wave-square {
|
|
color: var(--signal-default-color);
|
|
}
|
|
|
|
.vcd-signal-signals-display {
|
|
color: var(--sidebar-item-text);
|
|
padding: 0px 8px;
|
|
}
|
|
|
|
.vcd-signal-signal-item {
|
|
margin: 3px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 25px;
|
|
padding-left: 3px;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.vcd-signal-signal-item::selection {
|
|
background: none;
|
|
}
|
|
|
|
.vcd-signal-signal-item:hover {
|
|
background-color: var(--vscode-button-hoverBackground);
|
|
border-radius: .3em;
|
|
}
|
|
|
|
.vcd-signal-signal-caption {
|
|
color: var(--sidebar-item-text);
|
|
border-radius: .5em;
|
|
background-color: var(--color-deepPurple);
|
|
padding: 3px;
|
|
font-size: 15px;
|
|
}
|
|
</style> |