58 lines
971 B
Vue
58 lines
971 B
Vue
<template>
|
|
<UiButton
|
|
:class="[cn.b(), cn.has('one', count === 1), cn.has('few', count > 1)]"
|
|
:icon="icon"
|
|
type="ghost"
|
|
color="secondary"
|
|
:data-count="countContent"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({ icon: { type: String }, count: { type: Number } })
|
|
|
|
const cn = useClassname('notify-button')
|
|
|
|
const countContent = computed(() => {
|
|
return props.count > 9 ? '9+' : props.count
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.notify-button {
|
|
position: relative;
|
|
|
|
&::after {
|
|
@include txt-s-m;
|
|
|
|
display: block;
|
|
position: absolute;
|
|
background-color: $clr-red-500;
|
|
color: $clr-white;
|
|
}
|
|
|
|
&.has-one {
|
|
&::after {
|
|
content: '';
|
|
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
top: 7px;
|
|
right: 7px;
|
|
}
|
|
}
|
|
|
|
&.has-few {
|
|
&::after {
|
|
content: attr(data-count);
|
|
|
|
top: 0px;
|
|
right: 0px;
|
|
padding-inline: 4px;
|
|
border-radius: 7px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|