@schukai/monster 4.25.0 → 4.25.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.25.1] - 2025-06-30
+
+### Bug Fixes
+
+- optimize small devices css
+
+
+
 ## [4.25.0] - 2025-06-30
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.25.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.25.1"}

package/source/components/datatable/filter.mjs

@@ -312,6 +312,15 @@ class Filter extends CustomElement {
 			query: null,
 			defaultQuery: null,
 			eventProcessing: true,
+
+			templateFormatter: {
+				marker: {
+					open: null,
+					close: null,
+				},
+				i18n: true,
+			},
+
 		});
 	}
 
@@ -428,7 +437,7 @@ function getTranslations() {
 				"query-not-changed":
 					"La requête de recherche n'a pas changé, donc aucune recherche n'est nécessaire.",
 			};
-		case "sp":
+		case "es":
 			return {
 				search: "Buscar",
 				reset: "Restablecer",
@@ -472,7 +481,7 @@ function getTranslations() {
 				"query-not-changed":
 					"Søkeforespørselen har ikke endret seg, så ingen søk er nødvendig.",
 			};
-		case "dk":
+		case "da":
 			return {
 				search: "Søg",
 				reset: "Nulstil",
@@ -483,7 +492,7 @@ function getTranslations() {
 				"query-not-changed":
 					"Søgeanmodningen er ikke ændret, så ingen søgning er nødvendig.",
 			};
-		case "sw":
+		case "sv":
 			return {
 				search: "Sök",
 				reset: "Återställ",
@@ -494,6 +503,116 @@ function getTranslations() {
 				"query-not-changed":
 					"Sökförfrågan har inte ändrats, så ingen sökning krävs.",
 			};
+		case "nl":
+			return {
+				search: "Zoeken",
+				reset: "Resetten",
+				save: "Opslaan",
+				"filter-name": "Filternaam",
+				"empty-query-and-no-default":
+					"De zoekopdracht is leeg en er is geen standaardzoekopdracht.",
+				"query-not-changed":
+					"De zoekopdracht is niet gewijzigd, dus zoeken is niet nodig.",
+			};
+		case "fi":
+			return {
+				search: "Haku",
+				reset: "Palauta",
+				save: "Tallenna",
+				"filter-name": "Suodattimen nimi",
+				"empty-query-and-no-default":
+					"Hakukysely on tyhjä eikä oletushakua ole määritetty.",
+				"query-not-changed":
+					"Hakupyyntö ei ole muuttunut, joten hakua ei tarvita.",
+			};
+		case "cs":
+			return {
+				search: "Hledat",
+				reset: "Resetovat",
+				save: "Uložit",
+				"filter-name": "Název filtru",
+				"empty-query-and-no-default":
+					"Dotaz je prázdný a není nastavena žádná výchozí hodnota.",
+				"query-not-changed":
+					"Dotaz na hledání se nezměnil, takže hledání není nutné.",
+			};
+		case "pt":
+			return {
+				search: "Buscar",
+				reset: "Redefinir",
+				save: "Salvar",
+				"filter-name": "Nome do filtro",
+				"empty-query-and-no-default":
+					"A consulta está vazia e não há uma consulta padrão.",
+				"query-not-changed":
+					"A solicitação de pesquisa não foi alterada, portanto, nenhuma pesquisa é necessária.",
+			};
+		case "ru":
+			return {
+				search: "Поиск",
+				reset: "Сброс",
+				save: "Сохранить",
+				"filter-name": "Имя фильтра",
+				"empty-query-and-no-default":
+					"Запрос пуст и нет запроса по умолчанию.",
+				"query-not-changed":
+					"Поисковый запрос не изменился, поэтому поиск не требуется.",
+			};
+		case "zh":
+			return {
+				search: "搜索",
+				reset: "重置",
+				save: "保存",
+				"filter-name": "过滤器名称",
+				"empty-query-and-no-default":
+					"查询为空，且没有默认查询。",
+				"query-not-changed":
+					"搜索请求没有更改，因此不需要进行搜索。",
+			};
+		case "hi":
+			return {
+				search: "खोजें",
+				reset: "रीसेट करें",
+				save: "सहेजें",
+				"filter-name": "फ़िल्टर नाम",
+				"empty-query-and-no-default":
+					"क्वेरी खाली है और कोई डिफ़ॉल्ट क्वेरी नहीं है।",
+				"query-not-changed":
+					"खोज अनुरोध में कोई बदलाव नहीं हुआ है, इसलिए खोज आवश्यक नहीं है।",
+			};
+		case "bn":
+			return {
+				search: "অনুসন্ধান",
+				reset: "রিসেট",
+				save: "সংরক্ষণ করুন",
+				"filter-name": "ফিল্টারের নাম",
+				"empty-query-and-no-default":
+					"কোয়েরি খালি এবং কোনো ডিফল্ট কোয়েরি নেই।",
+				"query-not-changed":
+					"অনুসন্ধানের অনুরোধ পরিবর্তন হয়নি, তাই অনুসন্ধান প্রয়োজন নয়।",
+			};
+		case "ja":
+			return {
+				search: "検索",
+				reset: "リセット",
+				save: "保存",
+				"filter-name": "フィルター名",
+				"empty-query-and-no-default":
+					"クエリが空で、デフォルトクエリがありません。",
+				"query-not-changed":
+					"検索リクエストに変更がないため、検索は不要です。",
+			};
+		case "pa":
+			return {
+				search: "ਖੋਜੋ",
+				reset: "ਰੀਸੈੱਟ ਕਰੋ",
+				save: "ਸੇਵ ਕਰੋ",
+				"filter-name": "ਫਿਲਟਰ ਦਾ ਨਾਂ",
+				"empty-query-and-no-default":
+					"ਕੁਐਰੀ ਖਾਲੀ ਹੈ ਅਤੇ ਕੋਈ ਡਿਫੌਲਟ ਕੁਐਰੀ ਨਹੀਂ ਹੈ।",
+				"query-not-changed":
+					"ਖੋਜ ਦੀ ਬੇਨਤੀ ਵਿੱਚ ਕੋਈ ਤਬਦੀਲੀ ਨਹੀਂ ਆਈ ਹੈ, ਇਸ ਲਈ ਖੋਜ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।",
+			};
 		default:
 		case "en":
 			return {
@@ -507,6 +626,7 @@ function getTranslations() {
 					"The search request has not changed, so no search is required.",
 			};
 	}
+
 }
 
 /**
@@ -1045,6 +1165,7 @@ function doSearch({ showEffect } = { showEffect: true }) {
 	return collectSearchQueries
 		.call(this)
 		.then((query) => {
+
 			const buildQuery = buildSearchQuery.call(this, query);
 			if (buildQuery === null) {
 				const msg = this.getOption("labels.empty-query-and-no-default");
@@ -1492,34 +1613,33 @@ function getTemplate() {
                         <slot name="hidden"></slot>
                     </div>
                     <div data-monster-role="select-and-search">
-                        <monster-message-state-button data-monster-role="search-button" class="stretched-control"
-                                                      data-monster-replace="path:labels.search">
-                        </monster-message-state-button>
-                        <monster-select class="stretched-control"
-                                        data-monster-selected-template="summary"
-                                        data-monster-option-type="checkbox"
-                                        data-monster-option-filter-mode="options"
-                                        data-monster-option-filter-position="popper"
-                                        data-monster-role="filter-select"></monster-select>
-                        <monster-popper-button data-monster-role="save-button" class="stretched-control"
-                                               data-monster-attributes="data-monster-visible path:features.storedConfig">
-                            <div slot="button">\${filter-save-label}</div>
-                            <div class="monster-form" data-monster-role="form">
-
-                                <label for="filter-name">\${filter-name-label}
-                                    <input name="filter-name"
-                                           type="search"
-                                           class="monster-margin-bottom-5"></label>
-                                <monster-message-state-button
-                                        data-monster-role="save-action-button"
-                                        data-monster-option-labels-button="\${filter-save-label}">
-                                </monster-message-state-button>
-
-                            </div>
-                        </monster-popper-button>
-                        <monster-button data-monster-role="reset-button" class="stretched-control"
-                                        data-monster-replace="path:labels.reset">
-                        </monster-button>
+                        <monster-button-bar style="max-width: max-content">
+                            <monster-message-state-button data-monster-role="search-button" class="stretched-control">i18n{search}</monster-message-state-button>
+                            <monster-select class="stretched-control"
+                                            data-monster-selected-template="summary"
+                                            data-monster-option-type="checkbox"
+                                            data-monster-option-filter-mode="options"
+                                            data-monster-option-filter-position="popper"
+                                            data-monster-role="filter-select"></monster-select>
+                            <monster-popper-button data-monster-role="save-button" class="stretched-control"
+                                                   data-monster-attributes="data-monster-visible path:features.storedConfig">
+                                <div slot="button">\${filter-save-label}</div>
+                                <div class="monster-form" data-monster-role="form">
+
+                                    <label for="filter-name">\${filter-name-label}
+                                        <input name="filter-name"
+                                               type="search"
+                                               class="monster-margin-bottom-5"></label>
+                                    <monster-message-state-button
+                                            data-monster-role="save-action-button"
+                                            data-monster-option-labels-button="\${filter-save-label}">
+                                    </monster-message-state-button>
+
+                                </div>
+                            </monster-popper-button>
+                            <monster-button data-monster-role="reset-button" class="stretched-control">i18n{reset}</monster-button>
+                            </monster-button>
+                        </monster-button-bar>
                     </div>
 
                 </div>

package/source/components/datatable/style/datatable.pcss

@@ -309,6 +309,35 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 }
 
 
+[data-monster-role=control].small {
+
+    ::slotted(.monster-button-group) {
+        align-items: flex-end;
+    }
+
+    [data-monster-role=datatable] > div {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        &.start {
+            justify-content: flex-start;
+        }
+
+        &.end {
+            justify-content: flex-start;
+        }
+
+        &.center {
+            justify-content: flex-start;
+        }
+
+    }
+
+}
+
+
+
 
 
 

package/source/components/datatable/style/filter.pcss

@@ -76,11 +76,14 @@
             place-content: center flex-end;
             align-items: stretch;
             display: flex;
-            flex-flow: row-reverse nowrap;
+            flex-flow: row nowrap;
             row-gap: 1.5rem;
             column-gap: 0.5rem;
             margin-top: 1rem;
 
+            width:100%;
+            justify-content: flex-end;
+
             & monster-button {
                 display: flex;
             }
@@ -117,7 +120,9 @@
 
 
 @container filter (width < 500px) {
-    & [data-monster-role=control] {
+
+    [data-monster-role=control] {
+
         & [data-monster-role=layout] {
 
             flex-flow: column nowrap;
@@ -141,7 +146,7 @@
                 flex-direction: column;
                 row-gap: 0.5rem;
                 column-gap: 0;
-                
+
                 & monster-message-state-button {
                     width: 100%;
                 }