feat: add on/off action to toggle switch #207

source/components/form/style/toggle-switch.pcss

@@ -16,18 +16,15 @@
         outline-offset: 2px;
     }
 
-
     & .switch {
         position: relative;
-        height: 2.5em;
-        border-width: thin;
+        border-width: var(--monster-border-width);
         border-style: var(--monster-border-style);
         transition: background-color 0.2s;
         display: inline-grid;
         grid-template-columns: 1fr 1fr;
         box-sizing: border-box;
         width: 100%;
-        
     }
 
     & .label {
@@ -35,10 +32,8 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        height: 2.5em;
         display: block;
         text-align: center;
-        line-height: 2.5em;
         user-select: none;
         padding: 0 0.2em;
     }
@@ -69,7 +64,6 @@
         visibility: hidden;
     }
 
-
     & .switch[data-monster-state="on"] .switch-slider {
         transform: translateX(100%);
 

source/components/form/toggle-switch.mjs

@@ -38,18 +38,6 @@ export { ToggleSwitch };
  */
 const switchElementSymbol = Symbol("switchElement");
 
-/**
- * @private
- * @type {symbol}
- */
-const switchElementSymbolOn = Symbol("switchElementOn");
-
-/**
- * @private
- * @type {symbol}
- */
-const switchElementSymbolOff = Symbol("switchElementOff");
-
 /**
  * @type {string}
  */
@@ -96,6 +84,9 @@ class ToggleSwitch extends CustomControl {
 	 * @property {Object} labels
 	 * @property {string} labels.on=specifies the label for the on state.
 	 * @property {string} labels.off=specifies the label for the off state.
+	 * @property {string} actions
+	 * @property {string} actions.on=specifies the action for the on state.
+	 * @property {string} actions.off=specifies the action for the off state.
 	 * @property {Object} templates
 	 * @property {string} templates.main=specifies the main template used by the control.
 	 *
@@ -121,12 +112,19 @@ class ToggleSwitch extends CustomControl {
 			templates: {
 				main: getTemplate(),
 			},
+			actions: {
+				on: () => {
+					throw new Error("the on action is not defined");
+				},
+				off: () => {
+					throw new Error("the off action is not defined");
+				},
+			}
 		});
 	}
 
 	/**
-	 *
-	 * @return {Monster.Components.Form.ToggleSwitch}
+	 * @return {ToggleSwitch}
 	 */
 	[assembleMethodSymbol]() {
 		const self = this;
@@ -363,9 +361,11 @@ function toggleValues() {
 	if (this.getOption("value") === this.getOption("values.on")) {
 		this.setOption("value", this.getOption("values.off"));
 		this?.setFormValue(this.getOption("value")); // set form value
+		this.getOption("actions.off")?.call(this);
 	} else {
 		this.setOption("value", this.getOption("values.on"));
 		this?.setFormValue(this.getOption("values.off")); // set form value
+		this.getOption("actions.on")?.call(this);
 	}
 
 	this.setOption("state", this.state);