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

feat: new closeOnSelect feature

parent 7f8293d3
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 235 additions and 2 deletions
playground/pagination/data.json → playground/datatable/data.json
+ 0
− 0
View file @ acb3b1be
File moved
playground/pagination/index.html → playground/datatable/index.html
+ 0
− 0
View file @ acb3b1be
File moved
playground/pagination/main.js → playground/datatable/main.js
+ 0
− 0
View file @ acb3b1be
File moved
playground/select/data.json 0 → 100644
+ 0
− 0
View file @ acb3b1be
playground/select/data2.json 0 → 100644
+ 22
− 0
View file @ acb3b1be
{
"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
playground/select/index.html 0 → 100644
+ 193
− 0
View file @ acb3b1be
<!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
playground/select/main.js 0 → 100644
+ 12
− 0
View file @ acb3b1be
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";
playground/select/main.pcss 0 → 100644
+ 0
− 0
View file @ acb3b1be
source/components/form/select.mjs
+ 8
− 2
View file @ acb3b1be
...@@ -391,6 +391,7 @@ class Select extends CustomControl { ...@@ -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.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.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.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.defaultValue=* Default filter value, if the filter is empty
* @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
* @property {Object} templates Template definitions * @property {Object} templates Template definitions
...@@ -424,6 +425,7 @@ class Select extends CustomControl { ...@@ -424,6 +425,7 @@ class Select extends CustomControl {
clearAll: true, clearAll: true,
clear: true, clear: true,
loadOnOpen: false, loadOnOpen: false,
closeOnSelect: false,
}, },
url: null, url: null,
labels: { labels: {
...@@ -852,7 +854,7 @@ function parseSlotsToOptions() { ...@@ -852,7 +854,7 @@ function parseSlotsToOptions() {
let counter = 1; let counter = 1;
getSlottedElements.call(this, "div").forEach((node) => { getSlottedElements.call(this, "div").forEach((node) => {
let value = String(counter++); let value = (counter++).toString();
let visibility = "visible"; let visibility = "visible";
if (node.hasAttribute("data-monster-value")) { if (node.hasAttribute("data-monster-value")) {
...@@ -1533,6 +1535,10 @@ function gatherState() { ...@@ -1533,6 +1535,10 @@ function gatherState() {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
}); });
if (this.getOption("features.closeOnSelect") === true) {
toggle.call(this);
}
return this; return this;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment