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

chore: repair toggle test

parent a379ec2f
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 648 additions and 569 deletions
.gitlab-ci.yml
+ 1
− 1
View file @ d7ddf048
......@@ -64,7 +64,7 @@ release:
when: on_success
rules:
- if: $DEPLOY_VERSION == null
- if: '$CI_COMMIT_BRANCH == "master"'
- if: $CI_COMMIT_BRANCH == "master"
deploy:
stage: deploy
......
development/issues/open/192.mjs → development/issues/closed/192.mjs
+ 1
− 0
View file @ d7ddf048
......@@ -8,5 +8,6 @@
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/form/context-error.mjs";
development/issues/open/186.html
+ 21
− 21
View file @ d7ddf048
......@@ -8,17 +8,17 @@
</head>
<body>
<h1>add new field set for forms #186</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/186">Issue #186</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-field-set>
<label>N1<input type="text" name="name1" id="name1" placeholder="Name1"></label>
<label>N2<input type="text" name="name2" id="name2" placeholder="Name2"></label>
<label>N3<input type="text" name="name3" id="name3" placeholder="Name3"></label>
dsfasdfsdf
<label slot="extended">N1<input type="text" name="name1" id="name1" placeholder="Name1"></label>
<label slot="extended">N2<input type="text" name="name2" id="name2" placeholder="Name2"></label>
<label slot="extended">N3<input type="text" name="name3" id="name3" placeholder="Name3"></label>
<label>N4<input type="text" name="name4" id="name4" placeholder="Name4"></label>
<label>N5<input type="text" name="name5" id="name5" placeholder="Name5"></label>
......
development/issues/open/186.mjs
+ 1
− 0
View file @ d7ddf048
......@@ -6,6 +6,7 @@
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/form/field-set.mjs";
......
source/components/form/field-set.mjs
+ 274
− 204
View file @ d7ddf048
......@@ -28,6 +28,7 @@ import { isFunction } from "../../types/is.mjs";
import {FieldSetStyleSheet} from "./stylesheet/field-set.mjs";
import {fireCustomEvent} from "../../dom/events.mjs";
import "../layout/collapse.mjs";
import {ToggleSwitch} from "./toggle-switch.mjs";
export {FieldSet};
......@@ -35,7 +36,25 @@ export { FieldSet };
* @private
* @type {symbol}
*/
export const fieldSetElementSymbol = Symbol("fieldSetElement");
const fieldSetElementSymbol = Symbol("fieldSetElement");
/**
* @private
* @type {symbol}
*/
const collapseElementSymbol = Symbol("collapseElement");
/**
* @private
* @type {symbol}
*/
const toggleSwitchElementSymbol = Symbol("toggleSwitchElement");
/**
* @private
* @type {symbol}
*/
const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
/**
* This CustomControl creates a FieldSet element with a variety of options.
......@@ -87,6 +106,7 @@ class FieldSet extends CustomControl {
super[assembleMethodSymbol]();
initControlReferences.call(this);
initEventHandler.call(this);
updateExtendedFields.call(this);
return this;
}
......@@ -133,7 +153,7 @@ class FieldSet extends CustomControl {
/**
*
* @return {Array<CSSStyleSheet>}
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
return [FieldSetStyleSheet];
......@@ -231,41 +251,71 @@ class FieldSet extends CustomControl {
}
}
function updateExtendedFields() {
// check if slot has extended fields
getSlottedElements.call(this, "", "extended").forEach((node) => {
if (node.hasAttribute(ATTRIBUTE_EXTENDED)) {
this.hasExtended = true;
}
})
}
/**
* @private
* @return {initEventHandler}
* @fires Monster.Components.Form.event:monster-field-set-clicked
*/
function initEventHandler() {
const self = this;
const element = this[fieldSetElementSymbol];
// const self = this;
// const element = this[fieldSetElementSymbol];
//
// const type = "click";
const type = "click";
// element.addEventListener(type, function (event) {
// const callback = self.getOption("actions.click");
//
// fireCustomEvent(self, "monster-field-set-clicked", {
// element: self,
// });
//
// if (!isFunction(callback)) {
// return;
// }
//
// const element = findTargetElementFromEvent(
// event,
// ATTRIBUTE_ROLE,
// "control",
// );
//
// if (!(element instanceof Node && self.hasNode(element))) {
// return;
// }
//
// callback.call(self, event);
// });
element.addEventListener(type, function (event) {
const callback = self.getOption("actions.click");
fireCustomEvent(self, "monster-field-set-clicked", {
element: self,
this[toggleSwitchElementSymbol].setOption("actions.on", () => {
console.log( this[collapseElementSymbol],"!!!")
this[collapseElementSymbol].open();
});
if (!isFunction(callback)) {
return;
}
const element = findTargetElementFromEvent(
event,
ATTRIBUTE_ROLE,
"control",
);
if (!(element instanceof Node && self.hasNode(element))) {
return;
}
callback.call(self, event);
this[toggleSwitchElementSymbol].setOption("actions.off", () => {
this[collapseElementSymbol].close();
});
// this[extendedSwitchElementSymbol].addEventListener(type, function (event) {
// const element = findTargetElementFromEvent(
// event,
// ATTRIBUTE_ROLE,
// "extended-switch",
// );
//
//
//
// })
return this;
}
......@@ -276,6 +326,18 @@ function initControlReferences() {
this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="control"]`,
);
this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="extended-switch"]`,
);
this[collapseElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="collapse"]`,
);
this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
`monster-toggle-switch`,
);
}
/**
......@@ -286,9 +348,17 @@ function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<monster-collapse>
<div data-monster-role="header">
<monster-toggle-switch class="hidden"></monster-toggle-switch>
</div>
<div>
<slot></slot>
<monster-collapse data-monster-role="collapse">
<slot name="extended"></slot>
</monster-collapse>
</div>
</div>`;
}
......
source/components/form/style/field-set.pcss
+ 9
− 2
View file @ d7ddf048
......@@ -9,5 +9,12 @@
@import "../../style/floating-ui.pcss";
[data-monster-role=control] {
border: 1px solid red;
}
[data-monster-role=header] {
display: flex;
align-items: center;
justify-content: flex-end;
}
source/components/form/stylesheet/field-set.mjs
+ 8
− 17
View file @ d7ddf048
/**
* 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
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
......@@ -8,14 +8,12 @@
* 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.
* 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 {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { FieldSetStyleSheet };
export {FieldSetStyleSheet}
/**
* @private
......@@ -24,17 +22,10 @@ export { FieldSetStyleSheet };
const FieldSetStyleSheet = new CSSStyleSheet();
try {
FieldSetStyleSheet.insertRule(
`
FieldSetStyleSheet.insertRule(`
@layer fieldset {
.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}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}[data-monster-role=control]{border:1px solid red}
}`,
0,
);
.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}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}[data-monster-role=header]{align-items:center;display:flex;justify-content:flex-end}
}`, 0);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
source/components/form/toggle-switch.mjs
+ 330
− 321
View file @ d7ddf048
......@@ -24,12 +24,13 @@ import {
registerCustomElement,
updaterTransformerMethodsSymbol,
} from "../../dom/customelement.mjs";
import { isObject } from "../../types/is.mjs";
import {isObject, isFunction} from "../../types/is.mjs";
import {ToggleSwitchStyleSheet} from "./stylesheet/toggle-switch.mjs";
import {
ATTRIBUTE_ERRORMESSAGE,
ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs";
export {ToggleSwitch};
/**
......@@ -358,16 +359,24 @@ function toggleValues() {
return;
}
let callback, value;
if (this.getOption("value") === this.getOption("values.on")) {
this.setOption("value", this.getOption("values.off"));
this?.setFormValue(this.getOption("value")); // set form value
this.getOption("actions.off")?.call(this);
value = this.getOption("values.off");
callback = this.getOption("actions.off");
} else {
this.setOption("value", this.getOption("values.on"));
this?.setFormValue(this.getOption("values.off")); // set form value
this.getOption("actions.on")?.call(this);
value = this.getOption("values.on");
callback = this.getOption("actions.on");
}
this.setOption("value", value);
this?.setFormValue(value);
if (isFunction(callback)) {
callback.call(this)();
}
this.setOption("state", this.state);
}
......
source/components/host/toggle-button.mjs
+ 1
− 3
View file @ d7ddf048
......@@ -78,11 +78,9 @@ class ToggleButton extends CallButton {
* @property {string} templates.main Main template
*/
get defaults() {
const obj = Object.assign({}, super.defaults, {
return Object.assign({}, super.defaults, {
call: "toggle",
});
return obj;
}
/**
......
test/cases/components/form/toggle-switch.mjs
+ 2
− 0
View file @ d7ddf048
......@@ -91,6 +91,8 @@ describe('ToggleSwitch', function () {
it('toggle to on', function () {
const toggleSwitch = document.createElement('monster-toggle-switch');
toggleSwitch.setOption('actions.on', 'true');
toggleSwitch.setOption('actions.off', 'false');
expect(toggleSwitch.value).is.equal('off');
expect(toggleSwitch.state).is.equal('off');
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment