fix: update selection after import #280

bd40d296 · Volker Schukai · a75635a9 · bd40d296 · bd40d296 · bd40d296
Verified Commit bd40d296 authored 4 months ago by Volker Schukai
--- a/development/issues/open/280.html
+++ b/development/issues/open/280.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>select attribute=\"value\" from datasource doesn´t work #280</title>
+    <script src="./280.mjs" type="module"></script>
+</head>
+<body>
+<h1>select attribute="value" from datasource doesn't work #280</h1>
+<p></p>
+<ul>
+    <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/280">Issue #280</a></li>
+    <li><a href="/">Back to overview</a></li>
+</ul>
+<main>
+
+    <monster-issue-280 id="i280"> </monster-issue-280>
+
+
+</main>
+</body>
+</html>
--- a/development/issues/open/280.mjs
+++ b/development/issues/open/280.mjs
+/**
+* @file development/issues/open/280.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/280
+* @description select attribute=\"value\" from datasource doesn´t work
+* @issue 280
+*/
+
+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/select.mjs";
+import {assembleMethodSymbol, CustomElement, registerCustomElement} from "../../../source/dom/customelement.mjs";
+
+const dataset = [
+    {
+        "name": "United Kingdom",
+        "alpha-2": "GB",
+        "country-code": "826",
+    },
+    {
+        "name": "Sweden",
+        "alpha-2": "SE",
+        "country-code": "752",
+
+    },
+    {
+        "name": "Germany",
+        "alpha-2": "DE",
+        "country-code": "276",
+    }
+]
+
+setTimeout(() => {
+
+    const select = document.getElementById("i280")
+    console.log(select);
+
+    select.setOption("test.value", ["826","752"]);
+
+    //if(true) return
+
+    //document.getElementById("i280").setOption("test.value", "a,b,c");
+
+
+// the label template is a string that will be used to generate the label for each option
+    select.getSelect().setOption('mapping.labelTemplate', '${name} (${alpha-2})')
+
+// the value template is a string that will be used to generate the value for each option
+    select.getSelect().setOption('mapping.valueTemplate', '${country-code}')
+
+    select.getSelect().importOptions(dataset);
+
+
+
+    //select.setOption("test.value", ["826","752"]);
+
+},1000);
+
+
+class Issue280 extends CustomElement {
+
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+    }
+
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            test : {
+                value : ["826"]
+            }
+
+        });
+    }
+
+    static getTag() {
+        return "monster-issue-280";
+    }
+
+    getSelect() {
+        return this.shadowRoot.querySelector("monster-select");
+    }
+
+}
+
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control">
+
+            <monster-select data-monster-attributes="value path:test.value" data-monster-option-type="checkbox">
+               
+            </monster-select>
+
+
+        </div>
+    `;
+}
+
+
+registerCustomElement(Issue280);
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs