feat: use luna modal

build/webpack.base.js

@@ -23,6 +23,7 @@ const postcssLoader = {
           /luna-notification/,
           /luna-data-grid/,
           /luna-dom-viewer/,
+          /luna-modal/,
         ],
       }),
       autoprefixer,

package.json

@@ -71,6 +71,7 @@
     "luna-console": "^1.1.1",
     "luna-data-grid": "^0.2.1",
     "luna-dom-viewer": "^1.0.2",
+    "luna-modal": "^0.1.1",
     "luna-notification": "^0.1.4",
     "luna-object-viewer": "^0.2.2",
     "node-sass": "^7.0.1",

src/Console/Console.js

@@ -14,6 +14,7 @@ import evalCss from '../lib/evalCss'
 import emitter from '../lib/emitter'
 import Settings from '../Settings/Settings'
 import LunaConsole from 'luna-console'
+import LunaModal from 'luna-modal'
 import { classPrefix as c } from '../lib/util'
 
 uncaught.start()
@@ -234,14 +235,18 @@ export default class Console extends Tool {
         logger.setOption('filter', $(this).data('filter'))
       })
       .on('click', c('.search'), () => {
-        const filter = prompt('Filter')
+        LunaModal.prompt('Filter').then((filter) => {
           if (isNull(filter)) return
           $searchKeyword.text(filter)
           if (trim(filter) === '') {
             logger.setOption('filter', 'all')
             return
           }
-        logger.setOption('filter', new RegExp(escapeRegExp(lowerCase(filter))))
+          logger.setOption(
+            'filter',
+            new RegExp(escapeRegExp(lowerCase(filter)))
+          )
+        })
       })
       .on('click', c('.copy'), () => {
         if (this._selectedLog) {

src/Elements/Elements.js

@@ -26,6 +26,7 @@ import isNull from 'licia/isNull'
 import trim from 'licia/trim'
 import lowerCase from 'licia/lowerCase'
 import pick from 'licia/pick'
+import LunaModal from 'luna-modal'
 import { pxToNum, isErudaEl } from '../lib/util'
 import evalCss from '../lib/evalCss'
 
@@ -203,12 +204,13 @@ export default class Elements extends Tool {
         this._toggleAllComputedStyle()
       )
       .on('click', '.eruda-computed-style-search', () => {
-        let filter = prompt('Filter')
+        LunaModal.prompt('Filter').then((filter) => {
           if (isNull(filter)) return
           filter = trim(filter)
           this._computedStyleSearchKeyword = filter
           this._render()
         })
+      })
 
     const $bottomBar = this._$el.find('.eruda-bottom-bar')
 

src/Resources/Resources.js

@@ -20,6 +20,7 @@ import map from 'licia/map'
 import { safeStorage, isErudaEl } from '../lib/util'
 import evalCss from '../lib/evalCss'
 import chobitsu from '../lib/chobitsu'
+import LunaModal from 'luna-modal'
 
 export default class Resources extends Tool {
   constructor() {
@@ -239,7 +240,8 @@ export default class Resources extends Tool {
       .on('click', '.eruda-search', function () {
         const $this = $(this)
         const type = $this.data('type')
-        let filter = prompt('Filter')
+
+        LunaModal.prompt('Filter').then((filter) => {
           if (isNull(filter)) return
           filter = trim(filter)
           switch (type) {
@@ -255,6 +257,7 @@ export default class Resources extends Tool {
           }
           self._render()
         })
+      })
       .on('click', '.eruda-delete-storage', function () {
         const $this = $(this)
         const key = $this.data('key')

src/Snippets/defSnippets.js

@@ -9,6 +9,7 @@ import $ from 'licia/$'
 import upperFirst from 'licia/upperFirst'
 import loadJs from 'licia/loadJs'
 import trim from 'licia/trim'
+import LunaModal from 'luna-modal'
 import { safeStorage, isErudaEl } from '../lib/util'
 import evalCss from '../lib/evalCss'
 
@@ -44,11 +45,13 @@ export default [
   {
     name: 'Search Text',
     fn() {
-      const keyword = prompt('Enter the text') || ''
-
-      if (trim(keyword) === '') return
+      LunaModal.prompt('Enter the text').then((keyword) => {
+        if (!keyword || trim(keyword) === '') {
+          return
+        }
 
         search(keyword)
+      })
     },
     desc: 'Highlight given text on page',
   },

src/eruda.js

@@ -1,4 +1,5 @@
 import 'core-js/modules/es.map'
+import 'core-js/stable/promise'
 import EntryBtn from './EntryBtn/EntryBtn'
 import DevTools from './DevTools/DevTools'
 import Tool from './DevTools/Tool'
@@ -193,6 +194,9 @@ export default {
     const className = 'eruda-style-container'
     const $el = this._$el
 
+    evalCss.container = document.head
+    evalCss(require('luna-modal/luna-modal.css'))
+
     if (this._shadowRoot) {
       evalCss.container = this._shadowRoot
       evalCss(':host { all: initial }')

src/style/luna.scss

@@ -232,3 +232,37 @@
   margin: 0;
   padding-left: 15px !important;
 }
+
+.luna-modal {
+  z-index: 1000000;
+}
+
+.luna-modal-body,
+.luna-modal-input {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+.luna-modal-input {
+  border-color: var(--border);
+}
+
+.luna-modal-button-group {
+  .luna-modal-secondary {
+    overflow: hidden;
+    border-color: var(--border);
+    color: var(--foreground);
+    background: var(--background);
+  }
+  .luna-modal-primary {
+    overflow: hidden;
+    background: var(--accent);
+  }
+  .luna-modal-button {
+    &:active {
+      &::before {
+        background: var(--accent);
+      }
+    }
+  }
+}