box changes

Author: TerezzaB

j-Box/component.js

@@ -57,11 +57,14 @@ COMPONENT('box', 'zindex:12;padding:25;scrollbar:1;scrolltop:1;style:1;align:cen
 	};
 
 	self.cancel = function() {
-		config.cancel && self.EXEC(config.cancel, self.hide);
-		self.hide();
+		if (config.cancel)
+			self.EXEC(config.cancel, self.hide);
+		else
+			self.hide();
 	};
 
 	self.hide = function() {
+		config.close && self.EXEC(config.close);
 		if (config.independent)
 			self.hideforce();
 		self.set('');

j-Box/component.json

@@ -1,6 +1,6 @@
 {
 	"datecreated": "2022-01-12T20:15:00.000Z",
-	"dateupdated": "2023-01-08T19:44:00.000Z",
+	"dateupdated": "2023-01-18T10:44:00.000Z",
 	"name": "j-Box",
 	"tags": [
 		"large",

j-Box/example.html

@@ -1,6 +1,6 @@
-<div data---="box__common.form__if:user;width:500;title:Title;submit:userform_submit" class="hidden">
+<ui-component name="box" path="common.form" config="if:user;width:500;title:Title;submit:userform_submit" class="hidden">
 	<nav>
-		<button><i class="fa fa-angle-down"></i>Menu</button>
+		<button><i class="ti ti-angle-down"></i>Menu</button>
 	</nav>
 	<div class="padding">
 		SOME CONTENT
@@ -9,7 +9,7 @@
 		<button name="submit">SUBMIT</button>
 		<button name="cancel">CANCEL</button>
 	</nav>
-</div>
+</ui-component>
 
 <script>
 

j-Box/readme.md

@@ -26,7 +26,7 @@ __Configuration__:
 - `background {Boolean}` optional, enables/disables background (default: `true`)
 - `transparent {Boolean}` optional, all elements on the background of the box will be clickable (default: `false`)
 - `align {String}` optional, `center` (default), `left`, `right`
-
+- `close {String}` link to a global `function()` and it's executed if the form is closing
 The component supports dynamic evaluation of the content of `<script type="text/html">`. The example below contains a script with HTML and the component evaluates the content if the j-Form will be displayed (only once).
 
 ```html