From 8de8a27bef3d97602a88d7b0d3745bca6604080a Mon Sep 17 00:00:00 2001
From: Deepak Dixit <deepak.dixit@hotwax.co>
Date: Thu, 9 May 2024 18:23:05 +0530
Subject: [PATCH] Conflict (#13)

* Add sessionId field to list screen for debugging

* Changed header color to make it more obviously not production

* Added Page Size to Log Viewer

* In WebrootVue.qvt.css, updated rule for drawer background to only come into effect in non-mobile layouts.

* In DefaultScreenMacros for vuet and qvt add paginate support to section-include when included section is a section-iterate with paginate=true; in qvt js don't show pagination widget if there is only one result

* In WebrootVue.qvt.js add qLayoutMinHeight method to calculate a full height, useful for certain types of screens with particular or bottom instead of top focused layouts

* In qvt macros for form-list fix issue with first/second/last row and hidden parameters

* In qvt screen macros first pass on working support for first, second, and last row forms

* In vuet and qvt widgetTextValue macro handle case with drop-down that has dynamic-options plus list-options for pre-loaded values

* Update vue to 2.7.14, quasar to 1.22.10; all seems to work well in partial tests of existing screens, minor version updates are hopefully backward compatible but worth keeping an eye out for issues

* In qvt default screen macros add support for text-area.@autogrow attribute

* Small updates to webroot build.gradle: update gradle-versions and gradle-minify plugins

* Currency (#217)

* Add currency-hide-symbol attribute as a comlement to currency-unit-field, displaying the value without the currency symbol

* Update AUTHORS file

* Update ElFinder client to 2.1.62 and jqueryui to 1.13.2, there is a security notice for ElFinder for versions 2.1.61 and earlier, but it appears to only for the server-side PHP code which is not used in moqui; also updated jquery to 3.7.1 while at it

* Fix submit on select drop down where there is one result (#219)

* Fix submit on select drop down where there is one result

* Changes required for new Moqui SSO component (#222)

* In Login.ftl, added SSO tab and forms. This will only appear if SSO is configured.

* In webroot-layout.css, increased the width of the forms from 340 to 380 so SSO tab doesn't overflow to new line.

* In Qapps mode, add a expansion button to the ContainerBox (#216)

* In Qapps mode, add a expansion button to the ContainerBox

* sign the AUTHORS file

* Enable accordion in form field-groups using qvt rendering (#221)

* In qvt render mode fix m-form-column-config find parameter handling so they are passed through

* In qvt render mode FTL macros add empty column for first/second/last rows if row selection is used in a form-list; in popup card for row selection add spacing around m-container-dialog to match spacing used by default for a form-single with field-row-big so that dialog and direct form submit buttons line up

* For moqui-framework issue #623 add v-pre to vue template generated for label and link elements so that contents are not interpreted to avoid template injection from user-entered data

* In qvt and vuet screen macros add span v-pre around one more place in link macros, in qvt add span v-pre around all q-tooltip text

* More vue template injection, add to button text in linkFormForm for vuet, qvt

* In qvt render mode change button-menu macro to not render a q-item if the child node has a condition attribute and that attribute evaluates to false

* Form field change detection and in-field visual indicators, submit button visual indicator (#225)

* For qvt mode add m-form field change tracking support, some initial use in text-area, much more needed before done

* In WebrootVue.qvt.js m-text-line pass through dense, outlined, and bg-color

* In qvt default screen macros add submit button highlighting (disable outlined mode), add placeholders for other field types that still need to be finished and tested

* More progress on form field change indicators: add support to m-form-link for find forms and such, add field change visual effects for drop-down, checkbox, radio, text-find; still more to do but now mostly for find forms which work but don't have visual indicators for all field types

* In qvt render mode improve form field change detection to handle nulls and empty strings and arrays, also add support for date-find field type

* In qvt render mode form change detection show visual indicator for remaining field types, improve empty/null compare; change detect and show visual indicator now initially complete

* Fix Vue template injection issue in vuet and qvt render modes for form-list find options parameter values, thanks to Taher for reporting this on the forum

* In qvt render mode add support for shift-click to row-selection checkboxes like in gmail to select a range of items, a bit of user tedium reduction

* Increase size of checkboxes

* Allow include of screen theme resource script footer

* Fix issue with changed field highlighting color in quasar dark mode

---------

Co-authored-by: Acetousk <acetousk@gmail.com>
Co-authored-by: David E. Jones <dej@dejc.com>
Co-authored-by: pandor4u <103976470+pandor4u@users.noreply.github.com>
Co-authored-by: aabiabdallah <aabiabdallah@gmail.com>
Co-authored-by: Jens Hardings <jhp@moit.cl>
Co-authored-by: acetousk <acetousk@users.noreply.github.com>
Co-authored-by: newmann <huxinsheng88@hotmail.com>
---
 .../webroot/screen/includes/Footer.html.ftl   |  4 ++
 .../screen/webroot/js/WebrootVue.qvt.js       | 29 +++++++++----
 .../screen-macro/DefaultScreenMacros.qvt.ftl  | 41 +++++++++----------
 .../screen-macro/DefaultScreenMacros.vuet.ftl |  2 +-
 4 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/base-component/webroot/screen/includes/Footer.html.ftl b/base-component/webroot/screen/includes/Footer.html.ftl
index ff7c8597e..77e253b58 100644
--- a/base-component/webroot/screen/includes/Footer.html.ftl
+++ b/base-component/webroot/screen/includes/Footer.html.ftl
@@ -5,6 +5,10 @@ ${sri.getAfterScreenWriterText()}
     <#assign srcUrl = sri.buildUrl(scriptLocation).url>
     <script src="${srcUrl}<#if !scriptLocation?starts_with("http") && !srcUrl?contains("?")>?v=${ec.web.getResourceDistinctValue()}</#if>" type="text/javascript"></script>
 </#list>
+<#list sri.getThemeValues("STRT_SCRIPT_FOOTER") as scriptLocation>
+    <#assign srcUrl = sri.buildUrl(scriptLocation).url>
+    <script src="${srcUrl}<#if !scriptLocation?starts_with("http") && !srcUrl?contains("?")>?v=${ec.web.getResourceDistinctValue()}</#if>" type="text/javascript"></script>
+</#list>
 <#assign scriptText = sri.getScriptWriterText()>
 <#if scriptText?has_content>
     <script>
diff --git a/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js b/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js
index 36fdfda44..52521830a 100644
--- a/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js
+++ b/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js
@@ -594,7 +594,7 @@ moqui.checkboxSetMixin = {
     data: function() {
         var checkboxStates = [];
         for (var i = 0; i < this.checkboxCount; i++) checkboxStates[i] = false;
-        return { checkboxAllState:false, checkboxStates:checkboxStates }
+        return { checkboxAllState:false, checkboxLastIndex:null, checkboxLastChange:null, checkboxStates:checkboxStates }
     },
     methods: {
         setCheckboxAllState: function(newState) {
@@ -602,6 +602,19 @@ moqui.checkboxSetMixin = {
             var csSize = this.checkboxStates.length;
             for (var i = 0; i < csSize; i++) this.checkboxStates[i] = newState;
         },
+        clickCheckbox: function(event, index) {
+            console.warn("clickCheckbox idx " + index + " shift " + event.shiftKey + " lastIdx " + this.checkboxLastIndex + " lastChange " + this.checkboxLastChange);
+            if (event.shiftKey && (null != this.checkboxLastIndex) && (this.checkboxLastIndex !== index)) {
+                var dir = index > this.checkboxLastIndex ? 1 : -1;
+                var change = this.checkboxLastChange;
+                for (var i = this.checkboxLastIndex; i !== index; i += dir) {
+                    this.checkboxStates[i] = change;
+                }
+            }
+            this.checkboxLastIndex = index;
+            // onclick is triggered before the default change hence the !
+            this.checkboxLastChange = !this.checkboxStates[index].checked;
+        },
         getCheckboxValueArray: function() {
             if (!this.checkboxValues) return [];
             var valueArray = [];
@@ -641,7 +654,7 @@ Vue.component('m-checkbox-set', {
     name: "mCheckboxSet",
     mixins:[moqui.checkboxSetMixin],
     template: '<span class="checkbox-set"><slot :checkboxAllState="checkboxAllState" :setCheckboxAllState="setCheckboxAllState"' +
-        ' :checkboxStates="checkboxStates" :addCheckboxParameters="addCheckboxParameters"></slot></span>'
+        ' :checkboxStates="checkboxStates" :clickCheckbox="clickCheckbox" :addCheckboxParameters="addCheckboxParameters"></slot></span>'
 });
 
 Vue.component('m-form', {
@@ -657,7 +670,7 @@ Vue.component('m-form', {
     template:
         '<q-form ref="qForm" @submit.prevent="submitForm" @reset.prevent="resetForm" autocapitalize="off" autocomplete="off">' +
             '<slot :fields="fields" :checkboxAllState="checkboxAllState" :setCheckboxAllState="setCheckboxAllState"' +
-                ' :checkboxStates="checkboxStates" :addCheckboxParameters="addCheckboxParameters"' +
+                ' :checkboxStates="checkboxStates" :clickCheckbox="clickCheckbox" :addCheckboxParameters="addCheckboxParameters"' +
                 ' :blurSubmitForm="blurSubmitForm" :hasFieldsChanged="hasFieldsChanged" :fieldChanged="fieldChanged"></slot>' +
         '</q-form>',
     methods: {
@@ -1341,10 +1354,10 @@ Vue.component('m-date-period', {
     template:
     '<div v-if="fromThruMode" class="row">' +
         '<m-date-time :name="name+\'_from\'" :id="id+\'_from\'" :label="label+\' From\'" :form="form" :type="fromThruType"' +
-            ' v-model="fields[name+\'_from\']" :bg-color="fieldChanged(name+\'_from\')?\'blue-1\':\'\'"></m-date-time>' +
+        ' v-model="fields[name+\'_from\']" :bg-color="fieldChanged(name+\'_from\')?($q.dark.isActive?\'blue-10\':\'blue-1\'):\'\'"></m-date-time>' +
         '<q-icon class="q-my-auto" name="remove"></q-icon>' +
         '<m-date-time :name="name+\'_thru\'" :id="id+\'_thru\'" :label="label+\' Thru\'" :form="form" :type="fromThruType"' +
-            ' v-model="fields[name+\'_thru\']" :bg-color="fieldChanged(name+\'_thru\')?\'blue-1\':\'\'">' +
+            ' v-model="fields[name+\'_thru\']" :bg-color="fieldChanged(name+\'_thru\')?($q.dark.isActive?\'blue-10\':\'blue-1\'):\'\'">' +
             '<template v-slot:after>' +
                 '<q-btn dense flat icon="calendar_view_day" @click="toggleMode"><q-tooltip>Period Select Mode</q-tooltip></q-btn>' +
                 '<q-btn dense flat icon="clear" @click="clearAll"><q-tooltip>Clear</q-tooltip></q-btn>' +
@@ -1353,14 +1366,14 @@ Vue.component('m-date-period', {
     '</div>' +
     '<div v-else class="row"><q-input dense outlined stack-label :label="label" v-model="fields[name+\'_pdate\']"' +
             ' mask="####-##-##" fill-mask :id="id" :name="name+\'_pdate\'" :form="form" style="max-width:max-content;"' +
-            ' :bg-color="fieldChanged(name+\'_pdate\')?\'blue-1\':\'\'">' +
+            ' :bg-color="fieldChanged(name+\'_pdate\')?($q.dark.isActive?\'blue-10\':\'blue-1\'):\'\'">' +
         '<q-tooltip v-if="tooltip">{{tooltip}}</q-tooltip>' +
         '<template v-slot:before>' +
             '<q-select class="q-pr-xs" dense outlined options-dense emit-value map-options v-model="fields[name+\'_poffset\']"' +
-                ' :name="name+\'_poffset\'" :bg-color="fieldChanged(name+\'_poffset\')?\'blue-1\':\'\'"' +
+                ' :name="name+\'_poffset\'" :bg-color="fieldChanged(name+\'_poffset\')?($q.dark.isActive?\'blue-10\':\'blue-1\'):\'\'"' +
                 ' stack-label label="Offset" :options="dateOffsets" :form="form" behavior="menu"></q-select>' +
             '<q-select dense outlined options-dense emit-value map-options v-model="fields[name+\'_period\']"' +
-                ' :name="name+\'_period\'" :bg-color="fieldChanged(name+\'_period\')?\'blue-1\':\'\'"' +
+                ' :name="name+\'_period\'" :bg-color="fieldChanged(name+\'_period\')?($q.dark.isActive?\'blue-10\':\'blue-1\'):\'\'"' +
                 ' stack-label label="Period" :options="datePeriods" :form="form" behavior="menu"></q-select>' +
         '</template>' +
         '<template v-slot:prepend>' +
diff --git a/template/screen-macro/DefaultScreenMacros.qvt.ftl b/template/screen-macro/DefaultScreenMacros.qvt.ftl
index 568417725..cd9fdda31 100644
--- a/template/screen-macro/DefaultScreenMacros.qvt.ftl
+++ b/template/screen-macro/DefaultScreenMacros.qvt.ftl
@@ -857,7 +857,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                     </#if>
                     <#if currentFindUrlParms?has_content>
                         <#if activeFormListFind?has_content><hr></#if>
-                        <p>${curFindSummary!""}</p>
+                        <p v-pre>${curFindSummary!""}</p>
 
                         <m-form class="form-inline" id="${formId}_NewFind" action="${formSaveFindUrl}" v-slot:default="formProps"
                                 :fields-initial="{formLocation:'${formListInfo.getSavedFindFullLocation()}',_findDescription:'',<#rt>
@@ -1060,7 +1060,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
 
         <#if isHeaderDialog>
         <tr><th colspan="${numColumns}" style="font-weight: normal">
-            ${curFindSummary!""}
+            <span v-pre>${curFindSummary!""}</span>
             <#if haveFilters>
                 <#assign hiddenParameterMap = sri.getFormHiddenParameters(formNode)>
                 <#assign hiddenParameterKeys = hiddenParameterMap.keySet()>
@@ -1140,7 +1140,6 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#assign isServerStatic = formInstance.isServerStatic(sri.getRenderMode())>
     <#assign formDisabled = formListUrlInfo.disableLink>
 
-
 <#if isServerStatic><#-- client rendered, server static -->
     <#assign hiddenParameterMap = sri.getFormHiddenParameters(formNode)>
     <#assign hiddenParameterKeys = hiddenParameterMap.keySet()>
@@ -1347,7 +1346,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
         <#if isRowSelection>
             <div class="td">
             <#if listEntry[checkboxIdField]?has_content>
-                <div class="q-my-auto"><q-checkbox size="xs" v-model="formProps.checkboxStates[${listEntry_index?c}]"></q-checkbox></div></#if>
+                <div class="q-my-auto"><input style="transform: scale(1.3);-ms-transform: scale(1.3);-webkit-transform: scale(1.3);" type="checkbox" v-model="formProps.checkboxStates[${listEntry_index?c}]" @click="formProps.clickCheckbox($event, ${listEntry_index?c})"></div></#if>
             </div>
         </#if>
         <#if !(isMulti || skipForm)>
@@ -1640,7 +1639,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
     <#if useWrapper>
     <q-field dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if>
         <#t><#if containerStyle?has_content> class="${containerStyle}"</#if><#if formDisabled!false> disable</#if>
-        <#t> :bg-color="formProps.fieldChanged('${curName}')?'blue-1':''">
+        <#t> :bg-color="formProps.fieldChanged('${curName}')?($q.dark.isActive?'blue-10':'blue-1'):''">
         <#if .node?parent["@tooltip"]?has_content><q-tooltip><span v-pre>${ec.getResource().expand(.node?parent["@tooltip"], "")}</span></q-tooltip></#if>
         <template v-slot:control>
     </#if>
@@ -1667,7 +1666,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
       <m-date-time id="<@fieldId .node/>_from" name="${curFieldName}_from" type="${.node["@type"]!""}" size="${.node["@size"]!""}"<#rt>
           <#t> label="${curFieldTitle} ${ec.getL10n().localize("From")}"
           <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}_from"<#else> value="${fieldValueFrom?html}"</#if>
-          <#t> :bg-color="formProps.fieldChanged('${curFieldName}_from')?'blue-1':''"
+          <#t> :bg-color="formProps.fieldChanged('${curFieldName}_from')?($q.dark.isActive?'blue-10':'blue-1'):''"
           <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
           <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if javaFormat?has_content> format="<@getMomentDateFormat javaFormat/>"</#if>></m-date-time>
     </span>
@@ -1675,7 +1674,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
       <m-date-time id="<@fieldId .node/>_thru" name="${curFieldName}_thru" type="${.node["@type"]!""}" size="${.node["@size"]!""}"<#rt>
           <#t> label="${curFieldTitle} ${ec.getL10n().localize("Thru")}"
           <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}_thru"<#else> value="${fieldValueThru?html}"</#if>
-          <#t> :bg-color="formProps.fieldChanged('${curFieldName}_thru')?'blue-1':''"
+          <#t> :bg-color="formProps.fieldChanged('${curFieldName}_thru')?($q.dark.isActive?'blue-10':'blue-1'):''"
           <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
           <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if javaFormat?has_content> format="<@getMomentDateFormat javaFormat/>"</#if>></m-date-time>
     </span>
@@ -1743,7 +1742,7 @@ a => A, d => D, y => Y
     <#assign validationClasses = formInstance.getFieldValidationClasses(dtSubFieldNode)>
     <m-date-time id="<@fieldId .node/>" name="${curName}" type="${.node["@type"]!""}" size="${.node["@size"]!""}" label="<@fieldTitle dtSubFieldNode/>"<#if formDisabled!> disable</#if><#rt>
         <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curName}"<#else> value="${sri.getFieldValueString(dtFieldNode, .node["@default-value"]!"", javaFormat)?html}"</#if>
-        <#t> :bg-color="formProps.fieldChanged('${curName}')?'blue-1':''"
+        <#t> :bg-color="formProps.fieldChanged('${curName}')?($q.dark.isActive?'blue-10':'blue-1'):''"
         <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
         <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if javaFormat?has_content> format="<@getMomentDateFormat javaFormat/>"</#if>
         <#t><#if validationClasses?contains("required")> required="required"</#if><#if .node.@rules?has_content> :rules="[${.node.@rules}]"</#if>
@@ -1896,7 +1895,7 @@ a => A, d => D, y => Y
             <#t><#if allowMultiple> :multiple="true"</#if><#if allowEmpty> :allow-empty="true"</#if><#if .node["@combo-box"]! == "true"> :combo="true"</#if>
             <#t><#if .node["@required-manual-select"]! == "true"> :required-manual-select="true"</#if>
             <#t><#if .node["@submit-on-select"]! == "true"> :submit-on-select="true"</#if>
-            <#t> :bg-color="formProps.fieldChanged('${name}')?'blue-1':''"
+            <#t> :bg-color="formProps.fieldChanged('${name}')?($q.dark.isActive?'blue-10':'blue-1'):''"
             <#t><#if .node?parent["@tooltip"]?has_content> tooltip="${ec.getResource().expand(.node?parent["@tooltip"], "")}"</#if>
             <#t><#if ownerForm?has_content> form="${ownerForm}"</#if><#if .node["@size"]?has_content> size="${.node["@size"]}"</#if>
             <#if isDynamicOptions> options-url="${doUrlInfo.url}" value-field="${doNode["@value-field"]!"value"}" label-field="${doNode["@label-field"]!"label"}"<#if doNode["@depends-optional"]! == "true"> :depends-optional="true"</#if>
@@ -1912,7 +1911,7 @@ a => A, d => D, y => Y
             <#-- support <#if .node["@current"]! == "first-in-list"> again? -->
             <#if ec.getResource().expandNoL10n(.node["@show-not"]!, "") == "true">
             <template v-slot:after>
-                <q-field dense outlined :bg-color="formProps.fieldChanged('${name}_not')?'blue-1':''">
+                <q-field dense outlined :bg-color="formProps.fieldChanged('${name}_not')?($q.dark.isActive?'blue-10':'blue-1'):''">
                     <#t><q-checkbox size="xs" name="${name}_not" label="${ec.getL10n().localize("Not")}"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
                     <#t><#if fieldsJsName?has_content> true-value="Y" false-value="N" v-model="${fieldsJsName}.${name}_not"<#else> value="Y"<#if ec.getWeb().parameters.get(name + "_not")! == "Y"> checked="checked"</#if></#if>></q-checkbox></q-field>
             </template>
@@ -1925,7 +1924,7 @@ a => A, d => D, y => Y
     <#assign fieldLabel><@fieldTitle .node?parent/></#assign>
     <#assign acceptText = ec.getResource().expand(.node.@accept, "")>
     <q-file dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}"</#if><#if formDisabled!> disable</#if>
-            <#-- TODO-FC <#t> :bg-color="formProps.fieldChanged('${name}')?'blue-1':''" -->
+            <#-- TODO-FC <#t> :bg-color="formProps.fieldChanged('${name}')?($q.dark.isActive?'blue-10':'blue-1'):''" -->
             <#t> name="<@fieldName .node/>" size="${.node.@size!"30"}"<#if .node.@multiple! == "true"> multiple</#if><#if .node.@accept?has_content> accept="${acceptText}"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
         <#if .node?parent["@tooltip"]?has_content><q-tooltip><span v-pre>${ec.getResource().expand(.node?parent["@tooltip"], "")}</span></q-tooltip></#if>
     </q-file>
@@ -1962,7 +1961,7 @@ a => A, d => D, y => Y
     <#assign curName><@fieldName .node/></#assign>
     <#assign fieldLabel><@fieldTitle .node?parent/></#assign>
     <q-field dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if><#if formDisabled!> disable</#if>
-        <#t> :bg-color="formProps.fieldChanged('${curName}')?'blue-1':''">
+        <#t> :bg-color="formProps.fieldChanged('${curName}')?($q.dark.isActive?'blue-10':'blue-1'):''">
         <#if .node?parent["@tooltip"]?has_content><q-tooltip><span v-pre>${ec.getResource().expand(.node?parent["@tooltip"], "")}</span></q-tooltip></#if>
         <template v-slot:control>
         <#list (options.keySet())! as key>
@@ -1981,13 +1980,13 @@ a => A, d => D, y => Y
 <div class="row">
     <q-input dense outlined stack-label label="${fieldLabel} ${ec.getL10n().localize('From')}" name="${curFieldName}_from" id="${tlId}_from"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
             <#t> size="${.node.@size!"10"}"<#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
-            <#t> :bg-color="formProps.fieldChanged('${curFieldName}_from')?'blue-1':''"
+            <#t> :bg-color="formProps.fieldChanged('${curFieldName}_from')?($q.dark.isActive?'blue-10':'blue-1'):''"
             <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}_from"<#else> value="${ec.getContext().get(curFieldName + "_from")!?default(.node["@default-value-from"]!"")?html}"</#if>>
         <#if curTooltip?has_content><q-tooltip><span v-pre>${curTooltip}</span></q-tooltip></#if>
     </q-input>
     <q-input class="q-pl-xs" dense outlined stack-label label="${fieldLabel} ${ec.getL10n().localize('Thru')}" name="${curFieldName}_thru" id="${tlId}_thru"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
             <#t> size="${.node.@size!"10"}"<#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
-            <#t> :bg-color="formProps.fieldChanged('${curFieldName}_thru')?'blue-1':''"
+            <#t> :bg-color="formProps.fieldChanged('${curFieldName}_thru')?($q.dark.isActive?'blue-10':'blue-1'):''"
             <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}_thru"<#else> value="${ec.getContext().get(curFieldName + "_thru")!?default(.node["@default-value-thru"]!"")?html}"</#if>>
         <#if curTooltip?has_content><q-tooltip><span v-pre>${curTooltip}</span></q-tooltip></#if>
     </q-input>
@@ -2037,7 +2036,7 @@ a => A, d => D, y => Y
                 <#t> rows="${.node["@rows"]!"3"}"<#if .node["@read-only"]! == "true"> readonly="readonly"</#if>
                 <#t><#if .node["@autogrow"]! == "true"> autogrow</#if>
                 <#-- TODO add config, etc: <#t> @blur="formProps.blurSubmitForm($event)" -->
-                <#t> :bg-color="formProps.fieldChanged('${name}')?'blue-1':''"
+                <#t> :bg-color="formProps.fieldChanged('${name}')?($q.dark.isActive?'blue-10':'blue-1'):''"
                 <#t><#if .node["@maxlength"]?has_content> maxlength="${.node["@maxlength"]}"</#if><#if ownerForm?has_content> form="${ownerForm}"</#if>>
             <#if .node?parent["@tooltip"]?has_content><q-tooltip><span v-pre>${ec.getResource().expand(.node?parent["@tooltip"], "")}</span></q-tooltip></#if>
             <#if !fieldsJsName?has_content>${sri.getFieldValueString(.node)?html}</#if>
@@ -2096,7 +2095,7 @@ a => A, d => D, y => Y
                 <#t> <#if fieldsJsName?has_content>v-model="${fieldsJsName}.${name}" :fields="${fieldsJsName}"<#else><#if fieldValue?html == fieldValue>value="${fieldValue}"<#else>:value="'${Static["org.moqui.util.WebUtilities"].encodeHtmlJsSafe(fieldValue)}'"</#if></#if>
                 <#t><#if .node.@size?has_content> size="${.node.@size}"<#else> style="width:100%;"</#if><#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if>
                 <#t><#if formDisabled! || ec.getResource().condition(.node.@disabled!"false", "")> disable</#if>
-                <#t> :bg-color="formProps.fieldChanged('${name}')?'blue-1':''"
+                <#t> :bg-color="formProps.fieldChanged('${name}')?($q.dark.isActive?'blue-10':'blue-1'):''"
                 <#t> class="<#if validationClasses?has_content>${validationClasses}</#if><#if tlAlign == "center"> text-center<#elseif tlAlign == "right"> text-right</#if>"
                 <#t><#if validationClasses?contains("required")> required</#if><#if regexpInfo?has_content> pattern="${regexpInfo.regexp}" data-msg-pattern="${regexpInfo.message!"Invalid format"}"</#if>
                 <#t><#if expandedMask?has_content> mask="${expandedMask}" fill-mask="_"<#if validationClasses?contains("number")> :reverse-fill-mask="true"</#if></#if>
@@ -2119,7 +2118,7 @@ a => A, d => D, y => Y
     <#assign hideOptions = .node["@hide-options"]!"false">
     <q-input dense outlined<#if fieldLabel?has_content> stack-label label="${fieldLabel}"</#if> name="${curFieldName}"<#rt>
             <#t> size="${.node.@size!"30"}"<#if .node.@maxlength?has_content> maxlength="${.node.@maxlength}"</#if> id="<@fieldId .node/>"
-            <#t> :bg-color="formProps.fieldChanged('${curFieldName}')?'blue-1':''"
+            <#t> :bg-color="formProps.fieldChanged('${curFieldName}')?($q.dark.isActive?'blue-10':'blue-1'):''"
             <#t><#if ownerForm?has_content> form="${ownerForm}"</#if>
             <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}"<#else> value="${sri.getFieldValueString(.node)?html}"</#if>>
         <#if .node["@tooltip"]?has_content><q-tooltip><span v-pre>${ec.getResource().expand(.node["@tooltip"], "")}</q-tooltip></#if>
@@ -2127,21 +2126,21 @@ a => A, d => D, y => Y
         <template v-slot:after>
             <#if hideOptions != "operator">
                 <#assign defaultOperator = .node["@default-operator"]!"contains">
-                <q-field dense outlined :bg-color="formProps.fieldChanged('${curFieldName}_not')?'blue-1':''">
+                <q-field dense outlined :bg-color="formProps.fieldChanged('${curFieldName}_not')?($q.dark.isActive?'blue-10':'blue-1'):''">
                     <q-checkbox class="on-left" size="xs" name="${curFieldName}_not" label="${ec.getL10n().localize("Not")}"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
                     <#t><#if fieldsJsName?has_content> true-value="Y" false-value="N" v-model="${fieldsJsName}.${curFieldName}_not"<#else>
                     <#t> value="Y"<#if ec.getWeb().parameters.get(curFieldName + "_not")! == "Y"> checked="checked"</#if></#if>></q-checkbox>
                 </q-field>
                 <q-select class="on-left" dense outlined options-dense emit-value map-options name="${curFieldName}_op"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
-                    <#t> :bg-color="formProps.fieldChanged('${curFieldName}_op')?'blue-1':''"
+                    <#t> :bg-color="formProps.fieldChanged('${curFieldName}_op')?($q.dark.isActive?'blue-10':'blue-1'):''"
                     <#t><#if fieldsJsName?has_content> v-model="${fieldsJsName}.${curFieldName}_op"<#else> value="${ec.web.parameters.get(curFieldName + "_op")!defaultOperator!""}"</#if>
                     <#t> :options="[{value:'equals',label:'${ec.getL10n().localize("Equals")}'},{value:'like',label:'${ec.getL10n().localize("Like")}'},{value:'contains',label:'${ec.getL10n().localize("Contains")}'},{value:'begins',label:'${ec.getL10n().localize("Begins With")}'},{value:'empty',label:'${ec.getL10n().localize("Empty")}'}]"></q-select>
             </#if>
             <#if hideOptions != "ignore-case">
                 <#assign ignoreCase = (ec.getWeb().parameters.get(curFieldName + "_ic")! == "Y") || !(.node["@ignore-case"]?has_content) || (.node["@ignore-case"] == "true")>
-                <q-field dense outlined :bg-color="formProps.fieldChanged('${curFieldName}_ic')?'blue-1':''">
+                <q-field dense outlined :bg-color="formProps.fieldChanged('${curFieldName}_ic')?($q.dark.isActive?'blue-10':'blue-1'):''">
                     <q-checkbox size="xs" name="${curFieldName}_ic" label="${ec.getL10n().localize("Ignore Case")}"<#if ownerForm?has_content> form="${ownerForm}"</#if><#rt>
-                    <#t> :label-color="formProps.fieldChanged('${curFieldName}_ic')?'blue-1':''"
+                    <#t> :label-color="formProps.fieldChanged('${curFieldName}_ic')?($q.dark.isActive?'blue-10':'blue-1'):''"
                     <#t><#if fieldsJsName?has_content> true-value="Y" false-value="N" v-model="${fieldsJsName}.${curFieldName}_ic"<#else> value="Y"<#if ignoreCase> checked="checked"</#if></#if>></q-checkbox>
                 </q-field>
             </#if>
diff --git a/template/screen-macro/DefaultScreenMacros.vuet.ftl b/template/screen-macro/DefaultScreenMacros.vuet.ftl
index 9123abc5d..c8eae0da5 100644
--- a/template/screen-macro/DefaultScreenMacros.vuet.ftl
+++ b/template/screen-macro/DefaultScreenMacros.vuet.ftl
@@ -1056,7 +1056,7 @@ ${sri.renderIncludeScreen(.node["@location"], .node["@share-scope"]!)}
                     <#list headerFieldNode?children as widgetNode><#if widgetNode?node_name != "set">
                         <#assign fieldValue><@widgetTextValue widgetNode/></#assign>
                         <#if fieldValue?has_content>
-                            <span style="white-space:nowrap;"><strong><@fieldTitle headerFieldNode/>:</strong> <span class="text-success">${fieldValue}</span></span>
+                            <span style="white-space:nowrap;" v-pre><strong><@fieldTitle headerFieldNode/>:</strong> <span class="text-success">${fieldValue}</span></span>
                             <#assign haveFilters = true>
                         </#if>
                     </#if></#list>