structure adjustment

css/ui.scss

@@ -1,5 +0,0 @@
-@import './checkbox.scss';
-@import './dropdown.scss';
-@import './tooltip.scss';
-@import './grid.scss';
-@import './popup.scss';

lib/app/communications/customer.js

@@ -1,4 +1,4 @@
-import { Grid, createElement, setTooltip, setTooltipNext, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
+import { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
 import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
 import { createBox } from "./lib";
 import Contact from "./contact";
@@ -90,16 +90,39 @@ class CustomerCommunication {
         element.dispatchEvent(new Event('change'));
     }
 
+    /**
+     * @param {boolean} flag
+     */
+    set loading(flag) {
+        if (this.#container == null) {
+            return;
+        }
+        this.#enter.disabled = flag;
+        this.#container.querySelector('.customer-name>.ui-input').disabled = flag;
+        this.#container.querySelector('.button-send-message').disabled = flag;
+        this.#container.querySelector('.button-edit-contacts').disabled = flag;
+        this.#container.querySelector('.button-edit-followers').disabled = flag;
+    }
+
     get text() { return this.#enter?.value }
     set text(s) {
         const element = this.#enter;
         if (element != null) {
             element.value = s
-            s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
+            s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this.#option.maxLength);
             this.#container.querySelector('.message-bar .prompt-count').innerText = s;
         }
     }
 
+    get customerName() { return this.#container.querySelector('.customer-name>.ui-input')?.value }
+    set customerName(name) {
+        const element = this.#container.querySelector('.customer-name>.ui-input');
+        if (element == null) {
+            return;
+        }
+        element.value = name;
+    }
+
     get contacts() {
         return [...this.#contacts.children].map(el => {
             const span = el.querySelector('span');
@@ -303,7 +326,10 @@ class CustomerCommunication {
         }
         const container = createBox(
             createElement('div', null,
-                createElement('div', div => div.innerText = r('messages', 'Customer Communication')),
+                createElement('div', div => {
+                    div.className = 'title-module';
+                    div.innerText = option.title ?? r('messages', 'Customer Communication');
+                }),
                 createElement('div', div => {
                     div.className = 'title-company';
                     if (nullOrEmpty(option.companyName)) {
@@ -323,15 +349,16 @@ class CustomerCommunication {
         // followers
         this.#followers = this.#createFollowers(container, option);
         // enter box
-        const enter = createElement('textarea');
+        const enter = createElement('textarea', 'ui-text');
         enter.placeholder = r('typeMessage', 'Enter Message Here');
-        enter.maxLength = 3000;
+        option.maxLength ??= 3000;
+        enter.maxLength = option.maxLength;
         // if (readonly === true) {
         //     enter.disabled = true;
         // }
         enter.addEventListener('input', () => {
             const val = this.#enter.value;
-            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(option.maxLength);
             this.#container.querySelector('.message-bar .prompt-count').innerText = s;
         });
         this.#enter = enter;
@@ -344,6 +371,15 @@ class CustomerCommunication {
             },
                 enter,
                 createElement('div', div => div.style.textAlign = 'right',
+                    createElement('div', div => {
+                        div.className = 'customer-name';
+                        if (option.customerNameVisible !== true) {
+                            div.style.display = 'none';
+                        }
+                    },
+                        createElement('span', span => span.innerText = r('nameColon', 'Name:')),
+                        createElement('input', 'ui-input')
+                    ),
                     createElement('div', 'prompt-count'),
                     createElement('button', button => {
                         button.className = 'roundbtn button-send-message';
@@ -992,10 +1028,12 @@ class CustomerCommunication {
     load(data, contacts, followers) {
         const children = [];
         if (data?.length > 0) {
+            contacts ??= this.#data.contacts;
+            followers ??= this.#data.allfollowers;
             for (let comm of data) {
                 const div = createElement('div', 'item-div');
                 let name;
-                if (comm.IsReply) {
+                if (comm.IsReply && contacts?.length > 0) {
                     const c = isEmail(comm.Sender) ?
                         contacts.find(c => c.Email === comm.Sender) :
                         contacts.find(c => c.MobilePhone === comm.Sender);

lib/app/communications/internal.js

@@ -17,7 +17,7 @@ class InternalComment {
         const element = this.#enter;
         if (element != null) {
             element.value = s
-            s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
+            s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this.#option.maxLength);
             this.#container.querySelector('.message-bar .prompt-count').innerText = s;
         }
     }
@@ -38,17 +38,20 @@ class InternalComment {
     create() {
         const container = createBox(
             createElement('div', null,
-                createElement('div', div => div.innerText = r('internalComments', 'Internal Comments'))
+                createElement('div', div => {
+                    div.className = 'title-module';
+                    div.innerText = r('internalComments', 'Internal Comments');
+                })
             ), []
         );
         const readonly = this.#option.readonly;
         // enter box
-        const enter = createElement('textarea');
+        const enter = createElement('textarea', 'ui-text');
         enter.placeholder = r('typeComment', 'Enter Comment Here');
-        enter.maxLength = 3000;
+        enter.maxLength = this.#option.maxLength ??= 3000;
         enter.addEventListener('input', () => {
             const val = this.#enter.value;
-            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(this.#option.maxLength);
             this.#container.querySelector('.message-bar .prompt-count').innerText = s;
         });
         if (readonly === true) {

lib/app/communications/style.scss

@@ -1,5 +1,3 @@
-@import '../../../css/variables/definition.scss';
-
 .popup-mask .wrapper-edit-method {
     width: 100%;
 
@@ -46,11 +44,12 @@
             }
         }
 
-        &.disabled {
+        &.disabled,
+        &:disabled {
             fill: lightgray;
             background-color: transparent !important;
 
-            &:hover {
+            &:hover>svg {
                 opacity: unset;
             }
         }
@@ -95,7 +94,7 @@
         line-height: 24px;
         display: flex;
         align-items: center;
-        font-size: 1.2em;
+        font-size: var(--font-larger-size);
 
         >div {
             flex: 1 1 auto;
@@ -186,7 +185,7 @@
                 >span {
                     // flex: 1 1 auto;
                     color: var(--strong-color);
-                    font-size: var(--font-larger-size);
+                    font-size: var(--font-size);
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -216,6 +215,8 @@
             border: none;
             height: 70px;
             resize: none;
+            font-size: var(--font-smaller-size);
+            font-family: var(--font-family);
 
             &:focus,
             &:focus-visible {
@@ -226,9 +227,26 @@
         >div {
             padding: 0 10px 10px;
 
+            >.customer-name {
+                float: left;
+
+                >span {
+                    font-size: var(--font-smaller-size);
+                }
+
+                >.ui-input {
+                    margin-left: 4px;
+                    width: 150px;
+                    border-top: none;
+                    border-left: none;
+                    border-right: none;
+                }
+            }
+
             >.prompt-count {
                 display: inline-block;
                 color: var(--light-color);
+                font-size: var(--font-smaller-size);
             }
         }
     }
@@ -246,7 +264,7 @@
             white-space: normal;
             word-break: break-word;
             overflow: hidden;
-            font-size: .8125rem;
+            font-size: var(--font-size);
             color: #333;
             display: flex;
             flex-direction: column;
@@ -257,6 +275,7 @@
 
             .item-poster {
                 font-weight: bold;
+                font-size: var(--font-size);
                 align-self: flex-start;
 
                 .tooltip-wrapper>.tooltip-content {
@@ -293,7 +312,7 @@
                     margin-top: 3px;
                     font-weight: bold;
                     margin-right: -12px;
-                    font-size: 10px;
+                    font-size: .625rem;
                     float: right;
                 }
             }
@@ -301,7 +320,7 @@
             .item-time {
                 align-self: flex-end;
                 color: #aaa;
-                font-size: .7rem;
+                font-size: .6875rem;
             }
 
             &.item-other {

lib/ui.js

@@ -1,6 +1,7 @@
-import "../css/ui.scss";
+import './ui/css/variables/definition.scss';
+import './ui/css/common.scss';
 import { createElement } from "./functions";
-import { createIcon, resolveIcon } from "./ui/icon";
+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";
@@ -12,6 +13,7 @@ export {
   createElement,
   // icon
   createIcon,
+  changeIcon,
   resolveIcon,
   // checkbox
   createCheckbox,

lib/ui/checkbox.js

@@ -1,3 +1,4 @@
+import './css/checkbox.scss';
 import { createElement } from "../functions";
 import { createIcon } from "./icon";
 

lib/ui/css/checkbox.scss

@@ -1,5 +1,4 @@
 @import './functions/checkbox.scss';
-@import './variables/definition.scss';
 
 .checkbox-image {
     >input[type="checkbox"] {

lib/ui/css/common.scss

@@ -0,0 +1,29 @@
+.ui-text,
+.ui-input {
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    border: 1px solid var(--box-color);
+    border-radius: var(--border-radius);
+    transition: border-color .2s;
+
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:focus,
+    &:hover {
+        border-color: var(--focus-color);
+    }
+
+    &:disabled {
+        border-color: var(--disabled-box-color);
+        color: var(--disabled-color);
+        background-color: var(--disabled-bg-color);
+    }
+}
+
+.ui-input {
+    text-indent: var(--text-indent);
+    line-height: var(--line-height);
+}

lib/ui/css/dropdown.scss

@@ -1,6 +1,4 @@
-@import './variables/definition.scss';
 @import './functions/func.scss';
-@import './functions/checkbox.scss';
 
 $headerHeight: 26px;
 $caretWidth: 26px;

lib/ui/css/grid.scss

@@ -1,3 +1,5 @@
+@import './functions/func.scss';
+
 .grid {
     position: relative;
     box-sizing: border-box;

lib/ui/css/popup.scss

@@ -1,5 +1,4 @@
 @import './functions/func.scss';
-@import './variables/definition.scss';
 
 $headerLineHeight: 24px;
 $buttonHeight: 28px;
@@ -25,6 +24,11 @@ $buttonHeight: 28px;
         transform: scale(1.1);
     }
 
+    &.popup-transparent {
+        right: unset;
+        bottom: unset;
+    }
+
     .popup-container {
         min-width: 400px;
         max-width: 800px;
@@ -52,6 +56,12 @@ $buttonHeight: 28px;
                 font-size: 1rem;
             }
 
+            >.popup-header-title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
             >svg {
                 flex: 0 0 auto;
                 width: $headerLineHeight;
@@ -210,5 +220,78 @@ $buttonHeight: 28px;
                 }
             }
         }
+
+        .popup-border {
+            position: absolute;
+
+            &.popup-border-left,
+            &.popup-border-right {
+                width: 6px;
+                height: 100%;
+                top: 0;
+                cursor: ew-resize;
+            }
+
+            &.popup-border-top,
+            &.popup-border-bottom {
+                width: 100%;
+                height: 6px;
+                left: 0;
+                cursor: ns-resize;
+            }
+
+            &.popup-border-top-left,
+            &.popup-border-top-right,
+            &.popup-border-bottom-right,
+            &.popup-border-bottom-left {
+                width: 8px;
+                height: 8px;
+            }
+
+            &.popup-border-top-left,
+            &.popup-border-bottom-right {
+                cursor: nwse-resize;
+            }
+
+            &.popup-border-top-right,
+            &.popup-border-bottom-left {
+                cursor: nesw-resize;
+            }
+
+            &.popup-border-left,
+            &.popup-border-top-left,
+            &.popup-border-bottom-left {
+                left: -4px;
+            }
+
+            &.popup-border-right,
+            &.popup-border-top-right,
+            &.popup-border-bottom-right {
+                right: -4px;
+            }
+
+            &.popup-border-top,
+            &.popup-border-top-left,
+            &.popup-border-top-right {
+                top: -4px;
+            }
+
+            &.popup-border-bottom,
+            &.popup-border-bottom-right,
+            &.popup-border-bottom-left {
+                bottom: -4px;
+            }
+        }
+
+        &.popup-collapse {
+            min-height: 40px;
+            min-width: 160px;
+
+            .popup-body,
+            .popup-footer,
+            .popup-border {
+                display: none;
+            }
+        }
     }
 }

lib/ui/css/tooltip.scss

@@ -1,6 +1,3 @@
-@import './functions/checkbox.scss';
-@import './variables/definition.scss';
-
 .tooltip-color {
     background-color: #fff;
     color: #323130;

lib/ui/css/variables/definition.scss

@@ -31,34 +31,8 @@
     --text-indent: 4px;
     --line-height: 24px;
 
-    --font-size: .8125rem;
+    --font-size: .8125rem;          // 13px
-    --font-smaller-size: .75rem;
+    --font-smaller-size: .75rem;    // 12px
-    --font-larger-size: .875rem;
+    --font-larger-size: .875rem;    // 14px
     --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
 }
-
-.ui-input {
-    font-size: var(--font-size);
-    font-family: var(--font-family);
-    line-height: var(--line-height);
-    text-indent: var(--text-indent);
-    border: 1px solid var(--box-color);
-    border-radius: var(--border-radius);
-    transition: border-color .2s;
-
-    &:focus,
-    &:focus-visible {
-        outline: none;
-    }
-
-    &:focus,
-    &:hover {
-        border-color: var(--focus-color);
-    }
-
-    &:disabled {
-        border-color: var(--disabled-box-color);
-        color: var(--disabled-color);
-        background-color: var(--disabled-bg-color);
-    }
-}

lib/ui/dropdown.js

@@ -1,4 +1,5 @@
 // import { r, global, contains, isPositive, nullOrEmpty } from "../utility";
+import './css/dropdown.scss';
 import { r } from "../utility/lgres";
 import { contains, nullOrEmpty } from "../utility/strings";
 import { global, isPositive } from "../utility";

lib/ui/grid/grid.js

@@ -1,3 +1,4 @@
+import '../css/grid.scss';
 import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
 import { r } from "../../utility/lgres";
 import { createElement } from "../../functions";

lib/ui/icon.d.ts

@@ -1,2 +1,3 @@
 export function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGSVGElement
+export function changeIcon(svg: SVGSVGElement, type: string, id: string): SVGSVGElement
 export function resolveIcon(container: HTMLElement): HTMLElement

lib/ui/icon.js

@@ -9,6 +9,13 @@ function createUse(type, id) {
     return use;
 }
 
+function changeIcon(svg, type, id) {
+    if (svg instanceof HTMLElement) {
+        svg.replaceChildren(createUse(type, id));
+    }
+    return svg;
+}
+
 function createIcon(type, id, style) {
     const svg = document.createElementNS(svgns, 'svg');
     svg.appendChild(createUse(type, id));
@@ -34,5 +41,6 @@ function resolveIcon(container) {
 
 export {
     createIcon,
+    changeIcon,
     resolveIcon
 }

lib/ui/popup.html

@@ -13,15 +13,25 @@
         const ui = window['lib-ui'];
 
         document.querySelector('#button-popup').addEventListener('click', () => {
-            const popup = ui.createPopup('title', 'content',
+            const popup = new ui.Popup({
-                {
+                title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
-                    text: 'Loading', trigger: p => {
+                content: 'content',
-                        p.loading = true;
+                mask: false,
-                        setTimeout(() => p.loading = false, 1000);
+                resizable: true,
-                        return false;
+                collapsable: true,
-                    }
+                minWidth: 210,
-                },
+                minHeight: 200,
-                { text: 'OK' });
+                buttons: [
+                    {
+                        text: 'Loading', trigger: p => {
+                            p.loading = true;
+                            setTimeout(() => p.loading = false, 1000);
+                            return false;
+                        }
+                    },
+                    { text: 'OK' }
+                ]
+            });
             popup.show();
         });
     </script>
@@ -30,5 +40,10 @@
             --title-bg-color: lightgray;
             --title-color: #333;
         }
+        .popup-mask .popup-container {
+            min-width: 210px;
+            min-height: 200px;
+            max-width: unset;
+        }
     </style>
 </div>

lib/ui/popup.js

@@ -1,11 +1,37 @@
-import "../../css/popup.scss";
+import "./css/popup.scss";
+import { r } from "../utility/lgres";
+import { nullOrEmpty } from "../utility/strings";
+import { global } from "../utility";
 import { createElement } from "../functions";
-import { r, nullOrEmpty } from "../utility";
+import { createIcon, changeIcon } from "./icon";
-import { createIcon } from "./icon";
+
+const ResizeMods = {
+    right: 1,
+    bottom: 2,
+    left: 4,
+    top: 8,
+    bottomRight: 2 | 1,
+    bottomLeft: 2 | 4,
+    topRight: 8 | 1,
+    topLeft: 8 | 4
+}
+
+// const Cursors = {
+//     [ResizeMods.right]: 'ew-resize',
+//     [ResizeMods.bottom]: 'ns-resize',
+//     [ResizeMods.bottomRight]: 'nwse-resize',
+//     [ResizeMods.left]: 'ew-resize',
+//     [ResizeMods.bottomLeft]: 'nesw-resize',
+//     [ResizeMods.top]: 'ns-resize',
+//     [ResizeMods.topRight]: 'nesw-resize',
+//     [ResizeMods.topLeft]: 'nwse-resize'
+// }
 
 class Popup {
     #mask;
     #option;
+    #bounds;
+    // #cursor;
 
     constructor(opts = {}) {
         this.#option = opts;
@@ -13,8 +39,47 @@ class Popup {
 
     get container() { return this.#mask.querySelector('.popup-container') }
 
+    get rect() {
+        const container = this.container;
+        if (container == null) {
+            return null;
+        }
+        const style = global.getComputedStyle(container);
+        return {
+            left: style.left,
+            top: style.top,
+            width: style.width,
+            height: style.height
+        };
+    }
+    set rect(r) {
+        const container = this.container;
+        if (container == null) {
+            return;
+        }
+        const css = [];
+        if (!isNaN(r.left)) {
+            css.push(`left: ${r.left}px`);
+        }
+        if (!isNaN(r.top)) {
+            css.push(`top: ${r.top}px`);
+        }
+        if (!isNaN(r.width) && r.width > 0) {
+            css.push(`width: ${r.width}px`);
+        }
+        if (!isNaN(r.height) && r.height > 0) {
+            css.push(`height: ${r.height}px`);
+        }
+        if (css.length > 0) {
+            container.style.cssText += css.join('; ');
+        }
+    }
+
     create() {
         const mask = createElement('div', 'popup-mask');
+        if (this.#option.mask === false) {
+            mask.classList.add('popup-transparent');
+        }
         const container = createElement('div', 'popup-container');
         const close = () => {
             mask.classList.add('popup-active');
@@ -30,7 +95,10 @@ class Popup {
                 header.className = 'popup-header';
                 let title = this.#option.title;
                 if (!(title instanceof HTMLElement)) {
-                    title = createElement('div', t => t.innerText = title);
+                    title = createElement('div', t => {
+                        t.className = 'popup-header-title';
+                        t.innerText = title;
+                    });
                 }
                 header.appendChild(title);
                 const move = title.querySelector('.popup-move') ?? title;
@@ -46,6 +114,27 @@ class Popup {
                         mask.removeEventListener('mousemove', move, { passive: false });
                     });
                 });
+                if (this.#option.collapsable === true) {
+                    const collapse = createIcon('fa-regular', 'compress-alt');
+                    collapse.classList.add('icon-expand');
+                    collapse.addEventListener('click', () => {
+                        if (container.classList.contains('popup-collapse')) {
+                            const bounds = this.#bounds;
+                            if (bounds != null) {
+                                container.style.cssText += `width: ${bounds.width}; height: ${bounds.height}`;
+                            }
+                            container.classList.remove('popup-collapse');
+                            changeIcon(collapse, 'fa-regular', 'compress-alt');
+                        } else {
+                            const rect = this.rect;
+                            this.#bounds = rect;
+                            container.style.cssText += `left: ${rect.left}; top: ${rect.top}; width: 160px; height: 40px`;
+                            container.classList.add('popup-collapse');
+                            changeIcon(collapse, 'fa-regular', 'expand-alt');
+                        }
+                    });
+                    header.appendChild(collapse);
+                }
                 const cancel = createIcon('fa-regular', 'times');
                 cancel.addEventListener('click', () => close());
                 header.appendChild(cancel);
@@ -79,6 +168,43 @@ class Popup {
                 }))
             );
         }
+        // resizable
+        if (this.#option.resizable === true) {
+            container.append(
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-right';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-bottom';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-left';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-top';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-bottom-right';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-bottom-left';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-top-left';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-top-right';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e));
+                })
+            )
+        }
         mask.appendChild(container);
         this.#mask = mask;
         return mask;
@@ -90,6 +216,12 @@ class Popup {
         }
         let mask = this.#mask ?? this.create();
         parent.appendChild(mask);
+        if (this.#option.mask === false) {
+            // calculator position
+            const container = this.container;
+            container.style.left = String((parent.offsetWidth - container.offsetWidth) / 2) + 'px';
+            container.style.top = String((parent.offsetHeight - container.offsetHeight) / 2) + 'px';
+        }
         return new Promise(resolve => {
             setTimeout(() => {
                 mask.style.opacity = 1
@@ -112,6 +244,79 @@ class Popup {
             loading.style.opacity = 1;
         }
     }
+
+    #resize(mod, e) {
+        const container = this.container;
+        const option = this.#option;
+        if (typeof option.onResizeStarted === 'function') {
+            option.onResizeStarted.call(this);
+        }
+        const mask = this.#mask;
+        // this.#cursor = mask.style.cursor;
+        // mask.style.cursor = Cursors[mod];
+        const originalX = e.clientX;
+        const originalY = e.clientY;
+        const original = {
+            width: container.offsetWidth,
+            height: container.offsetHeight,
+            left: container.offsetLeft,
+            top: container.offsetTop
+        };
+        const minWidth = option.minWidth ?? 200;
+        const minHeight = option.minHeight ?? 200;
+        const move = e => {
+            const offsetX = e.clientX - originalX;
+            const offsetY = e.clientY - originalY;
+            let width = original.width;
+            let height = original.height;
+            let x = original.left;
+            let y = original.top;
+            if ((mod & ResizeMods.right) === ResizeMods.right) {
+                width += offsetX;
+                if (width < minWidth) {
+                    width = minWidth;
+                }
+            }
+            if ((mod & ResizeMods.bottom) === ResizeMods.bottom) {
+                height += offsetY;
+                if (height < minHeight) {
+                    height = minHeight;
+                }
+            }
+            if ((mod & ResizeMods.left) === ResizeMods.left) {
+                width -= offsetX;
+                if (width < minWidth) {
+                    width = minWidth;
+                    x = originalX + original.width - minWidth;
+                } else {
+                    x += offsetX;
+                }
+            }
+            if ((mod & ResizeMods.top) === ResizeMods.top) {
+                height -= offsetY;
+                if (height < minHeight) {
+                    height = minHeight;
+                    y = originalY + original.height - minHeight;
+                } else {
+                    y += offsetY;
+                }
+            }
+            if (typeof option.onResizing === 'function') {
+                option.onResizing.call(this, x, y, width, height);
+            } else {
+                container.style.cssText += `left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px`;
+            }
+        }
+        const parent = option.mask === false ? mask.parentElement : mask;
+        parent.addEventListener('mousemove', move, { passive: false });
+        parent.addEventListener('mouseup', () => {
+            parent.removeEventListener('mousemove', move, { passive: false });
+            // mask.style.cursor = this.#cursor;
+            if (typeof option.onResizeEnded === 'function') {
+                option.onResizeEnded.call(this);
+            }
+        });
+    }
 }
 
 export default Popup;

lib/ui/tooltip.js

@@ -1,3 +1,4 @@
+import './css/tooltip.scss';
 import { createElement } from "../functions";
 // import { global } from "../utility";
 

lib/utility/strings.js

@@ -46,7 +46,7 @@ function formatUrl(msg) {
         }
 
         for (let r of rs) {
-            msg = msg.replaceAll(r, '<a target="_blank" href="' + r + '"><svg><use xlink:href="' + ((typeof consts !== 'undefined' && consts.path) ?? '') + 'fonts/fa-regular.svg#link"></use></svg></a>');
+            msg = msg.replaceAll(r, '<a target="_blank" href="' + r + '"><svg><use xlink:href="' + ((typeof consts !== 'undefined' && consts.path) || '') + 'fonts/fa-regular.svg#link"></use></svg></a>');
         }
     }
 

main.js

@@ -1,5 +1,4 @@
-import './css/ui.scss'
+import './style.scss'
-import './style.css'
 // import javascriptLogo from './javascript.svg'
 import { get } from './lib/utility'
 

style.scss

@@ -1,3 +1,11 @@
+@import './lib/ui/css/variables/definition.scss';
+@import './lib/ui/css/common.scss';
+@import './lib/ui/css/checkbox.scss';
+@import './lib/ui/css/dropdown.scss';
+@import './lib/ui/css/grid.scss';
+@import './lib/ui/css/popup.scss';
+@import './lib/ui/css/tooltip.scss';
+
 :root {
   font-family: var(--serif-font-family);
   font-size: 1.125rem;
@@ -45,12 +53,12 @@ samp {
 h2+code {
   margin-left: 70px;
   position: relative;
-}
 
-h2+code::before {
+  &::before {
-  content: '签名：';
+    content: '签名：';
-  position: absolute;
+    position: absolute;
-  margin-left: -70px;
+    margin-left: -70px;
+  }
 }
 
 h3,
@@ -68,20 +76,20 @@ h3~p {
 h4 {
   font-size: .9em;
   margin-block-end: .4em;
-}
 
-h4+code {
+  +code {
-  font-size: .9rem;
+    font-size: .9rem;
+  }
 }
 
 a {
   font-weight: 500;
   color: #646cff;
   text-decoration: inherit;
-}
 
-a:hover {
+  &:hover {
-  color: #535bf2;
+    color: #535bf2;
+  }
 }
 
 button {
@@ -94,15 +102,15 @@ button {
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
-}
 
-button:hover {
+  &:hover {
-  border-color: #646cff;
+    border-color: #646cff;
-}
+  }
 
-button:focus,
+  &:focus,
-button:focus-visible {
+  &:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
+  }
 }
 
 body {
@@ -122,45 +130,45 @@ h1 {
   padding: 2rem;
   border-right: 1px solid var(--border-color);
   flex: 0 0 auto;
-}
 
-#directory>ul {
+  >ul {
-  padding: 0;
+    padding: 0;
-  line-height: 1.6em;
+    line-height: 1.6em;
-}
 
-#directory>ul>li {
+    >li {
-  list-style: none;
+      list-style: none;
-  user-select: none;
+      user-select: none;
-}
 
-#directory>ul>li.title {
+      &.title {
-  margin: 20px 0 6px;
+        margin: 20px 0 6px;
-  font-weight: bold;
+        font-weight: bold;
-  font-size: 1.25em;
+        font-size: 1.25em;
-}
+      }
+    }
+  }
 
-#directory ol {
+  ol {
-  padding-left: 10px;
+    padding-left: 10px;
-}
 
-#directory ol>li {
+    >li {
-  padding: 0 6px;
+      padding: 0 6px;
-  list-style-position: inside;
+      list-style-position: inside;
-  cursor: pointer;
+      cursor: pointer;
-}
 
-#directory ol>li:hover {
+      &:hover {
-  background-color: var(--hover-color);
+        background-color: var(--hover-color);
+      }
+    }
+  }
 }
 
 #container {
   flex: 1 1 auto;
   overflow: auto;
-}
 
-#container>div {
+  >div {
-  padding: 20px;
+    padding: 20px;
+  }
 }
 
 .app-module {
@@ -170,11 +178,11 @@ h1 {
 #create-icon {
   display: flex;
   justify-content: center;
-}
 
-#create-icon svg {
+  svg {
-  width: 20px;
+    width: 20px;
-  height: 20px;
+    height: 20px;
+  }
 }
 
 #create-checkbox {
@@ -183,13 +191,15 @@ h1 {
   align-items: center;
 }
 
-.checkbox-wrapper .check-box-inner {
+.checkbox-wrapper {
-  width: 14px;
+  .check-box-inner {
-  height: 14px;
+    width: 14px;
-}
+    height: 14px;
+  }
 
-.checkbox-wrapper>span {
+  >span {
-  font-size: 1em;
+    font-size: 1em;
+  }
 }
 
 .icon-col {
@@ -200,10 +210,10 @@ h1 {
   text-overflow: ellipsis;
   white-space: pre;
   text-align: center;
-}
 
-.icon-col:hover {
+  &:hover {
-  text-decoration: underline;
+    text-decoration: underline;
+  }
 }
 
 @media (prefers-color-scheme: light) {