From acb3b1be60a078d603dcb13fda6514b2fb47b910 Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Thu, 23 Nov 2023 02:39:44 +0100
Subject: [PATCH] feat: new closeOnSelect feature
---
.../{pagination => datatable}/data.json | 0
.../{pagination => datatable}/index.html | 0
playground/{pagination => datatable}/main.js | 0
playground/select/data.json | 0
playground/select/data2.json | 22 ++
playground/select/index.html | 193 ++++++++++++++++++
playground/select/main.js | 12 ++
playground/select/main.pcss | 0
source/components/form/select.mjs | 10 +-
9 files changed, 235 insertions(+), 2 deletions(-)
rename playground/{pagination => datatable}/data.json (100%)
rename playground/{pagination => datatable}/index.html (100%)
rename playground/{pagination => datatable}/main.js (100%)
create mode 100644 playground/select/data.json
create mode 100644 playground/select/data2.json
create mode 100644 playground/select/index.html
create mode 100644 playground/select/main.js
create mode 100644 playground/select/main.pcss
diff --git a/playground/pagination/data.json b/playground/datatable/data.json
similarity index 100%
rename from playground/pagination/data.json
rename to playground/datatable/data.json
diff --git a/playground/pagination/index.html b/playground/datatable/index.html
similarity index 100%
rename from playground/pagination/index.html
rename to playground/datatable/index.html
diff --git a/playground/pagination/main.js b/playground/datatable/main.js
similarity index 100%
rename from playground/pagination/main.js
rename to playground/datatable/main.js
diff --git a/playground/select/data.json b/playground/select/data.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/playground/select/data2.json b/playground/select/data2.json
new file mode 100644
index 000000000..915f1a166
--- /dev/null
+++ b/playground/select/data2.json
@@ -0,0 +1,22 @@
+{
+ "dataset": {
+ "state": "partlyopen",
+ "possibleTransitions": [
+ {
+ "name": "cmd-reset",
+ "from": null,
+ "to": "init"
+ },
+ {
+ "name": "cmd-partlyopen-to-edit",
+ "from": "partlyopen",
+ "to": "edit"
+ },
+ {
+ "name": "cmd-partlyopen-to-visuellCheck",
+ "from": "partlyopen",
+ "to": "visuellCheck"
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/playground/select/index.html b/playground/select/index.html
new file mode 100644
index 000000000..c5b49bcdd
--- /dev/null
+++ b/playground/select/index.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>Form</title>
+ <script src="./main.js" type="module"></script>
+</head>
+<body>
+
+
+<main>
+
+ <h1>Form</h1>
+
+ <h2 id="form1">Form 1</h2>
+
+ <form class="monster-form">
+
+
+ <div class="input-group">
+ <label for="name2">Name</label>
+ <input type="text" id="name2" name="user_name"/>
+ <input type="text" id="name32" name="user_name"/>
+ </div>
+
+
+
+ <label for="msg">Your message:
+ <textarea id="msg2" name="user_message"></textarea>
+ </label>
+
+
+ <fieldset>
+ <legend>Personal Information</legend>
+
+
+ <label for="na3me">test
+ <input type="text" id="na3me" name="user_name"/></label>
+
+
+ <label for="ma3il">reply:
+ <input type="email" id="ma3il" name="user_email"/>
+ </label>
+
+
+ <label for="ms1g">Your message:
+ <textarea id="ms1g" name="user_message"></textarea>
+ </label>
+
+
+ </fieldset>
+
+ <fieldset>
+ <legend>Detasil Information</legend>
+
+ <div id="from">
+ <label for="name">from:</label>
+ <input type="text" id="name" name="user_name"/>
+ </div>
+
+ <label for="mail">reply:</label>
+ <input type="email" id="mail" name="user_email"/>
+
+ <label >reply:</label>
+ <select><option>test</option><option>test2</option></select>
+ <p>sdafasd fasdf klasdjfklöjasdklöfjasdfjasdfklö</p>
+
+ <div id="message">
+ <label for="msg">Your message:</label>
+ <textarea id="msg" name="user_message"></textarea>
+ </div>
+
+ <div class="button">
+ <button type="submit">Send your message</button>
+ </div>
+
+
+ </fieldset>
+
+ </form>
+
+
+ <h2 id="form2">Form 2</h2>
+
+ <p>Forms are useful for all kinds of things on webpages. Contact forms, newsletter sign ups etc. Forms also look
+ pretty good on Simple.css:</p>
+
+ <form class="monster-form">
+ <p><strong>This is just a test form. It doesn't do anything.</strong></p>
+
+ <label>
+ <svg class="icon prefix">
+ <use xlink:href="#icon-envelope"></use>
+ </svg>
+ <input placeholder="Your Email"
+ type="email" inputmode="email"
+ autocomplete="off"
+ aria-required="true"
+ required
+ title="Email address">
+ <span>Your email address</span>
+ </label>
+
+
+ <label>
+ <input placeholder="Your Email"
+ type="email" inputmode="email"
+ autocomplete="off"
+ aria-required="true"
+ required
+ title="Email address">
+ <span>Your email address</span>
+ </label>
+
+
+ <label for="customRange1" class="form-label">Example range
+ <input type="range" class="form-range" id="customRange1">
+ </label>
+
+
+ <select>
+ <option selected="selected" value="1">Title</option>
+ <option value="2">Mr</option>
+ <option value="3">Miss</option>
+ <option value="4">Mrs</option>
+ <option value="5">Other</option>
+ </select>
+ <label>First name</label>
+ <input type="text" name="first_name"/>
+ <label>Surname</label>
+ <input type="text" name="surname"/>
+ <label>Email</label>
+ <input type="email" name="email" required=""/>
+ <label>Enquiry type:</label>
+ <label><input checked="checked" name="type" type="radio" value="sales"/>Sales</label>
+ <label><input name="type" type="radio" value="support"/>Support
+ <input name="type" type="radio" value="billing"/>Billing</label>
+
+ <label>Enquiry type:</label>
+ <label>Sales<input checked="checked" name="type" type="radio" value="sales"/></label>
+ <label>Support<input name="type" type="radio" value="support"/>
+ Billing<input name="type" type="radio" value="billing"/></label>
+ <label>Message
+ <textarea rows="6"></textarea></label>
+ <label for="cars">Choose a car:
+ <select name="cars" id="cars" multiple="">
+ <option value="volvo">Volvo</option>
+ <option value="saab">Saab</option>
+ <option value="opel">Opel</option>
+ <option value="audi">Audi</option>
+ </select>
+ </label>
+ <label>
+ <input type="checkbox" id="chec3k233box" value="terms"/>
+ I agree to the <a href="#">terms and conditions</a>
+ </label>
+ <label>
+ <input type="checkbox" id="chec3k2box" value="terms"/>
+ I agree to the <a href="#">terms and conditions</a>
+ </label>
+ <label>
+ <input type="checkbox" id="che4ckbox" value="terms"/>
+ I agree to the <a href="#">terms and conditions</a>
+ </label>
+
+ <label>
+ I agree to the <a href="#">terms and conditions</a>
+ <input type="checkbox" id="chec3k233box" value="terms"/>
+ </label>
+ <label>
+ I agree to the <a href="#">terms and conditions</a>
+ <input type="checkbox" id="chec3k2box" value="terms"/>
+ </label>
+ <label>
+ I agree to the <a href="#">terms and conditions</a>
+ <input type="checkbox" id="che4ckbox" value="terms"/>
+ </label>
+
+
+ <button>Send</button>
+ <button type="reset">Reset</button>
+ <button disabled="disabled">Disabled</button>
+ asdfsdafasd
+ <div>dsfsdfsdf</div>
+ </form>
+
+
+</main>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/playground/select/main.js b/playground/select/main.js
new file mode 100644
index 000000000..4d4884d75
--- /dev/null
+++ b/playground/select/main.js
@@ -0,0 +1,12 @@
+import "../../source/components/style/property.pcss";
+import "../../source/components/style/normalize.pcss";
+import "../../source/components/style/color.pcss";
+import "../../source/components/style/theme.pcss";
+import "../../source/components/style/typography.pcss";
+import "../../source/components/style/form.pcss";
+import "../../source/components/style/link.pcss";
+import "../../source/components/style/button.pcss";
+import "../../source/components/style/ripple.pcss";
+import "./main.pcss";
+
+
diff --git a/playground/select/main.pcss b/playground/select/main.pcss
new file mode 100644
index 000000000..e69de29bb
diff --git a/source/components/form/select.mjs b/source/components/form/select.mjs
index d04e3aad3..11aa2bba3 100644
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -391,6 +391,7 @@ class Select extends CustomControl {
* @property {Boolean} features.clearAll=true Display of a delete button to delete the entire selection
* @property {Boolean} features.clear=true Display of a delete key for deleting the specific selection
* @property {Boolean} features.loadOnOpen=false Load options when opening the dropdown
+ * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
* @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
* @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
* @property {Object} templates Template definitions
@@ -424,6 +425,7 @@ class Select extends CustomControl {
clearAll: true,
clear: true,
loadOnOpen: false,
+ closeOnSelect: false,
},
url: null,
labels: {
@@ -719,7 +721,7 @@ class Select extends CustomControl {
fireCustomEvent(this, "monster-options-set", {
options,
});
-
+
return this;
}
@@ -852,7 +854,7 @@ function parseSlotsToOptions() {
let counter = 1;
getSlottedElements.call(this, "div").forEach((node) => {
- let value = String(counter++);
+ let value = (counter++).toString();
let visibility = "visible";
if (node.hasAttribute("data-monster-value")) {
@@ -1532,6 +1534,10 @@ function gatherState() {
.catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
});
+
+ if (this.getOption("features.closeOnSelect") === true) {
+ toggle.call(this);
+ }
return this;
}
--
GitLab