Your IP : 216.73.216.86
import './css/rich-menu-item.css';
import { Hint } from 'ui.vue3.components.hint';
export const RichMenuItemIcon = Object.freeze({
check: 'check',
copy: 'copy',
'opened-eye': 'opened-eye',
pencil: 'pencil',
'red-lock': 'red-lock',
role: 'role',
settings: 'settings',
'trash-bin': 'trash-bin',
});
// @vue/component
export const RichMenuItem = {
name: 'RichMenuItem',
components: { Hint },
props:
{
icon: {
type: String,
required: false,
default: '',
validator(value: string): boolean {
return value === '' || Object.keys(RichMenuItemIcon).includes(value);
},
},
title: {
type: String,
required: true,
},
subtitle: {
type: String,
required: false,
default: '',
},
hint: {
type: String,
required: false,
default: '',
},
disabled: {
type: Boolean,
required: false,
default: false,
},
counter: {
type: Number,
required: false,
default: 0,
},
},
computed:
{
formattedCounter(): string
{
if (this.counter === 0)
{
return '';
}
return this.counter > 99 ? '99+' : String(this.counter);
},
},
template: `
<div class="ui-rich-menu-item__container" :class="{'--disabled': disabled}">
<div class="ui-rich-menu-item__content" :class="{'--with-icon': !!icon}">
<div v-if="icon" class="ui-rich-menu-item__icon" :class="'--' + icon"></div>
<div class="ui-rich-menu-item__text-content" :class="{'--with-subtitle': !!subtitle}">
<div class="ui-rich-menu-item__title">
<div class="ui-rich-menu-item__title_text">{{ title }}</div>
<slot name="after-title"></slot>
<div v-if="counter" class="ui-rich-menu-item__title_counter">{{ formattedCounter }}</div>
</div>
<div v-if="subtitle" :title="subtitle" class="ui-rich-menu-item__subtitle">{{ subtitle }}</div>
<slot name="below-content"></slot>
</div>
<Hint v-if="hint" :text="hint"/>
</div>
</div>
`,
};