thelounge/client/components/Channel.vue

90 lines
2.2 KiB
Vue

<template>
<!-- TODO: investigate -->
<ChannelWrapper ref="wrapper" v-bind="$props">
<span class="name">{{ channel.name }}</span>
<span
v-if="channel.unread"
:class="{highlight: channel.highlight && !channel.muted}"
class="badge"
>{{ unreadCount }}</span
>
<template v-if="channel.type === 'channel'">
<span
v-if="channel.state === 0"
class="parted-channel-tooltip tooltipped tooltipped-w"
aria-label="Not currently joined"
>
<span class="parted-channel-icon" />
</span>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
<button class="close" aria-label="Leave" @click.stop="close()" />
</span>
</template>
<template v-else>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
<button class="close" aria-label="Close" @click.stop="close()" />
</span>
</template>
</ChannelWrapper>
</template>
<script lang="ts">
import {PropType, defineComponent, computed} from "vue";
import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
import useCloseChannel from "../js/hooks/use-close-channel";
import {ClientChan, ClientNetwork} from "../js/types";
import ChannelWrapper from "./ChannelWrapper.vue";
// export default defineComponent({
// name: "Channel",
// components: {
// ChannelWrapper,
// },
// props: {
// network: {type: Object as PropType<ClientNetwork>, required: true},
// channel: {type: Object as PropType<ClientChan>, required: true},
// active: Boolean,
// isFiltering: Boolean,
// },
// computed: {
// unreadCount(): string {
// return roundBadgeNumber(this.channel.unread);
// },
// },
// methods: {
// close(): void {
// this.$root?.closeChannel(this.channel);
// },
// },
// });
//
export default defineComponent({
name: "Channel",
components: {
ChannelWrapper,
},
props: {
network: {
type: Object as PropType<ClientNetwork>,
required: true,
},
channel: {
type: Object as PropType<ClientChan>,
required: true,
},
active: Boolean,
isFiltering: Boolean,
},
setup(props) {
const unreadCount = computed(() => roundBadgeNumber(props.channel.unread));
const close = useCloseChannel(props.channel);
return {
unreadCount,
close,
};
},
});
</script>