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

fix(form): form has wrong default datasource #281

parent 8df4f3f4
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 562 additions and 453 deletions
development/issues/closed/281.html 0 → 100644
+ 39
− 0
View file @ 59531719
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form tag without explicit datasource #281</title>
<script src="./281.mjs" type="module"></script>
</head>
<body>
<h1>form tag without explicit datasource #281</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/281">Issue #281</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-form>
<monster-field-set>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Name" required pattern="[a-z]{3,5}">
<label for="color">Color</label>
<input id="color" type="color" placeholder="Color">
</monster-field-set>
<monster-field-set>
<label for="name2">Name</label>
<input id="name2" type="text" placeholder="Name" required pattern="[a-z]{3,5}">
<label for="color2">Color</label>
<input id="color2" type="file" placeholder="Color">
</monster-field-set>
<monster-button>submit</monster-button>
</monster-form>
<!-- Write your code here -->
</main>
</body>
</html>
development/issues/closed/281.mjs 0 → 100644
+ 20
− 0
View file @ 59531719
/**
* @file development/issues/open/281.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/281
* @description form tag without explicit datasource
* @issue 281
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/form/form.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/field-set.mjs";
import "../../../source/data/datasource.mjs";
package.json
+ 2
− 2
View file @ 59531719
......@@ -54,7 +54,7 @@
"btoa": "^1.2.1",
"c8": "^10.1.3",
"chai": "^5.1.2",
"chai-dom": "^1.12.0",
"chai-dom": "^1.12.1",
"crypt": "^0.0.2",
"cssnano": "^7.0.6",
"dom-storage": "^2.1.0",
......@@ -70,7 +70,7 @@
"jsdom-global": "^3.0.2",
"mocha": "^10.8.2",
"playwright": "^1.49.1",
"postcss": "^8.4.49",
"postcss": "^8.5.1",
"postcss-fluid": "^1.4.2",
"postcss-for": "^2.1.1",
"postcss-import": "^16.1.0",
......
pnpm-lock.yaml
+ 285
− 266
View file @ 59531719
This diff is collapsed.
source/components/datatable/dataset.mjs
+ 10
− 5
View file @ 59531719
......@@ -38,6 +38,7 @@ import {
datasourceLinkedElementSymbol,
} from "./util.mjs";
import { FormStyleSheet } from "../stylesheet/form.mjs";
import {addErrorAttribute} from "../../dom/error.mjs";
export { DataSet };
......@@ -236,17 +237,20 @@ class DataSet extends CustomElement {
super[assembleMethodSymbol]();
requestAnimationFrame(() => {
if (!this[datasourceLinkedElementSymbol]) {
const selector = this.getOption("datasource.selector");
if (isString(selector)) {
const element = findElementWithSelectorUpwards(this, selector);
if (element === null) {
throw new Error("the selector must match exactly one element");
addErrorAttribute(this, "the selector must match exactly one element");
return;
}
if (!(element instanceof Datasource)) {
throw new TypeError("the element must be a datasource");
addErrorAttribute(this, "the element must be a datasource");
return;
}
this[datasourceLinkedElementSymbol] = element;
......@@ -256,7 +260,8 @@ class DataSet extends CustomElement {
handleDataSourceChanges.call(this);
} else {
throw new Error("the selector must be a string");
addErrorAttribute(this, "the datasource selector is missing or invalid");
return
}
}
......@@ -301,7 +306,7 @@ function initEventHandler() {
};
if (this[datasourceLinkedElementSymbol]) {
this[datasourceLinkedElementSymbol].datasource.attachObserver(
this[datasourceLinkedElementSymbol]?.datasource?.attachObserver(
new Observer(() => {
let index = 0;
if (
......@@ -318,7 +323,7 @@ function initEventHandler() {
}),
);
this[datasourceLinkedElementSymbol].attachObserver(
this[datasourceLinkedElementSymbol]?.attachObserver(
new Observer(() => {
let index = 0;
if (
......
source/components/datatable/datasource.mjs
+ 1
− 0
View file @ 59531719
......@@ -116,3 +116,4 @@ class Datasource extends CustomElement {
this[dataSourceSymbol].read();
}
}
source/components/datatable/util.mjs
+ 6
− 2
View file @ 59531719
......@@ -14,7 +14,7 @@
import { diff } from "../../data/diff.mjs";
import { Pathfinder } from "../../data/pathfinder.mjs";
import { isObject } from "../../types/is.mjs";
import {isObject, isPrimitive} from "../../types/is.mjs";
import { Observer } from "../../types/observer.mjs";
export { handleDataSourceChanges, datasourceLinkedElementSymbol };
......@@ -33,7 +33,11 @@ function handleDataSourceChanges() {
return;
}
let data = this[datasourceLinkedElementSymbol].data;
let data = this[datasourceLinkedElementSymbol]?.data;
if(isPrimitive(data)) {
throw new Error("Data must be an object or an array");
}
const actualData = JSON.stringify(this.getOption("data"));
const actualDataAsObj = JSON.parse(actualData);
......
source/components/form/form.mjs
+ 168
− 163
View file @ 59531719
......@@ -12,7 +12,8 @@
* SPDX-License-Identifier: AGPL-3.0
*/
import { Datasource } from "../../data/datasource.mjs";
import "../datatable/datasource/dom.mjs";
import "../form/field-set.mjs";
import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
import {DataSet} from "../datatable/dataset.mjs";
import {
......@@ -23,6 +24,7 @@ import {
import {datasourceLinkedElementSymbol} from "../datatable/util.mjs";
import {FormStyleSheet} from "./stylesheet/form.mjs";
import {addAttributeToken} from "../../dom/attributes.mjs";
import {getDocument} from "../../dom/util.mjs";
export {Form};
......@@ -45,6 +47,8 @@ const debounceBindSymbol = Symbol("debounceBind");
*
* @example /examples/components/form/form-simple
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/281.html
*
* @since 1.0.0
* @copyright schukai GmbH
* @summary A form control
......@@ -117,7 +121,7 @@ class Form extends DataSet {
const selector = this.getOption("datasource.selector");
if (!selector) {
this[datasourceLinkedElementSymbol] = new Datasource(this);
this[datasourceLinkedElementSymbol] = getDocument().createElement("monster-datasource-dom");
}
super[assembleMethodSymbol]();
......@@ -163,7 +167,8 @@ class Form extends DataSet {
}
}
function initDataSourceHandler() {}
function initDataSourceHandler() {
}
/**
* @private
......
source/components/form/style/field-set.pcss
+ 23
− 0
View file @ 59531719
......@@ -134,6 +134,29 @@ slot {
box-sizing: border-box;
}
::slotted(input[type="color"]) {
padding: 0 0.2rem;
min-height: calc(1.8rem + 0.4rem);
}
::slotted(input[type="time"]),
::slotted(input[type="date"]) {
padding: 0 0.2rem;
min-height: calc(1.8rem + 0.4rem);
}
::slotted(input[type="checkbox"]),
::slotted(input[type="radio"]) {
width: 1.8rem;
min-height: calc(1.8rem + 0.4rem);
padding: 0 0.2rem;
}
::slotted(input[type="file"]) {
padding: 0.4rem;
min-height: calc(1.2rem );
}
::slotted(input),
::slotted(monster-toggle-switch),
::slotted(select) {
......
source/components/form/stylesheet/field-set.mjs
+ 7
− 14
View file @ 59531719
This diff is collapsed.
source/components/form/toggle-switch.mjs
+ 1
− 1
View file @ 59531719
......@@ -164,7 +164,7 @@ class ToggleSwitch extends CustomControl {
*/
[updaterTransformerMethodsSymbol]() {
return {
"state-callback": (Wert) => {
"state-callback": () => {
return this.state;
},
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment