npm - easy-component-ui - Versions diffs - 3.0.14 → 4.0.2 - Mend

easy-component-ui 3.0.14 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (741) hide show

package/LICENSE CHANGED Viewed

@@ -1,21 +1,21 @@
-MIT License
-Copyright (c) 2024 LuminaQAQ
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+Copyright (c) 2024 LuminaQAQ
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md CHANGED Viewed

@@ -1,162 +1,162 @@
-# Easy Component UI
-![Easy-ui](./logo.png)
-[![NPM version](https://img.shields.io/npm/v/easy-component-ui.svg?color=red)](https://www.npmjs.com/package/easy-component-ui)
-![npm](https://img.shields.io/npm/dw/easy-component-ui)
-![npm](https://img.shields.io/npm/dt/easy-component-ui)
-[![GitHub stars](https://img.shields.io/github/stars/LuminaQAQ/ea-ui-component.svg?color=#42b983)](https://github.com/LuminaQAQ/ea-ui-component/stargazers)
-[![GitHub forks](https://img.shields.io/github/forks/LuminaQAQ/ea-ui-component.svg)](https://github.com/LuminaQAQ/ea-ui-component/network/members)
-[![License](https://img.shields.io/npm/l/easy-component-ui.svg)](https://github.com/LuminaQAQ/ea-ui-component/blob/main/LICENSE)
-`Easy Component UI`（简称 `ea-ui`）是一套使用原生 `Web Components` 规范开发的跨框架 UI 组件库。该框架参考了[Element-ui](https://element.eleme.cn/#/zh-CN/component/installation)，所以不能说是很像吧，但可以说是一模一样 😂(打算有时间把所有的都模仿一遍)。[查看文档](https://luminaqaq.github.io/ea-ui-component/)
-[GitHub 项目地址](https://github.com/LuminaQAQ/ea-ui-component) | [在线文档](https://luminaqaq.github.io/ea-ui-component/) | [NPM 包](https://www.npmjs.com/package/easy-component-ui)
-## 安装
-```bash
-# npm
-npm install easy-component-ui
-# yarn
-yarn add easy-component-ui
-# pnpm
-pnpm add easy-component-ui
-```
-## 快速开始
-### 完整引入
-```javascript
-import "easy-component-ui";
-```
-### 按需引入
-```javascript
-import "easy-component-ui/ea-button";
-import "easy-component-ui/ea-input";
-```
-### 在 HTML 中使用
-```html
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Easy UI Demo</title>
-    <script type="module">
-      import "easy-component-ui/ea-button";
-    </script>
-  </head>
-  <body>
-    <ea-button type="primary">主要按钮</ea-button>
-  </body>
-</html>
-```
-## 组件列表
-### Basic 基础组件
-- [x] Button 按钮
-- [x] Container 布局容器
-- [x] Icon 图标
-- [x] Layout 布局
-- [x] Link 链接
-- [x] Text 文本
-- [x] Scrollbar 滚动条
-- [x] Space 间距
-- [x] Splitter 分隔面板
-### Form 表单组件
-- [x] Checkbox 多选框
-- [x] Input 输入框
-- [x] Input Number 数字输入框
-- [x] Radio 单选框
-- [x] Rate 评分
-- [x] Switch 开关
-- [x] Select 选择器
-- [x] Slider 滑块
-- [x] Form 表单组件
-- [x] Date Picker 日期选择器
-- [x] Time Picker 时间选择器
-- [x] Color Picker 颜色选择器
-### Data 数据展示
-- [x] Avatar 头像
-- [x] Badge 徽章
-- [x] Calendar 日历
-- [x] Card 卡片
-- [x] Carousel 走马灯
-- [x] Collapse 折叠面板
-- [x] Descriptions 描述列表
-- [x] Empty 空状态
-- [x] Image 图片
-- [x] Infinite Scroll 无限滚动
-- [x] Pagination 分页
-- [x] Progress 进度条
-- [x] Result 结果
-- [x] Skeleton 骨架屏
-- [x] Statistic 统计组件
-- [x] Segmented 分段控制器
-- [x] Tag 标签
-- [x] Timeline 时间线
-- [x] Tour 漫游式引导
-- [x] Table 表格
-- [x] Tree 树形控件
-### Navigation 导航
-- [x] Backtop 回到顶部
-- [x] Breadcrumb 面包屑
-- [x] Dropdown 下拉菜单
-- [x] Menu 菜单
-- [x] Page Header 页头
-- [x] Steps 步骤条
-- [x] Tabs 标签页
-### Feedback 反馈组件
-- [x] Alert 提示
-- [x] Dialog 对话框
-- [x] Drawer 抽屉
-- [x] Loading 加载
-- [x] Message 消息提示
-- [x] Message Box 消息弹出框
-- [x] Notification 通知
-- [x] Popconfirm 气泡确认框
-- [x] Popover 弹出框
-- [x] Tooltip 文字提示
-## 开发
-```bash
-# 克隆项目
-git clone https://github.com/LuminaQAQ/ea-ui-component.git
-# 安装依赖
-npm install
-# 启动开发服务器
-npm run dev
-# 构建文档
-npm run build:doc
-# 预览文档
-npm run preview:doc
-```
-## 贡献
-欢迎提交 Issue 和 Pull Request！
-## 许可证
-[MIT](https://github.com/LuminaQAQ/ea-ui-component/blob/main/LICENSE) License © 2024 [LuminaQAQ](https://github.com/LuminaQAQ)
+# Easy Component UI
+![Easy-ui](./logo.png)
+[![NPM version](https://img.shields.io/npm/v/easy-component-ui.svg?color=red)](https://www.npmjs.com/package/easy-component-ui)
+![npm](https://img.shields.io/npm/dw/easy-component-ui)
+![npm](https://img.shields.io/npm/dt/easy-component-ui)
+[![GitHub stars](https://img.shields.io/github/stars/LuminaQAQ/ea-ui-component.svg?color=#42b983)](https://github.com/LuminaQAQ/ea-ui-component/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/LuminaQAQ/ea-ui-component.svg)](https://github.com/LuminaQAQ/ea-ui-component/network/members)
+[![License](https://img.shields.io/npm/l/easy-component-ui.svg)](https://github.com/LuminaQAQ/ea-ui-component/blob/main/LICENSE)
+`Easy Component UI`（简称 `ea-ui`）是一套使用原生 `Web Components` 规范开发的跨框架 UI 组件库。该框架参考了[Element-ui](https://element.eleme.cn/#/zh-CN/component/installation)，所以不能说是很像吧，但可以说是一模一样 😂(打算有时间把所有的都模仿一遍)。[查看文档](https://luminaqaq.github.io/ea-ui-component/)
+[GitHub 项目地址](https://github.com/LuminaQAQ/ea-ui-component) | [在线文档](https://luminaqaq.github.io/ea-ui-component/) | [NPM 包](https://www.npmjs.com/package/easy-component-ui)
+## 安装
+```bash
+# npm
+npm install easy-component-ui
+# yarn
+yarn add easy-component-ui
+# pnpm
+pnpm add easy-component-ui
+```
+## 快速开始
+### 完整引入
+```javascript
+import "easy-component-ui";
+```
+### 按需引入
+```javascript
+import "easy-component-ui/ea-button";
+import "easy-component-ui/ea-input";
+```
+### 在 HTML 中使用
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Easy UI Demo</title>
+    <script type="module">
+      import "easy-component-ui/ea-button";
+    </script>
+  </head>
+  <body>
+    <ea-button type="primary">主要按钮</ea-button>
+  </body>
+</html>
+```
+## 组件列表
+### Basic 基础组件
+- [x] Button 按钮
+- [x] Container 布局容器
+- [x] Icon 图标
+- [x] Layout 布局
+- [x] Link 链接
+- [x] Text 文本
+- [x] Scrollbar 滚动条
+- [x] Space 间距
+- [x] Splitter 分隔面板
+### Form 表单组件
+- [x] Checkbox 多选框
+- [x] Input 输入框
+- [x] Input Number 数字输入框
+- [x] Radio 单选框
+- [x] Rate 评分
+- [x] Switch 开关
+- [x] Select 选择器
+- [x] Slider 滑块
+- [x] Form 表单组件
+- [x] Date Picker 日期选择器
+- [x] Time Picker 时间选择器
+- [x] Color Picker 颜色选择器
+### Data 数据展示
+- [x] Avatar 头像
+- [x] Badge 徽章
+- [x] Calendar 日历
+- [x] Card 卡片
+- [x] Carousel 走马灯
+- [x] Collapse 折叠面板
+- [x] Descriptions 描述列表
+- [x] Empty 空状态
+- [x] Image 图片
+- [x] Infinite Scroll 无限滚动
+- [x] Pagination 分页
+- [x] Progress 进度条
+- [x] Result 结果
+- [x] Skeleton 骨架屏
+- [x] Statistic 统计组件
+- [x] Segmented 分段控制器
+- [x] Tag 标签
+- [x] Timeline 时间线
+- [x] Tour 漫游式引导
+- [x] Table 表格
+- [x] Tree 树形控件
+### Navigation 导航
+- [x] Backtop 回到顶部
+- [x] Breadcrumb 面包屑
+- [x] Dropdown 下拉菜单
+- [x] Menu 菜单
+- [x] Page Header 页头
+- [x] Steps 步骤条
+- [x] Tabs 标签页
+### Feedback 反馈组件
+- [x] Alert 提示
+- [x] Dialog 对话框
+- [x] Drawer 抽屉
+- [x] Loading 加载
+- [x] Message 消息提示
+- [x] Message Box 消息弹出框
+- [x] Notification 通知
+- [x] Popconfirm 气泡确认框
+- [x] Popover 弹出框
+- [x] Tooltip 文字提示
+## 开发
+```bash
+# 克隆项目
+git clone https://github.com/LuminaQAQ/ea-ui-component.git
+# 安装依赖
+npm install
+# 启动开发服务器
+npm run dev
+# 构建文档
+npm run build:doc
+# 预览文档
+npm run preview:doc
+```
+## 贡献
+欢迎提交 Issue 和 Pull Request！
+## 许可证
+[MIT](https://github.com/LuminaQAQ/ea-ui-component/blob/main/LICENSE) License © 2024 [LuminaQAQ](https://github.com/LuminaQAQ)

package/dist/assets/icon.css ADDED Viewed

@@ -0,0 +1 @@

+ :host{--ea-icon-size: var(--font-size-md);--ea-icon-color: inherit;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:var(--ea-icon-size);color:var(--ea-icon-color)}.ea-icon{display:block;width:calc(var(--ea-icon-size) * 1.25);height:var(--ea-icon-size);line-height:var(--ea-icon-size);font-style:normal}html.dark{--ea-source-color-white: #1a1a1a;--ea-source-color-black: #e5e5e5;--ea-source-color-transparent: transparent;--ea-source-color-border: #3a3a3a;--ea-source-color-grey: #666666;--ea-source-color-grey-dark: #aaaaaa;--ea-source-color-grey-light: #252525;--ea-source-color-blue: #3a8ee6;--ea-source-color-green: #5daf34;--ea-source-color-yellow: #cf9236;--ea-source-color-red: #dd6161;--ea-source-color-muted: #888888;--ea-source-blue-100: #0d1b2a;--ea-source-blue-200: #1a2d45;--ea-source-blue-300: #1e3a5f;--ea-source-blue-400: #2a5a8f;--ea-source-blue-500: #3a8ee6;--ea-source-blue-600: #4d9ef0;--ea-source-blue-700: #6bb2f5;--ea-source-blue-800: #8ec7f8;--ea-source-blue-900: #b8dcfb;--ea-source-green-100: #0d1f0a;--ea-source-green-200: #1a3514;--ea-source-green-300: #264d1e;--ea-source-green-400: #357028;--ea-source-green-500: #5daf34;--ea-source-green-600: #73c04a;--ea-source-green-700: #8fd066;--ea-source-green-800: #b0e08c;--ea-source-green-900: #d4edb3;--ea-source-yellow-100: #1f1708;--ea-source-yellow-200: #3a2c10;--ea-source-yellow-300: #554018;--ea-source-yellow-400: #7a5c22;--ea-source-yellow-500: #cf9236;--ea-source-yellow-600: #daa04a;--ea-source-yellow-700: #e4b366;--ea-source-yellow-800: #edc98c;--ea-source-yellow-900: #f3ddb3;--ea-source-red-100: #1f0a0a;--ea-source-red-200: #3a1414;--ea-source-red-300: #551e1e;--ea-source-red-400: #7a2c2c;--ea-source-red-500: #dd6161;--ea-source-red-600: #e47878;--ea-source-red-700: #eb9494;--ea-source-red-800: #f1b0b0;--ea-source-red-900: #f7cdcd;--ea-source-grey-100: #1a1a1a;--ea-source-grey-200: #252525;--ea-source-grey-300: #3a3a3a;--ea-source-grey-400: #555555;--ea-source-grey-500: #666666;--ea-source-grey-600: #7a7a7a;--ea-source-grey-700: #999999;--ea-source-grey-800: #bbbbbb;--ea-source-grey-900: #e5e5e5;--ea-source-box-shadow-sm: 0 0 2px rgba(0, 0, 0, .4);--ea-source-box-shadow-md: 0 0 6px rgba(0, 0, 0, .5);--ea-source-box-shadow-lg: 0 0 12px rgba(0, 0, 0, .6)}:root{--ea-source-color-white: #ffffff;--ea-source-color-black: #000000;--ea-source-color-transparent: transparent;--ea-source-color-border: #dcdfe6;--ea-source-color-grey: #c0c4cc;--ea-source-color-grey-dark: #606266;--ea-source-color-grey-light: #f5f7fa;--ea-source-color-blue: #409eff;--ea-source-color-green: #67c23a;--ea-source-color-yellow: #e6a23c;--ea-source-color-red: #f56c6c;--ea-source-color-muted: #909399;--ea-source-blue-100: #e8f3ff;--ea-source-blue-200: #cce6ff;--ea-source-blue-300: #a0cfff;--ea-source-blue-400: #66b1ff;--ea-source-blue-500: #409eff;--ea-source-blue-600: #3a8ee6;--ea-source-blue-700: #337ecc;--ea-source-blue-800: #266bbd;--ea-source-blue-900: #1a4f91;--ea-source-green-100: #f0f9eb;--ea-source-green-200: #dcefd1;--ea-source-green-300: #b3e19d;--ea-source-green-400: #85ce61;--ea-source-green-500: #67c23a;--ea-source-green-600: #5daf34;--ea-source-green-700: #4aa030;--ea-source-green-800: #3d8e2b;--ea-source-green-900: #2e6e22;--ea-source-yellow-100: #fdf6ec;--ea-source-yellow-200: #faecd8;--ea-source-yellow-300: #f3d19e;--ea-source-yellow-400: #ebb563;--ea-source-yellow-500: #e6a23c;--ea-source-yellow-600: #cf9236;--ea-source-yellow-700: #b88230;--ea-source-yellow-800: #99692a;--ea-source-yellow-900: #7c4f1f;--ea-source-red-100: #fef0f0;--ea-source-red-200: #fde2e2;--ea-source-red-300: #fab6b6;--ea-source-red-400: #f78989;--ea-source-red-500: #f56c6c;--ea-source-red-600: #dd6161;--ea-source-red-700: #c45656;--ea-source-red-800: #b04343;--ea-source-red-900: #8b2e2e;--ea-source-grey-100: #f5f7fa;--ea-source-grey-200: #ebeef5;--ea-source-grey-300: #dcdfe6;--ea-source-grey-400: #c0c4cc;--ea-source-grey-500: #909399;--ea-source-grey-600: #82848a;--ea-source-grey-700: #606266;--ea-source-grey-800: #4a4c50;--ea-source-grey-900: #303133;--ea-source-box-shadow-sm: 0 0 2px rgba(0, 0, 0, .08);--ea-source-box-shadow-md: 0 0 6px rgba(0, 0, 0, .12);--ea-source-box-shadow-lg: 0 0 12px rgba(0, 0, 0, .15)}:root{--ea-source-color-white: #ffffff;--ea-source-color-black: #000000;--ea-source-color-transparent: transparent;--ea-source-color-border: #dcdfe6;--ea-source-color-grey: #c0c4cc;--ea-source-color-grey-dark: #606266;--ea-source-color-grey-light: #f5f7fa;--ea-source-color-blue: #409eff;--ea-source-color-green: #67c23a;--ea-source-color-yellow: #e6a23c;--ea-source-color-red: #f56c6c;--ea-source-color-muted: #909399;--ea-source-blue-100: #e8f3ff;--ea-source-blue-200: #cce6ff;--ea-source-blue-300: #a0cfff;--ea-source-blue-400: #66b1ff;--ea-source-blue-500: #409eff;--ea-source-blue-600: #3a8ee6;--ea-source-blue-700: #337ecc;--ea-source-blue-800: #266bbd;--ea-source-blue-900: #1a4f91;--ea-source-green-100: #f0f9eb;--ea-source-green-200: #dcefd1;--ea-source-green-300: #b3e19d;--ea-source-green-400: #85ce61;--ea-source-green-500: #67c23a;--ea-source-green-600: #5daf34;--ea-source-green-700: #4aa030;--ea-source-green-800: #3d8e2b;--ea-source-green-900: #2e6e22;--ea-source-yellow-100: #fdf6ec;--ea-source-yellow-200: #faecd8;--ea-source-yellow-300: #f3d19e;--ea-source-yellow-400: #ebb563;--ea-source-yellow-500: #e6a23c;--ea-source-yellow-600: #cf9236;--ea-source-yellow-700: #b88230;--ea-source-yellow-800: #99692a;--ea-source-yellow-900: #7c4f1f;--ea-source-red-100: #fef0f0;--ea-source-red-200: #fde2e2;--ea-source-red-300: #fab6b6;--ea-source-red-400: #f78989;--ea-source-red-500: #f56c6c;--ea-source-red-600: #dd6161;--ea-source-red-700: #c45656;--ea-source-red-800: #b04343;--ea-source-red-900: #8b2e2e;--ea-source-grey-100: #f5f7fa;--ea-source-grey-200: #ebeef5;--ea-source-grey-300: #dcdfe6;--ea-source-grey-400: #c0c4cc;--ea-source-grey-500: #909399;--ea-source-grey-600: #82848a;--ea-source-grey-700: #606266;--ea-source-grey-800: #4a4c50;--ea-source-grey-900: #303133;--ea-source-box-shadow-sm: 0 0 2px rgba(0, 0, 0, .08);--ea-source-box-shadow-md: 0 0 6px rgba(0, 0, 0, .12);--ea-source-box-shadow-lg: 0 0 12px rgba(0, 0, 0, .15);--ea-theme-transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease}

package/dist/components/ea-alert.js ADDED Viewed

@@ -0,0 +1,253 @@
+import { E as C } from "../core/EaBase.ts.js";
+import { q as p, a, l as y, C as T, p as v } from "../core/decorator.js";
+import { h as n } from "../utils/html.ts.js";
+import { t as h } from "../utils/timeout.ts.js";
+import { E as _ } from "../utils/Enum.ts.js";
+import { V as A, a as f, b as m } from "../core/constants.js";
+import { s as g } from "../css/ea-alert.style.js";
+import "./ea-icon.js";
+import { c as E } from "../utils/bem.ts.js";
+class $ extends Event {
+  constructor(r) {
+    super("ea-close", { bubbles: !0, composed: !0 }), this.detail = r;
+  }
+}
+class w extends Event {
+  constructor(r) {
+    super("ea-open", { bubbles: !0, composed: !0 }), this.detail = r ?? {};
+  }
+}
+var H = Object.defineProperty, I = Object.getOwnPropertyDescriptor, s = (t, r, c, l) => {
+  for (var o = l > 1 ? void 0 : l ? I(r, c) : r, d = t.length - 1, u; d >= 0; d--)
+    (u = t[d]) && (o = (l ? u(r, c, o) : u(o)) || o);
+  return l && o && H(r, c, o), o;
+};
+const b = "ea-alert", i = E(b), x = ["light", "dark"];
+let e = class extends C {
+  constructor() {
+    super(...arguments), this._hasDescription = !1, this._isHidden = !1, this.heading = "", this.description = "", this.variant = f, this.effect = "light", this.closeText = "", this.closable = !0, this.showIcon = !1, this.center = !1, this.showAfter = 0, this.autoClose = 0, this.hideAfter = 0;
+  }
+  /** 更新标题内容，为空时恢复 slot */
+  _updateHeading() {
+    this._alertHeading.innerHTML = n(this.heading) || '<slot name="heading"></slot>';
+  }
+  /** 更新描述内容，为空时恢复 slot */
+  _updateDescription() {
+    this._hasDescription = !!this.description, this._alertDescription.innerHTML = n(this.description) || "<slot></slot>", this.updateContainerClasslist();
+  }
+  /** 更新图标内容 */
+  _updateIcon() {
+    this._alertIcon.innerHTML = this.showIcon ? n(
+      `<ea-icon class="${i.e("icon")}" name="${m[this.variant]}" part="icon"></ea-icon>`
+    ) : "";
+  }
+  /** 更新关闭按钮内容，closable 为 false 时清空，closeText 为空时恢复图标 */
+  _updateCloseBtn() {
+    if (!this.closable) {
+      this._alertCloseBtn.innerHTML = "";
+      return;
+    }
+    this._alertCloseBtn.innerHTML = this.closeText ? n(this.closeText) : n(
+      `<ea-icon class="${i.e("close-icon")}" name="xmark" part="close-icon"></ea-icon>`
+    );
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const t = i(
+      { [this.variant]: !0, [this.effect]: !0 },
+      {
+        center: this.center,
+        hide: this._isHidden,
+        "has-description": this._hasDescription
+      }
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  /** 渲染模板 */
+  html() {
+    const t = this.showIcon ? `<ea-icon class="${i.e("icon")}" name="${m[this.variant]}" part="icon"></ea-icon>` : "", r = this.closable ? this.closeText ? n(this.closeText) : `<ea-icon class="${i.e("close-icon")}" name="xmark" part="close-icon"></ea-icon>` : "";
+    return `
+      <div class="${this.updateContainerClasslist()}" part='container'>
+        <span class="${i.e("icon-wrap")}" part='icon-wrap'>
+          <slot name='icon'>${t}</slot>
+        </span>
+        <div class="${i.e("content")}" part='content-wrap'>
+          <span class="${i.e("heading")}" part='heading'>
+            <slot name="heading">${n(this.heading)}</slot>
+          </span>
+          <p class="${i.e("description")}" part='description'>
+            <slot>${n(this.description)}</slot>
+          </p>
+        </div>
+        <button type="button" class="${i.e("close-btn")}" part="close-btn" aria-label="Close">${r}</button>
+      </div>
+    `;
+  }
+  _handleClose() {
+    if (!this.closable && this.autoClose <= 0) return;
+    const t = () => {
+      var l;
+      this._container.classList.add(i.s("before-close")), (l = this._transitionAbortController) == null || l.abort(), this._transitionAbortController = new AbortController();
+      const r = parseFloat(getComputedStyle(this._container).transitionDuration) || 0.3, c = () => {
+        var o;
+        clearTimeout(this._closeFallbackTimer), (o = this._transitionAbortController) == null || o.abort(), this.dispatchEvent(new $({ visible: !1 })), this.remove();
+      };
+      this._container.addEventListener(
+        "transitionend",
+        (o) => {
+          o.target !== this._container || o.propertyName !== "filter" || c();
+        },
+        { signal: this._transitionAbortController.signal }
+      ), this._closeFallbackTimer = h(
+        c,
+        (r + 0.1) * 1e3
+      );
+    };
+    clearTimeout(this._hideAfterTimer), this.hideAfter > 0 ? this._hideAfterTimer = h(t, this.hideAfter) : t();
+  }
+  $mount() {
+    this.setAttribute("role", "alert"), this.updateContainerClasslist();
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._transitionAbortController) == null || t.abort(), clearTimeout(this._closeFallbackTimer), clearTimeout(this._showAfterTimer), clearTimeout(this._autoCloseTimer), clearTimeout(this._hideAfterTimer);
+  }
+};
+s([
+  p(i.cb())
+], e.prototype, "_container", 2);
+s([
+  p(`${i.ce("icon-wrap")} slot[name="icon"]`)
+], e.prototype, "_alertIcon", 2);
+s([
+  p(`${i.ce("heading")} slot[name="heading"]`)
+], e.prototype, "_alertHeading", 2);
+s([
+  p(`${i.ce("description")} slot`)
+], e.prototype, "_alertDescription", 2);
+s([
+  p(i.ce("close-btn"))
+], e.prototype, "_alertCloseBtn", 2);
+s([
+  v({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-alert",
+      map: (t) => t ? "" : null
+    }
+  })
+], e.prototype, "_isHidden", 2);
+s([
+  a({
+    type: String,
+    default: "",
+    observer() {
+      this._updateHeading();
+    }
+  })
+], e.prototype, "heading", 2);
+s([
+  a({
+    type: String,
+    default: "",
+    observer() {
+      this._updateDescription();
+    }
+  })
+], e.prototype, "description", 2);
+s([
+  a({
+    type: _(A),
+    default: f,
+    observer() {
+      this.updateContainerClasslist(), this._updateIcon();
+    }
+  })
+], e.prototype, "variant", 2);
+s([
+  a({
+    type: _(x),
+    default: "light",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "effect", 2);
+s([
+  a({
+    type: String,
+    default: "",
+    observer() {
+      this._updateCloseBtn();
+    }
+  })
+], e.prototype, "closeText", 2);
+s([
+  a({
+    type: Boolean,
+    default: !0,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-alert__close-btn",
+      map: (t) => t ? null : ""
+    },
+    observer() {
+      this._updateCloseBtn();
+    }
+  })
+], e.prototype, "closable", 2);
+s([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this._updateIcon();
+    }
+  })
+], e.prototype, "showIcon", 2);
+s([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "center", 2);
+s([
+  a({
+    type: Number,
+    default: 0,
+    observer(t) {
+      clearTimeout(this._showAfterTimer), t = Math.abs(t), this._isHidden = t > 0, this.updateContainerClasslist(), this._showAfterTimer = h(() => {
+        this._isHidden = !1, this.dispatchEvent(new w()), this.updateContainerClasslist();
+      }, t);
+    }
+  })
+], e.prototype, "showAfter", 2);
+s([
+  a({
+    type: Number,
+    default: 0,
+    observer(t) {
+      clearTimeout(this._autoCloseTimer), t && (this._autoCloseTimer = h(() => this._handleClose(), t));
+    }
+  })
+], e.prototype, "autoClose", 2);
+s([
+  a({
+    type: Number,
+    default: 0
+  })
+], e.prototype, "hideAfter", 2);
+s([
+  y("click", i.ce("close-btn"))
+], e.prototype, "_handleClose", 1);
+e = s([
+  T(b, { styles: [g] })
+], e);
+export {
+  e as EaAlert
+};