Skip to content
Snippets Groups Projects
Verified Commit 6417ab82 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: test adjustments and minor layout adjustments

parent 474986c8
Branches
Tags
No related merge requests found
Showing
with 269 additions and 321 deletions
# Changelog # Changelog
## 2024-06-22
- new options to define the markers that are used for the label template [#203](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/203)
## [3.69.2] - 2024-06-24 ## [3.69.2] - 2024-06-24
### Bug Fixes ### Bug Fixes
- the rest datasource should not reload if the query is undefined [#211](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/211) - the rest datasource should not reload if the query is undefined [#211](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/211)
## [3.69.1] - 2024-06-23 ## [3.69.1] - 2024-06-23
### Bug Fixes ### Bug Fixes
- small css adjustments to the field set [#209](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/209) - small css adjustments to the field set [#209](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/209)
## [3.69.0] - 2024-06-23 ## [3.69.0] - 2024-06-23
### Add Features ### Add Features
......
File moved
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@import "../../style/link.pcss"; @import "../../style/link.pcss";
@import "../../style/space.pcss"; @import "../../style/space.pcss";
@import "../../style/icons.pcss"; @import "../../style/icons.pcss";
@import "../../style/mixin/form.pcss"; @import "../../style/form.pcss";
@import "../../style/mixin/button.pcss"; @import "../../style/mixin/button.pcss";
@import "../../style/mixin/typography.pcss"; @import "../../style/mixin/typography.pcss";
......
@import "../../style/control.pcss"; @import "../../style/control.pcss";
@import "../../style/floating-ui.pcss"; @import "../../style/floating-ui.pcss";
@import "../../style/mixin/form.pcss"; @import "../../style/form.pcss";
div[data-monster-role=control] { div[data-monster-role=control] {
......
/** /**
* Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved. * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
* *
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3). * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
...@@ -8,14 +8,12 @@ ...@@ -8,14 +8,12 @@
* For those who do not wish to adhere to the AGPLv3, a commercial license is available. * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms. * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH. * For more information about purchasing a commercial license, please contact schukai GmbH.
*
* SPDX-License-Identifier: AGPL-3.0
*/ */
import {addAttributeToken} from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { FilterControlsDefaultsStyleSheet }; export {FilterControlsDefaultsStyleSheet}
/** /**
* @private * @private
...@@ -24,17 +22,10 @@ export { FilterControlsDefaultsStyleSheet }; ...@@ -24,17 +22,10 @@ export { FilterControlsDefaultsStyleSheet };
const FilterControlsDefaultsStyleSheet = new CSSStyleSheet(); const FilterControlsDefaultsStyleSheet = new CSSStyleSheet();
try { try {
FilterControlsDefaultsStyleSheet.insertRule( FilterControlsDefaultsStyleSheet.insertRule(`
`
@layer filtercontrolsdefaults { @layer filtercontrolsdefaults {
[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} [data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
...@@ -268,7 +268,6 @@ class FieldSet extends CustomControl { ...@@ -268,7 +268,6 @@ class FieldSet extends CustomControl {
function updateExtendedFields() { function updateExtendedFields() {
const nodes = getSlottedElements.call(this, "", "extended"); const nodes = getSlottedElements.call(this, "", "extended");
console.log(nodes.size);
if (nodes.size > 0) { if (nodes.size > 0) {
this[extendedSwitchSymbol].classList.remove("hidden"); this[extendedSwitchSymbol].classList.remove("hidden");
} else { } else {
...@@ -346,16 +345,14 @@ function getTemplate() { ...@@ -346,16 +345,14 @@ function getTemplate() {
<monster-toggle-switch></monster-toggle-switch> <monster-toggle-switch></monster-toggle-switch>
</div> </div>
</div> </div>
<div> <div data-monster-role="container">
<div class="collapse-alignment"> <div class="collapse-alignment">
<slot></slot> <slot part="content"></slot>
</div> </div>
<monster-collapse data-monster-role="collapse"> <monster-collapse data-monster-role="collapse">
<slot name="extended"></slot> <slot name="extended" part="extended"></slot>
</monster-collapse> </monster-collapse>
</div> </div>
</div>`; </div>`;
} }
......
...@@ -183,7 +183,7 @@ class Form extends CustomElement { ...@@ -183,7 +183,7 @@ class Form extends CustomElement {
errorHandler: undefined, errorHandler: undefined,
}, },
classes: { classes: {
form: "monster-form", form: "",
}, },
}, },
initOptionsFromArguments.call(this), initOptionsFromArguments.call(this),
...@@ -251,7 +251,6 @@ class Form extends CustomElement { ...@@ -251,7 +251,6 @@ class Form extends CustomElement {
initDatasource.call(this); initDatasource.call(this);
initUpdater.call(this); initUpdater.call(this);
initObserver.call(this); initObserver.call(this);
return this; return this;
} }
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -51,8 +51,6 @@ ...@@ -51,8 +51,6 @@
} }
transition: background 0.4s ease-in-out; transition: background 0.4s ease-in-out;
} }
} }
......
This diff is collapsed.
...@@ -226,7 +226,7 @@ describe('Form', function () { ...@@ -226,7 +226,7 @@ describe('Form', function () {
setTimeout(() => { setTimeout(() => {
try { try {
expect(document.getElementById('mocks')).contain.html('<monster-form data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>') expect(document.getElementById('mocks')).contain.html('<monster-form style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>')
done(); done();
} catch (e) { } catch (e) {
return done(e); return done(e);
......
...@@ -55,7 +55,7 @@ describe('Details', function () { ...@@ -55,7 +55,7 @@ describe('Details', function () {
try { try {
expect(document.getElementById('mocks')).contain.html( expect(document.getElementById('mocks')).contain.html(
'<monster-details id="details1" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>') '<monster-details id="details1" style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
} catch (e) { } catch (e) {
return done(e); return done(e);
} }
......
...@@ -52,7 +52,7 @@ describe('Host', function () { ...@@ -52,7 +52,7 @@ describe('Host', function () {
setTimeout(() => { setTimeout(() => {
try { try {
expect(document.getElementById('mocks')).contain.html('<monster-host data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>') expect(document.getElementById('mocks')).contain.html('<monster-host style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
} catch (e) { } catch (e) {
return done(e); return done(e);
} }
......
...@@ -47,7 +47,7 @@ describe('Overlay', function () { ...@@ -47,7 +47,7 @@ describe('Overlay', function () {
setTimeout(() => { setTimeout(() => {
try { try {
expect(document.getElementById('mocks')).contain.html( expect(document.getElementById('mocks')).contain.html(
' <monster-overlay data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>') ' <monster-overlay style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
} catch (e) { } catch (e) {
return done(e); return done(e);
} }
......
...@@ -138,7 +138,7 @@ describe('DOM', function () { ...@@ -138,7 +138,7 @@ describe('DOM', function () {
expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1); expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
// no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>') expect(document.getElementById('test1')).contain.html('<monster-customcontrol style="display: block;" data-monster-error="Error: html is not set."></monster-customcontrol>')
}); });
}); });
......
...@@ -242,7 +242,7 @@ describe('DOM', function () { ...@@ -242,7 +242,7 @@ describe('DOM', function () {
expect(document.getElementsByTagName('monster-testclass').length).is.equal(1); expect(document.getElementsByTagName('monster-testclass').length).is.equal(1);
// no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
// but data-monster-error="Error: html is not set." // but data-monster-error="Error: html is not set."
expect(document.getElementById('test1')).contain.html('<monster-testclass data-monster-error="Error: html is not set."></monster-testclass>'); expect(document.getElementById('test1')).contain.html('<monster-testclass style="display: block;" data-monster-error="Error: html is not set."></monster-testclass>');
}); });
}); });
...@@ -256,7 +256,7 @@ describe('DOM', function () { ...@@ -256,7 +256,7 @@ describe('DOM', function () {
try { try {
expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1); expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>'); expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>'); expect(document.getElementById('test1')).contain.html('<monster-testclass2 style="display: block;" data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
return done(); return done();
} catch (e) { } catch (e) {
done(e); done(e);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment