structure adjustment

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',
-                {
-                    text: 'Loading', trigger: p => {
-                        p.loading = true;
-                        setTimeout(() => p.loading = false, 1000);
-                        return false;
-                    }
-                },
-                { text: 'OK' });
+            const popup = new ui.Popup({
+                title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
+                content: 'content',
+                mask: 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' }
+                ]
+            });
             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>