upLG

assets/toolkit/toolkit.css

@@ -10,10 +10,11 @@
     position: relative;
     pointer-events: none;
     line-height: 1.5em;
-    --kit-field-focus-label-zoom-ratio: 0.875;
-    --kit-field-line-padding: 3px;
+    --kit-field-focus-label-zoom-ratio: 1;
+    --kit-field-line-padding: 0.1875em;
     --line-height-ratio: 1.5;
     --kit-field-check-mark-stroke-dash-ratio: 45;
+    font-family: var(--kit-font-family);
 }
 
 .kit-field__input {
@@ -217,8 +218,8 @@
     left: 0;
     color: var(--kit-color-text);
     pointer-events: none;
-    /*-moz-transition: font 0.15s, top 0.15s, color 0.15s;*/
-    /*transition: font 0.15s, top 0.15s, transform 0.15s, color 0.15s;*/
+    -moz-transition: font 0.15s, top 0.15s, color 0.15s;
+    transition: font 0.15s, top 0.15s, color 0.15s;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -259,7 +260,7 @@
 .kit-field input.focus ~.kit-field__label {
     top: 0;
     transform: translate(0, 0);
-    font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
+    font-size: calc(1em * var(--kit-field-focus-label-zoom-ratio, 1));
     color: var(--kit-color-primary);
 }
 .kit-field textarea:focus ~.kit-field__hr:after,
@@ -328,8 +329,7 @@
     top: 100%;
     left: 0;
     width: 100%;
-    font-size: 11px;
-    line-height: 20px;
+    font-size: 0.75em;
     color: var(--kit-color-error);
     opacity: 0;
     visibility: hidden;
@@ -382,7 +382,7 @@
 }
 .kit-field__icon {
     position: absolute;
-    top: calc(var(--kit-field-line-padding) + var(--line-height-ratio) * var(--font-size) / 2);
+    top: calc(var(--kit-field-line-padding) + var(--line-height-ratio) * 1em / 2);
     transform: translate(0, -50%);
     left: 0;
     width: 1em;
@@ -493,7 +493,7 @@
     position: relative;
     cursor: pointer;
     /* line-height: 1em; */
-    min-height: calc(var(--font-size) * 1.5 + var(--kit-field-line-padding) * 2);
+    min-height: calc(1em * 1.5 + var(--kit-field-line-padding) * 2);
     padding-bottom: var( --kit-field-line-padding);
     padding-top: var( --kit-field-line-padding);
 }
@@ -574,7 +574,7 @@
 
 .kit-field input[type='checkbox'] ~.kit-field__message
 {
-    padding-left: 28px;
+    padding-left: calc(1.75em / 0.75);
 }
 .kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon {
     /*border-color: var(--kit-color-primary);*/

assets/toolkit/toolkit.js

@@ -65,6 +65,7 @@ __PluginManager__.register('toolkit', function(require, exports, module, global)
                     }
                 }, 'json')
                     .done(function (response) {
+
                         // console.log('done');
                         // console.log(response);
                     })
@@ -73,6 +74,24 @@ __PluginManager__.register('toolkit', function(require, exports, module, global)
                         console.log(response);
                     })
                     .always(function (response) {
+
+                        if(e.target.dataset.hasOwnProperty('jsKitFormSubmit')){
+                            try {
+                                eval(e.target.dataset.jsKitFormSubmit);
+                            } catch (e) {
+                                
+                            }
+                        }
+
+                        var event = new CustomEvent("onJsKitFormSubmit", {
+                            "detail": {
+                                response:response,
+                                form:e.target,
+                            }
+                        });
+                        //var event = new Event("jsKitFormSubmit", {bubbles: false, cancelable: false, composed: false});
+                        document.dispatchEvent(event);
+
                         // console.log('always');
                         // console.log(response);
                     });
@@ -217,15 +236,20 @@ __PluginManager__.register('toolkit', function(require, exports, module, global)
             formNode = $(formNode);
             console.log(formNode);
             var unknownMessage = [];
-            var msg = [];
+            var msg, name;
             var inputNode,
                 key;
             if (Object.keys(messageObject).length) {
 
                 for (key in messageObject) {
                     msg = messageObject[key];
-                    console.log(msg);
-                    inputNode = formNode.find("[name='" + key + "']");
+                    name = key;
+                    if(support.isObject(msg)){
+                        name = msg?.code;
+                        msg = msg?.message;
+                    }
+                    console.log('error: ', name, msg)
+                    inputNode = formNode.find("[name='" + name + "']");
 
                     if (inputNode.length) {
                         if (type === 'success') {
@@ -239,11 +263,9 @@ __PluginManager__.register('toolkit', function(require, exports, module, global)
                         unknownMessage[unknownMessage.length] = msg;
                     }
                 }
-                console.log('unknownMessage');
-                console.log(unknownMessage);
+                console.log('unknownMessage', unknownMessage);
                 var messageNode = formNode.find('.kit-message');
                 if (unknownMessage.length) {
-                    console.log('1');
                     console.log(messageNode.length ? 'messageNode.length' : 'no messageNode.length');
                     messageNode.length && messageNode.html(unknownMessage.join('<br>')).addClass('kit-message-' + type);
                 } else {