From fecaf6f4507f043e87c912f801d39f562885ca66 Mon Sep 17 00:00:00 2001
From: Tsanie Lily <tsorgy@gmail.com>
Date: Mon, 10 Apr 2023 08:33:10 +0800
Subject: [PATCH] popup page

---
 css/popup.scss    |  4 ++++
 css/ui.scss       |  3 ++-
 index.html        |  1 +
 lib/ui.js         |  5 ++++-
 lib/ui/popup.html | 28 ++++++++++++++++++++++++++++
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 lib/ui/popup.html

diff --git a/css/popup.scss b/css/popup.scss
index 869e26c..764f83b 100644
--- a/css/popup.scss
+++ b/css/popup.scss
@@ -51,6 +51,7 @@ $buttonHeight: 36px;
                 padding: 4px;
                 cursor: pointer;
                 box-sizing: border-box;
+                transition: opacity .12s ease;
 
                 &:hover {
                     opacity: .8;
@@ -75,10 +76,13 @@ $buttonHeight: 36px;
                 margin-left: 8px;
                 border: none;
                 height: $buttonHeight;
+                line-height: $buttonHeight;
                 padding: 0 8px;
                 min-width: 60px;
+                text-align: center;
                 cursor: pointer;
                 background-color: var(--title-bg-color);
+                transition: opacity .12s ease;
 
                 &:hover {
                     opacity: .8;
diff --git a/css/ui.scss b/css/ui.scss
index 847a1ab..585b78a 100644
--- a/css/ui.scss
+++ b/css/ui.scss
@@ -1,4 +1,5 @@
 @import './checkbox.scss';
 @import './dropdown.scss';
 @import './tooltip.scss';
-@import './grid.scss';
\ No newline at end of file
+@import './grid.scss';
+@import './popup.scss';
\ No newline at end of file
diff --git a/index.html b/index.html
index a820516..9559e81 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
           <li data-page="lib/ui/tooltip.html">tooltip</li>
           <li data-page="lib/ui/dropdown.html">dropdown</li>
           <li data-page="lib/ui/grid.html">grid</li>
+          <li data-page="lib/ui/popup.html">popup</li>
         </ol>
       </li>
       <li class="title">lib-utility</li>
diff --git a/lib/ui.js b/lib/ui.js
index 2497482..4b8f138 100644
--- a/lib/ui.js
+++ b/lib/ui.js
@@ -4,6 +4,7 @@ import { createCheckbox, resolveCheckbox } from "./ui/checkbox";
 import { setTooltip, resolveTooltip } from "./ui/tooltip";
 import Dropdown from "./ui/dropdown";
 import Grid from "./ui/grid";
+import { createPopup } from "./ui/popup";
 
 export {
   // icon
@@ -18,5 +19,7 @@ export {
   // dropdown
   Dropdown,
   // grid
-  Grid
+  Grid,
+  // popup
+  createPopup
 }
diff --git a/lib/ui/popup.html b/lib/ui/popup.html
new file mode 100644
index 0000000..d223f69
--- /dev/null
+++ b/lib/ui/popup.html
@@ -0,0 +1,28 @@
+<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 = ui.createPopup('title', 'content',
+                { text: 'Ok', trigger: () => true });
+            document.body.appendChild(popup);
+            setTimeout(() => popup.style.opacity = 1);
+        });
+    </script>
+    <style type="text/css">
+        :root {
+            --title-bg-color: lightgray;
+            --title-color: #333;
+        }
+    </style>
+</div>
\ No newline at end of file