@schukai/monster 4.89.0 → 4.91.0

package/source/components/form/select.mjs

@@ -3193,14 +3193,21 @@ function convertSelectionToValue(selection) {
 	}
 
 	if (value.length === 0) {
-		return "";
+		return this.getOption("type") === "checkbox" ? [] : "";
 	} else if (value.length === 1) {
+		if (this.getOption("type") === "checkbox") {
+			return value;
+		}
 		const v = value.pop();
 		if (v === undefined) return "";
 		if (v === null) return "";
 		return `${v}`;
 	}
 
+	if (this.getOption("type") === "checkbox") {
+		return value;
+	}
+
 	return value.join(",");
 }
 

package/source/components/form/style/field-set.pcss

@@ -9,6 +9,7 @@
 
 @import "../../style/control.pcss";
 @import "../../style/floating-ui.pcss";
+@import "./mixin/field-set-layout.pcss";
 
 [data-monster-role="container"] {
     container-type: inline-size;
@@ -71,299 +72,4 @@
     display: none !important;
 }
 
-slot {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 0.8rem;
-    accent-color: var(--monster-color-secondary-2);
-}
-
-.multiple-columns slot {
-    grid-template-columns: auto 1fr auto 1fr auto 1fr;
-}
-
-::slotted(label),
-::slotted(.label) {
-    color: var(--monster-color-primary-1);
-    border-bottom: thin dotted var(--monster-color-primary-1);
-    display: flex;
-    align-items: flex-start;
-    gap: 0.4rem;
-    justify-content: space-between;
-}
-
-::slotted(hr),
-::slotted(h1),
-::slotted(h2),
-::slotted(h3),
-::slotted(h4),
-::slotted(h5),
-::slotted(h6) {
-    grid-column: 1 / -1;
-    margin: 3rem 0 0.1rem !important;
-}
-
-::slotted(hr) {
-    border: none;
-    border-top: thin dotted var(--monster-color-gray-3);
-    margin: 1rem 0;
-    padding: 0;
-}
-
-::slotted(hr.delimiter) {
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
-::slotted(.grid-span-full) {
-    grid-column-end: -1;
-}
-
-::slotted(.grid-start-1),
-::slotted(.grid-start-2),
-::slotted(.grid-start-3),
-::slotted(.grid-start-4) {
-
-}
-
-::slotted(.grid-start-1) {
-    grid-column-start: 1;
-}
-
-::slotted(.grid-start-2) {
-    grid-column-start: 2;
-}
-
-::slotted(.grid-start-3) {
-    grid-column-start: 3;
-}
-
-::slotted(.grid-start-4) {
-    grid-column-start: 4;
-}
-
-::slotted(.grid-double-span) {
-    grid-column: span 3;
-}
-
-::slotted(.grid-to-end) {
-    grid-column-end: -1;
-}
-
-
-::slotted(monster-button),
-::slotted(monster-state-button),
-::slotted(monster-api-button),
-::slotted(monster-state-button),
-::slotted(monster-datasource-save-button) {
-}
-
-::slotted(input),
-::slotted(monster-button),
-::slotted(monster-state-button),
-::slotted(monster-api-button),
-::slotted(monster-state-button),
-::slotted(monster-datasource-save-button) {
-
-}
-
-::slotted(input[type="text"]),
-::slotted(input[type="password"]),
-::slotted(input[type="email"]),
-::slotted(input[type="number"]),
-::slotted(input[type="tel"]) {
-    height: -webkit-fill-available;
-}
-
-::slotted(input:not([type="checkbox"]):not([type="radio"])) {
-    width: 100%;
-    border-radius: var(--monster-theme-control-border-radius);
-    border-width: var(--monster-theme-control-border-width);
-    border-color: var(--monster-theme-control-border-color);
-    border-style: var(--monster-theme-control-border-style);
-
-    &[readonly] {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-}
-
-::slotted(input[readonly]:not([type="checkbox"]):not([type="radio"])) {
-    background-color: var(--monster-bg-color-primary-2);
-    color: var(--monster-color-primary-2);
-    cursor: default;
-}
-
-
-::slotted(input),
-::slotted(monster-toggle-switch),
-::slotted(select) {
-    min-height: 1.8rem;
-    padding: 0.5rem;
-    box-sizing: border-box;
-}
-
-::slotted(monster-password) {
-    min-height: 1.8rem;
-}
-
-::slotted(input[type="color"]) {
-    padding: 0 0.2rem;
-    min-height: calc(1.8rem + 0.4rem);
-    width: 100%;
-}
-
-::slotted(input[type="time"]),
-::slotted(input[type="date"]) {
-    padding: 0 0.2rem;
-    min-height: calc(1.8rem + 0.4rem);
-}
-
-::slotted(input[type="checkbox"]),
-::slotted(input[type="radio"]) {
-    width: 1.8rem;
-    min-height: calc(1.8rem + 0.4rem);
-    padding: 0 0.2rem;
-}
-
-::slotted(input[type="file"]) {
-    padding: 0.4rem;
-    min-height: calc(1.2rem );
-}
-
-::slotted(input),
-::slotted(monster-toggle-switch),
-::slotted(monster-password),
-::slotted(select),
-::slotted([data-monster-validation-wrapper]) {
-    align-self: end;
-}
-
-::slotted(monster-toggle-switch) {
-    width: 3rem;
-    padding: 0;
-}
-
-@container field-set (max-width: 1200px) {
-
-    .multiple-columns {
-
-        & slot {
-            grid-template-columns: auto 1fr auto 1fr;
-        }
-    }
-
-    ::slotted(h1),
-    ::slotted(h2),
-    ::slotted(h3),
-    ::slotted(h4),
-    ::slotted(h5),
-    ::slotted(h6) {
-        margin: 2.2rem 0 0.1rem !important;
-    }
-
-    ::slotted(.grid-double-span) {
-        grid-column: span 1;
-    }
-
-}
-
-@container field-set (max-width: 900px) {
-
-    .multiple-columns {
-
-        & slot {
-            grid-template-columns: auto 1fr;
-        }
-    }
-
-    ::slotted(h1),
-    ::slotted(h2),
-    ::slotted(h3),
-    ::slotted(h4),
-    ::slotted(h5),
-    ::slotted(h6) {
-        margin: 1.8rem 0 0.1rem !important;
-    }
-
-    ::slotted(.grid-double-span) {
-        grid-column: span 1;
-    }
-
-}
-
-@container field-set (max-width: 500px) {
-    slot {
-        grid-template-columns: 1fr;
-        gap: 0;
-    }
-
-    ::slotted(h1),
-    ::slotted(h2),
-    ::slotted(h3),
-    ::slotted(h4),
-    ::slotted(h5),
-    ::slotted(h6) {
-        grid-column: 1;
-        margin: 1.3rem 0 0.1rem !important;
-    }
-
-    ::slotted(select) {
-        grid-column: 1;
-    }
-
-    ::slotted(div.wrapper),
-    ::slotted(input),
-    ::slotted(monster-toggle-switch),
-    ::slotted(monster-password),
-    ::slotted(textarea),
-    ::slotted(select) {
-        grid-column: 1;
-    }
-
-    ::slotted(monster-button),
-    ::slotted(monster-action-button),
-    ::slotted(monster-state-button),
-    ::slotted(monster-api-button),
-    ::slotted(monster-state-button),
-    ::slotted(monster-datasource-save-button) {
-        grid-column: 1;
-    }
-
-    ::slotted(h1),
-    ::slotted(h2),
-    ::slotted(h3),
-    ::slotted(h4),
-    ::slotted(h5),
-    ::slotted(h6) {
-        grid-column: 1
-    }
-
-    ::slotted(label),
-    ::slotted(.label) {
-        padding-top: 1rem;
-        border-bottom: none;
-    }
-
-    .multiple-columns {
-        & slot {
-            grid-template-columns: 1fr;
-        }
-
-    }
-
-    ::slotted(.grid-start-1),
-    ::slotted(.grid-start-2),
-    ::slotted(.grid-start-3),
-    ::slotted(.grid-start-4),
-    ::slotted(.grid-span-full) {
-        grid-column: 1 !important;
-    }
-
-    ::slotted(.grid-double-span) {
-        grid-column: span 1 !important;
-    }
-
-}
+@mixin fieldSetSlotLayout;