sync working code, and import type-doc

2023-07-17 17:24:49 +08:00 · 2023-07-17 17:24:49 +08:00 · 3e9ee59178
commit 3e9ee59178
parent 7ab7a7094a
43 changed files with 1024 additions and 1553 deletions
--- a/.gitignore
+++ b/.gitignore
@ -23,3 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 desktop.ini
+
+# User definition
+docs
--- a/amrnb.js
+++ b/amrnb.js
--- a/index.html
+++ b/index.html
@ -6,36 +6,13 @@
  <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>UI Lib</title>
+  <script src="/amrnb.js"></script>
  <script type="module" src="/main.js"></script>
  <script src="/dist/ui.min.js"></script>
  <script src="/dist/utility.min.js"></script>
 </head>

 <body>
-  <div id="directory">
-    <ul>
-      <li class="title">lib-ui</li>
-      <li>
-        <ol>
-          <li data-page="lib/ui/icon.html">icon</li>
-          <li data-page="lib/ui/checkbox.html">checkbox</li>
-          <li data-page="lib/ui/tooltip.html">tooltip</li>
-          <li data-page="lib/ui/dropdown.html">dropdown</li>
-          <li data-page="lib/ui/grid/grid.html">grid</li>
-          <li data-page="lib/ui/popup.html">popup</li>
-        </ol>
-      </li>
-      <li class="title">lib-utility</li>
-      <li>
-        <ol>
-          <li data-page="lib/utility/cookie.html">cookie</li>
-          <li data-page="lib/utility/lgres.html">lgres</li>
-          <li data-page="lib/utility/request.html">request</li>
-          <li data-page="lib/utility/strings.html">strings</li>
-        </ol>
-      </li>
-    </ul>
-  </div>
  <div id="container"></div>
 </body>

--- a/lib/app/communications/contact.js
+++ b/lib/app/communications/contact.js
@ -155,11 +155,14 @@ class Contact {
                .then(() => this.#refs.contactName.focus());
            return null;
        }
-        if (nullOrEmpty(email) && nullOrEmpty(phone)) {
-            showAlert(title, r('contactEmailPhoneRequired', 'Email and Mobile Phone cannot both be empty.'), 'warn')
-                .then(() => nullOrEmpty(email) ?
-                    this.#refs.contactEmail.focus() :
-                    this.#refs.contactMobile.focus());
+        if ((pref == 0 || pref == 2) && nullOrEmpty(phone)) {
+            showAlert(title, r('contactPhoneRequired', 'Mobile cannot be empty.'), 'warn')
+                .then(() => this.#refs.contactMobile.focus());
+            return null;
+        }
+        if (pref == 1 && nullOrEmpty(email)) {
+            showAlert(title, r('contactEmailRequired', 'Email cannot be empty.'), 'warn')
+                .then(() => this.#refs.contactEmail.focus());
            return null;
        }
        if (!nullOrEmpty(email) && !isEmail(email)) {
@ -176,6 +179,8 @@ class Contact {
                contact.selected = !opt;
            }
        }
+        contact.OldName = contact.Name;
+        contact.OldMobilePhone = contact.MobilePhone;
        contact.Name = name;
        contact.ContactPreference = pref;
        contact.Email = email;
--- a/lib/app/communications/customer.d.ts
+++ b/lib/app/communications/customer.d.ts
@ -10,6 +10,8 @@ interface InitConfig {
 }

 export class CustomerCommunication {
+    constructor (opt: InitConfig);
+
    get autoUpdatesEnabled(): boolean;
    set autoUpdatesEnabled(enabled: boolean);
    get autoUpdates(): boolean;
@ -21,8 +23,4 @@ export class CustomerCommunication {
    set statusLink(checked: boolean);

    create(): HTMLElement;
-}
-
-declare var CustomerCommunication: {
-    new(opt: InitConfig): CustomerCommunication
 }
--- a/lib/app/communications/customer.js
+++ b/lib/app/communications/customer.js
@ -1,10 +1,10 @@
-import { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup } from "../../ui";
+import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup, createPicture, createAudio, createVideo, createPdf, createSmilefile, createVcard, createVideofile, createFile } from "../../ui";
 import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
 import { createBox } from "./lib";
 import { Contact, CustomerRecordContact } from "./contact";
 import Follower from "./follower";

-class NoteCol extends Grid.GridColumn {
+class NoteCol extends GridColumn {
    static create() {
        const wrapper = createElement('div', 'contact-wrapper',
            createElement('div', 'contact-name'),
@ -19,7 +19,12 @@ class NoteCol extends Grid.GridColumn {
        if (name.scrollWidth > name.offsetWidth) {
            setTooltip(name, item.Name, false, grid.element);
        }
-        element.querySelector('.contact-note').innerText = item.Notes;
+
+        const notes = element.querySelector('.contact-note');
+        notes.innerText = item.Notes;
+        if (notes.scrollWidth > notes.offsetWidth) {
+            setTooltip(notes, item.Notes, false, grid.element);
+        }
    }
 }

@ -243,14 +248,15 @@ class CustomerCommunication {
     * @param {String} code
     */
    set companyCode(code) {
-        this.#option.companyCode = code;
+        const option = this.#option;
+        option.companyCode = code;
        const div = this.#container.querySelector('.title-company');
-        if (nullOrEmpty(this.#option.companyName)) {
+        if (nullOrEmpty(option.companyName)) {
            div.style.display = 'none';
        } else {
-            div.innerText = this.#option.companyName;
+            div.innerText = option.companyName;
            if (!nullOrEmpty(code))
-                div.innerText = this.#option.companyName + "/" + code;
+                div.innerText = option.companyName + "/" + code;
            div.style.display = '';
        }
    }
@ -432,11 +438,15 @@ class CustomerCommunication {
                        button.addEventListener('click', () => {
                            const val = this.#enter.value;
                            if (nullOrEmpty(val?.trim())) {
-                                showAlert(r('error', 'Error'), r('messageRequired', 'Please input the message.'), 'warn');
+                                const p = showAlert(r('error', 'Error'), r('messageRequired', 'Please input the message.'), 'warn');
+                                if (typeof option.onMasking === 'function') {
+                                    option.onMasking(true);
+                                    p.then(() => option.onMasking(false));
+                                }
                                return;
                            }
-                            if (typeof this.#option.onAddMessage === 'function') {
-                                this.#option.onAddMessage(this.#enter.value);
+                            if (typeof option.onAddMessage === 'function') {
+                                option.onAddMessage(this.#enter.value);
                            }
                        })
                    })
@ -514,12 +524,12 @@ class CustomerCommunication {
                                                    // onMasking: option.onMasking,
                                                    contacts: [],
                                                    onOk: list => {
-                                                        if (typeof this.#option.onSelectCRContacts === 'function') {
+                                                        if (typeof option.onSelectCRContacts === 'function') {
                                                            list?.map(c => {
                                                                delete c.selected;
                                                                return c;
                                                            });
-                                                            const result = this.#option.onSelectCRContacts(list);
+                                                            const result = option.onSelectCRContacts(list);
                                                        }
                                                        const r = this.#data.contacts;
                                                        this.#gridContact.source = r.filter(c => c.Id >= 0).map(c => {
@ -545,8 +555,8 @@ class CustomerCommunication {
                                                var title = r('selectFromCustomerRecord', 'Select from Customer Record');
                                                sel.show(title, container);

-                                                if (typeof this.#option.onOpenSelectCRContacts === 'function') {
-                                                    const result = this.#option.onOpenSelectCRContacts();
+                                                if (typeof option.onOpenSelectCRContacts === 'function') {
+                                                    const result = option.onOpenSelectCRContacts();
                                                    if (typeof result?.then === 'function') {
                                                        return result.then(r => {
                                                            r.map(c => {
@ -595,7 +605,7 @@ class CustomerCommunication {
                                            button.addEventListener('click', () => {
                                                const add = new Contact({
                                                    // onMasking: option.onMasking,
-                                                    company: !nullOrEmpty(this.#option.companyName),
+                                                    company: !nullOrEmpty(option.companyName),
                                                    onSave: item => {
                                                        const exists = this.#gridContact.source.some(s => s.Name === item.Name && s.MobilePhone === item.MobilePhone);
                                                        if (exists) {
@ -639,14 +649,14 @@ class CustomerCommunication {
                                }),
                                content: createElement('div', null,
                                    createElement('div', div => {
-                                        if (nullOrEmpty(this.#option.companyName)) {
+                                        if (nullOrEmpty(option.companyName)) {
                                            div.style.display = 'none';
                                        }
                                        div.style.fontWeight = 'bold';
                                        div.innerText = r('contactFromRecord', 'Contacts from Customer Record');
                                    }),
                                    createElement('div', div => {
-                                        if (nullOrEmpty(this.#option.companyName)) {
+                                        if (nullOrEmpty(option.companyName)) {
                                            div.style.display = 'none';
                                        }
                                        div.className = 'contacts-record';
@ -952,8 +962,8 @@ class CustomerCommunication {
            button.appendChild(createIcon('fa-solid', 'pen'));
            setTooltip(button, r('editFollower', 'Edit Followers'));
            button.addEventListener('click', () => {
-                if (typeof this.#option.onInitFollower === 'function') {
-                    this.#option.onInitFollower(this.#data.followers).then(data => {
+                if (typeof option.onInitFollower === 'function') {
+                    option.onInitFollower(this.#data.followers).then(data => {
                        if (typeof data === 'string') {
                            showAlert(r('customerRecord', 'Customer Record'), data, 'warn');
                            return;
@ -962,8 +972,8 @@ class CustomerCommunication {
                            onMasking: option.onMasking,
                            followers: data,
                            onOk: list => {
-                                if (typeof this.#option.onAddFollower === 'function') {
-                                    const result = this.#option.onAddFollower(list);
+                                if (typeof option.onAddFollower === 'function') {
+                                    const result = option.onAddFollower(list);
                                    if (typeof result?.then === 'function') {
                                        return result.then(r => {
                                            // this.followers = r;
@ -1060,6 +1070,38 @@ class CustomerCommunication {
                        span.innerText = comm.Message;
                    }
                }));
+                if (comm.IsMMS && comm.MMSParts?.length > 0) {
+                    for (let kv of comm.MMSParts) {
+                        switch (kv.Key) {
+                            case 'application/pdf':
+                                content.appendChild(createPdf(kv.Value));
+                                break;
+                            case 'application/smil':
+                                content.appendChild(createSmilefile(kv.Value));
+                                break;
+                            case 'audio/amr':
+                                content.appendChild(createAudio(kv.Key));
+                                break;
+                            case 'image/gif':
+                            case 'image/jpeg':
+                            case 'image/png':
+                                content.appendChild(createPicture(kv.Value));
+                                break;
+                            case 'text/x-vcard':
+                                content.appendChild(createVcard(kv.Value));
+                                break;
+                            case 'video/3gpp':
+                                content.appendChild(createVideofile(kv.Value));
+                                break;
+                            case 'video/mp4':
+                                content.appendChild(createVideo(kv.Value));
+                                break;
+                            default:
+                                content.appendChild(createFile(kv.Value));
+                                break;
+                        }
+                    }
+                }
                if (comm.IsReply) {
                    div.classList.add('item-other');
                } else {
--- a/lib/functions.d.ts
+++ b/lib/functions.d.ts
@ -1 +1,7 @@
-export function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, init?: string | ((element: HTMLElementTagNameMap[K]) => void), ...children?: (Node | string)[]): HTMLElementTagNameMap[K];
+/**
+ * 创建一个 html 元素
+ * @param tagName 标签名
+ * @param init 样式类名，或者为有一个 html 元素作为参数的函数
+ * @param children 子元素
+ */
+export function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, init?: string | ((element: HTMLElementTagNameMap[K]) => void), ...children: (Node | string)[]): HTMLElementTagNameMap[K];
--- a/lib/ui.js
+++ b/lib/ui.js
@ -4,10 +4,11 @@ import { createElement } from "./functions";
 import { createIcon, changeIcon, resolveIcon } from "./ui/icon";
 import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
 import { setTooltip, resolveTooltip } from "./ui/tooltip";
-import Dropdown from "./ui/dropdown";
-import Grid from "./ui/grid/grid";
-import Popup from "./ui/popup";
-import { createPopup, showAlert, showConfirm } from "./ui/popup";
+import { Dropdown } from "./ui/dropdown";
+import { Grid } from "./ui/grid/grid";
+import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn } from './ui/grid/column';
+import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
+import { createPicture, createAudio, createVideo, createPdf, createSmilefile, createVcard, createVideofile, createFile } from './ui/media';

 export {
  createElement,
@ -26,9 +27,24 @@ export {
  Dropdown,
  // grid
  Grid,
+  GridColumn,
+  GridInputColumn,
+  GridDropdownColumn,
+  GridCheckboxColumn,
+  GridIconColumn,
+  GridTextColumn,
  // popup
  Popup,
  createPopup,
  showAlert,
-  showConfirm
+  showConfirm,
+  // media
+  createPicture,
+  createAudio,
+  createVideo,
+  createPdf,
+  createSmilefile,
+  createVcard,
+  createVideofile,
+  createFile
 }
--- a/lib/ui/checkbox.d.ts
+++ b/lib/ui/checkbox.d.ts
@ -1,18 +1,50 @@
+/**
+ * 复选框选项
+ */
 interface CheckboxOptions {
+    /** 样式类名 */
    className?: string;
+    /** 是否可用 */
    enabled?: boolean;
+    /** html 名称 */
    name?: string;
+    /** 焦点索引 */
    tabIndex?: Number;
+    /** 样式分类，可以是 ['`fa-light`', '`fa-regular`', '`fa-solid`'] 其中之一 */
    type?: string;
+    /** 标签 */
    label?: string | HTMLElement;
+    /** 是否已选中 */
    checked?: boolean;
+    /** 图片高度 */
    imageHeight?: Number;
+    /** 选中时显示的元素 */
    checkedNode?: HTMLElement;
+    /** 未选中时显示的元素 */
    uncheckedNode?: HTMLElement;
-    customerAttributes?: { [key: string]: string };
+    /** 自定义 html 属性 */
+    customAttributes?: { [key: string]: string };
+    /**
+     * 复选框选择状态改变时触发
+     * @param this 当前复选框对应的 HtmlInput 元素
+     * @param ev 选择事件对象
+     */
    onchange?: (this: HTMLInputElement, ev: Event) => any;
 }

+/**
+ * 创建一个单选框
+ * @param opts 单选框参数
+ */
 export function createRadiobox(opts?: CheckboxOptions): HTMLElement
+/**
+ * 创建一个复选框
+ * @param opts 复选框参数
+ */
 export function createCheckbox(opts?: CheckboxOptions): HTMLElement
+/**
+ * 解析容器元素内符合条件的子元素为复选框元素
+ * @param container 容器元素
+ * @param legacy 是否使用传统模式
+ */
 export function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement
--- a/lib/ui/checkbox.html
+++ b/lib/ui/checkbox.html
@ -1,138 +0,0 @@
-<div>
-  <h1>checkbox</h1>
-  <hr />
-  <p>
-    创建一个统一样式的复选框元素，或者解析转换页面上特定类型的 label
-    标签为复选框元素。
-  </p>
-  <h2>createCheckbox</h2>
-  <code>function createCheckbox(opts?: CheckboxOptions): HTMLElement</code>
-  <h3>opts?: CheckboxOptions</h3>
-  <p>
-    复选框初始参数，结构为
-  <pre>interface CheckboxOptions {
-    className?: string;
-    enabled?: boolean;
-    name?: string;
-    tabIndex?: Number;
-    type?: string;
-    label?: string;
-    checked?: boolean;
-    imageHeight?: Number;
-    checkedNode?: HTMLElement;
-    uncheckedNode?: HTMLElement;
-    customerAttributes?: { [key: string]: string };
-    onchange?: (this: HTMLInputElement, ev: Event) => any;
-}</pre>
-  </p>
-  <h4>className?: string</h4>
-  <p>
-    复选框的自定义 className
-  </p>
-  <h4>enabled?: boolean</h4>
-  <p>
-    复选框默认是否可用
-  </p>
-  <h4>name?: string</h4>
-  <p>
-    复选框或单选框的 name
-  </p>
-  <h4>tabIndex?: Number</h4>
-  <p>
-    复选框的 tabindex
-  </p>
-  <h4>type?: string</h4>
-  <p>
-    复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
-  </p>
-  <h4>label?: string | HTMLElement</h4>
-  <p>
-    复选框的标签文本，或者想要呈现的元素
-  </p>
-  <h4>checked?: boolean</h4>
-  <p>
-    初始是否选中
-  </p>
-  <h4>imageHeight?: Number</h4>
-  <p>
-    为图片复选框时的图片限制高度
-  </p>
-  <h4>checkedNode?: HTMLElement</h4>
-  <p>
-    为图片复选框时的选中时显示的元素
-  </p>
-  <h4>uncheckedNode?: HTMLElement</h4>
-  <p>
-    为图片复选框时的未选中时显示的元素
-  </p>
-  <h4>customerAttributes?: { [key: string]: string }</h4>
-  <p>
-    自定义属性，例如
-  <pre>{
-    'data-id': 'xxxxxx',
-    'disabled': ''
-}</pre>
-  </p>
-  <h4>onchange?: (this: HTMLInputElement, ev: Event) => any</h4>
-  <p>
-    复选框改变时触发的事件
-  </p>
-  <h2>createRadiobox</h2>
-  <code>function createRadiobox(opts?: CheckboxOptions): HTMLElement</code>
-  <h3>opts?: CheckboxOptions</h3>
-  <p>
-    单选框初始参数，结构如上
-  </p>
-  <h2>resolveCheckbox</h2>
-  <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
-  <h3>container?: HTMLElement</h3>
-  <p>
-    将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的
-    id，包含
-    <code>[data-checked]</code> 时复选框默认选中。
-  </p>
-  <p>当该元素无子元素时，<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>，<code>[data-label]</code> 同上述参数中的
-    <code>label?: string</code>。
-  </p>
-  <p>当该元素有子元素时，解析为图片复选框，class 为 <code>checked</code>、<code>unchecked</code> 的子元素将分别在选中与未选中时显示。</p>
-  <h3>legacy?: boolean</h3>
-  <p>
-    是否开启兼容模式，启用兼容模式时将试图匹配 <code>input[type="checkbox"]</code> 标签，与其周围的 label，将其转换为统一样式的复选框。
-  </p>
-  <hr />
-  <h2>示例</h2>
-  <pre>&lt;div id="checkbox-sample"&gt;
-  &lt;!-- 1 --&gt;
-  &lt;label data-checkbox data-type="fa-light" data-label="Checkbox Light"&gt;&lt;/label&gt;
-  &lt;!-- 2 --&gt;
-  &lt;label data-checkbox data-checked data-label="Checkbox Regular"&gt;&lt;/label&gt;
-  &lt;!-- 3 --&gt;
-  &lt;label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"&gt;&lt;/label&gt;
-  &lt;!-- 4 --&gt;
-  &lt;label data-checkbox&gt;
-    &lt;code class="checked"&gt;Checked&lt;/code&gt;
-    &lt;code class="unchecked"&gt;Unchecked&lt;/code&gt;
-  &lt;/label&gt;
-  &lt;!-- 5 --&gt;
-  &lt;input id="check-status" type="checkbox"/&gt;
-  &lt;label for="check-status"&gt;Label for Status&lt;/label&gt;
-&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-  window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
-&lt;/script&gt;</pre>
-  <div id="checkbox-sample">
-    <label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
-    <label data-checkbox data-checked data-label="Checkbox Regular"></label>
-    <label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
-    <label data-checkbox>
-      <code class="checked">Checked</code>
-      <code class="unchecked">Unchecked</code>
-    </label>
-    <input id="check-status" type="checkbox" />
-    <label for="check-status">Label for Status</label>
-  </div>
-  <script type="text/javascript">
-    window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
-  </script>
-</div>
--- a/lib/ui/checkbox.js
+++ b/lib/ui/checkbox.js
@ -40,8 +40,8 @@ function createRadiobox(opts = {}) {
            if (opts.enabled === false) {
                input.disabled = true;
            }
-            if (opts.customerAttributes != null) {
-                for (let entry of Object.entries(opts.customerAttributes)) {
+            if (opts.customAttributes != null) {
+                for (let entry of Object.entries(opts.customAttributes)) {
                    input.setAttribute(entry[0], entry[1]);
                }
            }
@ -66,8 +66,8 @@ function createCheckbox(opts = {}) {
            if (opts.enabled === false) {
                input.disabled = true;
            }
-            if (opts.customerAttributes != null) {
-                for (let entry of Object.entries(opts.customerAttributes)) {
+            if (opts.customAttributes != null) {
+                for (let entry of Object.entries(opts.customAttributes)) {
                    input.setAttribute(entry[0], entry[1]);
                }
            }
--- a/lib/ui/css/media.scss
+++ b/lib/ui/css/media.scss
@ -0,0 +1,60 @@
+.ui-media-picture>img {
+    max-width: 100px;
+    max-height: 100px;
+}
+
+.ui-media-file {
+    display: inline-flex;
+    align-items: center;
+
+    >svg {
+        width: 26px;
+        height: 26px;
+        fill: var(--link-color);
+    }
+
+    >a {
+        margin-left: 6px;
+        color: var(--link-color);
+        font-size: var(--font-size);
+    }
+}
+
+.ui-media-audio {
+    display: inline-flex;
+    align-items: center;
+    background-color: #eee;
+    border-radius: 20px;
+    overflow: hidden;
+    padding-right: 16px;
+
+    >button {
+        background-color: transparent;
+        border: none;
+        width: 40px;
+        height: 40px;
+        padding: 14px;
+        display: flex;
+        outline: none;
+
+        &:hover {
+            border: none;
+        }
+
+        >svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    >.ui-media-timestamp {
+        color: var(--secondary-color);
+        font-size: var(--font-size);
+        user-select: none;
+    }
+}
+
+.ui-media-video {
+    max-width: 200px;
+    max-height: 200px;
+}
--- a/lib/ui/css/variables/definition.scss
+++ b/lib/ui/css/variables/definition.scss
@ -13,6 +13,7 @@
    /*color-scheme: light dark;*/

    --color: #201f1e;
+    --secondary-color: #777;
    --bg-color: #fff;
    --border-color: #b9b9b9;
    --focus-border-color: #666;
--- a/lib/ui/dropdown.d.ts
+++ b/lib/ui/dropdown.d.ts
@ -23,7 +23,11 @@ export interface DropdownOptions {
    parent?: HTMLElement;
 }

-interface Dropdown {
+export class Dropdown {
+    static resolve(dom?: HTMLElement): HTMLElement;
+
+    constructor(options?: DropdownOptions);
+
    sourceFilter: () => Array<DropdownItem | any>;
    onselected: (item: DropdownItem | any) => void;
    onselectedlist: (list: Array<DropdownItem | any>) => void;
@ -40,12 +44,3 @@ interface Dropdown {
    select(selected: string, silence?: boolean): void;
    selectlist(selectedlist: Array<string>, silence?: boolean): void;
 }
-
-declare var Dropdown: {
-    prototype: Dropdown;
-    new(options?: DropdownOptions): Dropdown;
-
-    resolve(dom?: HTMLElement): HTMLElement;
-}
-
-export default Dropdown;
--- a/lib/ui/dropdown.html
+++ b/lib/ui/dropdown.html
@ -1,304 +0,0 @@
-<div>
-  <h1>dropdown</h1>
-  <hr />
-  <p>
-    创建一个统一样式的下拉输入、选择框元素，或者解析转换页面上的 select 标签为该元素。
-  </p>
-  <h2>constructor</h2>
-  <code>new(options?: DropdownOptions): Dropdown</code>
-  <h3>options?: DropdownOptions</h3>
-  <p>
-    下拉输入、选择框的初始参数，结构为
-  <pre>interface DropdownOptions {
-    textkey?: string;
-    valuekey?: string;
-    htmlkey?: string;
-    maxlength?: Number;
-    multiselect?: boolean;
-    selected?: string;
-    selectedlist?: Array&lt;DropdownItem | any&gt;;
-    disabled?: boolean;
-    input?: boolean;
-    search?: boolean;
-    searchkeys?: Array&lt;string&gt;;
-    searchplaceholder?: string;
-    tabindex?: Number;
-    placeholder?: string;
-    slidefixed?: boolean;
-    parent?: HTMLElement;
-}</pre>
-  </p>
-  <h4>textkey?: string</h4>
-  <p>
-    数据源中用以显示的属性，默认为 <code>text</code>
-  </p>
-  <h4>valuekey?: string</h4>
-  <p>
-    数据源中作为值的属性，默认为 <code>value</code>
-  </p>
-  <h4>htmlkey?: string</h4>
-  <p>
-    数据源中用来以 html 方式呈现的属性，默认为 <code>html</code>
-  </p>
-  <h4>maxlength?: Number</h4>
-  <p>
-    作为输入类型时的最大允许字符数，默认为 500
-  </p>
-  <h4>multiselect?: boolean</h4>
-  <p>
-    是否允许多选，仅在选择类型下有效
-  </p>
-  <h4>selected?: string</h4>
-  <p>
-    默认选中的项目的值
-  </p>
-  <h4>selectedlist?: Array&lt;DropdownItem | any&gt;</h4>
-  <p>
-    多选时默认选中的项目的值的列表
-  </p>
-  <h4>disabled?: boolean</h4>
-  <p>
-    初始化时下拉框是否禁用
-  </p>
-  <h4>input?: boolean</h4>
-  <p>
-    是否为输入类型
-  </p>
-  <h4>search?: boolean</h4>
-  <p>
-    是否允许搜索
-  </p>
-  <h4>searchkeys?: Array&lt;string&gt;</h4>
-  <p>
-    搜索时搜索的数据源属性的列表，默认为 <code>[valuekey]</code>
-  </p>
-  <h4>searchplaceholder?: string</h4>
-  <p>
-    搜索输入框的占位字符串
-  </p>
-  <h4>tabindex?: Number</h4>
-  <p>
-    下拉框的焦点顺序
-  </p>
-  <h4>placeholder?: string</h4>
-  <p>
-    作为输入类型时，输入框的占位字符串
-  </p>
-  <h4>slidefixed?: boolean</h4>
-  <p>
-    下拉方向是否固定为下
-  </p>
-  <h4>parent?: HTMLElement</h4>
-  <p>
-    下拉列表呈现的父容器，默认为 <code>document.body</code>
-  </p>
-  <h2>Dropdown.resolve</h2>
-  <code>static resolve(dom?: HTMLElement): HTMLElement</code>
-  <h3>dom?: HTMLElement</h3>
-  <p>
-    将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>select</code> 元素解析为统一样式的下拉框
-  </p>
-  <hr />
-  <h2>sourceFilter</h2>
-  <code>sourceFilter: () => Array&lt;DropdownItem | any&gt;</code>
-  <p>
-    数据源代理，返回用以呈现在下拉列表中的数据源
-  </p>
-  <h2>onselected</h2>
-  <code>onselected: (item: DropdownItem | any) => void</code>
-  <h3>item: DropdownItem | any</h3>
-  <p>
-    选中项发生改变时触发该事件，参数为选中的项
-  </p>
-  <h2>onselectedlist</h2>
-  <code>onselectedlist: (list: Array&lt;DropdownItem | any&gt;) => void</code>
-  <h3>list: Array&lt;DropdownItem | any&gt;</h3>
-  <p>
-    多选时选中列表发生改变时触发该事件，参数为选中的列表
-  </p>
-  <h2>onexpanded</h2>
-  <code>onexpanded: () => void</code>
-  <p>
-    下拉列表展开时触发该事件，一般用来异步获取服务器数据，填充至数据源
-  </p>
-  <hr />
-  <h2>disabled</h2>
-  <code>property disabled(): boolean</code>
-  <p>
-    获取或设置下拉框是否禁用
-  </p>
-  <h2>source</h2>
-  <code>property source(): Array&lt;DropdownItem | any&gt;</code>
-  <p>
-    获取或设置下拉框数据源
-  </p>
-  <h2>multiselect</h2>
-  <code>readonly multiselect: boolean</code>
-  <p>
-    获取下拉框是否支持多选
-  </p>
-  <h2>selected</h2>
-  <code>readonly selected: DropdownItem | any</code>
-  <p>
-    获取下拉框当前选中项
-  </p>
-  <h2>selectedlist</h2>
-  <code>readonly selectedlist: Array&lt;DropdownItem | any&gt;</code>
-  <p>
-    获取下拉框当前选中的列表
-  </p>
-  <hr />
-  <h2>create</h2>
-  <code>create(): HTMLElement</code>
-  <p>
-    创建下拉列表，返回一个 HTML 元素
-  </p>
-  <h2>select</h2>
-  <code>select(selected: string, silence?: boolean): void</code>
-  <h3>selected: string</h3>
-  <p>
-    修改下拉框的选中项为参数值对应的项
-  </p>
-  <h3>silence?: boolean</h3>
-  <p>
-    是否静默修改，为 true 时不触发 <code>onselected</code> 事件
-  </p>
-  <h2>selectlist</h2>
-  <code>selectlist(selectedlist: Array&lt;string&gt;, silence?: boolean): void</code>
-  <h3>selectedlist: Array&lt;string&gt;</h3>
-  <p>
-    修改下拉框的选中列表为参数值列表对应的项的列表
-  </p>
-  <h3>silence?: boolean</h3>
-  <p>
-    是否静默修改，为 true 时不触发 <code>onselectedlist</code> 事件
-  </p>
-  <hr />
-  <h2>示例</h2>
-  <pre>&lt;div id="dropdown-sample"&gt;
-  &lt;select&gt;
-    &lt;option value="cs1"&gt;Case 1&lt;/option&gt;
-    &lt;option value="cs2" selected&gt;Case 2&lt;/option&gt;
-    &lt;option value="cs3"&gt;Case 3&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-  const Dropdown = window["lib-ui"].Dropdown;
-  const sample = document.querySelector('#dropdown-sample');
-
-  // 解析 select 元素
-  Dropdown.resolve(sample);
-
-  // 创建简易输入类型下拉框
-  let drop = new Dropdown({
-    input: true,
-    // selected: 'standby',
-    placeholder: 'asset status',
-    slidefixed: true
-  });
-  drop.source = ['off', 'running', 'standby', 'broken']
-    .map(it => { return { value: it, text: it } });
-  sample.appendChild(drop.create());
-
-  // 创建自定义显示元素的下拉框
-  drop = new Dropdown({
-    selected: '#ff0',
-    search: true,
-    // multiselect: true
-  });
-  drop.source = [
-    { value: '#fff', text: 'White' },
-    { value: '#f00', text: 'Red' },
-    { value: '#0f0', text: 'Green' },
-    { value: '#00f', text: 'Blue' },
-    { value: '#ff0', text: 'Yellow' },
-    { value: '#0ff', text: 'Cyan' },
-    { value: '#f0f', text: 'Magenta' },
-  ];
-  drop.source.forEach(it => {
-    const span = document.createElement('span');
-    span.className = 'ui-drop-item';
-    span.style.setProperty('--color', it.value);
-    span.innerText = it.text;
-    it.html = span;
-  });
-  sample.appendChild(drop.create());
-&lt;/script&gt;</pre>
-    <div id="dropdown-sample">
-    <select>
-      <option value="cs1">Case 1</option>
-      <option value="cs2" selected>Case 2</option>
-      <option value="cs3">Case 3</option>
-    </select>
-  </div>
-  <div style="height: 80px"></div>
-  <script type="text/javascript">
-    !function () {
-      const Dropdown = window["lib-ui"].Dropdown;
-      const sample = document.querySelector('#dropdown-sample');
-
-      Dropdown.resolve(sample);
-
-      let drop = new Dropdown({
-        input: true,
-        // selected: 'standby',
-        placeholder: 'asset status',
-        slidefixed: true
-      });
-      drop.source = ['off', 'running', 'standby', 'broken']
-        .map(it => { return { value: it, text: it } });
-      sample.appendChild(drop.create());
-
-      drop = new Dropdown({
-        selected: '#ff0',
-        search: true,
-        // multiselect: true
-      });
-      drop.source = [
-        { value: '#fff', text: 'White' },
-        { value: '#f00', text: 'Red' },
-        { value: '#0f0', text: 'Green' },
-        { value: '#00f', text: 'Blue' },
-        { value: '#ff0', text: 'Yellow' },
-        { value: '#0ff', text: 'Cyan' },
-        { value: '#f0f', text: 'Magenta' },
-      ];
-      drop.source.forEach(it => {
-        const span = document.createElement('span');
-        span.className = 'ui-drop-item';
-        span.style.setProperty('--color', it.value);
-        span.innerText = it.text;
-        it.html = span;
-      });
-      sample.appendChild(drop.create());
-    }();
-  </script>
-  <style type="text/css">
-    #dropdown-sample {
-      display: flex;
-    }
-
-    #dropdown-sample>.ui-drop-wrapper {
-      width: 200px;
-      margin-right: 10px;
-    }
-
-    .ui-drop-item {
-      font-size: .75rem !important;
-      padding: 0 0 0 22px !important;
-      position: relative;
-    }
-
-    .ui-drop-item::before {
-      content: '';
-      position: absolute;
-      width: 12px;
-      height: 12px;
-      border-radius: 6px;
-      top: calc(50% - 6px);
-      left: 6px;
-      background-color: var(--color);
-    }
-  </style>
-</div>
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@ -81,7 +81,7 @@ function filterSource(searchkeys, textkey, key, source) {
    return source;
 }

-class Dropdown {
+export class Dropdown {
    #options;

    #wrapper;
@ -412,7 +412,7 @@ class Dropdown {
                    createCheckbox({
                        label: r('allItem', '( All )'),
                        checked: allchecked,
-                        customerAttributes: { 'isall': '1' },
+                        customAttributes: { 'isall': '1' },
                        onchange: e => this.#triggerselect(e.target)
                    })
                )
@ -444,7 +444,7 @@ class Dropdown {
                const box = createCheckbox({
                    label,
                    checked: allchecked || selected,
-                    customerAttributes: {
+                    customAttributes: {
                        'class': 'dataitem',
                        'data-value': val
                    },
@ -527,6 +527,4 @@ class Dropdown {
        }
        return dom;
    }
-}
-
-export default Dropdown;
+}
--- a/lib/ui/grid/column.d.ts
+++ b/lib/ui/grid/column.d.ts
@ -0,0 +1,61 @@
+import { Grid, GridItem, GridSourceItem } from "./grid";
+import { DropdownOptions } from "../dropdown";
+
+interface GridColumnType {
+    0: "Common";
+    1: "Input";
+    2: "Dropdown";
+    3: "Checkbox";
+    4: "Icon";
+    5: "Text";
+}
+
+export interface GridColumnDefinition {
+    key?: string;
+    type?: keyof GridColumnType | typeof GridColumn;
+    caption?: string;
+    width?: Number;
+    align?: "left" | "center" | "right";
+    enabled?: boolean | string | ((item: GridItem | any) => boolean);
+    css?: { [key: string]: string };
+    styleFilter?: (item: GridItem | any) => { [key: string]: string };
+    textStyle?: { [key: string]: string };
+    visible?: boolean;
+    resizable?: boolean;
+    sortable?: boolean;
+    orderable?: boolean;
+    allcheck?: boolean;
+    events?: { [event: string]: any };
+    attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
+    allowFilter?: boolean;
+    filter?: (item: GridItem | any) => any;
+    sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
+    bgFilter?: (item: GridItem | any) => string;
+    dropOptions?: DropdownOptions;
+    source?: Array<any> | ((item: GridItem | any) => Array<any> | Promise<Array<GridSourceItem>>);
+    iconType?: string;
+    className?: string | ((item: GridItem | any) => string);
+    text?: string;
+    tooltip?: string;
+    onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
+    onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
+}
+
+export class GridColumn {
+    create(): HTMLElement;
+    createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
+    setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void;
+    getValue(e: any): any;
+    setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+    setEnabled(element: HTMLElement, enabled?: boolean): void;
+}
+
+export class GridInputColumn extends GridColumn { }
+
+export class GridTextColumn extends GridInputColumn { }
+
+export class GridDropdownColumn extends GridColumn { }
+
+export class GridCheckboxColumn extends GridColumn { }
+
+export class GridIconColumn extends GridColumn { }
--- a/lib/ui/grid/column.js
+++ b/lib/ui/grid/column.js
@ -4,9 +4,9 @@ import { createElement } from "../../functions";
 import { createIcon } from "../icon";
 import { createCheckbox } from "../checkbox";
 // import { setTooltip } from "../tooltip";
-import Dropdown from "../dropdown";
+import { Dropdown } from "../dropdown";

-class GridColumn {
+export class GridColumn {
    static create() {
        return createElement('span');
    }
@ -29,7 +29,7 @@ class GridColumn {
    }
 }

-class GridInputColumn extends GridColumn {
+export class GridInputColumn extends GridColumn {
    static get editing() { return true };

    static createEdit(trigger, col, _parent, vals) {
@ -66,7 +66,7 @@ class GridInputColumn extends GridColumn {
    }
 }

-class GridTextColumn extends GridInputColumn {
+export class GridTextColumn extends GridInputColumn {
    static createEdit(trigger, col, _parent, vals) {
        const input = createElement('textarea');
        if (typeof trigger === 'function') {
@ -100,7 +100,7 @@ class GridTextColumn extends GridInputColumn {

 const SymbolDropdown = Symbol.for('ui-dropdown');

-class GridDropdownColumn extends GridColumn {
+export class GridDropdownColumn extends GridColumn {
    static createEdit(trigger, col, parent) {
        const drop = new Dropdown({ ...col.dropOptions, parent });
        drop.onselected = trigger;
@ -179,7 +179,7 @@ class GridDropdownColumn extends GridColumn {
    }
 }

-class GridCheckboxColumn extends GridColumn {
+export class GridCheckboxColumn extends GridColumn {
    static createEdit(trigger) {
        const check = createCheckbox({
            onchange: typeof trigger === 'function' ? trigger : null
@ -199,7 +199,7 @@ class GridCheckboxColumn extends GridColumn {
    }
 }

-class GridIconColumn extends GridColumn {
+export class GridIconColumn extends GridColumn {
    static create() { return createElement('span', 'col-icon') }

    static setValue(element, val, item, col, grid) {
@ -235,13 +235,4 @@ class GridIconColumn extends GridColumn {
            element.classList.remove('disabled');
        }
    }
-}
-
-export {
-    GridColumn,
-    GridInputColumn,
-    GridTextColumn,
-    GridDropdownColumn,
-    GridCheckboxColumn,
-    GridIconColumn
 }
--- a/lib/ui/grid/grid.d.ts
+++ b/lib/ui/grid/grid.d.ts
@ -1,64 +1,15 @@
-import { DropdownOptions } from "../dropdown";
+import { GridColumnDefinition } from "./column"

-interface GridItem {
+export interface GridItem {
    value: any;
    displayValue: string;
 }

-interface GridSourceItem {
+export interface GridSourceItem {
    value: string;
    text: string;
 }

-declare var GridColumn: {
-    create(): HTMLElement;
-    createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
-    setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void;
-    getValue(e: any): any;
-    setStyle(element: HTMLElement, style: { [key: string]: string }): void;
-    setEnabled(element: HTMLElement, enabled?: boolean): void;
-}
-
-interface GridColumnType {
-    0: "Common";
-    1: "Input";
-    2: "Dropdown";
-    3: "Checkbox";
-    4: "Icon";
-    5: "Text";
-}
-
-interface GridColumnDefinition {
-    key?: string;
-    type?: keyof GridColumnType | typeof GridColumn;
-    caption?: string;
-    width?: Number;
-    align?: "left" | "center" | "right";
-    enabled?: boolean | string | ((item: GridItem | any) => boolean);
-    css?: { [key: string]: string };
-    styleFilter?: (item: GridItem | any) => { [key: string]: string };
-    textStyle?: { [key: string]: string };
-    visible?: boolean;
-    resizable?: boolean;
-    sortable?: boolean;
-    orderable?: boolean;
-    allcheck?: boolean;
-    events?: { [event: string]: any };
-    attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
-    allowFilter?: boolean;
-    filter?: (item: GridItem | any) => any;
-    sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
-    bgFilter?: (item: GridItem | any) => string;
-    dropOptions?: DropdownOptions;
-    source?: Array<any> | ((item: GridItem | any) => Array<any> | Promise<Array<GridSourceItem>>);
-    iconType?: string;
-    className?: string | ((item: GridItem | any) => string);
-    text?: string;
-    tooltip?: string;
-    onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
-    onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
-}
-
 interface GridColumnDirection {
    [-1]: Number,
    1: Number
@ -70,7 +21,17 @@ interface GridColumnColumnEventMap {
    "sort": string
 }

-interface Grid {
+export class Grid {
+    static ColumnTypes: {
+        Common: 0,
+        Input: 1,
+        Dropdown: 2,
+        Checkbox: 3,
+        Icon: 4,
+        Text: 5,
+        isCheckbox(type: Number): boolean;
+    };
+
    columns: Array<GridColumnDefinition>;
    langs?: { all: string, ok: string, reset: string };
    virtualCount?: Number;
@ -88,6 +49,8 @@ interface Grid {
    sortIndex?: Number;
    sortDirection?: keyof GridColumnDirection;

+    constructor(container: HTMLElement);
+
    willSelect?: (index: Number, colIndex: Number) => boolean;
    selectedRowChanged?: (index?: Number) => void;
    cellDblClicked?: (index: Number, colIndex: Number) => void;
@ -115,20 +78,4 @@ interface Grid {
    refresh(): void;
    resetChange(): void;
    sortColumn(reload?: boolean): void;
-}
-
-declare var Grid: {
-    ColumnTypes: {
-        Common: 0,
-        Input: 1,
-        Dropdown: 2,
-        Checkbox: 3,
-        Icon: 4,
-        Text: 5,
-        isCheckbox(type: Number): boolean;
-    };
-    GridColumn: typeof GridColumn;
-    new(container: HTMLElement): Grid;
-}
-
-export default Grid;
+}
--- a/lib/ui/grid/grid.html
+++ b/lib/ui/grid/grid.html
@ -1,277 +0,0 @@
-<div>
-  <h1>grid</h1>
-  <hr />
-  <p>
-    创建一个统一样式的滚动列表元素。
-  </p>
-  <h2>constructor</h2>
-  <code>new(container: HTMLElement): Grid</code>
-  <h3>container: HTMLElement</h3>
-  <p>
-    父容器元素，Grid 将创建在此元素之内
-  </p>
-  <h2>init</h2>
-  <code>init(container?: HTMLElement): void</code>
-  <h3>container?: HTMLElement</h3>
-  <p>
-    父容器元素，默认使用构造函数中传递的值
-  </p>
-  <h2>scrollToIndex</h2>
-  <code>scrollToIndex(index: Number): void</code>
-  <h3>index: Number</h3>
-  <p>
-    将滚动至此行
-  </p>
-  <h2>resize</h2>
-  <code>resize(force?: boolean): void</code>
-  <h3>force?: boolean</h3>
-  <p>
-    重新计算大小，参数表示是否强制重载
-  </p>
-  <h2>reload</h2>
-  <code>reload(): void</code>
-  <p>
-    重载表格元素
-  </p>
-  <h2>refresh</h2>
-  <code>refresh(): void</code>
-  <p>
-    刷新表格单元格值
-  </p>
-  <h2>resetChange</h2>
-  <code>resetChange(): void</code>
-  <p>
-    还原表格修改状态，置为未修改
-  </p>
-  <h2>sortColumn</h2>
-  <code>sortColumn(reload?: boolean): void</code>
-  <h3>reload?: boolean</h3>
-  <p>
-    根据当前设定的排序列排序，参数表示是否重载表格
-  </p>
-  <hr />
-  <h2>sortIndex</h2>
-  <code>sortIndex?: Number</code>
-  <p>
-    排序的列序号
-  </p>
-  <h2>sortDirection</h2>
-  <code>sortDirection?: keyof GridColumnDirection</code>
-  <p>
-    排序的方向，可选值为 <code>-1: desc</code>、<code>1: asc</code>
-  </p>
-  <h2>columns</h2>
-  <code>columns: Array&lt;GridColumnDefinition&gt;</code>
-  <p>
-    表格列的定义，结构为
-  <pre>interface GridColumnDefinition {
-      key?: string;
-      type?: keyof GridColumnType | typeof GridColumn;
-      caption?: string;
-      width?: Number;
-      align?: "left" | "center" | "right";
-      enabled?: boolean | string;
-      css?: { [key: string]: string };
-      styleFilter?: (item: GridItem | any) => { [key: string]: string };
-      textStyle?: { [key: string]: string };
-      visible?: boolean;
-      resizable?: boolean;
-      sortable?: boolean;
-      orderable?: boolean;
-      allcheck?: boolean;
-      events?: { [event: string]: any };
-      attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
-      filter?: (item: GridItem | any) => any;
-      sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
-      bgFilter?: (item: GridItem | any) => string;
-      dropOptions?: DropdownOptions;
-      source?: Array&lt;any&gt; | ((item: GridItem | any) => Array&lt;any&gt; | Promise&lt;Array&lt;GridSourceItem&gt;&gt;);
-      iconType?: string;
-      text?: string;
-      tooltip?: string;
-      onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
-      onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
-  }</pre>
-  </p>
-  <h3>key</h3>
-  <code>key?: string</code>
-  <p>关键字</p>
-  <h3>type</h3>
-  <code>type?: keyof GridColumnType | typeof GridColumn</code>
-  <p>列类型，可以为 <code>Grid.ColumnTypes</code> 枚举值表示内置的通用、输入、下拉、复选框、图标等类型
-  <pre>declare var ColumnTypes: {
-      Common: 0,
-      Input: 1,
-      Dropdown: 2,
-      Checkbox: 3,
-      Icon: 4,
-      isCheckbox(type: Number): boolean;
-  }</pre>也可以为符合 <code>GridColumn</code> 接口的类或对象表示自定义类型，接口定义如下
-  <pre>interface GridColumn {
-    static create(): HTMLElement;
-    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
-    static setValue(element: HTMLElement, val: any): void;
-    static getValue(e: any): any;
-    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
-    static setEnabled(element: HTMLElement, enabled?: boolean): void;
-}</pre>
-  </p>
-  <h4>create</h4>
-  <code>static create(): HTMLElement</code>
-  <p>创建只读状态的单元格元素</p>
-  <h4>createEdit</h4>
-  <code>static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement</code>
-  <p>创建编辑状态的单元格元素</p>
-  <samp>trigger: (e: any) => void</samp>
-  <p>用以触发 Grid 的列修改事件 <code>columnChanged</code> 的函数代理</p>
-  <samp>col: GridColumnDefinition</samp>
-  <p>当前列的定义对象</p>
-  <samp>body: HTMLElement</samp>
-  <p>Grid 正文表格元素</p>
-  <h4>setValue</h4>
-  <code>static setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void</code>
-  <p>设置单元格值时触发的函数</p>
-  <samp>element: HTMLElement</samp>
-  <p>单元格元素</p>
-  <samp>val: any</samp>
-  <p>单元格的值</p>
-  <samp>item: GridItem | any</samp>
-  <p>单元格所在行的数据项</p>
-  <samp>col: GridColumnDefinition</samp>
-  <p>单元格所在列的定义对象</p>
-  <hr />
-  <h2>示例</h2>
-  <pre></pre>
-  <div id="grid-sample"></div>
-  <!-- <div style="height: 80px"></div> -->
-  <script type="text/javascript">
-    !function () {
-      const Grid = window["lib-ui"].Grid;
-
-      const grid = new Grid(document.querySelector('#grid-sample'));
-
-      const statusCol = {
-        ...Grid.GridColumn,
-
-        create() {
-          const container = document.createElement('div');
-          return container;
-        },
-        // createEdit() { },
-        setValue(element, val) {
-          element.innerHTML = val;
-        },
-        getValue(element) {
-          return element.innerHTML;
-        },
-        setEnabled(element, enabled) {
-          element.className = enabled === false ? 'disabled' : '';
-        }
-      };
-
-      const iconCol = {
-        create() {
-          const a = document.createElement('a');
-          a.target = '_blank';
-          a.className = 'icon-col';
-          return a;
-        },
-        setValue(element, val, _item, col) {
-          if (col.tooltip) {
-            element.setAttribute('title', col.tooltip);
-          }
-          element.innerText = val;
-        },
-        setEnabled(element, enabled) {
-          element.style.display = enabled === false ? 'none' : '';
-        },
-        setStyle: Grid.GridColumn.setStyle
-      };
-
-      // grid.readonly = true;
-      grid.allowHtml = true;
-      grid.height = 0;
-      grid.columns = [
-        { key: 'c1', caption: 'column 122222222311111111111111111' },
-        { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
-        {
-          key: 'c2a',
-          caption: '下拉',
-          type: Grid.ColumnTypes.Dropdown,
-          allowFilter: true,
-          source: item => {
-            if (item.source == null) {
-              return new Promise((resolve, reject) => {
-                setTimeout(() => {
-                  item.source = [
-                    { value: 'off', text: 'Off' },
-                    { value: 'pending', text: 'Pending' },
-                    { value: 'broken', text: 'Broken' },
-                    { value: 'running', text: 'Running' }
-                  ];
-                  resolve(item.source);
-                }, 2000);
-              });
-            }
-            return item.source;
-          },
-          enabled: 'enabled',
-          onchanged: (item, value) => console.log('dropdown changed', item, value)
-        },
-        {
-          key: 'c2b',
-          caption: '自定义',
-          type: statusCol,
-          enabled: 'enabled'
-        },
-        { key: 'c2c', caption: '多行编辑', type: Grid.ColumnTypes.Text, enabled: 'enabled' },
-        { key: 'c3', caption: 'column 3', width: 90, align: 'right' },
-        { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input },
-        {
-          key: 'c5',
-          type: Grid.ColumnTypes.Icon,
-          enabled: 'enabled',
-          text: 'times',
-          tooltip: 'Delete',
-          events: {
-            onclick() { console.log('deleted', this) }
-          }
-        },
-        {
-          key: 'c6',
-          type: iconCol,
-          enabled: 'enabled',
-          text: '\uf044',
-          tooltip: 'Edit',
-          events: {
-            onclick() { alert(`Edit, ${this.c1}`) }
-          }
-        }
-      ];
-      grid.columnChanged = (type, index, value) => console.log(`column (${index}), ${type}, ${value}`);
-      grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
-      grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
-      grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);
-      grid.init();
-      grid.source = [
-        { c1: 'abc', c2: true, c2a: 'off', c2b: '<font style="color: red; margin-left: 8px">red</font>', c2c: 'multiple lines\nline2\nline3\n\nline5', c3: 12345, c4: 'another note' },
-        { c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c2b: '<b style="margin-left: 8px">bold</b>', c3: 1225, c4: 'Note note this is note' },
-        { c1: 'type', c2: false, c2a: 'broken', c2c: 'multiple lines\nline2\nline3\n\nline5', c3: 121111 },
-        { c1: 'diff', c2: true, c2a: 'running', c3: 124445555555555555 },
-        { c1: 'diff', c2: true, c2a: 'running', c3: 12499, enabled: false },
-        { c1: 'diff', c2: true, c2a: 'off', c3: 1244445 }
-      ];
-
-      window.grid = grid;
-    }();
-  </script>
-  <style type="text/css">
-    #grid-sample {
-      height: 500px;
-    }
-
-    #grid-sample>.ui-grid {
-      height: 100%;
-    }
-  </style>
-</div>
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@ -51,7 +51,7 @@ const ColumnTypes = {
    5: GridTextColumn
 };

-class Grid {
+export class Grid {
    #source;
    #currentSource;
    #parent;
@ -110,8 +110,6 @@ class Grid {
        isCheckbox(type) { return type === 3 }
    };

-    static GridColumn = GridColumn;
-
    constructor(container) {
        this.#parent = container;
    }
@ -412,6 +410,11 @@ class Grid {
        }
    }

+    clearHeaderCheckbox() {
+        const boxes = this.#refs.header.querySelectorAll('.ui-check-wrapper>input');
+        boxes.forEach(box => box.checked = false);
+    }
+
    #createHeader() {
        const thead = createElement('table', 'ui-grid-header');
        if (this.headerVisible === false) {
@ -1552,6 +1555,4 @@ class Grid {
            }
        }
    }
-}
-
-export default Grid;
+}
--- a/lib/ui/icon.d.ts
+++ b/lib/ui/icon.d.ts
@ -1,3 +1,25 @@
+/**
+ * 创建矢量图标元素
+ * @param type 样式分类，可以是 ['`fa-light`', '`fa-regular`', '`fa-solid`'] 其中之一
+ * @param id 图标 id
+ * @param style 样式表对象
+ */
 export function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGSVGElement
+/**
+ * 修改矢量图标
+ * @param svg 矢量图标元素
+ * @param type 样式分类，见 { @link createIcon } 第一个参数
+ * @param id 图标 id，见 { @link createIcon } 第二个参数
+ */
 export function changeIcon(svg: SVGSVGElement, type: string, id: string): SVGSVGElement
+/**
+ * 解析容器元素内符合条件的子元素为矢量图标元素
+ * @param container 容器元素
+ * @example
+ * ```
+ * <svg data-id="user" data-type="fa-solid"></svg>
+ * ```
+ * - `data-id`: 见 { @link createIcon } 第二个参数
+ * - `data-type`: 见 { @link createIcon } 第一个参数
+ */
 export function resolveIcon(container: HTMLElement): HTMLElement
--- a/lib/ui/icon.html
+++ b/lib/ui/icon.html
@ -1,50 +0,0 @@
-<div>
-  <h1>icon</h1>
-  <hr />
-  <p>
-    创建一个 svg 矢量图标元素，或者解析转换页面上特定类型的 svg
-    标签到指定的图标元素。
-  </p>
-  <h2>createIcon</h2>
-  <code>function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGElement</code>
-  <h3>type: string</h3>
-  <p>
-    图标类型，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
-  </p>
-  <h3>id: string</h3>
-  <p>
-    图形 id，例如
-    <code>user-edit</code>、<code>address-card</code>、<code>frog</code>……
-  </p>
-  <h3>style?: { [key: string]: string }</h3>
-  <p>
-    自定义样式的对象
-  </p>
-  <h2>resolveIcon</h2>
-  <code>function resolveIcon(container: HTMLElement): HTMLElement</code>
-  <h3>container: HTMLElement</h3>
-  <p>
-    将把此 HTML 元素下的所有 <code>svg[data-id]</code> 元素解析为图标，<code>[data-id]</code>
-    同上述 <code>id: string</code>，<code>[data-type]</code> 同上述
-    <code>type: string</code>
-  </p>
-  <hr />
-  <h2>示例</h2>
-  <pre>&lt;div id="icon-sample"&gt;
-  &lt;svg data-id="address-card" data-type="fa-regular"&gt;&lt;/svg&gt;
-  &lt;svg data-id="user-edit" data-type="fa-light"&gt;&lt;/svg&gt;
-  &lt;svg data-id="frog" data-type="fa-solid"&gt;&lt;/svg&gt;
-&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-  window["lib-ui"].resolveIcon(document.querySelector("#icon-sample"));
-&lt;/script&gt;</pre>
-  <div id="icon-sample">
-    <svg data-id="address-card" data-type="fa-regular"></svg>
-    <svg data-id="user-edit" data-type="fa-light"></svg>
-    <svg data-id="frog" data-type="fa-solid"></svg>
-  </div>
-  <script type="text/javascript">
-    window["lib-ui"].resolveIcon(document.querySelector("#icon-sample"));
-  </script>
-</div>
--- a/lib/ui/media.d.ts
+++ b/lib/ui/media.d.ts
@ -0,0 +1,49 @@
+/**
+ * 创建媒体图片元素
+ * @param url 图片链接地址
+ * @returns 返回一个 A 标签元素
+ */
+export function createPicture(url: string): HTMLAnchorElement
+
+/**
+ * 创建一个音频播放元素
+ * @param mime 音频类型，如 `audio/amr`、`audio/ogg`
+ * @param url 音频 url
+ */
+export function createAudio(mime: string, url: string): HTMLAudioElement | HTMLDivElement
+
+/**
+ * 创建一个视频播放元素
+ * @param url 视频 url
+ */
+export function createVideo(url: string): HTMLVideoElement
+
+/**
+ * 创建一个 pdf 文件元素
+ * @param url pdf 文件 url
+ */
+export function createPdf(url: string): HTMLDivElement
+
+/**
+ * 创建一个 smil 文件元素
+ * @param url smil 文件 url
+ */
+export function createSmilefile(url: string): HTMLDivElement
+
+/**
+ * 创建一个 vcard 文件元素
+ * @param url vcard 文件 url
+ */
+export function createVcard(url: string): HTMLDivElement
+
+/**
+ * 创建一个不支持的视频文件元素
+ * @param url 视频 url
+ */
+export function createVideofile(url: string): HTMLDivElement
+
+/**
+ * 创建一个通用文件元素
+ * @param url 文件 url
+ */
+export function createFile(url: string): HTMLDivElement
--- a/lib/ui/media.js
+++ b/lib/ui/media.js
@ -0,0 +1,160 @@
+import "./css/media.scss";
+import { createElement } from "../functions";
+import { createIcon } from "./icon";
+import { get } from "../utility";
+
+export function createPicture(url) {
+    return createElement('a', a => {
+        a.className = 'ui-media-picture';
+        a.target = '_blank';
+        a.href = url;
+    },
+        createElement('img', img => {
+            img.src = url;
+        })
+    );
+}
+
+function readBlob(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = e => {
+            const data = new Uint8Array(e.target.result);
+            resolve(data);
+        };
+        reader.onerror = reject;
+        reader.readAsArrayBuffer(blob);
+    });
+}
+
+function playAmrArray(array) {
+    return new Promise((resolve, reject) => {
+        const samples = AMR.decode(array);
+        if (samples != null) {
+            resolve(samples);
+        } else {
+            reject();
+        }
+    });
+}
+
+function playPcm(samples, ended) {
+    return new Promise(resolve => {
+        const ctx = new AudioContext();
+        ctx.addEventListener('statechange', () => resolve(ctx));
+        const source = ctx.createBufferSource();
+        if (typeof ended === 'function') {
+            source.addEventListener('ended', () => ended(ctx));
+        }
+        const buffer = ctx.createBuffer(1, samples.length, 8000);
+        if (typeof buffer.copyToChannel === 'function') {
+            buffer.copyToChannel(samples, 0, 0);
+        } else {
+            const channelBuffer = buffer.getChannelData(0);
+            channelBuffer.set(samples);
+        }
+        source.buffer = buffer;
+        source.connect(ctx.destination);
+        ctx.duration = buffer.duration;
+        source.start();
+        // resolve(ctx);
+    });
+}
+
+function getTimeLabel(time) {
+    time = Math.round(time);
+    return String(Math.floor(time / 60)).padStart(2, '0') + ':' + String(time % 60).padStart(2, '0');
+}
+
+export function createAudio(mime, url) {
+    if (mime === 'audio/amr' && typeof AMR !== 'undefined') {
+        const timestamp = createElement('span', 'ui-media-timestamp');
+        timestamp.textContent = '00:00 / 00:00';
+        let context;
+        let timer;
+        return createElement('div', 'ui-media-audio',
+            createElement('button', button => {
+                button.addEventListener('click', () => {
+                    if (context != null) {
+                        clearInterval(timer);
+                        context.close();
+                        context = null;
+                        timestamp.textContent = '00:00 / 00:00';
+                        button.replaceChildren(createIcon('fa-solid', 'play'));
+                        return;
+                    }
+                    get(url, {
+                        accept: mime
+                    })
+                        .then(r => r.blob())
+                        .then(r => readBlob(r))
+                        .then(r => playAmrArray(r))
+                        .then(r => playPcm(r, ctx => {
+                            context = null;
+                            clearInterval(timer);
+                            timestamp.textContent = '00:00 / ' + getTimeLabel(ctx.duration);
+                            button.replaceChildren(createIcon('fa-solid', 'play'));
+                        }))
+                        .then(ctx => {
+                            context = ctx;
+                            button.replaceChildren(createIcon('fa-solid', 'stop'));
+                            const total = getTimeLabel(ctx.duration);
+                            const refresh = () => timestamp.textContent = getTimeLabel(ctx.currentTime) + ' / ' + total;
+                            refresh();
+                            timer = setInterval(refresh, 500);
+                        })
+                        .catch(e => {
+                            clearInterval(timer);
+                            console.error(e);
+                        });
+                });
+            },
+                createIcon('fa-solid', 'play')
+            ),
+            timestamp
+        );
+    }
+    return createElement('audio', audio => {
+        audio.src = url;
+        audio.controls = true;
+    });
+}
+
+export function createVideo(url) {
+    return createElement('video', video => {
+        video.className = 'ui-media-video';
+        video.src = url;
+        video.controls = true;
+    });
+}
+
+function createFileElement(url, icon) {
+    return createElement('div', 'ui-media-file',
+        createIcon('fa-solid', icon),
+        createElement('a', a => {
+            a.target = '_blank';
+            a.href = url;
+            a.innerText = 'Click here to view the file';
+        })
+    );
+}
+
+export function createPdf(url) {
+    return createFileElement(url, 'file-pdf');
+}
+
+export function createSmilefile(url) {
+    return createFileElement(url, 'smile');
+}
+
+export function createVcard(url) {
+    return createFileElement(url, 'id-card');
+}
+
+export function createVideofile(url) {
+    return createFileElement(url, 'photo-video');
+}
+
+export function createFile(url) {
+    return createFileElement(url, 'file-alt');
+}
--- a/lib/ui/popup.d.ts
+++ b/lib/ui/popup.d.ts
@ -0,0 +1,94 @@
+/**
+ * 弹出框选项
+ */
+interface PopupOptions {
+    /** 弹出框内容，可以是文本或者 html 元素 */
+    content: string | HTMLElement;
+    /** 弹出框标题，可以是文本或者 html 元素 */
+    title: string | HTMLElement;
+
+    /** 是否包含遮罩层，默认为 `true` */
+    mask?: boolean;
+    /** 遮罩层 z-index */
+    zIndex?: number;
+    /** 是否在获取焦点时修改 z-index */
+    changeZIndex?: boolean;
+    /** 是否允许移动 */
+    movable?: boolean;
+    /** 是否允许修改大小 */
+    resizable?: boolean;
+    /** 最小宽度，默认 200 */
+    minWidth?: number;
+    /** 最小高度，默认 200 */
+    minHeight?: number;
+    /** 是否允许弹出框收折 */
+    collapsable?: boolean;
+    /** 弹出框的按钮定义集合 */
+    buttons?: PopupButton[];
+
+    /**
+     * 遮罩层显示或者隐藏时的回调函数
+     * @param this 当前 popup 对象
+     * @param masking 显示或隐藏遮罩层
+     */
+    onMasking?: (this: Popup, masking: boolean) => void;
+    /**
+     * 移动结束时的回调函数
+     * @param this 当前 popup 对象
+     */
+    onMoveEnded?: (this: Popup) => void;
+    /**
+     * 修改大小开始时的回调函数
+     * @param this 当前 popup 对象
+     */
+    onResizeStarted?: (this: Popup) => void;
+    /**
+     * 修改大小中的回调函数
+     * @param this 当前 popup 对象
+     * @param x 坐标 x
+     * @param y 坐标 y
+     * @param width 当前宽度
+     * @param height 当前高度
+     */
+    onResizing?: (this: Popup, x: number, y: number, width: number, height: number) => void;
+    /**
+     * 修改大小结束时的回调函数
+     * @param this 当前 popup 对象
+     */
+    onResizeEnded?: (this: Popup) => void;
+    /**
+     * 弹出框关闭时的回调函数
+     */
+    resolve?: () => void;
+}
+
+export class Popup {
+    constructor(opts?: PopupOptions);
+}
+
+interface PopupButton {
+    tabIndex: number;
+    key: string;
+    text: string;
+    trigger: (this: Popup) => boolean | Promise<boolean>;
+}
+
+interface PopupIconTypes {
+    'info': 'info-circle';
+    'information': 'info-circle';
+    'warn': 'exclamation-triangle';
+    'warning': 'exclamation-triangle';
+    'question': 'question-circle';
+    'error': 'times-circle';
+}
+
+interface PopupButtonResult {
+    key: string;
+    popup: Popup;
+}
+
+export function createPopup(title: string | HTMLElement, content: string | HTMLElement, ...buttons: PopupButton[]): Popup
+
+export function showAlert(title: string | HTMLElement, message: string, iconType?: keyof PopupIconTypes, parent?: HTMLElement): Promise<void>
+
+export function showConfirm(title: string | HTMLElement, content: string | HTMLElement, buttons: PopupButton[], iconType?: keyof PopupIconTypes, parent?: HTMLElement): Promise<PopupButtonResult>
--- a/lib/ui/popup.html
+++ b/lib/ui/popup.html
@ -1,51 +0,0 @@
-<div>
-    <h1>popup</h1>
-    <hr />
-    <p>
-        创建弹出窗口。
-    </p>
-    <hr />
-    <h2>示例</h2>
-    <div id="popup-sample">
-        <button id="button-popup">Popup</button>
-    </div>
-    <script type="text/javascript">
-        const ui = window['lib-ui'];
-
-        document.querySelector('#button-popup').addEventListener('click', () => {
-            const popup = new ui.Popup({
-                title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
-                content: ui.createElement('div', 'class-content',
-                    ui.createElement('span', span => span.innerText = 'Text content.')
-                ),
-                mask: false,
-                // movable: false,
-                resizable: true,
-                collapsable: true,
-                minWidth: 210,
-                minHeight: 200,
-                buttons: [
-                    {
-                        text: 'Loading', trigger: p => {
-                            p.loading = true;
-                            setTimeout(() => p.loading = false, 1000);
-                            return false;
-                        }
-                    },
-                    { text: 'OK' }
-                ],
-                onMoveEnded: () => console.log('move ended.', popup.rect),
-                onResizeEnded: () => console.log('resize ended.', popup.rect)
-            });
-            popup.show();
-            window.popup = popup;
-        });
-    </script>
-    <style type="text/css">
-        .ui-popup-mask .ui-popup-container {
-            min-width: 210px;
-            min-height: 200px;
-            max-width: unset;
-        }
-    </style>
-</div>
--- a/lib/ui/popup.js
+++ b/lib/ui/popup.js
@ -38,7 +38,7 @@ function trimPx(px) {
    return px;
 }

-class Popup {
+export class Popup {
    #mask;
    #option;
    #bounds;
@ -116,6 +116,9 @@ class Popup {
        if (typeof this.#option.onMasking === 'function') {
            this.#option.onMasking.call(this, false);
        }
+        if (typeof this.#option.resolve === 'function') {
+            this.#option.resolve();
+        }
    }

    create() {
@ -124,7 +127,7 @@ class Popup {
        if (option.mask === false) {
            mask.classList.add('ui-popup-transparent');
        } else if (typeof option.onMasking === 'function') {
-            this.#option.onMasking.call(this, true);
+            option.onMasking.call(this, true);
        }
        if (!isNaN(option.zIndex)) {
            mask.style.zIndex = String(option.zIndex);
@ -478,8 +481,6 @@ class Popup {
    }
 }

-export default Popup;
-
 export function createPopup(title, content, ...buttons) {
    const popup = new Popup({
        title,
@ -506,6 +507,7 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
                createIcon('fa-solid', iconTypes[iconType] ?? 'info-circle'),
                createElement('span', span => span.innerText = message)
            ),
+            resolve,
            buttons: [
                { text: r('ok', 'OK'), trigger: resolve }
            ]
@ -529,6 +531,7 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
        const popup = new Popup({
            title,
            content: wrapper,
+            resolve,
            buttons: buttons?.map(b => {
                return {
                    text: b.text,
--- a/lib/ui/tooltip.d.ts
+++ b/lib/ui/tooltip.d.ts
@ -1,2 +1,18 @@
+/**
+ * 为元素设置一个 tooltip
+ * @param container 要设置 tooltip 的容器元素
+ * @param content 提示内容，可以是字符串也可以是 html 元素
+ * @param flag 是否仅在元素内容没有呈现完全时显示 tooltip
+ * @param parent 呈现在哪个父元素上，默认添加在 `container` 末端
+ */
 export function setTooltip(container: HTMLElement, content: string | HTMLElement, flag?: boolean, parent?: HTMLElement): HTMLElement
+
+/**
+ * 解析容器元素内符合条件的子元素，为其添加 tooltip
+ * @param container 容器元素
+ * @example
+ * ```
+ * <span title="tooltip text"></span>
+ * ```
+ */
 export function resolveTooltip(container?: HTMLElement): HTMLElement
--- a/lib/ui/tooltip.html
+++ b/lib/ui/tooltip.html
@ -1,54 +0,0 @@
-<div>
-    <h1>tooltip</h1>
-    <hr />
-    <p>
-        给某个元素或者页面上含有 title 属性的元素设置一个统一样式的 tooltip。
-    </p>
-    <h2>setTooltip</h2>
-    <code>function setTooltip(container: HTMLElement, content: string | HTMLElement, flag?: boolean, parent?: HTMLElement): void</code>
-    <h3>container: HTMLElement</h3>
-    <p>
-        要设置 tooltip 的元素
-    </p>
-    <h3>content: string | HTMLElement</h3>
-    <p>
-        要设置的 tooltip 内容，允许为字符串或者 HTML 元素
-    </p>
-    <h3>flag?: boolean</h3>
-    <p>
-        是否启用严格模式，只有显示不完整时才显示 tooltip
-    </p>
-    <h3>parent?: HTMLElement</h3>
-    <p>
-        创建在哪个元素内，默认创建在目标元素之内
-    </p>
-    <h2>resolveTooltip</h2>
-    <code>function resolveTooltip(container?: HTMLElement): HTMLElement</code>
-    <h3>container?: HTMLElement</h3>
-    <p>
-        给此元素，为 null 则把 document.body 下的所有含有 title 属性的子元素设置成统一样式的 tooltip
-    </p>
-    <hr />
-    <h2>示例</h2>
-    <pre>&lt;div id="tooltip-sample"&gt;
-  &lt;!-- 1 --&gt;
-  &lt;blockquote title="From MDN Website"&gt;To send an HTTP request, create an XMLHttpRequest object, open a URL, and
-    send the request. After the transaction completes, the object will contain useful information such as the
-    response body and the HTTP status of the result.&lt;/blockquote&gt;
-  &lt;!-- 2 --&gt;
-  &lt;button title="Test to send request through XMLHttpRequest."&gt;Test&lt;/button&gt;
-&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-  window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"));
-&lt;/script&gt;</pre>
-    <div id="tooltip-sample">
-        <blockquote title="From MDN Website">To send an HTTP request, create an XMLHttpRequest object, open a URL, and
-            send the request. After the transaction completes, the object will contain useful information such as the
-            response body and the HTTP status of the result.</blockquote>
-        <button title="Test to send request through XMLHttpRequest.">Test</button>
-    </div>
-    <script type="text/javascript">
-        window["lib-ui"].resolveTooltip(document.querySelector("#tooltip-sample"));
-    </script>
-</div>
--- a/lib/ui/tooltip.js
+++ b/lib/ui/tooltip.js
@ -2,7 +2,7 @@ import './css/tooltip.scss';
 import { createElement } from "../functions";
 // import { global } from "../utility";

-function setTooltip(container, content, flag = false, parent = null) {
+export function setTooltip(container, content, flag = false, parent = null) {
    const isParent = parent instanceof HTMLElement;
    if (isParent) {
        const tipid = container.dataset.tipId;
@ -73,64 +73,77 @@ function setTooltip(container, content, flag = false, parent = null) {
                    top -= p.scrollTop;
                    p = p.parentElement;
                }
-                // check overflow
-                let t = c.offsetTop;
-                let l = c.offsetLeft;
-                p = c.offsetParent;
-                let lastWidth = p.clientWidth;
-                let lastHeight = p.clientHeight;
-                while (p != null) {
-                    const overflow = window.getComputedStyle(p).overflow;
-                    if (overflow !== 'visible') {
-                        t -= p.scrollTop;
-                        l -= p.scrollLeft;
-                        break;
-                    }
-                    t += p.offsetTop;
-                    l += p.offsetLeft;
-                    const w = p.clientWidth;
-                    if (w < lastWidth) {
-                        lastWidth += l;
-                    } else {
-                        lastWidth = p.clientWidth;
-                    }
-                    const h = p.clientHeight;
-                    if (h < lastHeight) {
-                        lastHeight += t;
-                    } else {
-                        lastHeight = p.clientHeight;
-                    }
-                    const parent = p.offsetParent;
-                    while (p != null && p != parent) {
-                        t -= p.scrollTop;
-                        l -= p.scrollLeft;
-                        p = p.parentElement;
-                    }
-                }
                wrapper.style.display = '';
                const offsetHeight = wrapper.offsetHeight;
-                if (t - offsetHeight - 14 < 0) {
-                    const parentOffsetHeight = c.parentElement.offsetHeight;
-                    if (t + parentOffsetHeight + offsetHeight + 10 > lastHeight) {
-                        top = t + (parentOffsetHeight - offsetHeight) / 2;
-                        if (top + offsetHeight + 1 > lastHeight) {
-                            top = lastHeight - offsetHeight - 1;
-                        }
-                        wrapper.classList.add('ui-tooltip-no');
-                    } else {
-                        top += parentOffsetHeight + 10;
+                const offsetWidth = wrapper.offsetWidth;
+                if (isParent) {
+                    top -= offsetHeight + 14;
+                    if (top < -offsetHeight) {
+                        top += c.offsetHeight + offsetHeight + 14;
                        wrapper.classList.add('ui-tooltip-down');
                    }
+                    left += (c.offsetWidth - offsetWidth) / 2;
+                    if (left < 1) {
+                        left = 1;
+                    }
                } else {
-                    top -= offsetHeight + 14;
-                    wrapper.classList.remove('ui-tooltip-down');
-                }
-                const offsetWidth = wrapper.offsetWidth;
-                left += (c.offsetWidth - offsetWidth) / 2;
-                if (l - offsetWidth < 0) {
-                    left = 1;
-                } else if (left + offsetWidth + 1 > lastWidth) {
-                    left = lastWidth - offsetWidth - 1;
+                    // check overflow
+                    let t = c.offsetTop;
+                    let l = c.offsetLeft;
+                    p = c.offsetParent;
+                    let lastWidth = p.clientWidth;
+                    let lastHeight = p.clientHeight;
+                    while (p != null) {
+                        const overflow = window.getComputedStyle(p).overflow;
+                        if (overflow !== 'visible') {
+                            break;
+                        }
+                        t += p.offsetTop;
+                        l += p.offsetLeft;
+                        const parent = p.offsetParent;
+                        while (p != null) {
+                            const w = p.clientWidth;
+                            if (w < lastWidth) {
+                                lastWidth += l;
+                            } else {
+                                lastWidth = p.clientWidth;
+                            }
+                            const h = p.clientHeight;
+                            if (h < lastHeight) {
+                                lastHeight += t;
+                            } else {
+                                lastHeight = p.clientHeight;
+                            }
+                            t -= p.scrollTop;
+                            l -= p.scrollLeft;
+                            if (p === parent) {
+                                break;
+                            }
+                            p = p.parentElement;
+                        }
+                    }
+                    if (t - offsetHeight - 14 < 0) {
+                        const containerOffsetHeight = c.offsetHeight;
+                        if (t + containerOffsetHeight + offsetHeight + 14 > lastHeight) {
+                            top = t + (containerOffsetHeight - offsetHeight) / 2;
+                            if (top + offsetHeight + 1 > lastHeight) {
+                                top = lastHeight - offsetHeight - 1;
+                            }
+                            wrapper.classList.add('ui-tooltip-no');
+                        } else {
+                            top += containerOffsetHeight + 14;
+                            wrapper.classList.add('ui-tooltip-down');
+                        }
+                    } else {
+                        top -= offsetHeight + 14;
+                        wrapper.classList.remove('ui-tooltip-down');
+                    }
+                    left += (c.offsetWidth - offsetWidth) / 2;
+                    if (l - offsetWidth < 0) {
+                        left = 1;
+                    } else if (left + offsetWidth + 1 > lastWidth) {
+                        left = lastWidth - offsetWidth - 1;
+                    }
                }
                // wrapper.style.left = `${left}px`;
                // wrapper.style.top = `${top}px`;
@ -151,7 +164,7 @@ function setTooltip(container, content, flag = false, parent = null) {
    return container;
 }

-function resolveTooltip(container = document.body) {
+export function resolveTooltip(container = document.body) {
    const tips = container.querySelectorAll('[title]');
    for (let tip of tips) {
        const title = tip.getAttribute('title');
@ -161,9 +174,4 @@ function resolveTooltip(container = document.body) {
        }
    }
    return container;
-}
-
-export {
-    setTooltip,
-    resolveTooltip
 }
--- a/lib/utility/cookie.html
+++ b/lib/utility/cookie.html
@ -1,40 +0,0 @@
-<div>
-    <h1>cookie</h1>
-    <hr />
-    <p>
-        cookie 操作工具类：获取、设置、删除。
-    </p>
-    <h2>getCookie</h2>
-    <code>function getCookie(name: string): string</code>
-    <h3>name: string</h3>
-    <p>
-        待获取的 cookie 关键字
-    </p>
-    <h2>setCookie</h2>
-    <code>function setCookie(name: string, value: string, expireDays?: Number): void</code>
-    <h3>name: string</h3>
-    <p>
-        待设置的 cookie 关键字
-    </p>
-    <h3>value: string</h3>
-    <p>
-        待设置的值
-    </p>
-    <h3>expireDays?: Number</h3>
-    <p>
-        有效期天数
-    </p>
-    <h2>deleteCookie</h2>
-    <code>function deleteCookie(name: string): void</code>
-    <h3>name: string</h3>
-    <p>
-        待删除的 cookie 关键字
-    </p>
-    <hr />
-    <h2>用法</h2>
-    <pre>const cookie = window["lib-utility"];
-
-cookie.getCookie('user_id');
-cookie.setCookie('user_id', 'guest');
-cookie.deleteCookie('user_id');</pre>
-</div>
--- a/lib/utility/lgres.html
+++ b/lib/utility/lgres.html
@ -1,74 +0,0 @@
-<div>
-    <h1>lgres</h1>
-    <hr />
-    <p>
-        语言资源工具类，用以设置页面以及脚本中的多语言。
-    </p>
-    <h2>r</h2>
-    <code>function r(key: string, defaultValue?: any): any</code>
-    <h3>key: string</h3>
-    <p>
-        语言资源的关键字
-    </p>
-    <h3>defaultValue?: any</h3>
-    <p>
-        资源的默认值，如无法获取该语言资源，则返回该值
-    </p>
-    <h2>lang</h2>
-    <code>const lang : {}</code>
-    <h3>get current(): string</h3>
-    <p>
-        返回当前语言 id
-    </p>
-    <h3>get unknownError(): string</h3>
-    <p>
-        未知错误的语言资源，默认为 <code>'An unknown error occurred, please contact the administrator.'</code>
-    </p>
-    <h3>get savedSuccessfully(): string</h3>
-    <p>
-        保存成功的语言资源，默认为 <code>'Saved successfully.'</code>
-    </p>
-    <h2>init</h2>
-    <code>function init(dom?: HTMLElement, options?: LgresOptions): Promise&lt;LanguageResource&gt;</code>
-    <h3>dom?: HTMLElement</h3>
-    <p>
-        待处理的元素，为空时处理整个页面
-    </p>
-    <h3>options?: LgresOptions</h3>
-    <p>
-        初始化参数，结构为
-    <pre>interface LgresOptions {
-    template?: string,
-    callback?: (result: any) => void
-}</pre>
-    </p>
-    <h4>template?: string</h4>
-    <p>
-        语言资源文件的后缀，资源文件 url 为 <code>`language/${lgid}${template}`</code>
-    </p>
-    <h4>callback?: (result: any) => void</h4>
-    <p>
-        资源初始化后的回调函数，可能在 DOM 加载完成之前触发。
-    </p>
-    <h3>return: Promise&lt;LanguageResource&gt;</h3>
-    <p>
-        返回一个包含资源结果的 Promise，将在 DOM 加载完成之后触发。
-    </p>
-    <p><code>LanguageResource</code> 结构为
-    <pre>interface LanguageResource {
-    r(key: string, defaultValue?: any): any
-}</pre>
-    </p>
-    <hr />
-    <h2>用法</h2>
-    <pre>const lgres = window["lib-utility"];
-
-lgres.init(document.body, {
-    template: '/res.json',
-    callback: res => document.title = res.r('title', 'Default Title')
-}).then(res => {
-    document.querySelector('#header').innerText = res.r('header', 'My Header');
-    const msg = lgres.lang.unknownError;
-    document.querySelector('#message').innerText = lgres.lang.unknownError;
-});</pre>
-</div>
--- a/lib/utility/request.d.ts
+++ b/lib/utility/request.d.ts
@ -2,7 +2,8 @@ interface RequestOptions {
    method?: string;
    accept?: string;
    contentType?: string;
-    customerHeaders?: { [key: string]: string };
+    customHeaders?: { [key: string]: string };
+    mode?: RequestMode | undefined;
    signal?: AbortSignal | null;
    progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent<XMLHttpRequestEventTarget>) => any
 }
--- a/lib/utility/request.html
+++ b/lib/utility/request.html
@ -1,111 +0,0 @@
-<div>
-    <h1>request</h1>
-    <hr />
-    <p>
-        网络请求工具类，可以实现比较常见的一些请求操作。
-    </p>
-    <h2>get</h2>
-    <code>function get(url: string, options?: RequestOptions): Promise&lt;Response&gt;</code>
-    <h3>url: string</h3>
-    <p>
-        url 地址
-    </p>
-    <h3>options?: RequestOptions</h3>
-    <p>
-        请求的配置参数，结构为
-    <pre>interface RequestOptions {
-    method?: string;
-    accept?: string;
-    contentType?: string;
-    customerHeaders?: { [key: string]: string };
-    signal?: AbortSignal | null;
-    progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any
-}</pre>
-    </p>
-    <h4>method?: string</h4>
-    <p>
-        请求类型，默认为 GET 或 POST
-    </p>
-    <h4>accept?: string</h4>
-    <p>
-        Accept 请求头的值
-    </p>
-    <h4>contentType?: string</h4>
-    <p>
-        Content-Type 请求头的值
-    </p>
-    <h4>customerHeaders?: { [key: string]: string }</h4>
-    <p>
-        自定义请求头，例如
-    <pre>{
-    'X-Auth-Id': 'xxxxxx',
-    'X-Auth-Token': 'xxxxxx'
-}</pre>
-    </p>
-    <h4>signal?: AbortSignal | null</h4>
-    <p>
-        终止器的信号，用来控制终止请求任务
-    </p>
-    <h4>progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any</h4>
-    <p>
-        调用 upload 方法时在上传过程中触发的事件，返回进度参数
-    </p>
-    <h3>return: Promise&lt;Response&gt;</h3>
-    <p>
-        返回一个结果为 Response 对象的 Promise
-    </p>
-    <h2>post</h2>
-    <code>function post(url: string, data?: BodyInit | null, options?: RequestOptions): Promise&lt;Response&gt;</code>
-    <h3>url: string</h3>
-    <p>
-        url 地址
-    </p>
-    <h3>data?: BodyInit | null</h3>
-    <p>
-        post 请求传递的请求正文，可以是 FormData 或者任意对象，后者会经 JSON 序列化后发送
-    </p>
-    <h3>options?: RequestOptions</h3>
-    <p>
-        请求的配置参数，结构如上述 get
-    </p>
-    <h3>return: Promise&lt;Response&gt;</h3>
-    <p>
-        返回一个结果为 Response 对象的 Promise
-    </p>
-    <h2>upload</h2>
-    <code>upload(url: string, data: FormData, options?: RequestOptions): Promise&lt;XMLHttpRequest&gt;</code>
-    <h3>url: string</h3>
-    <p>
-        url 地址
-    </p>
-    <h3>data: FormData</h3>
-    <p>
-        upload 请求传递的请求正文，仅支持 FormData
-    </p>
-    <h3>options?: RequestOptions</h3>
-    <p>
-        请求的配置参数，结构如上述 get，仅使用其中 <code>progress</code> 与 <code>customerHeaders</code>
-    </p>
-    <h3>return: Promise&lt;XMLHttpRequest&gt;</h3>
-    <p>
-        返回一个结果为 XMLHttpRequest 对象的 Promise
-    </p>
-    <hr />
-    <h2>用法</h2>
-    <pre>const request = window["lib-utility"];
-
-request.get('https://www.baidu.com')
-    .then(r => r.text())
-    .then(text => console.log(text));
-
-request.post('api/query', { id: 101 })
-    .then(r => r.json())
-    .then(result => console.log(result.data));
-
-request.upload('api/upload', data, {
-    progress: ev => {
-        console.log(`loaded: ${ev.loaded}, total: ${ev.total}`);
-    }
-})
-    .then(() => console.log('done.'));</pre>
-</div>
--- a/lib/utility/request.js
+++ b/lib/utility/request.js
@ -12,9 +12,10 @@ function get(url, options = {}) {
    return fetch(combineUrl(url), {
        method: options.method || 'GET',
        headers: {
-            ...options.customerHeaders,
-            'Accept': options.accept || 'application/json'
+            ...options.customHeaders,
+            'Accept': options.accept ?? 'application/json'
        },
+        mode: options.mode,
        signal: options.signal,
        cache: 'default'
    });
@ -29,16 +30,16 @@ function post(url, data, options = {}) {
            data = JSON.stringify(data);
        }
        // contentType = 'application/json';
-        if (options.customerHeaders == null) {
-            options.customerHeaders = {};
+        if (options.customHeaders == null) {
+            options.customHeaders = {};
        }
-        if (options.customerHeaders['Content-Type'] == null) {
-            options.customerHeaders['Content-Type'] = 'application/json';
+        if (options.customHeaders['Content-Type'] == null) {
+            options.customHeaders['Content-Type'] = 'application/json';
        }
    }
    return fetch(combineUrl(url), {
        method: options.method || 'POST',
-        headers: options.customerHeaders,
+        headers: options.customHeaders,
        body: data,
        signal: options.signal,
        cache: 'no-cache'
@ -65,8 +66,8 @@ function upload(url, data, options = {}) {
            }, false);
        }
        request.open('POST', combineUrl(url));
-        if (options.customerHeaders != null) {
-            for (let header of Object.entries(options.customerHeaders)) {
+        if (options.customHeaders != null) {
+            for (let header of Object.entries(options.customHeaders)) {
                request.setRequestHeader(header[0], header[1]);
            }
        }
--- a/lib/utility/strings.html
+++ b/lib/utility/strings.html
@ -1,73 +0,0 @@
-<div>
-    <h1>strings</h1>
-    <hr />
-    <p>
-        字符串操作工具类。
-    </p>
-    <h2>nullOrEmpty</h2>
-    <code>function nullOrEmpty(s?: string | any | null): boolean</code>
-    <h3>s?: string | any | null</h3>
-    <p>
-        待判断的对象，非字符串或者长度为 0 则返回 true
-    </p>
-    <h2>contains</h2>
-    <code>function contains(s: string, key: string | any, ignoreCase?: boolean): boolean</code>
-    <h3>s: string</h3>
-    <p>
-        待判断的字符串
-    </p>
-    <h3>key: string | any</h3>
-    <p>
-        检查字符串中是否含有该值，非字符串会先转换为字符串后再进行判断
-    </p>
-    <h3>ignoreCase?: boolean</h3>
-    <p>
-        判断时是否忽略大小写
-    </p>
-    <h2>endsWith</h2>
-    <code>function endsWith(s: string, suffix: string): boolean</code>
-    <h3>s: string</h3>
-    <p>
-        待判断的字符串
-    </p>
-    <h3>suffix: string</h3>
-    <p>
-        检查字符串是否以该字符串结尾
-    </p>
-    <h2>padStart</h2>
-    <code>function padStart(s: string, num: Number, char: string): boolean</code>
-    <h3>s: string</h3>
-    <p>
-        基础字符串
-    </p>
-    <h3>num: Number</h3>
-    <p>
-        对齐字符个数
-    </p>
-    <h3>char: string</h3>
-    <p>
-        用此字符串填充，使得字符串对齐，默认为 ' '
-    </p>
-    <h2>formatUrl</h2>
-    <code>function formatUrl(msg: string): string</code>
-    <h3>msg: string</h3>
-    <p>
-        把超链接解析替换为图标
-    </p>
-    <h2>escapeHtml</h2>
-    <code>function escapeHtml(text: string): string</code>
-    <h3>text: string</h3>
-    <p>
-        解析转换 html 代码为显示内容
-    </p>
-    <hr />
-    <h2>用法</h2>
-    <pre>const util = window["lib-utility"];
-
-let s = 'test string';
-console.log(util.nullOrEmpty(s));   // false
-console.log(util.contains(s, 'abc'));    // true
-console.log(util.endsWith(s, 'string'));    // true
-s = util.padStart(s, 16, '0');
-// '00000test string'</pre>
-</div>
--- a/main.js
+++ b/main.js
@ -1,6 +1,7 @@
 import './style.scss'
 // import javascriptLogo from './javascript.svg'
 import { get } from './lib/utility'
+import { createPicture, createAudio, createVideo, createPdf } from './lib/ui/media'

 // document.querySelector('#js-logo').src = javascriptLogo

@ -9,34 +10,13 @@ window.consts = {
    resver: 20230329
 }

-function navigate(page) {
-    get(page, {
-        accept: 'text/html'
-    })
-        .then(r => r.text())
-        .then(html => {
-            const range = document.createRange();
-            range.selectNode(document.body);
-            const doc = range.createContextualFragment(html);
-            const container = document.querySelector('#container');
-            container.replaceChildren(doc);
-            container.scrollTop = 0;
-        });
-}
-
-document.querySelector('#directory').addEventListener('click', ev => {
-    const page = ev.target.dataset.page;
-    if (typeof page === 'string') {
-        location.hash = page;
-        navigate(page);
-    }
-});
-
-let page = location.hash;
-if (page.length > 1) {
-    page = page.substring(1);
-    navigate(page);
-}
+document.querySelector('#container').replaceChildren(
+    // createPicture('https://fleet.foresightintelligence.com/doc/mmspart/1740581frZuuFhz5WWCysxs9oGB.jpg'),
+    createAudio('audio/amr', 'http://vite.tsanie.org/1055003tb0DisaMu1615PeSXKG.amr'),
+    createPdf('AG-PRO COMPANIES', 'https://fleet.foresightintelligence.com/doc/mmspart/1333321JLrYhkGYqsw6QSVMx3d.pdf'),
+    // createPicture('https://fleet.foresightintelligence.com/doc/mmspart/138390UGZUMWRmqBsEgPnWuW16.gif'),
+    // createVideo('https://fleet.foresightintelligence.com/doc/mmspart/17359338sR5qsG7TvS7eaUdP9PL.mp4'),
+);

 /*
 init(null, {
@ -56,7 +36,7 @@ init(null, {
    document.querySelector('#button-fetch').addEventListener('click', () => {
        get('javascript.svg', {
            // contentType: '',
-            customerHeaders: {
+            customHeaders: {
                'X-Auth': 'test/authentication'
            }
        })
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "devDependencies": {
        "postcss-preset-env": "^8.2.0",
        "sass": "^1.60.0",
+        "typedoc": "^0.24.8",
        "vite": "^4.0.4",
        "vite-plugin-externals": "^0.6.2"
      }
@ -590,9 +591,9 @@
      }
    },
    "node_modules/@esbuild/android-arm": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.18.tgz",
-      "integrity": "sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.12.tgz",
+      "integrity": "sha512-LIxaNIQfkFZbTLb4+cX7dozHlAbAshhFE5PKdro0l+FnCpx1GDJaQ2WMcqm+ToXKMt8p8Uojk/MFRuGyz3V5Sw==",
      "cpu": [
        "arm"
      ],
@ -606,9 +607,9 @@
      }
    },
    "node_modules/@esbuild/android-arm64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz",
-      "integrity": "sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.12.tgz",
+      "integrity": "sha512-BMAlczRqC/LUt2P97E4apTBbkvS9JTJnp2DKFbCwpZ8vBvXVbNdqmvzW/OsdtI/+mGr+apkkpqGM8WecLkPgrA==",
      "cpu": [
        "arm64"
      ],
@ -622,9 +623,9 @@
      }
    },
    "node_modules/@esbuild/android-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.18.tgz",
-      "integrity": "sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.12.tgz",
+      "integrity": "sha512-zU5MyluNsykf5cOJ0LZZZjgAHbhPJ1cWfdH1ZXVMXxVMhEV0VZiZXQdwBBVvmvbF28EizeK7obG9fs+fpmS0eQ==",
      "cpu": [
        "x64"
      ],
@ -638,9 +639,9 @@
      }
    },
    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.18.tgz",
-      "integrity": "sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.12.tgz",
+      "integrity": "sha512-zUZMep7YONnp6954QOOwEBwFX9svlKd3ov6PkxKd53LGTHsp/gy7vHaPGhhjBmEpqXEXShi6dddjIkmd+NgMsA==",
      "cpu": [
        "arm64"
      ],
@ -654,9 +655,9 @@
      }
    },
    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.18.tgz",
-      "integrity": "sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.12.tgz",
+      "integrity": "sha512-ohqLPc7i67yunArPj1+/FeeJ7AgwAjHqKZ512ADk3WsE3FHU9l+m5aa7NdxXr0HmN1bjDlUslBjWNbFlD9y12Q==",
      "cpu": [
        "x64"
      ],
@ -670,9 +671,9 @@
      }
    },
    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.18.tgz",
-      "integrity": "sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.12.tgz",
+      "integrity": "sha512-GIIHtQXqgeOOqdG16a/A9N28GpkvjJnjYMhOnXVbn3EDJcoItdR58v/pGN31CHjyXDc8uCcRnFWmqaJt24AYJg==",
      "cpu": [
        "arm64"
      ],
@ -686,9 +687,9 @@
      }
    },
    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.18.tgz",
-      "integrity": "sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.12.tgz",
+      "integrity": "sha512-zK0b9a1/0wZY+6FdOS3BpZcPc1kcx2G5yxxfEJtEUzVxI6n/FrC2Phsxj/YblPuBchhBZ/1wwn7AyEBUyNSa6g==",
      "cpu": [
        "x64"
      ],
@ -702,9 +703,9 @@
      }
    },
    "node_modules/@esbuild/linux-arm": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.18.tgz",
-      "integrity": "sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.12.tgz",
+      "integrity": "sha512-y75OijvrBE/1XRrXq1jtrJfG26eHeMoqLJ2dwQNwviwTuTtHGCojsDO6BJNF8gU+3jTn1KzJEMETytwsFSvc+Q==",
      "cpu": [
        "arm"
      ],
@ -718,9 +719,9 @@
      }
    },
    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.18.tgz",
-      "integrity": "sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.12.tgz",
+      "integrity": "sha512-JKgG8Q/LL/9sw/iHHxQyVMoQYu3rU3+a5Z87DxC+wAu3engz+EmctIrV+FGOgI6gWG1z1+5nDDbXiRMGQZXqiw==",
      "cpu": [
        "arm64"
      ],
@ -734,9 +735,9 @@
      }
    },
    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.18.tgz",
-      "integrity": "sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.12.tgz",
+      "integrity": "sha512-yoRIAqc0B4lDIAAEFEIu9ttTRFV84iuAl0KNCN6MhKLxNPfzwCBvEMgwco2f71GxmpBcTtn7KdErueZaM2rEvw==",
      "cpu": [
        "ia32"
      ],
@ -750,9 +751,9 @@
      }
    },
    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.18.tgz",
-      "integrity": "sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.12.tgz",
+      "integrity": "sha512-qYgt3dHPVvf/MgbIBpJ4Sup/yb9DAopZ3a2JgMpNKIHUpOdnJ2eHBo/aQdnd8dJ21X/+sS58wxHtA9lEazYtXQ==",
      "cpu": [
        "loong64"
      ],
@ -766,9 +767,9 @@
      }
    },
    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.18.tgz",
-      "integrity": "sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.12.tgz",
+      "integrity": "sha512-wHphlMLK4ufNOONqukELfVIbnGQJrHJ/mxZMMrP2jYrPgCRZhOtf0kC4yAXBwnfmULimV1qt5UJJOw4Kh13Yfg==",
      "cpu": [
        "mips64el"
      ],
@ -782,9 +783,9 @@
      }
    },
    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.18.tgz",
-      "integrity": "sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.12.tgz",
+      "integrity": "sha512-TeN//1Ft20ZZW41+zDSdOI/Os1bEq5dbvBvYkberB7PHABbRcsteeoNVZFlI0YLpGdlBqohEpjrn06kv8heCJg==",
      "cpu": [
        "ppc64"
      ],
@ -798,9 +799,9 @@
      }
    },
    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.18.tgz",
-      "integrity": "sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.12.tgz",
+      "integrity": "sha512-AgUebVS4DoAblBgiB2ACQ/8l4eGE5aWBb8ZXtkXHiET9mbj7GuWt3OnsIW/zX+XHJt2RYJZctbQ2S/mDjbp0UA==",
      "cpu": [
        "riscv64"
      ],
@ -814,9 +815,9 @@
      }
    },
    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.18.tgz",
-      "integrity": "sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.12.tgz",
+      "integrity": "sha512-dJ3Rb3Ei2u/ysSXd6pzleGtfDdc2MuzKt8qc6ls8vreP1G3B7HInX3i7gXS4BGeVd24pp0yqyS7bJ5NHaI9ing==",
      "cpu": [
        "s390x"
      ],
@ -830,9 +831,9 @@
      }
    },
    "node_modules/@esbuild/linux-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.18.tgz",
-      "integrity": "sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.12.tgz",
+      "integrity": "sha512-OrNJMGQbPaVyHHcDF8ybNSwu7TDOfX8NGpXCbetwOSP6txOJiWlgQnRymfC9ocR1S0Y5PW0Wb1mV6pUddqmvmQ==",
      "cpu": [
        "x64"
      ],
@ -846,9 +847,9 @@
      }
    },
    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.18.tgz",
-      "integrity": "sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.12.tgz",
+      "integrity": "sha512-55FzVCAiwE9FK8wWeCRuvjazNRJ1QqLCYGZVB6E8RuQuTeStSwotpSW4xoRGwp3a1wUsaVCdYcj5LGCASVJmMg==",
      "cpu": [
        "x64"
      ],
@ -862,9 +863,9 @@
      }
    },
    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.18.tgz",
-      "integrity": "sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.12.tgz",
+      "integrity": "sha512-qnluf8rfb6Y5Lw2tirfK2quZOBbVqmwxut7GPCIJsM8lc4AEUj9L8y0YPdLaPK0TECt4IdyBdBD/KRFKorlK3g==",
      "cpu": [
        "x64"
      ],
@ -878,9 +879,9 @@
      }
    },
    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.18.tgz",
-      "integrity": "sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.12.tgz",
+      "integrity": "sha512-+RkKpVQR7bICjTOPUpkTBTaJ4TFqQBX5Ywyd/HSdDkQGn65VPkTsR/pL4AMvuMWy+wnXgIl4EY6q4mVpJal8Kg==",
      "cpu": [
        "x64"
      ],
@ -894,9 +895,9 @@
      }
    },
    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.18.tgz",
-      "integrity": "sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.12.tgz",
+      "integrity": "sha512-GNHuciv0mFM7ouzsU0+AwY+7eV4Mgo5WnbhfDCQGtpvOtD1vbOiRjPYG6dhmMoFyBjj+pNqQu2X+7DKn0KQ/Gw==",
      "cpu": [
        "arm64"
      ],
@ -910,9 +911,9 @@
      }
    },
    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.18.tgz",
-      "integrity": "sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.12.tgz",
+      "integrity": "sha512-kR8cezhYipbbypGkaqCTWIeu4zID17gamC8YTPXYtcN3E5BhhtTnwKBn9I0PJur/T6UVwIEGYzkffNL0lFvxEw==",
      "cpu": [
        "ia32"
      ],
@ -926,9 +927,9 @@
      }
    },
    "node_modules/@esbuild/win32-x64": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.18.tgz",
-      "integrity": "sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.12.tgz",
+      "integrity": "sha512-O0UYQVkvfM/jO8a4OwoV0mAKSJw+mjWTAd1MJd/1FCX6uiMdLmMRPK/w6e9OQ0ob2WGxzIm9va/KG0Ja4zIOgg==",
      "cpu": [
        "x64"
      ],
@ -953,6 +954,12 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/ansi-sequence-parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz",
+      "integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==",
+      "dev": true
+    },
    "node_modules/anymatch": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@ -999,6 +1006,12 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@ -1008,6 +1021,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
    "node_modules/braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@ -1186,9 +1208,9 @@
      "dev": true
    },
    "node_modules/esbuild": {
-      "version": "0.17.18",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.18.tgz",
-      "integrity": "sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==",
+      "version": "0.18.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.12.tgz",
+      "integrity": "sha512-XuOVLDdtsDslXStStduT41op21Ytmf4/BDS46aa3xPJ7X5h2eMWBF1oAe3QjUH3bDksocNXgzGUZ7XHIBya6Tg==",
      "dev": true,
      "hasInstallScript": true,
      "bin": {
@ -1198,28 +1220,28 @@
        "node": ">=12"
      },
      "optionalDependencies": {
-        "@esbuild/android-arm": "0.17.18",
-        "@esbuild/android-arm64": "0.17.18",
-        "@esbuild/android-x64": "0.17.18",
-        "@esbuild/darwin-arm64": "0.17.18",
-        "@esbuild/darwin-x64": "0.17.18",
-        "@esbuild/freebsd-arm64": "0.17.18",
-        "@esbuild/freebsd-x64": "0.17.18",
-        "@esbuild/linux-arm": "0.17.18",
-        "@esbuild/linux-arm64": "0.17.18",
-        "@esbuild/linux-ia32": "0.17.18",
-        "@esbuild/linux-loong64": "0.17.18",
-        "@esbuild/linux-mips64el": "0.17.18",
-        "@esbuild/linux-ppc64": "0.17.18",
-        "@esbuild/linux-riscv64": "0.17.18",
-        "@esbuild/linux-s390x": "0.17.18",
-        "@esbuild/linux-x64": "0.17.18",
-        "@esbuild/netbsd-x64": "0.17.18",
-        "@esbuild/openbsd-x64": "0.17.18",
-        "@esbuild/sunos-x64": "0.17.18",
-        "@esbuild/win32-arm64": "0.17.18",
-        "@esbuild/win32-ia32": "0.17.18",
-        "@esbuild/win32-x64": "0.17.18"
+        "@esbuild/android-arm": "0.18.12",
+        "@esbuild/android-arm64": "0.18.12",
+        "@esbuild/android-x64": "0.18.12",
+        "@esbuild/darwin-arm64": "0.18.12",
+        "@esbuild/darwin-x64": "0.18.12",
+        "@esbuild/freebsd-arm64": "0.18.12",
+        "@esbuild/freebsd-x64": "0.18.12",
+        "@esbuild/linux-arm": "0.18.12",
+        "@esbuild/linux-arm64": "0.18.12",
+        "@esbuild/linux-ia32": "0.18.12",
+        "@esbuild/linux-loong64": "0.18.12",
+        "@esbuild/linux-mips64el": "0.18.12",
+        "@esbuild/linux-ppc64": "0.18.12",
+        "@esbuild/linux-riscv64": "0.18.12",
+        "@esbuild/linux-s390x": "0.18.12",
+        "@esbuild/linux-x64": "0.18.12",
+        "@esbuild/netbsd-x64": "0.18.12",
+        "@esbuild/openbsd-x64": "0.18.12",
+        "@esbuild/sunos-x64": "0.18.12",
+        "@esbuild/win32-arm64": "0.18.12",
+        "@esbuild/win32-ia32": "0.18.12",
+        "@esbuild/win32-x64": "0.18.12"
      }
    },
    "node_modules/escalade": {
@ -1350,6 +1372,12 @@
        "node": ">=0.12.0"
      }
    },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
    "node_modules/jsonfile": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@ -1362,6 +1390,12 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+      "dev": true
+    },
    "node_modules/magic-string": {
      "version": "0.25.9",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@ -1371,6 +1405,33 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
+    "node_modules/marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/nanoid": {
      "version": "3.3.6",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@ -1432,9 +1493,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
+      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
      "dev": true,
      "funding": [
        {
@ -2034,9 +2095,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-      "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
+      "version": "3.26.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.2.tgz",
+      "integrity": "sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==",
      "dev": true,
      "bin": {
        "rollup": "dist/bin/rollup"
@ -2066,6 +2127,18 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/shiki": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz",
+      "integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==",
+      "dev": true,
+      "dependencies": {
+        "ansi-sequence-parser": "^1.1.0",
+        "jsonc-parser": "^3.2.0",
+        "vscode-oniguruma": "^1.7.0",
+        "vscode-textmate": "^8.0.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -2094,6 +2167,41 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/typedoc": {
+      "version": "0.24.8",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.8.tgz",
+      "integrity": "sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==",
+      "dev": true,
+      "dependencies": {
+        "lunr": "^2.3.9",
+        "marked": "^4.3.0",
+        "minimatch": "^9.0.0",
+        "shiki": "^0.14.1"
+      },
+      "bin": {
+        "typedoc": "bin/typedoc"
+      },
+      "engines": {
+        "node": ">= 14.14"
+      },
+      "peerDependencies": {
+        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
    "node_modules/universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@ -2140,14 +2248,14 @@
      "dev": true
    },
    "node_modules/vite": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.3.tgz",
-      "integrity": "sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.3.tgz",
+      "integrity": "sha512-IMnXQXXWgLi5brBQx/4WzDxdzW0X3pjO4nqFJAuNvwKtxzAmPzFE1wszW3VDpAGQJm3RZkm/brzRdyGsnwgJIA==",
      "dev": true,
      "dependencies": {
-        "esbuild": "^0.17.5",
-        "postcss": "^8.4.23",
-        "rollup": "^3.21.0"
+        "esbuild": "^0.18.10",
+        "postcss": "^8.4.25",
+        "rollup": "^3.25.2"
      },
      "bin": {
        "vite": "bin/vite.js"
@ -2155,12 +2263,16 @@
      "engines": {
        "node": "^14.18.0 || >=16.0.0"
      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
      "optionalDependencies": {
        "fsevents": "~2.3.2"
      },
      "peerDependencies": {
        "@types/node": ">= 14",
        "less": "*",
+        "lightningcss": "^1.21.0",
        "sass": "*",
        "stylus": "*",
        "sugarss": "*",
@ -2173,6 +2285,9 @@
        "less": {
          "optional": true
        },
+        "lightningcss": {
+          "optional": true
+        },
        "sass": {
          "optional": true
        },
@ -2204,6 +2319,18 @@
      "peerDependencies": {
        "vite": ">=2.0.0"
      }
+    },
+    "node_modules/vscode-oniguruma": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+      "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
+      "dev": true
+    },
+    "node_modules/vscode-textmate": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
+      "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==",
+      "dev": true
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -22,11 +22,12 @@
  ],
  "scripts": {
    "dev": "vite",
-    "build": "node ./vite.build.js"
+    "build": "node ./vite.build.js && typedoc"
  },
  "devDependencies": {
    "postcss-preset-env": "^8.2.0",
    "sass": "^1.60.0",
+    "typedoc": "^0.24.8",
    "vite": "^4.0.4",
    "vite-plugin-externals": "^0.6.2"
  }
--- a/style.scss
+++ b/style.scss
@ -165,9 +165,10 @@ h1 {
 #container {
  flex: 1 1 auto;
  overflow: auto;
+  padding: 20px;

  >div {
-    padding: 20px;
+    margin-right: 20px;
  }
 }

--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,10 @@
+{
+    "include": [
+        "./lib/functions*",
+        "./lib/ui/**/*"
+    ],
+    "exclude": [
+        "./dist",
+        "node_modules"
+    ]
+}
--- a/typedoc.json
+++ b/typedoc.json
@ -0,0 +1,17 @@
+{
+    "entryPoints": [
+        "lib/functions.d.ts",
+        "lib/ui/checkbox.d.ts",
+        "lib/ui/dropdown.d.ts",
+        "lib/ui/icon.d.ts",
+        "lib/ui/popup.d.ts",
+        "lib/ui/tooltip.d.ts",
+        "lib/ui/grid/column.d.ts",
+        "lib/ui/grid/grid.d.ts",
+        "lib/ui/media.d.ts"
+    ],
+    "out": "./docs",
+    "readme": "README.md",
+    "name": "UI Library",
+    "cleanOutputDir": true
+}