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

feat: multipleColumns #242

parent 6426c56b
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 274 additions and 101 deletions
development/config/import.mjs
+ 2
− 2
View file @ ba59cd42
export const projectRoot = "/home/vs/workspaces/oss/monster/monster"; export const projectRoot = "/home/vs/workspaces/oss/monster/monster";
export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source"; export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development"; export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
export const pnpxBin = "/nix/store/90rp76gcxqz2cdavfpz7cbpnhs869hkm-pnpm-8.15.5/bin/pnpx"; export const pnpxBin = "/nix/store/hd8c9fhdqv36nyh5zg4z32ccficlz9n8-pnpm-8.15.5/bin/pnpx";
export const nodeBin = "/nix/store/bmmjbvb8hishfrg78ygjlynpq3ikpl39-nodejs-20.15.1/bin/node"; export const nodeBin = "/nix/store/k5inwzpp6a0295pd3nfckk9hq8wmifhz-nodejs-20.15.1/bin/node";
export const license = "/**" + "\n" + export const license = "/**" + "\n" +
" * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved." + "\n" + " * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved." + "\n" +
" * Node module: @schukai/monster" + "\n" + " * Node module: @schukai/monster" + "\n" +
......
development/issues/closed/242.html 0 → 100644
+ 51
− 0
View file @ ba59cd42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optimize tree-menu #242</title>
<script src="242.mjs" type="module"></script>
</head>
<body>
<h1>optimize tree-menu #242</h1>
<p></p>
<ul>
<li class="monster-theme-primary-1"><a
href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/242">Issue #242</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-split-panel>
<monster-panel id="inner2" slot="end">
<monster-form>
<monster-field-set data-monster-option-labels-title="my title">
<label for="name1" slot="extended">N1</label><input slot="extended" type="text" name="name1" id="name1" placeholder="Name1">
<label for="name2" slot="extended">N2</label><input slot="extended" type="text" name="name2" id="name2" placeholder="Name2">
<label for="name3" slot="extended">N3</label><input slot="extended" type="text" name="name3" id="name3" placeholder="Name2">
<!-- <label for="name4">N4 das ist das label</label><input type="text" name="name4" id="name4" placeholder="Name4" class="span-1-max"> -->
<label for="namex">NX</label><monster-select class="span-1-max"></monster-select>
<label for="name5">N5</label><input type="text" name="name5" id="name5" placeholder="Name5">
<label for="name6">N6</label><input type="text" name="name4" id="name6" placeholder="Name4">
<label for="name7">N7</label><input type="text" name="name5" id="name7" placeholder="Name5">
<label for="name8">N8</label><input type="text" name="name4" id="name8" placeholder="Name4" class="span-1">
<label for="name9">N9</label><input type="text" name="name5" id="name9" placeholder="Name5">
<label for="name-x1">X1</label><input type="color" name="name-x1" id="name-x1" placeholder="Name-x1">
<label for="name-x2">X2</label><monster-toggle-switch name="name-x2" id="name-x2" placeholder="Name-x2"></monster-toggle-switch>
<label for="name10">N10</label><input type="text" name="name4" id="name10" placeholder="Name4">
</monster-field-set>
</monster-form>
</monster-panel>
</monster-split-panel>
</main>
</body>
</html>
development/issues/closed/242.mjs 0 → 100644
+ 25
− 0
View file @ ba59cd42
/**
* @file development/issues/open/191.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/191
* @description optimize tree-menu
* @issue 242
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/form.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/tree-menu/tree-menu.mjs";
import "../../../source/components/layout/split-panel.mjs";
import "../../../source/components/form/form.mjs";
import "../../../source/components/form/select.mjs";
import "../../../source/components/form/field-set.mjs";
import "../../../source/components/layout/panel.mjs";
import "../../../source/components/datatable/datasource/dom.mjs";
import "../../../source/components/datatable/datasource/rest.mjs";
source/components/form/field-set.mjs
+ 19
− 2
View file @ ba59cd42
...@@ -95,6 +95,7 @@ class FieldSet extends CustomControl { ...@@ -95,6 +95,7 @@ class FieldSet extends CustomControl {
initControlReferences.call(this); initControlReferences.call(this);
initEventHandler.call(this); initEventHandler.call(this);
updateExtendedFields.call(this); updateExtendedFields.call(this);
updateColumns.call(this);
return this; return this;
} }
...@@ -227,7 +228,7 @@ class FieldSet extends CustomControl { ...@@ -227,7 +228,7 @@ class FieldSet extends CustomControl {
} }
/** /**
* Set value of the form control. * Set the value of the form control.
* *
* ``` * ```
* e = document.querySelector('monster-field-set'); * e = document.querySelector('monster-field-set');
...@@ -247,6 +248,9 @@ class FieldSet extends CustomControl { ...@@ -247,6 +248,9 @@ class FieldSet extends CustomControl {
} }
} }
/**
* @private
*/
function updateExtendedFields() { function updateExtendedFields() {
const nodes = getSlottedElements.call(this, "", "extended"); const nodes = getSlottedElements.call(this, "", "extended");
if (nodes.size > 0) { if (nodes.size > 0) {
...@@ -256,10 +260,23 @@ function updateExtendedFields() { ...@@ -256,10 +260,23 @@ function updateExtendedFields() {
} }
} }
/**
* @private
*/
function updateColumns() {
if (this.getOption("features.multipleColumns") !== true) {
this[fieldSetElementSymbol].classList.remove("multiple-columns");
return;
}
this[fieldSetElementSymbol].classList.add("multiple-columns");
}
/** /**
* @private * @private
* @return {initEventHandler} * @return {initEventHandler}
* @fires Monster.Components.Form.event:monster-field-set-clicked * @fires event:monster-field-set-clicked
*/ */
function initEventHandler() { function initEventHandler() {
this[toggleSwitchElementSymbol].setOption( this[toggleSwitchElementSymbol].setOption(
......
source/components/form/style/field-set.pcss
+ 164
− 70
View file @ ba59cd42
@import "../../style/color.pcss"; @import "../../style/color.pcss";
@import "../../style/theme.pcss"; @import "../../style/theme.pcss";
@import "../../style/border.pcss"; @import "../../style/border.pcss";
@import "../../style/form.pcss";
@import "../../style/control.pcss"; @import "../../style/control.pcss";
@import "../../style/badge.pcss"; @import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss'; @import '../../style/mixin/typography.pcss';
...@@ -57,9 +58,12 @@ slot { ...@@ -57,9 +58,12 @@ slot {
accent-color: var(--monster-color-secondary-2); accent-color: var(--monster-color-secondary-2);
} }
.multiple-columns slot {
grid-template-columns: auto 1fr auto 1fr auto 1fr;
}
::slotted(label), ::slotted(label),
::slotted(.label) ::slotted(.label) {
{
color: var(--monster-color-primary-1); color: var(--monster-color-primary-1);
border-bottom: thin dotted var(--monster-color-primary-1); border-bottom: thin dotted var(--monster-color-primary-1);
} }
...@@ -79,18 +83,98 @@ slot { ...@@ -79,18 +83,98 @@ slot {
::slotted(monster-button), ::slotted(monster-button),
::slotted(monster-state-button), ::slotted(monster-state-button),
::slotted(monster-select),
::slotted(monster-api-button), ::slotted(monster-api-button),
::slotted(monster-state-button), ::slotted(monster-state-button),
::slotted(monster-datasource-save-button) { ::slotted(monster-datasource-save-button) {
grid-column: 2; grid-column: 2;
} }
::slotted(input),
::slotted(monster-button),
::slotted(monster-select),
::slotted(monster-state-button),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
}
::slotted(input) {
align-self: end;
}
::slotted(monster-toggle-switch) {
width: 4.5rem;
}
.multiple-columns ::slotted(.span-1) {
grid-column: 2 / span 3;
}
.multiple-columns ::slotted(.span-1-max) {
grid-column: 2 / span 5;
}
.multiple-columns ::slotted(.span-2) {
grid-column: 4 / span 3;
}
@container form-set (max-width: 1200px) {
.multiple-columns {
& slot {
grid-template-columns: auto 1fr auto 1fr;
}
& ::slotted(.span-1) {
grid-column: 2 / span 3;
}
& ::slotted(.span-2) {
grid-column: unset;
}
& ::slotted(.span-1-max:first-child) {
grid-column: 2 / span 3;
}
}
}
@container form-set (max-width: 800px) {
.multiple-columns {
& slot {
grid-template-columns: auto 1fr;
}
& ::slotted(.span-1) {
grid-column: unset;
}
& ::slotted(.span-2) {
grid-column: unset;
}
& ::slotted(.span-1-max) {
grid-column: unset;
}
}
}
@container form-set (max-width: 500px) { @container form-set (max-width: 500px) {
slot { slot {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0; gap: 0;
} }
::slotted(h1), ::slotted(h1),
::slotted(h2), ::slotted(h2),
::slotted(h3), ::slotted(h3),
...@@ -101,8 +185,7 @@ slot { ...@@ -101,8 +185,7 @@ slot {
} }
::slotted(label), ::slotted(label),
::slotted(.label) ::slotted(.label) {
{
padding-top: 1rem; padding-top: 1rem;
border-bottom: none; border-bottom: none;
} }
...@@ -116,5 +199,16 @@ slot { ...@@ -116,5 +199,16 @@ slot {
} }
.multiple-columns {
& slot {
grid-template-columns: 1fr;
}
& ::slotted(.span-1-max) {
grid-column: unset;
}
}
} }
source/components/form/stylesheet/field-set.mjs
+ 7
− 14
View file @ ba59cd42
This diff is collapsed.
source/components/stylesheet/form.mjs
+ 6
− 13
View file @ ba59cd42
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../dom/attributes.mjs"; import {addAttributeToken} from "../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
export { FormStyleSheet }; export {FormStyleSheet}
/** /**
* @private * @private
...@@ -22,17 +22,10 @@ export { FormStyleSheet }; ...@@ -22,17 +22,10 @@ export { FormStyleSheet };
const FormStyleSheet = new CSSStyleSheet(); const FormStyleSheet = new CSSStyleSheet();
try { try {
FormStyleSheet.insertRule( FormStyleSheet.insertRule(`
`
@layer form { @layer form {
input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px} input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment