@easyquery/ui 7.3.0-rc02 → 7.3.0

package/dist/assets/css/easyquery-mobile.css

@@ -209,10 +209,9 @@
 }
 
 .eqjs-mobile .eqjs-qp-valueelement input[type="text"] {
-    top: auto;
-    bottom: auto;
+    top: 0;
+    bottom: 0;
     width: 100%;
-    height: 1.2rem;
     left: 0;
 }
 
@@ -264,4 +263,8 @@
     height: 22px;
 }
 
-/* QueryPanel end */
+/* ColumnsPanel end */
+
+.eqjs-qp-panel.eqjs-mobile *:focus, .eqjs-qc-panel.eqjs-mobile *:focus, .eqjs-ep-panel.eqjs-mobile *:focus, .eqjs-cb-panel.eqjs-mobile *:focus, .eqjs-grb-panel.eqjs-mobile *:focus {
+    border: none;
+}

package/dist/assets/css/easyquery.css

@@ -198,7 +198,7 @@ body {
 }
 
 .eqjs-qp-condelement {
-    margin: 5px 8px 0 0;
+    margin: 4px 8px 2px 0;
     padding: 1px;
     vertical-align: top;
     font-size: 14px;
@@ -316,7 +316,6 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    display: inline-block;
 }
 
 .eqjs-qp-valueelement input[type="text"]{

package/dist/assets/css/easyquery.ui.css

@@ -2434,7 +2434,7 @@ body {
 }
 
 .eqjs-qp-condelement {
-    margin: 5px 8px 0 0;
+    margin: 4px 8px 2px 0;
     padding: 1px;
     vertical-align: top;
     font-size: 14px;
@@ -2554,7 +2554,6 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    display: inline-block;
 }
 
 .eqjs-qp-valueelement input[type="text"]{
@@ -3980,10 +3979,9 @@ input.eqjs-invalid {
 }
 
 .eqjs-mobile .eqjs-qp-valueelement input[type="text"] {
-    top: auto;
-    bottom: auto;
+    top: 0;
+    bottom: 0;
     width: 100%;
-    height: 1.2rem;
     left: 0;
 }
 
@@ -4035,7 +4033,12 @@ input.eqjs-invalid {
     height: 22px;
 }
 
-/* QueryPanel end */
+/* ColumnsPanel end */
+
+.eqjs-qp-panel.eqjs-mobile *:focus, .eqjs-qc-panel.eqjs-mobile *:focus, .eqjs-ep-panel.eqjs-mobile *:focus, .eqjs-cb-panel.eqjs-mobile *:focus, .eqjs-grb-panel.eqjs-mobile *:focus {
+    border: none;
+}
+
 /* EasyChart START */
 
 .eqjs-chart-header {
@@ -4631,6 +4634,7 @@ input.eqjs-invalid {
 
 :root {
     --column-panel-expr-block-size: 220px;
+    --column-panel-attr-size: 100px;
     --column-panel-caption-size: 100px;
     --tool-button-width: 22px;
     --tool-button-height: 22px;
@@ -4794,7 +4798,7 @@ input.eqjs-invalid {
 
 .eqjs-qc-expr-block {
     flex-basis: var(--column-panel-expr-block-size);
-    min-width: var(--column-panel-expr-block-size);
+    min-width: var(--column-panel-attr-size);
     white-space: nowrap;
     margin-left: 10px;
     flex-shrink: 1;
@@ -4813,7 +4817,7 @@ input.eqjs-invalid {
     border-bottom: none;
 }
 
-.eqjs-qc-captionelement {
+.eqjs-qc-captionelement, .eqjs-qp-valueelement {
     margin-left: 10px;
     flex-shrink: 1;
     flex-grow: 1;
@@ -4826,11 +4830,31 @@ input.eqjs-invalid {
     flex-wrap: nowrap;
 }
 
-.eqjs-qc-captionelement a, .eqjs-qc-captionelement span {
+.eqjs-qc-attrelement, .eqjs-qp-attrelement, .eqjs-qp-operelement {
+    margin-left: 0;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: var(--column-panel-attr-size);
+    flex-basis: var(--column-panel-expr-block-size);
+}
+
+.eqjs-qc-captionelement a,
+.eqjs-qc-captionelement span,
+.eqjs-qc-attrelement a,
+.eqjs-qp-attrelement a,
+.eqjs-qp-valueelement a,
+.eqjs-qp-operelement a
+{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-flex;
+    display: block;
     align-items: center;
     border: 1px solid transparent;
     padding: 0 2px;
@@ -4912,10 +4936,6 @@ input.eqjs-invalid {
     max-height: 250px;
 }
 
-.eqjs-button {
-    /*border: 1px solid red;*/
-}
-
 .eqjs-qc-colelement {
     margin: 0;
 }
@@ -4932,6 +4952,31 @@ input.eqjs-invalid {
     top: -1px;
 }
 
+.eqjs-qp-row {
+    padding-right: 66px;
+    flex-wrap: nowrap;
+    /*min-width: 360px;*/
+}
+
+.eqjs-qp-attrelement {
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+}
+
+.eqjs-qp-valueelement {
+    min-width: 50px!important;
+    margin-left: 0;
+}
+
+.eqjs-qp-operelement {
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+}
+
+.eqjs-qp-disabled span, .eqjs-qc-disabled span {
+    margin-bottom: 0;
+}
+
 /* Debug styles */
 
 /*.eqjs-qc-row {*/

package/dist/assets/css/upgrade.css

@@ -1,5 +1,6 @@
 :root {
     --column-panel-expr-block-size: 220px;
+    --column-panel-attr-size: 100px;
     --column-panel-caption-size: 100px;
     --tool-button-width: 22px;
     --tool-button-height: 22px;
@@ -163,7 +164,7 @@
 
 .eqjs-qc-expr-block {
     flex-basis: var(--column-panel-expr-block-size);
-    min-width: var(--column-panel-expr-block-size);
+    min-width: var(--column-panel-attr-size);
     white-space: nowrap;
     margin-left: 10px;
     flex-shrink: 1;
@@ -182,7 +183,7 @@
     border-bottom: none;
 }
 
-.eqjs-qc-captionelement {
+.eqjs-qc-captionelement, .eqjs-qp-valueelement {
     margin-left: 10px;
     flex-shrink: 1;
     flex-grow: 1;
@@ -195,11 +196,31 @@
     flex-wrap: nowrap;
 }
 
-.eqjs-qc-captionelement a, .eqjs-qc-captionelement span {
+.eqjs-qc-attrelement, .eqjs-qp-attrelement, .eqjs-qp-operelement {
+    margin-left: 0;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: var(--column-panel-attr-size);
+    flex-basis: var(--column-panel-expr-block-size);
+}
+
+.eqjs-qc-captionelement a,
+.eqjs-qc-captionelement span,
+.eqjs-qc-attrelement a,
+.eqjs-qp-attrelement a,
+.eqjs-qp-valueelement a,
+.eqjs-qp-operelement a
+{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-flex;
+    display: block;
     align-items: center;
     border: 1px solid transparent;
     padding: 0 2px;
@@ -281,10 +302,6 @@
     max-height: 250px;
 }
 
-.eqjs-button {
-    /*border: 1px solid red;*/
-}
-
 .eqjs-qc-colelement {
     margin: 0;
 }
@@ -301,6 +318,29 @@
     top: -1px;
 }
 
+.eqjs-qp-row {
+    padding-right: 66px;
+    flex-wrap: nowrap;
+    /*min-width: 360px;*/
+}
+
+.eqjs-qp-attrelement {
+    max-width: fit-content;
+}
+
+.eqjs-qp-valueelement {
+    min-width: 50px!important;
+    margin-left: 0;
+}
+
+.eqjs-qp-operelement {
+    max-width: fit-content;
+}
+
+.eqjs-qp-disabled span, .eqjs-qc-disabled span {
+    margin-bottom: 0;
+}
+
 /* Debug styles */
 
 /*.eqjs-qc-row {*/

package/dist/easyquery.ui.cjs.js

@@ -7714,7 +7714,7 @@ class QueryPanel extends core.Widget {
                             }
                         }
                     };
-                    let autoEdit = this.options.autoEditNewCondition;
+                    let autoEdit = this.options.autoEditNewCondition && !ui.browserUtils.isMobileMode();
                     if (Array.isArray(conds)) {
                         conds.forEach((cond) => modifyCondition(cond, autoEdit));
                         autoEdit = false;
@@ -7734,10 +7734,10 @@ class QueryPanel extends core.Widget {
                             if (parentEl) {
                                 const newCondContainer = parentEl.lastChild;
                                 if (newCondContainer) {
-                                    const el = renderer.render(this.options.autoEditNewCondition);
+                                    const el = renderer.render(this.options.autoEditNewCondition && !ui.browserUtils.isMobileMode());
                                     newCondContainer.appendChild(el);
                                     el.scrollIntoView(false);
-                                    if (isFocusInside && !this.options.autoEditNewCondition) {
+                                    if (isFocusInside && (!this.options.autoEditNewCondition || ui.browserUtils.isMobileMode())) {
                                         el.querySelector(`a`).focus();
                                     }
                                 }

package/dist/easyquery.ui.esm.js

@@ -7712,7 +7712,7 @@ class QueryPanel extends Widget {
                             }
                         }
                     };
-                    let autoEdit = this.options.autoEditNewCondition;
+                    let autoEdit = this.options.autoEditNewCondition && !browserUtils.isMobileMode();
                     if (Array.isArray(conds)) {
                         conds.forEach((cond) => modifyCondition(cond, autoEdit));
                         autoEdit = false;
@@ -7732,10 +7732,10 @@ class QueryPanel extends Widget {
                             if (parentEl) {
                                 const newCondContainer = parentEl.lastChild;
                                 if (newCondContainer) {
-                                    const el = renderer.render(this.options.autoEditNewCondition);
+                                    const el = renderer.render(this.options.autoEditNewCondition && !browserUtils.isMobileMode());
                                     newCondContainer.appendChild(el);
                                     el.scrollIntoView(false);
-                                    if (isFocusInside && !this.options.autoEditNewCondition) {
+                                    if (isFocusInside && (!this.options.autoEditNewCondition || browserUtils.isMobileMode())) {
                                         el.querySelector(`a`).focus();
                                     }
                                 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.0-rc02",
+    "version": "7.3.0",
     "description": "EasyQuery.JS Community UI widgets",
     "types": "./dist/types/public_api.d.ts",
     "main": "./dist/easyquery.ui.cjs.js",
@@ -30,7 +30,7 @@
     "bugs": "https://korzh.com/support",
     "license": "LGPL-3.0",
     "peerDependencies": {
-        "@easyquery/core": "^7.3.0-rc02"
+        "@easyquery/core": "^7.3.0"
     },
     "files": [
         "dist",