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

feat: Add placeholder support for select filter (Issue #316) 

- Created `development/issues/closed/316.html` to document and showcase the placeholder feature added to the `monster-select`.
- Implemented `development/issues/closed/316.mjs` to include any necessary JavaScript functionality for the select component.
- Added mock data for testing in `development/mock/issue-316.js`, including a dataset that the select filter can utilize, facilitating development and testing.
- Enhanced the select component in `source/components/form/select.mjs` to handle the new placeholder attributes for the filter options and configured various components to handle remote fetching of options.
- Updated related styles in `source/components/form/style/select.pcss` and `source/components/form/stylesheet/select.mjs`, ensuring the placeholders are visually integrated and styled consistently.

These changes address the need for more informative placeholder instructions in the select filters to improve the user experience, especially for remote data loading scenarios.
parent 0f9f65e1
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
development/issues/closed/316.html 0 → 100644
+ 155
− 0
View file @ f969c0b0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>add placeholder to select filter #316</title>
<script src="./316.mjs" type="module"></script>
</head>
<body>
<h1>add placeholder to select filter #316</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/316">Issue #316</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<h2>Select (no url)</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-filter-defaultvalue=""
value="2000"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
>
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-filter-defaultvalue=""
value="2000"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-lookup-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-position="popper"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="inline"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select</h2>
<monster-select
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-filter-defaultvalue=""
data-monster-option-placeholder-filter="You can search and it will load when you change the filter, not the value listed here."
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
</main>
</body>
</html>
development/issues/closed/316.mjs 0 → 100644
+ 15
− 0
View file @ f969c0b0
/**
* @file development/issues/open/316.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/316
* @description add placeholder to select filter
* @issue 316
*/
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";
development/mock/issue-316.js 0 → 100644
+ 81
− 0
View file @ f969c0b0
const json =
`{
"dataset": [
{
"id": 2000,
"name": "Autobahn"
},
{
"id": 2001,
"name": "Bus"
},
{
"id": 2002,
"name": "Autobus"
},
{
"id": 2003,
"name": "Fahrrad"
},
{
"id": 2004,
"name": "Tram"
},
{
"id": 2005,
"name": "Flugzeug"
}
],
"sys": {
"total": 6
}
}`;
// check if JSON is valid
JSON.parse(json)
const requestDelay = 10
export default [
{
url: '/issue-316.json',
method: 'get',
rawResponse: async (req, res) => {
try {
res.setHeader('Content-Type', 'application/json');
res.statusCode = 200;
const url = new URL(req.url, `http://${req.headers.host}`);
const q = Object.fromEntries(url.searchParams);
if (q?.default === 'true') {
const parsedJson = JSON.parse(json);
setTimeout(() => {
res.end(JSON.stringify({dataset: [parsedJson.dataset[0]], sys: {total: 1}}));
}, requestDelay);
return;
}
if (q?.q) {
const query = q.q.toLowerCase();
const parsedJson = JSON.parse(json);
const filtered = parsedJson.dataset.filter(item =>
item.name.toLowerCase().includes(query)
);
setTimeout(() => {
res.end(JSON.stringify({dataset: filtered, sys: {total: filtered.length}}));
}, requestDelay);
return;
}
setTimeout(() => {
res.end(json);
}, requestDelay);
} catch (error) {
res.statusCode = 500;
res.end(JSON.stringify({error: 'Internal Server Error'}));
}
},
}
];
\ No newline at end of file
source/components/form/select.mjs
+ 2711
− 2287
View file @ f969c0b0
This diff is collapsed.
source/components/form/style/select.pcss
+ 7
− 5
View file @ f969c0b0
......@@ -2,6 +2,7 @@
@import "../../style/border.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import "../../style/space.pcss";
@import '../../style/mixin/typography.pcss';
@import '../../style/mixin/hover.pcss';
......@@ -269,11 +270,6 @@ div[data-monster-role=selection] {
}
[data-monster-role="no-options"] {
margin: 1.1em 1.1em 0 1.1em;
padding: 0.3em 0.8em;
border-radius: 0.2em;
color: var(--monster-color-warning-4);
background-color: var(--monster-bg-color-warning-4);
}
.selected {
......@@ -303,6 +299,12 @@ div[data-monster-role=selection] {
}
[data-monster-role="filter"]::placeholder {
color: var(--monster-color-primary-2);
background-color: var(--monster-bg-color-primary-2);
}
[data-monster-role=option] > label:focus,
[data-monster-role=option] > input:focus {
outline: none
......
source/components/form/stylesheet/select.mjs
+ 7
− 14
View file @ f969c0b0
This diff is collapsed.
source/types/version.mjs
+ 1
− 1
View file @ f969c0b0
......@@ -156,7 +156,7 @@ function getMonsterVersion() {
}
/** don't touch, replaced by make with package.json version */
monsterVersion = new Version("3.120.0");
monsterVersion = new Version("4.4.1");
return monsterVersion;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment