Design Library
A bundle of the whole library, re-exported with Lit and the application framework, plus a business-suite app shell.
mo-avatar — A circle in the accent color holding initials or an icon, such as a person's.
mo-user-avatar — The signed-in user's initials, which open a menu with their name, their email and menu items of your own.
Installation
npm install @3mo/del
import '@3mo/del'
Usage
<mo-avatar>AZ</mo-avatar>
Examples
- Icon — An icon takes the place of the initials, for someone unknown or for a group.
- Sizes — The circle is 40px by default; its own
width, height and font-size resize it.
- Colors — The accent color fills the circle unless its own
background and color replace it.
User Avatar
- Default
- Without Email — Without
email, the menu shows only the name above its items.
- Unauthenticated — Without a
name nobody is signed in: the avatar shows an account button, which opens the application's sign-in if it has one.
API
mo-avatar
Slots
| Name | Description |
|---|
| (default) | The initials or icon. |
mo-user-avatar
Properties
| Name | Attribute | Type | Default | Description |
|---|
open | open | boolean | false | Whether the menu is open. |
name | name | string | undefined | | The user's full name, whose first and last initials the avatar shows. Without it, nobody is signed in. |
email | email | string | undefined | | The email shown under the name in the menu. |
Events
| Name | Detail | Description |
|---|
openChange | boolean | Whether the menu is open, whenever that changes. |
Slots
| Name | Description |
|---|
| (default) | Menu items, shown below the user and above the sign-out item that an application with an authenticator adds. |
mo-application-logo
Properties
| Name | Attribute | Type | Default |
|---|
source | source | string | undefined | "ApplicationLogo.source" |
mo-business-suite-authentication-dialog
Properties
| Name | Attribute | Type | Default |
|---|
open | open | boolean | false |
heading | heading | string | "" |
mo-field-net-gross-currency
Properties
| Name | Attribute | Type | Default | Description |
|---|
isGross | isGross | boolean | false | |
currency | currency | Currency | "EUR" | |
currencySymbol | currencySymbol | string | undefined | | |
selectOnFocus | selectOnFocus | boolean | false | Selects the input text when the field receives focus. |
dense | dense | boolean | false | Whether the field is dense |
value | value | NetGrossCurrency | ["undefined",false] | The field's value |
label | label | string | "" | The field's label |
readonly | readonly | boolean | false | Whether the field is readonly |
disabled | disabled | boolean | false | Whether the field is disabled |
required | required | boolean | false | Whether the field is required |
Events
| Name | Detail | Description |
|---|
change | T | undefined | Dispatched with the value when the user commits it |
input | T | undefined | Dispatched with the value while the user edits it |
validityChange | boolean | Dispatched with whether the value is valid, after every validation |
Slots
| Name | Description |
|---|
| (default) | The field's content |
start | Content to be placed at the start of the field |
end | Content to be placed at the end of the field |
CSS parts
| Name | Description |
|---|
input | The input element. |
container | Field's container |
Links
License
MIT © 3MO GmbH
关于 @3mo/del 的常见问题
@3mo/del 是什么？
A bundle of the whole library, re-exported with Lit and the application framework, plus a business-suite app shell.
如何安装 @3mo/del？
在项目目录运行 npm install @3mo/del，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@3mo/fab（x）、@3mo/key（x）、@3mo/pdf（x）、@3mo/tab（x）、@3mo/card（x）、@3mo/chip（>=0.4.2）、@3mo/flex（x）、@3mo/grid（x）、@3mo/icon（x）、@3mo/line（x）、@3mo/list（x）、@3mo/menu（x）、@3mo/swap（x）、@3mo/tree（x）、@a11d/lit（x）、@3mo/alert（x）、@3mo/color（x）、@3mo/field（x）、@3mo/radio（x）、@3mo/sheet（>=0.1.4）、@3mo/theme（x）、@3mo/anchor（x）、@3mo/button（x）、@3mo/dialog（>=0.8.4）、@3mo/drawer（x）、@3mo/slider（x）、@3mo/switch（x）、@3mo/heading（x）、@3mo/masonry（x）、@3mo/popover（>=0.10.x）、@3mo/section（x）、@3mo/tooltip（x）、@3mo/checkbox（x）、@3mo/confetti（x）、@3mo/expander（x）、@3mo/menu-bar（x）、@3mo/scroller（x）、@3mo/snackbar（x）、@3mo/splitter（x）、@3mo/timeline（x）、@3mo/accordion（x）、@3mo/data-grid（>=0.38.5）、@3mo/date-time（>=0.10.5）、@3mo/fab-group（x）、@3mo/group-box（x）、@3mo/hierarchy（x）、@3mo/throttler（x）、@3mo/code-field（>=0.1.2）、@3mo/downloader（x）、@3mo/field-pair（x）、@3mo/focus-ring（x）、@3mo/navigation（>=0.1.6）、@3mo/safe-round（x）、@3mo/color-field（x）、@3mo/empty-state（x）、@3mo/file-upload（>=0.4.3）、@3mo/icon-button（x）、@3mo/screen-size（x）、@3mo/text-fields（>=0.1.2）、@3mo/button-group（x）、@3mo/color-picker（x）、@3mo/context-menu（x）、@3mo/indexability（x）、@3mo/localization（x）、@3mo/navigability（x）、@3mo/select-field（>=0.11.2）、@3mo/split-button（x）、@3mo/swipeability（x）、@3mo/entity-dialog（>=0.6.4）、@3mo/expandability（x）、@3mo/master-detail（x）、@3mo/number-fields（x）、@3mo/selectability（x）、@3mo/checkbox-group（x）、@3mo/key-value-list（x）、@3mo/language-field（>=0.3.2）、@3mo/loading-button（x）、@3mo/loading-dialog（>=0.1.8）、@3mo/style-property（x）、@3mo/command-palette（>=0.2.3）、@3mo/linear-progress（x）、@3mo/resize-observer（x）、@3mo/segmented-input（x）、@3mo/selection-group（x）、@3mo/slot-controller（x）、@3mo/split-page-host（x）、@3mo/collapsible-card（>=0.2.2）、@3mo/copy-icon-button（>=0.1.2）、@3mo/date-time-fields（>=0.17.2）、@3mo/entity-data-grid（>=0.4.3）、@3mo/fetchable-dialog（x）、@3mo/focus-controller（x）、@3mo/selection-dialog（x）、@3mo/standard-dialogs（>=0.4.4）、@3mo/virtualized-list（x）、@a11d/lit-application（>=0.7.0）、@3mo/circular-progress（x）、@3mo/element-internals（x）、@3mo/mutation-observer（x）、@3mo/fetcher-controller（x）、@3mo/moddable-data-grid（>=0.8.6）、@3mo/pointer-controller（x）、@3mo/fetchable-data-grid（>=0.8.2）、@3mo/interval-controller（x）、@3mo/keyboard-controller（x）、@3mo/overflow-controller（x）、@3mo/media-query-observer（x）、@3mo/virtualized-scroller（x）、@3mo/file-upload-drop-area（x）、@3mo/intersection-observer（x）、@3mo/fetchable-select-field（x）、@3mo/data-grid-card-integration（x）、@3mo/infinite-scroll-controller（x）、@3mo/split-button-dialog-adapter（x）、@3mo/loading-button-dialog-adapter（x）、@3mo/instanceof-attribute-controller（x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
@3mo/del 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
@3mo/del 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。
@3mo/del 可以商用吗？
@3mo/del 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
@3mo/del 的下载量有多少？
根据 npm 官方下载统计，@3mo/del 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,020 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
@3mo/del 还在维护吗？
最新版本 0.6.9 发布于 2026/10/30（8 天前）；至今共发布 153 个版本，其中过去 12 个月发布了 27 个；首次发布于 2023/05/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。