@yuneta/gobj-ui 7.23.107 → 7.23.108

package/dist/gobj-ui.cjs.js

@@ -3112,10 +3112,11 @@ function yui_shell_show_modal(shell, content, opts) {
 		}]);
 	}
 	let logical = opts && opts.logical_class || "";
+	let wide = !!(opts && opts.wide);
 	let $modal = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + (dialog && wide ? " yui-dialog-wide" : "") + " is-active",
 			role: "dialog",
 			"aria-modal": "true"
 		},

package/dist/gobj-ui.es.js

@@ -3107,10 +3107,11 @@ function yui_shell_show_modal(shell, content, opts) {
 		}]);
 	}
 	let logical = opts && opts.logical_class || "";
+	let wide = !!(opts && opts.wide);
 	let $modal = createElement2([
 		"div",
 		{
-			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + (dialog && wide ? " yui-dialog-wide" : "") + " is-active",
 			role: "dialog",
 			"aria-modal": "true"
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.107",
+  "version": "7.23.108",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_shell.css

@@ -755,6 +755,12 @@ textarea::placeholder {
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
 }
+/*  A dialog holding a DOCUMENT (`opts.wide`): a json viewer, a record, a
+ *  log. The cap above is a width for a question with two buttons.  */
+.yui-dialog.yui-dialog-wide .yui-dialog-content {
+    max-width: 1000px;
+}
+
 .yui-dialog-header {
     display: flex;
     align-items: center;

package/src/shell_modals.js

@@ -263,9 +263,18 @@ export function yui_shell_show_modal(shell, content, opts)
      *  only this tells one popup from another in the Inspector or a selector. */
     let logical = (opts && opts.logical_class) || "";
 
+    /*  `opts.wide`: a dialog that holds a DOCUMENT and not a form. The
+     *  640px of the standard card is a width for a question with two
+     *  buttons; a json viewer, a log or a record read in it wraps every
+     *  long value and pushes its own toolbar behind a scroll arrow. It
+     *  only lifts the desktop cap -- on mobile a dialog is a full-screen
+     *  sheet already, and the media query below still wins.  */
+    let wide = !!(opts && opts.wide);
+
     let $modal = createElement2(
         ["div", {class: "MODAL" + (logical ? " " + logical : "") +
-                        " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+                        " modal yui-modal" + (dialog ? " yui-dialog" : "") +
+                        (dialog && wide ? " yui-dialog-wide" : "") + " is-active",
                  role: "dialog", "aria-modal": "true"},
             modal_children
         ]