fix

assets/config/config.js

@@ -0,0 +1,5 @@
+window.kit = window.kit || {};
+kit.config = kit.config || {};
+
+kit.config.defaultPath = '/local/templates.dev/kit/assets';
+kit.config.requiredDependencies = ['bsCore', 'toolkit'];

assets/core/core.js

@@ -5,7 +5,6 @@
  */
 window.kit = window.kit || {};
 (function(global){
-    var stackPromise = {};
     var stateList = {
         undefined: 0,
         registered: 1,
@@ -464,9 +463,23 @@ window.kit = window.kit || {};
     };
 
     __proto.exec = function (deps, callback, argArr = []) {
+
+        if(typeof deps === 'function') {
+            argArr = callback;
+            callback = deps;
+            deps = [];
+        }
+
         if(!Array.isArray(deps) ) {
             deps = [deps];
         }
+
+        if(typeof argArr === 'undefined') {
+            argArr = [];
+        }
+
+        deps = Array.from(new Set(deps.concat(global.config.requiredDependencies)));
+
         if(typeof callback !== 'function') {
             return undefined;
         }
@@ -544,6 +557,10 @@ window.kit = window.kit || {};
         return undefined;
     };
 
+    var defaultConfig = {
+        defaultPath: '',
+        requiredDependencies: [],
+    };
     var manager = new PluginManager(global);
     manager.register('PluginManager', {
         alias: 'pm',
@@ -553,6 +570,17 @@ window.kit = window.kit || {};
         }
     });
     manager.install('PluginManager');
+    manager.register('config', {
+        alias: 'pm',
+        type: moduleTypeList.loader,
+        loader: function(module, exports, require, global) {
+            console.warn('global.config', JSON.stringify(global.config));
+            global.config = global.config || {};
+            global.config = Object.assign(defaultConfig, global.config);
+        }
+    });
+    manager.install('config');
+
     global.PluginManager = manager;
     global.exec = manager.exec.bind(manager);
     global.require = manager.require.bind(manager);

assets/core/core.register.js

@@ -1,6 +1,6 @@
 kit.PluginManager.registerPlugins({
     menu: {
-        path: '/local/templates.dev/kit/assets/menu',
+        path: kit.config.defaultPath + '/menu',
         module: '/menu.js',
         css: [
             '/menu.css'
@@ -9,28 +9,28 @@ kit.PluginManager.registerPlugins({
         deps: ['lib', 'align', 'utils']
     },
     lib: {
-        path: '/local/templates.dev/kit/assets/lib',
+        path: kit.config.defaultPath + '/lib',
         module: '/lib.js',
         type: 'loader',
     },
     align: {
-        path: '/local/templates.dev/kit/assets/align',
+        path: kit.config.defaultPath + '/align',
         module: '/align.js',
         type: 'loader',
     },
     utils: {
-        path: '/local/templates.dev/kit/assets/utils',
+        path: kit.config.defaultPath + '/utils',
         module: '/utils.js',
         type: 'loader',
     },
     jquery: {
-        path: '/local/templates.dev/kit/assets/jquery',
+        path: kit.config.defaultPath + '/jquery',
         module: '/jquery.min.js',
         type: 'loader',
         alias: '$',
     },
     tooltip: {
-        path: '/local/templates.dev/kit/assets/tooltip',
+        path: kit.config.defaultPath + '/tooltip',
         module: '/tooltip.js',
         type: 'loader',
         css: '/tooltip.css',
@@ -40,13 +40,13 @@ kit.PluginManager.registerPlugins({
         deps: ['popper', 'bsCore'],
     },
     popper: {
-        path: '/local/templates.dev/kit/assets/popper',
+        path: kit.config.defaultPath + '/popper',
         alias: 'popper.js',
         module: '/popper.js',
         type: 'loader',
     },
     bsCore: {
-        path: '/local/templates.dev/kit/assets/bsCore',
+        path: kit.config.defaultPath + '/bsCore',
         module: '/bsCore.js',
         type: 'loader',
         css: [
@@ -54,20 +54,20 @@ kit.PluginManager.registerPlugins({
         ]
     },
     mask: {
-        path: '/local/templates.dev/kit/assets/mask',
+        path: kit.config.defaultPath + '/mask',
         module: '/mask.js',
         type: 'loader',
         deps: ['jquery'],
     },
     toolkit: {
-        path: '/local/templates.dev/kit/assets/toolkit',
+        path: kit.config.defaultPath + '/toolkit',
         module: '/toolkit.js',
         type: 'loader',
         css: ['/toolkit.css'],
         deps: ['jquery', 'mask'],
     },
     modal: {
-        path: '/local/templates.dev/kit/assets/modal',
+        path: kit.config.defaultPath + '/modal',
         module: '/modal.js',
         type: 'loader',
         css: [
@@ -92,7 +92,7 @@ kit.PluginManager.registerPlugins({
         },
     },
     collapse: {
-        path: '/local/templates.dev/kit/assets/collapse',
+        path: kit.config.defaultPath + '/collapse',
         module: '/collapse.js',
         type: 'loader',
         css: [
@@ -106,7 +106,7 @@ kit.PluginManager.registerPlugins({
         },
     },
     datepicker: {
-        path: '/local/templates.dev/kit/assets/datepicker',
+        path: kit.config.defaultPath + '/datepicker',
         module: '/js/datepicker.js',
         type: 'loader',
         css: [
@@ -136,10 +136,18 @@ kit.exec([], function () {
     if (/complete|interactive|loaded/.test(document.readyState)) {
         // In case the document has finished parsing, document's readyState will
         // be one of "complete", "interactive" or (non-standard) "loaded".
+        console.log('1');
         _init();
     } else {
+        console.log('2');
         // The document is not ready yet, so wait for the DOMContentLoaded event
         document.addEventListener("DOMContentLoaded", _init);
-
     }
+    console.log('readyState', document.readyState);
+    document.addEventListener("DOMContentLoaded", function () {
+        console.log('DOMContentLoaded', document.readyState);
+    });
+    $(function(){
+        console.log('$', document.readyState, typeof kit.toolkit);
+    });
 });

assets/flex-kit/flex-kit.css

@@ -105,12 +105,15 @@
     padding-left: calc(var(--gap) / 2);
     padding-right: calc(var(--gap) / 2);
 }
-.flex-list > .flex-list-item {
+.flex-list-item {
+    --gap-row: var(--gap);
     --col-width: calc((100%) / var(--col-count));
+}
+.flex-list > .flex-list-item {
     width: var( --col-width) !important;
     max-width: var( --col-width) !important;
     flex-basis: var( --col-width) !important;
-    margin-bottom: var(--gap);
+    margin-bottom: var(--gap-row) !important;
 }
 .flex-list-item:before,
 .flex-list-item:after {

assets/toolkit/toolkit.css

@@ -91,7 +91,7 @@
 
 
 }
-* {
+*, :after, :before {
     box-sizing: border-box;
 }
 
@@ -670,7 +670,7 @@
     -moz-animation: ball-clip-rotate 0.75s linear infinite;
     animation: ball-clip-rotate 0.75s linear infinite;
 }
-.kit-button,
+
 .kit-button.kit-button--secondary {
     --kit-color-button-text-disabled: var(--kit-color-secondary-text, var(--kit-color-text));
     --kit-color-button-content-disabled: var(--kit-color-secondary-w1, var(--kit-color-secondary));
@@ -692,7 +692,7 @@
 
 .kit-button.kit-button--primary {
     --kit-color-button-text-disabled: var(--kit-color-primary-text, var(--kit-color-text));
-    --kit-color-button-content-disabled: var(--kit-color-primary-w1, var(--kit-color-primary));
+    --kit-color-button-content-disabled: var(--kit-color-primary-w3, var(--kit-color-primary));
     --kit-color-button-material-disabled: var(--kit-color-primary);
 
     --kit-color-button-text-default: var(--kit-color-primary-text, var(--kit-color-text));
@@ -795,6 +795,9 @@
     transition: background 0.3s, box-shadow 0.3s, color 0.3s;
     position: relative;
 }
+.kit-button * {
+    pointer-events: none;
+}
 .kit-button:hover,
 .kit-button:focus {
     --kit-color-button-text: var(--kit-color-button-text-hover);
@@ -832,6 +835,8 @@
 .kit-button__label {
     --line-clamp: 1;
     white-space: normal;
+    text-transform: uppercase;
+    font-size: 0.9em;
 }
 .kit-button.kit-disabled,
 .kit-button:disabled,
@@ -863,7 +868,7 @@
 }
 .kit-button.kit-button--radius,
 .kit-button.kit-button--radius:after {
-    border-radius: 3px;
+    border-radius: 2px;
 }
 .kit-button.kit-button--round,
 .kit-button.kit-button--round:after {
@@ -1025,10 +1030,21 @@ select.kit-field__input:disabled ~.kit-field__hr {
 .kit-dropdown__option:hover {
     background: #e5e5e5;
 }
-.kit-dropdown__option.kit-active {
+.kit-dropdown__option.kit-active:not(.kit-select-placeholder) {
     background: #2074e7;
     color: #fff;
 }
+.kit-dropdown__option.kit-select-placeholder {
+    color: #919191;
+    cursor: auto;
+    font-style: italic;
+    font-size: 0.8em;
+    padding: 5px 10px;
+    pointer-events: none;
+}
+.kit-dropdown__option.kit-select-hidden {
+    display: none;
+}
 .kit-select--open .kit-select__dropdown {
     opacity: 1;
     visibility: visible;

assets/toolkit/toolkit.js

@@ -349,7 +349,17 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
         function changeHandler(e) {
             var select = e.target;
             changeSelect(select);
-            console.log('changeHandler');
+        }
+
+
+        function __dirtyTests(value, dirtyValidTestData) {
+            var r = true;
+            dirtyValidTestData.forEach(function(attr, i){
+                if(attr.name === 'data-dirty-min') {
+                    r = r && (Number(value) >= Number(attr.value))
+                }
+            });
+            return r;
         }
 
         /**
@@ -357,7 +367,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
          * @param select {HTMLElement}
          */
         function changeSelect(select) {
-            if (hasClass(select, 'kit-field__input') && select.tagName == 'SELECT') {
+            if (hasClass(select, 'kit-field__input') && select.tagName === 'SELECT') {
                 var selected = select.querySelectorAll('option:checked')[0];
                 var data = {};
                 var dataAttrs = [];
@@ -368,32 +378,35 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                     });
                 }
 
+                var dirtyValidTestData = [];
+                dirtyValidTestData = dirtyValidTestData.filter.call(select.attributes, function (attr) {
+                    return (/^data-dirty-/.test(attr.name)
+                    );
+                });
+
                 var isMultiple = select.hasAttribute('multiple');
 
                 var parent = select.parentNode;
 
                 var display = select.parentNode.querySelector('.kit-field__display');
 
-                var bDisplay = true;
+                var bDirty = !!selected;
-
-                //if(parent && parent.classList.contains('kit-field--select-link') && isMultiple) {
                 if(isMultiple) {
-                    bDisplay = false;
+                    bDirty = false;
+                }
+                if(!isMultiple) {
+                    bDirty = bDirty && __dirtyTests(select.value, dirtyValidTestData);
                 }
 
                 display.textContent = '';
 
-                if(bDisplay && selected) {
+                if(bDirty) {
                     display.textContent = selected.textContent;
                 }
 
                 removeClass(parent, 'kit-select--open');
 
-                if(selected) {
+                select.setAttribute('data-dirty', bDirty?'true':'false');
-                    select.setAttribute('data-dirty', 'true');
-                } else {
-                    select.setAttribute('data-dirty', 'false');
-                }
 
                 removeClass(select, 'kit-field--error');
 
@@ -468,28 +481,18 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                 var textContent = item.textContent;
                 var dropdownInnerIcon = document.createElement('span');
                 var dropdownInnerIconCheck = '<svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>';
+                var dataClass = String(item.getAttribute('data-class'));
                 addClass(dropdownInnerIcon, 'kit-field__icon');
                 $(dropdownInnerIcon).append(dropdownInnerIconCheck);
                 dropdownInner.textContent = textContent;
                 dropdownInner.setAttribute('data-index', i);
 
                 addClass(dropdownInner, 'kit-dropdown__option');
+                addClass(dropdownInner, dataClass);
 
                 if (isMultiple) {
                     dropdownInner.appendChild(dropdownInnerIcon);
                 }
-                // if (item.getAttribute( "block_selected_off" ) == "active") {
-                // 	addClass(dropdownInner, 'block_selected_off');
-                // 	dropdownInner.appendChild(dropdownInnerIcon);
-                // }
-                // if (item.getAttribute( "block_selected" ) == "active") {
-                // 	addClass(dropdownInner, 'block_selected');
-                // 	dropdownInner.appendChild(dropdownInnerIcon);
-                // }
-                // if (item.getAttribute( "block_selected" ) == "noActive") {
-                // 	addClass(dropdownInner, 'block_selected_no');
-                // 	dropdownInner.appendChild(dropdownInnerIcon);
-                // }
                 if (item.disabled) {
                     addClass(dropdownInner, 'kit-disabled');
                 }
@@ -731,7 +734,6 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                 return _this.changeFiled(e);
             }, false);
             document.addEventListener('change', function (e) {
-                console.log('change');
                 return _this.switchField(e);
             }, false);
 

templates/button.php

@@ -14,6 +14,7 @@ $preloader = \Wt\Core\Tools::isTrue($arParams['PRELOADER']);
     <?if(\Wt\Core\Tools::isTrue($arParams['DISABLED'])){?>disabled<?}?>
     aria-label="<?=$arParams['LABEL']?>"
     type="<?=$arParams['TYPE']?:'button'?>"
+    <?if($arParams['ID']){?>id="<?=$arParams['ID']?>"<?}?>
     <?if($arParams['TITLE']){?>title="<?=$arParams['TITLE']?>"<?}?>
     <?if($arParams['NAME']){?>name="<?=$arParams['NAME']?>"<?}?>
     <?if($arParams['ENTITY']){?>data-entity="<?=$arParams['ENTITY']?>"<?}?>

templates/modal.php

@@ -2,12 +2,12 @@
 
 
 ?>
-<div class="modal fade" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true">
+<div class="modal fade <?=$arParams['WRAP_CLASS']?>" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title"><?=$arParams['TITLE']?></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+                <button type="button" class="btn-close kit-icon" data-bs-dismiss="modal" aria-label="Close">
                         <svg class xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
                 </button>
                 <?=$arParams['HEADER']?>

templates/select.php

@@ -109,11 +109,7 @@ foreach ($arParams['OPTIONS'] as $option) {
         class="kit-field__input <?=$arParams['CLASS']?> <?=$arParams['ADD_CLASS']?>"
         <?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR'])?>
         <?if($arParams['PLACEHOLDER']){?>data-placeholder="<?=$arParams['PLACEHOLDER']?>"<?}?>
-    >
+    ><?echo $optionsHtml?:$arParams['OPTIONS_HTML']; ?></select>
-        <?
-            echo $optionsHtml?:$arParams['OPTIONS_HTML'];
-        ?>
-    </select>
     <?
     if($arParams['HINT']){
         app()->service()->templater()->render('kit:field/hint', ['TITLE' => $arParams['HINT']]);