fix: colors and more, add igrnore change to savebutton #181 #180

devenv.nix

@@ -68,7 +68,7 @@ in {
   };
 
 
-  difftastic.enable = true;
+  difftastic.enable = false;
 
   enterShell = ''
     ## check if node_modules exists

playground/issues/143.html

@@ -11,6 +11,7 @@
         monster-button-bar {
 
         }
+
         monster-button-bar button {
             padding: 0;
             margin-right: -2px;
@@ -31,13 +32,18 @@
     <h1>Issues #143</h1>
 
     <ul>
-        <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/143" target="_blank">#143</a></li>
+        <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/143" target="_blank">#143</a>
+        </li>
         <li><a href="../../">Back to overview</a></li>
     </ul>
 
+<monster-toggle-switch></monster-toggle-switch>
+
+
 
     <div style="margin: 10px;">
-        <monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json" data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
+        <monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json"
+                                 data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
         <monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
             <monster-collapse id="my-collapse" data-monster-role="filter-collapse">
                 <div class="flex">
@@ -46,7 +52,8 @@
                                   data-monster-option-classes-navigation="monster-theme-background-inherit"
                                   data-monster-option-classes-button="monster-theme-background-inherit" id="filtertabs">
                         <div data-monster-button-label="Filter" data-monster-state="active" class="active">
-                            <monster-datatable-filter id="listfilter1" slot="filter" data-monster-option-storedconfig-selector="#filtertabs">
+                            <monster-datatable-filter id="listfilter1" slot="filter"
+                                                      data-monster-option-storedconfig-selector="#filtertabs">
                                 <label data-monster-label="OID1" id="oid1"
                                        data-monster-template="${value | call:range:oid}">
                                     RANGE OID
@@ -62,17 +69,22 @@
                                         <div>sdfsd</div>
                                     </monster-filter-select>
                                 </label>
-                                <label data-monster-label="OID3" data-monster-template="${value | call:range:oid}" id="qq">OID
+                                <label data-monster-label="OID3" data-monster-template="${value | call:range:oid}"
+                                       id="qq">OID
                                     2
                                     <monster-filter-input name="value3" type="search"></monster-filter-input>
                                 </label>
-                                <label data-monster-label="customerUID" data-monster-template="${value | call:range:customerUID}" id="customerUID">customerUID
+                                <label data-monster-label="customerUID"
+                                       data-monster-template="${value | call:range:customerUID}" id="customerUID">customerUID
                                     3<input name="value4" type="search"></label>
-                                <label data-monster-label="OID5" data-monster-template="${value | call:range:oid}" id="gd">OID
+                                <label data-monster-label="OID5" data-monster-template="${value | call:range:oid}"
+                                       id="gd">OID
                                     4<input name="value5" type="search"></label>
-                                <label data-monster-label="OID6" data-monster-template="${value | call:range:oid}" id="dq">OID
+                                <label data-monster-label="OID6" data-monster-template="${value | call:range:oid}"
+                                       id="dq">OID
                                     5<input name="value6" type="search"></label>
-                                <label data-monster-label="OID7" data-monster-template="${value | call:range:oid}" id="xc">OID
+                                <label data-monster-label="OID7" data-monster-template="${value | call:range:oid}"
+                                       id="xc">OID
                                     6<input name="value7" type="search"></label>
 
                             </monster-datatable-filter>
@@ -112,7 +124,8 @@
                         <li>asdfjasdkfjk</li>
                     </ul>
                 </div>
-                <div data-monster-mode="fixed" data-monster-align="end" data-monster-head="i18n:key1" data-monster-grid-template="1fr"><input
+                <div data-monster-mode="fixed" data-monster-align="end" data-monster-head="i18n:key1"
+                     data-monster-grid-template="1fr"><input
                         type="checkbox"></div>
                 <div data-monster-head="i18n:key2"
                      data-monster-replace="path:t12-row.erpCreation | date"></div>

source/components/datatable/dataset.mjs

@@ -35,8 +35,6 @@ export { DataSet };
  *
  * <img src="./images/dataset.png">
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
  * You can create this control either by specifying the HTML tag <monster-dataset />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-dataset');` method.
  *
@@ -233,7 +231,6 @@ class DataSet extends CustomElement {
 	}
 
 	/**
-	 *
 	 * @return [CSSStyleSheet]
 	 */
 	static getCSSStyleSheet() {

source/components/datatable/datatable.mjs

@@ -190,9 +190,9 @@ class DataTable extends CustomElement {
                 },
 
                 classes : {
-                    control: "monster-theme-table-container-1",
-                    container: "monster-theme-table-container-1",
-                    row: "monster-theme-table-row-1",
+                    control: "monster-theme-control-container-1",
+                    container: "monster-theme-control-container-1",
+                    row: "monster-theme-control-row-1",
                 },
 
                 features: {

source/components/datatable/save-button.mjs

@@ -5,6 +5,8 @@
 
 import {instanceSymbol, internalSymbol} from "../../constants.mjs";
 import {diff} from "../../data/diff.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 import {
     assembleMethodSymbol,
     CustomElement,
@@ -61,9 +63,14 @@ class SaveButton extends CustomElement {
      * @property {string} templates.main Main template
      * @property {object} datasource The datasource
      * @property {string} datasource.selector The selector of the datasource
+     * @property {string} labels.button The button label
+     * @property {Object} classes The classes
+     * @property {string} classes.bar The bar class
+     * @property {string} classes.badge The badge class
      * @property {object} mapping The mapping
      * @property {string} mapping.data The data
      * @property {number} mapping.index The index
+     * @property {Array} ignoreChanges The ignore changes (regex)
      * @property {Array} data The data
      * @return {Object}
      */
@@ -93,6 +100,8 @@ class SaveButton extends CustomElement {
                 index: 0,
             },
 
+            ignoreChanges: [],
+
             data: {},
 
             disabled: false,
@@ -160,8 +169,29 @@ class SaveButton extends CustomElement {
                     }
 
                     const currentValues = this.getRealSubject();
+                    const ignoreChanges = self.getOption("ignoreChanges");
 
                     const result = diff(originValues, currentValues);
+                    if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
+                        const itemsToRemove = [];
+                        for (const item of result) {
+                            for (const ignorePattern of ignoreChanges) {
+                                const p = new RegExp(ignorePattern);
+                                if (p.test(item.path)) {
+                                    itemsToRemove.push(item);
+                                    break; 
+                                }
+                            }
+                        }
+
+                        for (const itemToRemove of itemsToRemove) {
+                            const index = result.indexOf(itemToRemove);
+                            if (index > -1) {
+                                result.splice(index, 1);
+                            }
+                        }
+                    }
+
                     if (isArray(result) && result.length > 0) {
                         self[stateButtonElementSymbol].setState("changed");
                         self[stateButtonElementSymbol].setOption("disabled", false);
@@ -265,7 +295,7 @@ function initEventHandler() {
                     );
                 })
                 .catch((error) => {
-					console.error(error);
+                    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
                 });
         });
     }, 1);

source/components/datatable/status.mjs

@@ -221,7 +221,7 @@ function getTemplate() {
     	     data-monster-attributes="disabled path:disabled | if:true">
             <monster-context-error
                     data-monster-option-classes-button="monster-theme-error-2 monster-theme-background-inherit"></monster-context-error>
-            <div class="monster-theme-table-elements"
+            <div class="monster-theme-control-element"
                  data-monster-attributes="data-monster-state-loader path:state.spinner"></div>
         </div>
     `;

source/components/datatable/style/datatable.pcss

@@ -69,7 +69,7 @@
         align-items: center;
         justify-content: flex-start;
         line-height: 1.2;
-        border-bottom: 1px dashed var(--monster-table-border-color);
+        border-bottom: 1px dashed var(--monster-theme-control-border-color);
         box-sizing: border-box;
 
         min-width: 0;
@@ -99,8 +99,8 @@
     @for $i from 0 to 500 {
         &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)
     ] {
-        color: var(--monster-table-hover-color);
-        background-color: var(--monster-table-hover-bg-color);
+        color: var(--monster-theme-control-hover-color);
+        background-color: var(--monster-theme-control-hover-bg-color);
         box-sizing: border-box;
     }
     }

source/components/datatable/style/embedded-pagination.pcss

@@ -33,8 +33,8 @@
 
         & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
             width: max-content;
-            color: var(--monster-table-color);
-            background-color: var(--monster-table-bg-color);
+            color: var(--monster-theme-control-color);
+            background-color: var(--monster-theme-control-bg-color);
             text-decoration: none;
             outline: none;
             padding: 0 0.4rem;

source/components/datatable/style/filter.pcss

@@ -52,7 +52,7 @@
 
 
                 flex-direction: column;
-                border-bottom: var(--monster-border-width) solid var(--monster-table-border-color);
+                border-bottom: var(--monster-border-width) solid var(--monster-theme-control-border-color);
                 padding: 2px;
                 align-items: stretch;
 

source/components/datatable/style/pagination.pcss

@@ -33,9 +33,9 @@
 
     & ul li a {
         @mixin button;
-        background-color: var(--monster-table-bg-color);
-        color: var(--monster-table-color);
-        border-color: var(--monster-table-bg-color);
+        background-color: var(--monster-theme-control-bg-color);
+        color: var(--monster-theme-control-color);
+        border-color: var(--monster-theme-control-bg-color);
         width: max-content;
 
         &.current {