sqlui 0.1.61 → 0.1.63

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ec12b1d88bc2adff9dba6ff91b01e66b123d17cb8b042e142c24f71303a27a92
-  data.tar.gz: df939b59b2bae004270ea1907a6be52352e7c81e6050405bc4534a6faaae0567
+  metadata.gz: 728b5c2df39daf318b2936df45ddfd20bf1e33d2ae4545cae7484e8abeddacc9
+  data.tar.gz: 814be017688d908e4db747959146ecbd1eed4ed5558619b75a275573242e044e
 SHA512:
-  metadata.gz: fd504e8ba6cf53b06b30b21867a7925ef7fda8055690eefb7759dd8ed745dd28088ca6c2f257eef1073aa976b67548c155bc26eb4f334750df6a059e9abdf6db
-  data.tar.gz: 96584bb97da39f508542a861d16d1bb2196238ab4d12c99528937704f6b29aefee9563c837921dbee1a72fe5113b3a8dfb39b4c74a5951ffc6fb8be697d535cb
+  metadata.gz: 9ad46193307ad7c1b3c0e6f1c95f33bfd82994a28d7327088326ace510e4e51c4328a911c4546557d01d4fce8a6e8f735b6e636c82dadc7589256fb921b1877f
+  data.tar.gz: bc37ae6f014b3b53953a34f578db586e60d39c3959deb25631ce2fe06f46a914d105ecaa42fd15856874b04f196f82008e1680ea9779b206aa9f1b44f18f8a85

data/.release-version

@@ -1 +1 @@
-0.1.61
+0.1.63

data/client/resources/sqlui.css

@@ -262,10 +262,6 @@ table tbody tr td {
   height: 21px;
 }
 
-#result-table td, #result-table th {
-    cursor: default;
-}
-
 #result-table tbody tr td abbr a {
     color: #555;
     cursor: pointer;

data/client/resources/sqlui.js

@@ -24695,48 +24695,97 @@
      }
    }
 
-   var css_248z = ".popup_popup-wrapper__huCTg {\n    position: absolute;\n    background: rgba(0, 0, 0, 0.3);\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 2;\n}\n\n.popup_popup-content__iGYws {\n    position: absolute;\n    top: 50px;\n    left: 50px;\n    height: calc(100% - 100px);\n    width: calc(100% - 100px);\n    background: #fff;\n    border: 1px solid #888;\n}\n\n.popup_popup-pre__gF3-Q {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    height: calc(100% - 112px);\n    width: calc(100% - 20px);\n    overflow: auto;\n    font-size: 18px;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n    margin: 0px;\n    padding: 10px;\n    background: #fff;\n    font-family: monospace;\n}\n\n.popup_popup-pre__gF3-Q:focus {\n    outline: none;\n}\n.popup_popup-close__3GBw3 {\n    position: absolute;\n    right: 20px;\n    bottom: 10px;\n    width: 100px;\n    height: 30px;\n    cursor: pointer;\n    font-family: Helvetica, sans-serif;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    color: #333;\n    border: 1px solid #888;\n    background: #fff;\n}\n\n.popup_popup-close__3GBw3:active {\n    background-color: #e6e6e6;\n}\n\n.popup_popup-title__W2N2J {\n    position: absolute;\n    top: 10px;\n    left: 10px;\n    font-family: Helvetica, sans-serif;\n    font-size: 18px;\n    color: #333;\n    font-weight: bold;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: calc(100% - 20px);\n}\n";
-   var styles = {"popup-wrapper":"popup_popup-wrapper__huCTg","popup-content":"popup_popup-content__iGYws","popup-pre":"popup_popup-pre__gF3-Q","popup-close":"popup_popup-close__3GBw3","popup-title":"popup_popup-title__W2N2J"};
+   var css_248z$1 = ".popup_popup-wrapper__huCTg {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    margin: 0;\n    padding: 0;\n    background: rgba(0, 0, 0, 0.3);\n}\n\n.popup_popup__co5G- {\n    position: absolute;\n    top: 60px;\n    right: 60px;\n    bottom: 60px;\n    left: 60px;\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    border: 1px solid #888;\n}\n\n.popup_title__JT4Lb {\n    margin: 0;\n    padding: 10px;\n    font-weight: bold;\n    font-family: Helvetica, sans-serif;\n    font-size: 18px;\n    color: #333;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.popup_content__m7uSh {\n    flex: 1;\n    margin: 0;\n    padding: 10px;\n    overflow: auto;\n    font-family: monospace;\n    font-size: 18px;\n    border-top: 1px solid #888;\n    border-bottom: 1px solid #888;\n    color: #333;\n}\n\n.popup_content__m7uSh:focus {\n    outline: none;\n}\n\n.popup_button-bar__VCxAC {\n    display: flex;\n    flex-direction: row;\n    margin: 0;\n    padding: 10px;\n}\n\n.popup_button__CkIzv {\n    width: 150px;\n    height: 30px;\n    margin: 0 5px;\n    cursor: pointer;\n    font-family: Helvetica, sans-serif;\n    display: flex;\n    justify-content: center;\n    font-size: 18px;\n    color: #333;\n    border: 1px solid #888;\n}\n\n.popup_button__CkIzv:active {\n    background-color: #e6e6e6;\n}\n";
+   var styles$1 = {"popup-wrapper":"popup_popup-wrapper__huCTg","popup":"popup_popup__co5G-","title":"popup_title__JT4Lb","content":"popup_content__m7uSh","button-bar":"popup_button-bar__VCxAC","button":"popup_button__CkIzv"};
+   styleInject(css_248z$1);
+
+   var css_248z = ".toast_toast__019Ay {\n    min-width: 250px; /* Set a default minimum width */\n    margin-left: -125px; /* Divide value of min-width by 2 */\n    position: fixed; /* Sit on top of the screen */\n    left: 50%; /* Center on screen. */\n    top: 30px; /* 30px from the top of the screen */\n    z-index: 3;\n    background-color: white;\n    font-family: Helvetica, sans-serif;\n    font-size: 18px;\n    box-shadow: 2px 2px 2px rgb(0, 0, 0, .2);\n    color: #333;\n    border: 1px solid #888;\n    text-align: center;\n    border-radius: 2px;\n    padding: 10px;\n    -webkit-animation: toast_fadein__g6ghy 0.5s, toast_fadeout__8dF5T 0.5s 2.5s;\n    animation: toast_fadein__g6ghy 0.5s, toast_fadeout__8dF5T 0.5s 2.5s;\n}\n\n@-webkit-keyframes toast_fadein__g6ghy {\n    from {top: 0; opacity: 0;}\n    to {top: 30px; opacity: 1;}\n}\n\n@keyframes toast_fadein__g6ghy {\n    from {top: 0; opacity: 0;}\n    to {top: 30px; opacity: 1;}\n}\n\n@-webkit-keyframes toast_fadeout__8dF5T {\n    from {top: 30px; opacity: 1;}\n    to {top: 0; opacity: 0;}\n}\n\n@keyframes toast_fadeout__8dF5T {\n    from {top: 30px; opacity: 1;}\n    to {top: 0; opacity: 0;}\n}\n";
+   var styles = {"toast":"toast_toast__019Ay","fadein":"toast_fadein__g6ghy","fadeout":"toast_fadeout__8dF5T"};
    styleInject(css_248z);
 
+   function toast (text) {
+     const toastElement = document.createElement('div');
+     toastElement.innerText = text;
+     toastElement.classList.add(styles.toast);
+     document.body.appendChild(toastElement);
+     toastElement.onanimationend = (e) => {
+       if (e.animationName === styles.fadeout) {
+         document.body.removeChild(toastElement);
+       }
+     };
+   }
+
    function createPopup (title, text) {
-     const wrapperElement = document.createElement('div');
-     wrapperElement.id = 'popup';
-     wrapperElement.classList.add(styles['popup-wrapper']);
-     document.body.appendChild(wrapperElement);
+     const popupWrapperElement = document.createElement('div');
+     popupWrapperElement.id = 'popup-wrapper';
+     popupWrapperElement.classList.add(styles$1['popup-wrapper']);
+     document.body.appendChild(popupWrapperElement);
 
-     const contentElement = document.createElement('div');
-     contentElement.classList.add(styles['popup-content']);
-     wrapperElement.appendChild(contentElement);
+     popupWrapperElement.addEventListener('click', () => {
+       document.body.removeChild(popupWrapperElement);
+     });
 
-     const closeElement = document.createElement('input');
-     closeElement.id = 'popup-close';
-     closeElement.classList.add(styles['popup-close']);
-     closeElement.type = 'button';
-     closeElement.value = 'Close';
-     contentElement.appendChild(closeElement);
+     const popupElement = document.createElement('div');
+     popupElement.id = 'popup';
+     popupElement.classList.add(styles$1.popup);
+     popupWrapperElement.appendChild(popupElement);
 
-     closeElement.addEventListener('click', (event) => {
-       document.body.removeChild(wrapperElement);
+     popupElement.addEventListener('click', (event) => {
+       event.stopPropagation();
      });
 
      const titleElement = document.createElement('div');
-     titleElement.classList.add(styles['popup-title']);
+     titleElement.classList.add(styles$1.title);
      titleElement.innerText = title;
-     contentElement.appendChild(titleElement);
+     popupElement.appendChild(titleElement);
 
-     const preElement = document.createElement('pre');
-     preElement.id = 'popup-pre';
-     preElement.classList.add(styles['popup-pre']);
-     contentElement.appendChild(preElement);
-     preElement.innerText = text;
+     const contentElement = document.createElement('pre');
+     contentElement.classList.add(styles$1.content);
+     contentElement.innerText = text;
+     popupElement.appendChild(contentElement);
 
-     wrapperElement.addEventListener('click', () => {
-       document.body.removeChild(wrapperElement);
+     const buttonBarElement = document.createElement('div');
+     buttonBarElement.classList.add(styles$1['button-bar']);
+     popupElement.appendChild(buttonBarElement);
+
+     const jsonElement = document.createElement('input');
+     jsonElement.classList.add(styles$1.button);
+     jsonElement.type = 'button';
+     jsonElement.value = 'Parse JSON';
+     buttonBarElement.appendChild(jsonElement);
+
+     jsonElement.addEventListener('click', (event) => {
+       try {
+         contentElement.innerText = JSON.stringify(JSON.parse(text), null, 2);
+       } catch (_) {
+         toast('Failed to parse JSON.');
+       }
      });
 
-     contentElement.addEventListener('click', (event) => {
-       event.stopPropagation();
+     const copyElement = document.createElement('input');
+     copyElement.classList.add(styles$1.button);
+     copyElement.type = 'button';
+     copyElement.value = 'Copy';
+     buttonBarElement.appendChild(copyElement);
+
+     copyElement.addEventListener('click', (event) => {
+       copyTextToClipboard(contentElement.innerText);
+       toast('Text copied to clipboard.');
+     });
+
+     const spacerElement = document.createElement('div');
+     spacerElement.style.flex = 1;
+     buttonBarElement.appendChild(spacerElement);
+
+     const closeElement = document.createElement('input');
+     closeElement.id = 'popup-close';
+     closeElement.classList.add(styles$1.button);
+     closeElement.type = 'button';
+     closeElement.value = 'Close';
+     buttonBarElement.appendChild(closeElement);
+
+     closeElement.addEventListener('click', (event) => {
+       document.body.removeChild(popupWrapperElement);
      });
 
      closeElement.focus();
@@ -24744,13 +24793,13 @@
 
    document.addEventListener('keydown', (event) => {
      if (event.code === 'Escape') {
-       const wrapperElement = document.getElementById('popup');
+       const wrapperElement = document.getElementById('popup-wrapper');
        if (wrapperElement) {
          event.preventDefault();
          document.body.removeChild(wrapperElement);
        }
      } else if (event.code === 'Tab') {
-       const wrapperElement = document.getElementById('popup');
+       const wrapperElement = document.getElementById('popup-wrapper');
        if (wrapperElement) {
          event.preventDefault();
          document.getElementById('popup-close').focus();
@@ -25668,25 +25717,36 @@
 
    function registerTableCellPopup (tableElement) {
      const listener = (event) => {
-       if (event.which === 1 && event.metaKey) {
+       if (event.which === 1 && (event.metaKey || event.altKey)) {
          let node = event.target;
          while (!['td', 'th', 'table'].includes(node.tagName.toLowerCase()) && node.parentNode) {
            node = node.parentNode;
          }
+
          if (node.tagName.toLowerCase() === 'td') {
-           if (event.type === 'mousedown') {
+           if (event.type === 'mousedown' && node.dataset.row) {
              const row = parseInt(node.dataset.row);
              const column = parseInt(node.dataset.column);
              const title = window.sqlFetch.result.columns[column].replaceAll('\n', '¶');
-             createPopup(title, window.sqlFetch.result.rows[row][column]);
+             if (event.metaKey) {
+               createPopup(title, window.sqlFetch.result.rows[row][column]);
+             } else if (event.altKey) {
+               copyTextToClipboard(window.sqlFetch.result.rows[row][column]);
+               toast('Text copied to clipboard.');
+             }
            }
            event.preventDefault();
          } else if (node.tagName.toLowerCase() === 'th') {
-           if (event.type === 'mousedown') {
+           if (event.type === 'mousedown' && node.dataset.column) {
              const column = parseInt(node.dataset.column);
              const value = window.sqlFetch.result.columns[column];
              const title = value.replaceAll('\n', '¶');
-             createPopup(title, value);
+             if (event.metaKey) {
+               createPopup(title, value);
+             } else if (event.altKey) {
+               copyTextToClipboard(value);
+               toast('Text copied to clipboard.');
+             }
            }
            event.preventDefault();
          }
@@ -25774,7 +25834,7 @@
        return
      }
 
-     document.getElementById('cancel-button').style.display = 'none';
+     document.getElementById('cancel-button').style.visibility = 'hidden';
      document.getElementById('fetch-sql-box').style.display = 'none';
      document.getElementById('graph-box').style.display = 'flex';
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.61
+  version: 0.1.63
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-03 00:00:00.000000000 Z
+date: 2023-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: airbrake