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 sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
export const pnpxBin = "/nix/store/90rp76gcxqz2cdavfpz7cbpnhs869hkm-pnpm-8.15.5/bin/pnpx";
export const nodeBin = "/nix/store/bmmjbvb8hishfrg78ygjlynpq3ikpl39-nodejs-20.15.1/bin/node";
export const pnpxBin = "/nix/store/hd8c9fhdqv36nyh5zg4z32ccficlz9n8-pnpm-8.15.5/bin/pnpx";
export const nodeBin = "/nix/store/k5inwzpp6a0295pd3nfckk9hq8wmifhz-nodejs-20.15.1/bin/node";
export const license = "/**" + "\n" +
" * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved." + "\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 {
initControlReferences.call(this);
initEventHandler.call(this);
updateExtendedFields.call(this);
updateColumns.call(this);
return this;
}
......@@ -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');
......@@ -247,6 +248,9 @@ class FieldSet extends CustomControl {
}
}
/**
* @private
*/
function updateExtendedFields() {
const nodes = getSlottedElements.call(this, "", "extended");
if (nodes.size > 0) {
......@@ -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
* @return {initEventHandler}
* @fires Monster.Components.Form.event:monster-field-set-clicked
* @fires event:monster-field-set-clicked
*/
function initEventHandler() {
this[toggleSwitchElementSymbol].setOption(
......
source/components/form/style/field-set.pcss
+ 164
− 70
View file @ ba59cd42
@import "../../style/color.pcss";
@import "../../style/theme.pcss";
@import "../../style/border.pcss";
@import "../../style/form.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss';
......@@ -57,9 +58,12 @@ slot {
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) {
color: var(--monster-color-primary-1);
border-bottom: thin dotted var(--monster-color-primary-1);
}
......@@ -79,18 +83,98 @@ slot {
::slotted(monster-button),
::slotted(monster-state-button),
::slotted(monster-select),
::slotted(monster-api-button),
::slotted(monster-state-button),
::slotted(monster-datasource-save-button) {
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) {
slot {
grid-template-columns: 1fr;
gap: 0;
}
::slotted(h1),
::slotted(h2),
::slotted(h3),
......@@ -101,8 +185,7 @@ slot {
}
::slotted(label),
::slotted(.label)
{
::slotted(.label) {
padding-top: 1rem;
border-bottom: none;
}
......@@ -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 @@
import {addAttributeToken} from "../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
export { FormStyleSheet };
export {FormStyleSheet}
/**
* @private
......@@ -22,17 +22,10 @@ export { FormStyleSheet };
const FormStyleSheet = new CSSStyleSheet();
try {
FormStyleSheet.insertRule(
`
FormStyleSheet.insertRule(`
@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}
}`,
0,
);
}`, 0);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(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