@ezuikit/control-drawer 0.0.1-beta.7 → 0.0.2-beta.1
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.
- package/README.md +124 -38
- package/dist/index.cjs +3 -3
- package/dist/index.esm.js +3 -3
- package/dist/index.umd.js +3 -3
- package/dist/style/style/index.scss +39 -16
- package/dist/style/style.css +1 -1
- package/dist/style/style.js +2 -2
- package/dist/types/index.d.ts +113 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @ezuikit/control-drawer 使用指南
|
|
2
2
|
|
|
3
|
-
抽屉布局控件。只提供布局骨架：遮罩、从四个方向滑出的面板、标题栏与关闭按钮、开合动画和挂载策略；业务内容通过 `content`
|
|
3
|
+
抽屉布局控件。只提供布局骨架：遮罩、从四个方向滑出的面板、标题栏与关闭按钮、开合动画和挂载策略；业务内容通过 `content` 注入。`@ezuikit/control-alarm-message` 基于它实现告警消息面板。
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
pnpm add @ezuikit/control-drawer
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
> **仅限浏览器环境。** 构造函数会直接访问 `document` 并创建 DOM，必须在客户端创建（Next.js / Nuxt 等 SSR 框架里放到 `useEffect` / `onMounted` 等仅客户端执行的钩子中，或用动态导入关闭 SSR）。在 Node 服务端 `new Drawer()` 会抛出 `ReferenceError: document is not defined`；仅 `import` 模块不会出错。
|
|
12
|
+
|
|
11
13
|
## 快速开始
|
|
12
14
|
|
|
13
15
|
```ts
|
|
@@ -65,38 +67,75 @@ const drawer = new Drawer(playerEl, {
|
|
|
65
67
|
|
|
66
68
|
## 配置项
|
|
67
69
|
|
|
68
|
-
| 参数 | 类型 | 默认 | 说明
|
|
69
|
-
| --------------- | ---------------------------------------- | --------- |
|
|
70
|
-
| `title` | `string \| HTMLElement` | - | 标题，字符串按 HTML 插入
|
|
71
|
-
| `content` | `string \| HTMLElement` | - | 内容，字符串按 HTML 插入
|
|
72
|
-
| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向，非法值回退 `right`
|
|
73
|
-
| `width` | `number \| string` | `300` | 面板宽度（左右方向生效），number 视为 px
|
|
74
|
-
| `height` | `number \| string` | `300` | 面板高度（上下方向生效），number 视为 px
|
|
75
|
-
| `showMask` | `boolean` | `true` | 遮罩；关闭后面板以外区域可操作底层内容
|
|
76
|
-
| `maskClosable` | `boolean` | `true` | 点击遮罩关闭
|
|
77
|
-
| `showHeader` | `boolean` | `true` | 头部（标题 + 关闭按钮）
|
|
78
|
-
| `showClose` | `boolean` | `true` | 关闭按钮，`showHeader` 为 `false` 时无效
|
|
79
|
-
| `closeOnEscape` | `boolean` | `true` | Esc 关闭
|
|
80
|
-
| `duration` | `number` | `300` | 开合动画时长（ms
|
|
81
|
-
| `open` | `boolean` | `false` | 创建后立即打开（仅构造时生效）
|
|
82
|
-
| `zIndex` | `number` | - | 根节点层级，缺省取 `--edrawer-z-index`（100）
|
|
83
|
-
| `className` | `string` | - | 追加到根节点的类名，多个用空格分隔
|
|
84
|
-
| `getContainer` | `() => HTMLElement \| null \| undefined` | - | 动态挂载点，见上文
|
|
85
|
-
| `onOpenChange` | `(open: boolean) => void` | - | 打开/关闭回调，参数为当前状态
|
|
86
|
-
| `onOpenStart` | `() => void` | - | 打开开始（动画开始前同步触发）
|
|
87
|
-
| `onOpenEnd` | `() => void` | - | 打开结束（过渡结束后触发）
|
|
88
|
-
| `onCloseStart` | `() => void` | - | 关闭开始（动画开始前同步触发）
|
|
89
|
-
| `onCloseEnd` | `() => void` | - | 关闭结束（过渡结束、根节点隐藏后触发）
|
|
70
|
+
| 参数 | 类型 | 默认 | 说明 |
|
|
71
|
+
| --------------- | ---------------------------------------- | --------- | ---------------------------------------------------------------------------- |
|
|
72
|
+
| `title` | `string \| HTMLElement` | - | 标题，字符串按 HTML 插入 |
|
|
73
|
+
| `content` | `string \| HTMLElement` | - | 内容，字符串按 HTML 插入 |
|
|
74
|
+
| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向，非法值回退 `right` |
|
|
75
|
+
| `width` | `number \| string` | `300` | 面板宽度（左右方向生效），number 视为 px |
|
|
76
|
+
| `height` | `number \| string` | `300` | 面板高度（上下方向生效），number 视为 px |
|
|
77
|
+
| `showMask` | `boolean` | `true` | 遮罩；关闭后面板以外区域可操作底层内容 |
|
|
78
|
+
| `maskClosable` | `boolean` | `true` | 点击遮罩关闭 |
|
|
79
|
+
| `showHeader` | `boolean` | `true` | 头部（标题 + 关闭按钮） |
|
|
80
|
+
| `showClose` | `boolean` | `true` | 关闭按钮，`showHeader` 为 `false` 时无效 |
|
|
81
|
+
| `closeOnEscape` | `boolean` | `true` | Esc 关闭 |
|
|
82
|
+
| `duration` | `number` | `300` | 开合动画时长（ms），非有限数 / 负数回退 300，自动同步到 `--edrawer-duration` |
|
|
83
|
+
| `open` | `boolean` | `false` | 创建后立即打开（仅构造时生效） |
|
|
84
|
+
| `zIndex` | `number` | - | 根节点层级，缺省取 `--edrawer-z-index`（100） |
|
|
85
|
+
| `className` | `string` | - | 追加到根节点的类名，多个用空格分隔 |
|
|
86
|
+
| `getContainer` | `() => HTMLElement \| null \| undefined` | - | 动态挂载点，见上文 |
|
|
87
|
+
| `onOpenChange` | `(open: boolean) => void` | - | 打开/关闭回调，参数为当前状态 |
|
|
88
|
+
| `onOpenStart` | `() => void` | - | 打开开始（动画开始前同步触发） |
|
|
89
|
+
| `onOpenEnd` | `() => void` | - | 打开结束（过渡结束后触发） |
|
|
90
|
+
| `onCloseStart` | `() => void` | - | 关闭开始（动画开始前同步触发） |
|
|
91
|
+
| `onCloseEnd` | `() => void` | - | 关闭结束（过渡结束、根节点隐藏后触发） |
|
|
90
92
|
|
|
91
93
|
## 方法 / 属性
|
|
92
94
|
|
|
93
|
-
| 成员 | 说明
|
|
94
|
-
| ----------------------------------------- |
|
|
95
|
-
| `open` | 布尔属性（getter/setter
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
95
|
+
| 成员 | 说明 |
|
|
96
|
+
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
97
|
+
| `open` | 布尔属性（getter/setter），打开/关闭抽屉；重复设置相同状态为幂等，销毁后设置无效；`getContainer` 抛错时异常向上抛出，状态与回调均保持不变 |
|
|
98
|
+
| `options` | 当前生效的配置对象（实例独享，已与默认配置合并） |
|
|
99
|
+
| `setTitle(title)` / `setContent(content)` | 更新标题 / 内容，不重建 DOM |
|
|
100
|
+
| `updateOptions(opts)` | 更新配置并重建 DOM，保持当前开合状态且不重播动画 |
|
|
101
|
+
| `destroy()` | 销毁（幂等），移除 DOM、定时器与监听，不触发任何回调 |
|
|
102
|
+
| `Drawer.VERSION` | 构建时由 Rollup 注入的版本号（静态属性） |
|
|
103
|
+
|
|
104
|
+
没有事件订阅（无 `on` / `off`），状态变化统一通过配置项回调通知，见下节。
|
|
105
|
+
|
|
106
|
+
类型从入口导出：`import Drawer, { type DrawerOptions, type DrawerPlacement, type DrawerContainerGetter } from '@ezuikit/control-drawer'`。
|
|
107
|
+
|
|
108
|
+
### 继承
|
|
109
|
+
|
|
110
|
+
`@ezuikit/control-alarm-message`、`@ezuikit/control-broadcast` 都以子类方式复用 Drawer。子类可重写 `open` 访问器，需 getter / setter 成对重写，并通过 `super.open` 复用基类逻辑：
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
class MyDrawer extends Drawer {
|
|
114
|
+
get open() {
|
|
115
|
+
return super.open;
|
|
116
|
+
}
|
|
117
|
+
set open(value: boolean) {
|
|
118
|
+
// 自定义逻辑
|
|
119
|
+
super.open = value;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**构造配置 `open: true` 对子类不会自动生效。** 基类构造函数先于子类字段初始化执行，此时触发 `open` 访问器与回调会读到未初始化的子类状态（例如重写的 `open` 里访问子类字段会抛 `TypeError`）。因此直接 `new Drawer({ open: true })` 仍会自动打开，而子类实例（`new.target !== Drawer`）不会；子类需在自己的构造函数末尾（字段与回调都就绪后）调用受保护方法 `applyInitialOpen()`：
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
class MyDrawer extends Drawer {
|
|
128
|
+
private readonly logs: string[] = [];
|
|
129
|
+
|
|
130
|
+
constructor(container: HTMLElement, options: DrawerOptions) {
|
|
131
|
+
super(container, options);
|
|
132
|
+
this.options.onOpenChange = (open) => this.logs.push(`open=${open}`);
|
|
133
|
+
this.applyInitialOpen(); // 按 options.open 决定是否打开；open 缺省或为 false 时什么也不做
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
不需要构造即打开的子类（如 AlarmMessage、Broadcast）无需处理，构造后设置 `open = true` 即可。
|
|
100
139
|
|
|
101
140
|
## 打开 / 关闭回调
|
|
102
141
|
|
|
@@ -105,14 +144,35 @@ const drawer = new Drawer(playerEl, {
|
|
|
105
144
|
- 打开：`onOpenStart`（同步，动画开始前）→ `onOpenEnd`（过渡结束后）
|
|
106
145
|
- 关闭：`onCloseStart`（同步，动画开始前）→ `onCloseEnd`（过渡结束、根节点隐藏后）
|
|
107
146
|
|
|
108
|
-
另有 `onOpenChange(open)`：打开与关闭时同步调用，参数为当前状态 `boolean
|
|
147
|
+
另有 `onOpenChange(open)`：打开与关闭时同步调用，参数为当前状态 `boolean`，在 `onOpenStart` / `onCloseStart` 之后触发。完整顺序：
|
|
148
|
+
|
|
149
|
+
```text
|
|
150
|
+
open = true → onOpenStart → onOpenChange(true) → （duration 后）onOpenEnd
|
|
151
|
+
open = false → onCloseStart → onOpenChange(false) → （duration 后）onCloseEnd
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
- 结束回调依赖与过渡时长（`duration`，默认 300ms）一致的定时器，而非 `transitionend`；`duration: 0` 在下一个定时器周期触发。
|
|
155
|
+
- 反向切换（如打开动画中途关闭）会取消尚未触发的结束回调，`destroy()` 与 `updateOptions()`（重建 DOM）同样会取消。
|
|
156
|
+
- 点击关闭按钮 / 遮罩、按 Esc 与直接设置 `open = false` 走同一条路径，回调一致。
|
|
157
|
+
- 直接 `new Drawer({ open: true })` 同样会触发 `onOpenStart` / `onOpenChange(true)` / `onOpenEnd`（子类见上文“继承”）。
|
|
158
|
+
- `destroy()` 不触发任何回调。
|
|
159
|
+
|
|
160
|
+
**在开始回调里再次改变状态。** `onOpenStart` / `onCloseStart` 内可以再设置 `open`、调用 `updateOptions()` 或 `destroy()`，以回调内的最终状态为准，被覆盖的那次开合不再继续（其 `onOpenChange` 与结束回调不会触发）：
|
|
161
|
+
|
|
162
|
+
| 回调内的操作 | 结果 |
|
|
163
|
+
| ------------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
164
|
+
| `onOpenStart` 内 `open = false` | 保持关闭，只触发 `onCloseStart` / `onOpenChange(false)`，不触发 `onOpenChange(true)` 与 `onOpenEnd` |
|
|
165
|
+
| `onCloseStart` 内 `open = true` | 保持打开，不触发 `onCloseEnd` |
|
|
166
|
+
| 开始回调内 `destroy()` | 不再渲染，不残留 Esc 监听与定时器，后续回调均不触发 |
|
|
167
|
+
| 开始回调内 `updateOptions()` | 以重建后的节点完成本次开合 |
|
|
109
168
|
|
|
110
169
|
## 样式与类名
|
|
111
170
|
|
|
112
|
-
统一前缀 `edrawer`（常量 `
|
|
171
|
+
统一前缀 `edrawer`（常量 `__DRAWER_PREFIX_CLS__`，SCSS 变量 `$edrawer-prefix-cls`）：
|
|
113
172
|
|
|
114
173
|
- 结构：`edrawer`（根）> `edrawer-mask` + `edrawer-panel` > `edrawer-header`（`edrawer-title`、`edrawer-close`）+ `edrawer-body`
|
|
115
174
|
- 状态：`edrawer-left` / `-right` / `-top` / `-bottom`、`edrawer-open`、`edrawer-hidden`、`edrawer-fixed`（挂在 body 上）
|
|
175
|
+
- 页面：`edrawer-body-noscroll`（加在 `body` 上：挂在 body 上的抽屉打开期间存在，`overflow: hidden` + `touch-action: none`，禁止页面滚动）
|
|
116
176
|
|
|
117
177
|
外观通过 CSS 变量定制，可设在 `className` 对应的根节点上按实例覆盖：
|
|
118
178
|
|
|
@@ -131,12 +191,13 @@ const drawer = new Drawer(playerEl, {
|
|
|
131
191
|
| `--edrawer-header-border-color` | `rgba(0,0,0,.08)` | 头部分隔线 |
|
|
132
192
|
| `--edrawer-title-color` | `#333` | 标题色 |
|
|
133
193
|
| `--edrawer-title-font-size` | `14px` | 标题字号 |
|
|
134
|
-
| `--edrawer-close-color` | `rgba(0,0,0,.
|
|
135
|
-
| `--edrawer-close-hover-color` |
|
|
194
|
+
| `--edrawer-close-color` | `rgba(0,0,0,.45)` | 关闭按钮色 |
|
|
195
|
+
| `--edrawer-close-hover-color` | `rgba(0,0,0,.88)` | 关闭按钮悬停色 |
|
|
196
|
+
| `--edrawer-close-hover-bg` | `rgba(0,0,0,.06)` | 关闭按钮悬停背景 |
|
|
136
197
|
|
|
137
198
|
```css
|
|
138
199
|
/* 例：告警消息面板在 PC 端最多占容器 80% 宽 */
|
|
139
|
-
.
|
|
200
|
+
.ealarm-message-drawer {
|
|
140
201
|
--edrawer-max-width: 80%;
|
|
141
202
|
}
|
|
142
203
|
```
|
|
@@ -147,14 +208,39 @@ const drawer = new Drawer(playerEl, {
|
|
|
147
208
|
|
|
148
209
|
**字符串按 HTML 插入。** `title` / `content` / `setTitle` / `setContent` 传字符串时写入 `innerHTML`，只能传可信内容；不可信数据请自行转义或传 `HTMLElement`。
|
|
149
210
|
|
|
150
|
-
**动画时长可配。** 通过 `duration`（ms）配置开合时长，默认 300；组件会把该值写入根节点的 `--edrawer-duration`，使遮罩/面板的 CSS 过渡与 JS 定时器保持一致。只在宿主 CSS 里改 `transition` 时长不会改变 JS 的隐藏时机。面板为 CSS `transition: transform` 滑入滑出，遮罩为 `transition: opacity` 淡入淡出，不使用 `@keyframes
|
|
211
|
+
**动画时长可配。** 通过 `duration`（ms）配置开合时长，默认 300；组件会把该值写入根节点的 `--edrawer-duration`，使遮罩/面板的 CSS 过渡与 JS 定时器保持一致。只在宿主 CSS 里改 `transition` 时长不会改变 JS 的隐藏时机。面板为 CSS `transition: transform` 滑入滑出，遮罩为 `transition: opacity` 淡入淡出，不使用 `@keyframes`。组件内置样式不响应 `prefers-reduced-motion`（Windows 关闭"显示动画"、远程桌面 / 虚拟机、省电模式下浏览器都会命中该偏好，会导致抽屉瞬间出现）；需要尊重该偏好的宿主可自行追加 `@media (prefers-reduced-motion: reduce) { .edrawer-mask, .edrawer-panel { transition: none; } }`。
|
|
151
212
|
|
|
152
213
|
**`updateOptions` 会重建 DOM。** 以 `HTMLElement` 传入的内容会被移动到新节点，引用与其上的监听保留，但内部滚动位置会重置；只改文案时用 `setTitle` / `setContent`。
|
|
153
214
|
|
|
154
215
|
**显式传 `undefined` 会覆盖默认值。** 配置按 `Object.assign({}, 默认配置, options)` 浅合并，DOM 节点与函数按引用保留；`{ width: undefined }` 会让面板失去默认宽度，不需要的字段请不要传。
|
|
155
216
|
|
|
156
|
-
**Esc
|
|
217
|
+
**Esc 监听挂在容器所属的 `document` 上**，仅在打开期间存在（兼容旧浏览器的 `Esc` 键值）。容器位于 iframe 等其它文档内时，监听注册在该 iframe 的 `document` 上（在 iframe 内按 Esc 才会关闭，顶层页面按 Esc 不会）；`getContainer` 把抽屉移到另一个文档时监听随之迁移。以下按键不会关闭抽屉：输入法组合输入中的 Esc（`isComposing` / `keyCode === 229`，用于取消候选词），以及已被内部控件调用 `preventDefault()` 处理过的 Esc（如抽屉内的下拉框）。同一文档中多个抽屉同时打开时，一次 Esc 会全部关闭。
|
|
218
|
+
|
|
219
|
+
**挂载到 `body` 判定为 `fixed`** 时，同样以挂载点自身所属文档的 `body` 为准，iframe 内挂到其 `body` 时也相对该 iframe 视口定位。
|
|
220
|
+
|
|
221
|
+
**挂载在 `body` 上时锁定页面滚动。** 抽屉挂载在 `body` 上（任意方向，常见于移动端底部弹层）时，打开时给该文档的 `body` 加 `edrawer-body-noscroll`，开始收起（`open = false`）或打开态 `destroy()` 时移除；挂载在普通容器内时不加。同一文档中多个挂在 body 上的抽屉同时打开时按数量计数，最后一个关闭后才移除；iframe 内的抽屉只锁定该 iframe 的 `body`。抽屉内容区（`.edrawer-body`）自身仍可滚动。宿主不要自己增删这个类名，否则会与抽屉的计数冲突。`getContainer` 每次打开时按当次挂载点判断是否锁定。
|
|
222
|
+
|
|
223
|
+
**`getContainer` 的调用时机。** 仅在 `open = true` 时调用（构造与 `updateOptions` 都不调用）；已打开状态下 `updateOptions` 沿用当前挂载点。返回空值回退到构造函数传入的 `container`；返回的元素与当前父节点相同时不移动 DOM。
|
|
157
224
|
|
|
158
225
|
**事件冒泡。** 根节点拦截 `dblclick` 冒泡，避免在播放器容器内双击触发全屏切换；`click` 不拦截，点击遮罩关闭后事件仍会冒泡到宿主。关闭按钮的点击会阻止冒泡。
|
|
159
226
|
|
|
160
|
-
|
|
227
|
+
**关闭按钮不受宿主 `button` 全局样式影响。** 关闭按钮（`.edrawer-close`）先 `all: unset` 清掉宿主页面对 `<button>` 的全局样式（`padding`、`margin`、`font`、`box-shadow`、`min-*`、`transform` 等），再重新声明自身样式，并补回键盘焦点环（`:focus-visible`）。类名写了两遍使选择器特异性为 `(0,2,0)`，足以压过 `button`、`[type='button']`、`.xxx button` 这类常见规则；宿主若用 id 选择器或 `!important` 命中按钮，仍会覆盖这里，需要宿主自行避免。
|
|
228
|
+
|
|
229
|
+
**层级（`z-index`）。** 抽屉根节点默认 `z-index: 100`（`--edrawer-z-index` / `zIndex` 选项可改），低于常见 UI 库的浮层。挂载到 `document.body`（`position: fixed`）时，如果宿主页面有固定导航栏或自己的弹层，抽屉可能被盖住，请把层级调到高于它们。参考值：
|
|
230
|
+
|
|
231
|
+
| 宿主库 | 常见层级 |
|
|
232
|
+
| ------------ | -------------------------------------------------------------------------------------- |
|
|
233
|
+
| Bootstrap 5 | 固定导航栏 1030、侧边栏 1045、遮罩 1050、模态框 1055、气泡 1070、提示 1080、Toast 1090 |
|
|
234
|
+
| Ant Design 4 | 抽屉 / 模态框 1000、气泡 1030、下拉 1050、提示 1070 |
|
|
235
|
+
| Element UI 2 | 弹层由 PopupManager 从 2000 起递增 |
|
|
236
|
+
|
|
237
|
+
```css
|
|
238
|
+
/* 例：让抽屉盖过宿主的固定导航栏与模态框 */
|
|
239
|
+
.my-drawer {
|
|
240
|
+
--edrawer-z-index: 2000;
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
挂载在播放器容器内（非 `body`）时，抽屉的层级只在该容器的层叠上下文内比较，通常不需要调整。
|
|
245
|
+
|
|
246
|
+
**无障碍。** 面板带 `role="dialog"`，有头部时通过 `aria-labelledby` 关联标题；关闭按钮为 `<button type="button">`，带 `aria-label="close"`，内联 SVG 图标 `aria-hidden="true"`。未做焦点管理与焦点陷阱。
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.
|
|
3
|
-
* Copyright (c) 2026-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.2-beta.1
|
|
3
|
+
* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
"use strict";var
|
|
6
|
+
"use strict";var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,_bodyScrollLocks=new WeakMap,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._scrollLockDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._unlockBodyScroll(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._lockBodyScroll=function(doc){var _bodyScrollLocks_get;if(this._scrollLockDoc!==doc){this._unlockBodyScroll();var count=(null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:0)+1;_bodyScrollLocks.set(doc,count),doc.body.classList.add("edrawer-body-noscroll"),this._scrollLockDoc=doc}},_proto._unlockBodyScroll=function(){var _bodyScrollLocks_get,doc=this._scrollLockDoc;if(doc){this._scrollLockDoc=null;var _doc_body,count=Math.max((null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:1)-1,0);if(0===count)_bodyScrollLocks.delete(doc),null==(_doc_body=doc.body)||_doc_body.classList.remove("edrawer-body-noscroll");else _bodyScrollLocks.set(doc,count)}},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),target===target.ownerDocument.body&&this._lockBodyScroll(target.ownerDocument),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._unlockBodyScroll(),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();Drawer.VERSION="0.0.2-beta.1",module.exports=Drawer;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.
|
|
3
|
-
* Copyright (c) 2026-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.2-beta.1
|
|
3
|
+
* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
var
|
|
6
|
+
var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,_bodyScrollLocks=new WeakMap,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._scrollLockDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._unlockBodyScroll(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._lockBodyScroll=function(doc){var _bodyScrollLocks_get;if(this._scrollLockDoc!==doc){this._unlockBodyScroll();var count=(null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:0)+1;_bodyScrollLocks.set(doc,count),doc.body.classList.add("edrawer-body-noscroll"),this._scrollLockDoc=doc}},_proto._unlockBodyScroll=function(){var _bodyScrollLocks_get,doc=this._scrollLockDoc;if(doc){this._scrollLockDoc=null;var _doc_body,count=Math.max((null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:1)-1,0);if(0===count)_bodyScrollLocks.delete(doc),null==(_doc_body=doc.body)||_doc_body.classList.remove("edrawer-body-noscroll");else _bodyScrollLocks.set(doc,count)}},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),target===target.ownerDocument.body&&this._lockBodyScroll(target.ownerDocument),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._unlockBodyScroll(),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();Drawer.VERSION="0.0.2-beta.1";export{Drawer as default};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.
|
|
3
|
-
* Copyright (c) 2026-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.2-beta.1
|
|
3
|
+
* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Drawer=factory()}(this,function(){"use strict";var
|
|
6
|
+
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Drawer=factory()}(this,function(){"use strict";var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,_bodyScrollLocks=new WeakMap,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._scrollLockDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._unlockBodyScroll(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._lockBodyScroll=function(doc){var _bodyScrollLocks_get;if(this._scrollLockDoc!==doc){this._unlockBodyScroll();var count=(null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:0)+1;_bodyScrollLocks.set(doc,count),doc.body.classList.add("edrawer-body-noscroll"),this._scrollLockDoc=doc}},_proto._unlockBodyScroll=function(){var _bodyScrollLocks_get,doc=this._scrollLockDoc;if(doc){this._scrollLockDoc=null;var _doc_body,count=Math.max((null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:1)-1,0);if(0===count)_bodyScrollLocks.delete(doc),null==(_doc_body=doc.body)||_doc_body.classList.remove("edrawer-body-noscroll");else _bodyScrollLocks.set(doc,count)}},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),target===target.ownerDocument.body&&this._lockBodyScroll(target.ownerDocument),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._unlockBodyScroll(),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();return Drawer.VERSION="0.0.2-beta.1",Drawer});
|
|
@@ -5,24 +5,36 @@
|
|
|
5
5
|
// 外观通过 --edrawer-* 变量定制，缺省值见各 var() 的回退值。
|
|
6
6
|
// -----------------------------------------------------------------------------
|
|
7
7
|
$edrawer-prefix-cls: 'edrawer';
|
|
8
|
-
// 开合过渡时长（默认回退值）：可通过根节点上的 --edrawer-duration 按实例覆盖，需与 JS 默认
|
|
8
|
+
// 开合过渡时长（默认回退值）：可通过根节点上的 --edrawer-duration 按实例覆盖，需与 JS 默认 __DRAWER_DURATION__（300ms）保持一致
|
|
9
9
|
$edrawer-duration: 0.3s;
|
|
10
10
|
|
|
11
|
+
.#{$edrawer-prefix-cls}-body-noscroll {
|
|
12
|
+
touch-action: none;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
}
|
|
15
|
+
|
|
11
16
|
.#{$edrawer-prefix-cls} {
|
|
12
17
|
position: absolute;
|
|
13
18
|
top: 0;
|
|
14
19
|
right: 0;
|
|
15
20
|
bottom: 0;
|
|
16
21
|
left: 0;
|
|
17
|
-
z-index: var(--edrawer-z-index,
|
|
22
|
+
z-index: var(--edrawer-z-index, 9999);
|
|
18
23
|
overflow: hidden;
|
|
19
24
|
box-sizing: border-box;
|
|
20
25
|
// 根节点不拦截指针事件：不展示遮罩时，面板以外的区域仍可操作底层内容
|
|
21
26
|
pointer-events: none;
|
|
27
|
+
text-align: left;
|
|
22
28
|
|
|
23
29
|
// 挂载到 document.body 时相对视口定位
|
|
24
30
|
&-fixed {
|
|
25
31
|
position: fixed;
|
|
32
|
+
top: 0;
|
|
33
|
+
right: 0;
|
|
34
|
+
bottom: 0;
|
|
35
|
+
left: 0;
|
|
36
|
+
width: 100vw;
|
|
37
|
+
height: 100vh;
|
|
26
38
|
}
|
|
27
39
|
|
|
28
40
|
// 遮罩
|
|
@@ -47,6 +59,7 @@ $edrawer-duration: 0.3s;
|
|
|
47
59
|
background-color: var(--edrawer-bg, #fff);
|
|
48
60
|
color: var(--edrawer-color, rgba(0, 0, 0, 0.88));
|
|
49
61
|
transition: transform var(--edrawer-duration, #{$edrawer-duration}) ease;
|
|
62
|
+
text-align: left;
|
|
50
63
|
}
|
|
51
64
|
|
|
52
65
|
// 弹出方向：收起态面板位于容器外侧
|
|
@@ -123,31 +136,41 @@ $edrawer-duration: 0.3s;
|
|
|
123
136
|
text-overflow: ellipsis;
|
|
124
137
|
}
|
|
125
138
|
|
|
126
|
-
//
|
|
127
|
-
|
|
128
|
-
|
|
139
|
+
// 关闭按钮：先 `all: unset` 一次性清掉宿主页面对 <button> 的全局样式（padding、margin、font、box-shadow、min-*、transform 等），
|
|
140
|
+
// 再重新声明本控件需要的样式；类名写两遍把特异性提到 (0,2,0)，高于 `button` / `[type='button']` / `.xxx button` 这类常见宿主规则。
|
|
141
|
+
// 宿主若用 id 选择器或 !important 命中按钮，仍会压过这里，需要宿主自行避免。
|
|
142
|
+
&-close#{&}-close {
|
|
143
|
+
all: unset;
|
|
144
|
+
box-sizing: border-box;
|
|
129
145
|
flex: 0 0 auto;
|
|
146
|
+
display: inline-flex;
|
|
130
147
|
align-items: center;
|
|
131
148
|
justify-content: center;
|
|
149
|
+
width: 28px;
|
|
150
|
+
height: 28px;
|
|
132
151
|
margin-left: 12px;
|
|
133
|
-
padding: 4px;
|
|
134
|
-
border: none;
|
|
135
152
|
border-radius: 4px;
|
|
136
|
-
|
|
137
|
-
color: var(--edrawer-close-color, rgba(0, 0, 0, 0.4));
|
|
153
|
+
color: var(--edrawer-close-color, rgba(0, 0, 0, 0.45));
|
|
138
154
|
cursor: pointer;
|
|
139
|
-
transition:
|
|
140
|
-
|
|
155
|
+
transition:
|
|
156
|
+
color 0.2s,
|
|
157
|
+
background-color 0.2s;
|
|
141
158
|
|
|
142
159
|
&:hover {
|
|
143
|
-
color: var(--edrawer-close-hover-color,
|
|
144
|
-
background:
|
|
160
|
+
color: var(--edrawer-close-hover-color, rgba(0, 0, 0, 0.88));
|
|
161
|
+
background-color: var(--edrawer-close-hover-bg, rgba(0, 0, 0, 0.06));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
// `all: unset` 同时去掉了浏览器默认的焦点环，键盘操作时补回
|
|
165
|
+
&:focus-visible {
|
|
166
|
+
outline: 2px solid var(--edrawer-close-hover-color, rgba(0, 0, 0, 0.88));
|
|
167
|
+
outline-offset: -2px;
|
|
145
168
|
}
|
|
146
169
|
|
|
147
|
-
svg {
|
|
170
|
+
& svg {
|
|
171
|
+
width: 16px;
|
|
172
|
+
height: 16px;
|
|
148
173
|
display: block;
|
|
149
|
-
width: 14px;
|
|
150
|
-
height: 14px;
|
|
151
174
|
}
|
|
152
175
|
}
|
|
153
176
|
|
package/dist/style/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.edrawer{
|
|
1
|
+
.edrawer-body-noscroll{overflow:hidden;touch-action:none}.edrawer{box-sizing:border-box;overflow:hidden;pointer-events:none;position:absolute;text-align:left;z-index:var(--edrawer-z-index,9999)}.edrawer,.edrawer-fixed{bottom:0;left:0;right:0;top:0}.edrawer-fixed{height:100vh;position:fixed;width:100vw}.edrawer-mask{background-color:var(--edrawer-mask-bg,rgba(0,0,0,.3));bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--edrawer-duration,.3s) ease}.edrawer-panel{background-color:var(--edrawer-bg,#fff);box-sizing:border-box;color:var(--edrawer-color,rgba(0,0,0,.88));display:flex;flex-direction:column;overflow:hidden;position:absolute;text-align:left;transition:transform var(--edrawer-duration,.3s) ease}.edrawer-left .edrawer-panel,.edrawer-right .edrawer-panel{bottom:0;max-width:var(--edrawer-max-width,100%);top:0}.edrawer-bottom .edrawer-panel,.edrawer-top .edrawer-panel{left:0;max-height:var(--edrawer-max-height,100%);right:0}.edrawer-right .edrawer-panel{border-left:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));right:0;transform:translateX(100%)}.edrawer-left .edrawer-panel{border-right:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));left:0;transform:translateX(-100%)}.edrawer-top .edrawer-panel{border-bottom:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));top:0;transform:translateY(-100%)}.edrawer-bottom .edrawer-panel{border-top:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));bottom:0;transform:translateY(100%)}.edrawer.edrawer-open .edrawer-mask{opacity:1;pointer-events:auto}.edrawer.edrawer-open .edrawer-panel{pointer-events:auto;transform:translate(0)}.edrawer-header{align-items:center;border-bottom:1px solid var(--edrawer-header-border-color,rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex:0 0 auto;height:var(--edrawer-header-height,40px);justify-content:space-between;padding:var(--edrawer-header-padding,0 16px)}.edrawer-title{color:var(--edrawer-title-color,#333);flex:1 1 auto;font-size:var(--edrawer-title-font-size,14px);font-weight:500;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edrawer-close.edrawer-close{all:unset;align-items:center;border-radius:4px;box-sizing:border-box;color:var(--edrawer-close-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;margin-left:12px;transition:color .2s,background-color .2s;width:28px}.edrawer-close.edrawer-close:hover{background-color:var(--edrawer-close-hover-bg,rgba(0,0,0,.06));color:var(--edrawer-close-hover-color,rgba(0,0,0,.88))}.edrawer-close.edrawer-close:focus-visible{outline:2px solid var(--edrawer-close-hover-color,rgba(0,0,0,.88));outline-offset:-2px}.edrawer-close.edrawer-close svg{display:block;height:16px;width:16px}.edrawer-body{box-sizing:border-box;flex:1 1 auto;min-height:0;overflow:auto;position:relative}.edrawer-hidden{display:none!important}
|
package/dist/style/style.js
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
* 抽屉弹出方向
|
|
3
3
|
*/
|
|
4
4
|
type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
|
|
5
|
-
/** 事件监听回调 */
|
|
6
|
-
type DrawerListener = (...args: unknown[]) => void;
|
|
7
5
|
/**
|
|
8
6
|
* 动态挂载点解析函数：返回挂载元素；返回 null / undefined 时回退到构造函数传入的 container。
|
|
9
7
|
*/
|
|
@@ -32,11 +30,11 @@ interface DrawerOptions {
|
|
|
32
30
|
showClose?: boolean;
|
|
33
31
|
/** 按下 Esc 是否关闭，默认 true */
|
|
34
32
|
closeOnEscape?: boolean;
|
|
35
|
-
/** 开合动画时长（ms），默认 300
|
|
33
|
+
/** 开合动画时长（ms），默认 300；非有限数或负数回退到默认值。会写入根节点的 `--edrawer-duration`，使 CSS 过渡与 JS 定时器一致 */
|
|
36
34
|
duration?: number;
|
|
37
35
|
/** 创建后是否立即打开，默认 false（仅构造时生效） */
|
|
38
36
|
open?: boolean;
|
|
39
|
-
/** 根节点层级，缺省使用样式变量 `--edrawer-z-index`（默认
|
|
37
|
+
/** 根节点层级，缺省使用样式变量 `--edrawer-z-index`（默认 9999） */
|
|
40
38
|
zIndex?: number;
|
|
41
39
|
/** 追加到根节点的自定义类名，多个用空格分隔 */
|
|
42
40
|
className?: string;
|
|
@@ -63,7 +61,8 @@ interface DrawerOptions {
|
|
|
63
61
|
* 只负责抽屉的布局骨架，业务内容通过 `content` / {@link Drawer.setContent} 注入：
|
|
64
62
|
* 1. 遮罩 + 从左 / 右 / 上 / 下滑出的面板，带开合过渡动画；
|
|
65
63
|
* 2. 头部（标题 + 关闭按钮），支持点击遮罩、Esc 关闭；
|
|
66
|
-
* 3. 默认相对挂载容器定位（容器需为定位元素），挂载到 document.body
|
|
64
|
+
* 3. 默认相对挂载容器定位（容器需为定位元素），挂载到 document.body 时相对视口定位，打开期间给 body 加
|
|
65
|
+
* `edrawer-body-noscroll` 类名禁止页面滚动；
|
|
67
66
|
* 4. 支持通过 `getContainer` 在每次打开时动态解析挂载点（如移动端扩展区）。
|
|
68
67
|
*
|
|
69
68
|
* @example
|
|
@@ -74,9 +73,12 @@ interface DrawerOptions {
|
|
|
74
73
|
* placement: 'right',
|
|
75
74
|
* width: 300,
|
|
76
75
|
* });
|
|
77
|
-
* drawer.
|
|
78
|
-
* drawer.open
|
|
76
|
+
* drawer.open = true; // 打开
|
|
77
|
+
* drawer.open = false; // 关闭
|
|
78
|
+
* drawer.destroy();
|
|
79
79
|
* ```
|
|
80
|
+
*
|
|
81
|
+
* 无事件订阅机制，状态变化通过配置项回调通知：`onOpenChange`、`onOpenStart` / `onOpenEnd`、`onCloseStart` / `onCloseEnd`。
|
|
80
82
|
*/
|
|
81
83
|
declare class Drawer {
|
|
82
84
|
/** 构建时由 Rollup 注入版本号 */
|
|
@@ -98,38 +100,126 @@ declare class Drawer {
|
|
|
98
100
|
private _hideTimer;
|
|
99
101
|
/** 打开动画结束后回调的定时器 */
|
|
100
102
|
private _openTimer;
|
|
103
|
+
/** 当前注册了 Esc 监听的 document（容器可能在 iframe 等其它文档内，需与注册时一致才能正确移除） */
|
|
104
|
+
private _keydownDoc;
|
|
105
|
+
/** 当前锁定了 body 滚动的 document（挂载在 body 上且处于打开态时非空） */
|
|
106
|
+
private _scrollLockDoc;
|
|
101
107
|
/**
|
|
102
108
|
* @param container 默认挂载容器，支持 CSS 选择器、元素 ID 或 HTMLElement，缺省或找不到时为 document.body。
|
|
103
109
|
* 非 body 容器需为定位元素（position 非 static），抽屉相对它铺满定位。
|
|
104
110
|
* @param options 配置项
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```ts
|
|
114
|
+
* // 元素 ID / CSS 选择器 / HTMLElement 均可；缺省挂载到 document.body（fixed 定位）
|
|
115
|
+
* const drawer = new Drawer('#player', { title: '告警消息', placement: 'right', width: 300 });
|
|
116
|
+
*
|
|
117
|
+
* // 底部抽屉，挂载点晚于控件创建才出现：每次打开时通过 getContainer 解析
|
|
118
|
+
* const mobile = new Drawer(playerEl, {
|
|
119
|
+
* placement: 'bottom',
|
|
120
|
+
* height: '100%',
|
|
121
|
+
* showMask: false,
|
|
122
|
+
* getContainer: () => document.querySelector<HTMLElement>('.ezplayer-mobile-extend'),
|
|
123
|
+
* });
|
|
124
|
+
* ```
|
|
105
125
|
*/
|
|
106
126
|
constructor(container?: string | HTMLElement, options?: DrawerOptions);
|
|
127
|
+
/**
|
|
128
|
+
* 应用构造配置 `open: true`（配置为 false 或缺省时不做任何事）。
|
|
129
|
+
*
|
|
130
|
+
* 直接 `new Drawer()` 时由构造函数自动调用；**子类不会被自动调用**，需在自己的构造函数末尾
|
|
131
|
+
* （自身字段与回调都初始化完成之后）手动调用一次，否则 `open: true` 对子类不生效。
|
|
132
|
+
*
|
|
133
|
+
* @example
|
|
134
|
+
* ```ts
|
|
135
|
+
* class MyDrawer extends Drawer {
|
|
136
|
+
* private readonly logs: string[] = [];
|
|
137
|
+
*
|
|
138
|
+
* constructor(container: HTMLElement, options: DrawerOptions) {
|
|
139
|
+
* super(container, options);
|
|
140
|
+
* this.options.onOpenChange = (open) => this.logs.push(`open=${open}`);
|
|
141
|
+
* this.applyInitialOpen(); // 所有字段与回调就绪后再按配置打开
|
|
142
|
+
* }
|
|
143
|
+
* }
|
|
144
|
+
* ```
|
|
145
|
+
*/
|
|
146
|
+
protected applyInitialOpen(): void;
|
|
107
147
|
/**
|
|
108
148
|
* 打开/关闭抽屉。配置了 `getContainer` 时，会先解析本次挂载点并在需要时移动 DOM。
|
|
149
|
+
* 重复设置相同状态、销毁后设置均为空操作；`getContainer` 抛错时状态保持不变。
|
|
150
|
+
*
|
|
151
|
+
* @example
|
|
152
|
+
* ```ts
|
|
153
|
+
* const drawer = new Drawer('#player', {
|
|
154
|
+
* onOpenChange: (open) => console.log('open =', open),
|
|
155
|
+
* onCloseEnd: () => console.log('收起动画结束'),
|
|
156
|
+
* });
|
|
157
|
+
* drawer.open = true; // 打开：onOpenStart → onOpenChange(true) → onOpenEnd
|
|
158
|
+
* drawer.open = true; // 重复设置，空操作
|
|
159
|
+
* drawer.open = !drawer.open; // 切换（此时为关闭）
|
|
160
|
+
* ```
|
|
109
161
|
*/
|
|
110
162
|
set open(open: boolean);
|
|
111
163
|
/**
|
|
112
|
-
*
|
|
164
|
+
* 当前是否处于打开状态（关闭动画进行中已视为关闭）
|
|
165
|
+
*
|
|
166
|
+
* @example
|
|
167
|
+
* ```ts
|
|
168
|
+
* if (drawer.open) drawer.open = false;
|
|
169
|
+
* ```
|
|
113
170
|
*/
|
|
114
171
|
get open(): boolean;
|
|
115
172
|
/**
|
|
116
173
|
* 设置标题（showHeader 为 false 时仅更新配置）
|
|
117
174
|
* @param title 字符串（按 HTML 插入，须为可信内容）或 HTMLElement
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* ```ts
|
|
178
|
+
* drawer.setTitle('告警消息（3）');
|
|
179
|
+
*
|
|
180
|
+
* const title = document.createElement('strong');
|
|
181
|
+
* title.textContent = '告警消息';
|
|
182
|
+
* drawer.setTitle(title);
|
|
183
|
+
* ```
|
|
118
184
|
*/
|
|
119
185
|
setTitle(title: string | HTMLElement): void;
|
|
120
186
|
/**
|
|
121
187
|
* 设置内容
|
|
122
188
|
* @param content 字符串（按 HTML 插入，须为可信内容）或 HTMLElement
|
|
189
|
+
*
|
|
190
|
+
* @example
|
|
191
|
+
* ```ts
|
|
192
|
+
* drawer.setContent('<p>暂无数据</p>');
|
|
193
|
+
*
|
|
194
|
+
* const list = document.createElement('ul');
|
|
195
|
+
* drawer.setContent(list); // 节点被移入内容区，引用与其上的监听保留
|
|
196
|
+
* ```
|
|
123
197
|
*/
|
|
124
198
|
setContent(content: string | HTMLElement): void;
|
|
125
199
|
/**
|
|
126
200
|
* 更新配置。方向、尺寸、遮罩、头部等结构性配置通过重建 DOM 生效，
|
|
127
201
|
* 重建后保持当前打开 / 关闭状态（直接处于终态，不重播动画）；`open` 仅在构造时生效。
|
|
128
202
|
* @param options 新配置
|
|
203
|
+
*
|
|
204
|
+
* @example
|
|
205
|
+
* ```ts
|
|
206
|
+
* // 切换弹出方向与尺寸：重建 DOM，保持当前开合状态且不重播动画
|
|
207
|
+
* drawer.updateOptions({ placement: 'bottom', height: '60%' });
|
|
208
|
+
*
|
|
209
|
+
* // 只改文案请用 setTitle / setContent，避免重建 DOM 重置内容区滚动位置
|
|
210
|
+
* drawer.updateOptions({ closeOnEscape: false, maskClosable: false });
|
|
211
|
+
* ```
|
|
129
212
|
*/
|
|
130
213
|
updateOptions(options: Partial<DrawerOptions>): void;
|
|
131
214
|
/**
|
|
132
|
-
* 销毁，移除 DOM
|
|
215
|
+
* 销毁，移除 DOM、定时器与全部监听（幂等）。销毁时不会触发任何回调。
|
|
216
|
+
*
|
|
217
|
+
* @example
|
|
218
|
+
* ```ts
|
|
219
|
+
* drawer.destroy();
|
|
220
|
+
* drawer.destroy(); // 幂等
|
|
221
|
+
* drawer.open = true; // 销毁后无效
|
|
222
|
+
* ```
|
|
133
223
|
*/
|
|
134
224
|
destroy(): void;
|
|
135
225
|
private _resolveContainer;
|
|
@@ -141,6 +231,8 @@ declare class Drawer {
|
|
|
141
231
|
private _attach;
|
|
142
232
|
/** 规范化弹出方向，非法值回退到 right */
|
|
143
233
|
private _getPlacement;
|
|
234
|
+
/** 开合动画时长（ms）：非有限数或负数回退到默认值，避免 `NaN` 写入 CSS 变量与定时器 */
|
|
235
|
+
private _getDuration;
|
|
144
236
|
private _toSize;
|
|
145
237
|
private _render;
|
|
146
238
|
/** 将字符串（HTML）或节点写入目标元素 */
|
|
@@ -148,6 +240,17 @@ declare class Drawer {
|
|
|
148
240
|
/** 移除 DOM 与元素级监听，并释放全部节点引用 */
|
|
149
241
|
private _teardownDom;
|
|
150
242
|
private _clearTimers;
|
|
243
|
+
/** 在根节点所属文档上注册 Esc 监听（容器可能位于 iframe 等其它文档内，监听必须挂在同一文档才能收到按键） */
|
|
244
|
+
private _bindEscape;
|
|
245
|
+
/** 从注册时的文档上移除 Esc 监听（幂等） */
|
|
246
|
+
private _unbindEscape;
|
|
247
|
+
/**
|
|
248
|
+
* 禁止页面滚动：给 body 加 `edrawer-body-noscroll`（按文档计数，幂等）
|
|
249
|
+
* @param doc 挂载点所属文档（容器可能在 iframe 等其它文档内）
|
|
250
|
+
*/
|
|
251
|
+
private _lockBodyScroll;
|
|
252
|
+
/** 恢复页面滚动：本实例持有的锁释放后，该文档中没有其它打开的 body 抽屉时移除类名（幂等） */
|
|
253
|
+
private _unlockBodyScroll;
|
|
151
254
|
/** 读取布局属性以强制浏览器回流 */
|
|
152
255
|
private _reflow;
|
|
153
256
|
private readonly _onCloseClick;
|
|
@@ -158,4 +261,4 @@ declare class Drawer {
|
|
|
158
261
|
}
|
|
159
262
|
|
|
160
263
|
export { Drawer as default };
|
|
161
|
-
export type { DrawerContainerGetter,
|
|
264
|
+
export type { DrawerContainerGetter, DrawerOptions, DrawerPlacement };
|